/*
Theme Name: Vivid UX
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Vivid UX Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Vivid UX
Author URI: https://vividux.com
Template: enfold
*/
* {
    -webkit-font-smoothing: antialiased;
}
.avia_desktop #advanced_menu_toggle:hover {
background-color: transparent !important;
border-color: transparent;
}
#advanced_menu_toggle {
background-color: transparent !important;
border-color: transparent !important;
}

.hbar-container {
    position: relative;
    top: 50%;
    transition: all .3s ease-out;
    transform: perspective(1px) translateY(-50%);
}

.hbar {
    height: 4px;
    width: 84%;
    background: #484b4c;
    display: block;
    margin: auto;
    margin-bottom: 2px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.avia_desktop #advanced_menu_toggle:hover .hbar {
    background: #b5bdbf;
    height: 6px;
    width: 31px;
    display: block;
    margin: auto;
    margin-bottom: 0; 
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

 .hbar.top {
  -webkit-animation: topbar-out .3s linear;
animation-fill-mode: forwards;
}

 .hbar.bot{
  -webkit-animation: botbar-out .3s linear;
animation-fill-mode: forwards;
}

.avia_desktop #advanced_menu_toggle:hover .hbar.top {
  -webkit-animation: topbar .3s linear;
animation-fill-mode: forwards;
}
.avia_desktop #advanced_menu_toggle:hover .hbar.bot {
  -webkit-animation: botbar .3s linear;
animation-fill-mode: forwards;
}


@-webkit-keyframes topbar {
  0% { -webkit-transform: translateY(0) rotate(0deg); }
  50% {-webkit-transform: translateY(93%) rotate(0deg); }  
  100% {-webkit-transform: translateY(93%) rotate(90deg) }
}
@-webkit-keyframes topbar-out {
   0% {-webkit-transform: translateY(93%) rotate(90deg)}
  50% {-webkit-transform: translateY(93%) rotate(0deg); }  
 100% { -webkit-transform: translateY(0) rotate(0deg); }
}
@-webkit-keyframes botbar{
  0% { -webkit-transform: translateY(0) rotate(0deg); opacity:1; }
  50% {-webkit-transform: translateY(-5px) rotate(0deg);opacity:1; }  
  100% { -webkit-transform: translateY(-5px) rotate(-90deg); opacity:0;}
}
@-webkit-keyframes botbar-out{
   0% { -webkit-transform: translateY(-5px) rotate(90deg); opacity:0;}
  50% {-webkit-transform: translateY(-5px) rotate(0deg); opacity:1;}  
 100% { -webkit-transform: translateY(0) rotate(0deg); opacity:1;}
}

#advanced_menu_hide {
display:none !important;
}

.show_mobile_menu  .hbar {
    background: #b5bdbf;
    height: 6px;
    width: 31px;
    display: block;
    margin: auto;
    margin-bottom: 0; 
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.show_mobile_menu .hbar.top {
  -webkit-animation: topbar .3s linear;
animation-fill-mode: forwards;
}
.show_mobile_menu .hbar.bot {
  -webkit-animation: botbar .3s linear;
animation-fill-mode: forwards;
}
.show_mobile_menu .hbar-container {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%) rotate(-225deg);
}


ul#mobile-advanced {
    min-height: 355px!important;
    padding-bottom: 0;
}


#mobile-advanced {
    display: block;
    right: 0;
    -webkit-transform: translateY(-160%);
    transform: translateY(-160%);
    top: 144px;
    z-index: 500;
    padding-top: 0;
}
.avia_transform3d .show_mobile_menu #mobile-advanced, .show_mobile_menu #mobile-advanced {
   -webkit-transform: translateY(-14px);
    transform: translateY(-14px);
}






/*Add your own styles here:*/