:root {
  --menuWidth: 80vw;  
  --menuHeight: calc(80vw * 0.4799); /* near enough the size of the ratio of the BG menu image */
  --menuimgsmallH: 329px;
  --menuimgsmallW : 541px;
  /*--menuminwidth : 865px;
  --menuminheight: 415px*/
}

.menu-img-layerTop {
    position: absolute; 
    z-index: 100000; 
    right: 30px;
    top: auto;
    width: 550px; 
    height: 331px; 
    background: url('img/cs-menugrid-empty.svg') left top no-repeat;
    background-size: cover;
    transition: width 0.5s, height 0.5s;   
    transition-delay: 1s;
    margin-top: 30px;
    display: none
}

.home .menu-img-layerTop {
   display: block
}

.home #cs-toggle-main-w
{
   display: none;
} 

.home #cs-toggle-main-b {
   display: none !important;
} 

.openmenu{
     width: var(--menuWidth);
     height: var(--menuHeight);
     position:fixed
}

.resetTop {
   top: auto
}

/*Modal Window*/
#gsy-text-btn {
    color: #fff;
    font-size: 20px;
    font-family: arial, sans;
    font-weight: light;
    text-align: right;
    padding: 44px 26px 0 0;
}

#gsy-text-btn:hover {
   cursor: pointer;
}

/* The Close Button */
.close {
  color: #fff;
  text-align: right;
  padding: 0px 30px;
  font-size: 38px;
  font-weight: 200;
  font-family: Verdana;
  position: absolute;
  z-index: 11;
  width: 100px;
  height: 100px;
  right: 5px;
  top: 55px;
  background-image: url('img/close-btn.svg');
  background-repeat: no-repeat;
  background-size: 35px 35px;
  cursor: pointer
}

.modal {
  display: none; 
  position: fixed;
  z-index: 1000; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  overflow: auto;
  background-color: #1d1d1b
}

/*Modal Content*/
#modal-content {
 display: flex; 
 justify-content: space-between; 
 flex-direction: column; 
 min-height: 100vh; 
 width: 100vw
}

#menuwrapper {
   width: var(--menuWidth);
   height: var(--menuHeight);
   /*min-width: var(--menuminwidth);
   min-height: var(--menuminheight);*/
}

#menu {
  display: grid;
  width: 100%;
  height: 100%;
  margin: 0;
  grid-template-columns: auto auto auto auto auto;
  gap: 0px;
  padding: 0px;
  opacity: 0;
  transition: opacity 3s;
  transition-delay: 0.15s;
  background: url('img/cs-grid-menu-wide.jpg') 0px -3px no-repeat;
  background-size: cover;   
}

.gsy-submenuNavItem ul li,
.gsy-menuNavItem-label {
   font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
   font-weight: 300;
   letter-spacing: -1px;
   color: #fff;  
}

.gsy-menuNavItem-label {
    position: absolute;
    bottom: 40px;
    left: 10%;
    font-size: 24px;
    opacity: 0;
    transition: 3s;
    transition-delay: 1.5s;
    background-image: url('img/arrow-grid.svg');
    background-size: 30px 20px;
    background-repeat: no-repeat;
    background-position: right center;
    width: 75%;
    padding-right: 10%;
    min-width: 100px;
}

.gsy-gridItem:nth-child(8) .gsy-menuNavItem-label {
  text-align: center;
  left:3% 
}

.gsy-gridItem:nth-child(10) .gsy-menuNavItem-label {
   width: 65% 
 }

 .gsy-submenuNavItem {
   width: 100%;
 }

.gsy-submenuNavItem ul {
   padding-top: 10px;
   padding-left: 10%;
   width: 100%
}

.gsy-submenuNavItem ul li {
   font-size: 20px;
   list-style-type: none;
   padding: 3px 0px;
}

.gsy-submenuNavItem ul li a {
   color: #fff
}

#menu.opacity100,
#menu .gsy-menuNavItem-label.opacity100 {
    opacity: 1
}

.gsy-gridItem {
  width : calc((var(--menuWidth) / 5) );
  height: calc((var(--menuWidth) / 5) ); 
  /*min-width: calc( (var(--menuminwidth) / 5) );
  min-height: calc( (var(--menuminheight) / 5) );*/

}

.gsy-positionWrapper {
   position: relative
}

.gsy-positionAbs {
   position: absolute;
}

.gsy-hoverEffect {
   width: 100%;
   height: 100%;
   cursor:pointer;
   opacity: 0;
   transition: opacity 1s;
   background: #1d1d1b;
}

.gsy-submenuNavItem ul li {
   display: none
}

.gsy-hoverEffect.gsy-positionAbs {
   left: 0;
   top: 0
}

.gsy-hoverEffect.hoverIn {
    opacity: 0.7
}

.h33 {
    height:  calc(var(--menuWidth) / 12.5) !important; /*TODO : Is that really the best way ?*/
}

.gsy-gridItem:nth-child(11),
.gsy-gridItem:nth-child(12),
.gsy-gridItem:nth-child(13),
.gsy-gridItem:nth-child(14),
.gsy-gridItem:nth-child(15) {
   height:  calc(var(--menuWidth) / 12.5) !important; /*TODO : Is that really the best way ?*/
}

.logoarea {
    min-height: 200px;
    width: 100%;
    height: 20vh;
}

.logoarea a {
   background-image: url('img/logo-menu.svg');
   background-size: contain;
   background-repeat: no-repeat;
   display: block;
   width: 199px;
   height: 145px;
   margin: 18px 75px
}

.gsy-fixedpos {
   position: fixed;
   z-index: 1000
}

#togglemenu-wrapper {
   right: 30px;
   top: 30px; 
   display: none  
} 

.gsy-circlescale-btn {
   min-width: 85px;
   min-height: 85px;
   border: 3px solid #fff;
   border-radius: 50%;
}

.gsy-circlescale-btn span {
   color: #fff;
   font-size: 20px;
   font-family: arial, sans;
   font-weight: light;
   text-align: right;
   line-height: 85px;
   text-align: center;
   display: inline-block;
   width: 100%;
   cursor:pointer;
}

.toggle-cta {
}

@media (max-width: 1365px) {
   .gsy-menuNavItem-label {
      left: 3px;
      font-size: 21px;
      width: 95%;
  }

  .gsy-gridItem:nth-child(8) .gsy-menuNavItem-label {
   text-align: left;
   left:15px;
   width: 90%; 
 }

 .gsy-submenuNavItem ul li {
   font-size: 17px;
   padding: 1px 0px;
}

.gsy-submenuNavItem ul {
   padding-top: 3px;
   padding-left: 5px;
}
}


/*Mobile*/
@media (max-width: 820px) {

.home .menu-img-layerTop {
   display: none
}
   
#menuwrapper {
   width: 100vw;
   height: auto;
   position: relative;
   z-index: 100000000
}

#menu {
  display: grid;
  width: 100%;
  height: 100%;
  margin: 0;
  grid-template-columns: auto auto auto;
  gap: 0px;
  padding: 0px;
  opacity: 1;
  background-image: url('img/cs-grid-menu-mobile-2.jpg');
  background-size: contain;
}

#menu > div {
  width : calc(100vw / 3);
  height: calc(100vw / 3); 
  position: relative
}

.extended-col {
    grid-area: 4 / 2 / span 2 / 3; 
    height: calc((100vw / 3) * 2) !important; 
}

.gsy-menuNavItem-label {
   position: absolute;
   bottom: 10px;
   left: 10%;
   font-size: 22px;
   opacity: 1;
   background-size: 17px 10px;
   background-repeat: no-repeat;
   background-position: right center;
   width: 75%;
   padding-right: 10%;
   /*min-width: 100px;*/
}

#menu > div:nth-child(9) .gsy-menuNavItem-label {
   bottom: 20px
} 

.gsy-submenuNavItem ul li {
   font-size: 21px;
   padding: 3px 0px;   
}

.gsy-submenuNavItem ul {
   padding-left: 10%;
}

.logoarea {
   min-height: 100px;
   height: 100px;
   width: 70%;   
}

.logoarea a {
   background-image: url('img/logo-menu-mobile.svg');
   background-size: 155px;
   background-position: 15px 15px;
   height: 75px;
   margin: 7px 7px
}

.elementor-popup-modal .dialog-close-button {
   top: 25px !important;
   right: 20px !important;
   z-index: 99999999 !important
}
	
.elementor-kit-13 a, 
#menu a {
   color: #fff !important;
}

.dialog-close-button {
   font-size: 30px;
   line-height: 2;
   color: #fff
}
}

@media (max-width: 767px) {
   .gsy-menuNavItem-label {
      font-size: 14px;
      
  }

  .gsy-submenuNavItem ul {
   padding-top: 10px;
   padding-left: 10%;
}

.gsy-submenuNavItem ul li {
   font-size: 14px;
   padding: 3px 0px;
}

}