/********** TEMPLATE / NON_SITE-SPECIFIC MODIFICATIONS **********/

/* Color Tuning: */
/* Base color from sky background: #92C0F1 / HSV 210,39,94 */

body {
/*	color: #788487; HSV 191,11,52 */
	color: #36393d; /* HSV 210,11,24 */ 
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
/*	color: #222; HSV 0,0,13 */
	color: #181b1e; /* HSV 210,20,11 */
}

h1 {
	font-size: 2.0rem;
}

p {
	font-size: 1.0rem;
	line-height: 1.4;
}

a, .widget a {
/*	color: #505cfd;    HSV 235,68,99 */
/*	color: #5092FC;    HSV 216,68,98 */
/*	color: #0462F9;    HSV 217,98,98 (I prefer it darker) */ 
	color: #2367D3;    /* HSV 217,83,83 (I prefer it grayer) */ 
}

a:hover, .widget a:hover {
/*	color: #0416fc;    HSV 235,98,98 */
/*	color: #0462F9;    HSV 217,98,98 */ 
/*	color: #0450CC;   HSV 217,98,80 (I prefer it darker) */ 
	color: #1D55AF; /* HSV 217,83,68 (I prefer it grayer) */ 
}

.header .inner-nav > ul > li > a:hover {
/*	color: #BCBEC2;    HSV 220,3,76 */
	color: #A7AFBC; /* HSV 217,11,73 (I prefer a touch of color) */
}

.inner-nav .sub-menu li > a { 
/*	color: #9d9d9d;    HSV 0,0,61 */
/*	color: #848D9B;    HSV 217,14,60 (I prefer a touch of color) */
	color: #97A0AF; /* HSV 217,13,68 (a touch lighter) */
}

.inner-nav .sub-menu li > a:hover,
.inner-nav .sub-menu li.sub-menu-open,
.inner-nav .sub-menu li.sub-menu-open > a {
/*	color: rgba(157, 157, 157, .65); HSV 0,0,61 */
/*	color: rgba(132, 141, 155, .65); HSV 217,14,60 (I prefer a touch of color)*/
	color: rgba(151, 160, 175, .65); /* HSV 217,13,68 (a touch lighter) */
}

.post {
	padding: 0;
	margin-bottom: 20px;
}

.sidebar {
	//border-right: 1px solid #d5deed; /* HSV 217,10,92 */
}

.widget-box {
	border: 1px solid #d5deed;
/*
	border-top: 1px solid #d5deed;
	border-bottom: 1px solid #d5deed;
	border-left: 1px solid #d5deed;
*/
}

.widget-title, .widget-box {
	border-top: 1px solid #d5deed;
	border-bottom: 1px solid #d5deed;
}

.widget-categories ul li {
    border-bottom: 1px solid #d5deed;
}

.widget-categories ul li:hover {
    background-color: #d5deed;
}

.bg-gray {
/*	background-color: #f8f8f8; HSV 0,0,97 */
	background-color: #edf0f4; /* HSV 0,0,97 */
}

.footer {
/*	color: #222; HSV 0,0,13 */
	background-color: #181b1e; /* HSV 210,20,11 */ 
}

.centered-text
{
        text-align:center;
}

.press-play
{
	font-size: 1.3em;
}

.copyright {
	direction: ltr;
}

@media (max-width: 991.98px) {
/*	.inner-navigation, .inner-nav .sub-menu, .inner-nav .mega-menu { */
	.inner-nav, .inner-nav .sub-menu, .inner-nav .mega-menu { 
/*		color: #222; HSV 0,0,13 */
		background-color: #1e2126; /* HSV 217,21,14 */
		background-color: #8A96AA; /* HSV 217,19,67 */
		background-color: #222935; /* HSV 217,35,20 */
	}
}

/***************** End Color Tuning *****************/

.container-fluid {
	padding-right:0;
}

.header.header-transparent {
/*
	height: 124px;
*/
	height: 210px;
	transition:none;
/*
	background-image:url('/include/design/images/jerusalem2a2.jpg');
	background-size: 1400px 124px;
*/
	background-image:url('/include/design/images/wall-with-flag.jpg');
	background-size: 1400px 210px;
	background-repeat:no-repeat;
	background-position:right top;
	max-width:1400px;
	margin: 0 auto;
	border-bottom: none;
}

.header.header-small {
	height: 74px;
/*
	background-image:url('/include/design/images/jerusalem2a.jpg');
	background-size: 1400px 74px;
*/
	border-bottom: 3px solid rgba(255, 255, 255, .5);
	//box-shadow: 0 0 10px 0 rgba(0, 0, 0, .7);
	box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .7); // seen only on the bottom
}

.header.begin-scroll {
	height: 100px;
	border-bottom: 3px solid rgba(255, 255, 255, .5);
	//box-shadow: 0 0 10px 0 rgba(0, 0, 0, .7);
	box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .7); // seen only on the bottom
}

.header .inner-brand, .header.header-small .inner-brand, .header.header-transparent .inner-brand {
	color: white;
}

.inner-header > a {
	/* font-size: 2.5rem; */
	font-size: 1.8rem;
	text-transform: uppercase;
	vertical-align: top;
	line-height: 3.0rem;
	white-space: nowrap;
}

.header .inner-subbrand, .header.header-small .inner-subbrand, .header.header-transparent .inner-subbrand {
	position: fixed;
	top: 36px;
	color: #ffff99;
	font-size: 0.95rem;
	font-weight: 300;
}

/* Reduce the size of the header branding a bit so it will not overlap the terret in the header banner */
@media (max-width: 1070px) {
	.inner-header > a { 
		font-size: 1.6rem;
		line-height: 2.6rem;
	}
	.header .inner-subbrand, .header.header-small .inner-subbrand, .header.header-transparent .inner-subbrand { 
		font-size: 0.85rem;
		top: 1.875rem;
	}
}

.ti-menu:before {
    content: "\2630";
}

@media (min-width: 1400px) {
	.header.header-transparent {
		left: calc(50% - 700px); /* centers header for wide screens */
	}
}

@media (min-width: 991.99px) {
	.inner-nav {
		height:1.9rem;
		top: 1.2rem;
	}
}

@media (max-width: 991.98px) {
	.inner-navigation.collapsing {
		-webkit-transition: height 0.01s;
		-moz-transition: height 0.01s;
		-ms-transition: height 0.01s;
		-o-transition: height 0.01s;
		transition: height 0.01s;
		display: none;
	}
	.inner-navigation.collapse.show {
		position: fixed;
		top: 74px;
		left: unset;
		min-width: 9.5rem;
		float:right;
		background: transparent;
		max-height: calc(95vh - 74px) ;
	}
/*
	.inner-header > a {
		font-size: 4vw;
		line-height: 4.8vw;
	}
*/
  	.inner-nav {
		min-width: 9.5rem;
		padding: 10px 0;
	}
	ul li.menu-item-has-children .mega-menu { 
		padding-left: 2rem;
		text-indent: -1rem; /* indent is greater after the 1st line */
		max-width: 11rem; 
		overflow-wrap: break-word;
		white-space: normal;
	}
	.inner-nav .sub-menu {
		min-width: 9rem;
		max-width: 10rem;
	}
	.inner-nav > ul > li > a {
		padding: 7px 0;
		line-height: 1.4;
	}
	.inner-nav .sub-menu li > a {
		padding: 5px 0;
		line-height: 1.4;
	}
	// Make it use a bit less space
	.scroll-top {
		bottom: 1.0rem;
		right: 1.0rem;
		height: 2.0rem;
		width: 2.0rem;
		line-height: 2.0rem;
	}
}

@media (max-width: 550px) {
/*
	.inner-header > a {
		font-size: 22px;
		line-height: 26px;
	}
*/
}

.header.header-transparent .inner-nav > ul > li > a::after {
	background:none;
}

.header .extra-nav {
	max-height: 71px;
}

.header .extra-nav ul {
	border-bottom: 1px solid rgba(240, 240, 240, .8); // matches the left border of the first-child
}

.header .extra-nav > ul > li > a, .header .inner-nav > ul > li > a, .header.header-small .extra-nav > ul > li > a, .header.header-small .inner-nav > ul > li > a {
	color: white;
}

.header.header-transparent .extra-nav > ul > li > a, .header.header-transparent .inner-nav > ul > li > a {
	color: #fff;
}

.extra-nav > ul > li {
	background-color: rgba(105,109,119,0.5);
	}

.extra-nav > ul > li:last-child {
	padding-right:15px !important;
	}

.extra-nav > ul > li > a {
	padding: 0; /* it would be nice to keep this at 0 11px as it is defined (or better 0 15px) and remove the line above and whatever else is making the li:first-child have padding left 15px ...*/
}

.inner-nav .sub-menu:not(.mega-menu-row) {
    list-style: none;
}

ul,
ol {
    list-style: none;
}

/* Override padding-top:74px for smaller screens */
.wrapper {
	padding-top: 0;
}

.module-cover {
	max-width:1400px;
	height:386px;
	padding:0;
	/*background-image:url('/include/design/images/jerusalem2b2.jpg');*/
	background-image:url('/include/design/images/wall-with-flag.jpg');
	background-size: 1400px 263px;
	background-repeat:no-repeat;
	background-position:right bottom;
}

.module {
	padding: 20px 0;
}

.header + .wrapper .module:first-child {
/*    padding-top: 144px; */
    padding-top: 230px; 
}

/* reduce the padding from 15px to allow a bit more room for the course images on the home page. */
.col-md-6 {
	padding-right: 10px;
	padding-left: 10px;
}

.icon-box .icon-box-icon {
	margin-top: 10px;
	line-height: 1.2;
}

.sidebar {
/*
	width: 179px;
*/
	padding-right: 10px;
}

.widget {
	margin-bottom: 30px;
}

.widget-box {
	padding: 15px 0;
	line-height: 1.3;
}

.widget .widget-title {
	margin-bottom: 0px;
	text-transform: uppercase;
}

.widget .widget-title h5 {
	margin: 5px 0px;
}

.widget .widget-title h6 {
	margin: 10px 0px;
}

.widget-categories ul li {
    padding: 5px 0 !important;
}

/* short footers instead of tall */
.footer-widgets {
	padding: 0;
	color: rgba(255, 255, 255, .7);
}

.fluid-width-video-wrapper{
	max-width:640px; 
	min-height:360px;
	margin: 0 auto;
	padding-top: 0px !important;
	height: auto;
}

.fluid-width-video-wrapper iframe {
	border: 1px black solid;
	max-width:640px;
	max-height:360px;
}

/********** Responsive **********/

@media (min-width: 450px) and (max-width: 1199.99px) {
	.container { max-width: 100%; }
	.col-3 { width: 200px; min-width: 200px; order:1; }
	.col-9 { flex: 0 0 calc(100% - 200px - 30px); order:2; } /* THIS IS PROBABLY WHAT SHOULD BE USED IF THE container IS NOT JUMPING DOWN IN WIDTH */
	/* .col-9 { width: 490px; order:2; }  */
	.sidebar { margin-top: 0; }
}

@media (max-width: 449.99px) {
	.flex_row { flex-direction: column; }
	.col-3 { max-width: 300px; margin: 0 auto; }
	.col-9 { max-width: 100%; }
}

/********** End Responsive **********/

/********** END TEMPLATE / NON_SITE-SPECIFIC MODIFICATIONS **********/

/********** Additional, non-template (i.e. site-specific) CSS **********/

.home_box {
	margin:1px 10px;
	padding: 10px 5px;
	color:white;
	background: rgba(119,104,93,0.7);
	width:305px;
	height:240px;

}


/* Switch order when it goes vertical for small screens: */
@media only screen and (max-width: 960px) {
	.video_top_image {display: none; }
}
@media only screen and (max-width: 575px) {
	#hebrew-products-links { order:1; }
	#hebrew-products-image { order:2; }
}

/* From the old template CSS: */

.home_box_left {
	float: left;
	width: 305px;
	height: 250px;
}

.home_box_right {
	float: right;
	width: 305px;
	height: 250px;
}

#view_content {
        max-width:700px;
        margin: 0px auto;
}

#view_code {
        float:left;
        max-width:238px;
        text-align: center;
}

#view_name {
        float:left;
        margin: 0px 15px;
        max-width:304px;
}

#view_buttons {
        float:left;
        margin: 30px 0px 0px 0px;
        width:127px;
}

#view_certs {
        max-width: 330px;
        text-align:center;
        margin: 30px auto 0px auto;
}

#view_certs_printed, #view_certs_digital {
        max-width:330px;
        text-align:center;
        margin: 0px 0px 20px 0px;
}

#view_sponsors {
        max-width: 330px;
        text-align:center;
        margin: 20px auto;
}

#view_IH {
        max-width:300px;
        text-align:center;
        float: none;
        margin:0px auto 20px auto;
}

#view_namegifts {
	margin: 0px auto;
	text-align: center;
	max-width: 360px;
	float: right;
}

.signup_table {
	display: inline-block;
	text-align: left;
	padding-top: 10px;
/*
        margin:0px auto;
        border:0px;
        padding:0px;
        border-spacing:0px;
        font-family:Arial;
        font-size:1.0em;
*/
}

.link_list {
        max-width: 650px;
        text-align:center;
        font-size:1.2em;
        margin: 0px auto;
}

.link_list li {
        display: inline;
        float: left;
        width:50px;
        margin-bottom:20px;
}

.video_page_top {
	text-align:center; 
	max-width: 680px; 
	width:auto; 
	padding-top:10px;">
}

.video_top_image {
	float:left;
	margin:0 10px;
}

.video_top_signup {
	display:inline-block; 
	margin:0 10px; 
	max-width:340px;
	border: 0px black solid; 
	background: #ffffff;
	color:#000000;
	font-weight: normal;
	text-align: center;
}

.large_text { font-size: 1.4rem }

.nav_button {
	margin: 0 0 4px;
}

.topics-table {
	max-width: 100%;
	border:0px;
	margin:0 auto;
	text-align: left;
	font-size: 1.7em;
}


.phrase-text {
	font-size: 1.7em;
}

.bottom_nav {
	margin: 50px auto 0;
	text-align: center;
}

/********** From the old responsive.css: **********/

/* Desktop Layout: >= 1020px. */

@media only screen and (min-width: 1020px) {
#view_certs { max-width: 720px; }
#view_certs_printed { float: left; margin: 0px 10px 20px 10px;}
#view_certs_digital { float: right; margin: 0px 10px 20px 10px;}
#view_sponsors { max-width: 700px; }
#view_IH { float: left; margin:0px 0px 20px 0px; }
}

/* Desktop Layout: 992px. */

@media only screen and (min-width: 992px) and (max-width: 1019px) {
#view_certs { max-width: 720px; }
#view_certs_printed { float: left; margin: 0px 10px 20px 10px;}
#view_certs_digital { float: right; margin: 0px 10px 20px 10px;}
#view_sponsors { max-width: 700px; }
#view_IH { float: left; margin:0px 0px 20px 0px; }
}

/* Tablet Layout: 768px -991px */

@media only screen and (min-width: 945px) and (max-width: 991px) {
#view_certs { max-width: 720px; }
#view_certs_printed { float: left; margin: 0px 10px 20px 10px;}
#view_certs_digital { float: right; margin: 0px 10px 20px 10px;}
#view_sponsors { max-width: 700px; }
#view_IH { float: left; margin:0px 0px 20px 0px; }
}

@media only screen and (min-width: 815px) and (max-width: 944px) {
#view_content { max-width: 572px; }
#view_buttons { float: right; width: 274px; margin: 10px 25px 0px 0px; padding-right: 5px }
}

/* start from 788 instead of 768 for convenience on view pages. */
@media only screen and (min-width: 788px) and (max-width: 814px) {
#view_content { max-width: 572px; }
#view_code, #view_name { float: none; margin: 0px auto; }
#view_buttons { float: none; width: 274px; margin: 10px auto 0px auto; padding-right: 5px }
}

/* Wide Mobile Layout: 480px. */

@media only screen and (min-width: 200px) and (max-width: 679px) {
.home_box_left { float:none; margin: 0 auto 13px; }
.home_box_right { float:none; margin: 0 auto 26px; display:table; }
/*.module-cover { height: calc(386px + 13px + 250px + 13px); background-position: right 124px; } */
.module-cover { height: calc(386px + 13px + 250px + 13px); background-position: right 210px; } */
}

@media only screen and (min-width: 530px) and (max-width: 787px) {
.name_table td, .name_table th { padding: 8px 2px; }
#view_content { max-width: 334px; }
#view_code, #view_name { float: none; margin: 0px auto; }
#view_buttons { float: none; width: 274px; margin: 10px auto 0px auto; padding-right: 5px }
}

@media only screen and (min-width: 480px) and (max-width: 529px) {
.content-wrap { width: calc(100% - 11px); margin: 0px 2px 0px 7px; padding:15px 0px 10px 0px;}
/*
.home_box_left { float:none; margin:0px auto; width:100%; }
.home_box_right { float:none; margin:0px auto; display:table; }
*/
.name_table td, .name_table th { font-family: "Arial Narrow", Arial, sans-serif; }
#view_content { max-width: 334px; }
#view_code, #view_name { float: none; margin: 0px auto; }
#view_buttons { float:none; margin: 10px auto 0px auto; }
}

/* Mobile Layout: 320px. */

@media only screen and (min-width: 450px) and (max-width: 479px) {
.content-wrap { width: calc(100% - 11px); margin: 0px 2px 0px 7px; padding:15px 0px 10px 0px;}
/*
.home_box_left { float:none; margin:0px auto; width:100%; }
.home_box_right { float:none; margin:0px auto; display:table; }
*/
.name_table td, .name_table th { font-family: "Arial Narrow", Arial, sans-serif; font-size: 17px; }
#view_content { max-width: 334px; }
#view_code, #view_name { float: none; margin: 0px auto; }
#view_buttons { float:none; margin: 10px auto 0px auto; }
}

@media only screen and (min-width: 404px) and (max-width: 449px) {
#content-right { width: 100%; }
#content-left { width: calc(100% - 18px); margin-left: 7px; }
/*
.home_box_left { float:none; margin:0px auto; max-width:100%; }
.home_box_right { float:none; margin:0px auto; display:table; }
*/
#view_content { max-width: 334px; }
#view_code, #view_name { float: none; margin: 0px auto; }
#view_buttons { width: 274px; margin: 10px 30px 0px 30px; }
/* Use new widget settings, not these 
.widget {width: calc(50% - 5px); min-width: 179px; margin-right:3px; }
.w-title { height:36px; }
*/
}

@media only screen and (min-width: 320px) and (max-width: 403px) {
#content-right { width: 100%; }
.content-wrap { width: calc(100% - 6px); margin: 0px 2px; padding:15px 0px 10px 0px;}
#content-left { width: calc(100% - 6px); margin-left: 2px; }
/*
.home_box_left { float:none; margin:0px auto; max-width:100%; }
.home_box_right { float:none; margin:0px auto; display:table; }
*/
.name_table td, .name_table th { font-family: "Arial Narrow", Arial, sans-serif; }
#view_content { width: 100%; }
#view_code, #view_name { float: none; margin: 0px auto; }
#view_buttons { float:none; margin: 10px auto 0px auto; }
/* Use new widget settings, not these 
.widget ul li { text-align:center; }
*/
}

@media only screen and (min-width: 200px) and (max-width: 319px) {
#content-right { width: 100%; }
.content-wrap { width: calc(100% - 6px); margin: 0px 2px; padding:15px 0px 10px 0px;}
#content-left { width: calc(100% - 6px); margin-left: 2px; }
/*
.home_box_left { float:none; margin:0px auto; max-width:100%; }
.home_box_right { float:none; margin:0px auto; display:table; }
*/
.name_table td, .name_table th { font-family: "Arial Narrow", Arial, sans-serif; font-size: 17px; }
#view_content { width: 100%; }
#view_code, #view_name { float: none; margin: 0px auto; }
#view_buttons { float:none; margin: 10px auto 0px auto; }
/* Use new widget settings, not these 
.widget ul li { text-align:center; }
*/
}

/********** End stuff from the old responsive.css **********/


@media (max-width: 449.99px) {
	.ads { background-color: #edf0f4; margin: -15px; /* same as bg-gray */ }
	#view_certs, #view_sponsors { background: #eeeeee; }
	#view_namegifts { float: none; } 
	.widget_sm_bot_margin { margin-bottom: 10px; }
}

}