.mobile-text-1-0{
  line-height: 1.2;
}

.videostart{
/*height: 100%;
*/width: 100%;
z-index: 100000000;
position: absolute;
top: 0;
left: 0;
}
.desk-vide{
  width: 100%    !important;
  height: 100%   !important;
/*    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
  position: absolute;
  top: 50%;*/
}

.viddd{
  height:100%;
  background-color: black;
  position:relative
}

#mute-video{
  width: 25px;
  height: 25px;
  background-size: 100% auto;
  position: absolute;
  bottom: 20px;
  right: 35px;
  z-index: 1;
}
#skip-video{
  position: absolute;
bottom: 20px;
z-index: 2000000000;
color: #fff;
margin:auto ;
left:0;
right:0;
text-align: center;
font-size: 18px;
letter-spacing: 2px;
cursor:pointer;
display: none;
width: 170px
}
.sound-on{
  background-image: url("../images/SON_ON.png");
}
.sound-off{
  background-image: url("../images/SON_OFF.png");
}
#mute-video{
  cursor: pointer;
}




a , img , div{
   outline: 0;
}

img{
  border:0;
}
.image-frise{
width:326px;
height:480px;
}
.burger{
  width: auto;margin-top: 25px;margin-left: 35px;width:30px;cursor:pointer
}

#loader{
  width:100%;
  height:100%;
  background-color: black;
  position: absolute;
  z-index: 10000000000000000;
  top: 0;
  left: 0;
  background-image: url(../images/loading.gif);
  background-repeat: no-repeat;
  background-position: center center;
}
.header-up img{
  height:auto !important;
}
.close-modal {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity: 1;
  cursor:pointer;
  z-index: 1000000000000000;
}
.close-modal:hover {
  opacity: 0.8;
}
.close-modal:before, .close-modal:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #fff;
}
.close-modal:before {
  transform: rotate(45deg);
}
.close-modal:after {
  transform: rotate(-45deg);
}

.img-video{
  cursor:pointer;
}


.mod-video , .mod-video-2{
  height:100%;
  width:100%;
  background-color:#000000;
  position:fixed;
  top:0;
  left:0;
  z-index:1000000;
  display: none;
}

.play-video-1 , .play-video-2{
cursor: pointer;
}






 /* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    position: fixed; /* Stay in place */
    z-index: 200000000; /* Stay on top */
    top: 0; /* Stay at the top */
    background-color: #000; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav div , .sidenav a{
    padding: 8px 32px 8px 32px;
    text-decoration: none;
    color: #fff;
    display: block;
    transition: 0.3s;
}



/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 5px;
    right: 25px;
    font-size: 36px;
    margin: 0;
    padding: 0;
}
.link{
	cursor: pointer;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#whole , #head{
    transition: margin-left .5s;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
} 







html, body {
  background-color: black;
      position: relative;
      height: 100%;
    }
    body {
      background: #000;
      font-family: 'HelveticaNeueLTStd-Th', Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 18px;
      line-height: 1.4;
      color:#fff;
      margin: 0;
      padding: 0;
    background-color: #000;

    }

    .header-up{
    	position: fixed;
    	z-index:200000;
    	width:100%;
    	height:70px;
    	background-color:#373737;
      top: 0;
      left:0;
    }

    .upup{
    	position: absolute;
    	right: 15px;
    	top: 20px;
    	height: auto;
    }

    .toptop{
    	float:left;
    	margin-right:10px;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }


    .swiper-button-disabled{
      opacity: 0 !important;
    }
    
    .parallax-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 125%;
      -webkit-background-size: cover;
      background-size: cover;
      background-position: center center;
    }
    .swiper-slide .title {
      font-size: 41px;
      font-weight: 300;
    }
    .swiper-slide .subtitle {
      font-size: 21px;
    }
    .swiper-slide .text {
      font-size: 14px;
      max-width: 400px;
      line-height: 1.3;
    }

      /* whole */



      #whole .swiper-slide {
      display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
      display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox;      /* TWEENER - IE 10 */
      display: -webkit-flex;     /* NEW - Chrome */
      display: flex;  

      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;

      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

      .swiper-slide {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0;
    }

     .swiper-button-prev{
      top: 100px;
      bottom: auto;
      left: 0;
      right: 0;
      margin: auto;

    }

    .swiper-button-next{
      top: auto;
      bottom: 10px;
      left: 0;
      right: 0;
      margin: auto;
    }

    .swiper-button-next ,.swiper-button-prev{
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
    }


/* INSIDE */


   #inside {

      padding-top: 70px;
      padding-bottom: 0;
    }


    #inside .swiper-slide {
      background-position: center;
      background-size: cover;
      width:326px;
      height:480px;
      padding:0;
    }

     .swiper-button-prev-inside{
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
      position: absolute;
      left: 10px;
      right: auto;
      top: 50%;
      width: 27px;
      height: 44px;
      margin-top: -22px;
      z-index: 100;
      cursor: pointer;
      background-size: 27px 44px;
      background-position: center;
      background-repeat: no-repeat;

    }

    .swiper-button-next-inside{
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
      right: 10px;
      left: auto;
      position: absolute;
      top: 50%;
      width: 27px;
      height: 44px;
      margin-top: -22px;
      z-index: 100;
      cursor: pointer;
      background-size: 27px 44px;
      background-position: center;
      background-repeat: no-repeat;
    }


    #inside .inandout{
      display:none;
      width:326px;
      height:480px;
      position:absolute;
      right:-326px;
      top: 0;
      background-color:#373737;
      padding:60px 30px;
      -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
      -moz-box-sizing: border-box;    /* Firefox, other Gecko */
      box-sizing: border-box;         /* Opera/IE 8+ */
    }

    #inside .title-grey{
      font-size:230%;
      text-transform: uppercase;
      margin-bottom:20px;
    }

    #inside .more {
      cursor: pointer;
      display: none;
      width: 50px;
      height: 50px;
      border: 1px solid #fff;
      border-radius: 50%;
      position: absolute;
      margin: auto;
      right:0;
      left:0;
      bottom:20px;
      behavior: url(PIE.htc); /* remove if you don't care about IE8 */
      box-shadow:0 0 1px #fff;

    }

    #inside .close {
      position: absolute;
      left: 13px;
      top: 13px ;
      width: 24px;
      height: 24px;
      -webkit-transition: all .4s ease-in-out;
      -o-transition: all .4s ease-in-out;
      transition: all .4s ease-in-out;
    }
    /*.close:hover {
    opacity: 1;
    }*/
    #inside .close:before, #inside .close:after {
      position: absolute;
      left: 12px;
      content: ' ';
      height: 24px;
      width: 1px;
      background-color: #fff;
    }
    #inside .close:before {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
       transform: rotate(0deg);
    }
    #inside .close:after {
      -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }

    #inside .rotate{
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }

    .three{
   /*   display: flex;
      align-items: center;
      justify-content: center;*/
    }

    .swiper-container-coverflow{
      padding-top: 0;
      padding-bottom: 0;
      height: auto;
    }

    .scene{
      max-width:1440px;
      width:80%;
/*      margin:auto
*/    }





    .back{
      z-index: 2;
      position: fixed;
      margin: auto;
      cursor: pointer;
      width: 55px;
      height: 55px;
      border: 1px solid #fff;
      border-radius: 50%;
      behavior: url(PIE.htc);
      box-shadow: 0 0 1px #fff;
      top: 90px;
      right: 20px;
    }


    .back .cross {
      position: absolute;
      left: 15px;
      top: 15px ;
      width: 25px;
      height: 25px;
      -webkit-transition: all .4s ease-in-out;
      -o-transition: all .4s ease-in-out;
      transition: all .4s ease-in-out;
      pointer-events: all
    }

      .back .cross:before, .back .cross:after {
      position: absolute;
      left: 12px;
      content: ' ';
      height: 24px;
      width: 1px;
      background-color: #fff;
    }
    .back .cross:before {
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       transform: rotate(45deg);
    }
    .back .cross:after {
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

@media screen and (max-width: 1440px) {

  .back{
      width: 40px;
      height: 40px;
  }


  .back .cross:before, .back .cross:after {
        left: 12px !important;
        height: 18px !important;
  }

  .back .cross {
    left: 7px !important;
    top: 11px !important;
    width: 18px !important;
    height: 18px !important;
  }


  .scene-1 .link-in-round,.scene-2 .link-in-round,.scene-3 .link-in-round,.scene-4 .link-in-round{
      width: 40px;
      height: 40px;
  }


  .scene .close::before, .scene .close::after{
        left: 12px !important;
        height: 18px !important;
  }

  .scene .close {
    left: 7px !important;
    top: 11px !important;
    width: 18px !important;
    height: 18px !important;
  }

}



    .link-in-round{
      top:10px;
      position: relative;
      margin: auto;
      cursor: pointer;
      width: 55px;
      height: 55px;
      border: 1px solid #fff;
      border-radius: 50%;
      behavior: url(PIE.htc); /* remove if you don't care about IE8 */
      box-shadow:0 0 1px #fff;
      pointer-events: all
    }

    .link-in-container{
      position: absolute;
      z-index:4;
      text-align: center;
      display:inline-block !important;
      font-size: 150%;
      pointer-events: all;
      cursor: pointer;
      padding-bottom:30px;
    }
    .scene .close {
      position: absolute;
      left: 15px;
      top: 15px ;
      width: 25px;
      height: 25px;
      -webkit-transition: all .4s ease-in-out;
      -o-transition: all .4s ease-in-out;
      transition: all .4s ease-in-out;
      pointer-events: all
    }

      .scene .close:before, .scene .close:after {
      position: absolute;
      left: 12px;
      content: ' ';
      height: 24px;
      width: 1px;
      background-color: #fff;
    }
    .scene .close:before {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
       transform: rotate(0deg);
    }
    .scene .close:after {
      -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }

    .link-in-container-1 {
      left: 69% !important;
      top: 18% !important;
    }

    .link-in-container-2 {
      left: 61% !important;
      top: 8% !important;
    }

    .link-in-container-3 {
      left: 17% !important;
      top: 14% !important;
    }

    .link-in-container-4 {
      left: 59% !important;
      top: 52% !important;
    }

    .layer{
      position: absolute;
    }

    #img_1_1{
      pointer-events: all;
      width:41%;
      top:61% !important;
      left: 0 !important;
      z-index: 3;
    }
    #img_1_2{
      width:20%;
      top:5% !important;
      left: 7% !important;
      z-index: 1;
    }
    #img_1_3{
      width:37%;
      top:0 !important;
      left: 25% !important;
      z-index: 2;
    }
    #img_1_4{
      width:20.5%;
      top:48% !important;
      left:61% !important;
      z-index: 3;
    }
    #img_1_5{
      width:22%;
      top:34% !important;
      left: 78% !important;
      z-index: 2;
    }

    #img_2_1{
      width:40%;
      top:16% !important;
      left: 0 !important;
      z-index: 1;
    }
    #img_2_2{
      width:40%;
      top:0 !important;
      left: 27% !important;
      z-index: 1;
    }
    #img_2_3{
      width:15%;
      top:64% !important;
      left: 62% !important;
      z-index: 1;
    }
    #img_2_4{
      width:25%;
      top:28% !important;
      left:75% !important;
      z-index: 2;
    }

    #img_3_1{
      width:40%;
      top:35% !important;
      left: 0 !important;
      z-index: 2;
    }
    #img_3_2{
      width:20%;
      top:6% !important;
      left: 37% !important;
      z-index: 1;
    }
    #img_3_3{
      width:32%;
      top:40% !important;
      left: 51% !important;
      z-index: 2;
    }
    #img_3_4{
      width:39%;
      top:0 !important;
      left:61% !important;
      z-index: 1;
    }

    #img_4_1{
      pointer-events: all;
      width:41%;
      top:40% !important;
      left: 0 !important;
      z-index: 3;
    }
    #img_4_2{
      width:26%;
      top:0 !important;
      left: 28% !important;
      z-index: 2;
    }
    #img_4_3{
      width:36%;
      top:50% !important;
      left: 34% !important;
      z-index: 1;
    }
    #img_4_4{
      width:42%;
      top:5% !important;
      left:58% !important;
      z-index: 2;
    }


    .scene img{
      width: 100%;
      height: auto;
    }





.chapter-1-mobile , .chapter-2-mobile , .chapter-3-mobile , .chapter-4-mobile{
  display: none;
  position: absolute;
  z-index: 2;
  height: 100%;
  width:100%;
  background-color: #000;

}



.mobile-chapter .tiers-1 ,.mobile-chapter .tiers-2,.mobile-chapter .tiers-3{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box; 

}

  .mobile-chapter  .back{

      top: 70px;
    }




.mobile-chapter .tiers-1 , .mobile-chapter .tiers-3{
display: -webkit-box !important;
display: -moz-box !important;
display: -ms-flexbox !important;
display: -webkit-flex !important;
display: flex !important;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

}
.mobile-chapter .tiers-1{
 padding: 0;
 margin-top:70px !important;


}
.mobile-chapter .tiers-2{
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: initial !important

}
.mobile-chapter .tiers-3{
  position: relative !important;


}


.mobile-chapter   .link-in-container-1 , .mobile-chapter   .link-in-container-2 , .mobile-chapter   .link-in-container-3 , .mobile-chapter   .link-in-container-4 {
text-align: : center;
margin: auto;
position: initial !important;
}

.mobile-chapter #img_1_4 , .mobile-chapter #img_4_1{
text-align: : center;
margin: auto;
position: initial !important;
width: 100%;
top: auto;

}

.mobile-chapter .link-in-container{
        cursor: initial;

}

.mobile-chapter .link-in-round-mobile{

      text-align: center;
      margin: auto;
      position: relative !important;
      cursor: pointer;
      width: 55px;
      height: 55px;
      border: 1px solid #fff;
      border-radius: 50%;
      behavior: url(PIE.htc); /* remove if you don't care about IE8 */
      box-shadow:0 0 1px #fff;
      pointer-events: all
    }

.mobile-chapter #scene-1 , .mobile-chapter #scene-2, .mobile-chapter #scene-3, .mobile-chapter #scene-4{
  height:100% !important;
/*   display: flex;
  flex-direction: column;
  padding-top: 70px;*/

}

.mobile-chapter{
    overflow-y:scroll;
}

.desk .show{
  display: none !important;
}

.chapter-1-mobile ,.chapter-2-mobile ,.chapter-3-mobile ,.chapter-4-mobile {

padding-top:70px;
font-size: 120%
}


.mobile-text{
  padding:12%;

}
.chapter-1-mobile img,.chapter-2-mobile img,.chapter-3-mobile img,.chapter-4-mobile img{
  width:100%;
  height: auto;

}

.mobile-chapter .show{
  display: block ;
}
.mobile-chapter .link-dl{
  display: none;
}

@media screen and (max-width: 1440px) {
  .scene-1 .link-in-round-mobile,.scene-2 .link-in-round-mobile,.scene-3 .link-in-round-mobile,.scene-4 .link-in-round-mobile{
  /*    width: 40px;
      height: 40px;*/
  }
}

.mobile-chapter .scene .close::before,.mobile-chapter .scene .close::after{
  left: 20px !important;
  height: 25px !important;
  top: 5px !important;

}


.mobile-chapter .hide{
display:none !important;
}


.mobile-chapter .image-frise{
width:280px;
height:409px;
}

.mobile-chapter .swiper-wrapper{
padding-bottom: 26px
}

.mobile-chapter .swiper-button-prev.swiper-button-white,
.mobile-chapter .swiper-button-next.swiper-button-white,
.mobile-chapter .swiper-button-prev-inside,
.mobile-chapter .swiper-button-next-inside {
background-size: 15px;
  }

.mobile-chapter .swiper-button-prev{
  top: 40px;
}
.mobile-chapter .swiper-button-next{
  bottom: -10px;
}


.mobile .burger , .mobile-chapter .burger{
 margin-top: 17px;
 margin-left: 20px;
 width:30px;
 cursor:pointer
}

.mobile-chapter .header-up , .mobile .header-up{
  height: 50px;
}

.mobile-chapter .upup , .mobile .upup{
  top:10px;
  right: 10px;
}


.mobile-chapter{
font-size: 15px;
  background-image:url(../images/backgd_2.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #000;
} 


.mobile-chapter .swiper-slide{
  margin-left:auto;
  margin-right:auto;
}    



.mobile-chapter #inside .swiper-slide {
      background-position: center;
      background-size: cover;
      width:280px;
      height:409px;
      padding:0;
    }

   .mobile-chapter #inside{
      padding-top: 85px;       /* Opera/IE 8+ */
    }

   .mobile-chapter #inside .inandout{
      display:none;
      width:280px;
      height:409px;
      position:absolute;
      left:0;
      top: 0;
      background-color:#373737;
      padding:60px 30px;
      -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
      -moz-box-sizing: border-box;    /* Firefox, other Gecko */
      box-sizing: border-box;         /* Opera/IE 8+ */
    }


.mobile-chapter  #inside .more {
     
      bottom:-25px !important;

      z-index: 200 !important;
    }

img , div {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}