@font-face {
        font-family: "ReplicaBold";
        src: url(../fonts/Replica/Replica-Bold.otf);
        font-display: swap;
    }
    
    @font-face {
        font-family: "ReplicaLight";
        src: url(../fonts/Replica/Replica-Light.ttf);
        font-display: swap;
    }
    
    @font-face {
        font-family: "ReplicaRegular";
        src: url(../fonts/Replica/Replica-Regular.ttf);
        font-display: swap;
    }
    
    @font-face {
        font-family: "PanagramBlack";
        src: url(../fonts/Pangram/Pangram-Black.otf);
        font-display: swap;
    }
    
    @font-face {
        font-family: "PanagramRegular";
        src: url(../fonts/Pangram/Pangram-Regular.otf);
        font-display: swap;
    }
    
    @font-face {
        font-family: "PanagramExtraBold";
        src: url(../fonts/Pangram/Pangram-ExtraBold.otf);
        font-display: swap;
    }
    
     :root {
        --blanco: rgba(255, 255, 255, 0.8);
        --naranja: #A2782B;
        --amarillo: #D99F27;
        --gris: #3F3F3F;
        --negro: #111111;
        --replicaB: "ReplicaBold";
        --replicaR: "ReplicaRegular";
        --replicaR: "ReplicaLight";
        --panagramBlack: "PanagramBlack";
        --panagramRegular: "PanagramRegular";
        --panagramExtraBold: "PanagramExtraBold";
    }
    html {
        scroll-behavior: auto;
        }
    body {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: -moz-box;
        display: flex;
        background: rgb(3, 4, 4);
        background: linear-gradient(0deg, rgba(3, 4, 4, 1) 0%, rgba(28, 34, 39, 1) 50%);
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        flex-direction: column;
        margin: 0px;
        padding: 0px;
        min-height: 100vh;
        overflow-x: hidden;
        width: 100vw;
    }
    
     ::-webkit-scrollbar {
        margin: 0;
        padding: 0;
    }
    /* Track */
    
     ::-webkit-scrollbar-track {
        background: var(--negro);
        margin: 0;
    }
    /* Handle */
    
     ::-webkit-scrollbar-thumb {
        background: var(--amarillo);
        margin: 0;
    }
    /* Handle on hover */
    
     ::-webkit-scrollbar-thumb:hover {
        background: var(--naranja);
    }
    
    .over-hidden {
        overflow: hidden;
    }
    
    #preload-humo {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        z-index: 9999 !important;
        padding: 0
    }
    
    #preload-humo>div {
        height: 100%;
    }
    
    .Bold {
        font-family: var(--replicaB);
    }
    
    button:focus {
        outline: none;
    }
    
    #preload-humo .content-preload {
        padding: 0;
        background: rgb(3, 4, 4);
        background: linear-gradient(0deg, rgba(3, 4, 4, 1) 0%, rgba(28, 34, 39, 1) 50%);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .owl-nav {
        opacity: 1;
    }
    
    .content-preload img {
        width: 400px;
        max-width: 90%;
    }
    
    .container-fluid {
        padding: 0;
        margin-right: 0;
    }
    
    .Content {
        flex: 1 0;
        width: 100%;
    }
    
    .over-hidden {
        overflow: hidden;
    }
    
    a,
    a:hover {
        text-decoration: none;
        color: inherit;
    }
    
    .whatsapp-fixed {
        position: fixed;
        right: 2%;
        bottom: 20%;
        z-index: 100;
        width: 4%;
        height: 4%;
    }
    
    .whatsapp-fixed img {
        width: 100%;
        height: auto;
    }
    /**Header*/
    
    nav {
        height: 100%;
        position: relative;
    }
    
    header {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 1000;
        background-color: rgba(63, 63, 63, 0.68)
    }
    
    .navbar-brand img {
        width: 100%;
    }
    
    .header {
        height: 100%;
    }
    
    .nav-link, .nav-link svg{
        color: var(--blanco)!important;
        font-family: var(--replicaR);
        font-size: 20px;
        fill: var(--blanco);
    }
    
    .nav-item {
        align-items: center;
        display: flex;
        justify-content: center;
        height: inherit;
        padding: 1em;
        font-family: var(--graphikB);
    }
    .nav-item svg{
        width: 20px;
    }
    
    .navbar {
        padding-bottom: 0;
        padding-top: 0;
    }
    
    .nav-item:hover, .nav-item.redes:hover svg{
        background-color: var(--amarillo);
    }
    
    .navbar-collapse ul {
        height: 100%!important;
        align-items: center;
        padding: 0;
    }
    
    .link-header:hover {
        font-family: var(--graphikB);
        cursor: pointer;
    }
    
    .two-columns {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }
    
    .three-columns {
        columns: 3;
        -webkit-columns: 3;
        -moz-columns: 3;
    }
    /**Footer*/
    
    .foot {
        display: flex;
        justify-content: space-around;
        padding: 2em;
        flex-wrap: wrap;
    }
    
    footer {
        background-color: var(--amarillo);
    }
    .icon-footer {
        position: relative;
        right: 0%;
        align-items: center;
        bottom: 5px;
    }
    .icon-footer svg{
        width: 18px;
    }
    .icon-footer svg{
        fill: white;
    }
    
    .foot p {
        color: var(--blanco);
    }
    
    .iconos-footer {
        display: flex;
        align-items: center;
    }
    
    .ftTitle {
        font-family: var(--graphikB);
        font-size: 20px;
    }
    
    .ftSubContent {
        font-family: var(--graphik);
        font-size: 15px;
        font-weight: normal;
        margin: 0;
    }
    
    .copy {
        background-color: var(--amarillo);
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    
    .copy p {
        color: var(--blanco);
        margin: 0;
    }
    
    .copyTitle {
        font-family: Helvetica;
        font-size: 15px;
    }
    
    .copyTitle-Bold {
        font-family: Helvetica;
        font-size: 15px;
        font-weight: bold;
    }
    
    .copySub {
        font-family: var(--graphik);
        font-size: 15px;
        font-weight: normal;
    }
    /** INICIO **/
    
    .index {
        height: auto;
        background-size: cover;
        overflow: hidden;
        position: relative;
    }
    
    .img-index {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
    }
    
    .information-index {
        position: absolute;
        top: 50%;
        z-index: 90;
    }
    
    .big-text {
        font-size: 90px;
        font-family: var(--replicaB);
        color: var(--blanco);
    }
    
    .big-text2 {
        background-color: var(--amarillo);
        font-size: 102px;
        font-family: var(--panagramBlack);
        color: var(--blanco);
        display: flex;
        justify-content: center;
    }
    
    .nosotros {
        padding-top: 6vw;
    }
    
    .info-nosotros {
        padding: 4em;
    }
    
    .first {
        padding-left: 3em;
    }
    
    .nosotros-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 95%;
        background-image: url('../img/fondo-nosotros.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 5)), to(rgba(0, 0, 0, 0)));
    }
    
    .elementos {
        margin-top: -3em;
    }
    
    .texto-grande-dorado {
        font-size: 34px;
        color: var(--amarillo);
        font-family: var(--replicaB);
    }
    
    .texto-peq-blanco {
        color: var(--blanco);
        font-size: 16px;
        font-family: var(--panagramRegular);
    }
    
    .back-dorado {
        background-color: var(--naranja);
        font-family: var(--replicaB);
        font-size: 24px;
        color: var(--blanco);
    }
    
    .middle {
        margin-top: 8em;
    }
    
    .lineas {
        display: flex;
        align-items: center;
    }
    
    .title-catalogo {
        writing-mode: vertical-rl;
        transform: rotate(-180deg);
        font-family: var(--panagramRegular);
        font-size: 128px;
        line-height: 128px;
        text-align: center;
        margin: 0;
    }
    
    .loop {
        width: 100%;
        align-items: center;
        display: flex;
    }
    
    .catalogo {
        align-items: center;
        display: flex;
        margin-top: 5em;
        margin-bottom: 5em;
    }
    
    .card-catalogo {
        background-color: var(--negro);
        border-radius: 5px;
        position: relative;
        height: 600px;
        padding: 1em;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        cursor: grab;
        display: flex;
        align-items: flex-end;
    }
    .card-catalogo::before
    {
        content: '';
        opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transition: 0.5s ease-in-out;
        left: 0;
        top: 0;
        width: 100%;
        background-color: var(--negro);
        height: 100%;
        position: absolute;
    }
    .card-catalogo:hover::before
    {
        opacity: 1;
    }

    
    #card-madera{
        background-image: url('../img/Madera/M-4/Tapon_M-4_V01.png');
    }
    #card-hibrido{
        background-image: url('../img/Hibridos/H-5/Tapon_H-5_V01.png');
    }
    
    #card-ae{
        background-image: url('../img/Aleacion_Especial/AE-2/Tapon_AE-2_V01.png');
    }
    
    #card-metal{
        background-image: url('../img/Metal/I-1/Tapon_I-1_V01.png');
    }
    
    #card-sintetico{
        background-image: url('../img/Sinteticos/S-3/Tapon_S-3_V01.png');
    }
    #card-medallas{
        background-image: url('../img/Medallas/Med-2/Med_02-V01.png');
    }
    /*----------------------------------------------------------------*/
    #card-madera::before{
        background-image: url('../img/Madera/M-4/Tapon_M-4_V02.png');
    }
    #card-hibrido::before{
        background-image: url('../img/Hibridos/H-5/Tapon_H-5_V02.png');
    }
    
    #card-ae::before{
        background-image: url('../img/Aleacion_Especial/AE-2/Tapon_AE-2_V02.png');
    }
    
    #card-metal::before{
        background-image: url('../img/Metal/I-1/Tapon_I-1_V04.png');
    }
    
    #card-sintetico::before{
        background-image: url('../img/Sinteticos/S-3/Tapon_S-3_V02.png');
    }
    #card-medallas::before{
        background-image: url('../img/Medallas/Med-2/Med_02-V02.png');
    }
    
    .customNextBtn {
        position: absolute;
        top: 45%;
        z-index: 100;
        right: 15%;
        cursor: pointer;
        opacity: 1;
        width: 200px;
    }
    
    .NextBtn {
        width: 150px;
        height: 100%;
        opacity: 1;
    }
    
    .prevBtn {
        cursor: pointer;
        width: 150px;
        opacity: 1;
        height: 100%;
        margin-bottom: 4px;
    }
    /* .extra {
        opacity: 0;
        transition: 0.3s ease-in-out;
    }
    
    .card-catalogo:hover .extra {
        opacity: 1;
        animation-duration: 0.5s;
        animation-name: slidein;
    }
    */
    
    /* @keyframes slidein {
        from {
            margin-top: 100%;
        }
        to {
            margin-top: 0%;
        }
    } */
    
    .slider-img {
        display: flex;
        align-items: center;
        height: auto;
    }
    .slider-img .buttons{
        top: 1em;
        z-index: 1000;
        cursor: pointer;
    }
    .slider-img .buttons .categoria_button {
        max-width: 100%;
        z-index: 10;
        padding: 0.6em 4em;
        background-color: transparent;
        color: var(--naranja);
        border: 3px var(--naranja) solid;
        border-radius: 20px;
        font-family: Helvetica;
        font-weight: bold;
    }
    
    .slider-img .buttons .categoria_button:hover {
        background-color: var(--naranja);
        color: var(--negro);
    }
    
    .title-categoria {
        font-size: 24px;
        font-family: var(--replicaB);
        color: var(--naranja);
    }
    
    .title-categoria:hover {
        font-size: 24px;
        font-family: var(--replicaB);
        color: var(--blanco);
    }
    
    .modal {
        animation-duration: 0.5s;
        animation-name: slidein;
    }
    
    .catalogo .owl-nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: absolute;
        right: 5%;
        padding-top: 1em;
        width: 30%;
    }
    
    .ver {
        border-radius: 30px;
        border: var(--naranja) 2px solid;
        margin-left: auto;
        color: var(--naranja);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        z-index: 10;
        font-family: var(--panagramBlack);
    }
    
    .ver:hover {
        background-color: var(--amarillo);
        color: var(--negro);
        cursor: pointer;
    }
    
    .contacto {
        padding: 3em 3em 3em 7em;
    }
    
    .form-control {
        background-color: rgba(217, 159, 39, 0.1)!important;
        color: var(--blanco)!important;
        border: none!important;
        border-radius: 15px;
        height: 60px;
        margin-bottom: 1em;
    }
    
    .form-control::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: var(--blanco);
        opacity: 1;
        /* Firefox */
    }
    
    .contacto-title {
        font-size: 75px;
        color: var(--naranja);
        margin-bottom: 50px;
    }
    
    #contacto {
        background-image: url('../img/contac.png');
        background-position: center;
        background-size: cover;
    }
    
    .informacion-contacto {
        font-size: 16px;
        font-family: var(--panagramRegular);
        margin: 0;
        opacity: 0.8;
    }
    
    .blanco {
        color: var(--blanco);
    }
    
    .dorado {
        color: var(--naranja);
        margin-bottom: 0.5em;
    }
    
    .info {
        padding-top: 200px;
        padding-left: 7em;
    }
    
    .show {
        display: block;
    }
    
    .galery .owl-item {
        display: flex;
        justify-content: center;
        max-height: 90vh!important;
    }
    
    .tapones {
        background: rgb(3, 4, 4);
        background: linear-gradient(0deg, rgba(3, 4, 4, 1) 0%, rgba(28, 34, 39, 1) 50%);
    }
    
    .galery .img-slider {
        width: 550px!important;
        height: auto;
        background-image: url('../img/fondo-sl.svg');
        background-size: 350px;
        background-repeat: no-repeat;
        background-position: 80% center;
        max-width: 100%;
        max-height: 100vh;
    }
    
    .oculto {
        display: none!important;
    }
    
    .flex {
        display: flex;
    }
    
    .pos-rigth {
        border-left: var(--naranja) 0.2px solid;
        height: auto;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        min-height: 100vh;
    }
    .pos-rigth .img-tapones{
        max-height: 90vh;
        overflow: auto;
        margin-right: 1em;
    }
    
    .closer {
        position: absolute;
        top: 0.5em;
        right: 0.5em;
        height: 3em;
        width: 3em;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10000;
    }
    
    .header-categoria {
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: var(--amarillo) 0.1px solid;
    }
    
    .img-preview {
        cursor: pointer;
        padding: 1em;
    }
    
    .contador {
        position: absolute;
        left: 10%;
        bottom: 3%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: var(--blanco);
    }
    
    .cotizar {
        position: absolute;
        left: 43%;
        bottom: 3%;
        max-width: 100%;
        z-index: 10;
        padding: 0.6em 4em;
        background-color: transparent;
        color: var(--naranja);
        border: 3px var(--naranja) solid;
        border-radius: 20px;
        font-family: Helvetica;
        font-weight: bold;
    }
    
    .cotizar:hover {
        background-color: var(--naranja);
        color: var(--negro);
    }
    
    .line {
        font-size: 16px;
        width: 1px;
        height: 50px;
        border: 1px var(--blanco) solid;
    }
    
    .line2 {
        font-size: 16px;
        width: 1px;
        height: 10px;
        border: 1px var(--blanco) solid;
    }
    
    .enviar {
        max-width: 100%;
        width: 300px;
        padding-top: 0.8em;
        padding-bottom: 0.8em;
        text-align: center;
        background-color: transparent;
        color: var(--naranja);
        border: 1px var(--naranja) solid;
        border-radius: 20px;
        font-family: var(--panagramBlack);
    }
    
    .enviar:hover {
        background-color: var(--naranja);
        color: var(--negro);
    }
    
    #tapon {
        position: absolute;
        top: 3vw;
        right: 21.5vw;
        z-index: 0;
    }
    
    .tapon {
        width: 15vw;
        z-index: -1;
    }
    
    #tapon1 {
        position: absolute;
        top: 11.9vw;
        left: 10vw;
        z-index: 0;
    }
    
    #tapon2 {
        position: absolute;
        bottom: 5vw;
        left: 1vw;
        z-index: 0;
    }
    
    #tapon3 {
        position: absolute;
        top: 0;
        left: 30vw;
        z-index: 0;
    }
    
    #tapon4 {
        position: absolute;
        top: 15vw;
        left: 40vw;
        z-index: 0;
    }
    
    #tapon5 {
        position: absolute;
        bottom: 5vw;
        right: 1vw;
        z-index: 0;
    }
    #tapon5 img{
        width: 13vw;
    }
    
    #tapon6 {
        position: absolute;
        bottom: 1vw;
        right: 30vw;
        z-index: 1;
    }
    
    #tapon7 {
        position: absolute;
        top: 1vw;
        left: 0;
        z-index: 1;
    }
    
    #tapon7 img {
        width: 9vw;
    }
    
    #tapon8 {
        position: absolute;
        top: 5vw;
        right: 0;
        z-index: 1;
    }
    
    #tapon10 {
        position: absolute;
        top: -4vw;
        right: 5vw;
        z-index: 1;
    }
    
    #tapon8 img {
        width: 9vw;
    }
    
    #tapon10 img {
        width: 19vw;
    }
    
    #tapon9 {
        position: absolute;
        bottom: -10em;
        left: -5em;
        z-index: 0;
    }
    
    #tapon11 {
        position: absolute;
        top: -7em;
        right: 0em;
        z-index: 0;
    }
    
    #tapon12 {
        margin-top: -8em;
        margin-left: 48vw;
        -webkit-animation: brinco 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
        -moz-animation: brinco 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
        animation: brinco 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }
    
    .tapon12 {
        width: 24vw;
    }
    
    @keyframes brinco {
        0% {
            -webkit-transform: translate3d(0, 20%, 0) rotateZ(10deg);
            -moz-transform: translate3d(0, 20%, 0) rotateZ(10deg);
            transform: translate3d(0, 20%, 0) rotateZ(10deg);
        }
        100% {
            -webkit-transform: translate3d(-0, -20%, 0) rotateZ(-5deg);
            -moz-transform: translate3d(-0, -20%, 0) rotateZ(-5deg);
            transform: translate3d(-0, -20%, 0) rotateZ(-5deg);
        }
    }
    
    .botella {
        position: absolute;
        top: 9vw;
        right: 18vw;
        width: 21.5vw;
    }
    /* Tablets en horizonal y escritorios normales
   ------------------------------------------------------------------------- */
    
    @media screen and (max-width: 1280px) {
        .customNextBtn {
            right: 5%;
        }
    }
    @media screen and (max-width: 1024px) {
        .nosotros-img {
            height: 80%;
        }
        .info-nosotros {
            padding: 1em;
        }
        .elementos {
            margin-top: 1em;
        }
        #tapon12 {
            margin-top: -12em;
        }
        .tapon12 {
            width: 280px;
        }
        .big-text {
            font-size: 75px;
        }
        .big-text2 {
            font-size: 77px;
        }
        .NextBtn {
            /* position: absolute; */
            cursor: pointer;
            width: 9vw;
        }
        .prevBtn {
            cursor: pointer;
            width: 9vw;
        }
        .customNextBtn {
            right: 3%;
            cursor: pointer;
            opacity: 1;
            max-width: 150px;
        }
    }
    /* Móviles en horizontal o tablets en vertical
   ------------------------------------------------------------------------- */
    
    @media screen and (max-width: 768px) {
        .traductor{
            width: 100%;
            justify-content: center;
        }
        .title-catalogo {
            writing-mode: horizontal-tb;
            font-size: 60px;
            line-height: 90px;
            transform: rotate(0);
        }
        .big-text {
            font-size: 40px;
        }
        .big-text2 {
            font-size: 40px;
            line-height: 43px;
        }
        .contacto,
        .info {
            padding: 1em;
        }
        .contacto-title {
            font-size: 50px;
        }
        .customNextBtn {
            top: 52%;
            width: 135px;
        }
        .cotizar {
            left: 29%;
        }
        .tapon12 {
            width: 300px;
        }
        .nosotros {
            padding-top: 10em;
        }
        #tapon12 {
            padding-top: 10em;
            margin-left: 25vw;
        }
        .elementos {
            margin-top: 10em;
        }
        .nosotros-img {
            background-position: 60%;
        }
        .middle {
            margin-top: 0;
        }
        .NextBtn {
            cursor: pointer;
            width: 15vw;
        }
        .prevBtn {
            cursor: pointer;
            width: 15vw;
        }
        .catalogo .owl-nav {
            width: 40%;
        }
        .contacto-title {
            margin-bottom: 10px;
        }
    }
    /* Móviles en vertical
   ------------------------------------------------------------------------- */
    
    @media (max-width: 480px) {
        .pos-rigth .img-tapones{
            max-height: auto;
            overflow: auto;
            margin-right: 1em;
        }
        .slider-img .buttons{
            display: none;
        }
        .texto-grande-dorado {
            font-size: 30px;
        }
        .title-categoria {
            font-size: 16px;
        }
        form {
            text-align: center;
        }
        #tapon12 {
            margin-top: 0em;
            padding-top: 1em;
            margin-left: 15vw;
        }
        .tapon12 {
            width: 230px;
        }
        #tapon9 {
            left: 0;
            bottom: 3em;
        }
        #tapon11 {
            right: 0;
            top: 3em;
        }
        .nosotros-img {
            background-size: 325% 80%;
            background-position: 60% 0;
        }
        .copy {
            flex-wrap: wrap;
            text-align: center;
        }
        .contacto {
            padding: 2em;
        }
        .contacto-title {
            font-size: 45px;
            color: var(--naranja);
            margin-bottom: 10px;
        }
        .elementos {
            margin-top: 0;
        }
        .whatsapp-fixed {
            width: 10%;
            height: 10%;
        }
        .customNextBtn {
            right: 3%;
            top: 50%;
            width: 83px;
        }
        .galery .img-slider {
            background-position: 70% center;
            background-size: 200px;
        }
        .NextBtn {
            cursor: pointer;
            width: 16vw;
        }
        .prevBtn {
            cursor: pointer;
            width: 16vw;
        }
        .catalogo .owl-nav {
            width: 50%;
            right: 25%;
        }
        .info-nosotros {
            padding: 2.5em;
        }
        .first {
            padding-left: 1em;
        }
        .img-index {
            height: 500px;
        }
        .botella {
            width: 50vw;
            top: 22vw;
            right: 10vw;
        }
        #tapon {
            position: absolute;
            top: 12vw;
            right: 20vw;
            z-index: 0;
        }
        .tapon {
            position: absolute;
            width: 30vw;
            z-index: 0;
        }
        #tapon1,
        #tapon2,
        #tapon3,
        #tapon4,
        #tapon5,
        #tapon6,
        #tapon7,
        #tapon8,
        #tapon10 {
            display: none;
        }
        .navbar-brand img {
            width: 65%;
            padding-bottom: 3px!important;
        }
    }