/* CSS Document */

@media screen and (max-width: 1020px) {
	header .right{ padding: 0 10px 0;}
	#banner .caption{padding: 40px 0 0 25px;}
	#banner .caption strong{ font-size: 30px;}
	footer ul, footer small{ padding: 0 10px;}
	header .socials{ padding: 0 20px 0 10px;}
}

@media screen and (max-width: 860px) {
	#banner .caption{padding: 20px 0 0 25px; width: 70%;}
	#banner .caption strong{ font-size: 30px;}
}

/*Styles for screen 800px and lower*/
@media screen and (max-width: 800px) {
/* header */

nav a#pull{ display: block; text-align: center; text-indent: 0; color: #000; font-weight: lighter; padding: 20px 0;}
nav a#pull:after { content:""; background: url('../images/nav-icon.png') no-repeat; width:30px; height:30px; display:inline-block; position:absolute; right:15px;}
nav ul{ background: #fff; /*border-bottom: 5px solid #086ab7;*/ display: none;}
nav ul li { float:none; margin: 5px 0; display: block; width: 100%; margin: 0; border-bottom:none !important;}
nav ul li:hover, nav ul li.active-menu{ background: #8CC63F;}
nav ul li:hover a, nav ul li.active-menu a{ color: #fff;}
nav ul li a { width:100%; padding: 20px 0;}
header{ text-align: center;}
header .right{ float: none; padding: 0; text-align: center;}
header small, header .socials{ display: block; padding: 0;}
header small{ margin: 20px auto 10px; }
nav{ border-bottom: 5px solid #086ab7; margin: 0 auto;}
aside iframe{ width: auto !important; max-width: 90%;}

#Form_Container{ display: block; margin: 0 auto; text-align: center;}
.Form_Full input, .Form_Full textarea{ margin: 0 auto;}

/* banner */
#banner {}

/* content top */
#content-top {}

/* content */
#content, .side #content{ width:95% !important; padding: 0; float: none !important;}
#content p{ line-height: 180%;}

/* sidebar */
aside { width:95% !important; padding: 0; float: none !important; margin: 0 auto 20px;}

aside .person, aside .location{ display: inline-block; padding: 0 0 0 10%;}

/* content bottom */
#content-bottom {}

/* main bottom */
#main-bottom {}

/* footer */
footer {}
}


@media screen and (max-width: 768px) {	
	#banner{ min-height: auto !important; height: auto;}
	#banner .caption{
		background: #076AB7;
		background: -webkit-linear-gradient(90deg, rgba(6, 106, 182, 1), rgba(6, 106, 182, 0)); /* For Safari 5.1 to 6.0 */
	  	background: -o-linear-gradient(90deg, rgba(6, 106, 182, 1), rgba(6, 106, 182, 0)); /* For Opera 11.1 to 12.0 */
	  	background: -moz-linear-gradient(90deg, rgba(6, 106, 182, 1), rgba(6, 106, 182, 0)); /* For Firefox 3.6 to 15 */
	  	background: linear-gradient(90deg, rgba(6, 106, 182, 1), rgba(6, 106, 182, 0)); /* Standard syntax */
	}
	#banner .caption strong{ font-size: 25px;}
}

@media screen and (max-width: 700px) {
	#banner .container{ height: 100%;}
	#banner .caption{ height: 100%; width: 100%; padding: 25px 0 0; text-align: center; margin: 0 auto;}
	#banner .caption a{ margin: 0 auto;}
}

@media screen and (max-width: 660px) {
	footer ul, footer small{ float: none !important; display: block; text-align: center;}
	footer small{ line-height: normal;}
}

@media screen and (max-width: 600px) {
	#banner .caption{ line-height: 20px;}
	#banner .caption strong{ font-size: 20px;}
	#banner .caption a{ height: 32px; line-height: 30px; width: 170px;}
}

@media screen and (max-width: 560px) {
	aside .person, aside .location{ display: block;}
}

@media screen and (max-width: 530px) {
	/*header{ text-align: center;}
	header .right{ float: none; padding: 0; text-align: center;}
	nav{ border-bottom: 5px solid #086ab7;}
	nav a#pull{ text-indent: 0;}*/
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {

	/* contact form */
	.contactBox { width:90% !important; text-align:center; padding:0;}
	.contactBox-left,.contactBox-right { float:none !important; width:100%; padding:15px 0 0 0;}
	.contactForm { width:90%;}
	.contactForm label { padding-left:15px;}
	.contactForm input[type=text] { width:90%;}
	.contactForm textarea { width:90%;}
}

@media only screen and (max-width : 480px) {
	#banner .caption{ display: none;}
}

/*Smartphone*/
@media only screen and (max-width : 385px) {
	#content-bottom img{ display: block; margin: 0 auto;}
	header #logo{ width: 95%; height: auto;}
}