html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
/*********************
Color Variables
*********************/
/*********************
BREAKPOINTS
*********************/
/*********************
TYPOGRAPHY
*********************/
/* To embed your own fonts, use this syntax
and place your fonts inside the
/fonts folder. For more information
on embedding fonts, go to:
http://www.fontsquirrel.com/
Be sure to remove the comment brackets.
*/
/**
Add your font files inside the "fonts" folder in the roots. Reference them in file '/dist/css/fonts.css'. Since that is a css file and not scss, you cannot crete font variables for each (i.e. $venti ). Instead, reference the variables names below.
Paste this into your '/dist/css/fonts.css' file
/*
This file has already been included in the gitignore because for localhost you will need to include the "" prefix to your font url, whereas in the staging/production environment you will need to remove that. Upload the fonts via ftp. Remove the
@font-face {
font-family: 'avenir';
src: url('/sparxoo-website-boilerplate/fonts/Avenir-Heavy.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'avenir';
src: url('/sparxoo-website-boilerplate/fonts/Avenir-Medium.woff') format('woff');
font-weight: normal;
font-style: bold;
}
*/
/*
use the best ampersand
http://simplebits.com/notebook/2008/08/14/ampersands-2/
*/
/******************************************************************
Stylesheet: Mixins & Constants Stylesheet
This is where you can take advantage of Sass' great features:
Mixins & Constants. I won't go in-depth on how they work exactly,
there are a few articles below that will help do that. What I will
tell you is that this will help speed up simple changes like
changing a color or adding CSS3 techniques gradients.
******************************************************************/
/*********************
CLEARFIXIN'
*********************/
.clearfix,
.cf {
zoom: 1; }
.clearfix:before, .clearfix:after,
.cf:before,
.cf:after {
content: "";
display: table; }
.clearfix:after,
.cf:after {
clear: both; }
/*
use the best ampersand
http://simplebits.com/notebook/2008/08/14/ampersands-2/
*/
span.amp {
font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important;
font-style: italic; }
/*********************
TRANSITION
*********************/
/*
You'll need to be using Sass 3.2+ for these to work.
Thanks to @anthonyshort for the inspiration on these.
USAGE: @include transition(all 0.2s ease-in-out);
*/
/*********************
OPACITY
adds an opacity to an HTML element
USAGE: @include opacity(.8,80);
*********************/
/*********************
VENDOR PREFIX
allows us to add one line of code that works accross all the browsers for CCS3 elements
USAGE: @include vendor-prefix('border-radius', '6px');
*********************/
/*********************
HTML LIST ITEM WITH NOT LIST STYLE
removes the list-style settings from an HTML list
USAGE: @include listNoStyle
*********************/
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdo it.
This is a great tool for creating CSS gradients: http://www.colorzilla.com/gradient-editor/
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/* @include css-gradient(#dfdfdf,0%, #f8f8f8, 80%); */
/* @include css-gradient(#dfdfdf,0%, #f8f8f8, 80%); */
/* @include css-gradient(#dfdfdf,0%, #f8f8f8, 20%, #000000, 20%, #f8f8f8, 90%); */
/*********************
BORDER RADIUS
USAGE: @include border-radius-fourcorners(10px)
*********************/
/*********************
TRANSFORM
rotate USAGE: @include rotate(20deg)
scale USAGE: @include scale(1.3)
*********************/
/******************************************************************
Stylesheet: Animations
This is where we can add some fun CSS3 animations that can be called in the style.scss file.
When adding CSS animations to a element you will want to include these lines of code in addition to the animation-name:
@include vendor-prefix('animation-timing-function', 'linear');
@include vendor-prefix('animation-duration', '20s' );
@include vendor-prefix('animation-iteration-count', 'infinite');
@include vendor-prefix('animation-fill-mode', 'both');
@include vendor-prefix('transform-style', 'preserve-3D');
******************************************************************/
/*#journey-1, #journey-2 {
animation-fill-mode: forwards;
transition-delay: 0s;
transition-duration: 1s;
&:after {
display: none !important;
}
}
#journey-1.page-change-leave-active {
// from page 1 to page 2
animation: slide_out_left 1s linear;
&.page-change-leave-to + *.page-change-enter-active {
&:after {
display: none !important;
}
display: block !important;
animation: slide_in_left 1s linear;
}
}
#journey-2.page-change-leave-active {
// from page 2 to page 1
animation: slide_out_right 1s linear;
&.page-change-leave-to + *.page-change-enter-active {
&:after {
display: none !important;
}
display: block !important;
animation: slide_in_right 1s linear;
}
}*/
/*********************
360 Rotationi Animation
USAGE: @include vendor-prefix('animation-name', 'spin360');
*********************/
@-webkit-keyframes spin360 {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); } }
@-moz-keyframes spin360 {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); } }
@-o-keyframes spin360 {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes spin360 {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes slide_in_left {
0% {
transform: translate(100%, -100%); }
99.99% {
transform: translate(0%, -100%); }
100% {
transform: translate(0%, 0%); } }
@-webkit-keyframes slide_in_left {
0% {
-webkit-transform: translate(100%, -100%); }
99.99% {
-webkit-transform: translate(0%, -100%); }
100% {
-webkit-transform: translate(0%, 0%); } }
@-moz-keyframes slide_in_left {
0% {
-moz-transform: translate(100%, -100%); }
99.99% {
-moz-transform: translate(0%, -100%); }
100% {
-moz-transform: translate(0%, 0%); } }
@-o-keyframes slide_in_left {
0% {
-o-transform: translate(100%, -100%); }
99.99% {
-o-transform: translate(0%, -100%); }
100% {
-o-transform: translate(0%, 0%); } }
@keyframes slide_out_left {
0% {
transform: translateX(0%); }
100% {
transform: translateX(-100%); } }
@-webkit-keyframes slide_out_left {
0% {
-webkit-transform: translateX(0%); }
100% {
-webkit-transform: translateX(-100%); } }
@-moz-keyframes slide_out_left {
0% {
-moz-transform: translateX(0%); }
100% {
-moz-transform: translateX(-100%); } }
@-o-keyframes slide_out_left {
0% {
-o-transform: translateX(0%); }
100% {
-o-transform: translateX(-100%); } }
@keyframes slide_in_right {
0% {
transform: translate(-100%, -100%); }
99.99% {
transform: translate(0%, -100%); }
100% {
transform: translate(0%, 0%); } }
@-webkit-keyframes slide_in_right {
0% {
-webkit-transform: translate(-100%, -100%); }
99.99% {
-webkit-transform: translate(0%, -100%); }
100% {
-webkit-transform: translate(0%, 0%); } }
@-moz-keyframes slide_in_right {
0% {
-moz-transform: translate(-100%, -100%); }
99.99% {
-moz-transform: translate(0%, -100%); }
100% {
-moz-transform: translate(0%, 0%); } }
@-o-keyframes slide_in_right {
0% {
-o-transform: translate(-100%, -100%); }
99.99% {
-o-transform: translate(0%, -100%); }
100% {
-o-transform: translate(0%, 0%); } }
@keyframes slide_out_right {
0% {
transform: translateX(0%); }
100% {
transform: translateX(100%); } }
@-webkit-keyframes slide_out_right {
0% {
-webkit-transform: translateX(0%); }
100% {
-webkit-transform: translateX(100%); } }
@-moz-keyframes slide_out_right {
0% {
-moz-transform: translateX(0%); }
100% {
-moz-transform: translateX(100%); } }
@-o-keyframes slide_out_right {
0% {
-o-transform: translateX(0%); }
100% {
-o-transform: translateX(100%); } }
@keyframes fade_in {
0% {
opacity: 0; }
100% {
opacity: 1; } }
@keyframes fade_in_down {
0% {
opacity: 0;
transform: translateY(-50%); }
100% {
opacity: 1;
transform: translateY(0%); } }
@keyframes fade_down {
0% {
opacity: 1; }
100% {
opacity: .35; } }
@keyframes wave {
0% {
transform: translateX(0%); }
100% {
transform: translateX(-38%); } }
@keyframes dark_wave {
0% {
transform: translateX(0%); }
100% {
transform: translateX(-38%); } }
@keyframes bg_wave {
0% {
background-position: 0% top; }
100% {
background-position: 56% top; } }
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(0); }
40% {
transform: translateX(25px); }
60% {
transform: translateX(15px); } }
@keyframes bouncereverse {
0%, 20%, 50%, 80%, 100% {
transform: translateX(0) rotate(180deg); }
40% {
transform: translateX(-25px) rotate(180deg); }
60% {
transform: translateX(-15px) rotate(180deg); } }
@keyframes wave_bounce {
0% {
transform: translate(0, 0); }
25% {
transform: translate(0, 5px); }
50% {
transform: translate(0, 0); }
75% {
transform: translate(0, 5px); }
100% {
transform: translate(0px, 0); } }
/*********************
EXAMPLE animation used to make an item rotate around in a circle.
*********************/
@-webkit-keyframes orbitTopMiddle {
from {
-webkit-transform: rotate(0deg) translateY(-200px) rotate(0deg); }
to {
-webkit-transform: rotate(360deg) translateY(-200px) rotate(-360deg); } }
@-moz-keyframes orbitTopMiddle {
from {
-moz-transform: rotate(0deg) translateY(-200px) rotate(0deg); }
to {
-moz-transform: rotate(360deg) translateY(-200px) rotate(-360deg); } }
@-o-keyframes orbitTopMiddle {
from {
-o-transform: rotate(0deg) translateY(-200px) rotate(0deg); }
to {
-o-transform: rotate(360deg) translateY(-200px) rotate(-360deg); } }
@keyframes orbitTopMiddle {
from {
transform: rotate(0deg) translateY(-200px) rotate(0deg); }
to {
transform: rotate(360deg) translateY(-200px) rotate(-360deg); } }
@-webkit-keyframes fillAction {
0% {
-webkit-transform: translate(0, 30px); }
100% {
-webkit-transform: translate(0, -10px); } }
@-webkit-keyframes emptyAction {
0% {
-webkit-transform: translate(0, -10px); }
100% {
-webkit-transform: translate(0, 30px); } }
@-webkit-keyframes waveAction {
0% {
-webkit-transform: translate(-100px, 0); }
100% {
-webkit-transform: translate(-100px, 0); } }
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateX(0); }
40% {
-webkit-transform: translateX(25px); }
60% {
-webkit-transform: translateX(15px); } }
@-webkit-keyframes bouncereverse {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateX(0) rotate(180deg); }
40% {
-webkit-transform: translateX(-25px) rotate(180deg); }
60% {
-webkit-transform: translateX(-15px) rotate(180deg); } }
/*
* ------------------------------------------
* *-----------------------------
* NProgress Styling
* *-----------------------------
* ------------------------------------------
*/
/* Make clicks pass-through */
#nprogress {
pointer-events: none; }
#nprogress .bar {
background: #AD0101;
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 5px; }
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #AD0101, 0 0 5px #AD0101;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px); }
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px; }
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #AD0101;
border-left-color: #AD0101;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite; }
.nprogress-custom-parent {
overflow: hidden;
position: relative; }
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute; }
@-webkit-keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg); } }
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
/*
* ------------------------------------------
* *-----------------------------
* Slick Slider
* *-----------------------------
* ------------------------------------------
*/
/*
* ------------------------------------------
* *-----------------------------
* Slick Slider General Styles
* *-----------------------------
* ------------------------------------------
*/
.slick-slider {
margin-bottom: 0;
overflow: hidden; }
.slick-list:focus {
outline: none; }
.slick-prev:focus, .slick-next:focus {
outline: none; }
.slick-slide:focus {
outline: none; }
.slick-active {
outline: none; }
/*
|--------------------------------------------------------------------------
| Add your custom theme styles below
|--------------------------------------------------------------------------
|
| Be sure that you are using SCSS or CSS syntax.
| Visit http://sass-lang.com/guide#topic-3
| for more info.
|
*/
/*
* ------------------------------------------
* *-----------------------------
* Initial Typography
* *-----------------------------
* ------------------------------------------
*/
body {
font-size: 18px;
line-height: 1.45; }
h1, h2, h3 {
line-height: 1em; }
h1 {
font-size: 3em; }
h2 {
font-size: 1.5em; }
h3 {
font-size: 1.2em; }
h5 {
font-size: 1em;
font-weight: bold; }
p {
font-size: 0.8em;
margin: 1em 0 0 0; }
a:hover {
text-decoration: none;
color: white; }
a:focus {
color: white;
text-decoration: none;
background: none !important; }
.section-padding {
padding: 30px 0 40px; }
.container.body-copy {
max-width: 550px; }
@media screen and (min-width: 768px) {
h1 {
font-size: 3.75em; }
h2 {
font-size: 1.875em; }
h3 {
font-size: 1.5em; }
h5 {
font-size: 1.2em; }
p {
font-size: 1em; } }
/*
* ------------------------------------------
* *-----------------------------
* 1.0 Hero Banner Styles
* *-----------------------------
* ------------------------------------------
*/
/*
* *-----------------------------
* 1.1 Standard Hero
* *-----------------------------
*/
.standard-hero {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
color: white;
position: relative;
text-transform: uppercase;
min-height: 450px; }
.standard-hero .standard-hero-content {
position: absolute;
transform: translateY(-50%);
top: 50%;
left: 0;
right: 0; }
.standard-hero h1 {
margin-bottom: 6px; }
.standard-hero h2 {
margin-top: 0; }
/*
---------------------------------------------------------
* ------------------------------------------
* *-----------------------------
* 2.0 Pages
* *-----------------------------
* ------------------------------------------
---------------------------------------------------------
*/
/*
* ------------------------------------------
* *-----------------------------
* 2.1 - 404 Page
* *-----------------------------
* ------------------------------------------
*/
.Error-404 {
border-bottom: 0;
text-align: center;
color: red;
margin-top: 100px;
margin-bottom: 100px;
overflow: hidden; }
.Error-404__header {
border-bottom: 0; }
.Error-404__title {
font-size: 144px;
font-family: 'Lato', sans-serif; }
/*
---------------------------------------------------------
* ------------------------------------------
* *-----------------------------
* 3.0 Modules
* *-----------------------------
* ------------------------------------------
---------------------------------------------------------
*/
.spx-module {
padding: 20px; }
.spx-module.hero {
position: relative;
height: 55vh;
min-height: 250px;
margin-bottom: 40px;
text-align: center;
overflow: hidden;
background-size: cover;
background-position: center center; }
.spx-module.hero .container {
position: absolute;
top: 50%;
right: 0;
left: 0;
transform: translateY(-50%); }
.spx-module.hero h1, .spx-module.hero h2, .spx-module.hero h3, .spx-module.hero h4, .spx-module.hero h5, .spx-module.hero h6 {
margin: 0;
text-shadow: 1px 1px 3px rgba(10, 10, 10, 0.35);
line-height: 1em;
font-family: 'Open Sans', sans-serif;
color: white; }
.spx-module.hero h1:not(:first-child), .spx-module.hero h2:not(:first-child), .spx-module.hero h3:not(:first-child), .spx-module.hero h4:not(:first-child), .spx-module.hero h5:not(:first-child), .spx-module.hero h6:not(:first-child) {
margin-top: .35em; }
.spx-module.hero .hr hr {
border: 0;
border-bottom: 1px solid white;
box-shadow: 1px 1px 3px 0px rgba(10, 10, 10, 0.35); }
.spx-module.hero video {
display: none; }
.spx-module.hero.short {
height: 33.3333vh; }
.spx-module.hero.tiny {
height: 90px;
min-height: 90px; }
.spx-module.hero.gray_bg .container {
padding: .75em; }
.spx-module.hero.remove_text_shadow .container h1, .spx-module.hero.remove_text_shadow .container h2, .spx-module.hero.remove_text_shadow .container h3, .spx-module.hero.remove_text_shadow .container h4, .spx-module.hero.remove_text_shadow .container h5, .spx-module.hero.remove_text_shadow .container h6 {
text-shadow: none; }
.spx-module.hero.remove_text_shadow .hr hr {
box-shadow: none; }
.spx-module.hero.capitalize_all .container {
text-transform: uppercase; }
.spx-module.hero.add_arrow .container {
margin-top: -40px; }
.spx-module.hero.add_arrow .arrow-container {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%; }
.spx-module.hero.add_arrow .arrow-container div {
position: relative;
width: 50%;
height: 40px;
background-color: white; }
.spx-module.hero.add_arrow .arrow-container div:after {
content: '';
position: absolute;
display: block;
border-bottom: 40px solid white; }
.spx-module.hero.add_arrow .arrow-container div:first-child {
margin-left: -100px;
float: left; }
.spx-module.hero.add_arrow .arrow-container div:first-child:after {
border-right: 100px solid transparent;
right: -100px; }
.spx-module.hero.add_arrow .arrow-container div:last-child {
margin-right: -100px;
float: right; }
.spx-module.hero.add_arrow .arrow-container div:last-child:after {
border-left: 100px solid transparent;
left: -100px; }
@media (min-width: 450px) {
.spx-module.hero .container {
font-size: 1.15em; }
.spx-module.hero.gray_bg .container {
padding: 1.75em;
background-color: rgba(10, 10, 10, 0.6); } }
@media (min-width: 1024px) {
.spx-module.hero .container {
font-size: 1.4em;
letter-spacing: .1em; } }
@media (min-width: 1025px) {
.spx-module.hero video {
animation-name: fade_in;
animation-fill-mode: forwards;
animation-duration: 1s;
display: none;
opacity: 0;
display: none;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); } }
@media (min-width: 1600px) {
.spx-module.hero .container {
font-size: 1.6em; } }
/*
---------------------------------------------------------
* ------------------------------------------
* *-----------------------------
* 4.0 Static Elements
* *-----------------------------
* ------------------------------------------
---------------------------------------------------------
*/
html {
margin-top: 0 !important; }
#app {
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
font-family: "futura-pt", Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif, sans-serif;
color: #022e54;
background-color: white; }
#app.home {
background-image: url("/tampa-bay-water/wp-content/themes/tampa-bay-water/images/water.jpg");
background-size: cover; }
#app > div > .opened-modal {
overflow: hidden; }
#app > div.quiz > .wrapper {
overflow: scroll; }
.quiz {
position: relative;
overflow: hidden;
min-height: 100vh; }
.quiz main {
position: relative;
padding-top: 80px;
padding-bottom: 90px; }
.quiz h1 {
padding-top: 40px; }
.quiz p {
max-width: 550px;
margin: 1em auto;
font-size: 1em;
filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.9)); }
.quiz .background {
position: absolute;
width: 100vw;
height: 100vh; }
.quiz .background li {
position: absolute; }
.quiz .background li svg {
display: block;
width: 33vw;
height: auto;
min-width: 160px; }
.quiz .background li svg:first-of-type {
margin-left: 12.5vw;
margin-bottom: 2.5vw; }
.quiz .background li:nth-child(2n) {
top: 15vh; }
.quiz .background li:nth-child(2n-1) {
top: 50vh; }
.quiz .background li:nth-child(3n) {
top: 80vh; }
.quiz .background li:nth-child(1) {
left: 5vw; }
.quiz .background li:nth-child(2) {
left: 35vw; }
.quiz .background li:nth-child(3) {
left: 70vw; }
.quiz .background li:nth-child(4) {
left: 105vw; }
.quiz .background li:nth-child(5) {
left: 140vw; }
.quiz .background li:nth-child(6) {
left: 175vw; }
.quiz .background li:nth-child(7) {
left: 210vw; }
.quiz .prog {
transform: translateX(100%);
opacity: 0;
display: none; }
.quiz .prog > .wrapper {
position: relative;
font-size: 200px;
width: 1em;
height: 1em;
margin: 0 auto;
border-radius: 50%;
box-shadow: 0 4px 35px -15px rgba(10, 10, 10, 0.95);
background-color: white; }
.quiz .prog .pie {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip: rect(0, 1em, 1em, 0.5em); }
.quiz .prog .pie .half-circle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0.18em solid #022e54;
border-radius: 50%;
clip: rect(0, 0.5em, 1em, 0); }
.quiz .prog .pie .first {
transform: rotate(3deg); }
.quiz .prog .pie .second {
display: none;
transform: rotate(180deg); }
.quiz .prog .center {
position: absolute;
top: .18em;
left: .18em;
width: calc(1em - .18em * 2);
height: calc(1em - .18em * 2);
border-radius: 50%;
box-shadow: 0 4px 35px -15px rgba(10, 10, 10, 0.95) inset;
background-color: white; }
.quiz .prog .center .correct, .quiz .prog .center .incorrect {
display: none;
opacity: 0; }
.quiz .prog .center svg {
display: block;
width: calc(1em - .18em * 2);
height: calc(1em - .18em * 2);
padding: .15em; }
.quiz .question {
display: none;
transform: translateX(100%);
opacity: 0;
width: 100%;
margin-top: 2em; }
.quiz .question button {
margin-right: .5em;
margin-left: .5em; }
.quiz .question button:last-of-type {
margin-top: .5em; }
.quiz .question .or {
display: block;
margin-top: .5em;
font-weight: bold; }
.quiz .post-script {
display: none;
opacity: 0; }
.quiz .finish {
display: none;
opacity: 0; }
.quiz .results {
display: none;
opacity: 0; }
.quiz .results .your-score, .quiz .results .average-score {
font-weight: bold;
margin: 0 auto; }
.quiz .loading {
display: none;
margin-top: 1em;
animation: spin360 800ms linear;
animation-iteration-count: infinite;
font-size: 60px;
opacity: 0; }
@media (min-width: 1024px) {
.quiz main {
position: relative;
padding-top: 25vh; }
.quiz h1 {
padding-top: 0px; }
.quiz .question button:last-of-type {
margin-top: 1.5em; }
.quiz .question .or {
display: inline-block;
margin: 0; } }
h1, h2 {
font-weight: normal;
color: #022e54;
text-transform: uppercase;
font-family: "futura-pt-bold", Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif, sans-serif; }
h1.color-white, h2.color-white {
color: white; }
a {
color: #022e54; }
#bg_video {
width: 100%;
height: 100%;
background-position: center;
background-size: cover; }
.button-block {
margin-top: 0px;
display: flex;
justify-content: center; }
@media screen and (min-width: 768px) {
.button-block {
margin-top: 20px; } }
.button-block a {
margin: 1.5em 0 0 0;
display: block; }
a:focus {
outline: 3px solid #000;
/* High-contrast outline color */
outline-offset: 4px;
/* Space between the button and the outline */
border-radius: 4px; }
button,
.button {
width: fit-content;
position: relative;
border: 5px solid #022e54;
border-radius: 8px;
padding: 10px;
background: transparent;
font-family: "futura-pt-bold", Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif, sans-serif;
text-transform: uppercase;
min-width: 215px;
box-shadow: 0 0 0 1000px white inset;
user-select: none;
overflow: hidden;
transform: translate3d(0, 0, 0); }
button.wave,
.button.wave {
box-shadow: 0 0 0 1000px white inset;
color: #022e54; }
button.wave:before,
.button.wave:before {
animation: wave 600ms linear;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
content: "";
position: absolute;
z-index: -1;
top: 100%;
left: 0px;
transition: top 1.15s ease-out;
display: block;
width: 710px;
height: 201px; }
button.wave:focus,
.button.wave:focus {
outline: 3px solid #000;
/* High-contrast outline color */
outline-offset: 4px;
/* Space between the button and the outline */
border-radius: 4px; }
button.wave.aqua,
.button.wave.aqua {
box-shadow: 0 0 0 1000px #022e54 inset; }
button.wave.aqua:before,
.button.wave.aqua:before {
background-image: url("./assets/fill_water_dark.svg"); }
button.wave.aqua:hover,
.button.wave.aqua:hover {
color: white; }
button.wave.transparent-button,
.button.wave.transparent-button {
color: white;
box-shadow: 0 0 0 1000px transparent inset;
border-color: white;
background: none; }
button.wave.transparent-button:before,
.button.wave.transparent-button:before {
background-image: url("./assets/fill_water_dark.svg"); }
button.wave.transparent-button:hover,
.button.wave.transparent-button:hover {
color: white; }
button.wave:hover,
.button.wave:hover {
color: #022e54; }
button.wave:hover:before,
.button.wave:hover:before {
top: -40%;
animation-duration: 350ms; }
button.wave.correct,
.button.wave.correct {
color: #022e54;
background-color: white; }
button.wave.correct:before,
.button.wave.correct:before {
top: -40%;
animation-duration: 290ms; }
button.wave.fade-down,
.button.wave.fade-down {
color: white;
border-color: #b11500;
box-shadow: 0 0 0 1000px #b11500 inset; }
button.wave.fade-down:before,
.button.wave.fade-down:before {
display: none; }
button:hover,
.button:hover {
background: #022e54;
color: white; }
button:focus,
.button:focus {
outline: none; }
button.color-white,
.button.color-white {
border-color: white;
color: white; }
button.color-white:hover,
.button.color-white:hover {
background: white;
color: #022e54; }
button.correct,
.button.correct {
border-color: white;
color: white;
background-color: #00a9f1;
box-shadow: 0 0 35px -3px rgba(10, 10, 10, 0.5);
pointer-events: none;
transition: color, background-color, border-color, box-shadow;
transition-duration: 500ms; }
button.button-2,
.button.button-2 {
margin-left: 0; }
@media (min-width: 504px) {
button.button-2,
.button.button-2 {
margin-left: 40px; } }
button#menu-button,
.button#menu-button {
position: absolute;
z-index: 21;
top: 0px;
left: 20px;
transition: top 375ms ease-out;
display: block;
min-width: 25px;
margin-top: 30px;
padding: 0;
border: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
animation: none;
overflow: visible; }
button#menu-button:before,
.button#menu-button:before {
display: none; }
button#menu-button:focus,
.button#menu-button:focus {
outline: 3px solid #000;
/* High-contrast outline color */
outline-offset: 4px;
/* Space between the button and the outline */
border-radius: 5px; }
button#menu-button > div,
.button#menu-button > div {
height: 4px;
width: 100%;
margin: 5px 0;
background-color: #022e54;
transform-origin: center center; }
button#menu-button svg,
.button#menu-button svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 100%;
transition-duration: 0ms;
/*&:nth-child(2) {
width: 32px;
opacity: 0;
}*/ }
button#menu-button:hover, button#menu-button:active,
.button#menu-button:hover,
.button#menu-button:active {
outline: none; }
button#menu-button.color-white > div,
.button#menu-button.color-white > div {
background-color: #ffffff; }
@media (min-width: 1024px) {
button#menu-button svg,
.button#menu-button svg {
width: 45px; }
button#menu-button svg:nth-child(2),
.button#menu-button svg:nth-child(2) {
width: 32px; } }
@media (max-height: 440px) {
button,
.button {
font-size: 0.8em; } }
.header {
position: absolute;
width: 100vw;
transition: background-color .35s ease-in-out, box-shadow .35s ease-in-out;
z-index: 999;
background: transparent;
box-shadow: 0px 0px 20px transparent; }
.header #nav {
width: 100%;
position: absolute;
margin: 0 auto;
top: 200px; }
.header #nav .nav-items li {
animation: fade_in_down 350ms ease-in-out;
animation-delay: 100ms;
animation-fill-mode: forwards;
opacity: 0;
transform: translateY(-50%);
display: none;
width: inherit;
color: #022e54;
font-family: "futura-pt-bold", Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif, sans-serif;
text-transform: uppercase;
text-align: center;
padding: 30px 15px; }
.header #nav .nav-items li:nth-of-type(2) {
animation-delay: 200ms; }
.header #nav .nav-items li:nth-of-type(3) {
animation-delay: 300ms; }
.header #nav .nav-items li .router-link-exact-active a, .header #nav .nav-items li .router-link-active a {
text-decoration: underline;
color: #022e54; }
.header #nav .nav-items li a:hover, .header #nav .nav-items li a:focus, .header #nav .nav-items li a:active {
text-decoration: underline;
color: #022e54; }
.header #nav .nav-items li a.router-link-exact-active {
color: #022e54;
border-bottom: 3px solid #022e54; }
.header.nav-open {
height: 100vh;
background: white;
box-shadow: 0px 0px 20px #022e54; }
.header.nav-open #nav {
display: block; }
.header.nav-open #nav .nav-items li {
display: block; }
.header.nav-open button#menu-button #mid-rect {
display: none; }
.header.nav-open button#menu-button > div {
background-color: #022e54; }
@media (max-height: 420px) {
.header #nav {
top: 100px; }
.header #nav .nav-items li {
padding: 20px 15px; } }
@media screen and (min-width: 768px) {
.header #nav {
position: relative;
transform: none;
text-align: center;
top: 0;
width: 490px;
float: left; }
.header #nav .nav-items {
padding-left: 12.5%;
padding-right: 0; }
.header #nav .nav-items li {
display: none;
vertical-align: middle;
width: 30%;
padding-left: 0;
padding-right: 0; }
.header.nav-open {
max-height: 86px;
height: 86px; }
.header.nav-open #nav .nav-items li {
display: inline-block; } }
@media screen and (min-width: 992px) {
.header #nav {
width: 60%;
max-width: 560px; }
.header #nav .nav-items li {
width: 30%; } }
.header-button {
position: absolute;
left: auto;
right: 20px;
top: 15px;
z-index: 9999; }
.header-button a {
display: block; }
.header-button button,
.header-button .button {
margin-top: 0;
min-width: 175px; }
.header-button button.aqua,
.header-button .button.aqua {
background-color: #022e54;
border-color: #ffffff;
color: #ffffff; }
.header-button button.aqua:hover,
.header-button .button.aqua:hover {
background-color: #022e54; }
.header-button button.aqua:focus,
.header-button .button.aqua:focus {
outline: 3px solid #000;
/* High-contrast outline color */
outline-offset: 4px;
/* Space between the button and the outline */
border-radius: 4px; }
.header-button a:hover button {
color: #022e54; }
.header-button a:focus button {
outline: 2px solid #0056b3;
/* High-contrast outline color */
outline-offset: 4px;
/* Space between the button and the outline */
border-radius: 4px;
/* Optional: Adjust shape for better visibility */ }
/*
---------------------------------------------------------
* ------------------------------------------
* *-----------------------------
* 5.0 Template Specific Styles
* *-----------------------------
* ------------------------------------------
---------------------------------------------------------
*/
.home-content, .discover-content, .quiz-content {
width: 100vw;
height: 100vh; }
.home-content .container, .discover-content .container, .quiz-content .container {
top: 50%;
transform: translateY(-50%);
position: absolute;
left: 0;
right: 0; }
.background-wave {
fill: none;
stroke: #00a9f1;
stroke-linejoin: round;
stroke-width: 50px; }
.spaced-waves {
fill: none;
stroke: #00a9f1;
stroke-linejoin: round;
stroke-width: 50px; }
.macaroni-waves {
fill: none;
stroke: #fff;
stroke-linejoin: round;
stroke-width: 20px; }
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: table;
transition: opacity .3s ease; }
.modal-mask .modal-wrapper {
display: table-cell;
vertical-align: middle; }
.modal-mask .modal-wrapper .modal-container {
width: 80%;
margin: 0px auto;
padding: 1em;
background-color: white;
border-radius: 2px;
transition: all .3s ease;
height: 75%;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0; }
.modal-mask .modal-wrapper .modal-container .modal-header {
padding: 0;
border-bottom: none;
min-height: 30px;
position: relative;
max-height: 10%; }
.modal-mask .modal-wrapper .modal-container .modal-header .modal-button {
font-size: 1.6em;
z-index: 999999;
text-align: right;
margin-right: 10px; }
.modal-mask .modal-wrapper .modal-container .modal-body {
font-size: 1.2em;
overflow: scroll;
max-height: 90%;
position: relative; }
.modal-mask .modal-wrapper .modal-container .modal-body p {
text-align: left; }
.modal-mask .modal-wrapper .modal-container .modal-body p:first-child {
margin-top: 0; }
.modal-mask .modal-wrapper .modal-container .modal-body p ul {
margin: 1em 0 0; }
.modal-mask .modal-wrapper .modal-container .modal-body p ul li {
margin-bottom: 1em;
list-style-type: disc;
text-align: left;
margin-left: 2em;
font-size: 0.8em; }
.modal-mask .modal-wrapper .modal-container .modal-body p ul.center {
text-align: center; }
.modal-mask .modal-wrapper .modal-container .modal-body p strong {
font-family: "futura-pt-bold", Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif, sans-serif; }
.modal-mask .modal-wrapper .modal-container .modal-body p em {
font-style: italic; }
.modal-mask .modal-wrapper .modal-container .modal-body p a {
color: #32bca0;
text-decoration: underline; }
.modal-mask .modal-wrapper .modal-container .modal-body p a:hover {
color: #022e54; }
@media (min-width: 600px) and (min-height: 450px) {
.modal-mask .modal-wrapper .modal-container {
height: 400px; }
.modal-mask .modal-wrapper .modal-container .modal-body {
height: 350px;
margin: 0 0 10px; } }
@media screen and (min-width: 768px) {
.modal-mask .modal-wrapper .modal-container {
height: 450px; }
.modal-mask .modal-wrapper .modal-container .modal-body {
height: 400px; } }
.modal-enter {
opacity: 0; }
.modal-leave-active {
opacity: 0; }
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1); }
/*
* ------------------------------------------
* *-----------------------------
* 5.1 - Home
* *-----------------------------
* ------------------------------------------
*/
h1 {
margin: 0 auto; }
.home-page {
background-size: cover;
height: 100vh; }
.home-page h1 {
max-width: 520px;
line-height: 1em; }
.home-page .home-overlay {
position: absolute;
top: auto;
bottom: -10px;
right: 0px;
display: none;
width: 1em;
height: 1em;
font-size: 25em; }
.home-page .home-overlay .macaroni-waves {
animation: wave_bounce 5s infinite;
animation-direction: alternate; }
.home-page .home-overlay .macaroni-waves.row-2 {
animation-delay: 0.25s; }
.home-page .home-overlay .macaroni-waves.row-3 {
animation-delay: 0.5s; }
.home-page .home-overlay .macaroni-waves.row-4 {
animation-delay: 0.75s; }
.home-page .home-overlay .macaroni-waves.row-5 {
animation-delay: 1s; }
.home-page .home-overlay .macaroni-waves.row-6 {
animation-delay: 1.25s; }
@media screen and (min-width: 1200px) {
.home-page .home-overlay {
display: block; } }
.home-page .home-content {
position: absolute;
width: 100vw;
height: 100vh; }
.home-page .VideoBg video {
display: none; }
@media screen and (min-width: 768px) {
.home-page .VideoBg video {
display: block;
transform: translate3d(-50%, -50%, 0);
user-select: none;
pointer-events: none; } }
/*
* ------------------------------------------
* *-----------------------------
* 5.2 - About / Journey
* *-----------------------------
* ------------------------------------------
*/
.journey .header {
position: fixed;
background: white;
height: 86px; }
.journey .header.nav-open {
height: 100vh; }
@media screen and (min-width: 1200px) {
.journey .header {
position: absolute;
background: none; }
.journey .header.nav-open {
height: 86px;
background: white; } }
.journey-overlay {
position: absolute;
width: 100%;
height: 100%; }
.journey-overlay .waves {
width: 100%; }
.journey-overlay .waves .background-space-wave {
position: absolute;
width: 300px;
animation: wave_bounce 5s infinite;
animation-direction: alternate; }
.journey-overlay .waves .background-space-wave#wave-1 {
top: 55%;
left: -35%; }
.journey-overlay .waves .background-space-wave#wave-2 {
left: auto;
right: -62%;
bottom: 8%;
animation-delay: 0.5s; }
.journey-overlay .waves .background-space-wave#wave-3 {
top: 25%;
left: auto;
right: -60%;
animation-delay: 1s; }
@media (min-width: 533px) {
.journey-overlay .waves .background-space-wave#wave-1 {
left: -20%; }
.journey-overlay .waves .background-space-wave#wave-2 {
right: -25%; }
.journey-overlay .waves .background-space-wave#wave-3 {
right: -30%; } }
@media screen and (min-width: 768px) {
.journey-overlay .waves .background-space-wave#wave-1 {
left: -5%; }
.journey-overlay .waves .background-space-wave#wave-2 {
right: -20%; }
.journey-overlay .waves .background-space-wave#wave-3 {
top: 40%;
right: 0%; } }
@media screen and (min-width: 992px) {
.journey-overlay .waves .background-space-wave#wave-1 {
left: 5%;
top: 60%; }
.journey-overlay .waves .background-space-wave#wave-2 {
right: -10%; }
.journey-overlay .waves .background-space-wave#wave-3 {
right: 5%; } }
@media screen and (min-width: 1200px) {
.journey-overlay .waves .background-space-wave#wave-1 {
top: 45%;
left: 3%; }
.journey-overlay .waves .background-space-wave#wave-2 {
left: 25%;
right: auto;
bottom: 7%; }
.journey-overlay .waves .background-space-wave#wave-3 {
top: 25%;
right: -70px; }
.journey-overlay .waves .background-space-wave#wave-4 {
left: 58%;
bottom: 5%; }
.journey-overlay .waves .background-space-wave#wave-5 {
left: 12%;
top: 25%;
animation-delay: 0.5s; }
.journey-overlay .waves .background-space-wave#wave-6 {
right: 30%;
top: 8%;
animation-delay: 1s; }
.journey-overlay .waves .background-space-wave#wave-7 {
right: -65px;
top: 40%;
animation-delay: 1.5s; } }
.journey-content {
padding-top: 100px;
padding-bottom: 60px;
position: relative; }
.journey-content img {
max-width: 100%; }
.journey-content .container {
position: relative; }
.journey-content p {
filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.9)); }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn {
font-size: 24px;
border: none;
border-radius: 34px;
width: 34px;
height: 34px;
min-width: 34px;
margin: 0 auto;
background: #32bca0;
padding: 0;
overflow: visible;
position: relative;
z-index: 9; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .btn__content {
color: white;
padding: 0;
line-height: 38px;
transition: .5s ease-in-out; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .tooltip-open {
display: none;
position: absolute;
width: 400px;
max-height: 270px;
background: white;
padding: 24px 24px 54px;
overflow-y: scroll;
box-shadow: 0px 0px 20px rgba(2, 46, 84, 0.4);
z-index: 999999;
text-transform: none; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .tooltip-open .tooltip-content {
color: #022e54;
text-transform: initial;
white-space: normal;
font-size: 18px;
font-family: "futura-pt", Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif, sans-serif;
line-height: 1.5em;
margin: 0; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .tooltip-open .tooltip-content p {
text-align: left; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .tooltip-open .tooltip-content p:first-child {
margin: 0; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .tooltip-open .tooltip-content p ul {
margin: 1em 0 0; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .tooltip-open .tooltip-content p ul li {
margin-bottom: 1em;
list-style-type: disc;
text-align: left;
margin-left: 2em; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .tooltip-open .tooltip-content p ul.center {
text-align: center; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .tooltip-open .tooltip-content p strong {
font-family: "futura-pt-bold", Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif, sans-serif; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .tooltip-open .tooltip-content p em {
font-style: italic; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .tooltip-open .tooltip-content p a {
color: #32bca0;
text-decoration: underline; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .tooltip-open .tooltip-content p a:hover {
color: #022e54; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .tooltip-open.top {
bottom: 60px; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .tooltip-open.bottom {
top: 60px; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .tooltip-open.right {
left: 60px; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn .tooltip-open.left {
right: 60px; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn.open-tooltip .tooltip-open {
display: block; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn.open-tooltip .btn__content .fa {
transform: rotate(45deg);
margin-right: 1px; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip [data-tooltip]:before {
width: 200px;
height: 200px;
white-space: initial; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .tooltip-title {
font-size: 1.35em;
text-transform: uppercase;
font-family: "futura-pt-bold", Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif, sans-serif;
max-width: 150px;
line-height: 1em;
margin: 0; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .tooltip-title.top {
margin-bottom: 0.4em;
margin-top: 0; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .tooltip-title.bottom {
margin-top: 0.4em;
margin-bottom: 0; }
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn--raised {
box-shadow: none; }
.journey-content .wave-content .desktop-wave {
display: none; }
.journey-content .wave-content .mobile-wave {
position: relative; }
.journey-content .wave-content .mobile-wave .large-wave {
position: relative;
margin: 30px auto 60px;
width: 1em;
height: 1em;
font-size: 6em; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block {
position: absolute;
top: 0;
width: 100%; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip {
position: absolute; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-1 {
top: 0;
left: 25px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-2 {
top: 150px;
left: auto;
right: 0px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-3 {
top: 290px;
left: 10px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-4 {
top: 430px;
left: auto;
right: 10px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-5 {
top: 570px;
left: 15px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-6 {
top: 795px;
left: auto;
right: 75px; }
@media (min-width: 375px) {
.journey-content .wave-content .wave-tooltip-block .wave-tooltip .tooltip-title {
font-size: 1.5em;
max-width: 190px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-1 {
left: 40px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-2 {
right: 10px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-6 {
right: 95px; } }
@media (min-width: 533px) {
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-1 {
left: 120px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-2 {
right: 100px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-3 {
left: 90px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-4 {
right: 100px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-5 {
left: 90px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-6 {
right: 185px; } }
@media (min-width: 667px) {
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-1 {
left: 160px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-2 {
right: 140px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-3 {
left: 130px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-4 {
right: 140px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-5 {
left: 130px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-6 {
right: 225px; } }
@media screen and (min-width: 768px) {
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-1 {
left: 200px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-2 {
right: 180px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-3 {
left: 170px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-4 {
right: 180px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-5 {
left: 170px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-6 {
right: 265px; } }
@media screen and (min-width: 992px) {
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-1 {
left: 320px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-2 {
right: 300px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-3 {
left: 290px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-4 {
right: 300px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-5 {
left: 290px; }
.journey-content .wave-content .mobile-wave .wave-tooltip-block .wave-tooltip#tooltip-modal-6 {
right: 385px; } }
@media (width: 1024px) and (min-height: 700px) {
.journey-content .wave-content .mobile-wave .large-wave {
height: 850px; } }
@media screen and (min-width: 1200px) {
.journey-content {
width: 100vw;
height: 100vh;
padding-top: 0;
padding-bottom: 0; }
.journey-content .container {
top: 50%;
transform: translateY(-50%);
position: absolute;
left: 0;
right: 0; }
.journey-content .title-area {
height: 50%;
position: absolute;
left: 0;
right: 0; }
.journey-content .title-area .container {
margin-top: 20px; }
.journey-content .title-area .container p {
max-width: 90%;
margin: 1em auto 0; }
.journey-content .wave-content {
position: absolute;
width: 100vw;
height: 50%;
top: auto;
bottom: 0; }
.journey-content .wave-content .mobile-wave {
display: none; }
.journey-content .wave-content .desktop-wave {
display: block; }
.journey-content .wave-content .desktop-wave .large-wave {
width: 90%;
transform: rotateX(180deg);
position: absolute;
margin-left: 30%; }
.journey-content .wave-content .desktop-wave .wave-tooltip-block {
position: absolute;
width: 100%;
height: 100%; }
.journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip {
position: absolute; }
.journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip .tooltip-title {
font-size: 1.75em; }
.journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-1 {
top: 35%;
left: 24%; }
.journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-2 {
top: -2%;
left: 57%; }
.journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-3 {
left: 0%;
z-index: 999;
top: -10%; }
.journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-3 .tooltip-title {
max-width: 220px; }
.journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-4 {
top: 37%;
left: 20%; }
.journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-5 {
top: -15%;
left: 42%; }
.journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-6 {
left: 82%;
top: 37%; } }
@media (min-width: 1400px) {
.journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-1 {
left: 27%; }
.journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-2 {
left: 59%; }
.journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-3 {
left: 2%; }
.journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-4 {
left: 25%; }
.journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-5 {
left: 46%; }
.journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-6 {
left: 83%; } }
.journey-layer {
position: absolute;
width: 100%;
height: 100%;
top: 0; }
.full-wave {
fill: #022e54;
stroke: #022e54;
stroke-linejoin: inherit;
stroke-width: 0; }
.page-arrow {
display: none;
position: absolute;
left: auto;
bottom: 40px;
right: 90px;
overflow: visible;
z-index: 99; }
.page-arrow .arrow-1 {
fill: #022e54;
stroke-width: 1px; }
.page-arrow .arrow-1, .page-arrow .arrow-2 {
stroke: #022e54;
fill-rule: evenodd; }
.page-arrow .arrow-2 {
fill: none;
stroke-width: 2px; }
.page-arrow:hover {
animation: bounce 1.5s infinite; }
@media screen and (min-width: 1200px) {
.page-arrow {
display: block; } }
.open-tooltip {
z-index: 9999; }
#journey-2 .wave-content .desktop-wave .large-wave {
transform: none;
margin-left: -34%;
width: 115%;
margin-left: -30%; }
#journey-2 .page-arrow {
right: auto;
left: 90px;
transform: rotate(180deg); }
#journey-2 .page-arrow:hover {
animation: bouncereverse 1.5s infinite; }
/*
* ------------------------------------------
* *-----------------------------
* 5.3 - Journey / Discover
* *-----------------------------
* ------------------------------------------
*/
.discover .header .header-button {
display: none;
animation: 350ms fade_in_down ease-in-out;
animation-fill-mode: forwards;
animation-delay: 400ms;
opacity: 0;
top: 5px; }
.discover .header.nav-open .header-button {
display: block; }
.discover .discover-content {
margin: 0 auto;
left: 0;
right: 0;
position: absolute; }
.discover h1 {
line-height: 0.8em;
padding-top: 20px; }
.discover p {
font-size: 1.2em;
font-weight: 500;
margin-bottom: 1em;
margin-top: 0.25em;
filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.9)); }
@media (max-height: 340px) {
.discover p {
font-size: 0.8em;
margin-bottom: 0.5em; } }
.discover .video-block {
display: block;
margin: 0 auto;
width: 300px;
height: 150px;
background: #252525;
position: relative; }
@media (min-width: 500px) {
.discover .video-block {
width: 450px;
height: 225px; } }
@media (max-height: 420px) {
.discover .video-block {
width: 350px;
height: 150px; } }
@media (max-height: 340px) {
.discover .video-block {
width: 240px;
height: 100px; } }
@media screen and (min-width: 768px) {
.discover .video-block {
width: 550px;
height: 275px; } }
.discover .video-block .play-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0; }
.discover .video-block .play-button button {
margin-top: 0; }
.discover .video-block .play-button button:hover {
background: none; }
.discover .video-block .play-button .btn {
padding: 0;
border-radius: 0;
border: 0;
height: inherit; }
.discover .video-block .play-button .btn__content {
padding: 0; }
.discover .video-block .play-button .btn__content:before {
content: none; }
@media (max-height: 420px) {
.discover .video-block .play-button .btn__content {
width: 80px; } }
.discover .video-block .play-button .btn--raised {
box-shadow: none; }
.discover .video-block .play-button .play-1, .discover .video-block .play-button .play-2 {
fill: none;
stroke: #ccc;
stroke-width: 5.938px; }
.discover .video-block .play-button .play-1 {
filter: url(#filter); }
.discover .video-block .play-button .play-2 {
fill-rule: evenodd;
filter: url(#filter-2); }
.discover .video-block .play-button:hover {
cursor: pointer; }
.discover button {
margin-top: 10px; }
@media (max-height: 320px) {
.discover button {
font-size: 0.8em; } }
.discover .dialog__container {
z-index: 9999;
width: 100vw; }
.discover .dialog--fullscreen > .card {
height: 100vh; }
.discover .dialog--active {
background: rgba(60, 60, 60, 0.9); }
.discover .card__actions button {
position: absolute;
border: none;
box-shadow: none;
transition: none;
width: 34px;
max-width: 34px;
min-width: 34px;
padding: 0;
margin: 0 auto;
height: 34px;
right: 28px;
left: auto;
top: 20px;
font-size: 1.6em; }
.discover .card__actions button.btn {
transition: none; }
.discover .card__actions button:hover {
background: none; }
.discover .card__actions button:hover .fa {
color: #00a9f1; }
.discover .card__actions button .btn__content {
transition: none;
width: 34px;
height: 34px;
margin: 0 auto;
display: block;
position: relative;
text-align: center;
padding: 0;
display: block; }
.discover .card__actions button .btn__content:before {
content: none; }
.discover .card__actions button .btn__content .dashicons {
font-size: 34px;
width: 34px;
height: 34px; }
.discover .card__text {
position: absolute;
top: 50%;
transform: translateY(-50%);
overflow: hidden; }
.discover .card__text iframe {
max-width: 100%;
margin: 0 auto;
max-height: 200px; }
@media screen and (min-width: 768px) {
.discover .card__text iframe {
max-height: 100%; } }
@media (max-height: 420px) {
.discover .card__text iframe {
max-width: 400px; } }
.discover .discover-overlay {
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden; }
.discover .discover-overlay .wave-1, .discover .discover-overlay .wave-2, .discover .discover-overlay .wave-3, .discover .discover-overlay .wave-4 {
position: absolute;
width: 200px;
display: none;
top: 5%;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
animation: wave_bounce 5s infinite;
animation-direction: alternate; }
@media (min-width: 650px) {
.discover .discover-overlay .wave-1, .discover .discover-overlay .wave-2, .discover .discover-overlay .wave-3, .discover .discover-overlay .wave-4 {
width: 275px;
display: block; } }
@media (min-width: 1400px) {
.discover .discover-overlay .wave-1, .discover .discover-overlay .wave-2, .discover .discover-overlay .wave-3, .discover .discover-overlay .wave-4 {
width: 350px; } }
@media (max-height: 450px) {
.discover .discover-overlay .wave-1, .discover .discover-overlay .wave-2, .discover .discover-overlay .wave-3, .discover .discover-overlay .wave-4 {
display: none; } }
.discover .discover-overlay .wave-2 {
right: auto;
top: 30%;
left: -200px;
display: block;
animation-delay: 0.25s; }
.discover .discover-overlay .wave-3 {
right: -100px;
top: 50%;
left: auto;
display: block;
animation-delay: 0.5s; }
@media (min-width: 650px) {
.discover .discover-overlay .wave-3 {
right: 40px;
top: 45%; } }
.discover .discover-overlay .wave-4 {
right: auto;
top: 85%;
left: -50px;
display: block;
animation-delay: 0.75s; }
/*
* ------------------------------------------
* *-----------------------------
* 5.4 - IE
* *-----------------------------
* ------------------------------------------
*/
.no-flexboxlegacy .journey-content .wave-content .mobile-wave .large-wave {
font-size: 42em; }
.no-flexboxlegacy .journey-content .wave-content .desktop-wave .large-wave {
margin-left: 0.45em;
width: 1em;
height: 1em;
font-size: 55em;
transform: rotateX(180deg) translateY(31%);
margin-top: 0; }
.no-flexboxlegacy .journey-content .wave-content .wave-tooltip-block .wave-tooltip .btn.open-tooltip .tooltip-open {
transform: translateY(-50%); }
.no-flexboxlegacy #journey-2 .wave-content .desktop-wave .large-wave {
width: 1em;
height: 1em;
font-size: 72em;
margin-left: -0.22em;
transform: translateY(-50%); }
@media (min-width: 1400px) {
.no-flexboxlegacy .journey-content .wave-content .desktop-wave .large-wave {
margin-left: 0.55em; }
.no-flexboxlegacy .journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-1 {
left: 30%; }
.no-flexboxlegacy .journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-4 {
left: 20%; }
.no-flexboxlegacy .journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-5 {
left: 38%; }
.no-flexboxlegacy .journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-6 {
left: 72%; }
.no-flexboxlegacy #journey-2 .journey-content .wave-content .desktop-wave .large-wave {
margin-left: -0.2em; } }
@media (min-width: 1600px) {
.no-flexboxlegacy .journey-content .wave-content .desktop-wave .large-wave {
font-size: 65em; }
.no-flexboxlegacy #journey-2 .journey-content .wave-content .desktop-wave .large-wave {
font-size: 85em; } }
@media (min-width: 1900px) {
.no-flexboxlegacy .journey-content .wave-content .desktop-wave .large-wave {
font-size: 73em; }
.no-flexboxlegacy .journey-content .wave-content .desktop-wave .wave-tooltip-block .wave-tooltip#tooltip-6 {
left: 68%; }
.no-flexboxlegacy #journey-2 .journey-content .wave-content .desktop-wave .large-wave {
font-size: 90em; } }
@media (min-width: 2000px) {
.no-flexboxlegacy .journey-content .wave-content .desktop-wave .large-wave {
font-size: 78em; }
.no-flexboxlegacy #journey-2 .journey-content .wave-content .desktop-wave .large-wave {
font-size: 96em; } }