.menu a{color:#fff!important;text-transform:uppercase;}
.menu a:hover{color:#000!important;}

.menu-top-row{position:relative;height:100vh!important;}
.menu-img,#logo-menu,#gradient{position:absolute!important;z-index:0!important;}
#logo-menu{top:40px;left:36px;z-index:10!important;}
.menu-img{background-size:cover; height:100vh;}

#gradient{width: 390px; top:0px; background:linear-gradient(to right, rgba(255,255,255,0) 0%,rgb(167, 216, 243) 75%);}
.menu-img,#gradient{left:-272px;height:100vh;}

.social-block{position:relative;display: flex; align-items: flex-start; justify-content: center;margin-top:-30px!important;}
.social-block-ins{position:absolute;margin:24px 0px;}
.social-block span{color:#5968b1;font-size:60px;padding:0px 8px;transition:all .2s ease;}
.social-block span:hover{color:#fff;}
/* ******** HAMBURGER MENU ******** */
/* **************************** */

.outer-menu { position:absolute; top: 75px; left: 10%; z-index: 10000;}
/*.outer-menu .menu{overflow-y:scroll!important;}
.menu::-webkit-scrollbar {width: .5em;}
.menu::-webkit-scrollbar-track {background-color:#fff;-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.3);}
.menu::-webkit-scrollbar-thumb {background-color:#000;outline:1px solid slategrey;}
.menu{scrollbar-width: thin!important; scrollbar-color: #000 #F4F4F4;}*/
.hamburger > button{position:absolute;left:65px;background:transparent;border:none;color:#A49D9B;}
.outer-menu .checkbox-toggle { position: absolute; top: 0; left: 0; z-index: 10002; cursor: pointer; width: 150px; height: 46px; opacity: 0;}

.outer-menu .checkbox-toggle:checked,.outer-menu .checkbox-toggle:checked + .hamburger{position:fixed;left:58vw!important;top:37vh!important;}
.outer-menu .checkbox-toggle:checked, .outer-menu .checkbox-toggle:checked + .hamburger{border-color:#fff!important;width:200px;height:200px;border-radius:50%!important;transition:border .3s ease;}
.outer-menu .checkbox-toggle:checked:hover + .hamburger{border-color:#181d23!important;}
.outer-menu .checkbox-toggle:checked + .hamburger > button{color:#fff!important;display:none;}
.outer-menu .checkbox-toggle:checked + .hamburger > .hamburger-ins{left:40px;}

.outer-menu .checkbox-toggle:checked + .hamburger > .hamburger-ins { -webkit-transform: rotate(135deg); transform: rotate(135deg); background:#fff!important}
.outer-menu .checkbox-toggle:checked + .hamburger > .hamburger-ins:before,
.outer-menu .checkbox-toggle:checked + .hamburger > .hamburger-ins:after { width:100%!important;top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.outer-menu .checkbox-toggle:checked + .hamburger > .hamburger-ins:after { opacity: 0; }
/* .outer-menu .checkbox-toggle:hover + .hamburger { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); } */
.outer-menu .checkbox-toggle:checked:hover + .hamburger > .hamburger-ins { -webkit-transform: rotate(225deg); transform: rotate(225deg); }

.outer-menu .checkbox-toggle:checked ~ .menu { pointer-events: auto; visibility: visible; }

.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block { -webkit-transform: scale(1); transform: scale(1);transition-duration: .4s;}
.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 { -webkit-transform: scale(1); transform: scale(1);transition-duration: .6s;}
/* Important Menu Items fx, it appears after the transition if increaseed */
.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 { opacity: 1; transition: opacity .6s ease .6s;}

/* Menu Columns FX */
.menu-block .menu-col-1,.menu-block .menu-col-1 ul{text-align:right!important; padding-right:10px!important;}
.menu-block .menu-col-2,.menu-block .menu-col-2 ul{text-align:left!important; padding-left:10px!important;}

/*.menu-block .menu-col-1,.menu-block .menu-col-1 ul{text-align:left!important;}
.menu-block .menu-col-2,.menu-block .menu-col-2 ul{text-align:center!important;}
.menu-block .menu-col-3,.menu-block .menu-col-3 ul{text-align:right!important;}*/

.menu-block .menu-col-1,.menu-block .menu-col-2,.menu-block .menu-col-3,.menu-top-row,.main-mssg,.social-block-ins,.lang-block{opacity:0!important;}
.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 > .menu-top-row{ opacity:1!important; transition: opacity 1.2s ease 1.2s!important;}

.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 > .menu-handle-row > .menu-col-1{opacity: 1!important; transition: opacity .7s ease .7s!important;}
.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 > .menu-handle-row > .menu-col-2{opacity: 1!important; transition: opacity .8s ease .8s!important;}
.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 > .menu-handle-row > .menu-col-3{opacity: 1!important; transition: opacity 1s ease 1s!important;}
.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 > .menu-handle-row > .lang-block{opacity: 1!important; transition: opacity 1.2s ease 1.2s!important;}
.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 > .menu-handle-row > .main-message > .main-mssg{opacity: 1!important; transition: opacity 1.9s ease 1.9s!important;}

.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 > .menu-handle-row > .social-block > .social-block-ins{ opacity:1!important; transition: opacity 1.4s ease 1.4s!important;}

.outer-menu .hamburger { position: absolute; left: 0; z-index: 10000; width: 60px; height: 60px; padding: .5em 1em; background:transparent; border-radius: 0 0.12em 0.12em 0; cursor: pointer;transition: box-shadow 0.4s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; align-items: center; justify-content: center;}

.outer-menu > .hamburger{border:2px solid #A49D9B; width:150px; height:46px; border-radius:30px;}

.outer-menu .hamburger,.outer-menu .checkbox-toggle{top: -44px;}
.home .outer-menu .hamburger,.home .outer-menu .checkbox-toggle{top: -44px;}



.outer-menu .hamburger > .hamburger-ins { margin-left:-80px;position: relative; flex: none; width: 32px; height: 2px; background: #938A88; transition: all 1s ease; display: flex; align-items: center;justify-content: center;}
.outer-menu .hamburger > .hamburger-ins:before,
.outer-menu .hamburger > .hamburger-ins:after {content: ''; position: absolute; z-index: 10000; top: -7px; left: 0; width: 32px; height: 2px; background: inherit; transition: all 1s ease;}
.outer-menu .hamburger > .hamburger-ins:after { top: 7px; }

.home .outer-menu .hamburger > .hamburger-ins { margin-left:-80px;position: relative; flex: none; width: 32px; height: 2px; background: #938A88; transition: all 1s ease; display: flex; align-items: center;justify-content: center;}
.home .outer-menu .hamburger > .hamburger-ins:before,
.home .outer-menu .hamburger > .hamburger-ins:after {content: ''; position: absolute; z-index: 10000; top: -7px; left: 0; width: 32px; height: 2px; background: inherit; transition: all 1s ease;}
.home .outer-menu .hamburger > .hamburger-ins:after { top: 7px; }

.outer-menu .menu {position: fixed; top: 0; left: 0; width: 65%; height: 100%; pointer-events: none; visibility: hidden; overflow: hidden; backface-visibility: hidden; outline: 1px solid transparent; display: flex;align-items: center;}
.outer-menu .menu > .menu-block {width: 300vw; height: 200vw; border-radius: 0%; background:rgba(24,29,35,.7); /*#a08344;*/ color: #938A88; transition: all 1s ease; flex: none; transform: scale(0); backface-visibility: hidden; overflow: hidden; display: flex; align-items: center; margin-left:50px;}


.outer-menu .menu > .menu-block > .menu-block-in-1{ 
/* width: 200vw; height: 200vw; border-radius: 50%; */ 
width: 300vw; height: 200vw; border-radius: 0%; 

background-color: rgba(148,138,137,.85);
background-attachment: fixed;
background-size: cover;

color: #fff; transition: all 1s ease; flex: none; transform: scale(0); backface-visibility: hidden; overflow: hidden; display: flex; align-items: center;}

.outer-menu .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 {
  text-align: center; max-width: 100vw;  /*100vw for orizontal, 90vw for vertical */
  max-height: 100vh;  opacity: 0;  transition: opacity 1s ease;
  overflow-y: auto; /* To be able to scroll when in mobile*/
  flex: none;  display: flex;  align-items: center;  justify-content: center;}


.outer-menu .menu .menu-block ul { list-style: none; padding: 0px; margin: 0; max-height: 100vh; text-align:center; height:auto; display: flex; flex-direction: column;
    justify-content: center; line-height: 30px;}
.outer-menu .menu .menu-block ul li {padding:0; margin:3px 0px; display:block; text-align:left;}

.outer-menu .menu .menu-block ul li a { position: relative; display: inline; cursor: pointer; transition: color 0.4s ease;}
.outer-menu .menu .menu-block ul li a:hover { color: #fff; }
.outer-menu .menu .menu-block ul li a:hover:after { width: 100%; }
.outer-menu .menu .menu-block ul li a:after { content: ''; position: absolute; z-index: 10000; bottom: -0.15em; left: 0; width: 0; height: 2px; background: #000; transition: width 0.4s ease;}

.outer-menu .menu .menu-block ul li a{font-size:40px!important;line-height:46px;}

.outer-menu .menu .menu-block ul li ul{padding:0px;}
.outer-menu .menu .menu-block ul li ul li { padding: 0; margin: -2px 0px 4px 15px; height: 30px!important;}
.outer-menu .menu .menu-block ul li ul li a{font-size:18px!important;padding:5px 0px!important;}

.menu-col-2 a{font-size:18px!important;}
.menu-col-2 li{margin:3px 0px!important;}


.outer-menu .menu .menu-block ul .prod-menu-item ul{display:none;}
/* ********* SET MENU BOX FX ******* */
.outer-menu .menu, .outer-menu .menu > .menu-block, .outer-menu .menu > .menu-block > .menu-block-in-1{
  /* column or row for direction */
  flex-direction:row;
  /* start, end center for animation start point*/
  justify-content:flex-end;
  }

/* ***** SET MENU ITEMS POSITION **** */
/* *********REMOVE IT TO CHANGE POSITION**** */
.outer-menu .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 { width:100%;height:100%; text-align:center!important;}
/* .menu-handle-row{width:86%;height:63%!important;margin:-60px 40px 40px 40px!important;} */

@media screen and (max-width: 991px) {
.menu-handle-row{height:80%!important;}
.outer-menu #logo-menu{display:none;}
/*.outer-menu .menu .menu-block ul li {font-size:1.6rem!important;}*/
.outer-menu .menu .menu-block ul li ul li a{font-size:16px!important;}

.menu-handle-row .col-lg-4,.menu-handle-row .col-lg-4 li{text-align: center!important;}
}

@media screen and (min-width: 576px) and (max-width: 991px) {
    .outer-menu .menu{width:75%;}
}

@media screen and (max-width: 768px) {
.menu-block .menu-col-1,.menu-block .menu-col-1 ul , .menu-block .menu-col-2,.menu-block .menu-col-2 ul{text-align:center!important;padding:0px!important;}
/*.outer-menu .menu .menu-block ul{width:60%!important;}*/
.outer-menu {right: 40%!important;left:auto;}


.menu-col-1 li a {font-size:2rem!important; margin:2px 0px!important;}
.menu-col-2 li a{font-size:1.3rem!important; margin:2px 0px!important}
.outer-menu .menu .menu-block ul li{margin:-1px 0px!important;}
}

@media screen and (min-width: 576px) and (max-width: 768px) {
    .outer-menu {right: 30%!important;left:auto;}
}

@media screen and (max-width: 576px) {
  .outer-menu .menu{width:100%!important;}
  .outer-menu .menu > .menu-block{margin-left: 0px!important;height: 300vh!important;}
  .outer-menu .menu > .menu-block > .menu-block-in-1{height: 300vh!important;}

  .outer-menu .menu .menu-block ul li a{font-size:36px!important;line-height:50px;}
  .outer-menu {right: 18%!important;left:auto;top:75px!important;}
  .hamburger > button{display:none;}
    .outer-menu .checkbox-toggle,.outer-menu > .hamburger{ width: 50px; height: 50px;}
    .home .outer-menu .hamburger > .hamburger-ins{left:40px;}
    .outer-menu .hamburger > .hamburger-ins{left:40px;}
    .outer-menu .checkbox-toggle:checked,.outer-menu .checkbox-toggle:checked + .hamburger{position:fixed;left:auto!important;}
    .outer-menu .checkbox-toggle:checked,.outer-menu .checkbox-toggle:checked + .hamburger{top:30px!important;border-color:#fff!important;width:50px;height:50px;border-radius:50%!important;}

}

@media screen and (max-width: 330px) {

  
}