@font-face {
    font-family: 'breakthroughbold';
    src: url('../fonts/breakthrough-bold-webfont.eot');
    src: url('../fonts/breakthrough-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/breakthrough-bold-webfont.woff2') format('woff2'),
         url('../fonts/breakthrough-bold-webfont.woff') format('woff'),
         url('../fonts/breakthrough-bold-webfont.ttf') format('truetype'),
         url('../fonts/breakthrough-bold-webfont.svg#breakthroughbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {

  font-family: 'breakthroughbold';
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #000;
  margin: 0;
  padding: 0;
  background: url('../img/01_background.jpg') no-repeat right center;
  background-size: cover;
}

#currentVideo{
  position: fixed;
  bottom: 20px;
  width: 100%;
  left: 0;
  font-size: 18px;
  font-weight: bold;
  color: red;
  text-align: center;
}

#currentSection{
  position: fixed;
  bottom: 45px;
  width: 100%;
  left: 0;
  font-size: 18px;
  font-weight: bold;
  color: red;
  text-align: center;
}

#loader{
  position: fixed;
  left: 0;
  top:0;
  width: 100vw;
  height: 100vh;
  z-index: 50;
  background: rgba(255, 255, 255, .3);
  backdrop-filter: blur(5px);
  transition: .3s;
  /*transition-delay: .1s;*/
}

#loader img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  transition: .3s;
  z-index: 1;
}

#video-container1 {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#main-video1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  transition: 2s;
}

#video-container2 {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#main-video2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  transition: .3s;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  padding: 50px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 18px;
  font-weight: 500;
  color: #071c49;
  text-align: center;
}

.hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ocuto{
  display: none;
}

.ov-content{
  position: absolute;
  padding: 50px;
  transition: .3s;
}

.ov-content p{
  margin-bottom: 50px;
}


.ov-button {
      color: #071c49;
      font-family: "Raleway", sans-serif;
      appearance: none;
      border: 2px solid #FFF; border-radius: 999px;
      padding: 18px 28px;
      font-weight: 700; font-size: 16px;
      color: #0b2233; 
      background: rgba(255, 255, 255, .4);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
      cursor: pointer;
      transition: transform .12s ease, box-shadow .12s ease;
    }

.ov-button:hover{
  transform: scale(1.05);
}

.ov-button:active {
  transform: scale(0.95);
}


.ov-button2 {
      color: #071c49;
      font-family: "Raleway", sans-serif;
      appearance: none;
      border: 2px solid #FFF; border-radius: 999px;
      padding: 18px 28px;
      font-weight: 700; font-size: 16px;
      color: #0b2233; 
      background: rgba(255, 255, 255, .4);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
      cursor: pointer;
      transition: transform .12s ease, box-shadow .12s ease;
      margin: 40px;
      width: 200px;
    }

.ov-button2:hover{
  transform: scale(1.05);
}

.ov-button2:active {
  transform: scale(0.95);
}

.ov-button3{
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 16px;
  font-weight: 600;
  color: #071c49;
  text-align: center;
  padding: 35px 10px 37px 53px;
  background: url('../img/btIcon.png') no-repeat center center;
  background-size: contain;
    border: none;
    width: 350px;
    cursor: pointer;
    transition: .15s;
    cursor: default !important;
}

.ov-button3:hover{
  transform: scale(1.05);
}

.ov-button3:active {
  /*transform: scale(0.95);*/
}

.ov-buttonCheck{
  position: relative;
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 16px;
  font-weight: 600;
  color: #071c49;
  text-align: left;
  padding: 35px 10px 38px 70px;
  background: url('../img/check_background.png') no-repeat center center;
  background-size: contain;
    border: none;
    width: 400px;
    cursor: pointer;
    transition: .15s;
    line-height: 24px;
}

.ov-buttonCheck:hover{
  transform: scale(1.05);
}

.ov-buttonCheck:active {
  transform: scale(0.95);
}

.ov-buttonCheck .check{
 position: absolute;
    right: 66px;
    top: 46px;
}

.ov-buttonCheck.checked .check{
 background: url('../img/ch_checked.png') no-repeat top center;
}

.ov-buttonCheck.checked .check img{
 opacity: 0;
}

/*header*/
#header{
  position: absolute;
  width: 100%;
  z-index: 100;
  top: 0;
  transition: .3s;
}

#logo{
  position: absolute;
  width: 55px;
    z-index: 100;
    right: 20px;
    top: 20px;
    filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, .4));
}

#logo img{
  width: 100%;
}

#btHome{
  position: absolute;
  width: 60px;
  z-index: 100;
  left: 15px;
  top: 30px;
  cursor: pointer;
}

#btHome img{
  width: 100%;
}

/*intro*/

#logo_01{
  width: 90vw;
  max-width: 700px;
  margin-bottom: 50px;
  filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, .4));
}

#logo_01 img{
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/*apretude*/

#apretude_03 {
    margin-top: -40vh;
    margin-left: -30vw;
    transform: scale(1.3);
}

#apretude_04 {
    margin-top: -25vh;
    color: #FFF;
}

#apretude_10 {
  margin-left: -25vw;
}

#btApretude_10 {
  background: url('../img/11_ap_back.png') no-repeat center center;
  padding: 43px 64px 54px 120px;
  background-size: 330px;
}

#btApretude_11 {
  text-align: left;
  padding: 38px 24px 37px 94px;
}

#apretude_12 {
  margin-left: 45vw;
}

#btApretude_12 {
  background: url('../img/10_ap_back.png') no-repeat center center;
  padding: 48px 60px 198px 108px;
}


/*media*/

@media (max-width: 767px) {
  #overlay {
    padding: 20px;
    font-size: 16px;
  }

  .ov-content{
    padding: 20px;
  }

  .ov-button{

    font-size: 14px;
      width: 300px;

  }

  .ov-button2{

    font-size: 14px;
      width: 300px;

  }

  .ov-button3{

    font-size: 14px;
      width: 300px;

  }

  #apretude_03 {
    margin-top: -48vh;
    margin-left: 0;
    transform: scale(1.1);
  }

  #apretude_10 {
   transform: scale(.75);
  }

  #apretude_12 {
   transform: scale(.75);
  }

}

#continueBtn{
bottom: 130px;
right: 40px;
position: absolute;
z-index: 1000000;
}

.start__btn {
color: #071c49;
font-family: "Raleway", sans-serif;
  appearance: none;
  border: 2px solid #FFF; border-radius: 999px;
  padding: 18px 28px;
  font-weight: 700; font-size: 16px;
  color: #0b2233; 
  background: rgba(255, 255, 255, .4);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.start__btn:hover { transform: scale(1.04); box-shadow: 0 14px 44px rgba(0,0,0,.28); }
.start__btn:active { transform: scale(.9); }



#cabenuva_03a{
    top: 50%;
    transform: translateY(-50%);
    padding: 0 !important;
    margin-top: calc(-18vh + 80px) !important;
}

#btcabenuva_03a{
    background: url('../img/05_cabenuvaa.png') no-repeat center center;
    background-size: 100%;
    height: 100px;
    padding: 0;
}

#cabenuva_03b{
    top: 50%;
    transform: translateY(-50%);
    padding: 0 !important;
    margin-top: calc(-18vh) !important;
}

#btcabenuva_03b{
    background: url('../img/05_cabenuvab.png') no-repeat center center;
    background-size: 100%;
    height: 100px;
    padding: 0;
}

#cabenuva_04{
    top: 50%;
    transform: translateY(-50%);
    padding: 0 !important;
    margin-top: 23vh  !important;
    z-index: 1000;
}

#btcabenuva_04{
    background: url('../img/04_cabenuva.png') no-repeat center center;
    background-size: 100%;
    height: 100px;
    padding: 0;
}

#cabenuva_05{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 40vw  !important;
}

#btcabenuva_05{
    background: url('../img/05_cabenuva.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_06{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 40vw  !important;
}

#btcabenuva_06{
    background: url('../img/06_cabenuva.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_07a{
    top: 50%;
    transform: translateY(-50%);
    margin-left: -40vw;
}

#btcabenuva_07a{
    background: url('../img/07_cabenuva_a.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_07b{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 40vw;
}

#btcabenuva_07b{
    background: url('../img/07_cabenuva_b.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_08{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 40vw  !important;
}

#btcabenuva_08{
    background: url('../img/08_cabenuva.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_09{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 40vw  !important;
}

#btcabenuva_09{
    background: url('../img/09_cabenuva.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_10{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 40vw  !important;
}

#btcabenuva_10{
    background: url('../img/10_cabenuva.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_11{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 40vw  !important;
}

#btcabenuva_11{
    background: url('../img/11_cabenuva.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
    
}

#cabenuva_12{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 40vw  !important;
}

#btcabenuva_12{
    background: url('../img/12_cabenuva.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
    width: 500px;
}

#cabenuva_13{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 40vw  !important;
}

#btcabenuva_13{
    background: url('../img/09_cabenuva_a.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_13a{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 4vw  !important;
}

#btcabenuva_13a{
    background: url('../img/13_cabenuva_a.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_13b{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 50vw  !important;
}

#btcabenuva_13b{
    background: url('../img/13_cabenuva_b.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_13c{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 50vw  !important;
}

#btcabenuva_13c{
    background: url('../img/13_cabenuva_c.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_14a{
    top: 50%;
    transform: translateY(-50%);
    margin-left: -40vw;
}

#btcabenuva_14a{
    background: url('../img/14_cabenuva_a.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_14b{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 40vw;
}

#btcabenuva_14b{
    background: url('../img/14_cabenuva_b.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}



#cabenuva_15{
    top: 50%;
    transform: translateY(-50%);
    margin-left: -40vw  !important;
}

#btcabenuva_15{
    background: url('../img/15_cabenuva.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}


#cabenuva_16{
    top: 50%;
    transform: translateY(-50%);
    margin-left: -40vw  !important;
}

#btcabenuva_16{
    background: url('../img/16_cabenuva.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}


#cabenuva_17{
    top: 50%;
    transform: translateY(-50%);
}

#btcabenuva_17{
    background: url('../img/17_cabenuva.png') no-repeat center center;
    background-size: 100%;
    height: 500px;
    padding: 0;
    width: 500px;
}

#cabenuva_18{
    top: 50%;
    transform: translateY(-50%);
    margin-left: -40vw  !important;
}

#btcabenuva_18{
    background: url('../img/18_cabenuva.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}






#cabenuva_24{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 40vw  !important;
}

#btcabenuva_24{
    background: url('../img/24_cabenuva.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_25{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 40vw  !important;
}

#btcabenuva_25{
    background: url('../img/25_cabenuva.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_26a{
    top: 50%;
    transform: translateY(-50%);
    margin-left: -40vw;
}

#btcabenuva_26a{
    background: url('../img/26_cabenuvaa.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_26b{
    top: 50%;
    transform: translateY(-50%);
    margin-left: 40vw;
}

#btcabenuva_26b{
    background: url('../img/26_cabenuvab.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#cabenuva_test{
    top: 50%;
    transform: translateY(-50%) scale(1.5);
}

#btcabenuva_test{
    background: url('../img/cabenuva_test.png') no-repeat center center;
    background-size: 100%;
    height: 320px;
    padding: 0;
}

#selector_02 p{
  margin-bottom: 0;
}

#global-mute-toggle img{
  width: 24px;
  margin-bottom: -4px;
}

.tl-track :nth-child(-n+2 of .tl-dot) {
  display: none;
}

.tl-track :nth-child(-n+2 of .tl-line) {
  display: none;
}

#intro_01{
  transition: 1s;
}


.vc-controls{
  position: absolute;
  left:50%; bottom: 130px;
  transform: translateX(-50%);
  display:flex; gap:50px; align-items:center; justify-content:center;
  margin-top:.5rem; user-select:none;
  z-index: 999999;
}
.vc-btn{

  color: #071c49;
    font-family: "Raleway", sans-serif;
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 11px;
    width: 50px;
    height: 50px;
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    color: #FFF !important;
    background: rgba(0, 0, 0, .4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: transform .12s 
ease, box-shadow .12s 
ease;
    text-indent: 1px;

}

.vc-play{
  padding: 16px;
width: 70px;
    height: 70px;
    font-size: 32px;
}
.vc-btn:hover{ background:#222b; }
.vc-btn:active{ transform:translateY(1px); }
.vc-controls.vc-hidden { display:none; }