@media only screen and ( min-width:769px ) {

#top-wrapper {
position:fixed;
z-index:9999;
background-color:rgba(0,0,0,1);
min-height:70px;
width:100%;
margin:0;
padding:0;
}

#top-content {
width:90%; 
padding:0 5%;
max-width:1200px;
margin:0 auto;
min-height:70px;
line-height:70px;
}

#logo {
float:left;
background:url('images/logo.png') top left no-repeat;
width:70px;
height:70px;
margin:0;
padding:0;
}

#two, #three, #four, #five {
position:absolute;
margin-top:-150px;
}

a.menu-link { display: none; }
.js nav[role=navigation] { max-height:none; margin:0; padding:0; }


nav[role=navigation] ul {
float:right;
margin:0;
padding:0;
border:0;
}
			
nav[role=navigation] li {
display:inline-block;	
list-style:none;
height:70px;
line-height:70px;
margin:0;
padding:0;
}

nav[role=navigation] li a {
display:block;
height:70px;
line-height:70px;
font-size:14px;
font-weight:100;
color:#FFF;
letter-spacing:1px;
text-decoration:none;
padding:0 13px;
-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;
}	

nav[role=navigation] li a:hover { 
background:rgba(100,100,100,0.3); 
border-bottom:8px solid #00ADD8;
}


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

#top-wrapper {
position:fixed;
z-index:9999;
background-color:#000;
min-height:70px;
width:100%;
margin:0;
padding:0;
}
		
#top-content {
width:100%; 
padding:0;
max-width:1200px;
margin:0 auto;
min-height:70px;
line-height:70px;
}

#logo {
float:left;
background:url('images/logo.png') top left no-repeat;
width:70px;
height:70px;
margin:0 0 0 5%;
padding:0;
}

#two, #three, #four, #five {
position:absolute;
margin-top:-150px;
}

a.menu-link { display: none; }
.js nav[role=navigation] { max-height:none; margin:0; padding:0; }
		
a.menu-link {
float: right;
display: block;
background:#000;
height:70px;
line-height:70px;
margin:0;
padding:0 5% 0 0;
font-size:14px;
font-weight:100;
color:#FFF;
letter-spacing:1px;
text-decoration:none;
text-align:center;
}

nav[role=navigation] {
clear: both;
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
		
.js nav[role=navigation] {
overflow: hidden;
max-height: 0;
padding:0;
margin:0;
}
		
nav[role=navigation].active {
max-height:100%;
}
		
nav[role=navigation] ul {
float:left;
background:#000;
width:100%;
padding:0 0 8px 0;
margin:0;
}

nav[role=navigation] li {		
list-style:none;
height:50px;
width:100%;
line-height:50px;
padding:0;
margin:0;
}

nav[role=navigation] li a {
display:block;
width:100%;
height:50px;
line-height:50px;
font-size:15px;
font-weight:100;
color:#FFF;
letter-spacing:1px;
text-decoration:none;
padding:0 8%;
margin:0;
-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;
}

nav[role=navigation] li a:hover { 
background:#333; 
border-bottom:8px solid #00ADD8;
}

}