:root {
  --headline-font: 'Roboto', sans-serif;
  --body-font: 'Roboto', sans-serif;
}

/* Body */
body {
  margin: 0;
  padding: 0;
  font-family: var('Roboto', sans-serif);
  background-color: #F8F9FA;
  color: #222222;
  font-weight: 500;
  font-size: 0.76rem;
  overflow-x: hidden;
}

strong {
  font-weight: 800;
}

img {
  max-width: 100%;
}

p {
  font-size: 1.8rem;
  color: #222222;
  margin: 0 0 15px;
  line-height: 1.8;
  font-weight: 500;
  text-align: justify;

  /* Animation */
  opacity: 0;
  transform: translateX(-50px);
  animation: slideIn 0.8s forwards;
}

p:nth-of-type(1) { animation-delay: 0.2s; }
p:nth-of-type(2) { animation-delay: 0.4s; }
p:nth-of-type(3) { animation-delay: 0.6s; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--headline-font);
  font-weight: 800;
  text-align: justify;

  opacity: 0;
  transform: translateX(-50px);
  animation: slideIn 0.8s forwards;
}

h1 { animation-delay: 0.2s; }
h2 { animation-delay: 0.4s; }
h3 { animation-delay: 0.6s; }
h4 { animation-delay: 0.8s; }
h5 { animation-delay: 1s; }
h6 { animation-delay: 1.2s; }

/* Animation Keyframes */
@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Headline sizes */
h1 { font-size: 36px; color: #000; }
@media (min-width: 768px) { h1 { font-size: 70px; } }

h2 { font-size: 28px; color: #222; }
@media (min-width: 768px) { h2 { font-size: 55px; } }

h3 { font-size: 22px; color: #444; }
@media (min-width: 768px) { h3 { font-size: 45px; } }

h4 { font-size: 20px; color: #555; }
@media (min-width: 768px) { h4 { font-size: 40px; } }

h5 { font-size: 18px; color: #666; }
@media (min-width: 768px) { h5 { font-size: 36px; } }

h6 { font-size: 16px; color: #777; }
@media (min-width: 768px) { h6 { font-size: 32px; } }

/* Sections */
section { padding: 90px 15px; }

/* Buttons */
a.cta {
  padding: 12px 35px;
  text-align: center;
  text-decoration: none;
  background-color: #f72d3d;
  border: 1px solid #d41c2a;
  border-radius: 25px;
  color: #FFFFFF;
  text-transform: uppercase;
  display: inline-block;
  box-shadow: rgba(100, 100, 111, 0.8) 0px 7px 19px 0px;
  transition: all 0.8s ease;
  font-weight: 700;
  font-size: 1.125rem;
}

a.cta:hover {
  background-color: #f75763;
  border: 1px solid #3b1215;
  color: #000000;
}

/* Containers */
.container {
  max-width: 1100px;
  margin: 0 auto;
}

.container img {
  padding: 0.25rem;
  border: 1px solid #bdbdbd;
  border-radius: 0.25rem;
}

/* Banner */

.banner {
  /* Use a GIF instead of a static image */
  background: linear-gradient(90deg, rgba(241, 157, 0, 0.8), rgba(0, 0, 0, 0.5)), url(../img/BK.jpg) no-repeat;
  background-position: top right;
  background-size: cover;
}

.banner h1 {
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  font-weight: 800;
}

.banner p {
  color: #FFFFFF;
  font-size: 1.5rem;
  letter-spacing: 1.5px;
  font-weight: 500;
  text-shadow: 2px 2px 7px #222222;
}

/* Section styles */
.first {
  background-color: #FFFFFF;
  background-image: linear-gradient(315deg, #a7a8a8 0%, #E9EBEC 74%);
}

.first .container { max-width: 800px; }

.second {
  background-color: #fff8e6;
}

.second .container {
  display: block;
}

@media (min-width: 768px) {
  .second .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .second .container .left-img { flex-basis: 30%; }
  .second .container .right-content { flex-basis: 65%; }
  .second .container .right-content h2 { margin: 0; }
}

.second .container .right-content h2 { margin: 30px 0 0; }

.third {
  background-color: #e6f5fc;
}

@media (min-width: 768px) {
  .third .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.third .container .left-content { flex-basis: 68%; }
.third .container .right-img { flex-basis: 30%; }

.four {
  background-color: #c6fcb8;
}

.four .container { display: block; }

@media (min-width: 768px) {
  .four .container {
    display: flex;
    justify-content: space-between;
  }

  .four .container .member {
    flex-basis: 31%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .four .container .member h3 { font-size: 32px; }
}

.four .container .member {
  background-color: #c0c6fa;
  padding: 20px;
  margin: 0 0 60px;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.four .container .member .social {
  display: flex;
  justify-content: flex-start;
}

.four .container .member .social a img {
  border: none;
  max-width: 40px;
}

.five {
  background-color: #fcde88;
}

.five .container {
  max-width: 700px;
  box-shadow: rgba(0, 0, 0, 0.8) 0px 7px 29px 0px;
}

.five .container .video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.five .container .video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.six .container {
  text-align: center;
  max-width: 800px;
}

/* Footer */
footer {
  background-color: #222222;
  padding: 40px 15px;
}

footer .container { max-width: 600px; }

footer p {
  color: #FFFFFF;
  margin: 0;
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
}