@charset "utf-8";
/* CSS Document */

*{margin:0 auto; padding:0}

body{font-family:'Open Sans', sans-serif; background-color:#fff}
h1, h2, h3, h4, h5{font-family:'Merriweather', serif;}
a, img, li, fieldset, input, button, textarea{border:none; list-style:none; outline:none; text-decoration:none}
button{cursor:pointer}
header, banner, subbanner, section, footer, aside, nav, article, figure, menu {display:block}

select{margin:0 auto; height:42px; min-width:70px; opacity:1; filter:alpha(opacity=100); background-color:#fff; border:none}
form select, select{overflow:hidden; text-indent:1px; border:1px solid #ccc; text-overflow:''; background-image:url(select-icons.png); background-repeat:no-repeat; background-position:right 10px top -111px; background-color:#fff; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none; padding-right:30px}
form select:hover, select:hover {background-image:url(images/select-icons.png);	background-repeat:no-repeat; background-position:right 10px top -162px}

/*layout*/
.wrapper{max-width:1200px; position:relative}

header{padding:20px 0 0}
header h1{float:left}
header ul{float:right; margin-top:6px}
header ul li{display:inline-block}
header ul li a{font-size:14px; text-align:center; color:#9f9f9f; padding:10px 10px 22px; display:block}
header ul li a:hover, header ul li a.active{border-bottom:4px solid #4e4e4e; color:#4e4e4e}

#nav{float:right}
#nav > a{display:none}
#nav li{position:relative}
#nav li a{display:block}
@media only screen and ( max-width: 62.5em ) /* 1000 */ {#nav{position:static; margin:0}}
@media only screen and ( max-width: 1024px ) /* 1000 */ {#nav{position:relative; padding:10px 0}
#nav > a {width:3.125em; height:3.125em; text-align:left; margin-right:0; text-indent:-9999px; background:#000 url(../images/menu-mobile.png) no-repeat center; position:relative}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type{display:block}
#nav > ul {height:auto; margin:0 !important; width:210px; z-index:9999; display:none; position:absolute; right:0; top:60px; background-color:#000}
#nav:target > ul{display:block}
#nav > ul > li{width:100%; float:none; padding:0 !important; background:none !important; border-top:1px solid #111; border-bottom:1px solid #222}
#nav > ul > li:first-child {border-top:none}
#nav > ul > li:last-child {border-bottom:none}
#nav > ul > li > a {height:auto; float:none !important; font-size:14px !important; border-radius:0 !important; color:#fff !important; text-align:left; padding:10px !important; border-bottom:none !important}
#nav > ul > li:not( :last-child ) > a{border-right:none}
#nav li ul{position:static !important; padding-top:0}}

banner{background-color:#f2f2f2; padding:30px 0; min-height:290px}
banner h2{color:#fff; font-size:30px; text-align:center; padding-top:70px; font-weight:400}
banner img{float:right; border:10px solid #fff; max-width:400px; margin-left:30px; -webkit-box-shadow:-5px 5px 10px 0px rgba(0,0,0,0.3); -moz-box-shadow:-5px 5px 10px 0px rgba(0,0,0,0.3); box-shadow:-5px 5px 10px 0px rgba(0,0,0,0.3)}
banner p{color:#fff; font-size:16px}

.banner-footer{background:none; height:320px; overflow:hidden}
.banner-footer img{width:100%; height:auto}

.classes{padding:20px 0}
.classes h1{font-size:30px; color:#000; margin-bottom:10px; text-align:center}
.classes ul{text-align:center}
.classes ul li{display:inline-block; text-align:center; width:18%; vertical-align:top; color:#363d41; font-size:16px; position:relative}
.classes ul li h2{font-size:20px; color:#363d41; margin:10px auto; text-transform:uppercase}
.classes ul li a{display:block; border:2px solid #767676; border-radius:20px; width:200px; padding:10px 0; font-size:16px; text-transform:uppercase; color:#767676; position:absolute; bottom:0; left:40px}
.classes ul li span{display:block; padding:4px 19px; font-size:18px; text-align:left}
.classes ul li:nth-child(2) span{border-left:1px solid #eee; border-right:1px solid #eee}
.classes ul li:nth-child(3) span{border-right:1px solid #eee}
.classes ul li span svg{font-weight:300; margin-right:5px; font-size:8px; position:relative; top:-2px}

.about{padding:40px 0 50px; background-color:#f2f2f2; text-align:center}
.about h1{font-size:30px; color:#fff; margin-bottom:15px}
.about h3{font-size:20px; color:#fff}
.about p{font-size:18px; line-height:26px; color:#fff; padding:0 15px}
.about img{float:left; border:10px solid #fff; margin-right:50px; -webkit-box-shadow:-5px 5px 10px 0px rgba(0,0,0,0.3); -moz-box-shadow:-5px 5px 10px 0px rgba(0,0,0,0.3); box-shadow:-5px 5px 10px 0px rgba(0,0,0,0.3)}
.about a{display:inline-block; border:2px solid #fff; border-radius:20px; width:200px; padding:10px 0; font-size:16px; text-transform:uppercase; color:#fff; text-align:center}

.content{padding:20px 0}
.content h2{font-size:20px; margin-bottom:15px; color:#363d41}
.content h3{font-size:18px; margin-bottom:5px; color:#363d41}
.content p{font-size:18px; color:#363d41; line-height:26px}

.contactForm{display:block; width:95%; max-width:700px}
.contactForm h2{font-size:20px; color:#000; margin:15px auto 0; text-transform:uppercase; display:inline-block}
.contactForm fieldset{display:block; margin:10px auto}
.contactForm fieldset input{width:100%; background-color:#f5f5f5; padding:10px 0; text-indent:10px; font-size:14px; color:#000}
.contactForm fieldset textarea{width:100%; height:150px; resize:none; padding:10px 0; text-indent:10px; background-color:#f5f5f5; font:14px 'Open Sans', sans-serif; color:#000}
.contactForm fieldset button{display:block; float:right; background-color:#fff; border:2px solid #767676; border-radius:20px; width:200px; padding:10px 0; margin:20px 0 0 0; font-size:16px; text-transform:uppercase; color:#767676; text-align:center}

ul.testi li{display:block; padding:20px; margin:10px auto; background-color:#f4f4f4; border:4px solid #f2f2f2}
ul.testi li p{margin:10px auto; font-size:16px}
.profile-pic{float:left; margin-right:20px}

.top-footer{padding:20px 0}
.top-footer h1{font-size:20px; color:#000; margin-bottom:15px; display:inline-block}
.top-footer form{display:block; width:95%; max-width:700px}
.top-footer form fieldset{display:block; margin:5px 0}
.top-footer form fieldset input{border:1px solid #e8e8e8; font-size:14px; padding:10px 0; text-indent:10px; color:#000; width:100%}
.top-footer form fieldset textarea{border:1px solid #e8e8e8; font:14px 'Open Sans', sans-serif; padding:10px 0; text-indent:10px; color:#000; width:100%; height:100px; resize:none}
.top-footer form fieldset button{display:block; background-color:#fff; border:2px solid #767676; border-radius:20px; width:200px; padding:10px 0; margin-right:0; font-size:16px; text-transform:uppercase; color:#767676; text-align:center}

p.phone{font-size:14px; color:#4d4745; float:right; display:inline-block}
p.phone a{color:#4d4745}
p.phone i{font-size:20px}

footer{padding:20px 0; background-color:#000}
footer p{text-align:center; font-size:14px; color:#eee}
footer a{color:#fff; font-weight:600}

/*misc*/
.clear{clear:both}
.bg-gray{background-color:#f2f2f2}

@media only screen and (min-width : 769px) and (max-width:1024px){
	.wrapper{max-width:95%}
	header h1, header ul{float:none; text-align:center}
	header h1 img{width:100%}
}

@media only screen and (min-width : 481px) and (max-width:768px){
	.wrapper{max-width:95%}
	banner h2{padding-top:30px}
	.classes ul li{margin:0 10px}
	.about img{margin-right:20px}
	.contactInfo{width:38%}
}

@media (max-width:480px){
	.wrapper{max-width:95%}
	header h1, header ul{float:none; text-align:center}
	header h1 img{width:100%}
	banner img{float:none; width:95%; margin:0 auto}
	banner h2{padding-top:10px; font-size:25px}
	.classes ul li{display:block; text-align:center; width:95%; margin-bottom:10px}
	.about img{float:none; width:95%; margin:0 auto 10px}
	.top-footer form, .contactInfo{float:none; width:100%; margin:10px auto}
	
	.banner-footer img{width:auto; height:100%}
}

@media (max-width:320px){

}