:root {
   font-family: Roboto;
}

body {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   flex-direction: column;
}

sub {
   font-size: 16px;
   font-weight: bold;
}

nav {
   z-index: 999999;
}

/* Navbar */
.logo-navbar {
   width: 150px;
}

.navbar-height {
   height: 80px;
}

.navbar-gap {
   gap: 50px;
}

/* Video Portada */

.portada-div {
   display: block;
}

.volumen-icon {
   width: 60px;
}

.web-cont {
   display: none;
}

.video-portada {
   height: 100dvh;
   background-color: black;
   display: block;
}

.video-portada-desktop {
   display: block;
}

.video-portada-mobile {
   display: none;
}

a.button-unmute {
   position: absolute;
   bottom: 20px;
   left: 20px;
   text-decoration:none;
   color: #AA3C3B;
}

a.button-unmute:hover {
   text-decoration: underline;
}

a.button-saltar {
   position: absolute;
   bottom: 20px;
   right: 20px;
   text-decoration:none;
   color: #AA3C3B;
   display: none;
}

a.button-saltar:hover {
   text-decoration: underline;
}

/* Hero */
.hero-container {
   height: calc(100dvh - 70px);
}

.hero-video {
   display: block;
}

.hero-video-mobile {
   display: none;
}

.hero-text {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-top: 50px;
}

.hero-images {
   display: flex;
   width: 100%;
   justify-content: space-between;
   align-items: flex-end;
}

section.vid {
   height: 700vh;
   position: relative;
}

section.vid div.holder {
   position: sticky;
   top: 0;
}

section.vid .welcome-container {
   position: fixed;
   top: 15px;
   left: 75px;
   width: 100%;
}

section.vid .welcome-container.init {
   position: absolute;
   top: 15px;
   left: 75px;
   width: 100%;
}

section.vid .welcome-container .welcome {
   height: 100dvh;
   display: flex;
   justify-content: center;
   flex-direction: column;
   font-size: 28px;
   width: 35%;
   align-items: center;
   text-align: center;
}

section.vid .welcome img {
   width: 50px;
}

section.vid video {
   width: 100%;
   height: 100dvh;
   object-fit: cover;
}

section.vid div.stories {
   position: fixed;
   top: 15px;
   left: 75px;
   width: 100%;
}

section.vid div.stories div {
   height: 100dvh;
   display: flex;
   justify-content: center;
   flex-direction: column;
   font-size: 28px;
   width: 35%;
}

section.vid div.stories div sub {
   font-weight: inherit;
}


.fade-in-div { animation: fadeIn 1s forwards; }
.fade-out-div { animation: fadeOut .5s forwards; }

section.vid div.stories .story.none, section.vid div.welcome-container .none {
   display: none;
}

.logo-reno2-img {
   width: 200px;
   margin-top: 22px;
}

.header-reno2-hero-img {
   width: 420px;
   margin-top: 42px;
}

.hero-reno-side-img {
   height: 500px;
}

.hero-reno-front-img {
   height: 270px;
   margin-bottom: 20px;
   display: block;
}

/* Banner 01 */
.banner01-container {
   background-color: #EEF5FD;
   padding: 100px;
   position: relative;
   z-index: 10;
}

.banner01-row {
   gap: 50px;
}

.banners-text {
   font-size: 36px;
   /* font-weight: bold; */
   line-height: 46px;
}

.banner01-img {
   background-image: url('../img/banner01-img.jpg');
   background-size: cover;
   border-radius: 20px;
   height: 500px;
}

/* Reno Carrousel */

.cinta-desk {
   display: block;
}

.cinta-mobile {
   display: none;
}

.reno-carrousel-container {
   padding: 125px 0 75px 0;
   column-gap: 30px;
}

.reno-carrousel-header-img {
   width: 1025px;
   display: block;
}

.reno-carrousel-header-img-mobile {
   display: none;
}

.left-reno-container {
   background-color: #FFEEE4;
   border-radius: 0 20px 20px 0;
   display: flex;
}

.trueno-container {
   background-color: #F4F4FF;
   border-radius: 20px;
   padding: 15px 10px !important;
}

.trueno-title {
   font-size: 26px;
   font-weight: bold;
   color: #930198;
   margin-top: 20px;
}

.rudolf-container {
   background-color: #FDEFEF;
   border-radius: 20px;
   padding: 15px 10px !important;
}

.rudolf-title {
   font-size: 26px;
   font-weight: bold;
   color: #AA3C3B;
   margin-top: 20px;
}

.cometa-container {
   background-color: #F0FBF5;
   border-radius: 20px;
   padding: 15px 10px !important;
}

.cometa-title {
   font-size: 26px;
   font-weight: bold;
   color: #027608;
   margin-top: 20px;
}

.right-reno-container {
   background-color: #EEF5FD;
   border-radius: 20px 0 0 20px;
}

.reno-img-height {
   height: 500px;
}

/* Banner Compare */
.reno-compare-header-img {
   width: 570px;
}

.reno-compare-img {
   width: 100%;
   border-radius: 20px;
}

/* Image Compare Slider */
.img-comp-container {
   position: relative;
   height: 600px;
   /*should be the same height as the images*/
   display: block;
}

img.compare_arrows {
   width: 40px;
   margin-top: 10px;
   margin-left: 10px;
   opacity: .8;
   rotate: 90deg;
}

.img-comp-container-mobile {
   display: none;
}

.img-comp-img {
   position: absolute;
   width: auto;
   height: auto;
   overflow: hidden;
}

.img-comp-rad-left {
   border-radius: 20px;
}

.img-comp-rad-right {
   border-radius: 20px;
}

.img-comp-img img {
   display: block;
   vertical-align: middle;
}

.img-comp-slider {
   position: absolute;
   z-index: 9;
   cursor: ew-resize;
   /*set the appearance of the slider:*/
   width: 60px;
   height: 60px;
   background-color: white;
   opacity: 0.9;
   border-radius: 50%;
   margin-left: 20px;
}

/* Banner Eficient */
.banner-eficient-container {
   padding: 100px 0;
}

.eficient-desktop {
   display: block;
}

.eficient-mobile {
   display: none;
}

.video-round {
   border-radius: 20px;
}

.w-30 {
   width: 30%;
}

.banner-eficient-row {
   padding-bottom: 50px;
}

.banner-eficient-header-img {
   width: 550px;
}

.banners-text-eficient {
   font-size: 36px;
   /* font-weight: bold; */
   line-height: 36px;
}

.banner-eficient-card-container {
   padding: 0 0 0 70px;
}

.banner-eficient-card-01 {
   background-color: #FDEFEF;
   border-radius: 20px;
}

.banner-eficient-card-02 {
   background-color: #F4F4FF;
   border-radius: 20px;
}

.banner-eficient-card-03 {
   background-color: #EEF5FD;
   border-radius: 20px;
}

.banner-eficient-card-04 {
   background-color: #F0FBF5;
   border-radius: 20px;
}

.banner-eficient-card-05 {
   background-color: #F7F7F7;
   border-radius: 20px;
}

.banner-eficient-card-01-img {
   width: auto;
   height: 500px;
   border-radius: 0 0 20px 0;
}

/* Reno Regalo */
.reno-regalo-row {
   margin-top: 100px;
}

.reno-regalo-title-img {
   width: 520px;
}

.reno-regalo-img {
   border-radius: 20px;
   width: 100%;
   padding: 0;
   margin-top: 50px;
}

/* Banner Valencia */
.banner-valencia-title-img {
   width: 1010px;
}

.banner-valencia-img {
   width: 100%;
   border-radius: 20px;
   margin-top: 80px;
}

.banner-valencia-title-img-desk {
   display: block;
}

.banner-valencia-title-img-mobile {
   display: none;
}

.reno-button {
   background-color: #0071E3;
   border-radius: 100px;
   padding: 20px 30px;
   font-size: 30px;
   color: white;
   text-decoration: none;
   width: 380px;
   text-align: center;
   line-height: 33px;
   margin-top: 80px;
   font-weight: bold;
}

/* Responsive */
@media only screen and (min-device-width: 320px) and (max-device-width: 576px) {

   /* Video Portada */

   .video-portada-desktop {
      display: none;
   }

   .video-portada-mobile {
      display: block;
   }

   /* Hero */
   .hero-video {
      display: none;
   }

   .hero-video-mobile {
      display: block;
   }

   .header-reno2-hero-img {
      width: 100%;
   }

   .hero-reno-front-img {
      display: none;
   }

   .banner01-container {
      padding: 40px 5px;
      text-align: center;
   }

   .banners-text {
      font-size: 30px;
      line-height: 30px;
   }

   .banner01-img {
      width: 100%;
      height: auto;
   }

   /* Carrousel */
   .cinta-desk {
      display: none;
   }

   .cinta-mobile {
      display: block;
   }

   .reno-carrousel-container {
      gap: 30px;
      padding: 75px 0;
   }

   .reno-carrousel-header-img {
      width: 100%;
      display: none;
   }

   .reno-carrousel-header-img-mobile {
      width: 100%;
      display: block;
   }

   .reno-img-height {
      height: 350px;
   }

   /* Banner Compare */
   .reno-compare-header-img {
      width: 100%;
   }

   .left-reno-container {
      display: none;
   }

   .right-reno-container {
      display: none;
   }

   .img-comp-container {
      display: none;
   }

   .img-comp-container-mobile {
      display:none;
   }


   /* Banner Eficient */

   .video-mobile-round {
      border-radius: 20px 20px 0 0;
   }

   section.vid {
      height: 900dvh;
      position: relative;
   }

   section.vid div.holder {
      position: sticky;
      top: 0;
   }

   section.vid video {
      height: 75dvh;
   }

   section.vid div.stories {
      left: 0;
   }

   section.vid div.stories div {
      font-size: 17px;
      width: 100%;
      padding: 10px 20px;
      justify-content: end;
   }

   section.vid .welcome img {
      width: 25px;
   }

   section.vid .welcome-container, section.vid .welcome-container.init {
      left: 0;
   }

   section.vid .welcome-container .welcome {
      font-size: 17px;
      width: 100%;
      padding: 20px;
      justify-content: end;
   }

   section.vid .welcome-container .welcome p{
      margin-bottom: 5px;
   }

   section.vid .welcome-container .welcome p sub{
      font-weight: inherit;
   }

   .eficient-desktop {
      display: none;
   }

   .eficient-mobile {
      display: block;
   }

   .banners-text-eficient {
      font-size: 30px;
      line-height: 30px;
      margin-bottom: 30px;
   }

   .banner-eficient-container {
      padding: 50px 10px;
   }

   .banner-eficient-card-container {
      padding: 0;
      flex-direction: column-reverse;
      gap: 50px;
      text-align: center;
   }

   .banner-eficient-header-img {
      width: 100%;
   }

   .banner-eficient-card-01-img {
      width: 100%;
      height: auto;
   }

   .reno-regalo-title-img {
      width: 100%;
   }

   .banner-valencia-title-img {
      width: 100%;
   }

   .banner-valencia-title-img-desk {
      display: none;
   }

   .banner-valencia-title-img-mobile {
      display: block;
   }

   .reno-button {
      width: 100%;
   }
}

@media only screen and (min-device-width: 576px) and (max-device-width: 1200px) {

   /* Hero */
   .hero-reno-front-img {
      display: none;
   }

   .banner01-img {
      width: 100%;
      height: auto;
   }

   .banner01-container {
      background-color: #EEF5FD;
      padding: 40px;
   }

   .banners-text {
      font-size: 30px;
      line-height: 30px;
   }

   /* Eficient */
   /* Banner Eficient */
   .banners-text-eficient {
      font-size: 30px;
      line-height: 30px;
   }

   .banner-eficient-container {
      padding: 50px 10px;
   }

   .banner-eficient-header-img {
      width: 100%;
   }

   .banner-eficient-card-01-img {
      width: 100%;
      height: unset;
   }
}

/* Fonts */
.lato-thin {
   font-family: "Lato", sans-serif;
   font-weight: 100;
   font-style: normal;
}

.lato-light {
   font-family: "Lato", sans-serif;
   font-weight: 300;
   font-style: normal;
}

.lato-regular {
   font-family: "Lato", sans-serif;
   font-weight: 400;
   font-style: normal;
}

.lato-bold {
   font-family: "Lato", sans-serif;
   font-weight: 700;
   font-style: normal;
}

.lato-black {
   font-family: "Lato", sans-serif;
   font-weight: 900;
   font-style: normal;
}

.lato-thin-italic {
   font-family: "Lato", sans-serif;
   font-weight: 100;
   font-style: italic;
}

.lato-light-italic {
   font-family: "Lato", sans-serif;
   font-weight: 300;
   font-style: italic;
}

.lato-regular-italic {
   font-family: "Lato", sans-serif;
   font-weight: 400;
   font-style: italic;
}

.lato-bold-italic {
   font-family: "Lato", sans-serif;
   font-weight: 700;
   font-style: italic;
}

.lato-black-italic {
   font-family: "Lato", sans-serif;
   font-weight: 900;
   font-style: italic;
}



@keyframes fadeIn {
   0% { opacity: 0; }
   100% { opacity: 1; }
}


@keyframes fadeOut {
   0% { opacity: 1; }
   100% { opacity: 0; }
}