/* MENU STYLES - CLEANED & OPTIMIZED */

/* MENU BASICS */
.menu a { color: #fff; }
.menu a:hover { color: #76C69C; }
.menu-top-row { position: relative; height: 100vh; }
.menu-img, #gradient { position: absolute; z-index: 0; }
.menu-img { background-size: cover; height: 100vh; left: -272px; }
#gradient { width: 390px; top: 0; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgb(167, 216, 243) 75%); left: -272px; height: 100vh; }
#logo-menu { z-index: 10; margin-bottom: 100px; }
.menu-image { object-fit: contain; }

/* SOCIAL BLOCK */
.social-block { position: relative; display: flex; align-items: flex-start; justify-content: center; margin-top: 0; height: 80px; }
.social-block-ins { color: #fff; }
.social-block span { color: #76C69C; font-size: 40px; padding: 0 12px; transition: all 0.2s ease; }
.social-block span:hover { color: #fff; }

/* HAMBURGER MENU */
.outer-menu { position: absolute; top: 40px; z-index: 10000; display: flex; justify-content: flex-end; }
.outer-menu .checkbox-toggle { z-index: 100002; cursor: pointer; width: 60px; height: 60px; opacity: 0; display: block; position: absolute; }
.outer-menu .hamburger { z-index: 10000; width: 80px; height: 60px; padding: 0.5em 1em; background: transparent; border-radius: 0 0.12em 0.12em 0; cursor: pointer; transition: box-shadow 0.4s ease; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; position: absolute; }
.outer-menu .checkbox-toggle, .outer-menu .hamburger { top: 0; right: 3%; }
.outer-menu .checkbox-toggle:hover + .hamburger { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); }

/* HAMBURGER LINES */
.outer-menu .hamburger > .hamburger-ins { position: relative; flex: none; width: 140%; height: 2px; background: #fff; transition: all 1s ease; display: flex; align-items: center; justify-content: center; }
.outer-menu .hamburger > .hamburger-ins:before { content: ''; position: absolute; z-index: 10000; top: -8px; right: 0; width: 75%; height: 2px; background: inherit; transition: all 1s ease; }
.outer-menu .hamburger > .hamburger-ins:after { top: 10px; }
.outer-menu .hamburger > .hamburger-ins > div { width: 40px; height: 2px; background-color: #231f20; margin: 4px 0; transition: all 0.3s ease; }
.outer-menu .hamburger > .hamburger-ins > div.b1-line { width: 10px; height: 10px; border-radius: 50%; margin: 0 auto; }

/* HAMBURGER CHECKED STATE */
.outer-menu .checkbox-toggle:checked, .outer-menu .checkbox-toggle:checked + .hamburger { position: fixed; top: 40px; right: 3%; }
.outer-menu .checkbox-toggle:checked + .hamburger > .hamburger-ins { background: #fff; width: 100%; }
.outer-menu .checkbox-toggle:checked + .hamburger > .hamburger-ins:before, .outer-menu .checkbox-toggle:checked + .hamburger > .hamburger-ins:after { width: 100%; top: 0; transform: rotate(90deg); background: #fff; }
.outer-menu .checkbox-toggle:checked + .hamburger > .hamburger-ins:after { opacity: 0; }
.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; }

/* MENU CONTAINER */
.outer-menu .menu { position: fixed; top: 0; 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: #76C69C; 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 { width: 300vw; height: 300vh; border-radius: 0; background-color: #0E5CAA; 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; max-height: 100vh; opacity: 0; transition: opacity 1s ease; overflow-y: auto; flex: none; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* MENU ACTIVATION STATES */
.outer-menu .checkbox-toggle:checked ~ .menu { pointer-events: auto; visibility: visible; }
.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block { transform: scale(1); transition-duration: 0.7s; }
.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 { transform: scale(1); transition-duration: 0.9s; }
.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 { opacity: 1; transition: opacity 0.9s ease 0.9s; background-repeat: no-repeat; background-size: cover; }

/* STEP IMAGE */
#step { position: absolute; width: 600px; height: auto; object-fit: contain; z-index: 1000000; bottom: 0; right: 0; opacity: 0; transition: opacity 1s ease 1.5s; }
.outer-menu .checkbox-toggle:checked ~ .menu > #step { opacity: 1; }

/* MENU LISTS */
.outer-menu .menu .menu-block ul { list-style: none; padding: 0; margin: 0 0 100px 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: 10px 0; display: block; text-align: center; }
.outer-menu .menu .menu-block ul li ul { padding: 0; margin-top: 10px; }
.outer-menu .menu .menu-block ul li ul li { padding: 0; margin: 5px 0; }
.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:after { content: ''; position: absolute; z-index: 10000; bottom: -0.15em; left: 0; width: 0; height: 2px; background: #76C69C; transition: width 0.4s ease; }
.outer-menu .menu .menu-block ul li a:hover:after { width: 100%; }

/* MENU COLUMNS */
.menu-block .menu-col-2, .menu-block .menu-col-2 ul { text-align: center; }
.menu-col-2 > li > a { font-size: 30px; line-height: 40px; }
.menu-col-2 > li > ul > li > a { font-size: 24px; line-height: 32px; }
.menu-col-2 > li > a:before { font-size: 12px; color: #042F5F; position: absolute; margin: -7px 0 0 -22px; }

/* INITIAL OPACITY STATES */
.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; }

/* MENU ANIMATION SEQUENCE */
.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 > .menu-top-row { opacity: 1; transition: opacity 1.2s ease 1.2s; }
.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 > .menu-handle-row > .menu-col-1 { opacity: 1; transition: opacity 0.7s ease 0.7s; }
.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 > .menu-handle-row > .menu-col-2 { opacity: 1; transition: opacity 0.8s ease 0.8s; }
.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 > .menu-handle-row > .menu-col-3 { opacity: 1; transition: opacity 1s ease 1s; }
.outer-menu .checkbox-toggle:checked ~ .menu > .menu-block > .menu-block-in-1 > .menu-block-in-2 > .menu-handle-row > .lang-block { opacity: 1; transition: opacity 1.2s ease 1.2s; }
.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; transition: opacity 1.9s ease 1.9s; }
.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; transition: opacity 1.4s ease 1.4s; }

/* MENU BOX FLEX DIRECTION */
.outer-menu .menu, .outer-menu .menu > .menu-block, .outer-menu .menu > .menu-block > .menu-block-in-1 { flex-direction: column; justify-content: flex-start; }

/* RESPONSIVE - TABLET */
@media (max-width: 991px) {
    #step { width: 400px; }
    .outer-menu .menu { width: 100vw; }
    .menu-handle-row { height: 130%; width: 100%; margin-top: 110px; }
    .outer-menu .menu .menu-block .menu-col-1 { display: none; }
    .outer-menu .menu .menu-block .menu-col-2 { width: 100%; }
    .outer-menu .menu .menu-block ul li { font-size: 1.6rem; }
    .outer-menu .menu .menu-block ul li ul li a { font-size: 1rem; }
    .menu-handle-row .col-lg-4, .menu-handle-row .col-lg-4 li { text-align: center; }
    #logo-menu { margin-bottom: -50px; margin-top: 100px; width: 150px; }
    .social-block-ins { left: 50px; margin-top: 0; }
    .menu-col-2 > li > a { font-size: 1.8rem; line-height: 1.8rem; }
    .menu-col-2 > li > ul > li > a { font-size: 1.5rem; line-height: 2rem; }
}

/* RESPONSIVE - MOBILE */
@media (max-width: 768px) {
    #step { width: 300px; }
    .outer-menu .menu { width: 100vw; }
    .outer-menu .menu .menu-block ul li { margin: 8px 0; }
    .menu-col-2 > li > a { font-size: 1.6rem; line-height: 1.6rem; }
    .menu-col-2 > li > ul > li > a { font-size: 1.4rem; line-height: 1.8rem; }
    .outer-menu .menu .menu-block .menu-col-2 { margin-top: -200px; }
}

/* RESPONSIVE - SMALL MOBILE */
@media (max-width: 520px) {
    .outer-menu .menu .menu-block .menu-col-2 { margin-top: -180px; }
}