@media only screen and ( max-width:1000px ) {
.c4 { width:33.33%; margin:0; }
}

@media only screen and ( max-width:768px ) {
.dark { background:#26272b; }
.c3 { width:90%; margin:0 5%; }
.c3:nth-child(3n+1) { margin:0 5%; }
.c4 { width:50%; min-height:230px; margin:0; }
.c4 a { height:180px; }

.info {
float:right;
text-align:center;
width:100%;
padding:0;
}
.pete-title {
text-align:center;
margin-bottom:25px;
}
.pete {
float:left;
width:70%;
padding:0 15%;
margin:0 0 35px 0;
}
.pete img {
float:none;
width:100%;
margin:0 auto;
}

.featured-image, .featured-text { float:left;width:100%; }

#portfolio-nav li a {
position:relative;
font-size:16px;
color:#555;
letter-spacing:2px;
text-align:center;
text-decoration:none;
height:40px;
line-height:40px;
margin:0;
padding:7px 15px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-webkit-transition: all 0.1s ease-out;  
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
border:1px solid rgba(255,255,255,0);
}

}


@media only screen and ( max-width:480px ) and (-webkit-min-device-pixel-ratio: 2),
	only screen and ( max-width:480px ) and (min--moz-device-pixel-ratio: 2),
	only screen and ( max-width:480px ) and (-o-min-device-pixel-ratio: 2/1),
	only screen and ( max-width:480px ) and (min-device-pixel-ratio: 2) 
	{
	
#top-wrapper { min-height:60px; }
#top-content { min-height:60px; line-height:60px; }
#logo {
float:left;
background:url('images/logo.png') center left no-repeat;
background-size: 35px 35px ;
-moz-background-size: 35px 35px ;
-webkit-background-size: 35px 35px ;
width:35px;
height:35px;
margin:12px 0 0 5%;
padding:0;
}
a.menu-link {
float: right;
display: block;
background:#000;
height:60px;
line-height:60px;
margin:0 5% 0 0;
padding:0;
font-size:12px;
font-weight:100;
color:#FFF;
letter-spacing:1px;
text-decoration:none;
text-align:center;
}
nav[role=navigation] li { height:60px; line-height:60px; }
nav[role=navigation] li a { height:60px; line-height:60px; }


#banner {
float:left;
width:100%;
height:450px;
margin:0;
padding:0;
}
h1 {
float:left;
font-size:28px;
font-weight:100;
color:#FFF;
letter-spacing:20px;
line-height:35px;
text-align:center;
margin:140px 0 25px 0;
padding:0 0 0 20px;
}
.banner-text {
float:left;
font-size:15px;
font-weight:300;
color:#AAA;
letter-spacing:1px;
width:90%;
text-align:center;
margin:0;
padding:0 5%;
}
h2 {
float:left;
font-size:22px;
font-weight:100;
color:#AAA;
width:100%;
letter-spacing:5px;
text-align:center;
margin:0;
padding:0 0 0 5px;
}

.featured-image, .featured-text { float:left;width:100%; }

#portfolio-nav-wrap { 
float:left;
text-align:center;
width:100%;
padding:0;
}
#portfolio-nav li a {
position:relative;
font-size:12px;
color:#555;
letter-spacing:2px;
text-align:center;
text-decoration:none;
height:30px;
line-height:30px;
margin:0;
padding:6px 11px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-webkit-transition: all 0.1s ease-out;  
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
border:1px solid rgba(255,255,255,0);
}

.c3 img { width:50%; }
.c4 { width:100%; min-height:250px; margin:0; }
#contact-nav li {
display:inline-block;
height:30px;
line-height:30px;
margin:0 0 0 35px;
padding:0 35px;
font-size:12px;
color:#FFF;
letter-spacing:1px;
text-transform:uppercase;
}
#contact-nav li a { color:#FFF; text-decoration:none; }

}