@media (min-width:993px) { .mobile-main-wrapper { display: none; } } @media (max-width:992px) { .mobile-logo-container img { max-width: 140px; } .main-header-container { display: none; } } @media (max-width: 992px) { .menu-menu-1-container ul.sub-menu { background: transparent; min-height: 0; } .menu-menu-1-container ul.sub-menu:before { display: none; } .mobile-logo-container img { max-width: 180px; width: 100%; } .mobile-menu-outer-container { position: absolute; width: 100%; z-index: 2; display: flex; justify-content: space-between; padding: 30px; } .mobile-menu-container.inner { opacity: 0; height: 0; overflow: hidden; } .site-branding { max-width: 130px; padding-left: 0; } .header-container { align-items: center !important; } .menu-text-size-container { display: none !important; } .main-nav-mobile-outer, .mobile-menu-container, .hamburger.outer { display: block; } .main-nav-mobile-outer { display: flex; align-items: center; } .header-container { padding: 30px 20px !important; justify-content: space-between !important; } } .hamburger { z-index: 6; } .hamburger-line { width: 38px; background-color: #fff; height: 3px; display: block; margin-bottom: 7px; transition: all 300ms ease-in; border-radius: 50px; } .mobile-menu-container { position: absolute; height: 100vh; top: 0; right: -100%; width: 100%; transition: height 0.3s ease-in; background: #fff; display: flex; align-items: center; max-width: 350px; z-index: 5; flex-direction: column; } .hamburger-line.line1, .hamburger-line.line3 { top: 0; position: relative; } .hamburger-line.line3 { margin-bottom: 0; } .mobile-menu-container-inner { display: flex; flex-direction: column; } body.fix-top-menu { height: 100%; overflow-y: hidden; } .mobile-menu-container .menu-menu-1-container li { padding: 5px 0px; } .mobile-menu-container .menu-menu-1-container .main-menu-login a { max-width: 112px; } .mobile-menu-container .menu-menu-1-container { justify-content: center; height: 100%; } .mobile-menu-container #primary-menu { flex-direction: column; align-items: end; display: block; } .mobile-menu-container.open { right: 0; overflow-y: scroll; bottom: 0; overflow-x: hidden; z-index: 100000; opacity: 1; height: 100vh; } .open .hamburger-line { background-color: #01A7CB; } .open .hamburger-line.line1 { transform: rotate(45deg); position: relative; top: 16px; } .open .hamburger-line.line2 { width: 0; } .open .hamburger-line.line3 { transform: rotate(-45deg); margin-bottom: 11px; position: relative; top: -4px; } @media (min-width:993px) { .mobile-menu-container.inner.open { display: none; } } @media (max-width: 992px) and (min-width: 768px) { .mobile-menu-container.open { overflow-y: hidden; } } @media (max-width:992px) { #primary-menu li .sub-menu.open { opacity: 1; position: relative; right: 0; box-shadow: none; height: 100%; max-height: 999px; left: 0; display: block; } #primary-menu li .sub-menu { left: 99999999999999999px; position: relative; } #primary-menu li .sub-menu li.menu-item-has-children .sub-menu.open { opacity: 1; height: 100%; max-height: 999px; position: relative; left: 0; padding: 10px 0 0 15px; box-shadow: none; } .mobile-menu-container .main-menu-login a:before { width: 16px; height: 16px; background-size: contain; margin-left: 4px; } .mobile-menu-container .main-menu-login a { text-transform: none; width: 105px; } a.mobile-image-logo { display: none; } .mobile-outer-open .mobile-image-logo { display: block; } html.no-scroll { height: 100%; overflow-y: hidden; } .main-nav-mobile-outer.outside.mobile-outer-open { opacity: 0; } .main-nav-mobile-outer.outside.mobile-outer-open a.mobile-image-logo { position: absolute; left: 25px; } .main-nav-mobile-outer.inside { justify-content: space-between; width: 100%; padding: 25px; } li.main-menu-login { padding: 0px !important; margin-top: 15px; margin-left: 13px; } li.main-menu-login a { padding: 1px 11px !important; } #primary-menu li.main-menu-login a { text-transform: capitalize; } .mobile-menu-container ul.sub-menu { opacity: 0; height: 0; transition: 0.4s opacity ease-in-out, 0.5s max-height ease-in-out; max-height: 0; } #primary-menu li .sub-menu li.menu-item-has-children a { padding: 10px 5px 4px; } #primary-menu li .sub-menu li.menu-item-has-children a { padding: 11px 0 0 43px; } .menu-menu-1-container .menu-item { align-items: baseline !important; } .mobile-menu-container-inner, .menu-menu-1-container, ul#primary-menu { width: 100%; } /* MOBILE MENU */ .mobile-menu-container ul.sub-menu { list-style: none; padding: 0; margin: 0; } ul#primary-menu { list-style: none; padding: 50px 0 0 50px; margin: 0; } .mobile-menu-container a { color: #69B0BB; text-transform: uppercase; font-size: 20px; } nav#primary-menu { margin-bottom: 200px; } #primary-menu li.menu-item-has-children:hover>.sub-menu li.menu-item-has-children:hover>.sub-menu li.menu-item-has-children:hover>.sub-menu { display: block; padding: 10px 20px 0px; } .menu-mobile-menu-container .menu-item-has-children:before { top: 9px; } .menu-mobile-menu-container .menu-item-has-children:hover:before { transform: rotate(90deg); } /* MOBILE MENU STYLING */ #primary-menu li.menu-item-has-children:hover>.sub-menu li.menu-item-has-children:hover>.sub-menu li.menu-item-has-children:hover>.sub-menu a:after { display: none; } li.bold a { font-weight: 600; } ul#primary-menu { list-style: none; padding: 40px 0 10px; margin: 0; margin-bottom: 0; height: auto; } .mobile-menu-container-inner a.popuptrigger { padding: 8px 0px; background-color: #2C3C53 !important; color: #fff !important; max-width: 200px; justify-content: center; margin-left: 59px; margin-top: 10px; margin-bottom: 100px; } #primary-menu li.main-menu-login a { border: 0; } #primary-menu li { width: 100%; position: relative; z-index: 20; } #primary-menu li a { border-top: 1px solid #fff; color: #01A7CB; letter-spacing: 0px; font-size: 2rem; padding: 5px 0 0 55px; line-height: 1.7; font-family: 'Ubuntu', sans-serif; font-weight: 500; } #primary-menu li:first-child a { border: none; } .mobile-menu-navigation a { padding-top: 10px; } #primary-menu li .sub-menu li { padding: 0px 0 2px; } #primary-menu li .sub-menu li:first-child a { padding: 11px 0 0 75px; } #primary-menu li .sub-menu li:last-child { padding-bottom: 8px; } #primary-menu li .sub-menu li a { text-transform: uppercase; font-size: 1.6rem; width: 100%; border-top: 0; max-width: 230px; padding-left: 75px; color: rgb(44, 60, 83); position: relative; } #primary-menu li .sub-menu li a:before { content: ''; position: absolute; width: 5px; height: 2px; background: #000; left: 62px; right: auto; top: 7px; bottom: 0; margin: auto; } #primary-menu li:hover .sub-menu li .sub-menu { width: 100%; opacity: 0; height: 0; max-height: 0; } #primary-menu li:hover .sub-menu li:hover .sub-menu { display: block; opacity: 0; left: 999999999999999999999999px; position: relative; } #primary-menu li:hover .sub-menu li:hover .sub-menu.open { opacity: 1; left: 0; } #primary-menu li .sub-menu li .sub-menu li a { font-size: 1.5rem; font-style: inherit; color: #1a428a; font-weight: 500; } #primary-menu li .sub-menu li .sub-menu li:first-child a { padding-top: 0; } .the-arrow { width: 100%; height: 50px; position: absolute; top: 4px; bottom: 0; left: 0; margin: auto; z-index: 200; } .the-arrow.clicked { bottom: initial; top: 0; width: 40px; } .the-arrow-sub { width: 100%; height: 40px; position: absolute; top: 6px; bottom: 0; left: 0; margin: auto; z-index: 200; } .the-arrow-sub.clicked-sub { bottom: inherit; top: 0; width: 40px; } .the-arrow:after, .the-arrow-sub:after { height: 9px; width: 9px; position: absolute; left: 30px; top: 0; bottom: 0; content: ''; border-top: 2px solid rgba(26, 66, 138, 0.5); border-left: 2px solid rgba(26, 66, 138, 0.5); transform: rotate(135deg); -webkit-transform: rotate(135deg); transition: 0.4s all ease-in-out; border-right: transparent; margin: auto; } .the-arrow.clicked:after, .the-arrow-sub.clicked-sub:after { border-right: 2px solid rgba(26, 66, 138, 0.5); transform: rotate(135deg); -webkit-transform: rotate(495deg); border-top: 2px solid rgba(26, 66, 138, 0.5); border-left: transparent; } #primary-menu li.menu-item-has-children:hover>.sub-menu li.menu-item-has-children:hover>.sub-menu li.menu-item-has-children:hover>.sub-menu { display: block; padding: 10px 0px 0; } #primary-menu li.menu-item-has-children:hover>.sub-menu li.menu-item-has-children:hover>.sub-menu li.menu-item-has-children:hover>.sub-menu a { font-weight: 500; font-style: italic; } #primary-menu li.menu-item-has-children:hover>.sub-menu li.menu-item-has-children:hover>.sub-menu li.menu-item-has-children:hover>.sub-menu { display: block; padding: 25px 0px 0px 13px; } .mobile-menu-container a { text-transform: uppercase; text-decoration: none !important; line-height: 2; font-weight: 400; font-size: 13px; transition: 0.3s all ease; letter-spacing: 1.2px; position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; } .tablet-overlay { display: block !important; position: fixed; background-color: rgba(44, 60, 83, 0.51); width: 100vw; height: 100vh; top: 0; right: 100%; opacity: 0; transition: opacity 300ms ease-in; } .tablet-overlay.open { right: 0; opacity: 1; z-index: 9999; } } @media (min-width: 768px) { .mobile-image-logo .main-nav-logo { display: none; } } @media (max-width: 767px) { .mobile-image-logo .main-nav-logo { display: block; } .home .main-header-wrapper-homepage { height: 80vh; } .home p.subtitle { font-size: 2rem; } } @media (max-width: 767px) and (orientation: landscape) { .home .main-header-wrapper-homepage { height: 425px; } } @media (max-width: 992px) { .tablet-menu-height { height: 100%; overflow: hidden; } }