#iBlckr { z-index: 800; } nav#iMenu {z-index: 999; } nav#iMenu header .pastille { z-index: 4; } #iViewport > header { z-index: 3; } nav#Page { z-index: 3; } #iBlckr {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #001B4B; opacity: 0.1; cursor: pointer; } #iBlckr.live { display: block; } nav#iMenu {position: fixed; left: 0; top: -100%; box-sizing: border-box; padding: 0 0 0 0; width: 100%; background-color: transparent; } nav#iMenu #viewport {width: 100%; height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; box-sizing: border-box; position: relative; padding: 3rem 2.5rem 3rem 2.5rem; text-align: left; background-color: transparent; } nav#iMenu section {position: relative; box-sizing: border-box; padding: 0; width: 100%; } nav#iMenu section .background {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 2rem; background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4gPGRlZnM+IDxsaW5lYXJHcmFkaWVudCBpZD0iX0xpbmVhcjEiIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxLjE3NTY2ZS0xMywxOTIwLC0xOTIwLDEuMTc1NjZlLTEzLDI0MDMuNCwwKSI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2IoNTQsNTgsNjIpO3N0b3Atb3BhY2l0eToxIi8+PHN0b3Agb2Zmc2V0PSIwLjUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYig1MSw1MSw1MSk7c3RvcC1vcGFjaXR5OjEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYig2MCw2MCw2MCk7c3RvcC1vcGFjaXR5OjEiLz48L2xpbmVhckdyYWRpZW50PiA8L2RlZnM+IDxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMzI1NTIxLDAsMCwwLjUyMDgzMywtMjgyLjM1NiwwKSI+IDxyZWN0IHg9Ijg2Ny4zOTYiIHk9IjAiIHdpZHRoPSIzMDcyIiBoZWlnaHQ9IjE5MjAiIHN0eWxlPSJmaWxsOnVybCgjX0xpbmVhcjEpOyIvPiA8L2c+IDwvc3ZnPg==") no-repeat center center; background-size: 100% 100%; filter: drop-shadow(-2px 4px 10px #222); } nav#iMenu header {position: relative; } nav#iMenu header .pastille {position: absolute; margin-top: -1rem; right: 2.5rem; box-sizing: border-box; padding: 1.5rem; width: 6rem; } nav#iMenu header .pastille .brgr {position: relative; width: 100%; } nav#iMenu header .pastille .brgr div {position: absolute; top: 50%; width: 100%; height: 2px; transform-origin: center; transform: rotate(45deg); background-color: #000000; } nav#iMenu header .pastille .brgr div:first-child { transform: rotate(-45deg); } nav#iMenu section .content {display: flex; position: relative; box-sizing: border-box; padding-right: 2rem; } nav#iMenu section .items {display: flex; flex-direction: row; align-items: flex-start; flex-wrap: wrap; } nav#iMenu ul {display: block; margin: 0; box-sizing: border-box; padding: 4rem 1.5rem; } nav#iMenu ul.br {border-right: 1px solid #242424; } nav#iMenu ul.bl {border-left: 1px solid #555555; } nav#iMenu a li {box-sizing: border-box; margin-bottom: 1rem; padding: 3rem 2rem; width: 25rem; list-style: none; font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 1.7rem; border-radius: 1.6rem; background-color: #1ABBF2; transition: all 0.8s ease; } nav#iMenu a, nav#iMenu a li {color: #000000; } nav#iMenu a li.v { background-color: #FFF9AB; } nav#iMenu a li:hover, nav#iMenu a li.v:hover { background-color: #FF0; } nav#iMenu aside.menustr {position: relative; margin-left: auto; margin-top: 7rem; width: 7rem; } nav#iMenu aside.menustr::before {content: ''; display: block; padding-top: 370%; } nav#iMenu aside.menustr svg {fill: #1AAAF2; } nav#iMenu footer .pastille {display: block; position: absolute; margin-top: -3.8rem; right: 12vw; box-sizing: border-box; padding: 1.5rem 2rem; font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 1.6rem; } nav#iMenu footer a, nav#iMenu footer a .pastille {color: #000000; } nav#iMenu footer .pastille div {position: relative; } #iViewport > header {display: flex; position: absolute; left: 0; top: 0; box-sizing: border-box; padding: 0 3rem; width: 100%; background-color: #eee; } #iViewport > header .logobox {display: flex; align-items: center; } #iViewport > header .logofull {width: 20rem; } #iViewport > header nav {margin-left: auto; } #iViewport > header nav li {display: inline-block; vertical-align: middle; position: relative; box-sizing: border-box; padding: 2.5rem 2.2rem; list-style: none; font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 1.3rem; transition: all 1s ease; } #iViewport > header nav li.cta {font-family: "HelveticaNeueETW01-55Rg", sans-serif; color: #eaeaea; background-color: #00479F; } #iViewport > header nav li:hover { background-color: #ccc; } #iViewport > header nav li.cta:hover { color: #000; background-color: #FF0; } #iViewport > header nav li.spaced {margin-left: 4rem; } #iViewport > header li:not(.cta).current::after {content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 0.2rem; background-color: #000; } li#iMenuBtn {position: relative; } li#iMenuBtn .str, li#iMenuBtn .brgr {display: inline-block; vertical-align: middle; } li#iMenuBtn .str {margin-right: 0.6rem; } li#iMenuBtn .brgr {width: 2.2rem; } li#iMenuBtn .brgr > div {margin-bottom: 0.6rem; width: 100%; height: 0.2rem; background-color: #000000; } li#iMenuBtn .brgr > div:last-child { margin-bottom: 0; } #iViewport > header nav#page {margin-top: -10rem; margin-right: auto; } #iViewport > header nav#page {display: block; margin-top: 0; } #iViewport > header nav#page::before {content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2); } #iViewport > header nav#page li {padding-top: 3rem; padding-bottom: 3rem; } #iViewport > header.scrll {display: block; position: fixed; padding: 0 2rem; } #iViewport > header.scrll .logobox, #iViewport > header.scrll .pastille.top { display: none; } #iViewport > header.scrll nav { display: none; text-align: right; } #iViewport > header * {transition: all 0.5s, visibility 0s; } nav#Page {display: flex; position: fixed; left: 0; top: 0; margin-top: -10rem; width: 100%; transition: margin-top 1s ease; } nav#Page > div {margin: 0 auto; border-radius: 1rem; background-color: #fff; box-shadow: 2px 4px 8px rgba(25, 25, 25, 0.2); overflow: hidden; } nav#Page li {display: inline-block; vertical-align: middle; position: relative; box-sizing: border-box; padding: 2.5rem 2.2rem; list-style: none; font-family: "HelveticaNeueETW01-55Rg", sans-serif; font-size: 1.3rem; transition: all 1s ease; } nav#Page li:hover { background-color: #ccc; } nav#Page li.short { padding-left: 1.8rem; padding-right: 1.8rem; } nav#Page .arrow {position: relative; width: 2rem; transform: rotate(-90deg); cursor: pointer; } nav#Page .arrow::before {content: ''; display: block; padding-top: 83%; } nav#Page.scrll { margin-top: 1rem; } #iViewport > footer {padding: 2rem; text-align: center; } #iViewport > footer nav {display: flex; justify-content: center; margin-bottom: 2.4rem; } #iViewport > footer section {flex-basis: 24vw; margin: 0 0.5rem; box-sizing: border-box; padding: 3rem; max-width: 24rem; text-align: left; } #iViewport > footer section a li {padding: 1rem 0; list-style: none; font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 1.4rem; } #iViewport > footer section a, #iViewport > footer section a li {color: #eaeaea; } #iViewport > footer section a li.v {color: #ff0; } #iViewport > footer section a.phone, #iViewport > footer section a.phone li {font-family: "HelveticaNeueETW01-75Bd", sans-serif; } #iViewport > footer section p {margin-bottom: 0; font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 1.2rem; line-height: 1.8rem; color: #eaeaea; } #iViewport > footer section.logobox > div {display: flex; justify-content: center; align-items: center; height: 100%; text-align: center; } #iViewport > footer .logo {margin: 0 auto 0.8rem auto; width: 17rem; } #iViewport > footer .logobox div div:last-child {font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 1.6rem; } #iViewport > footer .logobox div div:last-child span {font-family: "HelveticaNeueETW01-65Md", sans-serif; font-size: 1.8rem; } #iViewport > footer p.copy {margin-bottom: 1rem; font-size: 1.3rem; color: #B7B7B7; text-align: center; } @media all and (max-width: 1300px) {#iViewport > header li.prehide { display: none; } } @media all and (max-width: 1050px) {#iViewport > header { padding-left: 1.5rem; padding-right: 1.5rem; } #iViewport > header .pastillebox .pastille { top: 0; } #iViewport > header nav li:not(#iMenuBtn, .yellow) { display: none; } #iMenuBtn.yellow .str { display: none; } #iViewport > header.scrll #iMenuBtn.yellow .str { display: none; } } @media all and (max-width: 1000px) {nav#iMenu header .pastille { right: 2.2rem; padding: 1.2rem; width: 5rem; } nav#iMenu a li { font-size: 1.5rem; width: 22rem; } nav#iMenu aside.menustr { width: 5rem; } nav#iMenu footer .pastille { right: 9vw; font-size: 1.4rem; } #iViewport > footer section { padding: 2.5rem; } #iViewport > footer section a li { font-size: 1.2rem; } #iViewport > footer section p { font-size: 1.2rem; line-height: 1.8rem; } #iViewport > footer .logo { width: 90%; } } @media all and (max-width: 900px) {nav#iMenu { height: 100%; } nav#iMenu header .pastille { right: 2rem; padding: 1.5rem; width: 6rem; } nav#iMenu section .content { display: block; padding-right: 0; } nav#iMenu section .items { display: block; width: 100%; } nav#iMenu ul { padding-top: 3rem; padding-bottom: 2rem; } nav#iMenu ul.br { border-right: none; border-bottom: 1px solid #111111; } nav#iMenu ul.bl { border-left: none; border-top: 1px solid #505050; } nav#iMenu .items a { display: block; width: 60%; } nav#iMenu a li { padding-top: 2.6rem; padding-bottom: 2.6rem; font-size: 1.7rem; width: 100%; } nav#iMenu aside.menustr { position: absolute; top: 0; right: 2rem; width: 6rem; } nav#iMenu footer .pastille { right: 12vw; } } @media all and (max-width: 800px) {nav#iMenu #viewport { padding: 2rem 1.5rem 3rem 1.5rem; } nav#Page.scrll { margin-top: 0; } nav#Page li:not(.short) { display: none; } #iViewport > footer { padding: 2rem 0; } #iViewport > footer nav { display: block; } #iViewport > footer section { display: inline-block; vertical-align: top; margin: 0.5rem 0.5rem; padding: 1rem 0; width: 40%; max-width: 30rem; } #iViewport > footer section a li { font-size: 1.4rem; } #iViewport > footer .logobox div div:last-child { font-size: 1. 4rem; } #iViewport > footer .logobox div div:last-child span { font-size:1.6rem; } #iViewport > footer section p { font-size: 1.2rem; line-height: 1.8rem; } #iViewport > footer p.copy { font-size: 1.1rem; } } @media all and (max-width: 600px) {nav#iMenu header .pastille { padding: 1.5rem; } nav#iMenu .items a { width: 70%; } nav#iMenu footer .pastille { right: 6vw; } #iViewport > footer { padding-left: 1rem; padding-right: 1rem; } #iViewport > footer section { margin: 0; padding: 1.5rem 0.5rem; width: 50%; max-width: none; } }