.header--primary-menu-trigger {
   height: 21px;
   width: 26px;
   padding: 0;
   border: none;
   border-radius: 0;
   background: transparent;
   margin-left: auto;
   z-index: 10;
}
 
.header--primary-menu-trigger span {
   display: block;
   width: 100%;
   height: 2px;
   margin-bottom: 6px;
   position: relative;
   background: #051328;
   z-index: 1;
   transform-origin: 4px 0px;
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               /* background var(--theme-swith-transition), */
               opacity 0.55s ease;
}

.header--primary-menu-trigger span:first-child {
   transform-origin: 0% 0%;
}

.header--primary-menu-trigger span:nth-last-child(2) {
   transform-origin: 0% 100%;
}

.header--primary-menu-trigger span:last-child {
   margin-bottom: 0;
}

/* 
* Transform all the slices of hamburger
* into a crossmark.
*/
.header--primary-menu-trigger.close span {
   opacity: 1;
   transform: rotate(45deg) translate(-7px, -12px);
   background-color: #fff;
}

/*
* But let's hide the middle one.
*/
.header--primary-menu-trigger.close span:nth-last-child(3) {
   opacity: 0;
   transform: rotate(0deg) scale(0.2, 0.2);
}

/*
* Ohyeah and the last one should go the other direction
*/
.header--primary-menu-trigger.close span:nth-last-child(2) {
   transform: rotate(-45deg) translate(-3px, 10px);
}


.menu-toggle{
   z-index: 1;
   min-width: 100%;
   min-height: 100vh;
   position: fixed;
   top: 0;
   height: 0;
   visibility: hidden;
   opacity: 0;
   text-align: center;
   padding-top: 20px;
   transition: all 0.3s ease-in-out;
   left: 0;
   overflow: hidden;
}


.menu-toggle.overlay {
	visibility: visible;
	opacity: 1;
	padding-top: 100px;
	background: #1a1a1a;
}

.menu-toggle ul{
   list-style: none;
   padding: 0;
   margin: 0;
}
.menu-toggle a{
   color: #fff;
   padding: 10px 20px;
   text-decoration: none;
   display: flex;
   position: relative;
}
.menu-item-has-children a span{
   width: 40px;
   height: 40px;
   font-size: 30px;
   line-height: 0.6;
   font-weight: bold;
   color: #00a9d1;
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   align-items: center;
   justify-content: flex-end;
}

.menu-item-has-children a span::after{
   content: '+';
}

.menu-item-has-children.active a span::after{
   content: '–';
}
.menu-item-has-children.active .sub-menu{
   display: flex;    
   flex-direction: column;
   background: #000;
}
.menu-item-has-children .sub-menu li.title{
   display: none;
}
.menu-item-has-children .sub-menu a{
   padding: 7px 20px;
}

.menu-toggle .sub-menu{
   display: none;
}


@media (min-width: 1200px) {
   .menu-toggle,
   .menu-toggle>ul{
      display: flex;
      visibility: visible;
      position: static;
      background: transparent;
      height: auto;
      min-height: auto;
      min-width: auto;
      opacity: 1;
   }
   .burger{
      display: none
   }
   .menu-toggle{ 
      margin-left: 18px;
      margin-top: -21px;
      overflow: visible;
      position: static;
   }
   .menu-toggle>ul>li{
      display: flex;
      align-items: center;
   }
   .menu-toggle a {
      color: #051328;
      transition: all .2s;
      opacity: 1;
   }
   .menu-toggle a:hover{
      opacity: .8;
   }
   .menu-toggle>ul>li>a{
      font-size: 18px;
      padding: 40px 0;
      /* margin: 0 10px; */
      /* color: #03035e; */
      /* border-bottom: 3px solid transparent; */
      transition: all 0.1s ease-in;
      /* margin: 0; */
      display: flex;
      /* margin: 0 16px; */
   }
   .menu-toggle>ul>li:last-child>a{
      margin-left: 33px;
      padding: 10px 26px;
      /* background: #00b4d8; */
      border: none;
      border-radius: 10px;
      /* color: #fff; */
   }
   .menu-toggle>ul>li:last-child>a:hover{
      /* background: #018cbd; */
   }
   .menu-toggle>ul>li>a:hover, 
   .menu-toggle>ul>.current-item>a{
      /* color: #00b4d8; */
      text-decoration: underline;
      text-underline-offset: 10px;
   }
   .menu-item-has-children a span::after{
      display: none;
   }

   .menu-toggle li a{
      position: static;
      padding: 40px 0;
   }
   
   .menu-toggle li .sub-menu{
      display: none;
      position: absolute;
      width: 100%;
      left: 0;
      top: 100px;
      z-index: 2;
      visibility: visible;
      opacity: 1;
      max-width: 1400px;
      left: 50%;
      transform: translateX(-50%);
      flex-wrap: wrap;
      height: 300px;
      background: #1a1a1a;
   }
   .menu-toggle li.menu-item-has-children>a::after{
      display: none;
      position: absolute;
      content: '';
      width: 100%;
      left: 0;
      top: 100px;
      height: 320px;
      background: #1a1a1a;
   }
   .menu-toggle li:hover .sub-menu{
      display: flex;
   }
   
   .menu-toggle li.menu-item-has-children:hover>a::after{
      display: flex;
   }
   .menu-toggle .sub-menu li{
      text-align: left;
      float: left;
   }
   .menu-toggle .sub-menu li:nth-child(even){
      width: 20%;
   }
   .menu-toggle .sub-menu li:nth-child(odd){
      width: 20%;
      margin-right: 60%;
   }
   .menu-toggle .sub-menu li a::after{
      content: '→';
      font-size: 20px;
      /* color: #00b4d8; */
      margin-left: 10px;
   }
   .menu-toggle .sub-menu li.title{
      display: flex;
      width: 100% !important;  
      /* color: #fff; */
      font-size: 37px;
      margin-top: 30px;
      margin-bottom: 20px;
      margin-right: 0 !important;
      float: none !important;
      font-family: var(--font-accent);
   }
   .menu-item-has-children .sub-menu a{
      padding: 0;
      font-size: 18px;
   }
   .menu-item-has-children .sub-menu a:after{
      line-height: normal;
   }
}


.footer .menu-title{
   font-size: 18px;
}
.footer .menu{
   padding: 0;
   margin: 0;
   list-style: none;
}
.footer .menu a{
   display: flex;
   text-decoration: none;
   color: var(--black);
   font-size: 14px;
   margin-bottom: 0;
   opacity: 1;
   transition: all .2s linear;
}
.footer .menu a:hover{
   opacity: .8;
}

@media (min-width: 1024px) {
   .footer .menu a{
      margin-bottom: 16px;
   }
}