.menu a{color:#231F20!important;text-transform:uppercase;}
.menu a:hover{color:#706a6a!important;/*color:#675b5e!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:#3082a8;font-size:40px;padding:0px 12px;transition:all .2s ease;}
.social-block span:hover{color:#fff;}
/* ******** HAMBURGER MENU ******** */
/* **************************** */
.menu-image{object-fit:contain;}
.outer-menu{position:relative;/* margin-left:20px;*/ z-index: 10000;}

.outer-menu .checkbox-toggle { /*position: absolute; top: 0; left: 0; */z-index: 100002; cursor: pointer; width: 60px; height: 60px; opacity: 0; margin: 0 auto;display: block;position: relative;}

.outer-menu .hamburger > .hamburger-ins > div {  width: 40px; height: 2px; background-color: #231f20; margin: 4px 0; transition: all .3s ease;}
.outer-menu .hamburger > .hamburger-ins > div.b1-line{width: 10px!important; height: 10px!important; border-radius:50%!important;margin: 0 auto!important;}

.outer-menu .checkbox-toggle:checked + .hamburger > .hamburger-ins > .b1-line{opacity: 0;}
.outer-menu .checkbox-toggle:checked + .hamburger > .hamburger-ins > .b2-line{transform: rotate(42deg);}
.outer-menu .checkbox-toggle:checked + .hamburger > .hamburger-ins > .b3-line{transform: rotate(-42deg);margin-top: -5px;}

/*.outer-menu .checkbox-toggle:checked:hover + .hamburger > .hamburger-ins { -webkit-transform: rotate(225deg); transform: rotate(225deg); }*/

/*.outer-menu .checkbox-toggle:checked + .hamburger > .hamburger-ins:before,
.outer-menu .checkbox-toggle:checked + .hamburger > .hamburger-ins:after { 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 ~ .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;background: url('/wp-content/uploads/2021/12/lines2.png') repeat-x 0% 0%;}

/* Menu Columns FX */
.menu-block .menu-col-1,.menu-block .menu-col-1 ul{text-align:left!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{/*margin-left: -300px!important;*//*margin-top: -450px!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;*/ margin: -60px auto 0px auto;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;position: relative;}
/*.outer-menu .hamburger,.outer-menu .checkbox-toggle{top:0px;margin-top:10px;}*/




/*.outer-menu .hamburger > .hamburger-ins { position: relative; flex: none; width: 100%; height: 2px; background: #333; 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: -10px; left: 0; width: 100%; height: 2px; background: inherit; transition: all 1s ease;}
.outer-menu .hamburger > .hamburger-ins:after { top: 10px; }*/

.outer-menu .menu {position: fixed; top: 0px; left: 0; width: 100%; 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: 300vh; border-radius: 0%; background:#231F20; /*background:rgba(35,31,32,.7);*/ /*#a08344;*/ color: #fff; 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: 300vh; border-radius: 0%; 

/* background-color: rgba(225,201,176,.8); */
background-color: #fff;
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: 120vw;  /*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!important; flex-direction: column;
    justify-content: center; line-height: 30px;}
.outer-menu .menu .menu-block ul li { padding: 0; margin: 18px 0px; font-size: 2rem!important; display: block;text-align: left;padding-left: 25%;}
.outer-menu .menu .menu-block ul li ul li a{ font-size: 1.2rem!important;}

.outer-menu .menu .menu-block ul li ul{padding:0px;margin-top: 10px;}
.outer-menu .menu .menu-block ul li ul li { padding: 0; margin: 5px 0px;line-height: 20px;}

.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: #231F20; transition: width 0.4s ease;}


.menu-col-1 a{font-size:3.5rem!important;}
.menu-col-2 a{font-size:2.8rem!important;}

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


/* ********* 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:column;
  /* 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:70%;height:63%!important;margin:40px!important;margin-left: 0px!important;/*margin-top: 500px!important;*//*padding:20px!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:1rem!important;}

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

@media screen and (max-width: 768px) {
  .outer-menu .menu{height: 100%!important;}
  .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;}*/
  .menu-col-1 li a {font-size:1.8rem!important; margin:2px 0px!important;}
  .menu-col-2 li a{font-size:1rem!important; margin:2px 0px!important}
  .outer-menu .menu .menu-block ul li{margin:8px 0px!important;}
}

@media screen and (max-width: 520px) {
  .outer-menu .menu > .menu-block{height: 300vh!important;max-height: 300vh!important;}
  .outer-menu .menu > .menu-block > .menu-block-in-1{height: 300vh!important;max-height: 300vh!important;}
  .outer-menu .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2{height: 300vh!important;}
  .menu-handle-row{margin: 0px!important;margin-top: 0px!important;margin-left: -50px!important;}
  .outer-menu .menu .menu-block ul li {padding-left: 20%;}
}