:root {
  --black:  HSLA(109, 0%, 13%, 1);
  --yellow: HSLA(56, 100%, 50%, 1);
  --white:  #f5f5f5;

  height: 100%;
  line-height: 1.5;
  color: var(--black);
  box-sizing: border-box;
  font-family: 'Superclarendon', serif;
}

@font-face {
  font-family: 'Superclarendon';
  font-style: normal;
  font-weight: bold;
  src: url('fonts/superclarendon-rg-bold-587272c8dce6b.woff') format('woff');
}


@font-face {
  font-family: 'Superclarendon';
  font-style: normal;
  font-weight: normal;
  src: url('fonts/superclarendon-rg-587270e85c031.woff') format('woff');
}



@keyframes sun {
  50% {
    transform: translate3d(-50%, -50%, 0) scale(1.2);
  }
}

@keyframes wave {
  50% {
    transform: translateX(-10vw) rotate(1deg);
  }
}

@keyframes float {
  50% {
    transform: translate3d(-20px, -20px, -20px) rotate(-2deg);
  }
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: var(--white);
  overflow: hidden;
}

.logo {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 100px;
  z-index: 30;
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.circle {
  position: absolute;
  top: 10%;
  left: 80%;
  margin: auto;
  width: 200px;
  height: 200px;
  background-color: var(--yellow);
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform: translate3d(-50%, -50%, 0) scale(1);
  animation: 30000ms ease-in-out sun infinite;
}


.owl > * + * {
  margin-top: 1.5rem;
}

label {
  display: block;
  font-size: 12pt;
  line-height: 1.125;
  font-weight: bold;
}

label + input {
  margin-top: 0.5rem;
}

input[type='email'],
input[type='text'] {

  border: 2px solid var(--black);
  min-height: 48px;
  display: block;
  width: 100%;
  padding: 0 1rem;
  font-size: 18pt;
  line-height: 1.5;
  font-family: 'Superclarendon', serif;
}

button {
  transition: all 200ms;
  background-color: var(--black);
  color: var(--white);
  min-height: 48px;
  transform: rotate(-2deg);
  border: none;
  font-size: 18pt;
  line-height: 1.5;
  padding: 0 1rem;
  font-family: 'Superclarendon', serif;
  cursor: pointer;
}

button:hover,
button:active,
button:focus {
  color: var(--yellow);
}

.ship {
  display: block;
  width: 180px;

}

.pattern {
  background-image: url("img/wave.png");
  background-size: 40px 12px;
  position: absolute;
  top: 70%;
  height: 50vh;
  width: 150vw;
  animation: 20000ms ease-in-out wave infinite;
  transform: translateX(0) rotate(-1deg);
}

.bottle {
  position: absolute;
}
.bottle > img {
  width: 80px;
}

.float {
  animation-duration: 5000ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: float;
}

.slide {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.slide-1 .title {
  position: absolute;
  z-index: 20;
  right: 0;
  top: 0;
  text-align: right;
  padding: 0 2em 1em 0;
  line-height: 1.125;
}

.slide-1 h1 {
  font-size: 21pt;
  
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 0;
}

.slide-1 h2 {
  /* font-size: 32pt; */
  margin: 0;
}


.form {
  position: absolute;
  width: 100%;
  top: 53%;
  left: 50%;
  padding: 1rem 1.5rem;
  transform: translate3d(-50%, -50%, 0);
  background-color: var(--yellow);
}

.form h2 {
  margin: 0;
  padding-bottom: 2.5rem;
}


.form-action {
  text-align: center;
}

.feedback {
  text-align: center;
}

.download {
  text-align: center;
  margin-bottom: 1.5rem;
}

.download a {
  color: #000;
}

@media screen and (min-width: 960px) {

  .slide {
    display: flex;
  }

  .split > div {
    position: relative;
    width: 50%;
  }

  .circle {
    width: 62.5vmin;
    height: 62.5vmin;
    top: 50%;
    left: 50%;
  }

  .slide-1 h1 {
    font-size: 72pt;
  }

  .slide-1 h2 {
    font-size: 32pt;
  }

  .form {
    width: 50vmin;
    background-color: transparent;
  }

  .pattern {
    top: 50%;
  }

  .ship {
    transform: rotate(-8deg);
    position: absolute;
    right: 2.5rem;
    top: 2.15rem;
  }

  .download {
    margin-bottom: 0;
  }
}