/* Variables
----------------------------------------------------------------------------------------------------------------- */
@import './../constants.css';

.page--home { }
.page--home[nodisplayed] {
    display: none;
}
    .home--hero {
        width: 100%; height: 700px;
        position: relative;
        display: flex;
        overflow: hidden;
    }

        .hero--backgroundVideo {
            width: 100%; height: 100%;
            position: absolute;
        }
        .backgroundVideo--video {
            top: -300px;
            position: absolute;
        }

        .hero--content {
            width: 100%;
            margin: auto;
            z-index: 400;
        }
        .hero--content h1, h2 {
            color: #fff;
            font-weight: bold;
            text-align: center;

            cursor: default;
        }
        .hero--content h1 {
            position: relative;
            display: flex;
        }
        .hero--content h1 img {
            height: 55px;
            margin: auto 0 auto auto;
            display: none;
        }
        .hero--content h1 span {
            color: #fff;
            font-weight: bold;
            text-align: left;
            margin: auto auto auto auto;

            font-size: 2.9rem !important;
            letter-spacing: 3px;
        }

        .hero--sucursales {
            width: 100%;
            margin-top: 60px;
            display: flex; flex-direction: row;
        }
        .sucursales--sucursal {
            width: 100%;
            margin: auto;
            display: flex; flex-direction: column;
        }
        .sucursales--sucursal i {
            margin: auto; margin-bottom: var(--padding--insideElements);

            font-size: 30px !important;
            color: #fff;
        }
        .sucursales--sucursal label { 
            font-size: 1rem !important;
            letter-spacing: 2px;
            color: #fff;
            text-align: center;
        }
        .sucursales--sucursal label strong { 
            font-size: 1rem !important;
            letter-spacing: 2px;
            color: #fff;
            text-align: center;
        }

        .hero--separator {
            width: 100%; height: 13.0208333333vw;
            position: absolute; bottom: 0; left: 0;
            display: block;
            background: linear-gradient(180deg, transparent 0, var(--color--representative1) 100%);
        }


    .home--anuncios {
        width: 100%;
        padding-bottom: 20px;
        position: relative;
        background-color: #fff;
    }

        .home--anuncios > h3 {
            background-color: var(--color--representative1);

            font-size: 2.4rem !important;
            color: #fff;
            letter-spacing: 5px;
        }
        .home--anuncios > p {
            padding-top: 15px;
            padding-bottom: var(--padding--insideInterfaces);
            margin: 0;
            background-color: var(--color--representative1);

            font-size: var(--textSize--big) !important;
            color: #fff;
            font-weight: bold;
            text-align: center;
        }

        .anuncios--carousel {
            overflow: hidden;
            background: #000000;
            background: linear-gradient(180deg,var(--color--representative1) 50%, var(--color--gray) 100%);
        }
        .anuncios--carousel img {
            height: 300px;
        }

        .carousel-indicators i {
            border-color: #fff !important;
            background-color: #fff !important;
        }
        .carousel-indicators .active {
            border-color: #fff !important;
            background-color: #fff !important;
        }
        .carousel-indicators li {
            border-width: 2px;
            border-color: #fff !important;
        }
        .carousel-indicators li, .carousel-indicators li.active {
            width: 16px; height: 16px;
        }
        .carousel-control span {
            color: #fff;
        }

        .carousel-inner, .carousel-inner .item img{
            height:400px;
        }
        .carousel-inner .item img {
            margin: auto;
        }

        .carousel-control.left, .carousel-control.right {
            background-color: transparent !important;
            background-image: none !important;
        }

        .anuncios--separator {
            width: 100%; height: 4.0208333333vw;
            position: absolute; bottom: 0; left: 0;
            display: block;
            background: linear-gradient(180deg, transparent 0, #fff 100%);
            z-index: 400;
            display: none;
        }

    .home--productos {
        width: 100%;
        padding-bottom: 20px;
        position: relative;
        display: flex; flex-direction: column;
        background-color: #fff;
    }

        .home--productos > h3 {
            font-size: 2.4rem !important;
            color: var(--color--lightBlack);
            letter-spacing: 5px;
        }
        .home--productos > p {
            padding-top: 15px;
            padding-bottom: var(--padding--insideInterfaces);
            margin: 0;

            font-size: var(--textSize--big) !important;
            color: var(--color--lightBlack);
            font-weight: bold;
            text-align: center;
        }

        .productos--searchDiv { 
            border: solid 2px var(--color--lightBlack); border-radius: var(--borderRadius--elements);
            margin: 0 var(--padding--insideElements);
            display: flex;
            position: relative;
        }
            .productos--searchDiv i { 
                position: absolute; top: 15px; left: 15px;

                color: #000;
                font-size: 1.4rem !important;
            }
            .productos--searchDiv input {
                height: 55px;
                padding-left: 45px;

                font-size: 1.4rem !important;
                font-weight: bold;
            }

        .productos--catalog {
            padding: var(--padding--insideElements);
            display: flex; flex-direction: row; flex-wrap: wrap;
        }

            .catalog--product {
                width: 180px;
                margin-right: var(--padding--insideElements); margin-bottom: var(--padding--insideElements);
                display: flex;; flex-direction: column;
                background-color: var(--color--action);
            }
                .product--img {
                    height: 60px;
                    display: flex;
                }
                .product--img i {
                    margin: auto;

                    font-size: 30px !important;
                    color: #fff;
                }
                .product--desc {
                   height: 50px;
                   display: flex;
                   overflow: hidden;
                }
                .product--desc label {
                    width: 180px !important;
                    padding: 0 2px;
                    margin: auto;

                    font-size: 10px !important;
                    color: #fff;
                    text-align: center;
                }

            .catalog--product:hover {
                background-color: var(--color--actionStrong);

                cursor: pointer;
            }
                .catalog--product:hover label {
                    cursor: pointer;
                }

        .productos--separator {
            width: 100%; height: 4.0208333333vw;
            position: absolute; bottom: 0; left: 0;
            display: block;
            background: linear-gradient(180deg, transparent 0, var(--color--gray) 100%);
            z-index: 400;
        }

    .home--marcas {
        width: 100%; height: 90px;
        padding: 0 var(--padding--insideElements);
        display: flex; flex-direction: row; flex-wrap: wrap;
        background-color: var(--color--gray);
        overflow: hidden;
    }

        .home--marcas img {
            height: 80px;
            padding: 4px 0;
            margin: auto;
        }

    .home--sucursales {
        width: 100%;
        padding: var(--padding--insideElements);
        position: relative;
        display: flex; flex-direction: row; flex-wrap: wrap;
        background-color: var(--color--representative1);
    }

        .home--sucursales > h3 {
            width: 100%;
            background-color: var(--color--representative1);

            font-size: 2.4rem !important;
            color: #fff;
            letter-spacing: 5px;
        }
        .home--sucursales > p {
            width: 100%;
            padding-top: 15px;
            padding-bottom: var(--padding--insideInterfaces);
            margin: 0;
            background-color: var(--color--representative1);

            font-size: var(--textSize--big) !important;
            color: #fff;
            font-weight: bold;
            text-align: center;
        }

        .sucursales--column {
            width: 300px;
            margin: auto; margin-top: var(--padding--insideInterfaces);
            display: flex; flex-direction: column;
        }
        .sucursales--column > label {
            font-size: 1.5rem !important;
            color: #fff;
            text-align: center;
        }
        .sucursales--column > p {
            margin-top: var(--padding--insideSubtitle);

            font-size: 1rem !important;
            color: #fff;
            text-align: center;
        }

        .sucursales--column > div {
            width: 100%;
            padding-right: 15px;
            margin: auto;
        }
                .sucursales--column div label {
                    width: 100%;
                    margin-bottom: var(--padding--insideInterfaces);

                    font-size: 1.2rem !important;
                    color: #fff;
                    font-weight: bold;
                    letter-spacing: 2px;
                    text-align: center;
                }

                .sucursales--column div ul {
                    padding: 0;

                    list-style: none;
                }
                .sucursales--column div ul li {
                    margin-bottom: var(--padding--insideElements);
                    display: flex; flex-direction: row;
                }
                .sucursales--column div ul li strong {
                    margin: auto auto auto 0;

                    font-size: 1rem !important;
                    color: #fff;
                    letter-spacing: 1px;
                }
                .sucursales--column div ul li span {
                    margin: auto 0 auto auto;

                    font-size: 1rem !important;
                    color: #fff;
                    letter-spacing: 1px;
                }
                .sucursales--column div ul li[closed] span {
                    color: #fff;
                }