/*	Default Layout
	92px columns, 24 px gutters, 72 px margins, 1234px total (extra space for scrollbars)
	-------------------------------------------------------------------------------
cols    1    2     3     4     5     6     7     8     9     10     11     12     13
px      68   160   252   344   436   528   620   712   804   896	988    1050   1142 */


.latino-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
}

.latino-grid-2 {
		display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 15px;
	}

.latino-grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 15px;
}
	.latino-grid-3-2 {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: 15px;  
}


.lesson-grid-2 {
		display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
	}


.blue {
	/*color: #008ebd;*/
	color: #00779E;
	/*background-color: rgba(81,118,148 1.0);*/
}

.green {
	color: #8fc45d;
	/*background-color: rgba(136,129,111 1.0);*/
}

.light-blue {
	color: #5fc3d5;
}

.dark-blue {
	color: #306682;
}

.imgborder {
    background: #FFF;
    border: 1px solid #fff;
    border: thin solid #ddd;
	 border-radius: 5px 5px 5px 5px;
}

.intro {
	line-height: 26px;
}

.intro img {
	width: 48%;
}

#main-highlight {
	position: relative;	
	width: 100%;
	/*height: 300px;*/
	float: left;
	margin-bottom: 20px;
	overflow: hidden;
	border-radius: 5px 5px 5px 5px;
}
#main-highlight img {
	width: 100%;
	border-radius: 5px 5px 5px 5px;
}



.main-highlight-text {
	position: absolute;
	left: 15px;
	bottom: 0;
}

.latino-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
}


.latino a {
	color: #00779E;
}

.latino a:visited {
	color: #00779E;
	}

.latino a:hover {
	color: #5fc3d5;
}

.latino h3 {
    font-size: 22px;
    color: #666;
    line-height: 1.5em;
    font-family: 'TeXGyreAdventorRegular';
	border: none;
}

.term h4 {
    font-size: 20px;
    color: #306682;
    line-height: 1.5em;
    font-family: 'TeXGyreAdventorBold';
	border-bottom: solid thick #8fc45d;
	
}

.lesson h2 {
    font-size: 20px;
    color: #306682;
    /*line-height: 1.5em;*/
    font-family: 'TeXGyreAdventorBold';
	border-bottom: solid thick #8fc45d;
	
}

.lesson h2 a {
    font-size: 20px;
    font-weight: normal;
}

.lesson-header {
    font-size: 20px;
    color: #306682;
    /*line-height: 1.5em;*/
    font-family: 'TeXGyreAdventorBold';
	border-bottom: solid thick #8fc45d;
    margin-bottom: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
	
}

.lesson-header a {
    font-size: 20px;
    font-weight: normal;
}

.lesson .padding15 {
    padding: 5px 15px 15px 15px;
}

.headerimg {
	border-radius: 5px;
	width: 100%;
}


/* ---------- Sub Navigation ---------------- */

.tabrow {
  text-align: center;
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
  line-height: 25px;
  height: 47px;
  position: relative;
}

.tabrow li {
  border: 1px solid #D2D2D2;
  background: #f6f6f6;
  background: linear-gradient(top, #fff 0%, #dadada 100%);
  display: inline-block;
  position:relative;
  z-index: 0;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-left: 1px solid #D2D2D2;
  border-right: 1px solid #D2D2D2;
  border-bottom: 1px solid #D2D2D2;
  margin: 0 2px;
  padding: 3px 15px;
}

.tabrow a {
  color: #00779E;
  text-decoration: none;
font-size: 16px;
}


.tabrow li.selected {
  background: #FFF;
  color: #333;
  z-index: 2;
  border-top-color: #FFF;
}

.tabrow:before {
  position: absolute;
  content: "";
  width: 100%;
  top: 0;
  left: 0;
  border-top: 1px solid #D2D2D2;
  z-index: 1;
}

.tabrow li:before,
.tabrow li:after {
  border: 1px solid #D2D2D2;
  position: absolute;
  top: -1px;
  width: 6px;
  height: 6px;
  content: "";
}

.tabrow li:before {
  left: -7px;
  border-top-right-radius: 3px;
  border-width: 1px 1px 0px 0px;
  /*box-shadow: 2px 0px 0 #ECECEC;*/
}

.tabrow li:after {
  right: -7px;
  border-top-left-radius: 3px;
  border-width: 1px 0px 0px 1px;
  /*box-shadow: -2px 0px 0 #ECECEC;*/
}

.tabrow li.selected:before {
  box-shadow: 2px 0px 0 #FFF;
}

.tabrow li.selected:after {
  box-shadow: -2px 0px 0 #FFF;
}

.tabrow li:hover {
	background-color: rgb(224,224,224);

}


.tabrow li.selected:hover {
    background: #fff;
}


/* ---------- Highlight ---------------- */

.highlight {
	
}

.highlights-box {
	/*overflow:hidden;*/
	 border-radius: 5px 5px 5px 5px;
	width: 100%;
	height: 75%;
	/*padding: 0 !important;*/
	position: relative;
	margin-bottom: 10px;
	z-index: 0;
	background: #f5f5f5;
	border: thin solid #ddd;
	}
	
	.highlights-box div {
		/*margin: 0;
		padding: 0 !important;*/
		}

	.highlights-loading {
	width: 100%;
	height: 36px;
	background-image: url(/images/highlight/ajax-loader.gif);
	background-repeat: no-repeat;
	background-position: center;
		}
	
	.highlights-box h4 {
	/*color: #5897D2;*/
	color: #00779E;
	font-size: 20px;
	letter-spacing: -1px;
	font-weight: bold;
	position: absolute;
	left: 15px;
	margin-top: 280px;
	z-index: 10;
		}
		
	.highlights-line {
	height: 5px;
	background-color: #8fc45d;
	position: absolute;
	width: 95%;
	top: 305px;
	left: 10px;
	}
	
	.highlights-box img {
	width: 95%;
		position: absolute;
	top: 10px;
	left: 10px;
	}
		
	/*.highlight-innerbox {
	position: absolute;
	top: 42px;
	left: 252px;
	width: 320px;
	height: 190px;
	overflow: hidden;
	padding: 10px;
	}*/
	
	.highlight-text {
	font-size: 16px;
	line-height: 23px;
	color: #333;
	/*height: 200px;*/
	width: 90%;
	position: absolute;
	margin-left: 25px;
	margin-right: 25px;
	top: 310px;
		}
		
		/*.highlight-text p {
	margin: 20;
	padding: 25;
	line-height: 22px;
			}*/
		
	.highlights-timer {
		width: 182px;
		height: 4px;
		padding: 1px;
		background-color: #ccc;
		border: 1px solid #fff;
		opacity: 0.3;
		position: absolute;
		top: 44px;
		left: 10px;
		display: none;
		}
		
		.highlights-timer div {
			background-color: #000;
			width: 0%;
			height: 4px;
			opacity: 0.8;
			}
	
	.highlights-menu {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 15px;
	top: 260px;
		}
		
		ul.highlights-menu li {
			float: left;
			list-style: none outside;
			list-style-image: none;
			margin: 0 2px !important;
			padding:0 !important;
			background-image:none !important;
			}
			
		.highlights-menu a {
	display: block;
	width: 16px;
	height: 16px;
	text-indent: -99999em !important;
	margin: 0 1px;
			}
			
		.highlights-menu a span {
			display: none;
		}
			
		.highlight-play a {
			/*background: url(/images/highlight/btn-pause.png) no-repeat;*/
			}
			
		.highlight-prev a {
			background: url(/images/highlight/btn-prev.png) no-repeat;
			}
			
		.highlight-next a {
			background: url(/images/highlight/btn-next.png) no-repeat;
			}
			
		.highlight-indicator a {
	height: 11px;
	width: 9px;
	border: 1px solid #00779E;
	background-color: #fff;
	margin: 2px 0;
	overflow: hidden;
			}
			
		.highlight-indicator a:hover {
	/*border: 1px solid #333;*/
			color: ##5fc3d5;
			}
			
		.highlight-indicator a.active {
	background-color: #00779E;
			
			}

.partner-grid {
	 display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
}

.land-acknowlegement {
	padding: 20px;
	border-radius: 5px 5px 5px 5px;
	background: #f5f5f5;
	border: thin solid #ddd;
}

.land-acknowlegement h4 {
	color: #00779E;
	font-size: 20px;
	letter-spacing: -1px;
	font-weight: bold;
		}

.land-acknowlegement-line {
	height: 5px;
	background-color: #8fc45d;
	width: 95%;
	}

sup a {
	font-weight: normal;
	font-size: 13px;
}
.latino h2 {
    font-size: 26px;
    color: #666;
    line-height: 1.5em;
    font-family: 'TeXGyreAdventorRegular';
    border-bottom: none;
}


/*		10 Column Layout: 992px. 
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

@media only screen and (min-width: 992px) and (max-width: 1221px) {

#main-highlight {margin-bottom: 5px;}
    
.main-highlight-text {left: 10px;}
    
.lesson-grid-2 {
    grid-template-columns: 1fr ;
}  
  
	

/* ---------- Highlight ---------------- */

.highlights-menu {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 15px;
	top: 205px;
		}

	.highlights-box h4 {
	font-size: 18px;
	left: 15px;
	margin-top: 225px;
		}
		
	.highlights-line {
	top: 250px;
	left: 10px;
	}

.highlight-text {
	font-size: 16px;
	margin-left: 25px;
	margin-right: 25px;
	top: 250px;
		}
	
}

/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	.latino-grid-3-2 {
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;  
}
    
  .lesson-grid-2 {
    grid-template-columns: 1fr ;
}  
   
    .latino h2 {
    font-size: 18px;
}


	

/* ---------- Highlight ---------------- */
	
	.highlights-box {
	width: 100%;
	height: 90%;
	margin-bottom: 10px;
	}
	
	.highlights-box img {
	width: 80%;
		position: absolute;
	top: 10px;
	left: 35px;
	}
	
	.highlights-menu {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 15px;
	top: 175px;
		}

.highlights-box h4 {
	font-size: 18px;
	left: 15px;
	margin-top: 188px;
		}
		
	.highlights-line {
	top: 212px;
	left: 10px;
	}

.highlight-text {
	font-size: 12px;
	margin-left: 20px;
	margin-right: 20px;
	top: 205px;
		}
	
}

/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436   */

@media only screen and (min-width: 480px) and (max-width: 767px) {

	#main-highlight {display: none;}
	
	
	.latino-grid-3 {
    grid-gap: 5px;
}
	.latino-grid-3-2 {
    grid-template-columns: 1fr;
    grid-gap: 10px;  
}
	.latino-grid-2 {
grid-template-columns: 1fr;
	}
    
    .latino .grid-2 {
	grid-template-columns: 1fr;
	}
    
    .lesson-grid-2 {
    grid-template-columns: 1fr ;
} 
	
    .tabrow {
  margin: 0 0 2px 0;
  padding: 0;
  line-height: 25px;
  height: auto;
  position: relative;
}
    .tabrow li {
  margin: 0 2px;
  padding: 3px 10px;
}

    
    .tabrow a {
  color: #346abd;
  text-decoration: none;
font-size: 14px;
}
       .latino h2 {
    font-size: 18px;
}
	
/* ---------- Highlight ---------------- */
	
	.highlights-box {
	width: 100%;
	height: 460px;
	margin-bottom: 10px;
	}
	
	.highlights-box img {
	width: 95%;
		position: absolute;
	top: 10px;
	left: 10px;
	}
	
	.highlights-menu {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 15px;
	top: 255px;
		}

.highlights-box h4 {
	font-size: 16px;
	left: 15px;
	margin-top: 270px;
		}
		
	.highlights-line {
	top: 295px;
	left: 10px;
	}

.highlight-text {
	font-size: 12px;
	margin-left: 20px;
	margin-right: 20px;
	top: 295px;
		}

}


/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 479px) {
	
		.latino-grid-3 {
			 grid-template-columns: 1fr;
    grid-gap: 5px;
}
	.latino-grid-3-2 {
    grid-template-columns: 1fr;
    grid-gap: 10px;  
}
	.latino-grid-2 {
	grid-template-columns: 1fr;
	}
    
    .latino .grid-2 {
	grid-template-columns: 1fr;
	}
    
    .lesson-grid-2 {
    grid-template-columns: 1fr ;
} 
       .latino h2 {
    font-size: 18px;
}
	
#main-highlight {display: none;}
	
      .tabrow {
  margin: 0 0 2px 0;
  padding: 0;
  line-height: 25px;
  height: auto;
  position: relative;
}
    .tabrow li {
  margin: 0 0px;
  padding: 3px 5px;
}

    
    .tabrow a {
  color: #346abd;
  text-decoration: none;
font-size: 13px;
}
	
	/* ---------- Highlight ---------------- */
	
	.highlights-box {
	width: 100%;
	height: 450px;
	margin-bottom: 10px;
	}
	
	.highlights-box img {
	width: 95%;
		position: absolute;
	top: 10px;
	left: 10px;
	}
	
	.highlights-menu {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 15px;
	top: 175px;
		}

.highlights-box h4 {
	font-size: 16px;
	left: 15px;
	margin-top: 195px;
		}
		
	.highlights-line {
	top: 215px;
	left: 10px;
	}

.highlight-text {
	font-size: 12px;
	margin-left: 15px;
	margin-right: 15px;
	top: 215px;
		}


}