/*

home-style.css
Richard Tapia Center for Excellence & Equity

*/

/**
 * Table of Contents:
 *
 * 1.0 - Mobile
 * 2.0 - Tablet
 * 3.0 - Desktop
 * 
 * -----------------------------------------------------------------------------
 */

/**
 * 1.0 - Mobile
 *
 * Mobile-first approach by applying styles that progressively enhance the site
 *
 * -----------------------------------------------------------------------------
 */

header{ position: absolute; top: 0; background: rgba(0, 51, 104, 0.7); }
#title{ background: inherit; }
#main-search{ opacity: 0; }
nav{ background: transparent; }

.intro{ 
	padding: 200px 0 0; 
	background-color: #EAEDF5;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
}
.mission{ 
	padding: 30px; 
	overflow: hidden; 
	
	-webkit-box-shadow: 0 5px 0 #DADEE7;
	box-shadow: 0 5px 0 #DADEE7; 
}
.mission .wrapper{ width: 90%; }
.mission *{ color: #FFFFFF; text-shadow: 2px 2px 10px #000; }

.mission .more{ 
	margin-bottom: 10px;
	background: #F8F8FA; 
	border: 2px #F8F8FA dashed; 
	
	-webkit-box-shadow: 0 5px 0 #DADEE7; 
	box-shadow: 0 5px 0 #DADEE7; 
	
	color: #365E88;
	text-shadow: none;
}

.mission .more:hover{
	background: #365E88;
	border: 2px #365E88 dashed; 
	
	-webkit-box-shadow: 0 5px 0 #284563;
	box-shadow: 0 5px 0 #284563;
	
	color: #F8F8FA;
}

.mission .more:active{ 
	background: transparent; 
	border: 2px #F8F8FA dashed; 
	color: #F8F8FA; 
	-webkit-box-shadow: none; 
	box-shadow: none;
}

.mission .more:after{ color: #365E88; }
.mission .more:hover:after,
.mission .more:active:after{ color: #F8F8FA; }


.container{ float: left; overflow: hidden; }


.events-webinars{
	margin-bottom: 30px;
	vertical-align: top;
	overflow: hidden;
	
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	
	-webkit-box-shadow: 0 5px 0 #DADEE7;
	box-shadow: 0 5px 0 #DADEE7;
}
.events-webinars .menu{	
	width: 100%;
	margin: 0;
	overflow: hidden;
	list-style: none;
}
.events-webinars .menu li{
	display: inline-block;
	width: 49%;
	background: #FFFFFF;
	
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	
	cursor: pointer;
}
.events-webinars .menu li:last-child{ float: right; background: #003368; color: #FFFFFF; }
.events-webinars .menu li:first-child{ float: left; }
.events-webinars .menu li h3{ margin: 0; padding: 12px 20px 5px; }
.events-webinars .menu li:last-child h3{ color: #FFFFFF; }

.events-webinars .content{ padding: 25px; background: #FFFFFF; }
.events-webinars .content .webinar{ display: none; }
.events-webinars .content article > div{ margin-bottom: 25px; }
.events-webinars .content article > div:last-child{ margin-bottom: 0; }
.events-webinars .content article,
.events-webinars .content article div{ overflow: hidden; }
.events-webinars .content .post-img{
	float: left;
	margin: 0 15px 0 0;
	width: 60px;
	height: 60px;
}
.events-webinars .content .webinar .post-img{ height: 80px; }
.events-webinars .content h4{ margin: 0; }
.events-webinars .content h4 a{ text-transform: none; }
.events-webinars .content h5{
	color: #365E88;
	font-weight: 700;
	margin: 5px 0;
}

.events-webinars .content hr{ margin: 15px 0; }
.events-webinars .content .webinar hr:last-child,
.events-webinars .content .event hr:last-child{ display: none; }

#sidebar iframe[src*="facebook"] { height: 70px; }

#sidebar .post{ 
	padding: 0; 
	background: transparent; 
	
	-webkit-box-shadow: none; 
	box-shadow: none;
	
	-webkit-border-radius: 0;
	border-radius: 0; 
}



/**
 * 2.0 - Tablet: Beyond 695px
 *
 * Mobile-first approach by applying styles that progressively enhance the site
 *
 * -----------------------------------------------------------------------------
 */
 
@media( min-width: 695px ) {

	.intro{ padding: 30% 0 0; }
	.mission .wrapper{ max-width: 70%; }
	
	.container{ min-height: 520px; }
	
	.container{ width: 65%; }
	.events-webinars{}
	
	
	#sidebar{ width: 35%; }
	#sidebar .post{ padding: 0 0 0 30px; }

}



/**
 * 3.0 - Desktop: Beyond 1100px
 *
 * Mobile-first approach by applying styles that progressively enhance the site
 *
 * -----------------------------------------------------------------------------
 */
 
@media( min-width: 1100px ) {

	.mission .wrapper{ width: 990px; }
	
	.intro{  
		padding: 350px 0 0; 
		background-size: cover;
	}

}