/* CSS Document */
 body{margin:0 auto;padding:0;font-size: 0.95vw; font-family: Arial,sans-serif; /*vx - text that resizes according to brower */
 background: #404040; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#fff, #404040); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(	#fff, #404040); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#fff, #404040); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#fff, #404040); /* Standard syntax (must be last) */
	background-repeat: repeat-y;
	}
.clear{clear:both;}
 p,ul,li,a,h1,h2,h3,h4{margin:0;padding:0;}
 img.bor{border:#000000 solid 0.0769em;}
.wrap{margin:0 auto;width:100%;height:auto; border-right:0 solid #FFF;border-left:0 solid #FFF;display: block; }
.header{float:left;width:100%;height:auto;display:block;}
.title{float:left;width:100%;height:100%;display:block;}
*{
    box-sizing: border-box;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.backgroundgrad1 {
    background: #ccc; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#ccc, #fff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(	#ccc, #fff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ccc, #fff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ccc, #fff); /* Standard syntax (must be last) */
}
.backgroundgrad2 {
    background: #6385c5; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#6385c5, #90a8d4); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(	#6385c5,#90a8d4); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#6385c5,#90a8d4); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#6385c5, #90a8d4); /* Standard syntax (must be last) */
}
.backgroundgrad3 {
    background: #6385c5; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#6385c5, 	#fff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(	#6385c5,	#fff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#6385c5,	#fff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#6385c5, #fff); /* Standard syntax (must be last) */
	z-index: 1;
}
.backgroundgrad4 {
    background: #6385c5; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#fff, #6385c5); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(	#fff, #6385c5); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#fff, #6385c5); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#fff, #6385c5); /* Standard syntax (must be last) */
	z-index: 999;
}
.backgroundgrad5 {
    background: #ccc; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#fff, #ccc); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(	#fff, #ccc); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#fff, #ccc); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#000, #727272); /* Standard syntax (must be last) */
}
@media only screen and (min-width: 1000px) {
.col-1 {width: 8.33%; }
.col-10 {width: 83.33%; background-color:#ffffff;}
.col-12 {width:8.33%;}
}
@media only screen and (max-width: 999px) and (min-width: 650px) {
.col-1 {width:0%;display:none; }
.col-10 {width:100%;background-color:#ffffff;padding:0.769em;font-size: 1.2vw;}
.col-12 {width:0%;display:none;}
}
@media only screen and (max-width: 649px) {	
#pagewrapper {width:auto; overflow:hidden; max-width:auto;padding:0 em;} /*to keep the page in mobile from moving*/
[class*="col-"] {  /*responsive web design */
    float: left;
	padding:0;
}
.col-1 {width:0%;display:none; }
.col-10 {width:100%;background-color:#ffffff;padding:0;font-size: 2.2vw;}
.col-12 {width:0%;display:none;}
#desktopcompatible {width:0%;display:none;}
#mobilecompatible {display:block;width:100%;}
.conf-m {float:left;display:block; width:100%; font-size:1.0em; padding:1.5%;display:none;}
.mobileaccordion{display:block;width:100%; }
.searchbox-m{display:block;width:100%;}
.searchbox{display:none;}
.verse-m p{float:left;padding:1.5%; width:100%;color:#727272;font-size: 3.0vw;}
.verse p{display:none;}

/********************accordion***********************/
button.accordion {color: #FFF; cursor: pointer; padding: 1.0em; width: 100%; border: none; text-align: left; outline: none; font-size: 2em; font-weight:bold;transition: 0.4s;}
button.accordion.active, button.accordion:hover {background-color: #ddd;}
button.accordion:after { content: '\002B'; color: #fff; font-weight: bold; float: right;  margin-left: 0.4615em;}
button.accordion.active:after { content: "\2212";}
div.panel { padding: 0 1.3846em; background-color: white; font-size: 1.3em;  max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}
div.panel ul li{float:left; clear: both;width:100%;list-style: none; display: block;}
div.panel ul li a {padding:0 0 0 1.1538em;display:block; list-style:none;border-bottom:0.0769em dotted #CCC;
line-height:1.9231em;text-decoration:none;font-weight:bold;color:#727272;background-color: #ffffff;overflow:hidden;}
div.panel ul li a:hover{width:100%;height:100%;padding:0 0 0 1.1538em;display:block;border-bottom:0.0769em dotted #CCC;line-height:1.9231em;text-decoration:none; background-color: #f0d84f;
                        font-weight:bold;color:#727272;}

.languages-m a{color:#5087c5; font-weight: bold;}
.languages-m a:hover{color:#000000}
.mobilepanel {padding:0.769em;text-decoration:none; color:#727272;}
.mobilepanel a{text-decoration:none; color:#727272;}
.conclusion-m{float:right; width:100%;height:auto; display:block; color:#727272;font-size:1.2em; text-align: right;padding:0 0.769em 1.5385em 0;}
.conclusion-m a{position:relative;text-align: right;color:#000;}
.conclusion-m a:hover{color:#FFF;}
.toggle-m{float:left; width:100%;text-decoration: none;padding:0.769em 0 0.769em 0 ;text-align:center;}
.toggle-m a{text-decoration: none;text-align:center;color:#ccc; color:#fff; font-weight:bold;font-size:1.2em; }
}
/*********************************************************/
@media only screen and (min-width: 649px) {
	[class*="col-"] {
    float: left;
    padding: 1.1538em;
}
#desktopcompatible {width:100%;display:block;}
#mobilecompatible {width:0%;display:none;}
.wholebible-m {display:none;}
.conf-m {display:none;}
.title{float:left;width:50%;height:100%;display:block;}
img {max-width: 100%; height: auto;}
.searchbox{float:right;display:block;width:50%; top:0;}
.verse p{float:left;padding:0 0 0.769em 0; color:#727272;font-size:0.875em; width:100%;}
.verse-m p{display:none;}
#dropdownMenu > li {display:inline-block; height: 2.5em;    line-height: 2em;    padding: 0 0em;    text-decoration: none; }
#dropdownMenu li a{display: block;   height: 2.5em;  width:4em;  line-height: 2em;    padding: 0 0em;    text-decoration: none; }
#dropdownMenu ul {position: absolute; display: none;z-index: 999; padding: 0; }
#dropdownMenu li:hover ul {display: block;}
/* Main menu------------------------------------------*/
#dropdownMenu {display:inline-block; width:100%; list-style: none; font-family: Arial; overflow:hidden; background-image: url(Images/Menu.jpg);}
#dropdownMenu > li > a {color: #fff; font-weight:bold;}
#dropdownMenu > li:hover > a {background: #f09d28;color: #ffffff; } 
#dropdownMenu li:hover ul.dropdown {display: block; }    /*dropdown*/
#dropdownMenu a:active ul.dropdown {display: block; }    /*dropdown*/
#dropdownMenu > li:hover{background: #f09d28;}
#dropdownMenu li.parentmenu, #dropdownMenu li.parentmenu:hover 
{padding-top: 0.308em; width: 13.2em;border-bottom:0; text-align: center;color: #fff;font-weight: bold; }
#dropdownMenu a.parentmenu, #dropdownMenu a.parentmenu:hover 
{padding-top: 0.308em; width: 13.2em;border: 0; text-align: center; }
/* Submenu------------------------------------------*/
#dropdownMenu ul {background: #ffffff; list-style: none; box-shadow: 0 0.6154em 1.2308em 0 rgba(0,0,0,0.2);}
#dropdownMenu ul li a {color: #727272;}
#dropdownMenu ul li:hover a {background: #f0d84f; }
#dropdownMenu a.bord, #dropdownMenu a.bord:hover {border: 0.077em #d2d2d2; border-bottom: dotted 0.077em #d2d2d2; border-top: 0; border-right:solid 0.077em #d2d2d2; border-left:solid 0.077em #d2d2d2; 
                                                 height:auto; width: 18.2em;text-align:left;padding:0 0 0 1.1538em;}
#dropdownMenu { display: table;table-layout: auto; /* Container */}
#dropdownMenu > li { display: table-cell; vertical-align: middle; /* Each item is a "cell" */ white-space: nowrap; /* Prevent text from wrapping into multiple lines */}
#dropdownMenu > li > a { display: table-cell; vertical-align: middle; /* Each item is a "cell" */ white-space: nowrap; /* Prevent text from wrapping into multiple lines */}
/*clearfix*/
.sidemenu{float:left;background-color:#ffffff; display: block; float:left; width:20%; top:0.3846em;padding-top: 0.7692em;}
.menuheader{float:left;left:0;top:0.3846em;padding: 0.7692em; background-color: #7f7f7f ;width:96%;height:100%;display:block;
             text-decoration:none;font-weight:bold;color:#ffffff;font-size:1.1em; text-align:center;}
.bluetop{float:left; height:1.5385em; position:relative; width:96%;padding:0;display:block;
             border-left:solid 0.077em #727272; border-right:solid 0.077em #727272; border-bottom:none;}
.menu{float:left;position:relative;top:0;left:0;width:96%;  box-shadow: 0 0 1.2308em 0 rgba(0,0,0,0.6);}
.menu ul li{float:left; clear: both;list-style: none; display: block;width:100%;}
.menu ul li a{float:left;width:100%;height:100%;padding:0 0 0 1.1538em;display:block; border-bottom:0.077em dotted #CCC;
              line-height:2.308em;text-decoration:none;font-weight:bold;color:#727272;background-color: #ffffff;overflow:hidden;z-index:-1;
			  border-left:solid 0.077em #727272; border-right:solid 0.077em #727272; }
.menu ul li a:hover{width:100%;height:100%;padding:0 0 0 1.1538em;display:block;border-bottom:0.077em dotted #CCC;line-height:2.308em;text-decoration:none; background-color: #f0d84f;font-weight:bold;color:#727272;}
.bluebottom{float:left; height: 1.5385em; position:relative; 
bottom:0;width:96%;padding:0;display:block;border-left:solid 0.077em #727272;border-right:solid 0.077em #727272;}
.pagecurl{float:left;position:relative;top:-0.077em;right:0;width:96%;height:100%;display:block;padding-top:0;}

.centerpart{background-color:#ffffff; display: block; float:left; width:80%; padding-left:0.7692em;}
.topcenterleft{position:relative;float:left;width:72%; top:0;}
.audio a{float:left; padding:0.7692em 0 0.3846em 0;color:#727272;font-size:1.0em;font-weight:bold; text-decoration:none;}
.audio a:hover{color:#000000;}
.churchbackground {position:relative;float:left;display:block;background-size:cover;background-position:center center;background-image: url(Images/Church3.jpg);width:100%;height:18.462em;z-index:1;}
.con1 {position:absolute;right:-4%; top:5%; transform:translate(-10%, -2%); background-image: url(Images/graypinup.jpg); height:44%; width:25%; padding:2% 2% 0 2%; overflow:hidden;}
.con1 a{text-decoration:none; font-weight:bold; color:#1f5198;  }
.topcenterright{float:left;width:28%; top:0;left:0;padding:3.846em 0.7692em 0.7692em 0.7692em; text-align:center;}
.dimensions{width:90%; height:90%; border:0;}
.faq a{position:relative; padding-left:0.7692em;color:#727272;font-weight:bold;text-decoration: none; font-size:1.0em; overflow:visible ;text-align:center;}
.faq a:hover{color:#000000}
.rowdivider {float:left; display:block;width:100%; height:100%}

.columncontainer{display:table; width:100%;border-spacing:0.7692em 0; }
.column1 {display:table-cell;border:solid 0 #d2d2d2; width:31%;} /*columns to have equal height by setting it to table */
.column2 {display:table-cell;border:solid 0 #d2d2d2; width:40%;}
.column3 {display:table-cell;border:solid 0 #d2d2d2; width:29%;}

.cbm {width:100%;padding:0 0.7692em 0 0.7692em;}
.cbm a img{width:100%;float:left;}
.cbm a{text-decoration: none;text-align:left;color:#727272;font-size:1em; }
.cbm a:hover{color:#000000}

.lang{width:100%;}
.langheader{width:100%;text-align:center;padding:0.7692em 0 0.9em 0.7692em;color:#ffffff;font-size:1.1em;background-color: #727272;}
.spanish {float:left;width:100%;} 
.spanish a{padding:0.6154em 0.3846em 0.3846em 0.7692em;color:#5087c5;text-decoration:none;border-bottom:solid 0.077em #727272;font-weight:bold;}
.spanish a:hover{color:#000000}
.languagewriteup{float:left;width:100%;top:0;padding:0.3846em 0.3846em 0.3846em 0.7692em;color:#727272;text-decoration:none;border-bottom:solid 0.077em #727272;}
.languages{float:left;width:100%;}
.languages a{color:#5087c5; font-weight: bold;}
.languages a:hover{color:#000000}

.audiopage{float:left;width:100%;}
.audiowriteup{float:left;width:50%;padding:0.7692em 1.5385em 1.5385em 0.7692em;color:#727272;font-size:1em;text-decoration:none;}
.audiowriteup a{padding:0%;color:#727272;text-decoration:none;}
.audiowriteup a:hover{color:#000000}
.clear{clear:left;}
.audioimage {float:right;width:50%;padding-top:0.7692em;}

.jew{width:100%;padding:0 0.7692em 0 0.7692em;}
.jew a img{width:100%;float:left;}
.jew a{text-decoration: none;text-align:left;color:#727272;font-size:1em; }
.jew a:hover{color:#000000;}

.lastline{float:right; width:100%;height:auto; display:block; }
.conclusion{float:right; width:100%;height:auto; display:block;text-align: right;padding:0 0.7692em 1.5385em 0;}
.conclusion a{position:relative;font-size:1.0em;  color:#727272;  text-align: right;color:#819bcc;}
.conclusion a:hover{color:#000;}
.toggle{float:right;text-decoration: none;padding:0.7692em 0.7692em 0.7692em 0.7692em;text-align:center;width:100%;background-color: #727272;}
.toggle a{text-decoration: none;text-align:left;color:#fff;font-weight:bold; font-size:1.4em;}
.toggle-m {display:none;}
}