/*====================================================
   for mobile version
====================================================*/
.containerMenu-active { height: 100% !important; overflow: hidden !important; }

/*====================================================
   toggler-menu
====================================================*/
.toggler-menu { display: none; position: fixed; top: 31px; right: 20px; margin: 0; padding: 0; cursor: pointer; z-index: 49999; font-size: 0; width: 56px; height: 41px; background-color: transparent; 
   -webkit-user-select: none;
      -moz-user-select: none;
         -ms-user-select: none;
            user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body:not(.header-fixed):not(.containerMenu-active) .toggler-menu.not-visible { display: none; }

   .toggler-menu span, .toggler-menu span:before, .toggler-menu span:after { display: block; content: ''; font-size: 0; position: absolute; left: 50%; width: 56px; height: 9px; background-color: #043646; margin-left: -28px; 
      -webkit-transition: all 0.5s ease-in-out 0s;
      -moz-transition: all 0.5s ease-in-out 0s;
         -o-transition: all 0.5s ease-in-out 0s;
            transition: all 0.5s ease-in-out 0s;
}
   .toggler-menu span { top: 16px; }
   .toggler-menu span:before { top: -16px; }
   .toggler-menu span:after { top: 16px; }

   .toggler-menu:active { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

   .containerMenu-active .toggler-menu span, .containerMenu-active .toggler-menu:hover span { background-color: transparent !important; }
   .containerMenu-active .toggler-menu span:before { background-color: #fff; 
      -webkit-transform: rotate(45deg) translateX(11px) translateY(12px);
         -moz-transform: rotate(45deg) translateX(11px) translateY(12px);
            -ms-transform: rotate(45deg) translateX(11px) translateY(12px);
               -o-transform: rotate(45deg) translateX(11px) translateY(12px);
                  transform: rotate(45deg) translateX(11px) translateY(12px);
   }
   .containerMenu-active .toggler-menu span:after { background-color: #fff; 
      -webkit-transform: rotate(-45deg) translateX(11px) translateY(-12px);
         -moz-transform: rotate(-45deg) translateX(11px) translateY(-12px);
            -ms-transform: rotate(-45deg) translateX(11px) translateY(-12px);
               -o-transform: rotate(-45deg) translateX(11px) translateY(-12px);
                  transform: rotate(-45deg) translateX(11px) translateY(-12px);
   }

@media all and (max-width: 1240px) {
   .toggler-menu { display: block; }
}
@media all and (min-width: 751px) and (max-width: 959px) {
   .toggler-menu { top: 35px; }
}
@media all and (max-width: 750px) {
   .toggler-menu { top: 18px; width: 36px; height: 29px; }
      .toggler-menu span, .toggler-menu span:before, .toggler-menu span:after { width: 36px; height: 4px; margin-left: -18px; }
      .toggler-menu span { top: 12px; }
      .toggler-menu span:before { top: -8px; }
      .toggler-menu span:after { top: 8px; }
      .containerMenu-active .toggler-menu span:before {
         -webkit-transform: rotate(45deg) translateX(6px) translateY(5px);
            -moz-transform: rotate(45deg) translateX(6px) translateY(5px);
               -ms-transform: rotate(45deg) translateX(6px) translateY(5px);
                  -o-transform: rotate(45deg) translateX(6px) translateY(5px);
                     transform: rotate(45deg) translateX(6px) translateY(5px);
      }
      .containerMenu-active .toggler-menu span:after {
         -webkit-transform: rotate(-45deg) translateX(6px) translateY(-6px);
            -moz-transform: rotate(-45deg) translateX(6px) translateY(-6px);
               -ms-transform: rotate(-45deg) translateX(6px) translateY(-6px);
                  -o-transform: rotate(-45deg) translateX(6px) translateY(-6px);
                     transform: rotate(-45deg) translateX(6px) translateY(-6px);
      }
}


/*====================================================
   containerMenu
====================================================*/
.containerMenu { display: none; position: fixed; width: 365px; top: 0; z-index: 4; height: 100%; background-color: #242A33; right: 0; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; visibility: hidden; opacity: 0;
   -webkit-transition: all 0.1s ease-out 0s;
      -moz-transition: all 0.1s ease-out 0s;
         -o-transition: all 0.1s ease-out 0s;
            transition: all 0.1s ease-out 0s;
}
body:not(.containerMenu-active) .containerMenu {
   -webkit-transition-delay: 0.5s;
      -moz-transition-delay: 0.5s;
         -o-transition-delay: 0.5s;
            transition-delay: 0.5s;
}
.containerMenu-active .containerMenu { visibility: visible; opacity: 1; }

.navigation-mobile { display: block; position: relative; padding: 95px 33px 30px; color: #fff; }
   .navigation-mobile ul { display: block; margin: 0; padding: 0; list-style: none; }
      .navigation-mobile ul li { display: block; margin: 0 0 15px; padding: 0; color: #fff; font-size: 22px; line-height: 120%; }
      .navigation-mobile ul li.active, .navigation-mobile ul li a:hover { color: #e56953; }
         .navigation-mobile ul li a { color: inherit; text-decoration: none; }

   /* global-menu */
   .navigation-mobile .global-menu { padding-bottom: 10px; }

   /* serv-menu */
   .navigation-mobile .serv-menu { display: none; padding-top: 30px; border-top: 1px solid #e56953; }
      .navigation-mobile .serv-menu li { font-size: 20px; line-height: 138%; text-transform: uppercase; }

@media all and (max-width: 1240px) {
   .containerMenu { display: block; }
}
@media all and (min-width: 960px) and (max-width: 1240px) {
   /* .top-menu if top-fix is fixed  */
   .header-fixed .navigation-mobile .serv-menu { display: block !important; }
}
@media all and (max-width: 959px) {
   .navigation-mobile .serv-menu { display: block; }
}
@media all and (max-width: 750px) {
   .navigation-mobile { padding-top: 63px; }
}
@media all and (max-width: 600px) {
   .containerMenu { width: 100%; }
}


/*====================================================
   overlay-mobile
====================================================*/
.overlay-mobile { position: fixed; top: 0; bottom: 0; right: 0; width: 0; height: 0; opacity: 0; background-color: rgba(0,0,0,0.4); 
   -webkit-transition: -webkit-transform 0.5s ease 0s, opacity 0.5s ease-in-out 0.3s;
      -moz-transition: -moz-transform 0.5s ease 0s, opacity 0.5s ease-in-out 0.3s;
         -o-transition: -o-transform 0.5s ease 0s, opacity 0.5s ease-in-out 0.3s;
            transition: transform 0.5s ease 0s, opacity 0.5s ease-in-out 0.3s;
}
.containerMenu-active .overlay-mobile { width: 100%; height: 100%; opacity: 1; z-index: 49998; }

@media all and (max-width: 600px) {
   .containerMenu-active .overlay-mobile {
      -webkit-transition: -webkit-transform 0.5s ease 0s, opacity 0.5s ease-in-out 0s;
         -moz-transition: -moz-transform 0.5s ease 0s, opacity 0.5s ease-in-out 0s;
            -o-transition: -o-transform 0.5s ease 0s, opacity 0.5s ease-in-out 0s;
               transition: transform 0.5s ease 0s, opacity 0.5s ease-in-out 0s;
   }
}


/*====================================================
   content_inner - PUSHER
====================================================*/
.content_inner, .header, .top-fix, #back-top {
   -webkit-transition: all 0.5s ease 0s;
      -moz-transition: all 0.5s ease 0s;
         -o-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
}


/* Animation on PUSHER for content_inner, overlay-mobile and #back-top */
.containerMenu-active .containerContent .content_inner, body:not(.header-fixed).containerMenu-active .header, .header-fixed.containerMenu-active .top-fix, .containerMenu-active #back-top, .containerMenu-active .overlay-mobile {
   -webkit-transform: translate3d(-365px, 0, 0);
      -moz-transform: translate3d(-365px, 0, 0);
         -ms-transform: translate3d(-365px, 0, 0);
            -o-transform: translate3d(-365px, 0, 0);
               transform: translate3d(-365px, 0, 0);
}

@media all and (max-width: 600px) {
   .containerMenu-active .containerContent .content_inner, body:not(.header-fixed).containerMenu-active .header, .header-fixed.containerMenu-active .top-fix, .containerMenu-active .overlay-mobile {
      -webkit-transform: translate3d(-100%, 0, 0);
         -moz-transform: translate3d(-100%, 0, 0);
            -ms-transform: translate3d(-100%, 0, 0);
               -o-transform: translate3d(-100%, 0, 0);
                  transform: translate3d(-100%, 0, 0);
   }
}

@media all and (max-width: 600px) {
   .containerMenu-active #back-top {
      -webkit-transform: translate3d(-600px, 0, 0);
         -moz-transform: translate3d(-600px, 0, 0);
            -ms-transform: translate3d(-600px, 0, 0);
               -o-transform: translate3d(-600px, 0, 0);
                  transform: translate3d(-600px, 0, 0);
   }
}