/*----- THE CHURCH OF CHRIST-----*/

@charset "UTF-8";

article, aside, footer, header, main, nav, section {
display: block;
}

html, body, h1, h2, h3, ul, li, a, p,
article, aside, footer, header, main, nav, section {
	padding: 0px;
	margin: 0px;
}

h3 {font-weight:normal;}

p {word-spacing: normal;}

.test {word-wrap: break-word;}

p {word-spacing: 1%;}

header {max-width: 1024px; width: 100%;}

h1 {font-weight:normal; color:white;}

.small {line-height: 0.5;}

article hr { background-color: #221e18; height: 1px; border: 0; }

/* Colour Classes */

.color {color:#ffe4b2;}

#print { display: none; } 
#noprint { display: block; }

.not-active {
   pointer-events: none;
   cursor: default;
}

/* Image zoom on honver */
.img-zoom {
    width: 260px;
    height:320px;
    position:relative;
    z-index:9;
    border:1px solid #221e18;
    background-color:#e4e4e4;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}
 
.transition {
    -webkit-transform: scale(2); 
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

aside img-zoom {background-color:red;}

.btn-group button {
    background-color: #666666;
    border: 1px solid #e4e4e4;
    border-radius:7px;
    color: white;
    font-size:16px;
    padding: 10px 24px;
    cursor: pointer;
    float: left;
    outline:none;
}

/* Clear floats (clearfix hack) */
.btn-group:after {
    content: "";
    clear: both;
    display: table;
}


/* Add a background color on hover */
.btn-group button:hover {
    background-color: #4c4435;
    border-radius:7px;
}

.btn-group-blog button {
    background-color: #0c0c0c;
    border: 1px solid #242424;
    border-radius:7px;
    color: white;
    font-size:16px;
    text-align:center;
    padding: 10px 24px;
    cursor: pointer;
    float: inherit;
    outline:none;
}

/* Clear floats (clearfix hack) */
.btn-group-blog:after {
    content: "";
    clear: both;
    display: table;
}

/* Add a background color on hover */
.btn-group-blog button:hover {
    background-color: #666666;
    border-radius:7px;
}

.btn-group-vertical button {
    background-color: #0c0c0c;
    border: 1px solid #515151;
    border-radius:7px;
    color:#6e6e6e;
    font-size:15px;
    padding: 6px 14px;
    margin-bottom:4px;
    cursor: pointer;
    width: 100%;
    display: block;
    outline:none;
}

/* Add background color on hover */
.btn-group-vertical button:hover {
    background-color:#191919;
    border-radius:7px;
    color:white;
}

/* Add font colour on a hover */
.btn-group-vertical a:hover {
    text-decoration:normal;
}

/* Outer */
.popup {
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.85);
    z-index:999999;
}
 
/* Inner */
.popup-inner {
    max-width:800px;
    width:90%;
    padding:40px;
    position:absolute;
    color:#c3c3c3;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    border-radius:7px;
    border:1px solid black;
    background:#2e2e2e;
}
 
/* Close Button */
.popup-close {
    width:30px;
    height:30px;
    padding-top:1px;
    display:inline-block;
    position:absolute;
    top:0px;
    right:0px;
    transition:ease 0.25s all;
   -webkit-transform:translate(50%, -50%);
    transform:translate(50%, -50%);
    
    border-radius:1000px;
    border:1px solid black;
    background:rgba(0,0,0,0.8);
    font-size:25px;
    text-align:center;
    line-height:100%;
    color:#ffe4b2;
}
 
.popup-close:hover {
    -webkit-transform:translate(50%, -50%) rotate(180deg);
    transform:translate(50%, -50%) rotate(180deg);
    padding-bottom:1px;
    background:rgba(0,0,0,1);
    text-decoration:none;
    border:1px solid black;
    color:#ffe4b2;
}

div.popup-inner p {font-size:px;}
div.popup-inner a {font-size:px;}

#topBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: 1px solid #666666;
    outline: none;
    background-color:black;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 7px;
}

#topBtn:hover {
    background-color:#202020;
    font-size:px;
}

.studies a {margin-left:10px; margin-right:10px; font-size:15px; text-align:left; padding:3px; border:1px solid #242424; border-radius:7px;}
div a.active {color:black !important; font-size:17px; background-color:#ffe4b2;}
div a:visited {}
#inner {width:90%; margin:0 auto;}


/* Blink */
.blink {
	-webkit-animation: blink 2.3s linear infinite;
	-moz-animation: blink 2.3s linear infinite;
	-ms-animation: blink 2.3s linear infinite;
	-o-animation: blink 2.3s linear infinite;
	 animation: blink 2.3s linear infinite;
}
@-webkit-keyframes blink {
	0% {opacity:1;}
	50% {opacity:1;}
	50.01% {opacity:0;}
	100% {opacity:0;}
}
@-moz-keyframes blink {
	0% {opacity:1;}
	50% {opacity:1;}
	50.01% {opacity:0;}
	100% {opacity:0;}
}
@-ms-keyframes blink {
	0% {opacity:1;}
	50% {opacity:1;}
	50.01% {opacity:0;}
	100% {opacity:0;}
}
@-o-keyframes blink {
	0% {opacity:1;}
	50% {opacity:1;}
	50.01% {opacity:0;}
	100% {opacity:0;}
}
@keyframes blink {
	0% {opacity:1;}
	50% {opacity:1;}
	50.01% {opacity:0;}
	100% {opacity:0;}
}
/* @end */


/* Blink */
.blink2 {
	-webkit-animation: blink 3.0s linear infinite;
	-moz-animation: blink 3.0s linear infinite;
	-ms-animation: blink 3.0s linear infinite;
	-o-animation: blink 3.0s linear infinite;
	 animation: blink 3.0s linear infinite;
}

@-webkit-keyframes blink {
	0% {opacity:1;}
	50% {opacity:1;}
	50.01% {opacity:0;}
	100% {opacity:0;}
}
@-moz-keyframes blink {
	0% {opacity:1;}
	50% {opacity:1;}
	50.01% {opacity:0;}
	100% {opacity:0;}
}
@-ms-keyframes blink {
	0% {opacity:1;}
	50% {opacity:1;}
	50.01% {opacity:0;}
	100% {opacity:0;}
}
@-o-keyframes blink {
	0% {opacity:1;}
	50% {opacity:1;}
	50.01% {opacity:0;}
	100% {opacity:0;}
}
@keyframes blink {
	0% {opacity:1;}
	50% {opacity:1;}
	50.01% {opacity:0;}
	100% {opacity:0;}
}
/* @end */

.spinner {margin: 20px auto 0; width: 70px; text-align: center;}
.spinner > div { width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both;}
.spinner .bounce1 {-webkit-animation-delay: -0.32s; animation-delay: -0.32s;}
.spinner .bounce2 {-webkit-animation-delay: -0.16s; animation-delay: -0.16s;}
@-webkit-keyframes sk-bouncedelay {0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) }}
@keyframes sk-bouncedelay {0%, 80%, 100% {-webkit-transform: scale(0); transform: scale(0);} 40% {-webkit-transform: scale(1.0); transform: scale(1.0);}}


.banner {
	background-image: url("/media/images/james-daniel-2017-jamestown.jpg");
    background-repeat:no-repeat;
    max-width:1022px;
    width:100%;
    height:300px;
    color:white;
	text-align:center;
	font-size:25px;
    font-weight:200;
	line-height:190%;
    margin-top:81px;
    margin-bottom:3px;
    z-index:100000;
    border:1px solid #242424;
    border-radius:7px;
}

.banner1 {
	background-image: url("/media/images/mybanner-jamestown-2017.jpg");
    background-repeat:no-repeat;
    max-width:1022px;
    width:100%;
    height:300px;
    color:white;
	text-align:center;
	font-size:25px;
    font-weight:200;
	line-height:190%;
    margin-top:81px;
    margin-bottom:3px;
    z-index:100000;
    border:1px solid #242424;
    border-radius:7px;
}

.banner2 {
	background-image: url("/media/images/banner8.jpg");
    background-repeat:no-repeat;
    max-width:1022px;
    width:100%;
    height:300px;
    color:white;
	text-align:center;
	font-size:25px;
    font-weight:200;
	line-height:190%;
    margin-top:81px;
    margin-bottom:3px;
    z-index:100000;
    border:1px solid #242424;
    border-radius:7px;
}

.banner3 {
	background-image: url("/media/images/james-daniel-banner.jpg");
    background-repeat:no-repeat;
    max-width:1022px;
    width:100%;
    height:288px;
    color:white;
	text-align:center;
	font-size:25px;
    font-weight:200;
	line-height:190%;
    margin-top:81px;
    margin-bottom:3px;
    z-index:100000;
    border:1px solid #242424;
    border-radius:7px;
}

.box {float:right; padding:10px; width:250px; background-color:#b5b5b5; margin-left:10px; border-radius:7px; text-align:justify; text-justify:inter-word; font-size:16px; word-spacing:.5px;}
.box2 {float:right; padding:35px 25px; width:270px; background-color:#0c0c0c; margin-left:20px; margin-bottom:10px; border-radius:7px; text-align:center; text-justify:inter-word; word-spacing:.5px;}

body {
	max-width: 1024px;
    width: 100%;
	margin:0 auto;
	font-family: sans-serif;
	font-size: 17px;
	line-height: 24px;
    overflow-x: hidden;
    background:black;
}

li a:hover {
        color: #ffffff;
        text-decoration: none;
}

section {
	background-color: #0c0c0c !important;
	margin-top:3px;
	padding: 10px;
    border:1px solid #242424;
    border-radius:7px;
}

article {
	background-color: #e4e4e4;
	margin-top:1px;
	padding: 15px 20px;
    border-radius:7px;
    color:#191919 !important;
}

main {
	max-width:739px;
    width:70.7%;
	float: left;
	margin-bottom: 6.9%;
}

aside {
	background-color: #0c0c0c;
	max-width: 285px;
    width:30%;
	float: right;
	padding:5px;
	margin-top:3px;
	line-height:25px;
    border:1px solid #242424;
    border-radius:7px;
}

aside a {color:#b5b5b5;}

aside a.tooltips hover {font-size:16px;}

aside a:focus {outline: none;}

aside p {text-align:center; font-size:14px;}

aside li a {margin:0; padding:0px; font-size:14px; text-align:center; color:#b5b5b5;}

aside a.current {color:#ffe4b2; font-size:15px;}

div.menu {background-color:#2c2c2c; margin:0px; padding:10px; text-align: center; font-size: 20px; line-height:30px;}


footer {
	clear:both;
    margin:0 auto;
    float:none;
    background-color:#0c0c0c;
    border:1px solid #242424;
    border-radius:7px;
	color:white;
	height:2%;
	text-align:center;
    padding-top:16px;
    padding-bottom:15px;
	position:fixed;
	bottom:0px;
	max-width:1022px;
    width:99%;
	z-index:100000;
    font-size:14px;
}

/* Style The Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    cursor: pointer;
}

img {max-width:100%;}

.centerImage {text-align:center; display:block;}

#playlist, audio {width:100%;}

li a{display:block;}
li a:hover{text-decoration:none; color:#ffe4b2; font-size:15px; font-weight:normal;}
li a.active{color:#ffe4b2;}
li a {outline:0;}

a.tooltips {
        position: relative;
        display: inline;
}
a.tooltips span {
        position: absolute;
        width:320px;
        color:black;
        font-size:17px;
        font-weight:normal;
        background:#ffe4b2;
        border:1px solid #515151;
        height:auto;
        line-height:22px;
        text-align: center;
        visibility:hidden;
        border-radius:5px;
        padding:15px;
}

a.tooltips span:after {
        content: '';
        position: absolute;
        top:100.01%;
        left:30%;
        margin-left:-8px;
        width:0; height: 0;
        border-top:8px solid #515151;
        border-right:8px solid transparent;
        border-left:8px solid transparent;
}
a:hover.tooltips span {
        visibility:visible;
        opacity: ;
        bottom:35px;
        left:30%;
        margin-left:-76px;
        z-index:100000;
}

a {
        color: #191919;
        text-decoration: none;
}


p a:hover {color:#ff2700;}

p span a:hover {color:black;}

div a:hover {font-weight:normal;}

div.mobile {display:none;}

.media-c {display:none;}

p.media {display:none;}

.media-a {display:none;}

.media-b {display:none;}

.render {display:none;}

.shade {color:#5a5a5a;}

.nav2 {display:none;}

.mobileaudio {display:none !important}

.nav3 {display:none;}

.originalA {display:none;}

body.home a.home, body.doctrine a.doctrine, body.posts a.posts, body.audio a.audio, body.study a.study {

    background-color:#ffe4b2; color:black; font-size:20px;}

body.about a.about {background-color:#ffe4b2; color:black; font-size:20px;}
body.blog a.blog {background-color:#b64d5a; color:white; font-size:20px;}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.center {
    text-align: center;
}

.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 6px 12px;
    text-decoration:none;
    transition:background-color .3s;
    border:1px solid #545454;
    border-radius:7px;
    margin:0 4px;
}

.pagination a.active {
    background-color: #0c0c0c;
    color: white !important;
    border-radius:7px;
}

.pagination a:hover:not(.active) {background-color:#919191; color:white !important;}


a.specialeffects:hover {
    background-color:#656565;
    border-radius:7px;
}

a.blog:hover {background-color:#b64d5a !important;}

/* Print Style Sheet */

@media print {
    html, body {
       display: none;  /* hide whole page */
    }
}


ul.nav {
    list-style-type:none;
    margin:0px;
    padding:5px;
    padding-bottom:15px;
    border-radius:7px;
    overflow-x:hidden;
    background-color:#0c0c0c;
    top:0%;
    position:fixed;
    z-index:99999;
    width:100%;
    max-width:1012px;
    border:1px solid #242424;
}

ul.nav li {display:inline-block;}

ul.nav li a {
    display:inline-block;
    color:#c9c9c9;
    text-align:center;
    padding:15px 15px;
    text-decoration:none;
    transition:0.5s;
    font-size:20px;
    border:1px solid #242424;
    border-radius:7px;
}

ul.nav li .a selected {
    background-color:#282828; display:inline-block;
}


/* Change background color of links on hover */
ul.nav li a:hover {background-color: #666666; color:white !important; border-radius:7px; z-index:99999; font-size:20px;}

/* Hide the list item that contains the link that should open and close the nav on small screens */
ul.nav li.icon {display:none;}

/* When the screen is less than 1663 pixels wide */
@media only screen and (max-width:1663px) {

.nav3 {display:inline-block;}
.original {font-size:20px !important;}

/* When the screen is less than 1024px height */
@media screen and (max-width:1280px), screen and (max-height:1024px) {

.sidebar {display:none;}
span.original {display:none;}

/* When the screen is less than 600px height */
@media screen and (max-width:800px), screen and (max-height:600px) {

.sidebar {display:none;}
.original {font-size:18px !important;}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Menu"). Show the list item that contains the link to open and close the nav (li.icon) */
@media only screen and (max-width:680px) {
  ul.nav li {display:none; background-color:black;}
  ul.nav li.icon {float:none; display: inline-block; margin-top:0;}

ul.nav {text-align:center; padding-left:9px; padding-top:15px; border-bottom:1px solid grey; font-size:25px;}

ul.nav {background-color:black !important;}

main {width:100%; overflow-x:hidden; margin-bottom:0%;}
.banner  {display:none;}
footer {display:none;}
aside {display:none;}
a.tooltips span {display:none;}
body {margin-top:19%;}
div.study main {margin-top:0;}
.mouseover {display:none;}
.message {display:none;}
.subtitle {display:none;}
ul.nav {border:none;}
.nav3 {display:inline-block;}
.original {display:none;}
.btn-group {display:none;}
.substitute {display:none;}
.media-c {display:inline;}
.mediaplus {display:none;}
span.original {display:none;}

/* The "responsive" class is added to the nav with JavaScript when the user clicks on the icon. This class makes the nav look good on small screens */
@media screen and (max-width:680px) {
    
  ul.nav.responsive {position:fixed; padding: 0; overflow:hidden; z-index:99999; background-color:black;}
  ul.nav.responsive li.icon {
    position: absolute;
  }
  
  ul.nav.responsive li {
    float: none;
    display:inline;
    top:1;
  }
  ul.nav.responsive li a {
    display:block;
    text-align:center;
    border-bottom:1px dotted grey;
  }
}

/* When the screen is less than 500 pixels wide */
@media only screen and (max-width:500px) {


footer {display:none;}
.mouseover {display:none;}
body {margin-top:20%;}
div.study body {margin-top:0;}
.subtitle {display:none;}
div.render-a {display:none;}
ul.nav {border:none;}
.render-a {display:none;}
.pagination a {padding:4px 8px;}
.nav3 {display:none;}
.italic {display:none;}
.original {display:none;}
div.study main {margin-top:0;}
.invisible {display:none;}
.image-a {width:130; height:147.5;}
.mediaplus {display:none;}

@media print {
    html, body {
       display: none;  /* hide whole page */
    }
}