@charset "UTF-8";

/* -----  Global  --------------------------------------------------------- */
html {
  background: #000 url('../../images/background@3x.jpg');
  background-attachment: fixed;
  background-size: cover;
}
body {
  overflow: hidden;
}
main {
  padding-top: 200px;
  opacity: 1;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ /* Firefox < 16 */ /* Internet Explorer */ /* Opera < 12.1 */
            animation: fadein 2s;
}

/* Reason */
.reason {
  position: relative;
  width: 100%;
}
.reason .image {
  position: absolute;
  left: 0;
  width: 35%;
}
.reason:nth-child(even) .image {
  right: 0;
  left: auto;
  top: -7vw;
}
.reason:nth-child(3) .image {
  width: 40%;
  position: static;
  float: left;
}

.reason .content {
  max-width: 400px;
  width: 40%;
  margin-left: 40%;
  margin-bottom: 100px;
  padding-top: 50px;
  position: relative;
}
.reason:nth-child(even) .content {
  margin-left: 25%;
  margin-bottom: 150px;
  padding-top: 100px;
}
.reason:last-child .content {
  margin-left: 45%;
  padding-top: calc(100px + 5vw);
}
.reason .content h3 {
  text-transform: uppercase;
  font-size: 1.5em;
  font-family: 'Anton', sans-serif;
}
.reason:nth-child(1) .content h3 {
  color: #F7C470;
}
.reason:nth-child(2) .content h3 {
  color: #FF9C2D;
}
.reason:nth-child(3) .content h3 {
  color: #FF7800;
}

.reason .content::after {
  content: '';
  width: calc(100vw - (((100vw - 48rem) / 2) + (48rem * .25) + 27vw));
  height: 5px;
  background: #ff9c2d;
  box-shadow: 1px 1px 1px 1px #000000;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.reason:nth-child(3) .content::after {
  width: calc((((100vw - 48rem)/2) + 400px + (48rem * .45)) - (100vw * .315));
  right: 0;
  left: auto;
  top: 5vw;
  background: #ff7800;
}
.reason:nth-child(1) .content::after {
  display: none;
}
@media(max-width: 1200px) {
  .reason .content::after {
    width: calc(100vw - (20px + ((100vw - 40px) * .25) + 27vw));
    height: 3px;
  }
}
@media(max-width: 1060px) {
  .reason:nth-child(3) .content::after {
    width: calc((((100vw - 48rem)/2) + ((100vw - 40px) * .4) + (48rem * .45)) - (100vw * .315));
  }  
}
@media(max-width: 960px) {
  .reason .content {
    width: auto;
  }
  .reason:nth-child(even) .content {
    margin-left: 0;
  }
  .reason .content::after {
    display: none;
  }
}
@media(max-width: 600px) {
  .reason .image {
    position: static;
    width: 65%;
  }
  .reason:nth-child(even) .image {
    position: absolute;
    top: -70px;
  }
  .reason:nth-child(even) {
    margin-top: 100px;
  }
  .reason:nth-child(even) .content {
    margin-bottom: 50px;
    padding-top: 275px;
  }
  .reason .content {
    margin: auto;
    max-width: 500px;
  }
  .reason:last-child .content {
    margin-left: auto;
    padding-top: 0px;
  }
  .reason:nth-child(3) .image {
    width: 80%;
  }
}

@media  screen\0 {
  .wrapper {
    margin: auto;
  }
}