html,
body {
    height: 100%;
}
.carousel,
.item,
.active {
    height: 100%;
}
.carousel-inner {
    /* top: 40px; */
    /*40 si lo bajo tengo que hacer el responcive y ademas en pc bajar puntos de desplazamiento slider*/
    height: 100%;
}
.fill1 {
    background-image:url(../../assets/img/horizontal_img1.webp);
    background-color: black;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.fill2 {
    background-image:url(../../assets/img/horizontal_img28.webp);
    background-color: black;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.fill3 {
    background-image:url(../../assets/img/horizontal_img4.webp);
    background-color: black;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.fill4 {
    background-image:url(../../assets/img/horizontal_img9.webp);
    background-color: black;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.fill5 {
    background-image:url(../../assets/img/horizontal_img10.webp);
    background-color: black;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.fill6 {
    background-image:url(../../assets/img/horizontal_img22.webp);
    background-color: black;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.fill7 {
    background-image:url(../../assets/img/horizontal_img15.webp);
    background-color: black;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.fill8 {
    background-image:url(../../assets/img/horizontal_img18.webp);
    background-color: black;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.fill9 {
    background-image:url(../../assets/img/horizontal_img19.webp);
    background-color: black;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.fill10 {
    background-image:url(../../assets/img/horizontal_img26.webp);
    background-color: black;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
/*style from background image set for max-whitd here, attachment*/
@media screen and (max-width: 450px){
    /*phome image background*/
    .carousel,
    .item,
    .active {
        top: 0;
        height: 100%;
    }
    .fill1 {
        background-image:url(../../assets/img/vertical_img2.webp);
        background-color: black;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
    .fill2 {
        background-image:url(../../assets/img/vertical_img1.webp);
        background-color: black;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
    .fill3 {
        background-image:url(../../assets/img/vertical_img5.webp);
        background-color: black;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
    .fill4 {
        background-image:url(../../assets/img/vertical_img26.webp);
        background-color: black;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
    .fill5 {
        background-image:url(../../assets/img/vertical_img14.webp);
        background-color: black;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
    .fill6 {
        background-image:url(../../assets/img/vertical_img16.webp);
        background-color: black;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
    .fill7 {
        background-image:url(../../assets/img/vertical_img21.webp);
        background-color: black;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
    .fill8 {
        background-image:url(../../assets/img/vertical_img27.webp);
        background-color: black;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
    .fill9 {
        background-image:url(../../assets/img/vertical_img10.webp);
        background-color: black;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
    .fill10 {
        background-image:url(../../assets/img/vertical_img4.webp);
        background-color: black;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
}