/* latin-ext */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v15/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v15/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v15/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v15/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v15/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu6-K6h9Q.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/dmsans/v15/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

.open-sans-font{
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
}

.open-sans-font-regular{
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
}

.hammersmith-one-regular {
    font-family: "Hammersmith One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

.img-principal{
    overflow: hidden;
    background-image: url(/assets/images/imagen-principal.png);
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: cover;
    background-position: 90%;
    height: 100vh;
}

.banner-principal{    
    padding: 30vh 0vh 0vh;
}
.banner-secundario{    
    padding: 10vh 0vh 20vh;
}
.texto-principal{
    color: white;
    margin: 20vh auto;
    text-shadow: 5px 3px 1px black;
}
.texto-principal2{
    margin-top: 30vh;
}
.frase-principal{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}
.align-abajo{
    position: absolute;
    bottom: 100px;
}
.tarjetas{
    max-height: 500px;
}
.text-justify{
    text-align: justify;
}
.btn-interkauppa{
    background: rgb(35, 35, 35);
    padding: 25px 35px;
    color: white;
    font-weight: 600;
    text-decoration: none;
}
.negro{
    background: rgb(35, 35, 35);
}
.img-contacto{
    height: 600px;
    width: 100%;
    border-radius: 25px;
    object-fit: cover;
}

.img-abajo-del-banner{
    height: 300px;
    width: 100%;
    border-radius: 25px;
    object-fit: cover;
}
.img-tienda{
    overflow: hidden;
    background-image: url(https://www.interkauppa.mx/assets/images/mujer-sonriente-redecorando-el-hogar-tres-min.jpg);
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: cover;
    background-position: 90%;
    height: 100vh;
}
.p-50vh{
    padding: 45vh 0vh;
}
.mayusculas{
    text-transform: uppercase;
}
.cuadrante-titulos{
    font-size: 200px;
    position: absolute;
    z-index: 1000;
    color: rgb(26, 26, 26);
}

.cuadrante-contenedor-1{
    min-height: 100vh;
    padding: 15vh 0vh 10vh;
    position: relative;
}
.titulo-1{
    right: -50px;
}
.cuadrante-contenedor-2{
    min-height: 100vh;
    padding: 15vh 0vh 10vh;
    position: relative;
}
.titulo-2{
    right: -180px;
    bottom: -60px;
}
.cuadrante-contenedor-3{
    min-height: 100vh;
    padding: 20vh 0vh 0vh;
    position: relative;
}
.titulo-3{
    left: -69px;
    bottom: -107px;
}
.titulo-3-1{
    line-height: .95;
    top: -128px;
    right: -144px;
}
.cuadrante-contenedor-4{
    min-height: 100vh;
    padding: 15vh 0vh;
    position: relative;
}

.bg-blanco{
    background-color: white;
}
.bg-gris{
    background-color: #f3f3f3;
}
.relative{
    position: relative;
}
.cuadrito{
    height: 50px;
    display: block;
    background: #134B78;
    position: absolute;
    bottom: 0px;
}
.cuadrito2{
    height: 50px;
    display: block;
    background: #134B78;
    position: absolute;
    top: 0px;
}

.contacto-contenedor{
    padding:10vh 0vh;
}

.boton-lenguaje{
    cursor: pointer;
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 1400px) {
    .img-principal{
        background-position: 55%;
    }
}

@media only screen and (max-width: 1600px) {
    .titulo-2{
        font-size: 170px;
        right: -80px;
    }
    .titulo-3-1{
        font-size: 170px;
    }
    .titulo-4{
        font-size: 170px;
    }
}

@media only screen and (max-width: 1200px) {
    .cuadrante-titulos{
        font-size: 180px;
    }
    .titulo-2{
        font-size: 140px;
        right: -60px;
        bottom: -40px;
    }
    .titulo-3-1{
        font-size: 140px;
        right: -45px;
        top: -70px;
    }
    .titulo-4{
        font-size: 140px;
    }
}


@media only screen and (max-width: 900px) {
    .cuadrante-titulos{
        font-size: 180px;
    }
    .titulo-2{
        font-size: 100px;
        right: -50px;
        bottom: -40px;
    }
    .titulo-3-1{
        font-size: 90px;
        right: 25px;
    }
    .titulo-4{
        font-size: 140px;
    }
}
@media only screen and (max-width:577px){

}

@media only screen and (max-width: 600px) { /*    */
    .titulo-1{
        right: 15px;
    }
    .titulo-2{
        font-size: 100px;
        right: -50px;
        text-align: right;
    }
    .titulo-2-1{
        font-size: 140px;
    }
    .titulo-3{
        left: 20px;
        top: -87px;
        font-size: 140px;
    }
    .titulo-3-1{
        font-size: 82px;
        text-align: right;
        /* right: auto; */
        /* left: 0px; */
        top: 115px;
    }
    .cuadrito-v{
        max-width: 100px;
    }
}


@media only screen and (max-width: 500px) { /*                                              mobile                                   */
    .banner-principal{
        padding: 5vh 0vh;
    }
    .banner-secundario{
        padding: 0vh 0vh 5vh;
    }
    .img-tienda{
        background-position: 75%;
    }
    .boton-tienda{
        margin:  auto;
        text-align: center;
        top: 95%;
    }
    .cuadrante-titulos{
        font-size: 130px;
    }
    .titulo-1{
        right: 0px;
    }
    .cuadrante-contenedor-2{
        padding: 5vh 0vh;
    }
    .titulo-2{
        font-size: 75px;
        top: 209px;
        line-height: .9;
        right: 20px;
    }
    .cuadrante-contenedor-3{
        padding: 5vh 0vh 0vh;
        min-height: 0vh;
    }
    .titulo-3-1{
        font-size: 65px;
        left: 6px;
        position: relative;
        text-align: right;
        height: 40px;
        top: -85px;
    }
    .titulo-3{
        left: 20px;
        top: -35px;
        font-size: 90px !important;
    }
    .cuadrante-contenedor-4{
        padding: 5vh 0vh;
    }
    .titulo-4{
        font-size: 100px;
        top: -55px;
    }
    .cuadrito, .cuadrito2{
        height: 25px;
    }

    .contacto-contenedor{
        padding:5vh 0vh;
    }
    .logo-footer{
        max-width: 190px;
    }
    .texto-footer{
        font-size: 12px;
    }
    .texto-principal{
        margin: 10vh 0vh;
    }
}

.efecto{ /*                                                                 efectos                                              */
    position: relative;
    animation: animacion 2s ease;
    -webkit-animation: animacion 1s ease;
    -moz-animation: animacion 1s;
    -o-animation: animacion 1s;
    -ms-animation: animacion 1s;
  }
  
  @keyframes animacion {
    0%   { opacity: 0;   }
    100% { opacity: 1;   }
  }
  
  @-moz-keyframes animacion {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-webkit-keyframes fadeIn {
    0% { opacity: 0; }animacion
    100% { opacity: 1; }
  }
  
  @-o-keyframes animacion {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-ms-keyframes animacion {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

.efecto2{ 
    view-timeline-name: --efectos;
    view-timeline-axis: block;

    animation-timeline: --efectos;
    animation-name: animacion2;

    animation-range: entry 15% cover 70%;
    animation-fill-mode: both;
    position: relative;
}

.efecto3{ 
    view-timeline-name: --efectos;
    view-timeline-axis: block;

    animation-timeline: --efectos;
    animation-name: animacion3;

    animation-range: entry 50% cover 20%;
    animation-fill-mode: both;
}

/* This only changes this particular animation duration */
@keyframes animacion {
    0%   {  top: 200px; opacity: 0;  }
    100% {  top:0px;   opacity: 1;   }
}
  

@keyframes animacion2 {
    0%   {  top: 200px; opacity: 0;    }
    100% {  top:0px;   opacity: 1;   }
}


@keyframes animacion3 {
    0%   {  top: 30px; opacity: 0;  scale: 50%;  }
    100% {  top:0px;   opacity: 1;  scale: 100%; }
}


@media (prefers-reduced-motion: no-preference) {
    .fade-in {
      animation-name: animacion;
      animation-delay: .5s;
      animation-duration: .7s;
      opacity: 1;
    }
  }