* { padding: 0; margin: 0; }

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

#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:1000px;
margin:0 auto;
min-height:70px;
}

#co_name {
display:inline-block;
float:left;
margin-top:27px;
font-size:19px;
font-weight:300;
color:#FFF;
text-decoration:none !important;
  background-image: linear-gradient(#FFF,#FFF);
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition:0.2s;
}
  
#logo {
position: absolute;
left:50%
}
  
#logo img {
display: inline-block;
height:60px;
margin-top:5px;
  }

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;
margin:0 0 5px 0;
padding:0;
}

nav[role=navigation] li a {
display:inline-block;
font-size:13px;
font-weight:300;
color:#FFF;
letter-spacing:1px;
text-decoration:none;
padding:0 12px 5px 12px;
margin-top:29px;
-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::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #FFF;
  transition: width .2s ease-in;
}

nav[role=navigation] li a:hover::after {
  width: 100%;
}


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

#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;
}
  
#co_name { display: none; }

#logo img {
float:left;
height:50px;
margin:10px 25px;
padding:0;
}

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 25px 0 0;
font-size:13px;
font-weight:400 !important;
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 10px 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:300;
color:#FFF;
letter-spacing:1px;
text-decoration:none;
padding:0 25px;
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:#FFF;
color:#000;
}

}