/* Required height of parents of the Half Page Carousel for proper displaying carousel itself */

html {
  --scrollbarBG: #CFD8DC;
  --thumbBG: #EB9801;
}
body::-webkit-scrollbar {
  width: 10px;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

html,
body,
header,
.view {
  height: 100%;
}
.logo{
  position: absolute;
  width: 0px;
  margin-top: -35px;
}
.logoCarrusel{
  width: 200px;
}
blockquote{
  border-left-style: solid;
  padding-left: 10px;
}
.btnEventoOnline{
  border-radius: 10px;
  background-color: #405472;
  font-size: 12px;
  color: #FFF;
  padding-right: 12px;
  padding-left: 12px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.btnReservar{
  border-style: none;
  border-radius: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 32px;
  padding-right: 32px;

  background: rgb(5,191,83);
  background: -moz-linear-gradient(0deg, rgba(5,191,83,1) 0%, rgba(93,172,11,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(5,191,83,1) 0%, rgba(93,172,11,1) 100%);
  background: linear-gradient(0deg, rgba(5,191,83,1) 0%, rgba(93,172,11,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#05bf53",endColorstr="#5dac0b",GradientType=1);
  transition: all 0.4s ease-in-out;
}
.imgTarjetas{
  width: 400px;
}
.textoRegistro{
  width: 500px;
  border-radius: 12px;
  border-style: none;
  border-color: #CCC;
}
.btnReservar:hover{
  border-radius: 50px;
  transition: all 0.4s ease-in-out;
}
.edwin{
  /*width: 200px;*/
  width: 280px;
  /*border-radius: 280px;*/
  margin-left: 25px;
  margin-top: 28px;
}

.julio{
  /*width: 220px;*/
  width: 280px;
  /*border-radius: 260px;*/
  margin-left: 110px;
  margin-top: 25px;
}

.susana{
  width: 280px;
  /*border-radius: 280px;*/
}

.reservaTuLugar{
  font-size: 28px;
  color: #FFF;
}

.plazaLimitada{
  font-size: 18px;
  color: #FFF;
}

.letraMenu{
  color: #FFF;
}
.letraMenu:hover{
  color: #E69300;
}

.reserva{
  color: #00CDAC;
}
.reserva:hover{
  color: #E69300;
}
@media (max-width: 740px) {

  html,
  body,
  header,
  .view {
    /*height: 1050px;*/
  }
  .logo{
    position: relative;
    width: 60px;
    margin-top: 2px;
  }
  .logoCarrusel{
    width: 0px;
  }
  .imgTarjetas{
    width: 350px;
  }
  .soloPc img{
    display: none;
  }
  .edwin{
    width: 170px;
    margin-left: 2px;
    margin-top: 25px;
  }

  .julio{
    width: 170px;
    margin-left: 110px;
    margin-top: 2px;
  }

  .susana{
    margin-top: 25px;
    width: 170px;
  }

}

@media (min-width: 800px) and (max-width: 850px) {

  html,
  body,
  header,
  .view {
    /*height: 700px;*/
  }
  
}

@media (min-width: 800px) and (max-width: 850px) {
  .navbar:not(.top-nav-collapse) {
    background: #1C2331 !important;
  }

}

@media screen and (min-device-width: 1024px) and (max-device-height: 1310px){
  html,
  body,
  header,
  .view {
    
    /*height: 105%;*/
  }
  .full-page-intro{
    /*height: 105%;*/
  }
  .video-intro2{
    /*width: 100%;*/
   
  }
}

@media screen and (min-device-width: 1024px) and (max-device-height: 768px){
    html,
    body,
    header,
    .view {
      
      /*height: 105%;*/
    }
    .full-page-intro{
      /*height: 105%;*/
    }
    .video-intro2{
      /*width: 100%;*/
     
    }
}



@media only screen and (min-device-width: 360px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
  html,
  body,
  header,
  .view {
    /*height: 300px;*/
  }
  .full-page-intro{
    /*height: 300px;*/
  }
  .video-intro2{
    /*width: 100%;
    top: 75px;*/
  }

}
@media only screen and (min-device-width: 375px) and (max-device-width: 750px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  html,
  body,
  header,
  .view {
    /*height: 400px;*/
  }
  .full-page-intro{
    /*height: 400px;*/
  }
  .video-intro2{
    /*width: 100%;
    top: 75px;*/
  }

  .edwin{
    width: 120px;
    margin-left: 170px;
    margin-top: -150px;
  }

  .julio{
    width: 120px;
    margin-left: 280px;
    margin-top: -120px;
  }

  .susana{
    margin-top: -250px;
    margin-left: 350px;
    width: 120px;
  }
}