.col-lg-10 #nav-icon2{
padding: 2px 0 0 0;
}
#nav-icon2 {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
cursor: pointer;
-webkit-animation-duration: 1s;
animation-duration: 1s;
margin: 0 0 0 10px;
padding: 7px 0 0;
position: relative;
display: inline-block;
vertical-align: middle;
}
#nav-icon2 i {
font-size: 25px;
color: #999;
}
#nav-icon2 span:nth-child(even) {
left: 50%;
border-radius: 0 9px 9px 0;
}
#nav-icon2 span:nth-child(odd) {
left:0px;
border-radius: 9px 0 0 9px;
}
#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
top: 0px;
}
#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
top: 14px;
}
#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
top: 28px;
}
#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon2.open span:nth-child(1) {
left: 5px;
top: 7px;
}
#nav-icon2.open span:nth-child(2) {
left: calc(50% - 5px);
top: 7px;
}
#nav-icon2.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
#nav-icon2.open span:nth-child(4) {
left: 100%;
opacity: 0;
}
#nav-icon2.open span:nth-child(5) {
left: 5px;
top: 29px;
}
#nav-icon2.open span:nth-child(6) {
left: calc(50% - 5px);
top: 29px;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
-ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.flip {
-webkit-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}