/* CSS Document */


@media screen and (max-width: 1024px) {

	.row {width:95%;}
	.cn-right,.cn-left, .cn-img , .ov-left, .ov-right , .bn-right, .bn-left{float:none;max-width: none;margin: 0 auto 20px}
	.bn-right, .cn-img , .ov-right {text-align: center;}
	.overview h2 {background: none;border-bottom:5px solid #AE984A;padding: 0 0  20px}
	.bx-wrapper .bx-next {right:0;}
	.bx-wrapper .bx-prev {left:0;}
	#banner {padding: 20px 0}
	header nav ul li {margin: 0 5px}

	.list td {display:block;}
	.list td:first-of-type {min-height: 110px}
	.list td:nth-of-type(2) {padding: 0}
	.list td:first-of-type a{display: block;}
	.list {text-align: center;}
	.list tr {display: inline-block;width: 300px;vertical-align: top;min-height: 250px;margin: 0 auto 30px}
	}

@media screen and (max-width: 980px) {
	

}

@media screen and (max-width: 900px) {
	footer .top .mid {position: static;width: auto;}

}

/*Styles for screen 800px and lower*/
@media screen and (max-width: 767px) {
/* header */
header .row {width: 100%}
header nav a#pull {display: block;text-align: left;text-indent: 25px;height: 30px;padding: 10px 0;color:#fff;}
header nav a#pull:after { content:""; background: url('../images/nav-icon.png') no-repeat; width:30px; height:30px; display:inline-block; position:absolute; right:15px; top:10px;}
header nav ul {display: none;border-top:5px solid #000;}
header nav ul li { float:none; padding: 5px 0;display: block;margin: 0 auto;padding: 0;}
header nav ul li a { width:100%; text-align: left;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;-o-box-sizing: border-box;padding: 20px 20px;background:none;}
header nav ul li.active-menu a {background:#fff;color:#AE984A; }




}

@media screen and (max-width: 600px) {
	
}




/*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%;}

	footer .top .left, footer .top .right {float:none;}
	footer .bot ul li {display: block;}
	.projects h3 {font-size: 22px;text-align: center}

	.pj-box .bx-wrapper .bx-controls-direction a {top:-15px;}
	.social {display: block;margin: 15px auto 0}

	#content,.overview,footer .top,.projects {padding: 30px 0}
	#content h1 {font-size: 50px}
	.projects h2 {background: none;border-bottom:5px solid #AE984A;padding: 0 0  20px}
	.learning form label {font-size: 16px;max-width: 75%;margin: 0 auto 15px}
	.learning form input[type="text"], .learning form label  {display: inline-block;vertical-align: top;}
	.learning form input[type="text"] {margin: 0 20px 20px 0}
	.learning .bx-wrapper .bx-controls-direction a {top:auto;bottom:15px}
	#learn-prev ,#learn-next {top:auto;bottom:15px;}
	.learning .bx-wrapper .bx-viewport {padding: 30px 0 50px}
	.learn-box ul li div {max-width: 90%}
	footer .logo {max-width: 90%}
	#banner .logo {max-width: 90%;display: block;margin: 30px auto}
	footer p,footer .top .left, footer .top .right {margin: 20px auto 0}
	footer .bot ul li a {padding: 10px 0}
}	

@media only screen and (max-width : 640px) {

}

@media only screen and (max-width : 360px) {
.overview h2,.projects h2 {font-size: 38px;}

}


/*Smartphone*/
@media only screen and (max-width : 320px) {

}