/*Reset CSS*/
*{margin:0 auto; padding:0}

/*general elements*/
body{font-family:Calibri}
a, img, ul, form, fieldset{border:none; text-decoration:none; outline:none; list-style:none; resize:none}
h1, h2, h3{font-weight:normal}
input[type=text], textarea {-webkit-transition:all 0.30s ease-in-out; -moz-transition:all 0.30s ease-in-out; -ms-transition:all 0.30s ease-in-out; -o-transition:all 0.30s ease-in-out outline:none; resize:none}
input[type=text]:focus, textarea:focus {box-shadow:0 0 5px rgba(81, 203, 238, 1); border:2px solid #51CBEE}

/*layout*/
.wrapper{width:1200px}

header{background:#c0044e url(../images/top-header-bg.jpg) repeat-x top; padding:5px 0; border-bottom:1px solid #fff}
header h1{font-size:30px; color:#fff}
header li{display:inline-block; margin:3px 2px 0}

.about{background-color:#282828}
.about, .services{padding:20px 0 30px; color:#fff; text-align:center}
.about h1{font-size:45px; font-weight:bold; padding-bottom:2px; display:inline}
.about img{float:left; margin-right:20px}
.about p{font-size:18px; line-height:20px; text-align:left}
.about li{display:block; float:left; width:18%; background:url(../images/bullet.png) no-repeat left 14px; padding:5px 15px; font-size:18px; text-align:left; line-height:20px}

.slider{height:500px; overflow:hidden}

.services h1{font-size:45px; color:#333435; font-weight:bold; padding-bottom:2px; display:inline}
.services li{display:block; float:left; text-align:left; width:45%; margin:20px; color:#363333}
.services li img{float:left; margin-right:10px}
.services li div{float:left; width:80%}
.services li h2{font-size:30px; font-weight:bold; text-transform:uppercase}
.services li p{font-size:26px; line-height:30px}

.contact{padding:20px 0 30px; text-align:center; background-color:#f7f0bf}
.contact h1{font-size:45px; color:#333435; font-weight:bold; padding-bottom:2px; display:inline}
.contactForm fieldset:nth-child(1), .contactForm fieldset:nth-child(2), .contactForm fieldset:nth-child(3){width:32%; margin:0 3px; display:inline-block}
.contactForm input[type="text"], #respond input[type="text"]{width:90%; height:25px}
.contactForm input[type="text"], .contactForm textarea, #respond input[type="text"], #respond textarea{margin-bottom:10px}
.contactForm textarea, #respond textarea{height:200px; width:95%}
.requiredField{border:1px solid #524a61; padding:5px}
.sendMail{color:#fff; font-size:26px; padding:5px 20px; border:none; cursor:pointer; background-color:#3e3e3e; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; margin-right:30px}

.contact ul li{display:inline-block; font-size:20px; color:#282828; margin:0 10px}
.contact ul li.address{background:url(../images/map-icon.png) no-repeat left center; padding:10px 0 10px 25px}
.contact ul li.email{background:url(../images/mail-icon.png) no-repeat left center; padding:10px 0 10px 35px}
.contact ul li.phone{background:url(../images/phone-icon.png) no-repeat left center; padding:10px 0 10px 25px}
.contact ul li a{color:#282828}

footer{background-color:#353637; padding:20px 0}
footer p, footer p a{color:#fff; font-size:14px; text-transform:uppercase}

/*misc*/
.clear{clear:both; height:0}
.fltlft{float:left}
.fltrgt{float:right}
.spmhidip{display:none}

header, banner, section, footer, aside, nav, article, figure {display:block}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
	body .wrapper{width:960px}
	.about h1, .services h1, .contact h1{font-size:40px}
	.about li{float:none; width:100%}
	.services li{margin:20px 15px}
	.services li div{float:left; width:75%}
	.services li h2{font-size:24px; margin-bottom:10px}
	.services li p{font-size:22px; margin-bottom:5px}
	.contact ul li{display:inline-block}	
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	body .wrapper{width:768px}
	.about h1, .services h1, .contact h1{font-size:35px}
	.slider{height:400px}
	.services li{margin:20px 15px}
	.services li div{float:left; width:70%}
	.services li h2{font-size:24px; line-height:24px}
	.services li p{font-size:22px; margin-bottom:5px}
	.contact ul li{display:block}
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
	body .wrapper{width:480px}
	.about h1, .services h1, .contact h1{font-size:30px}
	.about li{float:none; width:95%; padding:5px 0 5px 15px}
	.slider{height:350px}
	.services li{float:none; margin:20px; text-align:center; width:95%}
	.services li img{float:none; margin:0 0 10px 0}
	.services li div{float:none}
	.services li h2{font-size:24px; margin-bottom:10px}
	.services li p{font-size:18px}
	.contact ul li{display:block}
	.contactForm fieldset:nth-child(1), .contactForm fieldset:nth-child(2), .contactForm fieldset:nth-child(3){width:31%}
}

@media only screen and (max-width: 480px) {
	body .wrapper{width:95%}
	header h1, header ul{float:none !important; text-align:center}
	.about h1, .services h1, .contact h1{font-size:30px}
	.about li{float:none; width:95%; padding:5px 0 5px 15px}
	.slider{height:200px}
	.services li{float:none; width:100%; margin:20px auto; text-align:center}
	.services li img{float:none; margin:0 0 10px 0}
	.services li div{float:none; width:100%}
	.services li h2{font-size:24px; margin-bottom:5px}
	.services li p{font-size:18px; line-height:22px}
	.contact ul li{display:block; font-size:18px}
	.contactForm fieldset:nth-child(1), .contactForm fieldset:nth-child(2), .contactForm fieldset:nth-child(3){display:block; margin:0 auto; width:100%}
	.contactForm fieldset:nth-child(4){width:95%}
}