/***************************

background

***************************/
.sb-bg-1 {
  border-left: solid 30px $c4;
  border-right: solid 30px $c4;
  position: absolute;
  width: 100%;
  height: 300%;
  overflow: hidden;

  & div {
    width: 100%;
    position: relative;

    &:after {
      content: '';
      height: 40vw;
      width: 300%;
      background-color: $c6;
      position: absolute;
      top: 500px;
      left: -100%;
      transform: rotate(-30deg);
    }
  }
}

.sb-bg-2 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 250%;
  overflow: hidden;

  & div {
    width: 100%;
    position: relative;

    &:after {
      content: '';
      height: 1200px;
      width: 1200px;
      position: absolute;
      z-index: 0;
      top: 0;
      right: -20%;
      border-radius: 50%;
      border: solid 200px $c6;
    }
  }
}

.sb-bg-3 {
  background-color: $c6;
  width: 63%;
  height: 100%;
  position: absolute;
  border-left: solid 30px $c4;
  top: 0;
  left: 0;
}
@media (max-width: 768px) {
  .sb-bg-1 {
    border-left: solid 15px $c4;
    border-right: solid 15px $c4;

    & div {
      &:after {
        height: 50vh;
        top: 450px;
      }
    }
  }

  .sb-bg-3 {
    width: 100%;
    border: none;
  }
}
/***************************

illustration 1

***************************/
.sb-illustration-1 {
  //border: dotted 2px #eee;
  position: relative;
  overflow: hidden;
  height: calc(100vh - 150px);
  margin-top: 120px;
  width: 100%;
  float: right;
  border-bottom-right-radius: 400px;
  border-bottom-left-radius: 400px;
  box-shadow: 0 8px 8px -9px rgba(0,0,0,.4);

  & .sb-girl {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    bottom: 0;
    right: 0;
  }

  & .sb-cirkle-1 {
    position: absolute;
    height: 140px;
    width: 140px;
    border-radius: 50%;
    border: solid 25px $c4;
    right: 10%;
    bottom: 15%;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1s infinite ease-in-out;
  }

  & .sb-cirkle-2 {
    position: absolute;
    top: 40%;
    right: 20%;
    height: 25px;
    width: 25px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 2s 3s infinite ease-in-out;
  }

  & .sb-cirkle-3 {
    position: absolute;
    bottom: 10%;
    left: 8%;
    width: 55px;
    height: 55px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s infinite ease-in-out;
  }

  & .sb-cirkle-4 {
    position: absolute;
    top: 15%;
    right: 30%;
    width: 15px;
    height: 15px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s 4s infinite ease-in-out;
  }

  & .sb-cirkle-5 {
    position: absolute;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: solid 10px $c4;
    left: 28%;
    bottom: 45%;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1.5s infinite ease-in-out;
  }

  & .sb-pik-1,
  & .sb-pik-2,
  & .sb-pik-3 {
    position: absolute;
    width: 8%;
    opacity: 0.07;
  }

  & .sb-pik-1 {
    bottom: 45%;
    left: 2%;
    animation: anima2 3s 2s infinite ease-in-out;
  }

  & .sb-pik-2 {
    right: 2%;
    bottom: 38%;
    animation: anima2 3s 1s infinite ease-in-out;
  }

  & .sb-pik-3 {
    top: 24%;
    right: 18%;
    animation: anima2 3s infinite ease-in-out;
  }
}
@media (max-width: 992px) {
  .sb-illustration-1 {
    margin-top: 0;
    height: auto;
    padding-bottom: 105%;
  }
}
@media (max-width: 768px) {
  .sb-illustration-1 {
    & .sb-cirkle-1 {
      height: 60px;
      width: 60px;
      border: solid 15px $c4;
    }

    & .sb-cirkle-5 {
      position: absolute;
      height: 30px;
      width: 30px;
      left: 25%;
      bottom: 30%;
      border: solid 10px $c4;
    }
  }
}
/***************************

illustration 1 (2)

***************************/
.sb-ilustration-fix {
  padding-top: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.sb-illustration-1-2 {
  //border: dotted 2px #eee;
  position: relative;
  padding-bottom: 110%;
  width: 100%;
  float: right;

  & .sb-food-1,
  & .sb-food-2,
  & .sb-food-3 {
    position: absolute;
    width: 60%;
  }

  & .sb-food-1 {
    top: 18%;
    left: -5%;
    animation: anima1 3s infinite ease-in-out;
  }

  & .sb-food-2 {
    top: -2%;
    right: -5%;
    animation: anima1 2s infinite ease-in-out;
  }

  & .sb-food-3 {
    bottom: -3%;
    right: 0;
    animation: anima1 4s infinite ease-in-out;
  }

  & .sb-illu-dialog-1 {
    top: 10%;
    right: 20%;
    margin-right: -30px;
    animation: message 0.4s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 2s;
  }

  & .sb-illu-dialog-2 {
    bottom: 35%;
    left: 25%;
    margin-right: 30px;
    animation: message 0.4s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 1s;
  }

  & .sb-illu-dialog-1,
  & .sb-illu-dialog-2 {
    white-space: nowrap;
    opacity: 0;
    background-color: $c4;
    display: block;
    padding: 5px 30px 10px;
    position: absolute;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0;
    border-radius: 20px;
    box-shadow: 0 2px 46px 0 rgba(0,0,0,0.36);

    & span {
      display: inline-block;
      margin-right: 15px;
      font-size: 26px;
      transform: translateY(5px);
    }

    &:after {
      transform: rotate(45deg);
      content: '';
      position: absolute;
      z-index: 9;
      bottom: -5px;
      right: 30px;
      background-color: $c4;
      height: 10px;
      width: 10px;
    }
  }

  & .sb-cirkle-1 {
    position: absolute;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: solid 22px $c4;
    right: 0;
    top: 35%;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1s infinite ease-in-out;
  }

  & .sb-cirkle-2 {
    position: absolute;
    top: 20%;
    left: 20%;
    height: 25px;
    width: 25px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 2s 3s infinite ease-in-out;
  }

  & .sb-cirkle-3 {
    position: absolute;
    bottom: 15%;
    right: 52%;
    width: 55px;
    height: 55px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s infinite ease-in-out;
  }

  & .sb-cirkle-4 {
    position: absolute;
    bottom: 35%;
    right: 0;
    width: 15px;
    height: 15px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s 4s infinite ease-in-out;
  }

  & .sb-cirkle-5 {
    position: absolute;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: solid 10px $c4;
    left: 15%;
    bottom: 30%;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1.5s infinite ease-in-out;
  }

  & .sb-pik-1,
  & .sb-pik-2,
  & .sb-pik-3 {
    position: absolute;
    width: 8%;
    opacity: 0.07;
  }

  & .sb-pik-1 {
    top: 5%;
    left: 25%;
    animation: anima2 3s 2s infinite ease-in-out;
  }

  & .sb-pik-2 {
    right: 0;
    bottom: 0;
    animation: anima2 3s 1s infinite ease-in-out;
  }

  & .sb-pik-3 {
    left: 22%;
    bottom: 18%;
    animation: anima2 3s infinite ease-in-out;
  }
}
@media (max-width: 992px) {
  .sb-ilustration-fix {
    padding: 0;
    height: auto;
  }
}
@media (max-width: 768px) {
  .sb-illustration-1-2 {
    & .sb-illu-dialog-2 {
      bottom: 15%;
    }
    & .sb-illu-dialog-1 {
      top: 15%;
    }
    & .sb-cirkle-1 {
      height: 60px;
      width: 60px;
      border: solid 12px $c4;
    }
    & .sb-cirkle-2 {
      top: 5%;
      left: 5%;
    }
    & .sb-cirkle-3 {
      bottom: 5%;
      left: 15%;
      width: 30px;
      height: 30px;
    }
    & .sb-pik-3 {
      left: 0;
      bottom: 18%;
      animation: anima2 3s infinite ease-in-out;
    }
  }
}
/***************************

illustration 1 (404)

***************************/
.sb-illustration-1-404 {
  //border: dotted 2px #eee;
  position: relative;
  overflow: hidden;
  height: calc(100vh - 150px);
  margin-top: 120px;
  width: 100%;
  float: right;
  border-bottom-right-radius: 400px;
  border-bottom-left-radius: 400px;
  box-shadow: 0 8px 8px -9px rgba(0,0,0,.4);

  & .sb-man {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    bottom: 0;
    right: 0;
  }

  & .sb-cirkle-1 {
    position: absolute;
    height: 140px;
    width: 140px;
    border-radius: 50%;
    border: solid 25px $c4;
    right: 15%;
    bottom: 15%;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1s infinite ease-in-out;
  }

  & .sb-cirkle-2 {
    position: absolute;
    top: 40%;
    right: 20%;
    height: 25px;
    width: 25px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 2s 3s infinite ease-in-out;
  }

  & .sb-cirkle-3 {
    position: absolute;
    bottom: 10%;
    left: 8%;
    width: 55px;
    height: 55px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s infinite ease-in-out;
  }

  & .sb-cirkle-4 {
    position: absolute;
    top: 15%;
    left: 20%;
    width: 15px;
    height: 15px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s 4s infinite ease-in-out;
  }

  & .sb-cirkle-5 {
    position: absolute;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: solid 10px $c4;
    left: 24%;
    bottom: 55%;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1.5s infinite ease-in-out;
  }

  & .sb-pik-1,
  & .sb-pik-2,
  & .sb-pik-3 {
    position: absolute;
    width: 8%;
    opacity: 0.07;
  }

  & .sb-pik-1 {
    bottom: 50%;
    left: 9%;
    animation: anima2 3s 2s infinite ease-in-out;
  }

  & .sb-pik-2 {
    right: 2%;
    bottom: 38%;
    animation: anima2 3s 1s infinite ease-in-out;
  }

  & .sb-pik-3 {
    top: 24%;
    right: 18%;
    animation: anima2 3s infinite ease-in-out;
  }
}
@media (max-width: 992px) {
  .sb-illustration-1-404 {
    margin-top: 0;
    height: auto;
    padding-bottom: 105%;
    margin-bottom: 60px;
  }
}
@media (max-width: 768px) {
  .sb-illustration-1-404 {
    & .sb-cirkle-1 {
      height: 60px;
      width: 60px;
      border: solid 15px $c4;
    }

    & .sb-cirkle-5 {
      position: absolute;
      height: 30px;
      width: 30px;
      left: 25%;
      bottom: 30%;
      border: solid 10px $c4;
    }
  }
}
/***************************

illustration 2

***************************/
.sb-illustration-2 {
  //border: dotted 2px #eee;
  position: relative;
  padding-bottom: 120%;
  width: 100%;

  .sb-interior-frame {
    position: absolute;
    overflow: hidden;
    z-index: 2;
    width: 80%;
    height: 90%;
    bottom: 10%;
    left: 0;
    box-shadow: 0 6px 8px -6px rgba(0,0,0,.1);

    & .sb-interior {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: bottom;
      animation: zoom 30s infinite ease-in-out;
    }
  }

  & .sb-square {
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    width: 70%;
    height: 80%;
    background-color: $c6;
  }

  & .sb-cirkle-1 {
    position: absolute;
    z-index: 4;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: solid 20px $c4;
    left: 15%;
    bottom: 2%;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1s infinite ease-in-out;
  }

  & .sb-cirkle-2 {
    position: absolute;
    z-index: 4;
    top: 35%;
    right: 18%;
    height: 20px;
    width: 20px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 2s 3s infinite ease-in-out;
  }

  & .sb-cirkle-3 {
    position: absolute;
    z-index: 4;
    bottom: 15%;
    left: -5%;
    width: 55px;
    height: 55px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s infinite ease-in-out;
  }

  & .sb-cirkle-4 {
    position: absolute;
    z-index: 4;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    border: solid 7px $c4;
    left: 15%;
    top: -2%;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1s infinite ease-in-out;
  }

  & .sb-experience {
    background-color: $c4;
    position: absolute;
    z-index: 3;
    bottom: 0;
    right: 10%;
    width: 40%;
    padding: 30px;
    box-shadow: 6px 6px 8px -6px rgba(0,0,0,.1);

    & .sb-exp-content {
      padding: 15px;
      text-align: center;
      border: dotted 3px $c3;

      & .sb-h1 {
        font-weight: 500;
        font-family: 'Monoton', cursive;
      }
    }
  }
}
@media (max-width: 1200px) {
  .sb-illustration-2 {
    & .sb-experience {
      width: 50%;
    }
  }
}
@media (max-width: 992px) {
  .sb-illustration-2 {
    padding-bottom: 65%;

    & .sb-interior-frame {
      width: 100%;
    }

    & .sb-cirkle-1 {
      left: 5%;
      width: 80px;
      height: 80px;
    }

    & .sb-cirkle-2 {
      right: -2%;
    }

    & .sb-cirkle-3 {
      width: 30px;
      height: 30px;
      bottom: 40%;
    }

    & .sb-experience {
      width: 40%;
      right: 0;
    }
  }
}
@media (max-width: 768px) {
  .sb-illustration-2 {
    padding-bottom: 110%;

    & .sb-experience {
      width: 60%;
    }
  }
}
/***************************

illustration 3

***************************/
.sb-illustration-3 {
  position: relative;
  padding-bottom: 90%;
  //border: dotted 2px #eee;
  & .sb-phones {
    position: absolute;
    width: 113%;
    height: 105%;
    object-fit: cover;
    object-position: center;
    top: 0;
    right: -13%;
    animation: anima3 3s infinite ease-in-out;
  }

  & .sb-cirkle-1 {
    position: absolute;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border: solid 20px $c4;
    left: 23%;
    bottom: 30%;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1s infinite ease-in-out;
  }

  & .sb-cirkle-2 {
    position: absolute;
    bottom: 45%;
    left: 2%;
    width: 35px;
    height: 35px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 2s 2s infinite ease-in-out;
  }

  & .sb-cirkle-3 {
    position: absolute;
    top: 20%;
    right: 20%;
    width: 15px;
    height: 15px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s 3s infinite ease-in-out;
  }

  & .sb-cirkle-4 {
    position: absolute;
    bottom: 5%;
    left: 35%;
    width: 10px;
    height: 10px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s 4s infinite ease-in-out;
  }

  & .sb-pik-1,
  & .sb-pik-2,
  & .sb-pik-3 {
    position: absolute;
    width: 8%;
    opacity: 0.07;
  }

  & .sb-pik-1 {
    bottom: 10%;
    left: 15%;
    animation: anima2 3s 2s infinite ease-in-out;
  }

  & .sb-pik-2 {
    right: 32%;
    top: 5%;
    animation: anima2 3s 1s infinite ease-in-out;
  }

  & .sb-pik-3 {
    top: 20%;
    left: 5%;
    animation: anima2 3s infinite ease-in-out;
  }
}
@media (max-width: 768px) {
  .sb-illustration-3 {
    & .sb-cirkle-1 {
      height: 60px;
      width: 60px;
      border: solid 15px $c4;
    }
  }
}
/***************************

illustration 4

***************************/
.sb-illustration-4 {
  width: 100%;
  //border: dotted 2px #eee;
  position: relative;
  z-index: 1;
  padding-bottom: 60%;
  animation: anima3 3s 1s infinite ease-in-out;

  & .sb-burger {
    position: absolute;
    width: 95%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    top: 0;
    right: 0;
    animation: anima2 3s infinite ease-in-out;
  }

  & .sb-cirkle-1 {
    position: absolute;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border: solid 15px $c4;
    right: 15%;
    bottom: 0;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1s infinite ease-in-out;
  }

  & .sb-cirkle-2 {
    position: absolute;
    top: 0;
    left: 12%;
    width: 15px;
    height: 15px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 2s 2s infinite ease-in-out;
  }

  & .sb-cirkle-3 {
    position: absolute;
    bottom: -5%;
    right: 50%;
    width: 10px;
    height: 10px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s 3s infinite ease-in-out;
  }
}
@media (max-width: 580px) {
  .sb-illustration-4 {
    margin-top: 30px;
  }
}
/***************************

illustration 5

***************************/
.sb-illustration-5 {
  width: 100%;
  //border: dotted 2px #eee;
  position: relative;
  z-index: 1;
  padding-bottom: 60%;
  animation: anima3 3s 1s infinite ease-in-out;

  & .sb-cup {
    position: absolute;
    width: 55%;
    bottom: -12%;
    right: 20%;
    transform: rotate(-5deg);
  }

  & .sb-cirkle-1 {
    position: absolute;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border: solid 15px $c4;
    left: 30%;
    bottom: 0;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1s infinite ease-in-out;
  }

  & .sb-cirkle-2 {
    position: absolute;
    bottom: 20%;
    left: 12%;
    width: 20px;
    height: 20px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 2s 2s infinite ease-in-out;
  }

  & .sb-cirkle-3 {
    position: absolute;
    top: 30%;
    right: 10%;
    width: 10px;
    height: 10px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s 3s infinite ease-in-out;
  }
}
@media (max-width: 580px) {
  .sb-illustration-5 {
    margin-top: 30px;
    margin-bottom: 30px;
    & .sb-cup {
      width: 50%;
      right: 25%;
    }
  }
}
/***************************

illustration 6

***************************/
.sb-illustration-6 {
  position: relative;
  padding-bottom: 75%;
  //border: dotted 2px #eee;
  & .sb-burger {
    position: absolute;
    width: 100%;
    top: 1%;
    animation: anima3 3s infinite ease-in-out;
  }

  & .sb-cirkle-1 {
    position: absolute;
    height: 110px;
    width: 110px;
    border-radius: 50%;
    border: solid 25px $c4;
    right: 3%;
    bottom: 10%;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1s infinite ease-in-out;
  }

  & .sb-cirkle-2 {
    position: absolute;
    bottom: 30%;
    left: 0;
    width: 35px;
    height: 35px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 2s 2s infinite ease-in-out;
  }

  & .sb-cirkle-3 {
    position: absolute;
    top: 20%;
    right: 0;
    width: 15px;
    height: 15px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s 3s infinite ease-in-out;
  }

  & .sb-cirkle-4 {
    position: absolute;
    bottom: 5%;
    left: 15%;
    width: 10px;
    height: 10px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s 4s infinite ease-in-out;
  }

  & .sb-cirkle-5 {
    position: absolute;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: solid 10px $c4;
    left: 25%;
    top: 30%;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1s infinite ease-in-out;
  }

  & .sb-pik-2,
  & .sb-pik-3 {
    position: absolute;
    width: 8%;
    opacity: 0.07;
  }

  & .sb-pik-2 {
    right: 12%;
    top: 0;
    animation: anima2 3s 1s infinite ease-in-out;
  }

  & .sb-pik-3 {
    top: 10%;
    left: 2%;
    animation: anima2 3s infinite ease-in-out;
  }
}
/***************************

illustration 7

***************************/
.sb-illustration-7 {
  //border: dotted 2px #eee;
  position: relative;
  padding-bottom: 65%;
  width: 100%;

  .sb-interior-frame {
    position: absolute;
    overflow: hidden;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: 0 6px 8px -6px rgba(0,0,0,.1);

    & .sb-interior {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: bottom;
      animation: zoom 30s infinite ease-in-out;
    }

    & .sb-video-play {
      border: solid 3px $c4;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 90px;
      height: 90px;
      font-size: 24px;
      margin-left: -45px;
      margin-top: -45px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: $c4;
      padding-left: 3px;
      box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
      text-shadow: 0 3px 6px rgba(0,0,0,.09);
      transition: $tr;

      &:hover {
        transform: scale(1.05);
      }
    }
  }

  & .sb-cirkle-1 {
    position: absolute;
    z-index: 4;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    border: solid 15px $c4;
    right: 5%;
    bottom: -4%;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1s infinite ease-in-out;
  }

  & .sb-cirkle-2 {
    position: absolute;
    z-index: 4;
    top: 35%;
    right: -2%;
    height: 20px;
    width: 20px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 2s 3s infinite ease-in-out;
  }

  & .sb-cirkle-3 {
    position: absolute;
    z-index: 4;
    bottom: 15%;
    left: -4%;
    width: 55px;
    height: 55px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s infinite ease-in-out;
  }

  & .sb-cirkle-4 {
    position: absolute;
    z-index: 4;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    border: solid 7px $c4;
    left: 15%;
    top: -4%;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1s infinite ease-in-out;
  }
}
@media (max-width: 1200px) {
  .sb-illustration-2 {
    & .sb-experience {
      width: 50%;
    }
  }
}
@media (max-width: 992px) {
  .sb-illustration-2 {
    padding-bottom: 65%;

    & .sb-interior-frame {
      width: 100%;
    }

    & .sb-cirkle-1 {
      left: 5%;
      width: 80px;
      height: 80px;
    }

    & .sb-cirkle-2 {
      right: -2%;
    }

    & .sb-cirkle-3 {
      width: 30px;
      height: 30px;
      bottom: 40%;
    }

    & .sb-experience {
      width: 40%;
      right: 0;
    }
  }
}
@media (max-width: 768px) {
  .sb-illustration-2 {
    padding-bottom: 110%;

    & .sb-experience {
      width: 60%;
    }
  }
}
/***************************

illustration 8

***************************/
.sb-illustration-8 {
  position: relative;
  padding-bottom: 80%;
  //border: dotted 2px #eee;
  & .sb-reserved {
    position: absolute;
    width: 140%;
    height: 130%;
    object-fit: cover;
    top: 0;
    right: 0;
  }

  & .sb-cirkle-1 {
    position: absolute;
    height: 110px;
    width: 110px;
    border-radius: 50%;
    border: solid 25px $c4;
    left: -3%;
    bottom: 10%;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1s infinite ease-in-out;
  }

  & .sb-cirkle-2 {
    position: absolute;
    bottom: 50%;
    right: 0;
    width: 35px;
    height: 35px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 2s 2s infinite ease-in-out;
  }

  & .sb-cirkle-3 {
    position: absolute;
    top: 20%;
    left: 45%;
    width: 15px;
    height: 15px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s 3s infinite ease-in-out;
  }

  & .sb-cirkle-4 {
    position: absolute;
    top: 5%;
    left: 15%;
    width: 10px;
    height: 10px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s 4s infinite ease-in-out;
  }

  & .sb-cirkle-5 {
    position: absolute;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: solid 10px $c4;
    right: 33%;
    bottom: 0;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 1s infinite ease-in-out;
  }

  & .sb-pik-2,
  & .sb-pik-3 {
    position: absolute;
    width: 8%;
    opacity: 0.07;
  }

  & .sb-pik-2 {
    right: 12%;
    top: 25%;
    animation: anima2 3s 1s infinite ease-in-out;
  }

  & .sb-pik-3 {
    top: 40%;
    left: -2%;
    animation: anima2 3s infinite ease-in-out;
  }
}
/***************************

illustration 9

***************************/
.sb-illustration-9 {
  & .sb-envelope-1 {
    position: absolute;
    z-index: 2;
    width: 65%;
    left: -43%;
    bottom: -5%;
    animation: anima3 3s 1s infinite ease-in-out;
  }

  & .sb-envelope-2 {
    position: absolute;
    z-index: 2;
    width: 25%;
    right: -5%;
    bottom: 0;
    animation: anima2 3s 1s infinite ease-in-out;
  }

  & .sb-cirkle-1 {
    position: absolute;
    z-index: 1;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border: solid 15px $c4;
    left: -10%;
    bottom: 45%;
    box-shadow: inset 0 3px 6px 0 rgba(0,0,0,.09) , 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima3 3s 0.5s infinite ease-in-out;
  }

  & .sb-cirkle-2 {
    position: absolute;
    bottom: 50%;
    right: -4%;
    width: 35px;
    height: 35px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 2s 2s infinite ease-in-out;
  }

  & .sb-cirkle-3 {
    position: absolute;
    top: -1.5%;
    left: 25%;
    width: 15px;
    height: 15px;
    background-color: $c5;
    border-radius: 50%;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.09);
    animation: anima1 3s 3s infinite ease-in-out;
  }
}