/******************************
  General
**********************************/
html, body { height: 100%; font-family: 'Abel', sans-serif; }  

/******************************
  HEader
**********************************/
header.header {
    position: fixed; top:0px; padding: 20px 20px; z-index: 99; width: 100%;
}
header.header img.logo {
    width: 180px; height: auto;
}
.navbar-dark .navbar-nav a.nav-link { text-transform: uppercase; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
.navbar-dark .navbar-nav a.nav-link:hover { color:#ffcc01; }
.navbar-dark .navbar-toggler {
    background-color:#ffcc01;
}


/*****************************
  Slider
*********************************/
.owl-carousel .item {
    width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover; padding-top: 1px;
}
.owl-carousel .item1 {
    background-image: url(../img/slide1.webp);
}
.owl-carousel .item2 {
    background-image: url(../img/slide2.webp);
}
.owl-carousel .item3 {
    background-image: url(../img/slide3.webp);
}
.owl-carousel .item4 {
    background-image: url(../img/slide4.webp);
}

.owl-carousel .item1b {
    background-image: url(../img/slide1b.jpg);
}
.owl-carousel .item2b {
    background-image: url(../img/slide2b.jpg);
}
.owl-carousel .item3b {
    background-image: url(../img/slide3b.jpg);
}
.owl-carousel .item4b {
    background-image: url(../img/slide4b.jpg);
}

.owl-carousel .owl-nav { color:#FFF; }
.owl-carousel .owl-nav button.owl-prev {
    position: absolute; z-index: 999; font-size: 80px; top:50%; left: 20px; margin-top: -40px; line-height: 80px;
}
.owl-carousel .owl-nav button.owl-next {
    position: absolute; z-index: 999; font-size: 80px; top:50%; right: 20px; margin-top: -40px; line-height: 80px;
}

.owl-carousel .item h4 { font-size: 54px; color:#FFF; text-align: center; margin-top: 45%; text-shadow: 3px 3px 5px rgba(0,0,0,0.5); }
.owl-theme .owl-nav { margin-top: 0; }


/**********************************
  Lutron
***********************************/
.lutron__cuentanos { background-color: #000; color:#FFF; padding: 70px 0; }
.lutron__cuentanos p { margin-top: 20px; margin-bottom: 20px; }


.lutron__porque {
    background-color:#c20e1a; color:#FFF; padding-top: 100px; padding-bottom: 100px;
}
.lutron__porque p {  font-size: 18px; line-height: 1.4em; }
.lutron__porque img { margin-bottom: 20px; }


img.responsive { max-width: 100%; }
.align-left { text-align: left; }  
.align-center { text-align: center; }  
.align-right { text-align: right; }  


/**********************************
  Responsive
************************************/  
@media only screen and (max-width: 750px) {
    .navbar-collapse {
        background-color: rgba(0,0,0,0.5); padding-left: 20px;
    }
    .owl-carousel.owl-lutron .item {
        width: 100%; height: 280px; background-repeat: no-repeat; background-position: center; background-size: cover; padding-top: 1px;
    }
    .owl-carousel .item h4 { font-size: 40px; }
    header.header img.logo  { width: 100px; }
    .owl-carousel .owl-nav button.owl-prev { left: 10px; }
    .owl-carousel .owl-nav button.owl-next { right: 10px; }
    .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {
        font-size: 30px;
    }
}