/*	Less Framework 4
/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/
	




/*	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 */

.banner {
    border-radius: 15px 15px 15px 15px;
    margin-top: 15px;
}

.purple-bk {
	background: #f0eaf8;
    padding: 15px;
    border-radius: 15px 15px 15px 15px;
}

.early h2 {
   font-size: 25px;
    font-weight: bold;
    color: #6e29aa;
    border: none;
    /*border-bottom: #6e29aa 2px solid;*/
    margin: 24px 0 24px 0;
   /* padding: 20px;
    border-radius: 15px 15px 15px 15px;
    background: #f0eaf8;*/
}



.box_long {
	padding: 10px;
	background-color: #fff;
	font-size: 16px;
	border: thin #CCCCCC solid;
    margin-top: 25px;
}

.box_long a{
	font-size: 18px;
}


.box_long img {
	border: thin solid #CCCCCC;
	width: 110px;
	height: 110px;
	/*float:left;*/
	margin:5px 10px 5px 5px;
}

.standards {
	border: thin solid #CCCCCC;
	padding: 10px;
	/*margin: 10px 10px 10px 10px;*/
	font-size: 14px;
}


.standards a {
	font-size: 18px;
}

.standards_img  {
	float:left;
	margin:5px 15px 5px 5px;
	
}



.box {
	/*width: 43%;
    height: 120px;
	float: left;
	display: block;*/
	border: thin solid #CCCCCC;
	padding: 10px;
	font-size: 14px;
    border-radius: 15px 15px 15px 15px;
    background-color: #fff;
}

.box a {
	font-size: 16px;
}

.box img {
    width: 100%;
}

.box_img  {
	float:left;
	margin:5px 15px 5px 5px;
	
}

.box_img img {
	/*-webkit-box-shadow: 3px 3px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    3px 3px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow:         3px 3px 6px 0px rgba(50, 50, 50, 0.75);*/
	border: thin solid #CECECE;
	width: 110px;
	height: 110px;
}

.box_md {
	width: 43%;
	height: 140px;
	float: left;
	border: medium solid #CCCCCC;
	padding: 10px;
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 20px;
}

.box_md li {
	margin-left:80px;
}

.box_md_img  {
	float:left;
	margin:5px 15px 5px 5px;
	
}

.box_md_img img {
	/*-webkit-box-shadow: 3px 3px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    3px 3px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow:         3px 3px 6px 0px rgba(50, 50, 50, 0.75);*/
	border: thin solid #CECECE;
	width: 110px;
	height: 110px;
}

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

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

#play {
	background: #f0eaf8;
	padding: 20px;
	border-radius: 15px 15px 15px 15px;
}


.resource-box {
	font-size: 16px;
	-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
	background-color: #ffffff;
	text-align: center;
}

.resource-box img {
	max-width: 50%;
	vertical-align: center;
	margin-top: 30px;
}

.resource-btn {
	transition: opacity .25s ease-in-out;
  	-moz-transition: opacity .25s ease-in-out;
  	-webkit-transition: opacity .25s ease-in-out;
}

.resource-btn a {
	color: #FFF;
}

.resource-btn:hover {
	color: #FFF;
	opacity: .7;
}

.btn-text {
	background-color: #3178B9;
    /*background-color: #6e29aa;
    background-color: #5897D2;*/
	color: #FFFFFF;
	/*color: #5897D2;*/
	width: 180px;
	display:block;
	padding-top: 4px;
	padding-bottom: 4px;
	border-radius: 25px;
	font-weight: 500;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	/*font-family: 'Gaegu', cursive;*/
	font-size: 16px;
	line-height: 19px;
	text-decoration: none;
	transition: opacity .25s ease-in-out;
  	-moz-transition: opacity .25s ease-in-out;
  	-webkit-transition: opacity .25s ease-in-out;

}

.btn-text a:link {
	/*background-color: #5897D2;*/
    background-color: #6e29aa;
	color: #FFFFFF;
	
	
}

.resource-btn:hover .btn-text {
	background-color: #A7CD39;
	text-decoration: none;
	
	
}

.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}

#watch {
	margin-top: 10px;
	border-radius: 15px 15px 15px 15px;
	background-color: #fff;	
	
}

/*.watch-box {
	padding: 5px 25px 25px 25px;
}*/

#read {
	background-color: #FFFFFF;
	margin-top: 10px;
	border-radius: 15px 15px 15px 15px;
	position: relative;
	
}

#tips {
	margin-top: 10px;
	border-radius: 15px 15px 15px 15px;
	background-color: #fff;	
	
}

#tips img {
	height: 130px;
}


#opportunities {
	margin-top: 10px;
	border-radius: 15px 15px 15px 15px;
	background-color: #fff;	
	
}

.opportunity-text {
    text-align: center;
    margin: 190px 15px 10px 15px;
}

.slideshow {
    margin: 10px 15px 15px 15px;
    
  
}

slider {
    display: block;
    width: 250px;
    height: 167px;
    overflow: hidden;
    position: absolute;
}

slider > * {
 position: absolute;
 display: block;
 width: 100%;
 height: 100%;
 background: #fff;
 animation: slide 50s infinite;
 overflow: hidden;
}

slide:nth-child(1){
 left: 0%;
 animation-delay: -1s;
 background-image: url(../images/educational/discovery-gateway.png);
 background-size: cover;
 background-position: center;
}

slide:nth-child(2){
 left: 100%;
 animation-delay: 9s;
    /*animation-delay: 2s;*/
 background-image: url(../images/educational/headstart.png);
 background-size: cover;
 background-position: center;
}

slide:nth-child(3){
 left: 100%;
 animation-delay: 19s;
    /*animation-delay: 5s;*/
 background-image: url("../images/educational/PBSUtah.png");
 background-size: cover;
 background-position: center;
}

slide:nth-child(4){
 left: 100%;
 animation-delay: 29s;
    /*animation-delay: 8s;*/
 background-image: url(../images/educational/lirbrary.png);
 background-size: cover;
 background-position: center;
}

slide:nth-child(5){
 left: 100%;
 animation-delay: 39s;
    /*animation-delay: 8s;*/
 background-image: url("file:///Macintosh HD/Users/jessicaanderson/UEN Sites/PreKPioneer/images/educational/waterford.png");
 background-size: cover;
 background-position: center;
}


slide p {
 font-family: "Imprint" !important;
 font-size: 50px;
 text-align: center;
 display: inline-block;
 width: 100%;
 margin-top: 340px;
 color: #fff;
}

@keyframes slide {
 0% { left: 100%; width: 100%; }
 5% { left: 0%; }
 25% { left: 0%; }
 30% { left: -100%; width: 100%; }
 30.0001% { left: -100%; width: 0%; }
 100% { left: 100%; width: 0%; }
}



#play-sm {
	width: 250px;
	position: absolute;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-right-style: dashed;
	border-bottom-style: dashed;
	border-left-style: dashed;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
	clear: left;
	float: right;
	margin-left: 610px;
	height: 250px;
}

#play-sm img {
	padding-left: 45px;
	padding-top: 10px;
}

.title-container {
    display: grid;
    grid-template-columns: 100px auto;
}

.title-large-lt {
    background-color: #fff;
    border-radius: 50%;
    border-color: rgb(89, 20, 121);
   border: solid 10px; 
    width: 80px;
    height: 80px;
    color: rgb(89, 20, 121);
    font-size: 50px;
    font-weight: bold;
    align-content: center;
    text-align: center;
    z-index: 10;
    
}

.title-header {
    background-color: rgb(89, 20, 121);
    color: #ffffff;
    font-size: 30px;
    font-weight: bold;
    padding: 15px 15px 15px 45px;
    height:  20px;
    align-content: center;
    margin: -30px;
    margin-top: 25px;
}



/*		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) {
	
	



.btn-text {
	width: 150px;
	font-size: 14px;
}
	
	
#learn {
	float: left;
	background-color: #fff;
	width: 100%;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
	text-align: center;
	border-radius: 15px 15px 15px 15px;
	padding-bottom: 20px;
	
}

.learn-box {
	margin: 0px 3px 20px 3px;
	font-size: 20px;
	width: 180px;
	
}



.learn-box img {
	max-width: 65%;	
	margin-top: 35px;
}

.learn-btn  {
	width: 140px;
	font-size: 18px;
	}



#watch {
	margin-top: 10px;
	border-radius: 15px 15px 15px 15px;
	
	
}

.watch-box {
	padding: 5px 25px 25px 25px;
}

#read {
	margin-top: 10px;
	border-radius: 15px 15px 15px 15px;

}
	
.morebooks {
	position: absolute;
	bottom: 0px;
	left: 25px;
	border-top: thin solid #DCDCDC;
	display: block;
	width: 85%;
	text-align: center;
}

#tips {
	margin-top: 10px;
	border-radius: 15px 15px 15px 15px;
}
    
.slideshow {
    margin: 10px 10px 10px 10px;
}


	
}






/*		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) {
	

.play-grid {
    grid-gap: 5px;
}
	
.resource-box {
		margin: 0px 10px 20px 10px;
	font-size: 16px;
	width: 200px;
	height: 200px;

}
	
.resource-box img {
	margin-top: 10px;
}


.btn-text {
	width: 120px;
	font-size: 13px;
}
	
	.noShow {
		display: none;
	}

	
#learn {
	margin-top: 10px;
	margin-bottom: 15px;
	border-radius: 15px 15px 15px 15px;
	padding-bottom: 20px;
	
}

.learn-box {
	margin: 0px 5px 20px 5px;
	font-size: 16px;
	width: 230px;
}


.learn-box img {
	max-width: 65%;	
	margin-top: 35px;
}

.learn-btn  {
	width: 150px;
	font-size: 18px;
	}

.learn-center {
	width: 700px;

}

.learn-box2 {
	margin: 0px 10px 20px 10px;
	font-size: 20px;
	width: 300px;
	
}
	
.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}	
	
#watch {
	
	margin-top: 0px;
	border-radius: 15px 15px 15px 15px;
	
	
}

.watch-box {
	padding: 5px 25px 25px 25px;
}

#read {
	
	margin-top: 0px;
	border-radius: 15px 15px 15px 15px;
	

}
	

	#boxtext {
	padding-right: 20px;
	padding-left: 20px;
		font-size: 14px;
	
}
	
	#boxtext img {
width: 80px;
	
}
	
	

#tips {
	
	margin-top: 0px;
	border-radius: 15px 15px 15px 15px;
	
}
	
.slideshow {
    margin: 10px 10px 10px 50px;
    
  
}
    
    .standards_img  {
	float: none;
	margin:5px 25% 5px 25%;
	
}




}




/*		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) {

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

	
.resource-box {
		margin: 0px 10px 20px 10px;
	font-size: 14px;
	width: 185px;
	height: 185px;

}
	
.resource-box img {
	margin-top: 5px;
}


.btn-text {
	width: 110px;
	font-size: 13px;
}
	
	
	
#learn {
	
	margin-top: 10px;
	margin-bottom: 15px;
	border-radius: 15px 15px 15px 15px;
	padding-bottom: 20px;
	
}

.learn-box {
	margin: 0px 5px 20px 5px;
	font-size: 16px;
	width: 200px;
}


.learn-box img {
	max-width: 65%;	
	margin-top: 35px;
}

.learn-btn  {
	width: 150px;
	font-size: 16px;
	}

.learn-center {
	width: 450px;

}

.learn-box2 {
	margin: 0px 10px 20px 10px;
	font-size: 20px;
	width: 200px;
	
}

.learn-btn2  {
	width: 110px;
	font-size: 16px;
	}
    
.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
}
	
#watch {
	border-radius: 15px 15px 15px 15px;
	
	
}

.watch-box {
	padding: 5px 25px 25px 25px;
}

#read {
	border-radius: 15px 15px 15px 15px;
}
    

.box_long {
    font-size: 14px;
}

.box_long a{
	font-size: 16px;
}
    
  .standards a {
	font-size: 16px;
}

	
	
}







/*		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) {

.play-grid {
    grid-template-columns: 1fr;
}

.play-grid-2 {
    grid-template-columns: 1fr;
}
	
	
.resource-box {
		margin: 1px 5% 1px 5%;
	font-size: 14px;
	width: 240px;
	height: 240px;

}
	
.resource-box img {
	margin-top: 30px;
}


.btn-text {
	width: 110px;
	font-size: 13px;
	line-height: 13px;
}
	
	

#watch {
	width: 100%;
	margin-top: 0px;
	border-radius: 15px 15px 15px 15px;
	
	
}

.watch-box {
	padding: 5px 25px 25px 25px;
}

#read {
	width: 100%;
	border-radius: 15px 15px 15px 15px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;

}
	
.box_long {
    font-size: 14px;
}

.box_long a{
	font-size: 16px;
}
    
    .box_long img {
	float:none;
	margin: 5px 30% 5px 30%;
}
    .standards a {
	font-size: 16px;
}

.standards_img  {
	float: none;
	margin:5px 20% 5px 20%;
	
}
    
    
}