|
* { |
|
margin: 0; |
|
padding: 0; |
|
text-rendering: optimizeLegibility; |
|
} |
|
|
|
#wrap { |
|
width:615px; |
|
position:absolute; |
|
left:50%; |
|
top: 20px; |
|
margin-left:-257px; |
|
display:block; |
|
} |
|
|
|
nav { |
|
diplay:block; |
|
height:35px; |
|
width:75px; |
|
box-sizing: border-box; |
|
-webkit-transition: .1s ease-in-out; |
|
-moz-transition: .1s ease-in-out; |
|
-o-transition: .1s ease-in-out; |
|
transition: .1s ease-in-out; |
|
overflow:hidden; |
|
font-family: "Georgia", serif; |
|
} |
|
|
|
nav.open { |
|
width:615px; |
|
height:400px; |
|
-webkit-transition: .1s ease-in-out; |
|
-moz-transition: .1s ease-in-out; |
|
-o-transition: .1s ease-in-out; |
|
transition: .1s ease-in-out; |
|
background:#00B4FF; |
|
border-radius:3px; |
|
} |
|
|
|
#button { |
|
cursor: pointer; |
|
height:35px; |
|
width:75px; |
|
position:absolute; |
|
margin-left:440px; |
|
box-sizing: border-box; |
|
padding:10px 8px; |
|
background:#00B4FF; |
|
border-radius:3px; |
|
} |
|
|
|
#menu { |
|
float:right; |
|
font-style:italic; |
|
font-size:13px; |
|
color:#fff; |
|
} |
|
|
|
#nav-icon { |
|
display:block; |
|
float:right; |
|
margin-left:8px; |
|
margin-top:1px; |
|
width: 15px; |
|
height: 10px; |
|
position: relative; |
|
-webkit-transform: rotate(0deg); |
|
-moz-transform: rotate(0deg); |
|
-o-transform: rotate(0deg); |
|
transform: rotate(0deg); |
|
-webkit-transition: .5s ease-in-out; |
|
-moz-transition: .5s ease-in-out; |
|
-o-transition: .5s ease-in-out; |
|
transition: .5s ease-in-out; |
|
} |
|
|
|
#nav-icon span { |
|
display: block; |
|
position: absolute; |
|
height: 2px; |
|
width: 100%; |
|
background: #fff; |
|
border-radius: 0px; |
|
opacity: 1; |
|
left: 0; |
|
-webkit-transform: rotate(0deg); |
|
-moz-transform: rotate(0deg); |
|
-o-transform: rotate(0deg); |
|
transform: rotate(0deg); |
|
-webkit-transition: .25s ease-in-out; |
|
-moz-transition: .25s ease-in-out; |
|
-o-transition: .25s ease-in-out; |
|
transition: .25s ease-in-out; |
|
} |
|
|
|
#nav-icon span:nth-child(1) { |
|
top: 0px; |
|
-webkit-transform-origin: left center; |
|
-moz-transform-origin: left center; |
|
-o-transform-origin: left center; |
|
transform-origin: left center; |
|
} |
|
|
|
#nav-icon span:nth-child(2) { |
|
top: 5px; |
|
-webkit-transform-origin: left center; |
|
-moz-transform-origin: left center; |
|
-o-transform-origin: left center; |
|
transform-origin: left center; |
|
} |
|
|
|
#nav-icon span:nth-child(3) { |
|
top: 10px; |
|
-webkit-transform-origin: left center; |
|
-moz-transform-origin: left center; |
|
-o-transform-origin: left center; |
|
transform-origin: left center; |
|
} |
|
|
|
#nav-icon.open span:nth-child(1) { |
|
-webkit-transform: rotate(45deg); |
|
-moz-transform: rotate(45deg); |
|
-o-transform: rotate(45deg); |
|
transform: rotate(45deg); |
|
top: 0px; |
|
left: 0px; |
|
} |
|
|
|
#nav-icon.open span:nth-child(2) { |
|
width: 0%; |
|
opacity: 0; |
|
} |
|
|
|
#nav-icon.open span:nth-child(3) { |
|
-webkit-transform: rotate(-45deg); |
|
-moz-transform: rotate(-45deg); |
|
-o-transform: rotate(-45deg); |
|
transform: rotate(-45deg); |
|
top: 10px; |
|
left: 0px; |
|
} |
|
|
|
#navigation { |
|
width:100%; |
|
height:auto; |
|
position:relative; |
|
margin-top:60px; |
|
} |
|
|
|
#navigation ul { |
|
width:100%; |
|
} |
|
|
|
#navigation ul li { |
|
width:100%; |
|
list-style-type:none; |
|
text-align:center; |
|
height:60px; |
|
font-size:36px; |
|
|
|
} |
|
|
|
#navigation ul li a { |
|
color:#fff; |
|
text-decoration:none; |
|
font-style:italic; |
|
} |
|
|
|
#navigation ul li a:hover { |
|
color:#161616; |
|
-webkit-transition: .05s ease-in-out; |
|
-moz-transition: .05s ease-in-out; |
|
-o-transition: .05s ease-in-out; |
|
transition: .05s ease-in-out; |
|
} |