/* =========================================
   HERO / SLIDER MODERNO 5K
========================================= */

#home,
#main-slider,
#carousel-example-generic1,
#carousel-example-generic1 .carousel-inner,
#carousel-example-generic1 .item{
    height:100vh;
    min-height:700px;
    position:relative;
}

#carousel-example-generic1 .item{
    overflow:hidden;
}

#carousel-example-generic1 .item img{
    position:absolute;
    inset:0;

    width:100%;
    height:100vh;

    object-fit:cover;
    object-position:center center;

    z-index:0;
}
#carousel-example-generic1 .item:before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
    z-index:1;
}

.carousel-caption{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    bottom:auto;
    width:min(92%, 1400px);
    z-index:2;
    text-align:center;
}

.carousel-caption h1{
    font-size:clamp(42px, 5vw, 92px);
    line-height:1.1;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    text-shadow:0 5px 25px rgba(0,0,0,0.55);
}

.carousel-caption p{
    font-size:clamp(16px, 1.2vw, 24px);
    line-height:1.5;
    max-width:1000px;
    margin:25px auto 0;
    text-shadow:0 2px 10px rgba(0,0,0,0.45);
}

.site_logo{
    max-height:54px;
    width:auto;
}

@media (min-width:1800px){

    .container{
        width:min(92%, 1650px);
    }

}
/* =========================================
   SAFE BOOTSTRAP 3 FADE FIX
========================================= */

.carousel-fade .carousel-inner .item {
    transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    transform: translate3d(0, 0, 0);
}

/* imágenes fullscreen */

.carousel-inner > .item > img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: block;
}
.carousel-inner{
    background:#000;
}