@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;
}

/* Hexagon */
.border-hex {
  position: relative;
  width: 180px; 
  height: 103.92px;
  background-color: transparent;
  margin: 51.96px 0;
  border-left: solid 15px #ff7816;
  border-right: solid 15px #ff7816;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.border-hex:before,
.border-hex:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 127.28px;
  height: 127.28px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 11.3604px;
}
.border-hex:before {
  top: -63.6396px;
  border-top: solid 21.2132px #ff7816;
  border-right: solid 21.2132px #ff7816;
}
.border-hex:after {
  bottom: -63.6396px;
  border-bottom: solid 21.2132px #ff7816;
  border-left: solid 21.2132px #ff7816;
}

.steps-wrapper {
  margin-top: 100px;
}

.step {
  margin-top: -30px;
}
.step .design {
  position: relative;
}
.step .design h4 {
  position: absolute;
  left: 47%;
  top: 65px;
  font-size: 2em;
}
.step .design svg {
  width: 100%;
  display: block;
}

.step .content-wrapper {
  overflow: hidden;
  margin-top: -230px;
}
.step .content {
  width: 40%;
  max-width: 400px;
  height: 250px;
  margin-left: 30px;
  position: relative;
  z-index: 10;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.step:nth-child(even) .content {
  margin-left: calc(60% + 20px);
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.step:last-child .content {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.step:last-child .content-wrapper {
  height: 376px;
}

@media(max-width: 1140px) {
  .step:nth-child(even) .content {
    margin-left: 30px;
  }
  .step .design h4 {
    left: calc(100vw - 320px);
  }
}
@media(max-width: 940px){
  .step .content-wrapper {
    margin-top: calc(-1 * (1180px - 100vw));
  }
  .step .content {
    height: calc(1200px - 100vw);
  }
}
@media(max-width: 610px) {
  .step .content-wrapper {
    margin-top: 0px;
    margin-bottom: 70px;
  }
  .step .content {
    width: auto;
    height: auto;
  }
  .step .design h4 {
    right: 100px;
    left: auto;
  }
}

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