*{
    margin:0;
    padding:0;
    border:none;
    font-family: 'Lucida Sans Unicode';
    list-style: none;
    outline:none;
    user-select: none;
    scroll-behavior: smooth;
}


/*FONTS*/
@font-face {
    font-family: axiTitulo;
    src: url(../font/Axiforma-ExtraBold.ttf);
}
@font-face {
    font-family: axiSubtitulo;
    src: url(../font/Axiforma-Medium.ttf);
}
@font-face {
    font-family: openParrafos;
    src: url(../font/OpenSans-Light.ttf);
}

:root{
    --main-vh:100vh;
}


.loader{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background:#111010;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 1;
    color:#fff;
}
.loader img{
    width: 17em;
    opacity: 1;
    animation:pulse 0.5s;
    animation-direction:alternate;
    animation-iteration-count:infinite;
    margin-bottom:10px;
}
.loader label{
    opacity: 1;
    animation:pulse 0.5s;
    animation-direction:alternate;
    animation-iteration-count:infinite;
    
}
@keyframes pulse{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}


.font-axitit{
    font-family: axiTitulo;
}
.font-axisub{
    font-family: axiSubtitulo;
}
.font-openpa{
    font-family: openParrafos;
}


body{
 overflow-x: hidden;
    
}
button{
    cursor: pointer;
}
a{
    color: #fff;
    text-decoration: none;
}






.nav-mobile{
    display: none;
}

.swiper-container {
    width: 100%;
    height: var(--main-vh);
}


.bo{
    position: absolute;
    top:0;
    left:0;
    z-index: 100;
    width: 100%;
    height:0;
    border-width: 0 0 var(--main-vh) 180pc;
    border-style:solid;
    border-color:transparent transparent #fff transparent;
    
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
}

/* .swiper-slide::after{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    content:"";
    height:0;
    border-width: 0 0 var(--main-vh) 160pc;
    border-style:solid;
    border-color:transparent transparent white transparent;
    
} */

.img{
    width: 100%;
}


/* Menu Navigation */


.nav-desktop{
    position: fixed;
    width: 100%;
    z-index: 1000;
    display:flex;
    justify-content: space-between;
    color:#fff;
    align-items: center;
    background-image: linear-gradient(#1c1c1c, #1c1c1c30);
}

.brand{
    background-image: url('../img/loguito.png');
    width: 18%;
    height: 50px;
    background-repeat: no-repeat;
    background-size:100% 100%;
    margin: 0 0 0 20px;
    color:transparent;
}

.menu{
    display:flex;
    justify-content: space-between;
    align-items: baseline;
    text-transform: uppercase;
}

.menu li{
    padding: 20px 40px;
}



.btn-info{
    margin: 0px 20px 0 0;
    padding: 12px 52px;
    border-radius: 100px;
    text-transform: uppercase;
    font-size: 15px;
    background: #b40202;
    color: #fff;
    box-shadow: 7px 10px 9px -8px rgba(0,0,0,0.75);
}

.img-1{
    background-image:
        linear-gradient(to top, rgb(47 47 47 / 75%), rgba(179, 4, 5, 0.75)),
        url("../img/1.jpg");
}

.img-2{
    background-image:
        linear-gradient(to top,rgb(47 47 47 / 75%), rgba(179, 4, 5, 0.75)),
        url('../img/2.jpg');
}

.img-3{
    background-image:
    linear-gradient(to top,rgb(47 47 47 / 75%), rgba(179, 4, 5, 0.75)),
    url('../img/7.jpg');
}

.btns-directions{
    position: absolute;
    left: 0;
    width: 200px;
    top: 80%;
    margin-left: 50px;
}

.btn-next,.btn-prev{
    position:absolute;
    z-index: 200;
    color: #fff;
}

.first-ad,.second-ad,.third-ad{
    position: absolute;
    left: -100%;
    top: 30%;
    width: 40%;
    margin: 0 100px;
    color: #fff;  
}


.img-ad1,.img-ad2,.img-ad3{
    position: absolute;
    background-size: 100% 100%;
    bottom: 0;
    z-index: 100;
    right: 0;
}

.img-ad1{
    background-image: url(../img/reemplazar2.png);
    width: 740px;
    height: 547px;
    transform: scale(0.85);
    margin-right: 4em;
    margin-bottom: -2em;
}
.img-ad2{
    background-image: url("../img/reemplazar3.png");
    width: 1024px;
    height: 547px;
    margin-right:-4em;
    transform: scale(0.8);
}
.img-ad3{
    background-image: url("../img/reemplazar1.png");
    width: 740px;
    height: 547px;
    transform: scale(0.85);
    margin-right: 7em;
}








.animateShowFromLeft{
    animation: showFromLeft 300ms;
    animation-fill-mode: forwards;
}

.animateHideFromLeft{
    animation:hideFromLeft 300ms;
    animation-fill-mode: forwards;
}
.animateShowFromRight{
    animation:showRight 300ms;
    animation-fill-mode:forwards;
}
.animateHideFromRight{
    animation:hideRight 300ms;
    animation-fill-mode:forwards;
}










.box-service{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: var(--main-vh);
    color: white;
}
.box-service h1,.box-service button{
    text-transform: uppercase;
    margin: 40px;
}

.box-service .content-info,.box-service h1{
    z-index:10;
}
.box-service h1{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    width:100%;
    font-size:3vw;
}
.box-service h1:after,.box-service h1:before{
    content: "";
    position: absolute;
    width: 20%;
    height: 3px;
    background: #b40202;
    top: 42%;
}

.box-service h1:after{
    left: 10%;
}
.box-service h1:before{
    right: 10%;
}


.box-service div label{
    display: flex;
    align-items: center;
    position: relative;
    font-size: 2vw;
    left: 100vw;
    /* animation:serviceShowing 600ms; */
    /* animation-fill-mode: forwards; */
}

.box-service div label:nth-child(1){
    animation-delay:1s;
    
}

.box-service div label:nth-child(2){
    animation-delay:2s;
    /* animation-fill-mode: forwards; */
}

.box-service div label:nth-child(3){
    animation-delay:3s;
    /* animation-fill-mode: forwards; */
}

.box-service div label:nth-child(4){
    animation-delay:4s;
    /* animation-fill-mode: forwards; */
}
.box-service div label:nth-child(5){
    animation-delay:5s;
    /* animation-fill-mode: forwards; */
}


.box-service div button, .btn-call{
    padding: 10px 20px;
    border-radius: 4px;
    margin: 20px auto;
    display: block;
    text-transform: uppercase;
    font-size: 15px;
    background: #b40202;
    color: #fff;
    box-shadow: 7px 10px 9px -8px rgba(0,0,0,0.75);
}
.btn-call{
    font-family:openParrafos ;
    cursor: pointer;
    position: relative;
}
.box-service div label .icon-check{
    width: 35px;
    margin: 5px 10px;
    fill:#b40202;
}
.box-service div label p::first-letter,.box-service div p::first-letter{
    text-transform: capitalize;
}
.box-service div .p-contact{
    margin: 40px 20px;
}

.parallax{
    background-image: url('../img/6.jpg');
    min-height: 100vh; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
    overflow: hidden;
}
.filter{
    background: #1c1c1c;
    opacity: 0.8;
    position: absolute;
    height: 100vh;
    width: 100%;
}



@keyframes serviceShowing{
    0%{
        visibility: hidden;
        opacity:0;
        left:100vw;
    }

    100%{
        visibility: visible;
        opacity: 1;
        left:0;
    }
}
@keyframes serviceHiding{
    0%{
        visibility: visible;
        opacity: 1;
        left:0;
    }
    100%{
        visibility: hidden;
        opacity:0;
        left:100vw;
    }
}




.swiper-pagination-bullet{
    margin: 0 12px;
    width: 15px;
    height: 15px;
}
.swiper-pagination-bullet-active{
    background:#b40202;
}


.info1{
    display:flex;
    flex-direction:column;
}
.info1 p{
    padding: 0 5em;
}

.empresa{
    background: #fff;
    display: flex;
    position:relative;
}


.img-empresa,.slider-empresa{
    width: 50%;
}

.emp-btns{
    position: absolute;
    bottom: 6em;
    display: flex;
    width: 100%;
    justify-content: center;
}

.img-empresa{
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-empresa img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.title-empresa{
    font-size: 4vw;
    color:#b40202;
}







/* GALERIA */
.swiper3{
 height: 80%;
}
.galeria{
    padding: 2.3em 0 0 0;
    height: 70vh;
    padding-bottom: 10em;
    background: #222222;
}
.galeria .titles{
    width: 100%;
    height: 30vh;
    text-align: center;
    position: relative;
}
.galeria .titles h1:nth-child(1){
    font-size: 9vw;
    opacity: 0.7;
    text-transform: uppercase;
    color: #222222;
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
.galeria .titles h1:nth-child(2){
    position: absolute;
    bottom: 0px;
    left: 2.5em;
    font-size: 5vw;
    text-transform: uppercase;
    color: white;
}
.swiper3-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.gal-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.gal-container img{
    width: 18%;
    height: 25vh;
    object-fit: cover;
    margin: 15px;
}
.img-content{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
    right: 0;
    z-index: 5000;
    justify-content: center;
    align-items: center;
    display:none;
}
.img-content img{
    max-width: 100%;
    max-height: 100%;
}
.img-content button{
    position: absolute;
    top: 0;
    right: 0;
    margin: 1em;
    width: 30px;
    height: 30px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    border-radius: 3px;
    background: red;
    color: #fff;
}






/* CONTACTO */
.contacto{
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
}

.contacto-map iframe{
    width: 100%;
    position: absolute;
    height: 100%;
    z-index: 1;
    top: 0;
}
.contacto-form{
    width: 20em;
    position: relative;
    background: #fff;
    z-index: 3;
    padding: 20px;
    margin: 5em;
    top: 3em;
    box-shadow: 7px 10px 9px -8px rgba(0,0,0,0.75);
}
.contacto-form h1{
    margin: auto;
    font-size: 2em;
    margin-bottom: 1em;
    border-bottom: solid 2px #b40202;
    color: #b40202;
}
.contacto-form,.contacto-form div{
    display:flex;
    flex-direction: column;
}
.contacto-form div{
    padding: 5px;
}

.contacto-form input,.contacto-form textarea{
    border: solid 2px #e2e2e2;
    padding: 5px;
}
.contacto-form input:focus,.contacto-form textarea:focus{
    border-bottom:solid 2px #b40202;
}
.contacto-form button{
    background: #b40202;
    color: #fff;
    padding: 10px;
    width: 30%;
    border-radius: 4px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contacto-form button svg{
    width: 25px;
    fill: #fff;
}

.msj-contacto{
    color: #fff;
    padding: 5px;
    font-size: 13px;
    border-radius: 3px;
    display:none;
}
.error-newslatter{
    font-weight: bolder;
    display: none;
}




/* FOOTER */
.footer{
    display: flex;
    justify-content: space-around;
    padding: 3em;
    background: #1c1c1c;
}
.footer .title-info,.footer ul{
    color:#fff;
}
.footer .footer-navigation img{
    width: 20em;
} 
.footer ul{
    margin-top: 2em;
}
/* .footer .footer-navigation ul{
    text-transform: uppercase;
    
} */
.footer ul li{
    padding:6px 0;
    display: flex;
    align-items: center;
}
.footer ul li svg{
    width: 20px;
    fill:#fff;
    margin-right: 10px;
}


/* NEWSLATTER */
.newslatter{
    background: #b40202;
    color: #fff;
    display: flex;
    justify-content: space-evenly;
    padding: 2em;
    align-items: center;
}
.newslatter h2 label{
    font-size: 13px;
    display: block;
}

.newslatter .inpbtn{
    display:flex;
    border-radius: 4px;
    overflow: hidden;
}
.newslatter .inpbtn input{
    padding: 0px 10px;
    width: 25em;
}
.newslatter .inpbtn button{
    padding: 10px;
    background: #b40202;
    border: solid 2px #fff;
    color: #fff;
}



/* AUTOELEVADORES */
.autoelevadores{
    padding-top: 6em;
    height: 80vh;
}

.autoelevadores .auto-tipos{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.autoelevadores .auto-tipos .tipo{
    width: 30%;
    height: 21em;
    padding: 15px;
    /* box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75); */
    /* box-shadow: 0px 1px 5px 0px rgb(41 41 41 / 40%); */
    transition: all ease 500ms;
    position: relative;
    border:1px solid rgba(0,0,0,.125);
    top:0;
    overflow: hidden;
}
.autoelevadores .auto-tipos .tipo img{
    width: 100%;
    transition: all ease 500ms;
}

.autoelevadores .auto-tipos .tipo:hover{ 
    top: -15px;
}
.autoelevadores .auto-tipos .tipo:hover img{
    transform: scale(1.2);
}


.autoelevadores .auto-tipos .tipo .auto-data{
    margin-top: 2em;
}

.autoelevadores .auto-title{
    margin: auto;
    font-size: 2em;
    margin-bottom: 1em;
    border-bottom: solid 2px #b40202;
    width: 10em;
    color:#b40202;
    text-align: center;
}




.slogan{
    margin: 3em 0;
    text-align: center;
    font-size: 30px;
    color:#b40202;
}


.wasaa{
    width: 70px;
    height: 70px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1000;
    margin: 0 30px 30px 0;
    background:	#25D366;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow:5px 5px 9px -8px rgba(0,0,0,0.75);
}
.wasaa a{
    display: flex;
    justify-content: center;
    align-items: center;
}
.wasaa a svg{
    width: 55%;
    fill: #fff;
}


.swiper4{
    height: unset;
    padding-top: 2em;
}
.box-pagination{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
}
.info-support{
    display: flex;
    justify-content: space-around;
}
.info-support img{
    width: 20%;
}
.box-pagination div{
    color:#b40202;
    position:unset;   
    margin: 0 2em;
}

.title-home{
    font-size:30px;
    text-transform: uppercase;
}






@media screen and (max-width:850px){

    body{
        overflow-x: hidden;
    }


    .btns-directions{
        width: 100%;
        top: 60%;
        margin: 0;
    }


    .first-ad,.second-ad,.third-ad{
        position: absolute;
        width: 95%;
        left: 0;
        margin: 0;
        font-size: 15px;
        top: 20%;
        padding: 0 10px;
    }

    .img-ad1,.img-ad2,.img-ad3{
        background-size: cover;
    }
    .img-ad2{
        transform: scale(0.46) translate(61%, 56%);
    }
    .img-ad3{
        transform: scale(0.5) translate(45%, 50%);
        margin-right: 0;
    }
    .img-ad1{
        transform:scale(0.5) translate(78%, 46%);
        
    }




    .empresa{
        flex-direction: column;
    }
    .img-empresa, .slider-empresa{
        width:100%;
    }
    .img-empresa,.slider-empresa,.swiper2{
        height: 65vh;
    }
    .title-empresa{
        font-size: 8vw;
    }
    .info1 p{
        padding:0 3em;
    }
    /* .info1{
        padding:15px;
    } */

    .emp-btns{
        bottom: 2em;
    }



    .contacto{
        flex-direction: column-reverse;
        height: unset;
    }
    .contacto-map{
        width: 100%;
        height: 50vh;
    }
    .contacto-map iframe{
        position:unset;
    }
    .contacto-form{
        margin:0;
        width: 100%;
        position: unset;
        box-shadow: unset;
        padding: 20px 0;
    }
    .contacto-form div{
        padding: 5px 3em;
    }


  
    .swiper3-slide img{
        width: 100% !important;
    }


    .newslatter{
        flex-direction: column;
    }
    .newslatter .inpbtn{
        width: 80vw;
    }
    .newslatter .inpbtn input{
        width: 100%;
    }

    .footer{
        flex-direction: column;
    }
    .footer .footer-navigation{
        margin-bottom: 4em;
        border-bottom: solid 2px #b00303;
        padding-bottom: 2em;
    }
    .footer .footer-navigation img{
        width: 100%;
    }


    .autoelevadores{
        height: unset;
    }
    .autoelevadores .auto-tipos{
        flex-direction: column;
    }
    .autoelevadores .auto-tipos .tipo{
        width: 100%;
        height: unset;
        padding: 20px 0;
        margin: 10px 0;
    }
    .autoelevadores .auto-tipos .tipo .auto-data{
        padding: 2em;
        font-size: 15px;
    }

    .galeria .titles{
        height: 12vh;
    }
    .swiper3{
        height: 100%;
    }
    .img-empresa img {
        width: 61%;
        
    }
    .box-service div label{
        font-size: 4vw;
    }
    .info1 p{
        font-size: 3vw;
    }
    .first-ad, .second-ad, .third-ad{
        margin: unset;
        position: unset;
        width: 80%;
    }
  
}



@media screen and (max-width:1160px) {

    body{
        overflow-x: hidden;
        scroll-behavior: smooth;
    }

    .nav-desktop{
        display: none;
    }
    .nav-mobile{
        display:block;
        position: fixed;
        z-index: 1000;
    }


    .btn-menu{
        padding: 20px;
        display: block;
        background: #b40202;
        border-bottom-right-radius: 10px;
    }

    .btn-menu span{
        display: block;
        width: 30px;
        height: 5px;
        background:#fff;
        margin:5px;
        border-radius:5px;
    }

    

    .menu-mobile{
        position: fixed;
        top: 0;
        display: flex;
        flex-direction: column;
        background: #1c1c1c;
        padding: 20px;
        bottom: 0;
        left:-100%;
        transition: all ease 0.3s;
    }

    .menu-mobile .menu{
        display: flex;
        flex-direction: column;
    }
    .menu-mobile img{
        width: 15em;
    }

    .menu-mobile:hover{
        left:0;
    }

    .btn-menu:focus ~ .menu-mobile{
        left:0;
    }



    .box-service h1{
        font-size: 5vw;
    }
    .box-service h1:after,.box-service h1:before{
        width: 10%;
    }




    .img-ad2{
        transform: scale(0.46) translate(61%, 56%);
    }
    .img-ad3{
        transform: scale(0.5) translate(45%, 50%);
        margin-right: 0;
    }
    .img-ad1{
        transform:scale(0.5) translate(78%, 46%);
        
    }
    .first-ad, .second-ad, .third-ad{
        margin: unset;
        position: absolute;
        width: 96%;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .first-ad h1,.second-ad h1,.third-ad h1{
        font-size: 5vw;
    }
}


/* Animations */
@keyframes showFromLeft {
    0%{
        visibility: hidden;
        opacity: 0;
        left:-100%;
    }

    100%{
        visibility: visible;
        opacity: 1;
        left:0;
    }
}

@keyframes hideFromLeft {
    0%{
        visibility: visible;
        opacity: 1;
        left:0;
    }
    100%{
        visibility: hidden;
        opacity: 0;
        left:-100%;
    }
}


@keyframes showRight {
    0%{
        visibility: hidden;
        opacity:0;
        right:-100%;
    }

    100%{
        visibility: visible;
        opacity: 1;
        right:0;
    }
}

@keyframes hideRight {
    0%{
        visibility: visible;
        opacity: 1;
        right:0;
    }
    100%{
        visibility: hidden;
        opacity: 0;
        right:-100%;
    }
}