/* fonts */

@font-face {
  font-family:"eurostar";
  src:url("fonts/eurostarblackextended.eot?") format("eot"),
  url("fonts/eurostarblackextended.woff") format("woff"),
  url("fonts/eurostarblackextended.ttf") format("truetype"),
  url("fonts/eurostarblackextended.svg#EurostarBlackExtended") format("svg");
  font-weight:normal;font-style:normal;
}
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Inter-ExtraLight.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Inter-Light.woff2?") format("woff2");
}
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Inter-SemiBold.woff2") format("woff2");
}


/* native */

body {background-color: #100f10; color: white; font-size: 20px;}
h2 {font-family: eurostar, sans-serif; text-transform: uppercase; font-size: 4em; letter-spacing: inherit; line-height: normal;}
p {font-family: 'Inter', sans-serif; font-weight: 300; font-size: 1em; letter-spacing: 0.1em;}
a {
  text-decoration-color: #2d5491;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
}
a:hover {
  text-decoration-color: #fff;
}
button {
  border: none;
  align-items: center;
  background: linear-gradient(-45deg, rgba(0,0,0,0.05), rgba(255,255,255,0.05));
  box-shadow: 0.6em 0.6em 0.8em 0 rgba(0, 0, 0, 0.15), -0.4em -0.4em 0.6em 0 rgba(255, 255, 255, 0.3);
  border-radius: 1.7em;
  padding: 1em 4em;
  justify-content: center;
  margin: 3em;
  color: #979b99;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.3em; letter-spacing: 0.1em;
}
button:active {
  box-shadow: inset 0.3em 0.3em 0.4em 0 rgba(0, 0, 0, 0.15), inset -0.2em -0.2em 0.6em 0 rgba(255, 255, 255, 0.3);
}


/* animations */

[data-aos="appear-1"] {
  opacity: 0;
  letter-spacing: 0.6em;
  transition-property: opacity, letter-spacing;
}
[data-aos="appear-1"].aos-animate {
  opacity: 1;
  letter-spacing: 0.3em;
}

[data-aos="appear-2"] {
  opacity: 0.2;
  transform: translateY(0.2em);
  transition-property: opacity, transform;
}
[data-aos="appear-2"].aos-animate {
  opacity: 1;
  transform: translateY(0em);
}

#hero {
    opacity: 0;
    animation: fadeInAnim ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

    width: 100%;
    top:0;
    left:0;
    position: absolute;
}
#herostill {
    opacity: 0;
    animation: fadeInAnim ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}
.herologo {
    transform: rotate(-5deg);
    left: 49%;
    top: 9%;
    opacity: 0;
    animation: fadeInAnim ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 0.2s;
}
.herologo img {
  margin-bottom: 3em;
  width: 35em;
}
.herodesc {
    left: 18%;
    bottom: 14%;
    opacity: 0;
    animation: fadeInAnim ease 3s ;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

@keyframes fadeInAnim {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}
@keyframes fadeOutAnim {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
     }
}


/* custom classes */

h1, .pointer {font-family: 'Jura', sans-serif; position: absolute; font-size: 1.5em; letter-spacing: 0.05em; line-height: normal;}
h1 {text-transform: uppercase; margin: 0; }
.rounded-top {border-radius: 2em 2em 0 0;}
.rounded-btm {border-radius:  0 0 2em 2em;}
.atm-ip {
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  font-feature-settings: 'zero', 'ss02';
  background: white;
  color: black;
  padding: 0.3em 1em;
  line-height: normal;
  border-radius: 1.5em;
  margin-bottom: 0.2em;
}
.w3-text-black a {
  text-decoration-color: #849dc2;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
}
.w3-text-black a:hover {
  text-decoration-color: #000;
}
.k-img-2, .k-img-3, .k-img-4,.k-img-13, .k-img-14, .k-img-15 {
  width: 100%;
  object-fit: cover;
}
.k-img-2 {
  height: 85em;
  object-position: 100% 100%;
}
.k-img-3 {
  height: 55em;
  object-position: 100% 100%;
}
.k-img-4 {
  height: 55em;
  object-position: 100% 100%;
}
.k-img-8 + div {
  height: 90%;
  margin-top: 2%;
}
.k-img-12-cont {
  height:90%;
  margin-top: 14%;
  z-index: 1;
}
.k-img-13 {
  height: 55em;
  object-position: 100% 100%;
}
.k-img-14 {
  height: 58em;
  object-position: 100% 0%;
}
.k-img-15 {
  height: 60em;
  object-position: 100% 100%;
}
.k-txt-2 {
  width: 100%; top: 8%;
}
.k-txt-3 {
  right: 5%; bottom: 5%;
}
.k-txt-4 {
  max-width: 54%; left: 5%; bottom: 5%;
}
.k-txt-5 {
  width: 100%; bottom: 6%;
}
.k-txt-8 {
  width: 37%; right: 7%;
}
.k-txt-11 {
  width: 26%; left: 5%;
}
.k-txt-13 {
  width: 37%;
}
.k-txt-14 {
  width: 40%; right: 5%; bottom:8%;
}
.k-txt-15 {
  width: 60%; left: 5%; top: 5%;
}

.sharebutts {
  margin-top: 4em;
}

.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block
}
.resp-sharing-button__link {
  text-decoration: none;
  color: #bfc1c0;
  margin: 0.5em;
  line-height: 1em;
}
.resp-sharing-button {
  background-color: #000;
  border-radius: 1em;
  transition: 225ms ease-out;
  padding: 0.5em 0.75em;
}
.resp-sharing-button:hover {
  background-color: #2d5491;
}
.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin: 0;
  vertical-align: middle
}
/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #bfc1c0;
  fill: none
}
/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #bfc1c0;
  stroke: none
}



/* responsive */

  .w3-content{ max-width: 1920px; }
  .storebadge{ height: 3.5em; }

@media (max-width: 2000px){
  body {font-size: 15px;}
  .w3-content{ max-width: 1440px; }
  .storebadge{ height: 3em; }
}

@media (max-width: 1440px) {
  /*body {font-size: 12px;}*/
  body {font-size: 1vw;}
  .w3-content{ width: 90%; }
  .pointer {
    margin-bottom: -1em;
  }
}

@media (max-width: 1024px) {
  .resp-sharing-button__link {
    margin: 1.5em;
  }
  .resp-sharing-button__icon svg {
    width: 3em;
    height: 3em;
  }
  .resp-sharing-button {
    padding: 1.5em 1.75em;
    border-radius: 2.5em;
  }
}

@media (max-width: 600px) {
  h2 { font-size: 5em; }
  p { font-size: 1.8em; }
  .w3-content{ width: 100%; }
  .k-img-2, .k-img-3, .k-img-4,.k-img-13, .k-img-14, .k-img-15 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /*.w3-half img { height: 60em; width: 100%; object-fit: cover;}*/
  .half-l { padding: 4px 0 2px;}
  .half-r { padding: 2px 0 4px;}
  .k-img-11 {
    padding: 0 5%;
    margin-top: 25em;
  }
  .k-img-8 {
    height: 130em;
    width: 100%;
  }
  .k-img-8 + div {
    height: 67%;
    margin-top: 20%;
  }
  .k-img-12-cont {
    height: 76%;
    margin-top: 25%;
    padding: 0 4em;
  }
  .pointer {
    font-size: 2em;
    margin-bottom: -4em;
  }
  .k-txt-2 {
    top: 10%;
  }
  .k-txt-3 {
    bottom: 60%;
  }
  .k-txt-4 {
    max-width: 95%;
    bottom: 66%;
  }
  .k-txt-5 {
    bottom: 4%;
  }
  .k-txt-8 {
    width: 71%;
    left: 8%;
    top: 16%;
  }
  .k-txt-11 {
    top: 13%;
    width: 100%;
    text-align: center;
    left: 0;
    padding: 0 22em;
  }
  .k-txt-13 {
    top: 22%;
    left: 5%;
    width: 69%;
  }
  .k-txt-14 {
    width: 70%;
  }
  .k-txt-15 {
    top: 8%;
  }
  #hero, #herostill {
    width: 100%;
    height: 120em;
    object-position: 32%;
    object-fit: cover;
  }
  .herologo {
    left: 43%;
    top: 5%;
  }
  .herologo img {
    margin-bottom: 3em;
    width: 48em;
  }
  h1 {
    font-size: 2.5em;
  }
  .herodesc {
    left: 8%;
    bottom: 12%;
  }
}

@media (min-width: 601px) {
  .w3-col.m6, .w3-half {
    width: 50%;
  }
  .half-l { padding: 4px 2px 4px 0; }
  .half-r { padding: 4px 0 4px 2px; }
}