/*
****************************************************************
First Screen Styles
****************************************************************
*/


/*--------------------------------------------------------------
=== FONTS ===
-------------
Montserrat 400, 400i, 500, 500i, 600, 600i, 700, 700i
--------------------------------------------------------------*/
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.eot');
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
  url('../fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Montserrat-Regular.woff2') format('woff2'),
  url('../fonts/Montserrat-Regular.woff') format('woff'),
  url('../fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Italic.eot');
  src: local('Montserrat Italic'), local('Montserrat-Italic'),
  url('../fonts/Montserrat-Italic.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Montserrat-Italic.woff2') format('woff2'),
  url('../fonts/Montserrat-Italic.woff') format('woff'),
  url('../fonts/Montserrat-Italic.svg#Montserrat-Italic') format('svg');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Medium.eot');
  src: local('Montserrat Medium'), local('Montserrat-Medium'),
  url('../fonts/Montserrat-Medium.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Montserrat-Medium.woff2') format('woff2'),
  url('../fonts/Montserrat-Medium.woff') format('woff'),
  url('../fonts/Montserrat-Medium.svg#Montserrat-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-MediumItalic.eot');
  src: local('Montserrat Medium Italic'), local('Montserrat-MediumItalic'),
  url('../fonts/Montserrat-MediumItalic.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Montserrat-MediumItalic.woff2') format('woff2'),
  url('../fonts/Montserrat-MediumItalic.woff') format('woff'),
  url('../fonts/Montserrat-MediumItalic.svg#Montserrat-MediumItalic') format('svg');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-SemiBold.eot');
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
  url('../fonts/Montserrat-SemiBold.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Montserrat-SemiBold.woff2') format('woff2'),
  url('../fonts/Montserrat-SemiBold.woff') format('woff'),
  url('../fonts/Montserrat-SemiBold.svg#Montserrat-SemiBold') format('svg');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-SemiBoldItalic.eot');
  src: local('Montserrat SemiBold Italic'), local('Montserrat-SemiBoldItalic'),
  url('../fonts/Montserrat-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Montserrat-SemiBoldItalic.woff2') format('woff2'),
  url('../fonts/Montserrat-SemiBoldItalic.woff') format('woff'),
  url('../fonts/Montserrat-SemiBoldItalic.svg#Montserrat-SemiBoldItalic') format('svg');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.eot');
  src: local('Montserrat Bold'), local('Montserrat-Bold'),
  url('../fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Montserrat-Bold.woff2') format('woff2'),
  url('../fonts/Montserrat-Bold.woff') format('woff'),
  url('../fonts/Montserrat-Bold.svg#Montserrat-Bold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-BoldItalic.eot');
  src: local('Montserrat Bold Italic'), local('Montserrat-BoldItalic'),
  url('../fonts/Montserrat-BoldItalic.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Montserrat-BoldItalic.woff2') format('woff2'),
  url('../fonts/Montserrat-BoldItalic.woff') format('woff'),
  url('../fonts/Montserrat-BoldItalic.svg#Montserrat-BoldItalic') format('svg');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/*--------------------------------------------------------------
=== GLOBAL VAR ===
--------------------------------------------------------------*/
:root {
  --font-family-base:  'Montserrat', Arial, Helvetica, sans-serif;

  --text-color:           var(--gray); /* + */
  --text-color-w-dark-bg: white; /* + */
  --link-color:           var(--blue); /* + */

  --blue:             #1585CB; /* + */
  --green:            #2FCBAE; /* + */
  --green-bright:     #54EDD1; /* + */
  --orange:           #F8BF2F; /* + */

  --gray:             #303030; /* + */
  --gray-cool:       #BFBFBF; /* + */
  --gray-light:       #F5F5F5; /* + */

  --blue-gradient:    linear-gradient(214.36deg, #38A5DC 9.51%, #1585CB 47.54%, #006CB0 80.13%); /* + */
  --blue-gradient-sm:    linear-gradient(161.04deg, #38A5DC 7.34%, #1585CB 93.19%); /* small box */  /* + */
  --blue-light-gradient: linear-gradient(180deg, rgba(47, 203, 174, 0) 0%, rgba(47, 203, 174, 0.2) 100%); /* + */


  --gap:              2rem; /* + */
  --section-pt:       7rem; /* + */
  --section-pb:       6.6rem; /* + */
  --brdrd:            5rem; /* + */
  --brdrd-sm:         3.5rem; /* + */

  --mb-base:          2.8rem; /* == margin-bottom to <p> */ /* + */
  --mv:               calc(var(--mb-base) * 3.75); /* ? NEEDS to be checked */
  --mv-box:           calc(var(--mb-base) * 10); /* ? NEEDS to be checked */

  --header-height:            60px; /* + */
  --header-sticky-height:    60px; /* + */

  @media (min-width: 768px) {
    --gap:            2rem;
    --section-pt:       12rem; /* + */
    --section-pb:       11rem; /* + */
    --brdrd:            10rem; /* + */
    --brdrd-sm:         7rem; /* + */

    --header-height:          127px; /* + */
    --header-sticky-height:    60px; /* + */
  }
  @media (min-width: 1440px) {
    --gap:             2.8rem;
  }

/* font-size */
  --body-copy: 1.8rem; /* + */

  --h2: 5rem; /* + */
  --h3: 2.6rem; /* + */
  --h4: 2.6rem; /* + */

  --footer-copy:    1.6rem; /* + */

  --call-out-copy:  1.8rem; /* hero */
  --intro-text:     2rem; /* + */
  --name:           1.8rem; /* + */

  @media (min-width:768px) {
    --body-copy: 2.2rem; /* + */

    --h2: 6.4rem; /* + */
    --h3: 4rem; /* + */
    --h4: 3.6rem; /* + */

    --footer-copy: 2rem; /* + */

    --call-out-copy: 2.8rem; /* + */
    --intro-text: 2.5rem; /* + */
    --name:           2.4rem; /* + */
  }
  @media (min-width:890px) and (max-width: 1119.98px) {
    --name:           2.1rem; /* + */
  }
}


/*--------------------------------------------------------------
=== GLOBAL RESET ===
--------------------------------------------------------------*/
* { margin:0; padding:0; box-sizing:border-box;}
.clearfix { zoom:1;}
.clearfix:after { content:" "; display:table; clear:both;}
header, footer, section, nav, article, aside, details, figcaption, figure, hgroup, main, menu, summary { display:block;}
button { cursor:pointer;}
:focus { outline:none;}
button::-moz-focus-inner { border: 0;}

img, table { border: 0;}
img { display: block; max-width: 100%; height: auto;}
ul { list-style: none;}

/*  FIX for laptops with scale screen 125% preset  */
@media (-webkit-device-pixel-ratio: 1.25) {
  :root {
    zoom: 0.8; }
}


/*--------------------------------------------------------------
=== BASE LAYOUT ===
--------------------------------------------------------------*/
body { min-height: 100vh; display: flex; flex-direction: column; width: 100%;}
#page, main.site-main, body > .container-fluid { flex-grow: 1;}
.site-main { overflow: hidden;}

.section { padding-top: var(--section-pt); padding-bottom: var(--section-pt);}
.row { display: flex; width: 100%; gap: var(--gap);}
.col { min-height: 1px; }
.nowrap { white-space: nowrap;}
.space-between{ justify-content: space-between;}

.mv-top { margin-top: var(--mv);}
.mv-bot { margin-bottom: var(--mv);}
.mv-box-t { margin-top: var(--mv-box);}
.mv-box-b { margin-bottom: var(--mv-box);}

.mt-0, .mv-top-0 { margin-top: 0!important;}
.mb-0, .mv-bot-0 { margin-bottom: 0!important;} /* + */


@media (max-width: 767.98px) {
  .container { padding-left: 16px; padding-right: 16px;}
}
@media (min-width: 768px) {
  .container { width: 100%; max-width: calc(1360px + 50px * 2); margin-left: auto; margin-right: auto; padding-left: 50px; padding-right: 50px;}
}


/*--------------------------------------------------------------
=== TYPOGRAPHY & COLORS ===
--------------------------------------------------------------*/
html { font-size: 10px; background: #fff;}
body, td, th, input, select, textarea, button { font: 400 var(--body-copy)/1.6em var(--font-family-base); color: var(--text-color);}

h1, .h1 {}
h1:not(:last-child), .h1:not(:last-child) {}
h1:not(:first-child), .h1:not(:first-child) {}
h2, .h2 {}
h2:not(:last-child), .h2:not(:last-child) {}

.call-out-copy { font-size: var(--call-out-copy); line-height: 1.5; font-weight: 600;} /* hero-text + ? */

/*--------------------------------------------------------------
=== HEADER ===
--------------------------------------------------------------*/
header { z-index: 100; position: fixed; top: 0; width: 100%; transition: .25s ease-in-out;}
.popup-open header { z-index: 0;}
header .container { display: flex; justify-content: space-between; align-items: center; height: var(--header-height); transition: .25s ease-in-out;}
#logo { z-index: 101; position: relative;}
@media (max-width: 767.98px) {
  header {}
  #logo { width: 20rem; min-width: 20rem;}
}
@media (min-width: 768px) {
  #logo { width: 27.1rem; min-width: 27.1rem;}
}
@media (min-width: 1160px) {
  header .container { padding-top: 1rem;}
}


/*--------------------------------------------------------------
=== NAVIGATION ===
--------------------------------------------------------------*/
#nav li { padding-bottom: 0!important;}
#main-nav { display: flex; justify-content: flex-end; align-items: flex-start;}
#main-nav a { display: block; font-size: 1.6rem; line-height: 1.2; color: white;}
#main-nav a:hover, #main-nav a:focus { color: var(--blue);}

#main-nav > li > a { font-size: 1.8rem; line-height: 1.4; font-weight: 600; position: relative;}


.nav-control { z-index: 100; position: absolute; right: 20px; margin-top: -20px; display: flex; gap: 6px; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 40px; cursor:pointer;
  transform: rotate(0deg); transition: .5s ease-in-out;}
.nav-control > span { display:block; width: 100%; height: 3px; border-radius: 3px; background: white; transform: rotate(0deg); transition: .25s ease-in-out;}

@media (max-width:999px) {
  #nav { z-index: 100; width: 170px;}
  .menu-menu-container { height: 0; overflow: hidden; position: absolute; left: 0; right: 0; top: 0; background: black; transition: .25s ease-in-out;}
}
@media (min-width:1000px) {
  #nav { flex-grow: 1;}
  #main-nav { position: relative; margin-right: -16px;}
  #main-nav > li { position: relative; height: 100%;}
  #main-nav > li > a { padding: 0 18px; text-shadow: 0 0 8px rgb(0, 0, 0), 0 0 8px rgb(0, 0, 0);}

  .nav-control { display: none;}
}


/*--------------------------------------------------------------
=== section HERO ===
--------------------------------------------------------------*/
.hero { position: relative; padding-top: var(--header-height); color: white; background: black; overflow: hidden;}
.hero .container { z-index: 1; position: relative;}

.hero-img img { z-index: 0; position: absolute; /*left: 0;*/ right: 0; bottom: 0; width: 100%; height: auto;}
.hero-title { color: var(--green);}
.hero-title.line-1 { line-height: 1.3; font-weight: 700;}
.hero-title.line-2 { line-height: 1.3; font-weight: 500;}
.hero-text { position: relative;}
.hero-text:before { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--green); content: "";}


@media (max-width:767.98px) and (orientation: portrait) {
  .hero { padding: 12rem 0 106vw;}
  .hero-title.line-1 { font-size: 3.6rem;}
  .hero-title.line-2 { font-size: 2.4rem;}
  .hero-text { margin-top: 3rem; padding: .5rem 0 .5rem 2.4rem;}
}
@media (width:768px), (min-width:768px) and (orientation: portrait) {
  .hero { padding: 18rem 0 50vw;}
  .hero-title.line-1 { font-size: 3.6rem;}
  .hero-title.line-2 { font-size: 2.4rem;}
  .hero-text { margin-top: 3rem; padding: .5rem 0 .5rem 2.4rem;}
}
@media (width:768px) {

}
@media (min-width:768px) and (orientation: landscape) {
  .hero .container { height: 911px; display: flex; flex-direction: column; justify-content: center;}
  .hero .container > * { max-width: 730px;}
  .hero-title.line-1 { font-size: 7.5rem;}
  .hero-title.line-2 { font-size: 5rem;}
  .hero-text { margin-top: 8rem; padding: 2rem 0 2rem 5.3rem;}
  .hero-text:before { width: 4px; border-radius: 4px;}
}
@media (min-width:1450px) and (max-width: 1699.98px) and (orientation: landscape) {
  .hero-img img { max-width: none; width: 1800px; left: auto; right: calc(5vw / -0.85);}
}
@media (min-width:768px) and (max-width: 1449.98px) and (orientation: landscape) {
  .hero .container { height: 811px;}
  .hero-img img { max-width: none; width: 1650px; right: calc(5vw / -0.85);}
  .hero-title.line-1 { font-size: 6.5rem;}
  .hero-title.line-2 { font-size: 4rem;}
  .hero-text { font-size: 2.6rem;}
}
@media (min-width:768px) and (max-width: 1209.98px) and (orientation: landscape) {
  .hero-img img { right: calc(20vw / -0.85 );}
  .hero .container > * { max-width: 54%;}
}
/*  FIX for laptops with scale screen 125% preset  */
@media (-webkit-device-pixel-ratio: 1.25) and (min-width:768px) {
  .hero-img img { right: 0;}
}



/*--------------------------------------------------------------
=== section INTRO ===
--------------------------------------------------------------*/
.intro-text, .intro-accent { font-size: var(--intro-text); line-height: 1.6; color: var(--gray);}
.intro-accent { font-weight: 600;}







/*--------------------------------------------------------------
=== ANIMATION ===
--------------------------------------------------------------*/
.animate-me {
  -webkit-animation-duration: 1s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes slideInTop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideInTop {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.animate-in {
  -webkit-animation-name: slideInTop;
  animation-name: slideInTop;
}