/* Fade = no need for animations - just timing effects... */


/* General Animation settings */
header#nav .container ul > li > ul {
    opacity:0;
    display:block;
    perspective:1000px;
    min-width:inherit;
    width:200px;
}
 

li:hover ul.hov {
    animation-duration: 0.3s;
    animation-delay: 0.3s;
}

li:hover ul.hov li {
        animation-direction: normal;
        animation-iteration-count:1;
        animation-timing-function : ease-in-out;
        background:#333;
        animation-fill-mode: forwards;
}
 
 
header ul.twist li {
    transform: rotateY(90deg) ;
}
li:hover ul.twist.hov li {
        animation-name: twist;
}
@keyframes twist {
    0%   {opacity:0;	transform: rotateY(90deg);}
    100% {opacity:1; transform:  rotateY(0);}
}
@-webkit-keyframes twist {
    0%   {opacity:0;transform:  rotateY(90deg); }
    100% {opacity:1; transform: rotateY(0);}
}
li:hover ul.twist.hov li:nth-child(1) {
    animation-duration: 0.3s;
    animation-delay: 0.1s;
}
li:hover ul.twist.hov li:nth-child(2) {
    animation-duration: 0.4s;
    animation-delay: 0.3s;
}
li:hover ul.twist.hov li:nth-child(3) {
    animation-duration: 0.5s;
    animation-delay: 0.51s;
}
li:hover ul.twist.hov li:nth-child(4) {
    animation-duration:0.6s;
    animation-delay: 0.8s;
}
li:hover ul.twist.hov li:nth-child(5) {
    animation-duration:0.7s;
    animation-delay: 1s;
}
li:hover ul.twist.hov li:nth-child(6) {
    animation-duration:0.8s;
    animation-delay: 1.2s;
}




/* Sort the responsive menu */
@media only screen and (max-width: 1000px) {
 

    
/* reset all the sub nav animations and styles! */
header#nav .container ul > li > ul > li, header#nav .container ul > li > ul {
    border: none !important;
    opacity:1 !important;
    display:block !important;
    transform: translate(0,0) rotate(0) !important;
    -webkit-animation: initial !important;
animation-play: initial !important;
}
    
header#nav .container ul > li > ul > li:hover,
header#nav .container ul > li:hover,
header#nav .container ul > li:hover a,
header#nav .container ul > li > ul .ico:hover {
    background-color: transparent;
    border-bottom: none;
    color: #fff;
}

header#nav ul > li > a:hover {
    background-color: transparent;
    border-bottom: none;
}
    
}


/* Curl Right */
header#nav .container ul > li > ul.curl li {
	opacity:1;
	transform: translateX(-200px) rotate(-90deg);
}
li:hover ul.curl.hov li { animation-name: curl; }
@keyframes curl {
    0%   {opacity:0;	transform: translateX(-50%) rotate(-90deg);}
    100% {opacity:1;transform: translateX(0) rotate(0deg);}
}
@-webkit-keyframes curl {
    0%   {opacity:0;	transform: translateX(-50%) rotate(-90deg); }
    100% {opacity:1;transform: translateX(0) rotate(0);}
}
li:hover ul.curl.hov li:nth-child(1) {
	animation-duration: 0.3s;
	animation-delay: 0.3s;
}
li:hover ul.curl.hov li:nth-child(2) {
	animation-duration: 0.4s;
	animation-delay: 0.5s;
}
li:hover ul.curl.hov li:nth-child(3) {
	animation-duration: 0.5s;
	animation-delay: 1s;
}
li:hover ul.curl.hov li:nth-child(4) {
	animation-duration:0.6s;
	animation-delay: 1.5s;
}
li:hover ul.curl.hov li:nth-child(5) {
	animation-duration:0.7s;
	animation-delay: 2s;
}
li:hover ul.curl.hov li:nth-child(6) {
	animation-duration:0.8s;
	animation-delay: 2.5s;
}