$yt-circle-color: #1e5985;// $main-blue;

[class*="cms-circle-"],
[class*="numbers-"],
[id*="hp-slider-"],
[class*="hp-video-"] {
  position: absolute;
  z-index: 50;
  width: 100px;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
}


.cms-index-index .rev_slider_wrapper {
  margin-bottom: 0px !important;
}

.homepage-rounded-slider {

  $hpslider-round: 236px;

  position: absolute;
  height: 610px;
  width: 100%;
 // overflow: hidden;
 // background: #efefef;

  .slider {
    position: absolute;
    top: 58px;
    z-index: 100;
    @include transform(translateX(-50%));

    .ratio--box {
      padding-bottom: 100%;
    }

    .rev_slider_wrapper {
      background: none !important;
    }
    .tp-revslider-slidesli {
        border-radius: $hpslider-round;
    }

    .tp-leftarrow,
    .tp-rightarrow {
      background: none;
      font-size: 3em;
      color: $main-color;
      opacity: .6 !important;
      left: auto !important;
      top: 414px !important;
      transition: opacity 0.33s;

      &:before {
        @extend .ba-icon-set;
      }

      &:hover {
        opacity: 1 !important;
      }
    }

    .tp-leftarrow {
        right: 3px;
    }
    .tp-rightarrow {
      right: -50px;
    }

    .tp-leftarrow:before {
      content: "\61";
    }

    .tp-rightarrow:before {
      content: "\62";
    }

    .tp-caption:not(.slidelink) {
      display: none !important;
    }


  }

  #slider-caption {
    position: absolute;
    top: 412px;
    left: 690px;
    width: 32%;
    opacity: 1;
    z-index: 100;
    @include transition(all .5s);

    h2 {
      position: relative;
      font-size: 35px !important;
      color: $main-color;
      text-transform: none !important;
      line-height: 1.1em !important;

      &:before {
        position: absolute;
        display: block;
        left: -87px;
        top: -12px;
        opacity: 1 !important;
        font-size: 1.8em;

        @extend .ba-icon-set;
        content: "\63";
      }
    }

    p {
      color: $main-blue;
      font-size: 18px !important;
      line-height: 1.4em !important;
    }
  }

  $imagePath: '../images/homepage/slider-graphics/';

  [id*="hp-slider-"] {

    @include transform(translateX(-50%));

    &[id*="circle-1"] {

      background-image: url($imagePath + 'maly-gora-lewo.png');
    }
    &[id*="circle-2"] {

      background-image: url($imagePath + 'duzy-gora-prawo.png');
    }
    &[id*="circle-3"] {

      background-image: url($imagePath + 'duzy-srodek-lewo.png');
    }
    &[id*="circle-4"] {

      background-image: url($imagePath + 'maly-dol-lewo.png');
    }
    &[id*="circle-5"] {

      background-image: url($imagePath + 'maly-dol-prawo.png');
    }
  }

}
.homepage-rounded-video {

  $imagePath: '../images/homepage/slider-graphics/';
  $boxDimensions: 250px;

  width: 100%;
  height: 400px;
  margin: 0 auto;
  position: absolute;
  //overflow: hidden;

  .video-box {

    overflow: hidden;
    @include border-radius($boxDimensions / 2);
    @include transform(translateX(-50%));
    position: absolute;
    z-index: 100;
  }

  .yt-container {
    padding-bottom: 100%;

    .video-placeholder {
      img {
        height: 140%;
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate3d(-50%,-50%,0));
      }
    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: $yt-circle-color;
      opacity: 0.4;
      transition: opacity 0.5s;

    }

    &:hover {
      .mask {
        opacity: 0.8;
      }
    }

    .play {
      color: #fff;

      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 50%;
      font-weight: 700;
      height: auto;
      width: auto;
      text-align: center;
      text-transform: uppercase;
      @include transform(translate3d(-50%,-50%,0));

      .icon {
        font-size: 37px;
        display: block;
        margin: 0;
      }
    }
  }

  [class*="hp-video-"] {
    @include transform(translateX(-50%));
    &[class*="circle-1"] {
      top: 0px;
      left: 158px;
      width: 200px;
      height: 200px;
      background-image: url($imagePath + 'video-gora.png');
    }
    &[class*="circle-2"] {
      top: 157px;
      left: 230px;
      width: 145px;
      height: 145px;
      background-image: url($imagePath + 'video-prawo.png');
    }
    &[class*="circle-3"] {
      top: 200px;
      left: 96px;
      width: 175px;
      height: 175px;
      background-image: url($imagePath + 'video-dol.png');
    }
  }

  .caption-box {
    position: absolute;
    top: 42px;
    right: 2%;
    z-index: 90;
    width: 25%;
    color: $main-blue;
    @include transition(all .5s);

    .title {
      margin: 0 0 0.6em;
      font-size: 24px;
      color: $main-blue;

      &:before {
        position: absolute;
        display: block;
        left: -59px;
        top: 2px;
        opacity: 1 !important;
        font-size: 1.8em;
        color: $main-color;
        @include transform(scale(1,-1) rotateZ(-17deg));

        @extend .ba-icon-set;
        content: "\63";
      }
    }

    p {
      font-size: 18px;
      line-height: 1.4em;
    }
  }
}

/* -- RWD only --- -*/


.upper-homepage-fireworks {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 600px;
  z-index: 1;

  @include transition(all .5s);

  & + .row {
    z-index: 2;
  }

  .homepage-rounded-slider {

    $rwd-slider: 470px;

    .slider {
      width: $rwd-slider;
      height: $rwd-slider;
      left: 30%;
    }

    #slider-caption {
      left: 51%;
      top: 380px;
    }

    // default
    [id*="hp-slider-"] {

      transition: all 0.33s;

      &[id*="circle-1"] {
        top: 37px;
        left: 18%;
        width: 200px;
        height: 200px;
      }
      &[id*="circle-2"] {
        top: 12px;
        left: 43%;
        width: 314px;
        height: 314px;
      }
      &[id*="circle-3"] {
        top: 217px;
        left: 14%;
        width: 255px;
        height: 255px;
      }
      &[id*="circle-4"] {
        top: 424px;
        left: 23%;
        width: 167px;
        height: 167px;
      }
      &[id*="circle-5"] {
        top: 436px;
        left: 38%;
        width: 140px;
        height: 140px;
      }
    }

    @include transition(all .5s);
  }
  .homepage-rounded-video {
    .video-box {
      left: 62%;
      width: 220px;
      height: 220px;
      top: 26%;
    }
    [class*="hp-video-"] {
      &[class*="circle-1"] {
        top: 0px;
        left: 63%;
        width: 200px;
        height: 200px;
      }
      &[class*="circle-2"] {
        top: 157px;
        left: 67.4%;
        width: 145px;
        height: 145px;
      }
      &[class*="circle-3"] {
        top: 200px;
        left: 57.3%;
        width: 175px;
        height: 175px;
      }
    }
    @include transition(all .5s);
  }

  @include bp(max-width, $bp-xlarge + 350) {
    // 1399px
    .homepage-rounded-video {
      margin-left: 60px;
      .caption-box {
        width: 27%;
        padding-right: 85px;
      }
    }
    .homepage-rounded-slider {
      #slider-caption {
        left: 62%;
        top: 400px;
      }
    }
  }

  @include bp(max-width, $bp-xlarge) {
    // 1199px
    opacity: 1;
    $rwd-slider: 400px;

    .homepage-rounded-video {
      width: 100%;

      .video-box {
        left: 62%;
        width: 192px;
        height: 192px;
        top: 26%;
      }

      [class*="hp-video-"] {

        &[class*="circle-1"] {
          top: 29px;
          left: 64%;
          width: 180px;
          height: 180px;
        }
        &[class*="circle-2"] {
          top: 180px;
          left: 68.4%;
          width: 125px;
          height: 125px;
        }
        &[class*="circle-3"] {
          top: 202px;
          left: 57%;
          width: 148px;
          height: 148px;
        }
      }
    }

/*    .homepage-rounded-slider {
      opacity: 1;
      .slider {
        width: $rwd-slider;
        height: $rwd-slider;
        left: 23%;
      }

      #slider-caption {
        left: 51%;
        top: 380px;
      }

      [id*="hp-slider-"] {

        &[id*="circle-1"] {
          top: 37px;
          left: 7%;
          width: 180px;
          height: 180px;
        }
        &[id*="circle-2"] {
          top: 12px;
          left: 39%;
          width: 270px;
          height: 270px;
        }
        &[id*="circle-3"] {
          top: 217px;
          left: 4%;
          width: 220px;
          height: 220px;
        }
        &[id*="circle-4"] {
          top: 378px;
          left: 16%;
          width: 140px;
          height: 140px;
        }
        &[id*="circle-5"] {
          top: 363px;
          left: 34%;
          width: 128px;
          height: 128px;
        }
      }
    } */
  }

  @include bp(max-width, $bp-large) {
    // 979

    height: auto;
    $rwd-slider: 472px;

    .homepage-rounded-video {
      height: auto;
      position: relative;
      overflow: visible;
      width: 58%;
      margin: 8em 0 12em;

      .video-box {
        width: 220px;
        height: 220px;
        height: auto;
        position: relative;
        margin: 0 auto;
        top: 0;
        left: 0;
        @include transform(translateX(0));
      }

      .caption-box {
        position: absolute;
        left: 85%;
        top: -50px;
        width: 84%;

      }

      [class*="hp-video-"] {

        &[class*="circle-1"] {
          top: -81px;
          left: 57%;
          width: 200px;
          height: 200px;
        }
        &[class*="circle-2"] {
          top: 108px;
          left: 69%;
          width: 145px;
          height: 145px;
        }
        &[class*="circle-3"] {
          top: 167px;
          left: 33%;
          width: 175px;
          height: 130px;
        }
      }

    }
    .homepage-rounded-slider {

      position: relative;
      height: auto;

      .slider {

        width: $rwd-slider;
        height: $rwd-slider;

        margin: 70px auto;
        position: relative;
        @include transform(translateX(0));
        top: 0;
        left: 0;

      }
      #slider-caption {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        padding: 0 10%;

        h2 {
          &:before {
            display: none;
          }
        }
      }
      [id*="hp-slider-"] {

        &[id*="circle-1"] {
          top: -1px;
          left: 27%;
          width: 170px;
          height: 170px;
        }
        &[id*="circle-2"] {
          top: -14px;
          left: 72%;
          width: 280px;
          height: 280px;
        }
        &[id*="circle-3"] {
          top: 200px;
          left: 24%;
          width: 215px;
          height: 215px;
        }
        &[id*="circle-4"] {
          top: 386px;
          left: 42%;
          width: 140px;
          height: 140px;
        }
        &[id*="circle-5"] {
          top: 326px;
          left: 71%;
          width: 120px;
          height: 120px;
        }
      }
    }
  }

  @include bp(max-width, $bp-medium) {
    // 770

    opacity: 1;
    $rwd-slider: 400px;
    margin-top: -60px;

    .homepage-rounded-video {
      width: 58%;
      margin: 8em 0;

      [class*="hp-video-"] {
        &[class*="circle-3"] {
          top: 176px;
        }
      }
    }
    .homepage-rounded-slider {
      opacity: 1;

      .slider {
        width: $rwd-slider;
        height: $rwd-slider;
      }

      #slider-caption {
        opacity: 1;
      }

    }
  }

  @include bp(max-width, $bp-medium) {

    .homepage-rounded-slider {
     [id*="hp-slider-"] {

       &[id*="circle-1"] {
         top: -8px;
         left: 28%;
         width: 170px;
         height: 170px;
       }
       &[id*="circle-2"] {
         top: -44px;
         left: 76%;
         width: 280px;
         height: 280px;
       }
       &[id*="circle-3"] {
         top: 175px;
         left: 24%;
         width: 215px;
         height: 215px;
       }
       &[id*="circle-4"] {
         top: 323px;
         left: 53%;
         width: 140px;
         height: 140px;
       }
       &[id*="circle-5"] {
         top: 261px;
         left: 74%;
         width: 120px;
         height: 120px;
       }
     }
   }
  }

  @include bp(max-width, $bp-small) { // 599

    $rwd-slider: 400px;

    opacity: 1;
    .homepage-rounded-video {

      width: 80%;
      margin: 8em auto 8em;

      .caption-box {
        padding: 0;
        position: relative;
        top: 0;
        width: 100%;
        left: 0;
        padding-top: 50px;

        .title {
          &:before {
            display: none;
          }
        }
      }

      [class*="hp-video-"] {
        &[class*="circle-3"] {
          top: 150px;
        }
      }
    }
    .homepage-rounded-slider {

      opacity: 1;
      .slider {
        width: $rwd-slider;
        height: $rwd-slider;

        .tp-leftarrow {
          right: auto;
          left: 30px !important;
          bottom: -46px !important;
          top: auto !important;
          opacity: .8 !important;
        }

        .tp-rightarrow {
          right: auto;
          left: 82px !important;
          bottom: -46px !important;
          top: auto !important;
          opacity: .8 !important;
        }
      }

      #slider-caption {
        opacity: 1;
      }

      .caption-box {
        position: relative;
        width: 100%;
        padding: 0 10%;
        left: 0;
      }

      [id*="hp-slider-"] {

        &[id*="circle-1"] {
          top: -16px;
          left: 19%;
          width: 170px;
          height: 170px;
        }
        &[id*="circle-2"] {
          top: -54px;
          left: 80%;
          width: 280px;
          height: 280px;
        }
        &[id*="circle-3"] {
          top: 163px;
          left: 11%;
          width: 215px;
          height: 215px;
        }
        &[id*="circle-4"] {
          top: 299px;
          left: 38%;
          width: 140px;
          height: 140px;
          opacity: 0;
        }
        &[id*="circle-5"] {
          top: 294px;
          left: 74%;
          width: 120px;
          height: 120px;
        }
      }


    }
  }

  @include bp(max-width, 375px) {
    $rwd-slider: 375px;
    .homepage-rounded-slider {
      .slider {
        width: 95%;
        height: $rwd-slider;
      }
    }
  }

}

.slide-change-pending {
  #slider-caption {
    opacity: 0;
    left: 680px;
  }
}

.bridge-in-numbers {
  position: relative;
  background-color: $main-blue;
  padding: 0 $trim;
  min-height: 640px;
  color: #fff;
  overflow: hidden;
  //z-index: 99999999;

  $imagePath: '../images/homepage/numbers-graphics/';

  [class*="numbers-"] {

    opacity: 0.15;
    //background-color: red;

    &[class*="circle-1"] {
      top: 100px;
      left: 9%;
      width: 100px;
      height: 100px;
      background-image: url($imagePath + 'maly-prawo-lewo.png');
    }
    &[class*="circle-2"] {
      top: -50px;
      left: 94%;
      width: 400px;
      height: 400px;
      background-image: url($imagePath + 'duzy-prawo-gora.png');
    }
    &[class*="circle-3"] {
      top: 250px;
      left: 60%;
      width: 100px;
      height: 100px;
      background-image: url($imagePath + 'maly-prawo-lewo.png');
    }
    &[class*="circle-4"] {
      top: 350px;
      left: 8%;
      width: 320px;
      height: 320px;
      background-image: url($imagePath + 'duzy-lewo.png');
    }
    &[class*="circle-5"] {
      top: 380px;
      left: 67%;
      width: 285px;
      height: 285px;
      background-image: url($imagePath + 'duzy-prawo-dol.png');
    }
  }

  @include bp(max-width, $bp-small) {
    [class*="numbers-"] {

      &[class*="circle-4"],
      &[class*="circle-5"] {
        opacity: 0;
      }
    }
  }

  ul {
    width: 100%;
    margin: 4em auto 0;
    list-style: none;
    padding: 45px 0;
    overflow: hidden;
    max-width: 1200px;

    li {

      width: 33%;
      margin: 0 auto;
      text-align: left;
      float: left;
      padding: 0 0 0 25px;
      opacity: 0;
      @include transform(translateY(25%));
      @include transition(opacity .5s linear, transform .5s);


      &:hover {
        & > div {
          @include transform(scale(1.05));
        }
      }

      &.visible {
        opacity: 1;
        @include transform(translateY(0));
      }

      & > div {
        max-width: 330px;
        margin: 0 auto;
        text-align: left;
        @include transform(scale(1));
        @include transition(transform .5s);
      }

      .num {
        font-weight: 700;
        font-size: 50px;
        display: block;
        line-height: 1.2;
        margin-bottom: 0.4em;
      }
      .label {
        font-weight: 700;
        color: #e1e1e1;
        font-size: 24px;
        margin-left: -7%;
        margin-bottom: 0.8em;
        line-height: 1;
      }

      .last-part {
        font-weight: 400;
        color: #e1e1e1;
        font-size: 18px;
      }

      @include bp(min-width, $bp-large + 1) {
        &:nth-child(2) {
          margin-top: -40px;
        }

        &:nth-child(3) {
          margin-top: 30px;
        }

        &:nth-child(4) {
          margin-top: 37px;
          margin-left: 13%;
        }
        &:nth-child(5) {
           margin-left: 100px;
        }
      }

    }

    @include bp(max-width, $bp-xlarge) {
      width: 100%;
    }

    @include bp(max-width, $bp-large) {

      margin: 0;
      padding: 4em 0px;

      li {
        padding-left: 0;
        text-align: center;
        width: 50%;
        margin-bottom: 2.5em;

        & > div {
          text-align: center;
        }

        .label {
          margin-left: 0;
        }
      }
    }

    @include bp(max-width, $bp-small) {
      li {
        width: 100%;
      }
    }
  }

  @include bp(max-width, $bp-large) {
    li:last-child {
      width: 100%;
    }
  }

}

@include bp(min-width, $bp-medium + 1) {
  .bridge-in-numbers {

  }
}

@include bp(min-width, $bp-large + 1) {
  .bridge-in-numbers {

  }
}