/*===[ header ]===*/
header {
  background-image: url('/assets/img/bg_header.jpg');
  background-position: top -60vh right -18vw;
  background-repeat: no-repeat;
  background-size: 70% auto;
  height: 100vh;
  position: relative;
}

.ouisnap-header-logo {
  background-image: url('/assets/img/logo_ouisnap.png');
}

header h1 {
  left: 10%;
  padding-right: 3rem;
  position: absolute;
  top: 50%;
}

.ouisnap-header-backshift {
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-name: ouisnap-header-backshift-animation;
  animation-timing-function: linear;

  color: #FFF;
  cursor: default;
  display: inline-block;
  position: relative;
  transition: transform .25s ease, opacity .25s ease;
  z-index: 0;
}

.ouisnap-header-backshift::before {
  background: #ED1C24;
  background: linear-gradient(to right, #ED1C24 0%, #F15A24 80%);
  border-radius: 50px;
  content: '';
  height: 116%;
  left: -20%;
  position: absolute;
  top: 2%;
  transform: rotate(-7deg);
  transition: transform .5s ease;
  width: 140%;
  z-index: -1;
}

.ouisnap-header-backshift:hover::before {
  transform: rotate(-3deg);
}

.ouisnap-header-terminal {
  height: 40vw;
  position: absolute;
  right: 8%;
  top: 20vh;
  width: 40vw;
}

.ouisnap-header-terminal::before {
  animation: ouisnap-boomerang-animation 1s steps(1) infinite;
  background-image: url('/assets/img/tile.jpg');
  background-position: top left;
  background-size: 400% 300%;
  content: '';
  height: 49%;
  left: 32%;
  position: absolute;
  top: 26%;
  width: 37%;
}

@media screen and (max-width: 767px) {
  .ouisnap-header-terminal {
    height: 60vw;
    margin: 0 auto;
    position: absolute;
    right: 20vw;
    top: 12vh;
    width: 60vw;
  }

  header {
    background-position: top -16vh right 178%;
    background-size: auto 100%;
  }

  header h1 {
    top: 60%;
  }
}

.ouisnap-header-terminal::after {
  background-image: url('/assets/img/borne.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.ouisnap-header-burger {
  background-image: url('/assets/img/menu_icon.svg');
}

/*===[ Experience section ]===*/

.ouisnap-experience {
  font-size: .9rem;
  padding-top: 5rem;
  position: relative;
}

.ouisnap-experience-description {
  color: #848482;
  margin: 2.5rem 0;
  transition: color .5s ease;
}
.ouisnap-experience-description h4 {
  color: #ACABA9;
  margin-bottom: 0;
  transition: color .5s ease;
}

.ouisnap-experience:not(:hover) .ouisnap-experience-description-active.ouisnap-experience-description h4,
.ouisnap-experience-description:hover.ouisnap-experience-description h4 {
  color: #ED1C24;
}

.ouisnap-experience:not(:hover) .ouisnap-experience-description-active.ouisnap-experience-description,
.ouisnap-experience-description:hover.ouisnap-experience-description {
  color: #000;
}

.ouisnap-experience-description::after {
  background-color: #72716F;
  content: '';
  height: 2px;
  position: absolute;
  top: 30px;
  width: 40px;
}
.ouisnap-experience:not(:hover) .ouisnap-experience-description.ouisnap-experience-description-active::after ,
.ouisnap-experience-description:hover::after  {
  background-color: #ED2621;
}

.ouisnap-experience:not(:hover) .ouisnap-experience-description.ouisnap-experience-description-active::before,
.ouisnap-experience-description:hover::before {
  border-color: #ED2621;
}

.ouisnap-experience-description::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50% auto;
  border: 2px solid #72716F;
  border-radius: 100%;
  content: '';
  height: 60px;
  position: absolute;
  top: 0;
  width: 60px;
}

.ouisnap-experience-description-touch::before {
  background-image: url('/assets/img/buttons/touch_grey.png');
  right: 300px;
}
.ouisnap-experience-description-touch::after {
  right: 260px;
}
.ouisnap-experience:not(:hover) .ouisnap-experience-description-active.ouisnap-experience-description-touch::before,
.ouisnap-experience-description:hover.ouisnap-experience-description-touch::before {
  background-image: url('/assets/img/buttons/touch_color.png');
}
.ouisnap-experience-description-dance::before {
  background-image: url('/assets/img/buttons/dance_grey.png');
  right: 200px;
}
.ouisnap-experience-description-dance::after {
  right: 160px;
}
.ouisnap-experience:not(:hover) .ouisnap-experience-description-active.ouisnap-experience-description-dance::before,
.ouisnap-experience-description:hover.ouisnap-experience-description-dance::before {
  background-image: url('/assets/img/buttons/dance_color.png');
}
.ouisnap-experience-description-fun::before {
  background-image: url('/assets/img/buttons/fun_grey.png');
  right: 100px;
}
.ouisnap-experience-description-fun::after {
  right: 60px;
}
.ouisnap-experience:not(:hover) .ouisnap-experience-description-active.ouisnap-experience-description-fun::before,
.ouisnap-experience-description:hover.ouisnap-experience-description-fun::before {
  background-image: url('/assets/img/buttons/fun_color.png');
}
.ouisnap-experience-description-share::before {
  background-image: url('/assets/img/buttons/share_grey.png');
  right: 0;
}
.ouisnap-experience-description-share::after {
  display: none;
}
.ouisnap-experience:not(:hover) .ouisnap-experience-description-active.ouisnap-experience-description-share::before,
.ouisnap-experience-description:hover.ouisnap-experience-description-share::before {
  background-image: url('/assets/img/buttons/share_color.png');
}