@charset "utf-8";

.bg2 h2 {
    text-align: right;
}

.products section {
    height: inherit;
    margin: 10vh 0;
}

.products h3 {
    font-size: var(--f5);
    font-weight: bold;
}

/* EDPs */
.edfp-title  {
    font-weight: bold;
    font-size: var(--f1);
    text-align: center;
    align-items: center;
    justify-content: center;
    text-shadow: 0px 6px 4px #000;
    color: #FFFF;
    z-index: 999;
}

.hdd-bg-img {
    background-image: url(../img/hdd%203.jpg);
    background-repeat: no-repeat;
    width: 95vw;
    height: 400px;
    background-size: cover;
    background-position: 50%;
    border: 8px solid #000000;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    z-index: 3;
}

.hdd-img {
    width: 100%;
    height: 200px;
    background-size: contain;
    opacity: .95;
}

@keyframes edfp-hover {
    from {}

    to {
        text-shadow: 0px 6px 4px #0014ff;
        opacity: 1;
        z-index: 999;
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
        color: white;
    }

}

.edfp-title:hover h1 {
    animation: edfp-hover 1.2s;
    animation-iteration-count: infinite;
}

.tunnel-bg-img {
    background-image: url(../img/tunnel-segm.jpg);
    background-repeat: no-repeat;
    width: 95vw;
    height: 400px;
    background-size: cover;
    background-position: 50%;
    border: 8px solid #000000;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    z-index: 3;
}

.found-bg-img {
    background-image: url(../img/found_bg.jpg);
    background-repeat: no-repeat;
    width: 95vw;
    height: 400px;
    background-size: cover;
    background-position: 50%;
    border: 8px solid #000000;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    z-index: 999;
}

.light-bg-img {
    background-image: url(../img/light_bg.jpg);
    background-repeat: no-repeat;
    width: 95vw;
    height: 400px;
    background-size: cover;
    background-position: 50%;
    border: 8px solid #000000;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    z-index: 999;
}

.inherit {
    display: flex;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
    font-size: inherit;
    text-align: inherit;
    align-items: inherit;
    justify-content: inherit;
    color: inherit;
    text-shadow: inherit;
}

/*------- Products page -------*/
.products-page header {
    background-image: url(../img/mountain.jpg);
    background-position: center;
}

/*-------Mexico Products page -------*/
.products-page-m header {
    background-image: url(../img/pic_trailer_1.jpg);
    background-position: center;
}

.productos-logo {
    -webkit-filter: drop-shadow(0px 0px 4px white);
}

.search-bar {
    margin-top: 20px;
}

.search-bar-container {
    margin: 0 auto;
    width: 250px;
    height: 26px;
    cursor: pointer;
}

.search-bar span {
    display: inline-block;
    vertical-align: middle;
    border: 2px solid rgb(112 152 255 / 71%);
    background: #bad8f9;
    height: 27px;
    padding: 0 5px;
    transform: translateX(-2px);
}

.search-bar input {
    height: 25px;
    border: 2px solid rgb(112 152 255 / 71%);
}

.select-bar {
    flex-wrap: nowrap;
    /* border: 1px solid black; */
    width: 90vw;
    height: 40px;
    margin: auto;
    margin-top: 5%;
    background: linear-gradient(90deg, #1174BA 0%, rgba(255, 255, 255, 0.86) 53.13%, #1174BA 100%);
}

.select-bar-item {
    background-color: transparent;
    border-right: 1px solid black;
    width: 20%;
    text-align: center;
    font-size: var(--f5);
    cursor: pointer;
    opacity: 0.3;
}

.active {
    opacity: 1;
}

.select-bar-item:hover {
    opacity: 1;
}

.product-box {
    width: 20%;
    margin-bottom: 20px;
    text-align: left;
    font-size: var(--f5);
}

.product-box a {
    position: relative;
}

.product-box::before {
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    background: radial-gradient(52.91% 150.86% at 47.09% 50%, rgba(6, 1, 255, 0.71) 0%, rgba(1, 72, 255, 0.71) 0.01%, rgba(255, 255, 255, 0.83) 44.27%, rgba(1, 72, 255, 0.71) 100%), #C4C4C4;
    border-radius: 50%;
    position: relative;
    top: 8px;
    left: 0px;
    margin-right: 5px;
    border: ridge;
}

.all-products ul, .search-result ul{
    border: ridge;
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.5);
    margin: 10px 0;
    justify-content: left;
    padding: 3% 1% 3% 5%;
}

.product-box:hover {
    transform: scale(1.33);
}

.top-5-title,
.reg-5-title {
    line-height: 60px;
    font-size: var(--f4);
    font-weight: 700;
    text-align: center;
    height: 80px;
    margin: auto;
}

.blue-star {
    background-image: url(../img/blue_star.png);
    position: absolute;
    height: 40px;
    width: 40px;
    top: -10px;
    left: -10px;
}

.fav-star {
    position: absolute;
    height: 40px;
    width: 40px;
    top: -10px;
    left: -10px;
}

.right-pic {
    width: 50vw;
    box-shadow: 3px 6px 9px #3d3d3d;
}

.black {
    background-color: black;
}

.max-h-420 {
    max-height: 426px;
}


@media (max-width:768px) {
    .select-bar {
        flex-wrap: wrap;
        height: inherit;
        margin-left: auto;
        margin-right: auto;
        width: 60%;
    }

    .select-bar-item {
        width: 100%;
        border: solid 1px black;
    }

    .all-products ul {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    .product-box {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .found-bg-img {
        overflow: hidden;
    }

    .edfp-title {
        font-size: var(--f2);
    }

}

@media (min-width:700px) and (max-width:1000px) {
    .product-box {
        width: 50%;
    }

    .all-products ul {
        padding-left: 15%;
    }

}

@media (min-width:700px) and (max-width:1420px) {
    .products-page-m .select-bar {
        height: 120%;
    }

    .select-bar-item {
        width: 100%;
        align-self: center;
    }

    .products-page .select-bar {
        height: 120%;
    }

    .select-bar-item {
        width: 100%;
        align-self: center;
    }

}