@import url('padding.css');
    @import url("https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,500,600,700|Poppins:300,400,600,700&display=swap");
    @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;600&display=swap');
    /*! > > GENERAL < < !*/
    
    body {
        width: 100%;
        background-color: #efefef;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5 {
        font-family: 'Raleway', sans-serif;
        font-weight: 600;
    }
    
    a {
        text-decoration: none;
        font-weight: 600;
        color: #000;
    }
    
    a:hover {
        color: #ed2d38;
    }
    /*? > > MENU < < ?*/
    
    .navbar-logo {
        font-family: 'Lobster', cursive;
        font-size: 2.2vw;
        color: #ed2d38;
    }
    @media screen and (max-width: 768px){
        .navbar-logo {
            font-size: 1.4rem;
        }
    }
    
    .nav-item {
        padding: 0px 15px;
    }
    
    .nav-item a,
    .dropdown-menu a {
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size: 22px;
        color: #333;
    }
    
    .nav-item a:hover {
        color: #ed2d38 !important;
    }
    
    .navbar-logo:hover {
        color: #ed2d38 !important;
        text-decoration: none;
        text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.158);
    }
    
    .dropdown .dropdown-menu {
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.6s;
        max-height: 0;
        display: block;
        overflow: hidden;
        opacity: 0;
        border: none;
    }
    
    .dropdown.show .dropdown-menu {
        /* For Bootstrap 4, use .dropdown.show instead of .dropdown.open */
        max-height: 300px;
        opacity: 1;
    }
    
    .dropdown-item:focus {
        background-color: #fff !important;
    }
    
    @media only screen and (min-width: 768px) and (max-width: 992px) {
        .nav-item {
            padding: 0px 5px;
        }
        .nav-item a {
            font-size: 18px;
        }
        .navbar-logo {
            font-size: 28px;
        }
    }
    /*? > > BRANDING < < ?*/

    .dif-text{
        font-size: 1.5rem;
    }
    
    .dif {
        font-family: 'Lobster', cursive;
        color: #ed2d38;
    }

    .logo-sticky img{
        position: fixed;
        bottom: 10px;
        right: 10px;
        width: 12vw;
        min-width: 100px;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
    }
    .logo-sticky :hover{
        
        transform: translateY(-5px);
    }

    /*? > > FOOTER < < ?*/
    
    footer {
        /*border-top: 3px solid rgb(162, 162, 162);*/
        background: #e6e6e6;
    }
    
    footer h4 {
        font-family: 'Raleway', sans-serif;
        font-weight: 600;
        color: rgb(75, 75, 75);
    }
    
    footer p a {
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size: 1em;
        color: rgb(100, 100, 100);
        margin-left: 10px;
    }
    
    footer p a:hover{
        text-decoration: none;
    }

    .copy{
        margin-bottom: -20px;
    }
    .copy p, .copy p a{
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size: 0.85em;
        color: rgb(150, 150, 150);
    }
    .copy p a:hover{
        text-decoration: underline;
    }

    .formar-parte{
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size: 1em;
        color: rgb(100, 100, 100);
        margin-left: 10px;
        cursor:pointer;
    }
    .formar-parte:hover{
        text-decoration: none;
        color: #ed2d38;
    }

    /*! > > INDEX < < !*/
    /*? > > SLIDER < < ?*/
    
    .carousel-item {
        min-height: 30vw;
    }
    
    .carousel-item img {
        position: absolute;
        object-fit: cover;
        top: 0;
        left: 0;
        margin-top: 0px;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        height: 50px;
        width: 50px;
        background-size: 100%, 100%;
        margin-top: auto;
        margin-bottom: auto;
    }
    
    .carousel-indicators {
        color: #333;
    }
    
    .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
    }
    
    .carousel-control-next-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
    }
    /*? > > DIF TEXT < < ?*/
    /*
@media screen and (max-width: 880px) {
    .dif-text {
        margin-top: 40px;
    }
}
*/

    /*? > > Pasos < < ?*/
 
    /*new pasos css*/

    .cont{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
      }
      .num{
        width: 70%;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #fff;
        margin-bottom: 30px;
        position: relative;
      }
      .num h2{
        font-size: 2rem;
        color:#968c83;
        font-family: 'Lobster', cursive;
        position: relative;
        top:-5px;
        margin-right: 10px;
      }
      .tri{
        width: 0px;
        height: 0px;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 15px solid #fff;
        position: absolute;
        bottom: -15px;
      }
      .tri2{
        width: 0px;
        height: 0px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #e6e6e6;
        position: absolute;
        bottom: -10px;
      }
      .tri3{
        width: 0px;
        height: 0px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #fff;
        position: absolute;
        bottom: -5px;
      }

      @media screen and (min-width: 768px) {
          .cont{
              flex-direction: row;
              justify-content: space-evenly;
          }
          .num{
              width: 200px;
          }
          .tri{
              visibility: hidden;
          }
          .tri2{
            visibility: hidden;
        }
        .tri3{
            visibility: hidden;
        }
      }

      /*old pasos css*/
    #pasos{
        background-color: #e6e6e6;
        /*background-color: #fff5ea;*/
        padding: 50px 0 60px 0;
    }
    .pasos-h{
        /*color:#333;*/
        /*color: #7d5a5a;*/
        color: #968c83;
        /*font-family: 'Lobster', cursive;*/
        font-family: 'Raleway', sans-serif;
        font-weight: 600;
    }

    .paso{
        border-radius: 12px; 
        max-width: 240px; 
        background: #fff;
        transition: all 0.3s ease-in-out;
    }

    .paso:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        transform: translateY(-5px);
    }

    .numero{
        line-height:90px;
        text-align:center;
        font-size: 60px;
        color:#968c83;
        font-family: 'Lobster', cursive;
    }
    .flecha i {
        /*color: #8e8e8e;*/
        color: #968c83;
        font-size: 4em;
        margin: auto 15px auto 15px;
    }
    @media screen and (max-width: 770px) {
        .paso{
            min-width: 80% !important;
            max-width: 80% !important;
            padding: 5px;
        }
    }

    /*? > > Loading < < ?*/
    
    .loading{
        width: 100px !important;
        border-radius: 50px;
    }
    .swal2-loading .swal2-loader{
        border-top-color: #ed2d38 !important;
        border-bottom-color: #ed2d38 !important;
    }

    body.swal2-shown > [aria-hidden="true"] {
        filter: blur(10px);
      }
      
    body > * {
        transition: 0.1s filter linear;
      }

    /*? > > Selector < < ?*/
    
    .selector-departamento {
        padding: 10px;
        background-color: #ed2d38;
        font-size: 20px;
        color: #fff;
        border-radius: 6px;
        border: 3px #ce2931 solid;
        box-shadow: 0 0 6px rgba(51, 51, 51, 0.6);
    }
    
    .selector-departamento:focus {
        overflow: hidden !important;
        outline: none !important;
    }
    
    select:focus>option:checked {
        background: #ce2931 !important;
    }
    /*? > > CARTAS: PUNTOS DE IMPRESION < < ?*/
    
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    
    .slide-fade-enter,
    .slide-fade-leave-to
    /* .slide-fade-leave-active below version 2.1.8 */
    
    {
        transform: translateX(10px);
        opacity: 0;
    }
    
    .punto {
        margin: 15px;
        border-radius: 8px;
        background: #fff;
        overflow: hidden;
        min-height: 360px;
        position: relative;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease-in-out;
    }
    
    .punto:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        transform: translateY(-5px);
    }
    
    .punto img {
        max-height: 240px;
    }
    
    .punto .punto-body {
        margin-top: 10px;
        padding: 10px;
        min-height: 190px;
    }
    
    .punto .punto-footer {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        padding: 10px;
    }
    
    .punto .punto-footer .punto-ver {
        width: 100%;
        background-color: #ed2d38;
        color: #fff;
    }
    
    .punto .punto-footer .punto-ver:hover {
        background-color: #ce2931;
    }
    
    .punto .punto-footer .punto-ver:focus {
        overflow: hidden !important;
        box-shadow: none !important;
    }
    /*? > > BOTON VER PUNTO < < ?*/
    
    .boton {
        position: relative;
        font-size: 1rem;
        padding: 1.4rem 4.2rem;
        color: #ed2d38;
        text-transform: uppercase;
        transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
        cursor: pointer;
        user-select: none;
    }
    
    .boton:before,
    .boton:after {
        content: '';
        position: absolute;
        transition: inherit;
        z-index: -1;
    }
    
    .boton:hover {
        color: #fff;
        transition-delay: .5s;
    }
    
    .boton:hover:before {
        transition-delay: 0s;
    }
    
    .boton:hover:after {
        background: #ed2d38;
        transition-delay: .35s;
    }
    /*? > > EFECTO CENTRADO BOTON < < ?*/
    
    .efecto-centrado:before {
        top: 0;
        left: 50%;
        height: 100%;
        width: 0;
        border: 1px solid #ed2d38;
        border-left: 0;
        border-right: 0;
    }
    
    .efecto-centrado:after {
        bottom: 0;
        left: 0;
        height: 0;
        width: 100%;
        background: #ed2d38;
    }
    
    .efecto-centrado:hover:before {
        left: 0;
        width: 100%;
    }
    
    .efecto-centrado:hover:after {
        top: 0;
        height: 100%;
    }
    /*? > > CUSTOM SWAL CSS < < ?*/
    
    .swal-wide {
        width: 75vw !important;
        overflow: hidden;
    }

    .swal-contact {
        width: 65vw !important;
        overflow: hidden;
    }
    @media screen and (max-width: 1310px) {
        .swal-contact {
            width: 75vw !important;
            overflow: hidden;
        }
    }
    
    .swal2-close:focus {
        overflow: hidden !important;
        box-shadow: none !important;
    }
    
    .punto-contenedor-img {
        border-radius: 6px;
        overflow: hidden;
    }
    
    .punto-img {
        width: auto;
        height: 250px;
        margin-left: -60px;
    }
    
    .punto-ico {
        width: 30px;
    }
    
    .punto-ico i {
        font-size: 22px;
        margin-top: 2px !important;
    }
    
    .punto-link,
    .punto-info {
        font-weight: 300 !important;
        margin: 2px;
    }
    
    .punto-link:hover {
        text-decoration: none;
    }
    
    @media screen and (max-width: 372px) {
        .punto-ico .i2 {
            display: none;
        }
    }
    
    @media screen and (min-width: 373px) and (max-width: 1140px) {
        .punto-info-cont {
            margin-left: 20px;
        }
    }
    
    @media screen and (max-width: 1140px) {
        .swal-wide {
            width: 100vw !important;
            overflow: hidden;
        }
    }
    /*! > > FOTOS CSS < < !*/
    /*? > > HERO < < ?*/
    
    .imprime-hero {
        background-image: url(../img/productos/hero-imprime.jpg);
        height: 460px;
        display: flex;
        flex-direction: column;
        text-align: center;
        margin-bottom: 4.5em;
        background-color: #DDD7C4;
        background-position: 50% 50%;
        background-size: cover;
    }
    
    .imprime-header {
        margin-top: auto;
        margin-bottom: 20px;
    }
    
    .imprime-header h1 {
        font-size: 3.8rem;
        color: rgb(250, 244, 161);
        text-shadow: 0px 2px 12px rgba(51, 51, 51, 0.6);
    }
    
    .imprime-header p {
        font-size: 1.3rem;
        color: #fff;
        text-shadow: 0px 2px 12px rgba(51, 51, 51, 0.6);
    }
    
    @media screen and (max-width: 768px) {
        .imprime-header h1 {
            font-size: 2.8rem;
        }
    }

    .retro{
        border:15px solid #fff; 
        transform: rotate(-15deg); 
        box-shadow: 0px 4px 20px rgba(51, 51, 51, 0.4);
    }
    @media screen and (max-width:767px){
        .retro{
            transform: none !important;
            box-shadow: none !important;
            border: none !important;
        }
    }
    
    .imprime-tamanios-h {
        font-size: 1.5rem;
        font-family: 'Raleway', sans-serif;
        font-weight: 300;
    }
    
    .imprime-celular {
        background-color: rgb(255, 241, 177);
    }
    
    .imprime-celular img {
        border-radius: 30px;
        box-shadow: 0px 4px 22px rgba(51, 51, 51, 0.4);
    }
    
    .imprime-celular .dif {
        font-size: 20px;
    }
    
    @media screen and (max-width: 940px) and (min-width: 768px) {
        .imprime-celular-texto {
            margin-left: 60px;
        }
    }
    
    @media screen and (max-width: 768px) {
        .imprime-celular-texto {
            padding: 10px 60px 10px 60px;
            margin-right: auto;
            margin-left: auto;
            text-align: justify;
            padding-bottom: 50px;
        }
        .imprime-celular-texto h2 {
            width: 100%;
            text-align: center;
            padding-bottom: 20px;
        }
    }

    /*! > > ACERCA DE CSS < < !*/
    
    @media screen and (max-width: 990px){
        .txt-acerca{
            margin-top: 20px !important;
        }
    }

    /*! > > ALBUNES CSS < < !*/
    /*>>> HERO*/
    
    .album-hero {
        background-image: url(../img/productos/hero-fotolibro.jpg);
    }
    
    .album-header h1 {
        color: rgb(255, 198, 93);
        text-shadow: 0 0 16px rgba(51, 51, 51, 0.8);
    }
    
    .album-header p {
        color: #ed2d38;
        text-shadow: 0 0 12px rgba(51, 51, 51, 0.8);
    }
    
    .album-fondo {
        width: 100%;
        height: 220px;
        margin-top: 280px;
        z-index: -1;
        position: absolute;
        background-color: rosybrown;
    }
    
    .album-contenido img {
        box-shadow: 15px 15px 0px #fff, -15px -15px 0px #fff, -15px 15px 0px #fff, 15px -15px 0px #fff;
        width: 40vw;
    }
    
    @media screen and (max-width: 1200px) {
        .album-fondo {
            height: 20vw;
        }
        .album-contenido .album-segundo {
            margin-top: 12vw !important;
        }
    }
    
    @media screen and (max-width:1000px) and (min-width: 870px) {
        .album-fondo {
            height: 20vw;
            margin-top: 34vw !important;
        }
        .album-contenido img {
            width: 30vw;
            margin-top: 70px !important;
        }
        .album-contenido .album-segundo {
            margin-top: 20vw !important;
        }
    }
    
    @media screen and (max-width: 869px) {
        .album-fondo {
            display: none;
        }
        .album-contenido img {
            border: none;
            max-width: 450px !important;
        }
    }
    /*! > > CALENDARIOS CSS < < !*/
    /*>>> HERO*/
    
    .calendario-hero {
        background-image: url(../img/productos/hero-calendario.jpg);
    }

    .img-cal{
        max-width: 450px; 
        margin-top: -150px;
    }

    @media screen and (max-width: 1460px) {
        .img-cal{
            margin-top: 20px;
        }
        .cal-texto{
            margin-left: 10vw;
        }
    }