@font-face {
    font-family: 'robotobold';
    src: url('roboto-bold-webfont.woff2') format('woff2'),
         url('roboto-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotoregular';
    src: url('roboto-regular-webfont.woff2') format('woff2'),
         url('roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body{
  background-color: #EAEAEA;
  font-family: 'robotoregular';
}
button{
  border: 0;
  background-color: transparent;
}
#pdfViewer, #pdfViewer2, #pdfViewer3, #pdfViewerD01, #pdfViewerD02, #pdfViewerD03 {
      position: absolute;
      top: 4vh;
      display: none;
      width: 100%;
      height: 94vh;
      border: none;
      z-index: 1000;
      background-color: gray;
    }
.pdfViewerHidden {
      display: none;
    }
#btnClosePDF, #btnClosePDF2, #btnClosePDF3, #btnClosePDFD01, #btnClosePDFD02, #btnClosePDFD03{
    text-align: center;
    width: 100%;
    height: 3.5vh;
    background-color: #E21212;
    position: fixed;
    z-index: 10000;
    color: white;
  }

#downloadInstaller{
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.5;
  position: fixed;
  top: 10px;
  right: 10px;
  background-image: url("images/download01.png");
  background-size: 100%;
  background-repeat: no-repeat;
}
a {
    text-decoration: none;
}
#logoTitle {
  position: absolute;
  width: 20%;
  top: 15px;
  left: 15px;
}
#downloadInstaller span{
    display: none;
    width: 300px;
    position: relative;
    right: 230px;
    text-decoration: none;
    color: black;
}
#downloadInstaller:hover{
  opacity: 0.8;
}
#downloadInstaller:hover span{
  display: block;
}
#description{
  position: absolute;
  border: 3px solid #3AD1EC;
  border-radius: 5px;
  width: 300px;
  padding: 20px;
  float: left;
  left: 2%;
  top: 4%;
  display: none;
}
#D3 .hoverDescription{
  left: 130px;
  top: -90px;
}
#D4 .hoverDescription{
    top: -78px;
    left: 140px;
}
.hoverDescription{
    position: relative;
    top: -120px;
    left: 170px;
    background-color: white;
    z-index: 10000;
    width: 322px;
    padding: 18px;
    border-radius: 10px;
    border: 3px solid #3AD1EC;
    font-size: 8pt;
    display: none;
}
#container button{
  border: 0;
}
#container{
  position: relative;
  top: 19vh;
  width: 30%;
  max-width: 658px;
  margin: 0 auto;
}
#container img{
  max-width: 100%;
}
.icons{
  position: absolute;
  transition: transform 0.2s ease-out;
  text-align: justify;
}
.icons span{
  font-family: 'robotobold';
  color: #0082CE;
  font-size: 10pt;
}
.icons:hover{
  transform: scale(1.25);
}

.icons:hover .hoverDescription{
  /*display: block;*/
}

.non-selectable {
  user-select: none;
  position: absolute;
  opacity: 0.6;
}

#D1 {
    top: -14%;
    left: 36%;
    width: 30%;
    z-index: 1;
}
#D2 {
  top: -4%;
  right: -11%;
  width: 41%;
}
#D3 {
    top: 30%;
    right: -29%;
    width: 46%;
}
#D4 {
    top: 61%;
    right: -16%;
    width: 40%;
}
#D5 {
  top: 79%;
  right: -3%;
  width: 47%;
}
#D6 {
  top: 80%;
  right: 53%;
  width: 32%;
}
#D7 {
  top: 61%;
  right: 78%;
  width: 50%;
}
#D8 {
  top: 32%;
  right: 84%;
  width: 43%;
}
#demolition {
  top: -5%;
  right: 98%;
  width: 20%;
}
#D9 {
  top: -1%;
  right: 66%;
  width: 33%;
}
#L01 {
  top: -5%;
  left: -52%;
  width: 25%;
}
#L02 {
  top: 10%;
  left: -62%;
  width: 24%;
}
#L03 {
  top: 29%;
  left: -65%;
  width: 22%;
}
#L04 {
  top: 50%;
  left: -65%;
  width: 23%;
}
#L05 {
  top: 66%;
  left: -61%;
  width: 26%;
}
#L06 {
  top: 82%;
  left: -50%;
  width: 29%;
}
#btnVideo_v01{
  top: -2%;
  right: -58%;
  width: 25%;
}
#btnVideo_v02{
  top: 15%;
  right: -63%;
  width: 23%;
}
#btnVideo_v03{
  top: 34%;
  right: -64%;
  width: 20%;
}
#btnVideo_v04{
  top: 51%;
  right: -63%;
  width: 23%;
}
#btnVideo_v05{
  top: 65%;
  right: -56%;
  width: 28%;
}
.infoScreen {
  width: 99%;
  height: 98%;
  background-image: url("images/background_SiglerPass.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 14px;
  position: absolute;
  top: -1500px;
  transition: top 0.3s ease-out, opacity 0.3s ease-out, transform 0.2s ease-out;
  margin: 10px auto;
  opacity: 0;
  display: block;
  color: white;
  overflow: hidden;
  z-index: 10000;
}
.infoScreen.animate{
  top: 0px;
  opacity: 1.0;
}

.header{
  height: 80px;
  width: 100%;
  margin: 0 auto;
  padding-top: 22px;
  margin-bottom: 30px;
  float: left;
}
  .header #blockHeader{
    float: left;
    width: 80%;
  }
    .header #blockHeader #blockOne{
      margin-left: 2%;
      width: 740px;
      overflow: hidden;
    }
    .header #blockHeader h4{
      background-color: #0082CE;
      width: 204px;
      text-align: center;
      float: left;
      height: 37px;
      font-size: 15pt;
      padding-top: 9px;
      margin-top: 8px;
    }
  .header .arrows{
    width: 60px;
    padding-top: 10px;
    overflow: hidden;
    float: left;
  }
    .header .arrows img{
      width: 100%;
    }
    .header #arrowBack{
      width: 30px;
      float: left;
      padding-top: 4px;
    }
    .header #arrowForward{
      width: 30px;
      float: left;
      transform: rotate(180deg);
    }
  .header #icon{
    width: 60px;
    margin-left: 12px;
    display: block;
    float: left;
  }
  .header #titlePage{
    float: left;
    width: 402px;
  }
  .header #titlePage h2{
    float: left;
    display: block;
    font-size: 35pt;
    border-left: 4px solid #00D2FF;
    padding-left: 14px;
    margin: 0 20px;
  }
  .header #titlePage h3{
    float: left;
    display: block;
    font-size: 14pt;
    width: 267px;
    margin: 6px;
  }
.menuNav{
    width: 15%;
    height: 75%;
    padding: 1%;
    float: left;
    border-right: 1px solid #1D4A72;
}
  .menuNav button{
    width: 100%;
    background-color: white;
    padding: 16px 5px;
    margin-bottom: 25px;
    font-size: 11pt;
    border-radius: 7px;
  }  
    .menuNav button:hover{
      background-color: #0082CE !important;
      color: white !important;
    }

 .chapter {
  float: left;
  width: 80%;
 }
.topics{
  width: 20%;
  float: left;
  border-right: 1px solid #1D4A72;
  height: 76vh;
  display: block;
}
.topics li{
  color: #0082CE;
  padding: 6px;
  font-size: 13pt;
}
.topics li:hover{
  background-color: #FFC700;
}
.topics li span{
  color: white;
}
#sidebox li {
    float: left;
    margin-right: 29px;
}
#divTopics6D01, #divTopics7D02, #divTopics7D03, #divTopics7D04, #divTopics7D05{
    width: 20%;
    float: left;
    border-right: 1px solid #1D4A72;
    margin-right: 100px;
    height: 80%;
    display: block;
}
  #divTopics6D01 li, #divTopics7D02 li, #divTopics7D03 li, #divTopics7D04 li, #divTopics7D05 li{
    color: #0082CE;
    padding: 6px;
    font-size: 13pt;
  }
    #divTopics6D01 li:hover, #divTopics7D02 li:hover, #divTopics7D03 li:hover, #divTopics7D04 li:hover, #divTopics7D05 li:hover{
      background-color: #FFC700;
  }
   #divTopics6D01 li span, #divTopics7D02 li span, #divTopics7D03 li span, #divTopics7D04 li span, #divTopics7D05 li span{
    color: white;
  }

#divTopics6D02{
    width: 264px;
    float: left;
    border-right: 1px solid #1D4A72;
    margin-right: 100px;
    height: 80%;
    display: block;
}
  #divTopics6D02 li{
    color: #0082CE;
    padding: 6px;
    font-size: 13pt;
  }
    #divTopics6D02 li:hover{
      background-color: #FFC700;
  }
   #divTopics6D02 li span{
    color: white;
  }

.close{
    color: black;
    font-size: 12pt;
    background-color: whitesmoke;
    border-radius: 100px;
    text-align: center;
    font-weight: 100;
    float: right;
    margin-right: 30px;
    width: 42px;
    height: 42px;
}
.containerInfo {
    width: 73%;
    float: left;
}
.containerInfo img{
  max-height: 80vh;
  float: left;
  -webkit-box-shadow: 10px 10px 9px -8px rgba(30,28,54,1);
  -moz-box-shadow: 10px 10px 9px -8px rgba(30,28,54,1);
  box-shadow: 10px 10px 9px -8px rgba(30,28,54,1);
}

#sidebox{
  float: left;
  width: 50%;
  padding-left: 2%;
} 
#sidebox h4{
  font-size: 20pt;
  color: #00E4FF;
} 
#sidebox p{
  font-size: 15pt;
} 
#sidebox button{
    background-color: #FFC700;
    border-radius: 6px;
    color: white;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 12pt;
}
#sidebox button:hover{
  background-color: transparent;
  border: 1px solid  #FFC700;
}
.select{
  background-color: #0082CE !important;
  color: white !important;
}
.Data{
  opacity: 0.0;
  position: absolute;
  top: 130px;
  left: 35%;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  transform: translateX(1300px);
  will-change: transform, opacity;
  width: 64%;
}
.animIn{
  transform: translateX(0px) !important;
  opacity: 1.0 !important;
}
#Video1D01, #Video1D02, #Video1D03, #Video2D01, #Video2D02, #Video2D03,  #Video2D04,  #Video2D05,  #Video2D06, #Video3D01, #Video4D01, #Video5D01, #Video5D02,#Video5D03,#passMovileVideo, #passMovileVideo6D02, #passPlusVideo7D01, #passPlusVideo7D02, #passPlusVideo7D03, #passPlusVideo7D04, #passPlusVideo7D05, #Video8D01, #Video9D01, #Video9D02, #Video9D03{
  position: absolute;
  width: 100%;
  background-color: black;
  height: 96vh;
  top: 0;
  left: 0;
  z-index: 100;
}
#videoContainer1D01, #videoContainer1D02, #videoContainer1D03, #videoContainer2D01, #videoContainer2D02, #videoContainer2D03, #videoContainer2D04, #videoContainer2D05, #videoContainer2D06, #videoContainer3D01, #videoContainer4D01, #videoContainer5D01,#videoContainer5D02,#videoContainer5D03,#videoContainer, #videoContainer6D02, #videoContainer7D01, #videoContainer7D02, #videoContainer7D03, #videoContainer7D04, #videoContainer7D05, #videoContainer8D01, #videoContainer9D01, #videoContainer9D02, #videoContainer9D03{
  display: none;
}
.horizontal img{
  width: auto;
  height: auto;
  max-width: 95%;
  max-height: 65vh;
}
.horizontal #sidebox{
    width: 100%;
    padding-left: 0;
    margin-top: 0;
    margin-left: 0;
    float: left;
    height: 120px;
}
#closeVideo1D01, #closeVideo1D02, #closeVideo1D03, #closeVideo2D01, #closeVideo2D02, #closeVideo2D03, #closeVideo2D04, #closeVideo2D05, #closeVideo2D06, #closeVideo3D01, #closeVideo4D01, #closeVideo5D01, #closeVideo5D02, #closeVideo5D03, #closeVideo, #closeVideo6D02, #closeVideo7D01, #closeVideo7D02, #closeVideo7D03, #closeVideo7D04, #closeVideo7D05, #closeVideo8D01, #closeVideo9D01, #closeVideo9D02, #closeVideo9D03, #closeVideo_v01, #closeVideo_v02, #closeVideo_v03, #closeVideo_v04, #closeVideo_v05{
    position: absolute;
    right: 29px;
    top: 23p<div id="infoScreen1D" class="infoScreen">…</div>x;
    color: black;
    font-size: 12pt;
    background-color: whitesmoke;
    border-radius: 100px;
    text-align: center;
    font-weight: 100;
    padding: 10px;
    width: 42px;
    height: 42px;
    z-index: 200;
}
.hidevideo, #chapterD102, #chapterD103, #chapterD202, #chapterD203, #chapterD204, #chapterD205, #chapterD206, #chapterD302, #chapterD303, #chapterD304, #chapterD402, #chapterD502, #chapterD503,#chapterD602, #chapterD702, #chapterD703, #chapterD704, #chapterD705, #chapterD802, #chapterD803, #chapterD902, #chapterD903{
  display: none;
}
#videoContainer_v01, #videoContainer_v02, #videoContainer_v03, #videoContainer_v04, #videoContainer_v05 {
  display: none;
}
.containerMainVideos{
    width: 99%;
    position: absolute;
    top: 0px;
    z-index: 1000;
    height: 98vh;
    overflow: hidden;
}
.mainVideos{
    width: 100%;
    height: 100vh;
    background-color: black;
}
#vsplus{
    position: absolute;
    left: 18%;
    top: 2%;
    width: 4.5%;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    overflow: hidden;
    padding: 0;
}
#vsplus img{
  width: 100%;
}
#mIcons, #mIconsLanding {
   display: none;
    }

@media (max-width: 830px) and (min-height: 414px){

  #btnVideoContainer, #btnLandingContainer, #downloadInstaller{
    display: none;
    }
  #container {
    top: 16vh;
    width: 62%;
  }
  .infoScreen{
    overflow: auto;
  }
  #vsplus {
    left: 40%;
    top: 2%;
    width: 9%;
    border-radius: 5px;
  }
  #logoTitle {
    width: 40%;
    top: 15px;
    left: 15px;
  }
  .menuNav {
    width: 97%;
    height: unset;
  }
  .topics{
    width: 100% !important;
    height: unset;
  }
  .Data{
    top: unset;
    left: 0;
    width: 100%;
  }
  .chapter{
    width: 100%;
  }
  .containerInfo img {
    max-height: unset;
    width: 100%;
  }
    #mIconsLanding {
        position: relative;
        top: 22vh;
        margin: 0 auto;
        display: grid;
        gap: 13px;
        grid-template-columns: repeat(3,1fr);
        width: 100%;
    }
    #mIcons {
        position: relative;
        top: 25vh;
        margin: 0 auto;
        display: grid;
        gap: 13px;
        grid-template-columns: repeat(5,1fr);
        width: 100%;
    }
    .micons {
        background-color: #EBEBEB;
        transition: transform 0.2s ease-out;
    }

      .micons:hover{
        transform: scale(1.1);
      }

      .micons span {
        text-align: center;
        display: block;
        width: 100%;
        font-weight: 800;
        color: #005391;
        font-size: 10pt;
    }
    #mIcons .micons img, #mIconsLanding .micons img {
        width: 100%;
    }
}