.grid { display: grid; grid-row-gap: 25px; grid-column-gap: ~"min(25px, calc(100% / 11))"; grid-template-columns: repeat(12, 1fr); } .grid.vertAlign { align-items: center; } .grid > * { grid-column: span 1; } .grid.gap-0, .grid[gap="0"] { grid-row-gap: 0; grid-column-gap: 0; } .grid.gap-50, .grid[gap="50"] { grid-row-gap: 50px; grid-column-gap: ~"min(50px, calc(100% / 11))"; } .grid.gap-100, .grid[gap="100"] { grid-row-gap: 100px; grid-column-gap: ~"min(100px, calc(100% / 11))"; } .grid > .full, .grid > *[grid="12"] { grid-column: span 12; } .grid > *[grid="11"] { grid-column: span 11; } .grid > *[grid="10"] { grid-column: span 10; } .grid > .three-quarters, .grid > .three-quarter, .grid > *[grid="9"] { grid-column: span 9; } .grid > .two-thirds, .grid > .two-third, .grid > *[grid="8"] { grid-column: span 8; } .grid > *[grid="7"] { grid-column: span 7; } .grid > .half, .grid > *[grid="6"] { grid-column: span 6; } .grid > *[grid="5"] { grid-column: span 5; } .grid > .third, .grid > *[grid="4"] { grid-column: span 4; } .grid > .quarter, .grid > *[grid="3"] { grid-column: span 3; } .grid > *[grid="2"] { grid-column: span 2; } .grid > *[grid="1"] { grid-column: span 1; } @media (max-width: 768px) { .grid { grid-column-gap: ~"min(25px, calc(100% / 5))"; grid-template-columns: repeat(6, 1fr); } .grid.gap-0, .grid[gap="0"] { grid-column-gap: 0; } .grid.gap-50, .grid[gap="50"] { grid-column-gap: ~"min(50px, calc(100% / 5))"; } .grid.gap-100, .grid[gap="100"] { grid-column-gap: ~"min(100px, calc(100% / 5))"; } .grid > .full, .grid > .three-quarters, .grid > .three-quarter, .grid > .two-third, .grid > .two-thirds, .grid > .half, .grid > *[grid="12"], .grid > *[grid="11"], .grid > *[grid="10"], .grid > *[grid="9"], .grid > *[grid="8"], .grid > *[grid="7"], .grid > *[grid="6"] { grid-column: span 6; } } @media (max-width: 540px) { .grid { grid-column-gap: ~"min(25px, calc(100% / 2))"; grid-template-columns: repeat(3, 1fr); } .grid.gap-0, .grid[gap="0"] { grid-column-gap: 0; } .grid.gap-50, .grid[gap="50"] { grid-column-gap: ~"min(50px, calc(100% / 2))"; } .grid.gap-100, .grid[gap="100"] { grid-column-gap: ~"min(100px, calc(100% / 2))"; } .grid > .full, .grid > .three-quarters, .grid > .three-quarter, .grid > .two-thirds, .grid > .two-third, .grid > .half, .grid > .third, .grid > .quarter, .grid > *[grid="12"], .grid > *[grid="11"], .grid > *[grid="10"], .grid > *[grid="9"], .grid > *[grid="8"], .grid > *[grid="7"], .grid > *[grid="6"], .grid > *[grid="5"], .grid > *[grid="4"], .grid > *[grid="3"] { grid-column: span 3; } } @media (max-width: 320px) { .grid > *[grid="2"], .grid > *[grid="1"], .grid > * { grid-column: span 3; } } .grid[columns="4"] { grid-column-gap: ~"min(25px, calc(100% / 3))"; grid-template-columns: repeat(4, 1fr); } .grid[columns="4"].gap-0, .grid[columns="4"][gap="0"] { grid-column-gap: 0; } .grid[columns="4"].gap-50, .grid[columns="4"][gap="50"] { grid-column-gap: ~"min(50px, calc(100% / 3))"; } .grid[columns="4"].gap-100, .grid[columns="4"][gap="100"] { grid-column-gap: ~"min(100px, calc(100% / 3))"; } .grid[columns="4"] > .full, .grid[columns="4"] > *[grid="4"] { grid-column: span 4; } .grid[columns="4"] > .three-quarters, .grid[columns="4"] > .three-quarter, .grid[columns="4"] > *[grid="3"] { grid-column: span 3; } .grid[columns="4"] > .half, .grid[columns="4"] > *[grid="2"] { grid-column: span 2; } .grid[columns="4"] > .quarter, .grid[columns="4"] > *[grid="1"] { grid-column: span 1; } @media (max-width: 1080px) { .grid[columns="4"] > .three-quarters, .grid[columns="4"] > .three-quarter, .grid[columns="4"] > *[grid="3"] { grid-column: span 4; } .grid[columns="4"] > .quarter, .grid[columns="4"] > *[grid="1"], .grid[columns="4"] > * { grid-column: span 2; } } @media (max-width: 768px) { .grid[columns="4"] > .quarter, .grid[columns="4"] > *[grid="1"], .grid[columns="4"] > * { grid-column: span 4; } } .grid[columns="3"] { grid-column-gap: ~"min(25px, calc(100% / 2))"; grid-template-columns: repeat(3, 1fr); } .grid[columns="3"].gap-0, .grid[columns="3"][gap="0"] { grid-column-gap: 0; } .grid[columns="3"].gap-50, .grid[columns="3"][gap="50"] { grid-column-gap: ~"min(50px, calc(100% / 2))"; } .grid[columns="3"].gap-100, .grid[columns="3"][gap="100"] { grid-column-gap: ~"min(100px, calc(100% / 2))"; } .grid[columns="3"] > .full, .grid[columns="3"] > *[grid="3"] { grid-column: span 3; } .grid[columns="3"] > .two-thirds, .grid[columns="3"] > .two-third, .grid[columns="3"] > *[grid="2"] { grid-column: span 2; } .grid[columns="3"] > .third, .grid[columns="3"] > *[grid="1"] { grid-column: span 1; } @media (max-width: 768px) { .grid[columns="3"] > .full, .grid[columns="3"] > .two-thirds, .grid[columns="3"] > .two-third, .grid[columns="3"] > .third, .grid[columns="3"] > *[grid="2"], .grid[columns="3"] > *[grid="1"] { grid-column: span 3; } } .grid[columns="2"] { grid-column-gap: ~"min(25px, calc(100% / 1))"; grid-template-columns: repeat(2, 1fr); } .grid[columns="2"].gap-0, .grid[columns="2"][gap="0"] { grid-column-gap: 0; } .grid[columns="2"].gap-50, .grid[columns="2"][gap="50"] { grid-column-gap: ~"min(50px, calc(100% / 1))"; } .grid[columns="2"].gap-100, .grid[columns="2"][gap="100"] { grid-column-gap: ~"min(100px, calc(100% / 1))"; } .grid[columns="2"] > .full, .grid[columns="2"] > *[grid="2"] { grid-column: span 2; } .grid[columns="2"] > .half, .grid[columns="2"] > *[grid="1"] { grid-column: span 1; } @media (max-width: 768px) { .grid[columns="2"] > .half, .grid[columns="2"] > *[grid="1"], .grid[columns="2"] > * { grid-column: span 2; } } .iframe-container { height: 0; padding-bottom: 56.25%; position: relative; overflow: hidden; } .iframe-container, .iframe-container iframe { line-height: 0; } .iframe-container iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .entry-content p, .entry-content ol, .entry-content ul, .entry-content figure.video, .entry-content .dcmo_block, .entry-content .iframe-container, .entry-content .dcmo_full_block { margin-bottom: 25px; } .entry-content p:last-child, .entry-content ol:last-child, .entry-content ul:last-child, .entry-content figure.video:last-child, .entry-content .iframe-container:last-child { margin-bottom: 0; } .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { margin-bottom: 10px; } .entry-content h2:not(:first-child), .entry-content h3:not(:first-child), .entry-content h4:not(:first-child), .entry-content h5:not(:first-child), .entry-content h6:not(:first-child) { margin-top: 1.25em; } .entry-content p:empty { display: none; } .entry-content ul, .entry-content ol { padding: 0; margin-left: 1em; } .entry-content ul li, .entry-content ol li { margin-left: 1.5em; } .dcmo_block { padding:25px; > div { overflow:hidden; } &:not(.full) { > div { max-width:1400px; width:100%; margin-left:auto; margin-right:auto; } } } #post-62, #post-2191 { .entry-content { &, p, div { font-family: Fira Sans; font-size: 16px; line-height: 1.5; font-weight: 300; } } } .entry-content h1 { font-family: Open Sans; font-weight: 700; font-size: 32px; line-height: 1; font-style: normal; font-variant: normal; margin-bottom: 35px; } .entry-content h2 { color: #001f3f; font-family: Open Sans; font-weight: 700; font-size: 26px; line-height: 1; font-style: normal; font-variant: normal; margin-bottom: 35px; } .entry-content h3 { color: #85144b; font-family: Open Sans; font-weight: 700; font-size: 20px; line-height: 1; font-style: normal; font-variant: normal; margin-bottom: 35px; text-transform: none; } .entry-content h2 + p, .entry-content h3 + p { margin-top: -20px; } .entry-content p, .entry-content li { text-align: justify; } .entry-content .dcmo_block, .entry-content figure.video { margin: 0; } .entry-content section.dcmo_block { padding-left: 50px; padding-right: 50px; } .entry-content section.dcmo_block > div { padding-top: 4vw; padding-bottom: 4vw; } .entry-content .wpcf7 { max-width: 400px; width: 100%; margin-left: auto; margin-right: auto; } .entry-content .wpcf7 .better-input .wpcf7-form-control-wrap { position: relative; background-color: rgba(255, 255, 255, 0.8); border: none; border-radius: 2px; margin-bottom: 10px; display: block; margin-top: 1.75em; color: #999; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); font-family: Open Sans; font-weight: 400; font-size: 16px; line-height: 1; font-style: normal; font-variant: normal; } .entry-content .wpcf7 .better-input .betterInput { color: inherit; text-transform: inherit; letter-spacing: inherit; font-family: inherit; font-weight: inherit; font-size: 1em; line-height: 1; font-style: normal; font-variant: normal; } .entry-content .wpcf7 .better-input .betterInput *::placeholder { color: rgba(0, 0, 0, 0); opacity: 0; } .entry-content .wpcf7 .better-input .betterInput *:-ms-input-placeholder { color: rgba(0, 0, 0, 0); } .entry-content .wpcf7 .better-input .betterInput *::-ms-input-placeholder { color: rgba(0, 0, 0, 0); } .entry-content .wpcf7 .better-input .betterInput *:-moz-input-placeholder { color: rgba(0, 0, 0, 0); } .entry-content .wpcf7 .better-input .betterInput *::-moz-input-placeholder { color: rgba(0, 0, 0, 0); } .entry-content .wpcf7 .better-input .betterInput * { color: inherit; border: 0; padding: 1px 2px; background: transparent; resize: none; } .entry-content .wpcf7 .better-input .betterInput label { transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); -o-transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); -moz-transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); -webkit-transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); } .entry-content .wpcf7 .better-input .betterInput input { height:unset; line-height:unset; } .entry-content .wpcf7 .better-input .betterInput input, .entry-content .wpcf7 .better-input .betterInput select, .entry-content .wpcf7 .better-input .betterInput textarea { color: inherit; font-size: inherit; font-weight: inherit; font-family: inherit; padding: 0.75em 0.5em; width: 100%; } .entry-content .wpcf7 .better-input .betterInput input:focus, .entry-content .wpcf7 .better-input .betterInput select:focus, .entry-content .wpcf7 .better-input .betterInput textarea:focus { outline: none; } .entry-content .wpcf7 .better-input .betterInput textarea { height: 100px; } .entry-content .wpcf7 .better-input .betterInput select { display: block; width: 100%; margin-bottom: 5px; } .entry-content .wpcf7 .better-input .betterInput label { position: absolute; width: 100%; top: 0; transform: translateY(1.1em) translateX(0.5em); left: 0; pointer-events: none; color: inherit; font-size: 0.9em; font-weight: inherit; font-family: inherit; } .entry-content .wpcf7 .better-input .betterInput .req { color: #ff4136; transition: 0.3s color cubic-bezier(0.76, 0, 0.24, 1); -o-transition: 0.3s color cubic-bezier(0.76, 0, 0.24, 1); -moz-transition: 0.3s color cubic-bezier(0.76, 0, 0.24, 1); -webkit-transition: 0.3s color cubic-bezier(0.76, 0, 0.24, 1); } .entry-content .wpcf7 .better-input .betterInput *:focus:not(:placeholder-shown) + label, .entry-content .wpcf7 .better-input .betterInput *:focus + label, .entry-content .wpcf7 .better-input .betterInput *:focus:not(:placeholder-shown) + label .req, .entry-content .wpcf7 .better-input .betterInput *:focus + label .req { color: #fff; } .entry-content .wpcf7 .better-input .betterInput *:not(:placeholder-shown) + label, .entry-content .wpcf7 .better-input .betterInput *:not(:placeholder-shown) + label .req { color: #ddd; } .entry-content .wpcf7 .better-input .betterInput *:focus + label, .entry-content .wpcf7 .better-input .betterInput *:not(:placeholder-shown) + label { transform: translateY(-1.3em); font-size: 0.8em; } .entry-content .wpcf7 .better-input input[type="submit"] { background-color: #001f3f; color: #fff; border: none; border-radius: 2px; display: block; margin: 25px auto 0; height: 2em; width: 10em; font-family: Open Sans; font-weight: 700; font-size: 20px; line-height: 1; font-style: normal; font-variant: normal; text-align: center; text-transform: uppercase; transition: background-color 0.3s linear, color 0.3s linear; -o-transition: background-color 0.3s linear, color 0.3s linear; -moz-transition: background-color 0.3s linear, color 0.3s linear; -webkit-transition: background-color 0.3s linear, color 0.3s linear; } .entry-content .wpcf7 .better-input input[type="submit"]:hover { background-color: #fff; color: #001f3f; } #welcome { background-image: url("/wp-content/uploads/2021/08/Smile.jpeg"); position: relative; z-index: 1; } #welcome:before { content: " "; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; } #welcome > * { position: relative; z-index: 3; } #welcome:before { background: linear-gradient(135deg, rgba(0, 31, 63, 0.75) 5%, rgba(133, 20, 75, 0.75) 100%); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } #welcome .grid { align-items: center; } #welcome h1, #welcome h2 { text-align: center; } #welcome h1, #welcome h2, #welcome p { color: #fff; } #welcome h1 i, #welcome h2 i, #welcome p i { font-weight: 700; } #what { background-color: #001f3f; } #what h2, #what h3, #what p, #what a { color: #fff; } #what h2 a, #what h3 a, #what p a, #what a a, #what h2 i, #what h3 i, #what p i, #what a i { font-weight: 700; } #why { background-color: #fff; } #why p { margin-top: 0; } @media (max-width: 768px) { #why .grid { grid-template-columns: 1fr; } } #why .why h3 { letter-spacing: 0.1em; margin-top: 0; margin-bottom: 15px; text-align: center; text-transform: uppercase; display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; position: relative; overflow: hidden; height: 2.5em; } #why .why h3 svg { display: block; height: 2em; margin-left: 0.5em; margin-top: -0.25em; width: auto; fill: #001f3f; } #why .why h3 svg * { fill: inherit; } #why .why h3:before, #why .why h3:after { content: " "; display: block; height: 3px; width: 100%; background-color: #efefef; transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); -o-transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); -moz-transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); -webkit-transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); } #why .why h3:before { transform: translateX(-25px); -o-transform: translateX(-25px); -ms-transform: translateX(-25px); -moz-transform: translateX(-25px); -webkit-transform: translateX(-25px); } #why .why h3:after { transform: translateX(25px); -o-transform: translateX(25px); -ms-transform: translateX(25px); -moz-transform: translateX(25px); -webkit-transform: translateX(25px); } #option { background-color: #85144b; } #option h2, #option h3, #option p, #option .grid { color: #fff; } #option h2 { text-align: center; margin-bottom: 2.5em; } #option .grid { grid-row-gap: 100px; } @media (max-width: 768px) { #option .grid { grid-template-columns: 1fr; } } #option .option { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; align-self: start; align-items: center; justify-items: center; position: relative; font-family: Fira Sans; font-weight: 300; font-size: 16px; line-height: 1; font-style: normal; font-variant: normal; } @media (min-width: 769px) { #option .option { max-width: 350px; width: 100%; margin-left: auto; margin-right: auto; } } #option .option > * { grid-column: 1; grid-row: 1; } @media (min-width: 769px) { #option .option { font-size: ~"min(16px, 1.2vw)"; } } @media (max-width: 768px) { #option .option { font-size: ~"min(24px, 4vw)"; } } #option .option .copy { color:#fff; } #option .option svg:not(.copy) { position: absolute; top: 0; left: 0; opacity: 0.1; height: 100%; width: 100%; pointer-events: none; fill: currentcolor; } #option .option svg:not(.copy) * { fill: inherit; } #option .option .copy span { display: block; white-space: nowrap; text-align: justify; text-align-last: justify; margin-bottom: 5px; line-height:1; } @media (min-width: 769px) { #option .option .copy span { max-width: 350px; width: 100%; margin-left: auto; margin-right: auto; } } #option .option:nth-child(1) span:nth-child(1) { font-size: 1.15em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; transform: translateX(calc(0.1em / 2)); -o-transform: translateX(calc(0.1em / 2)); -ms-transform: translateX(calc(0.1em / 2)); -moz-transform: translateX(calc(0.1em / 2)); -webkit-transform: translateX(calc(0.1em / 2)); } #option .option:nth-child(1) span:nth-child(2) { font-size: 0.9em; font-weight: 300; text-transform: none; letter-spacing: 0; transform: translateX(calc(0 / 2)); -o-transform: translateX(calc(0 / 2)); -ms-transform: translateX(calc(0 / 2)); -moz-transform: translateX(calc(0 / 2)); -webkit-transform: translateX(calc(0 / 2)); } #option .option:nth-child(1) span:nth-child(3) { font-size: 3.75em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; transform: translateX(calc(0.1em / 2)); -o-transform: translateX(calc(0.1em / 2)); -ms-transform: translateX(calc(0.1em / 2)); -moz-transform: translateX(calc(0.1em / 2)); -webkit-transform: translateX(calc(0.1em / 2)); } #option .option:nth-child(1) span:nth-child(4) { font-size: 2em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transform: translateX(calc(0.05em / 2)); -o-transform: translateX(calc(0.05em / 2)); -ms-transform: translateX(calc(0.05em / 2)); -moz-transform: translateX(calc(0.05em / 2)); -webkit-transform: translateX(calc(0.05em / 2)); display: grid; align-items: center; grid-gap: 0.5em; grid-template-columns: 1fr auto 1fr; } #option .option:nth-child(1) span:nth-child(4):before, #option .option:nth-child(1) span:nth-child(4):after { content: " "; display: block; background-color: currentcolor; height: 5px; width: 100%; } #option .option:nth-child(1) span:nth-child(5) { font-size: 4.6em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; transform: translateX(calc(0.1em / 2)); -o-transform: translateX(calc(0.1em / 2)); -ms-transform: translateX(calc(0.1em / 2)); -moz-transform: translateX(calc(0.1em / 2)); -webkit-transform: translateX(calc(0.1em / 2)); } #option .option:nth-child(1) span:nth-child(6) { font-size: 1em; font-weight: 300; text-transform: none; letter-spacing: 0.05em; transform: translateX(calc(0.05em / 2)); -o-transform: translateX(calc(0.05em / 2)); -ms-transform: translateX(calc(0.05em / 2)); -moz-transform: translateX(calc(0.05em / 2)); -webkit-transform: translateX(calc(0.05em / 2)); } #option .option:nth-child(1) span:nth-child(7) { font-size: 1.4em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transform: translateX(calc(0.05em / 2)); -o-transform: translateX(calc(0.05em / 2)); -ms-transform: translateX(calc(0.05em / 2)); -moz-transform: translateX(calc(0.05em / 2)); -webkit-transform: translateX(calc(0.05em / 2)); } #option .option:nth-child(1) span:nth-child(8) { font-size: 1.25em; font-weight: 300; text-transform: none; letter-spacing: 0.05em; transform: translateX(calc(0.05em / 2)); -o-transform: translateX(calc(0.05em / 2)); -ms-transform: translateX(calc(0.05em / 2)); -moz-transform: translateX(calc(0.05em / 2)); -webkit-transform: translateX(calc(0.05em / 2)); } #option .option:nth-child(2) span:nth-child(1) { font-size: 0.8em; font-weight: 300; text-transform: none; letter-spacing: 0; transform: translateX(calc(0 / 2)); -o-transform: translateX(calc(0 / 2)); -ms-transform: translateX(calc(0 / 2)); -moz-transform: translateX(calc(0 / 2)); -webkit-transform: translateX(calc(0 / 2)); } #option .option:nth-child(2) span:nth-child(2) { font-size: 1.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; transform: translateX(calc(0.1em / 2)); -o-transform: translateX(calc(0.1em / 2)); -ms-transform: translateX(calc(0.1em / 2)); -moz-transform: translateX(calc(0.1em / 2)); -webkit-transform: translateX(calc(0.1em / 2)); } #option .option:nth-child(2) span:nth-child(3) { font-size: 1em; font-weight: 300; text-transform: none; letter-spacing: 0.05em; transform: translateX(calc(0.05em / 2)); -o-transform: translateX(calc(0.05em / 2)); -ms-transform: translateX(calc(0.05em / 2)); -moz-transform: translateX(calc(0.05em / 2)); -webkit-transform: translateX(calc(0.05em / 2)); } #option .option:nth-child(2) span:nth-child(4) { font-size: 5em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; transform: translateX(calc(0.1em / 2)); -o-transform: translateX(calc(0.1em / 2)); -ms-transform: translateX(calc(0.1em / 2)); -moz-transform: translateX(calc(0.1em / 2)); -webkit-transform: translateX(calc(0.1em / 2)); } #option .option:nth-child(2) span:nth-child(5) { font-size: 2em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transform: translateX(calc(0.05em / 2)); -o-transform: translateX(calc(0.05em / 2)); -ms-transform: translateX(calc(0.05em / 2)); -moz-transform: translateX(calc(0.05em / 2)); -webkit-transform: translateX(calc(0.05em / 2)); display: grid; align-items: center; grid-gap: 0.5em; grid-template-columns: 1fr auto 1fr; } #option .option:nth-child(2) span:nth-child(5):before, #option .option:nth-child(2) span:nth-child(5):after { content: " "; display: block; background-color: currentcolor; height: 5px; width: 100%; } #option .option:nth-child(2) span:nth-child(6) { font-size: 2.2em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; transform: translateX(calc(0.1em / 2)); -o-transform: translateX(calc(0.1em / 2)); -ms-transform: translateX(calc(0.1em / 2)); -moz-transform: translateX(calc(0.1em / 2)); -webkit-transform: translateX(calc(0.1em / 2)); } #option .option:nth-child(2) span:nth-child(7) { font-size: 1em; font-weight: 300; text-transform: none; letter-spacing: 0.05em; transform: translateX(calc(0.05em / 2)); -o-transform: translateX(calc(0.05em / 2)); -ms-transform: translateX(calc(0.05em / 2)); -moz-transform: translateX(calc(0.05em / 2)); -webkit-transform: translateX(calc(0.05em / 2)); } #option .option:nth-child(3) span:nth-child(1) { font-size: 1.7em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; transform: translateX(calc(0.1em / 2)); -o-transform: translateX(calc(0.1em / 2)); -ms-transform: translateX(calc(0.1em / 2)); -moz-transform: translateX(calc(0.1em / 2)); -webkit-transform: translateX(calc(0.1em / 2)); } #option .option:nth-child(3) span:nth-child(2) { font-size: 0.9em; font-weight: 300; text-transform: none; letter-spacing: 0; transform: translateX(calc(0 / 2)); -o-transform: translateX(calc(0 / 2)); -ms-transform: translateX(calc(0 / 2)); -moz-transform: translateX(calc(0 / 2)); -webkit-transform: translateX(calc(0 / 2)); } #option .option:nth-child(3) span:nth-child(3) { font-size: 1.45em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transform: translateX(calc(0.05em / 2)); -o-transform: translateX(calc(0.05em / 2)); -ms-transform: translateX(calc(0.05em / 2)); -moz-transform: translateX(calc(0.05em / 2)); -webkit-transform: translateX(calc(0.05em / 2)); } #option .option:nth-child(3) span:nth-child(4) { font-size: 1em; font-weight: 300; text-transform: none; letter-spacing: 0; transform: translateX(calc(0 / 2)); -o-transform: translateX(calc(0 / 2)); -ms-transform: translateX(calc(0 / 2)); -moz-transform: translateX(calc(0 / 2)); -webkit-transform: translateX(calc(0 / 2)); display: grid; align-items: center; grid-gap: 0.5em; grid-template-columns: 1fr auto 1fr; } #option .option:nth-child(3) span:nth-child(4):before, #option .option:nth-child(3) span:nth-child(4):after { content: " "; display: block; background-color: currentcolor; height: 5px; width: 100%; } #option .option:nth-child(3) span:nth-child(5) { font-size: 3em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; transform: translateX(calc(0.1em / 2)); -o-transform: translateX(calc(0.1em / 2)); -ms-transform: translateX(calc(0.1em / 2)); -moz-transform: translateX(calc(0.1em / 2)); -webkit-transform: translateX(calc(0.1em / 2)); } #option .option:nth-child(3) span:nth-child(6) { font-size: 0.8em; font-weight: 300; text-transform: none; letter-spacing: 0; transform: translateX(calc(0 / 2)); -o-transform: translateX(calc(0 / 2)); -ms-transform: translateX(calc(0 / 2)); -moz-transform: translateX(calc(0 / 2)); -webkit-transform: translateX(calc(0 / 2)); } #option .option:nth-child(3) span:nth-child(7) { font-size: 1.3em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transform: translateX(calc(0.05em / 2)); -o-transform: translateX(calc(0.05em / 2)); -ms-transform: translateX(calc(0.05em / 2)); -moz-transform: translateX(calc(0.05em / 2)); -webkit-transform: translateX(calc(0.05em / 2)); } #option .option:nth-child(3) span:nth-child(8) { font-size: 1em; font-weight: 300; text-transform: none; letter-spacing: 0; transform: translateX(calc(0 / 2)); -o-transform: translateX(calc(0 / 2)); -ms-transform: translateX(calc(0 / 2)); -moz-transform: translateX(calc(0 / 2)); -webkit-transform: translateX(calc(0 / 2)); } #option .option:nth-child(3) span:nth-child(9) { font-size: 1.3em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transform: translateX(calc(0.05em / 2)); -o-transform: translateX(calc(0.05em / 2)); -ms-transform: translateX(calc(0.05em / 2)); -moz-transform: translateX(calc(0.05em / 2)); -webkit-transform: translateX(calc(0.05em / 2)); } #map { position: relative; z-index: 1; } #map:after { content: " "; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; } #map > * { position: relative; z-index: 3; } #map:after { opacity: 0.5; z-index: 10; pointer-events: none; mix-blend-mode: multiply; } #map .iframe-container { padding-bottom: 0; height: 56.25vw; max-height: 420px; } @media (max-width: 768px) { #steps .grid { grid-template-columns: 1fr; } } @media (min-width: 769px) { #steps .grid > * { grid-row: 1; } } #steps .video { align-self: center; } @media (min-width: 769px) { #steps .video { grid-column: 2; } } @media (max-width: 768px) { #steps .video { grid-column: 1; } } #steps ol { grid-column: 1; display: block; list-style: none; counter-reset: steps; } @media (max-width: 768px) { #steps ol { margin-left: 0; } } #steps ol li { counter-increment: steps; } @media (max-width: 768px) { #steps ol li { margin-left: 0; } } #steps ol li:not(:last-child) { padding-bottom: 1em; border-bottom: 1px solid rgba(0, 31, 63, 0.5); margin-bottom: 1em; } #steps ol li:before { content: "0" counter(steps); color: #001f3f; font-family: "Abril Fatface", serif; font-weight: 700; font-size: 3em; line-height: 1; font-style: normal; font-variant: normal; float: left; letter-spacing: 0.1em; margin-right: 0.5em; } #steps ol li b, #steps ol li strong { color: #85144b; } #steps ol li b:first-child, #steps ol li strong:first-child { display: block; font-family: inherit; font-weight: 700; font-size: 1.25em; line-height: 1; font-style: normal; font-variant: normal; margin-bottom: 0.1em; } #faq { background-color: #efefef; } #faq > div { overflow: visible; color:#fff; } #faq #qna { display: grid; overflow: hidden; padding-left: 10px; align-items: start; grid-gap: 0 25px; } #faq #qna h3.question { font-family: Fira Sans; font-weight: 400; font-size: 20px; line-height: 1; font-style: normal; font-variant: normal; grid-column: 1; margin: 0; padding: 15px 25px 15px 0; display: grid; grid-gap: 10px; grid-template-columns: auto 15px 1fr; align-items: center; transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -webkit-transition: opacity 0.3s linear; cursor: default; position: relative; } #faq #qna h3.question:after { content: " "; display: block; height: 15px; width: 100%; background-color: #001f3f; opacity: 0; transform: translateX(-10px); -o-transform: translateX(-10px); -ms-transform: translateX(-10px); -moz-transform: translateX(-10px); -webkit-transform: translateX(-10px); clip-path: polygon(0 0, 100% 50%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%); transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); -o-transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); -moz-transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); -webkit-transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); } #faq #qna h3.question:before { content: " "; display: block; position: absolute; width: 100%; height: 100vw; top: 50%; transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 100%; background-color: #000; opacity: 0; } #faq #qna .answer { background: rgba(0, 31, 63, 0.75); padding: 25px; color: #fff; p { color:#fff; } } @media (min-width: 769px) { #faq #qna { grid-template-columns: 2fr 3fr; } #faq #qna .answer { padding: 50px; grid-column: 2; grid-row: 1 / span 6; opacity: 0; z-index: 0; transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); -o-transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); -moz-transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); -webkit-transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1); } #faq #qna:not(:hover) .question.active, #faq #qna .question:hover { color: #001f3f; opacity: 1; font-weight: 800; } #faq #qna:not(:hover) .question.active:after, #faq #qna .question:hover:after { opacity: 1; transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -webkit-transform: translateX(0); } #faq #qna:not(:hover) .question.active:before, #faq #qna .question:hover:before { z-index: 11; } #faq #qna:not(:hover) .question.active + .answer, #faq #qna .question:hover + .answer { opacity: 1; z-index: 10; } } @media (max-width: 768px) { #faq #qna .answer:not(:last-child) { margin-bottom: 50px; } } #cta { position: relative; z-index: 1; } #cta:before { content: " "; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; } #cta > * { position: relative; z-index: 3; } #cta:before { background: linear-gradient(135deg, #001f3f 5%, #85144b 100%); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } #cta .grid { align-items: center; } #cta .grid > div:last-child h2 { text-align: center; } #cta h2, #cta h3, #cta p { color: #fff; } #cta h2 i, #cta h3 i, #cta p i { font-weight: 700; } #option .option .copy { color: #fff; font-size: 11px; } @media (max-width: 768px) { #option .option .copy { font-family: 'Roboto'; font-size: 16px; line-height: 1.5; font-weight: 300; } } @media (max-width: 425px) { #option .option .copy { font-family: 'Roboto'; font-size: 14px; line-height: 1.5; font-weight: 300; } } @media (max-width: 375px) { #option .option .copy{ font-family: 'Roboto'; font-size: 11px; line-height: 1.5; font-weight: 300; } } @media (max-width: 320px) { #option .option .copy { font-family: 'Roboto'; font-size: 9px; line-height: 1.5; font-weight: 300; } }