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

body {margin:0px; padding:0px; font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	color:#5d6968}
.box,nav {padding:40px; margin:auto; position:relative}
ul {padding:0px; list-style:none}
li a:hover {color:#15b6c2}

img {max-width:100%}

.blue {background-color:#15b6c2}

.white {color:white}

.grey {color:#5d6968}

h4, .list-white {color:white}

p {font-weight:lighter; line-height:22px}

h2 {font-size:32px}

/*Navigation*/

nav img {display:block; margin:auto; margin-bottom:35px}

.nav {list-style:none; padding:0px; position:relative; overflow:auto}

.nav a {text-decoration:none; color:#5d6968; display:block; text-align:center; font-size:28px; border-top:thin #b1bcbb solid; padding:15px}

/*Feature*/
.feature {padding:0px}

/*Footer*/
footer {text-align:center; margin:0px}
footer p {font-size:10px; text-align:center}

/*Thumbnails*/
.list-thumb { max-width:100px; display:block; margin-top:60px; margin:auto }


.services {margin-bottom:100px}

.list-white {margin-bottom:50px}

h4 {font-size:26px; font-weight:500}

.feature img {max-width:100%}

.social {text-align:center}

/*Bigger than 675
- float list descriptions
*/
@media screen and (min-width: 675px) {
	
	
	.list-thumb {position:absolute; left:-150px; top:5px}
	.blue li {position:relative; margin-left:150px; }
	h4, .list-white {text-align:left}
	.list-white {margin-bottom:50px}
	li a:hover {color:#15b6c2}
	
	
	.feature img {display:none}
	.feature {height:300px; background-image:url(images/feature.jpg); background-position:center}
	.social {text-align:center}
	
	}
	
	
	
	
	/*Bigger than 780
-increase padding
-increase font sizes
-change to horizontal nav
*/
@media screen and (min-width: 780px) {
	.box,nav {padding:80px}
	p {font-size:20px; line-height:25px; max-width:800px}
	#navigation {position:absolute; top:10px; right:0px} 
	nav img {display:inline; margin-bottom:35px; }
	ul.nav a {text-decoration:none; color:#5d6968; display:block; float:left; text-align:center; font-size:28px; padding:15px; width:150px; border-top:0px}
	ul.nav li {float:left}
	li a:hover {color:#15b6c2}
	.social {text-align:right}
	
	
}

/*Bigger than 1200
-increase padding
-increase font sizes
*/
@media screen and (min-width: 1200px) {
	.box,nav {padding:80px; width:1020px; margin:auto}
	.feature {text-align:center; background-color:white}
	.feature {width:1180px; margin:auto}
	p {font-size:25px; line-height:32px; max-width:1000px}
	body {background-color:#5d6968}
	.whitebox {background-color:white}
	li a:hover {color:#15b6c2}
	.social {text-align:right; background-color:white; padding:0px 0px 20px 0px; margin:auto; position:relative; width:1180px}
}