/* Stylesheet animation CSS file for MegaNavbar BS4 (bootstrap 4).
** MegaNavbar BS4 v1.0.2 (http://www.navbar4.com/) Copyright 2018 www.Navbar4.com. All Rights Reserved.
** Licensed under Regular License (http://codecanyon.net/licenses/regular) or Extended License (http://codecanyon.net/licenses/extended)
** We will take legal action against those who copy our HTML content, CSS style sheets and JavaScript functions without a license.*/


.no-animation .dropdown-menu{-moz-animation-name: none!important;-o-animation-name: none!important;animation-name: none!important;-webkit-animation-name: none!important}
[data-show] .dropdown-toggle:not(.collapsed)+.dropdown-menu.collapsing, [data-hide] .dropdown-toggle.collapsed+.dropdown-menu.collapsing {-webkit-animation-duration: 650ms; animation-duration: 650ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; height: initial!important;}

[data-show="hingeUp"] .dropdown-toggle:not(.collapsed)+.dropdown-menu {-webkit-animation-name:hingeInX;animation-name:hingeInX;  -webkit-transform-origin:50% 0;transform-origin:50% 0; }
[data-hide="hingeUp"] .dropdown-toggle.collapsed+.dropdown-menu {-webkit-animation-name:hingeOutX;animation-name:hingeOutX;  -webkit-transform-origin:50% 0;transform-origin:50% 0; }
[data-show="hingeDown"] .dropdown-toggle:not(.collapsed)+.dropdown-menu {-webkit-animation-name:hingeInX;animation-name:hingeInX;  -webkit-transform-origin:50% 100%;transform-origin:50% 100%; }
[data-hide="hingeDown"] .dropdown-toggle.collapsed+.dropdown-menu {-webkit-animation-name:hingeOutX;animation-name:hingeOutX;  -webkit-transform-origin:50% 100%;transform-origin:50% 100%; }
[data-show="hingeLeft"] .dropdown-toggle:not(.collapsed)+.dropdown-menu {-webkit-animation-name:hingeInY;animation-name:hingeInY;  -webkit-transform-origin:0% 50%;transform-origin:0% 50%; }
[data-hide="hingeLeft"] .dropdown-toggle.collapsed+.dropdown-menu {-webkit-animation-name:hingeOutY;animation-name:hingeOutY;  -webkit-transform-origin:0% 50%;transform-origin:0% 50%; }
[data-show="hingeRight"] .dropdown-toggle:not(.collapsed)+.dropdown-menu {-webkit-animation-name:hingeInY;animation-name:hingeInY;  -webkit-transform-origin:100% 50%;transform-origin:100% 50%; }
[data-hide="hingeRight"] .dropdown-toggle.collapsed+.dropdown-menu {-webkit-animation-name:hingeOutY;animation-name:hingeOutY;  -webkit-transform-origin:100% 50%;transform-origin:100% 50%; }


@-webkit-keyframes hingeInX{
   0%{-webkit-transform: perspective(3000px) rotateX(90deg); transform: perspective(3000px) rotateX(90deg);}
  40%{-webkit-transform: perspective(3000px) rotateX(-20deg); transform: perspective(3000px) rotateX(-20deg);}
  60%{-webkit-transform: perspective(3000px) rotateX(10deg); transform: perspective(3000px) rotateX(10deg);}
  80%{-webkit-transform: perspective(3000px) rotateX(-5deg); transform: perspective(3000px) rotateX(-5deg);}

}
@keyframes hingeInX{
   0%{-webkit-transform: perspective(3000px) rotateX(90deg);transform: perspective(3000px) rotateX(90deg);}
  40%{-webkit-transform: perspective(3000px) rotateX(-20deg);transform: perspective(3000px) rotateX(-20deg);}
  60%{-webkit-transform: perspective(3000px) rotateX(10deg);transform: perspective(3000px) rotateX(10deg);}
  80%{-webkit-transform: perspective(3000px) rotateX(-5deg);transform: perspective(3000px) rotateX(-5deg);}
}

@-webkit-keyframes hingeOutX{
  100%{-webkit-transform: perspective(3000px) rotateX(90deg); transform: perspective(3000px) rotateX(90deg);}
  60%{-webkit-transform: perspective(3000px) rotateX(-20deg); transform: perspective(3000px) rotateX(-20deg);}
  40%{-webkit-transform: perspective(3000px) rotateX(10deg); transform: perspective(3000px) rotateX(10deg);}
  20%{-webkit-transform: perspective(3000px) rotateX(-5deg); transform: perspective(3000px) rotateX(-5deg);}
}
@keyframes hingeOutX{
  100%{-webkit-transform: perspective(3000px) rotateX(90deg); transform: perspective(3000px) rotateX(90deg);}
  60%{-webkit-transform: perspective(3000px) rotateX(-20deg); transform: perspective(3000px) rotateX(-20deg);}
  40%{-webkit-transform: perspective(3000px) rotateX(10deg); transform: perspective(3000px) rotateX(10deg);}
  20%{-webkit-transform: perspective(3000px) rotateX(-5deg); transform: perspective(3000px) rotateX(-5deg);}
}

@-webkit-keyframes hingeInY{
   0%{-webkit-transform: perspective(3000px) rotateY(90deg); transform: perspective(3000px) rotateY(90deg);}
  40%{-webkit-transform: perspective(3000px) rotateY(-20deg); transform: perspective(3000px) rotateY(-20deg);}
  60%{-webkit-transform: perspective(3000px) rotateY(10deg); transform: perspective(3000px) rotateY(10deg);}
  80%{-webkit-transform: perspective(3000px) rotateY(-5deg); transform: perspective(3000px) rotateY(-5deg);}

}
@keyframes hingeInY{
   0%{-webkit-transform: perspective(3000px) rotateY(90deg);transform: perspective(3000px) rotateY(90deg);}
  40%{-webkit-transform: perspective(3000px) rotateY(-20deg);transform: perspective(3000px) rotateY(-20deg);}
  60%{-webkit-transform: perspective(3000px) rotateY(10deg);transform: perspective(3000px) rotateY(10deg);}
  80%{-webkit-transform: perspective(3000px) rotateY(-5deg);transform: perspective(3000px) rotateY(-5deg);}
}

@-webkit-keyframes hingeOutY{
  100%{-webkit-transform: perspective(3000px) rotateY(90deg); transform: perspective(3000px) rotateY(90deg);}
  60%{-webkit-transform: perspective(3000px) rotateY(-20deg); transform: perspective(3000px) rotateY(-20deg);}
  40%{-webkit-transform: perspective(3000px) rotateY(10deg); transform: perspective(3000px) rotateY(10deg);}
  20%{-webkit-transform: perspective(3000px) rotateY(-5deg); transform: perspective(3000px) rotateY(-5deg);}
}
@keyframes hingeOutY{
  100%{-webkit-transform: perspective(3000px) rotateY(90deg); transform: perspective(3000px) rotateY(90deg);}
  60%{-webkit-transform: perspective(3000px) rotateY(-20deg); transform: perspective(3000px) rotateY(-20deg);}
  40%{-webkit-transform: perspective(3000px) rotateY(10deg); transform: perspective(3000px) rotateY(10deg);}
  20%{-webkit-transform: perspective(3000px) rotateY(-5deg); transform: perspective(3000px) rotateY(-5deg);}
}