@import "global.css";
@import './normalize.css';

@font-face {
  font-family: 'pp_neue_machinalight';
  src: url('ppneuemachina-light-webfont.woff2') format('woff2'),
       url('ppneuemachina-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'pp_neue_machinaregular';
  src: url('ppneuemachina-regular-webfont.woff2') format('woff2'),
       url('ppneuemachina-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'pp_neue_machinaultrabold';
  src: url('ppneuemachina-ultrabold-webfont.woff2') format('woff2'),
       url('ppneuemachina-ultrabold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

body {
  background-color: #fbf8ef;
  color: #111D4A;
}

/* Animations */
.fade-in { 
  animation: fadeIn 1s;
  animation-duration: 1000ms;
  animation-delay: 0ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1 }

@keyframes fadeIn {
  0%{
    transform: translateY(1vh);
    opacity: 0;
    }
    100%{
    transform: translateY(0px);
    opacity: 1;
    }
}

/* Text Style */


.paragraph {
  font-family: 'pp_neue_machinalight';
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 0.3px;
  padding-left: 25%;
  padding-right: 25%;
  margin-top: 40px;
  text-align: center;
  line-height: 28px;
}

.role {
  font-family: 'pp_neue_machinalight';
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.3px;
  padding-left: 25%;
  padding-right: 25%;
  text-align: center;
  line-height: 28px;
}

/* Position */
lottie-player {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    height: auto;
    }

/* Imgs */
.parallax {
  height: 700px;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  margin-bottom: 80px;
}

.thumbnail-image {
  display: block;
  width: 100%;
  height: auto;
}

.column {
  max-width: 50%;
  margin-left: 25%;
  margin-right: 25%;
}

.column img {
  margin-top: 8px;
  width: 100%;
  vertical-align: top;
}

.column video {
  margin-top: 8px;
  width: 100%;
  vertical-align: top;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  grid-gap: 10px;
}

/* Spacing */
.slice {
  margin-bottom: 80px;
  margin-top: 80px;
}
.slice.is-spaced {
  margin-bottom: 160px;
  margin-top: 160px;
}

/* Footer */
article footer {
  background: #ffffff;
  padding-top: 96px;
  padding-bottom: 96px;
  transition: .6s ease-in-out;
}

article footer:hover {
  background: transparent;
}

/* Logo */
#logo {
  position: fixed;
  left: 32px;
  top: 32px;
  transition: 0.3s;
}

#logo img {
  display: block;
}

#logo:hover,
#logo:focus,
#logo:active {
  transform: rotate(10deg);
  transition: .6s ease-in-out;
}


@media only screen and (max-width: 900px) {

  .title-1 {
    font-size: 56px;
    padding-left: 5%;
    padding-right: 5%;
  }
  .title-2 {
    font-size: 48px;
  }
  .title-3 {
    font-size: 40px;
  }

  .paragraph {
    font-size: 14px;
    padding-left: 15%;
    padding-right: 15%;
    line-height: 26px;
  }

  .column {
    max-width: 100%;
    align-items: center;
    margin-left: 15%;
    margin-right: 15%;
  }
  .wrapper {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
  }

  article footer {
    padding-bottom: 100px;
    padding-top: 100px;
  }
}