/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

@import url('css2');

* {
    font-family: 'Poppins', sans-serif;
    border: 0px;
    padding: 0px;
    margin: 0px;
}

button:focus {
    outline: none;
}

img:focus {
    outline: none;
}

div:focus {
    outline: none;
}

span:focus {
    outline: none;
}



.modal-header {
    z-index: 20;
}

.sidenav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

#portal-corporativo {
    display: none;
}

#profile {
    display: none;
}

header{
    background-color: #333333;
}

body {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    border: none;
}
.btn{
    background-color: inherit;
}
.slide {
    height: 60vw !important;
}

#logo {
  padding-left: 5vw;
  padding-right: 24vw;
  width: 10vw;
}


.banner .carousel-caption {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.banner .text-in-carousel {
    position: absolute;
    margin: 0;
    color: white;
    left: 35%;
    top: 45%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.banner .banner-title {
font-family: 'Poppins';
font-weight: bold;
font-size: 39pt;
}

.banner .banner-subtitle {
font-family: 'Poppins';
font-weight: 300;
font-size: 2vw;
padding-top: 1vw;
}

.banner .banner-button {
margin-top: 2vw;
background-color: white;
color: #DE001A;
font-family: 'Poppins';
font-size: 11pt;
padding: 13px 30px 13px 30px;
border-radius: 20px;
width: 176px;
height: 45px;
border: none;
}

.banner .banner-button a {
    color: #DE001A;
    text-decoration: none;
}

.banner .text-in-carousel-2 {
    position: absolute;
    margin: 0;
    color: white;
    left: 25%;
    top: 45%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.banner .text-in-carousel-3 {
position: absolute;
    margin: 0;
    color: white;
    /*right: 10%;
    top: 45%;
    -webkit-transform: translate(10%, -50%);
    -ms-transform: translate(10%, -50%);
    transform: translate(10%, -50%);*/
    text-align: right;
    bottom: 13%;
    left: 50%;
    transform: translateX(-50%);
}
.banner-content-3{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
        -ms-flex-direction: column; 
            flex-direction: column; 
    -webkit-box-pack: end; 
        -ms-flex-pack: end; 
            justify-content: flex-end;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    /*padding-right: 5%;*/
}

.banner .text-in-carousel-4 {
    position: absolute;
    margin: 0;
    color: white;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}

.banner-content-4{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    -webkit-box-pack: end; 
    -ms-flex-pack: end; 
    justify-content: flex-end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: center;
    /*padding-right: 5%;*/
}

.splide {
    visibility: visible;
}

.splide img {
    width: 20vw;
    padding-bottom: 40px;
}

@media (max-width: 768px) {
    .splide img {
        width: 20vw;
        padding-bottom: 80px;
    }
    .map-button {
        padding-bottom: 25px;
    }
}

.splide__arrow {
    display: none;
}

.splide__pagination li button {
    background:rgba(237, 28, 36);
}

.splide__pagination .is-active {
    background: darkred;
}

.modal-body img {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
}
.modal-text {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
}

.customer-logos {
    height: 200px;
}

.images-certificados {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.navbar-fixed nav {
    max-width: 100vw;
}

.modal-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
    min-width: 70vw;
}

.modal-menu-and-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.modal-content .close {
    margin: 10px;
}

.modal-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-top: 10px;
}

.modal-menu button {
    background-color: transparent;
    color: #DE001A;
    font-weight: bold;
    padding: 15px;
}

#datosUtilesHogar li {
    margin-top: 5px;
}

@media screen and (min-width: 768px) {
    #contact-1 button,
    #contact-2 button,
    #contact-3 button,
    #contact-4 button {
        display: none;
    }

    #contact-1:hover button,
    #contact-2:hover button,
    #contact-3:hover button,
    #contact-4:hover button {
        display: block;
    }

    #contact-2:hover .small-img,
    #contact-3:hover .small-img {
        display: none;
    }
    .modal-dialog {
        margin: 70px;
    }
    #sosRosa {
        max-height: 40vw;
    }
    .modal-dialog-centered {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    }
}

@media screen and (max-width: 768px) {
    #portal-corporativo {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 9px;
    text-decoration: none;
    line-height: 12px;
    padding: 5px;
    }
    .modal-content{
    max-height: 90vh;
    overflow-y: scroll;
}
#datosUtilesVehiculos {
    font-size: 12px;
}
#datosUtilesVehiculos li {
    font-size: 12px;
}
#datosUtilesVehiculos ul {
    font-size: 12px;
}
#datosUtilesVehiculos ol {
    font-size: 12px;
}

#datosUtilesHogar {
    font-size: 12px;
}
#datosUtilesHogar li {
    font-size: 12px;
}
#datosUtilesHogar ul {
    font-size: 12px;
}
#datosUtilesHogar ol {
    font-size: 12px;
}


#datosUtilesNautica {
    font-size: 12px;
}
#datosUtilesNautica li {
    font-size: 12px;
}
#datosUtilesNautica ul {
    font-size: 12px;
}
#datosUtilesNautica ol {
    font-size: 12px;
}

#datosUtilesNautica ol {
    margin-top: 10px;
}


    .carousel-indicators li {
        height: 5px;
        width: 5px;
    }

    .carousel-indicators .active {
        width: 6px;
        height: 6px;
    }

    .map h1 {
        font-size: 20px !important;
        padding-bottom: 1vw !important;
    }

    .brand-logo {
        height: 65px;
        margin-top: 3px;
    }

    .sidenav {
        right: 0;
        padding-top: 30px;
    }
    #profile {
        display: block;
        padding-left: 10px;
    }

    .mobile-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        width: 100vw;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
      }

    #portal {
        display: none;
    }

    .customer-logos {
        padding-bottom: 0px !important;
    }

    .slick-dots {
        top: 125px !important;
    }
    .logos {
        padding-bottom: 25px !important;
    }
    .logos-title {
        padding-bottom: 10vw !important;
    }
    .iso-text h4 {
        text-align: center;
    }
    .modal-dialog-centered {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        margin: 8px;
    }
    .modal-content {
        background-color: white;
    }
    .modal-body {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
        margin-right: 20px !important;
    }
    .modal-text {
        line-height: 5vw !important;
        padding-top: 15px !important;
    }
    #novedades-mobile {
        margin-left: 15px;
    }
    .modal-body img {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
    }
    .modal-text {

        -webkit-box-ordinal-group: 2;

            -ms-flex-order: 1;

                order: 1;
        color: black !important;
        padding-right: 2vw !important;
    }
    .modal-text h4 {
        color: #BB0222 !important;
    }
    .modal-text p {
        line-height: 15px;
    }
    .subtitle-modal {
        color: rgba(0, 0, 0, 0.6);
        font-weight: bold;
    }
    .modal-text ul {
        text-align: justify;
        margin-bottom: 10px;
        line-height: 19px !important;
        font-size: 9px;
    }
    .under-subtitle {
        text-align: justify;
        line-height: 19px !important;
        font-size: 9px;
    }
    .under-subtitle a {
        text-decoration: none;
        color: black;
    }
    .modal-header .close {
        top: 0px;
        margin-top: 0px;
    }
    .close {
        opacity: 0.9;
    }
    .close span {
        font-family: times;
    font-size: 35px;
    padding: 10px;
    top: 5px;
    position: relative;
    color: black !important;
    }
}


.close {
    opacity: 0.9;
}
.close span {
    font-family: times;
font-size: 25px;
padding: 10px;
top: 5px;
position: relative;
color: black !important;
}

.modal-text {
    padding-top: 10px;
    line-height: 23px !important;
    padding-bottom: 30px;
}

#myModal {
    margin-left: 10%;
    margin-right: 10%;
}

@media screen and (min-width: 768px) {
.modal-dialog {
    margin: 20px;
}
.modal-body img {
    max-height: 40vw !important;
}
}

.navlink {
    padding-right: 10px;
}

.navlink a {
    text-decoration: none;
    height: 45px;
}
.navlink a:hover {
    border-bottom: 2px solid red;
}
.map-button:focus {
    outline: none;
    opacity: 0.8;
}

@media only screen and (max-width: 900px){
/*     
    header{
        position: absolute;
        display: block;
        height: 5vw;
        padding: 1vw;
        z-index: 50;
    } */
    /* header a{
        display: none;
    } */
    /* header nav{
        display: block;
        margin-bottom: 100px;
    } */
    .banner {
        margin-top: auto;
        background-color: white;
        color: #DE001A;
        font-family: 'Poppins';
        font-size: 11pt;
        border-radius: 0;
        width: 100%;
        height: 25%;
        border: none;
    }

    .banner .banner-content-2{
        padding-left: 5vw;
    }
    .banner .banner-content-3{
        /*padding-right: 10%;*/
    }

    .banner .banner-title{
        font-size: 4vw;
    }
    .banner .banner-title{
        font-size: 3.5vw;
    }
    .banner .banner-button {
        /* margin-top: 2vw; */
        background-color: white;
        color: #DE001A;
        font-family: 'Poppins';
        font-size: 2vw;
        padding: 0.5em 1em 0.5em 1em;

        width: 20vw;
        height: 5vw;
        border-radius: 20px;
        border: none;
        }
    /* .center-text{
        display: flex;
        justify-content: center;
        align-items: center;
    } */
    

}


 .top-img {
    max-height: 1110px;
    -webkit-filter: brightness(59%);
            filter: brightness(59%);
    width: 100%;
}

.logo {
    position: absolute;
    z-index: 1;
    margin-left: 4.325vw;
    margin-top: 4.323vw;
    width: 10.417vw;
}


.navbar {
    position: absolute;
    z-index: 1;
    width: 100%;
}Z

.menu-buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    color: white;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    margin-left: 43.229vw;
    margin-right: 5.604vw;
    margin-top: 6.250vw;
    width: 100%;
}

.menu-buttons a {
    color: white;
    text-decoration: none;
    font-size: 1.094vw;
}

.header-text {
    position: absolute;
    z-index: 1;
    margin-left: 24.858vw;
    margin-top: 16.771vw;
    color: white;
    background-color: none;
}

h1 {
    font-weight: 400;
    font-size: 3.073vw;
}

.h1-piece {
    margin-bottom: 0.729vw;
    background-color: #DE001D;
    padding-left: 5.490vw;
    padding-right: 0.5vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.header-subtitle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    text-align: right;
    font-weight: 600;
    font-size: 2.083vw;
}

.header-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    text-align: right;
    font-weight: 600;
    font-size: 2.083vw;
}

.header-button button {
    width: 20.833vw;
    height: 5.208vw;
    border-radius: 5px;
    color: #DE001D;
    background-color: white;
    font-size: 1.302vw;
}

.hamburger {
    display: none;
}


/*media query for hamburger*/
@media screen and (max-width: 740px) {

.hamburger {
    display: block;
    z-index: 4;
}

.navbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    z-index: 3;
}

.menu-buttons {
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 25vw;
    background-color:  #DE001D;
    position: relative;
    padding: 10px 10px 10px 0px;
    margin-top: 3.378vw;
    margin-left: 0px;
    margin-right: 3.378vw;
    width: 20%;
    z-index: 4;
    position: fixed;
}

.hamburger {
    background-image: url("src/content/menu-icon.png");
    background-size: 2vw;
    background-repeat: no-repeat;
    margin-top: 4.878vw;
    padding-right: 3.378vw;
    z-index: 4;
}

}


/*services section*/
.services {
    display: -ms-grid;
    display: grid;
    background-color: #EAEAEA;
}


.services-title h1 {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 2vw;
    padding: 0px;
    margin: 0px;
    padding-top: 135px;
    padding-bottom: 80px;
}

.row {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    height: 25vw;
    width: 100%;
}

.services img {
    width: 100%;
    height: auto;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.services img:hover {
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9); 
    -webkit-box-shadow: 15px 15px 5px 0px rgba(0,0,0,0.75); 
            box-shadow: 15px 15px 5px 0px rgba(0,0,0,0.75);
}

.services-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 90px 68px 90px 68px;
    text-align: center;
}

.services-box h1 {
    font-family: 'Poppins';
    font-weight: 500;
    font-size: 1.333vw;    ;
}

.services-box h2 {
    font-family: 'Poppins';
    font-weight: 300;
    font-size: 0.8vw;
    color: black;
}


@media (max-width: 768px) {
    #number {
        color: white !important;
        font-size: 5vw !important;
        text-decoration: none !important;
    }
}


@media screen and (max-width: 1442px) {
.services-box {
padding: 50px 50px 50px 50px;
}
} 
@media screen and (max-width: 997px) {
.services-box {
padding: 50px 25px 50px 25px;
}
} 

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

    .row {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
height: 100vw;
}
.services img {
height: auto;
}

.services-box {
padding: 25px 25px 25px 25px;
}

.services-box h1 {
    font-size: 3vw;
}

.services-box h2 {
    font-size: 1.5vw;
}

} 

@media screen and (max-width: 440px) {
.services-box {
padding: 5px 10px 5px 10px;
}
}


/*comunnicate section*/


.contact h3 {
    margin: 0px;
    font-size: 1.927vw;
}


.contact-header {
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-weight: lighter;
}

.contact-header h1 {
    font-size: 2vw;
    padding: 0px;
    margin: 0px;
}

.contact-header h2 {
    font-size: 1vw;
    padding-bottom: 30px;
}


.contact-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
    background-color: teal;
}

.contact-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: #DE001D;
    width: 50%;
    height: 18vw;
    position: relative;
    color: white;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.contact-column-text {
    position: absolute;
    padding-left: 1.438vw;
    padding-top: 4.156vw;
    padding-bottom: 4vw;
    font-size: 1vw;
}

.contact-title {
    font-size: 1.5vw;
}

#hide {
    visibility: hidden;
}


.computer-image {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-filter: brightness(75%);
            filter: brightness(75%);
    opacity: 1;
  display: block;
  width: 100%;
  -webkit-transition: .5s ease;
  -o-transition: .5s ease;
  transition: .5s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}


.phone-image {
    width: 100%;
    height: 100%;
    -webkit-filter: brightness(75%);
            filter: brightness(75%);
}


.small-img {
    height: 3vw;
    width: 3vw;
}



#contact-1 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
}
#contact-2 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
}
#contact-3 {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
}
#contact-4 {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
}

.hidden-button {
    width: 6.354vw;
    margin-top: 1vw;
    font-size: 0.625vw;
    border-radius: 2vw;
    border-color: white;
    padding: 0px;
    border-width: 0px;
    height: 2vw;
    color: #DE001D;
    background-color: white;
    opacity: 100;
}

.hidden-button a {
    color: #DE001D;
    text-decoration: none;
}

.contact-column:hover button {
    opacity: 1;
    -webkit-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.8s;
         -o-transition-duration: 0.8s;
            transition-duration: 0.8s;
}

.contact-column .small-img {
    opacity: 1;
}

.contact-column:hover .small-img {
    opacity: 100;
    -webkit-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.2s;
         -o-transition-duration: 0.2s;
            transition-duration: 0.2s;
}

.sweep-this {
    position: absolute;
    width: 0%;
    height: 100%;
    opacity: 40%;
}

.contact-column:hover .sweep-this {
    width: 100%;
    -webkit-transition-property: width;
    -o-transition-property: width;
    transition-property: width;
    -webkit-transition-duration: 700ms;
         -o-transition-duration: 700ms;
            transition-duration: 700ms;
}


.contact-column:hover .contact-column-text {
    padding-top: 0px;
    -webkit-transition-property: padding-top;
    -o-transition-property: padding-top;
    transition-property: padding-top;
    -webkit-transition-duration: 0.5s;
         -o-transition-duration: 0.5s;
            transition-duration: 0.5s;
}


/*paso a vertical*/

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

    .contact-column {
width: 100vw;
height: 50vw;
}
#contact-1 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
}
#contact-2 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
}
#contact-3 {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
}
#contact-4 {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
}

.contact h3 {
    font-size: 5vw;
}

.contact p {
    font-size: 11px;
}

.hidden-button {
    height: 6vw;
    width: 28vw;
    font-size: 2vw;
}

}



/*parallax section*/



.parallax {
    /*width: 100%;
    height: 1080px;
    background-image: url("src/assets/quienessomos.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;*/
}

.parallax::after {
    content: "";
    width: 100%;
    height: 1080px;
    background-image: url("src/assets/quienessomos.jpg");
    background-repeat: no-repeat; /* Indicamos que no se repetira */
    background-size: cover; /* Encajamos la imagen al 100% del ancho */
    background-attachment: fixed; /* Establecemos una posicion fija para la imagen */
    background-position: center;
    z-index: 9999;
    display: block;
}

@media screen and (max-width: 768px) {
    .parallax {
        background-image: url("src/assets/parallax-mobile.jpg");
    }
    
    .parallax::after {
        background-image: url("src/assets/parallax-mobile.jpg");
        height: 600px;
        z-index: 9999;
        background-attachment: initial;
    }
}

 
.contenedor {
width: 100%;
margin:auto;
height: 1px;
background-color: white;

}

article {
background: white;
padding-top: 132px;
padding-bottom: 82px;
padding-left: 163px;
padding-right: 163px;
margin:0px 0;
-webkit-box-shadow:0 5px 5px 3px rgba(0, 0, 0, 0.25);
        box-shadow:0 5px 5px 3px rgba(0, 0, 0, 0.25);
max-width: 100%;
text-align: center;
}

article h2 {
    font-weight: 300;
    font-size: 31px;
}

.under-title {
    font-size: 17px;
}

@media screen and (max-width: 1095px) {
    article {
        padding-top: 76px;
        padding-bottom: 41px;
        padding-left: 81.5px;
        padding-right: 81.5px;
    }
}

@media screen and (max-width: 815px) {
    article {
        padding-top: 38px;
        padding-bottom: 20.5px;
        padding-left: 40.75px;
        padding-right: 40.75px;
    }
    article h2 {
        font-size: 20px;
    }
    .under-title {
        font-size: 12px;
    }
}

/* Cards that turn section */

.cards {
    border: none;
    border-style: none !important;
}

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 0px solid #f1f1f1; 
    border-style: none !important;
    -webkit-perspective: 1000px;
            perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: -webkit-transform 0.8s;
    transition: -webkit-transform 0.8s;
    -o-transition: transform 0.8s;
    transition: transform 0.8s;
    transition: transform 0.8s, -webkit-transform 0.8s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
/*     background-color: #bbb;
 */    color: black;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: dodgerblue;
    color: white;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  
  .card-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    background-color: DodgerBlue;
  }
  
  .one-div {
    background-color: #f1f1f1;
    width: 25%;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
  
  .two-div {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  
  @media screen and (max-width: 800px) {
  
    .one-div {
      width: 50%;
    }
    
  }


/* logo carousel section */

.logos {
    padding-bottom: 130px;
}

.customer-logos {
    padding-bottom: 100px;
}

.cards-title {
    padding-top: 96px;
    padding-bottom: 122px;
    padding-right: 220px;
    padding-left: 220px;
}

.cards-title h1 {
    font-size: 31px;
    font-weight: 300;
    text-align: center;
}

.cards-title h2 {
    font-size: 17px;
    font-weight: 300;
    text-align: center;
}

.slick-dots {
    padding: 0px !important;
}

.slick-dots li button::before {
    font-size: 9px;
    color: #D5001D;
    opacity: 0.4;
}

@media (max-width: 768px) {
    .slick-dots li {
        width: 8px;
        height: 8px;
    }
}

    .slick-dots li.slick-active button::before {

        color: #D5001D;
        opacity: 1;
        }


@media screen and (max-width: 815px) {
    .cards-title {
        padding-top: 38px;
        padding-bottom: 20.5px;
        padding-left: 40.75px;
        padding-right: 40.75px;
    }
    .cards-title h1 {
        font-size: 20px;
    }
    .cards-title h2 {
        font-size: 12px;
    }
}


.logos-title {
    border-style: none !important;
    padding-top: 96px;
    padding-bottom: 60px;
    padding-right: 220px;
    padding-left: 220px;
    
}

.logos-title h1 {
    font-size: 2vw;
    font-weight: 300;
    text-align: center;
}

.logos-title h2 {
    font-size: 1vw;
    font-weight: 300;
    text-align: center;
}

@media screen and (max-width: 815px) {
    .logos-title {
        padding-top: 15vw;
        padding-bottom: 15vw;
        padding-left: 40.75px;
        padding-right: 40.75px;
    }
    .logos-title h1 {
        font-size: 20px;
    }
    .logos-title h2 {
        font-size: 12px;
    }
}

/*normas iso*/
.normas-iso {
    background-color: #BB0222;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding-top: 4vw;
    padding-bottom: 2vw;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: white;
  }

  .iso-text {
    padding-left: 2vw;
    padding-right: 4vw;
  }

  .normas-iso h4 {
    font-size: 1.5vw;
    font-weight: 400;
    padding-bottom: 1vw;
  }

  .normas-iso h5 {
    font-size: 1vw;
    font-weight: 300;
  }

  .normas-iso .iq {
    height: 200px;
    -ms-flex-item-align: end;
        align-self: flex-end;
  }

  .normas-iso .iram {
    height: 300px;
  }

  @media screen and (max-width: 768px) {
      .normas-iso .iq {
          height: 100px;
      }
      .normas-iso .iram {
          height: 200px;
      }
      .normas-iso h4 {
          font-size: 2.5vw;
      }
      .normas-iso h5 {
          font-size: 1.5vw;
      }
  }

  .normas-iso .image-around {
    padding: 10px;
    background-color: white;
    margin-right: 2vw;
  }

/*novedades*/

.novedades {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-color: #EAEAEA;
    margin-bottom: 5%;

}

.modal-backdrop {
    z-index: -1;
  }
  
  .grid-container {
    width: 90%;
    background-color: #EAEAEA;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 0px 1fr 0px 1fr 0px 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 0px 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px 0px;
    padding: 2vw;
  }
  
  .grid-container > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  
  .grid-container > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  
  .grid-container > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  
  .grid-container > *:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
  }
  
  .grid-container > *:nth-child(5) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  
  .grid-container > *:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  
  .grid-container > *:nth-child(7) {
    -ms-grid-row: 3;
    -ms-grid-column: 5;
  }
  
  .grid-container > *:nth-child(8) {
    -ms-grid-row: 3;
    -ms-grid-column: 7;
  }
  
  .left { -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: 1 / 1 / 3 / 3; 
  background-image: url('src/assets/oficina.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-origin: initial;
  margin-right: 2vw;
  background-position: center;
  -webkit-box-shadow: 1vw 1vw 1vw rgba(0, 0, 0, 0.5);
          box-shadow: 1vw 1vw 1vw rgba(0, 0, 0, 0.5);
  
  }
  
  .right-one { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 3; -ms-grid-column-span: 2; grid-area: 1 / 3 / 2 / 5; 
  margin-bottom: 10px;
  -webkit-box-shadow: 1vw 1vw 1vw rgba(0, 0, 0, 0.5);
          box-shadow: 1vw 1vw 1vw rgba(0, 0, 0, 0.5);
  }
  
  .right-two {
    margin-top: 10px;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 2;
    grid-area: 2 / 3 / 3 / 5;
    -webkit-box-shadow: 1vw 1vw 1vw rgba(0, 0, 0, 0.5);
            box-shadow: 1vw 1vw 1vw rgba(0, 0, 0, 0.5);
  
  }
  
  .right-image-one { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; grid-area: 1 / 3 / 2 / 4; 
    margin-bottom: 10px;
  background-color: royalblue;
  background-image: url('src/assets/sosrosa.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-origin: initial;
  background-position: center;
  }
  
  .right-image-two { -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; grid-area: 2 / 3 / 3 / 4; 
    background-image: url('src/assets/covid.jpg');
    background-size: cover;
  background-repeat: no-repeat;
  background-origin: initial;
  background-position: center;
  margin-top: 10px;
  }
  
  .right-text-one {
    padding-left: 2vw;
    /*padding-right: 2vw;*/
    padding-top: 4vw;
    padding-bottom: 4vw;
    margin-bottom: 10px;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
    /*grid-area: 1 / 4 / 2 / 5;*/
    grid-area: 1 / 3 / 1 / 4;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
  
  .right-text-two {
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 4vw;
    padding-bottom: 4vw;
    margin-top: 10px;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
    grid-area: 2 / 4 / 3 / 5; }
  
  .left button {
    width: 100%;
    background-color: sienna;
  }
  
  @media screen and (max-width: 1400px) {
    .grid-container {
      height: -webkit-fit-content;
      height: -moz-fit-content;
      height: fit-content;
    }
  }
  @media screen and (max-width: 1000px) {
    .grid-container {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }
  }
  
  @media screen and (max-width: 768px) {
    .grid-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 0px 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
    .grid-container > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
  }
    .grid-container > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
  }
    .grid-container > *:nth-child(3) {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
  }
    .grid-container > *:nth-child(4) {
        -ms-grid-row: 3;
        -ms-grid-column: 3;
  }
    .grid-container > *:nth-child(5) {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
  }
    .grid-container > *:nth-child(6) {
        -ms-grid-row: 5;
        -ms-grid-column: 3;
  }
    .grid-container > *:nth-child(7) {
        -ms-grid-row: 7;
        -ms-grid-column: 1;
  }
    .grid-container > *:nth-child(8) {
        -ms-grid-row: 7;
        -ms-grid-column: 3;
  }
    .grid-container > *:nth-child(9) {
        -ms-grid-row: 9;
        -ms-grid-column: 1;
  }
    .grid-container > *:nth-child(10) {
        -ms-grid-row: 9;
        -ms-grid-column: 3;
  }
    .grid-container > *:nth-child(11) {
        -ms-grid-row: 11;
        -ms-grid-column: 1;
  }
    .grid-container > *:nth-child(12) {
        -ms-grid-row: 11;
        -ms-grid-column: 3;
  }
  
  .left { -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: 1 / 1 / 3 / 3;
  margin-right: 0px;
  margin-bottom: 20px;
  }
  
  .right-image-one { -ms-grid-row: 3; -ms-grid-row-span: 2; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: 3 / 1 / 5 / 2; }
  
  .right-text-one { -ms-grid-row: 3; -ms-grid-row-span: 2; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 3 / 2 / 5 / 3; }
  
  .right-one { -ms-grid-row: 3; -ms-grid-row-span: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: 3 / 1 / 5 / 3; }
  
  .right-two { -ms-grid-row: 5; -ms-grid-row-span: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: 5 / 1 / 7 / 3; }
  
  .right-image-two { -ms-grid-row: 5; -ms-grid-row-span: 2; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: 5 / 1 / 7 / 2; }
  
  .right-text-two { -ms-grid-row: 5; -ms-grid-row-span: 2; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 5 / 2 / 7 / 3; }
  
 }

 
.under-subtitle a {
    text-decoration: none;
    color: gray;
}

.modal-text  {
    font-weight: 300;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    font-size: 1.047vw;
    padding-left: 2vw;
    color: gray;
    line-height: 20px;
    padding-right: 4vw;
  }
  .modal-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: 0px;
  }

  .modal p {
    margin: 0 0 1rem;
  }

  .modal-body img {
    max-height: 59vw;
  }

  
  @media screen and (max-width: 768px) {
    .modal-dialog {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
    .modal-content {
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
    }
    .modal-text {
      line-height: 1.047vw;
      font-size: 10pt;
    }
  }

   @media screen and (max-width: 370px) {
    .modal-text {
      line-height: 10px;
      font-size: 3vw;

    }
    .modal p{
      margin: 0 0 5px;
    }
  }

  
  .modal-content {
    padding: 0vw;
    }
  


.customer-logos {
    background-color: white;
margin-top: 25px; 
}
  
  /* Slider */
  .slick-slide {
      margin: 0px 20px;
  }
  
  .slick-slide img {
      width: 100%;
  }
  
  .slick-slider
  {
      position: relative;
      display: block;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
  
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
  
      -webkit-touch-callout: none;
      -khtml-user-select: none;
      -ms-touch-action: pan-y;
          touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
  }
  
  .slick-list
  {
      position: relative;
      display: block;
      overflow: hidden;
  
      margin: 0;
      padding: 0;
  }
  .slick-list:focus
  {
      outline: none;
  }
  .slick-list.dragging
  {
      cursor: pointer;
      cursor: hand;
  }
  
  .slick-slider .slick-track,
  .slick-slider .slick-list
  {
      -webkit-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
  }
  
  .slick-track
  {
      position: relative;
      top: 0;
      left: 0;
  
      display: block;
  }
  .slick-track:before,
  .slick-track:after
  {
      display: table;
  
      content: '';
  }
  .slick-track:after
  {
      clear: both;
  }
  .slick-loading .slick-track
  {
      visibility: hidden;
  }
  
  .slick-slide
  {
      display: none;
      float: left;
  
      height: 100%;
      min-height: 1px;
  }
  [dir='rtl'] .slick-slide
  {
      float: right;
  }
  .slick-slide img
  {
      display: block;
  }
  .slick-slide.slick-loading img
  {
      display: none;
  }
  .slick-slide.dragging img
  {
      pointer-events: none;
  }
  .slick-initialized .slick-slide
  {
      display: block;
  }
  .slick-loading .slick-slide
  {
      visibility: hidden;
  }
  .slick-vertical .slick-slide
  {
      display: block;
  
      height: auto;
  
      border: 1px solid transparent;
  }
  .slick-arrow.slick-hidden {
      display: none;
  }
  

  h1 {
      margin: 0 0 1rem;
      font-size: 2.2vw;
  }
  
  p {
      margin: 0 0 2rem;
  }
  
  .slider {
      width: 40rem;
  }
  
  .slide {
      

          display: block;
          width: 100%;
          height: auto;
      
  }
  
  .slick-dots {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      
      margin: 0;
      padding: 1rem 0;
      
      list-style-type: none;
      
      
  }


/* contact section */

.contact {
 padding: 50px 22vw;

    background-color: #BB0222;
    position: relative;
}

.container {
padding-right: 120px;
padding-left: 120px;
text-align: left;
}

@media (min-width: 1200px) {
.container {
    max-width: 1400px;
}
}

@media (min-width: 1800px) {
    .big-box {
        padding-left: 200px;
    }
    .container {
        padding-right: 200px;
    }
}

.container h5 {
    font-size: 61px;
    font-weight: 600;
    padding-bottom: 125px;
}

.big-box {
    font-size: 26px;
    line-height: 45px;
}

.big-box p {
    margin: 0px;
}

.subtitle {
font-size: 28px;
}

.form-input {
    width: 100%;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom-width: 2px;
    height: 50px;
}

.form-text-area {
    width: 100%;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom-width: 2px;
    margin-bottom: 30px;
}


.form-label {
    padding-top: 32px;
    font-size: 26px;
    color: black;
    font-weight: 400;
}

.form-button {
    width: 96%;
    background-color: black;
    color: white;
    height: 80px;
    font-size: 27px;
    border: none;
    padding: 0px;
    margin-left: 15px;
}

/* .contact {
    margin-bottom: 142px;
    margin-top: 150px;
} */


/* map */

 .map {
    background-color: #EAEAEA;
    padding-bottom: 53px;
    max-width: 100%;
  }
  
  .map h1 {
display: -webkit-box;
display: -ms-flexbox;
display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  font-size: 2vw;
  font-weight: 300;
  padding-bottom: 4vw;
  padding-top: 4vw;
  }

  .map-two {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .map-left {
    width: 50%;
    padding-left: 8.33vw;
    padding-top: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

  .map-right {
    width: 50%;
    padding-right: 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

  .map-button {
    width: 100%;
    border-radius: 0%;
    background-color: transparent;
    font-size: 1.2vw;
    border: none;
    padding: none;
    height: 7vw;
    text-align: left;
    margin-bottom: 2vw;
    color: #4D4D4D;
  }

  .map-button:hover {
      background-color: rgba(237, 28, 36, 0.3);
  }


  .float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	-webkit-box-shadow: 2px 2px 3px #999;
	        box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}

  #map-content {
    width: 582px;
    height: 442px;
    max-width: 50vw;
    max-height: 442px;
  }

  @media screen and (max-width: 1560px) {
    #map-content {
      width: 400px;
      height: 442px;
    }
  }

  @media screen and (max-width: 1100px) {
    #map-content {
      width: 300px;
      height: 342px;
    }
  }

  @media screen and (max-width: 840px) {
    #map-content {
      width: 200px;
      height: 242px;
    }
  }

  @media screen and (max-width: 605px) {
    .map-two {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
    .map-left {
      width: 100%;
      text-align: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      padding: 0px;
    }
    .map-button {
      text-align: center;
      font-size: 2.4vw;
      height: 70px;
    }
    #map-content {
      width: 50vw;
      margin-top: 2vw;
    }
    .contact {
        padding: 5vw;
           background-color: #BB0222;
           position: relative;
       }
    .contact-column-text img{
        width: 6vw;
        height: 6vw;

    }
    .contact-column-text{
        padding-left: 5vw;
        display: inline-block;
    }
  }


/* footer */

.page-footer {
    background-color: #BB0222;
    padding-top: 2rem;
    padding-bottom: 1rem;
    font-size: 13pt;
    color: white;
}

.text-uppercase-one {
    text-align: right;
}

.text-uppercase-two {
    text-align: left;
}

.links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
}

.links a {
    padding-right: 30px;
    padding-left: 30px;
    color: white;
    text-decoration: none;
}

.links button:hover {
    color: #13ADC6;
    text-decoration: none; 
}

.links a:hover {
    color: #13ADC6;
    text-decoration: none;
}

.links button {
    padding-right: 30px;
    padding-left: 30px;
    color: white;
    text-decoration: none;
    background-color: transparent;
    font-size: 13pt;
}

.rights {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    text-align: center;
    padding-top: 5vw;
}

.rights span {
    padding-right: 20px;
}

@media screen and (max-width: 768px) {
    .page-footer {
        padding-top: 2rem;
        padding-bottom: 1rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

    }

    .page-footer {
        font-size: 3vw;
    }

    .links button {
        font-size: 3vw;
    }
    .links{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .rights{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
}


/*contacto*/

  .contacto {
      position: relative;
    padding-top: 7.2vw;
    padding-bottom: 14.2vw;
  }

  .contacto h1 {
    font-size: 2.583vw;
    font-weight: 300;
    padding-bottom: 10.667vw;
  }

  .contacto h4 {
    text-align: center;
    margin-top: 2vw;
    font-size: 1.3vw;
  }
  .contacto h5 {
    text-align: center;
    margin-top: 2vw;
    font-weight: 400;
    color: #BB0222;
    font-size: 1vw;
    margin-top: 1vw;
    padding-right: 5vw;
    padding-left: 5vw;
  }

  .contacto  ul {
    margin-top: 5vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.contacto ul li {
  list-style: none;
}

.contacto ul li a {
  width: 6vw;
  height: 6vw;
  background-color: #fff;
  text-align: center;
  line-height: 6vw;
  font-size: 2.625vw;
  margin: 0 8vw;
  display: block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-shadow: 0.8vw 0.8vw 0.8vw 0px rgba(0,0,0,0.3);
box-shadow: 0.8vw 0.8vw 0.8vw 0px rgba(0,0,0,0.3);
}


.contacto ul li a .icon {
  position: relative;
  color: #262626;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  z-index: 3;
  width: 4vw;
}

.contacto ul li a:hover .icon {
  color: #fff;
  -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg);
}

.contacto ul li a:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f00;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  z-index: 2;
}

.contacto ul li a:hover:before {
  top: 0;
}

.contacto ul li:nth-child(1) a:before{
  background: rgb(255, 171, 45);
}

.contacto ul li:nth-child(2) a:before{
  background: rgb(255, 123, 0, 0.79);
}

.contacto ul li:nth-child(3) a:before {
  background: #0077b5;
}

@media screen and (max-width: 768px) {
    .contacto ul li a {
        width: 12vw;
        height: 12vw;
    }
    .contacto h1 {
        font-size: 5vw;
    }
    .contacto h4 {
        font-size: 2.6vw;
    }
    .contacto h5 {
        font-size: 2vw;
    }
    .contacto {
        padding-bottom: 30vw;
    }
    .contacto ul li a .icon {
        width: 8vw;
    }
    .icon-text {
        font-size: 2vw;
        padding: 0.8vw;
      }
}

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}


@media (max-width: 768px) {
    .slick-track {
        transform: translate3d(-2365px, 0px, 0px);
    }
}

@media (max-width: 400px) {
    #modalSOS .modal-content {
        width: 90vw;
    }

    #myModal .modal-menu button {
        font-size: 10px;
    }
    #myModal {
        margin: 5%;
        font-size: 10px;
    }

}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.hidden {
    display: none;
}
.button-active{
    color: grey;
}

.modal-preview-tittle{
    font-weight: 600; 
    font-size: 16pt; 
    color: #333333;
    line-height: 30pt;
}

.modal-preview-subtittle{
    font-weight: 600; 
    font-size: 13pt; 
    color: #4D4D4D;
    margin-top: 5px;
    margin-bottom: 15px;
}

.modal-preview-text{
    font-size: 12pt; line-height: 21pt; 
      font-weight: 450;
      color: #4D4D4D;
}

.modal-preview-button{
    font-size: 12pt; font-weight: 600; color: #FF1D25;
    margin-top: 5px; line-height: 21pt;
    /*background-color: rgba(222, 222, 222);*/
}

.modal-datos-utiles-tittle{
    font-size: 1.6vw; 
    font-weight: 600; 
    color: #DE001A;
}

.modal-datos-utiles ul>li {
    list-style-type: none;
}

@media only screen and (max-width: 900px){
    .modal-preview-tittle{
        font-size:13pt;
    }
    .modal-preview-subtittle{
        font-size: 13pt; 
        font-weight: normal;

    }
    .modal-preview-text{
        display:none;
    }
    .modal-preview-button{
        font-size: 9pt;
    }
}

.img-rounded {
    border-radius: 1vw;
}

.side-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 3vw;
    padding-bottom: 3vw;
    line-height: 2.3vw;
    font-size: 1.1vw;
    padding-left: 2vw;
    color: #4D4D4D;
    padding-right: 2vw;
  }
  
@media only screen and (max-width: 900px){

    .contact-header h1 {
        font-size: 5vw;
        text-align: center;
    }
    .contact-header h2 {
        font-size: 2vw;
        text-align: center;
    }
    .services-title h1{
        padding: 2vw;

        font-size: 4vw;
    }

}
.center-text{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;
}


#services-grid-mobile{
    display: none;
}

#company-grid-mobile{
    display: none;
}
#novedades-mobile{
    display: none;
}

.video-pericos {
    display: flex;
    /*align-items: flex-end;*/
    flex-direction: column;
    /*align-content: flex-end;*/
    justify-content: flex-end;
    text-align: center;
    width: 100%;
    min-height: 600px;
    background-image: url('src/assets/pericos.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-bottom: 50px;
}

.video-pericos-title {
    color: white;
    text-shadow: 0px 2px 2px rgba(150, 150, 150, 1);
}

.video-pericos-subtitle {
    color: #FF1D25;
}

.qr-asistencia {
    max-width: 200px;
    margin-top: 50px;
}


@media only screen and (max-width: 996px){
    .qr-asistencia {
        display: none;
    }

    #services-grid-mobile{
        display: flex;
        flex-direction: column;
    }
    #services-grid-desktop{
        display: none;
    }
    #company-grid-mobile{
        display: -ms-grid;
        display: grid;
    }
    #company-grid-desktop{
        display: none;
    }
    #novedades-mobile{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        margin-left: 0px;
    }
    #novedades-desktop{
        display: none;
    }
}
#text-la-empresa{
    text-align: justify;
}


@media only screen and (max-width: 996px){
    .normas-iso{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .iso-text {
        padding-right: 5vw;
        padding-left: 5vw;
        text-align: justify;
        
    }
    .iso-text h4{
        padding-right: 5vw;
        padding-left: 5vw;
        font-size: 15pt;
    }
    .iso-text h5{
        padding-right: 5vw;
        padding-left: 5vw;
        font-size: 10pt;
        /* text-align: justify; */
        padding: 3vw;
    }
    .image-around{
        float: left;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        border-radius: 10px;
    }
    .images-certificados{
        margin-top: 5vh;
        margin-bottom: 5vh;
    }

    .left{
        grid-area: unset;
        background-image: none;
        background-size: 75% 50%;
        background-position: top;
        height: inherit;
        width: inherit;
        -webkit-box-shadow: none;
                box-shadow: none;
        background-color: #dedede;
        padding-bottom: 30px;
    }

    .modal-preview-tittle{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align: left;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        font-size: 12pt;
        padding-left: 5%;
        padding-right: 5%;
    
    }

    .modal-preview-subtittle{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align: left;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        font-size: 10pt;
        padding-left: 5%;
        padding-right: 5%;
        /* padding-bottom: 5%; */
    }

    .modal-preview-mobile-text{
        text-align: left;
        font-size: 8pt;
        padding-left: 5%;
        padding-right: 5%;
    }
    .modal-mobile{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; 
        -webkit-box-orient: vertical; 
        -webkit-box-direction: normal; 
            -ms-flex-direction: column; 
                flex-direction: column; 
        -webkit-box-pack: end; 
            -ms-flex-pack: end; 
                justify-content: flex-end;
        text-align: center; 
        -webkit-box-align: center; 
            -ms-flex-align: center; 
                align-items: center;
        padding-bottom: 1vw;
        margin-bottom: 5vw;
        width: 100%;
    }
    .modal-mobile img{
        height: 50%;
        /* max-width: 5%; */
        width:100%;
        margin-bottom: 5%;
        margin-top: 0;
        object-fit: cover;
    }
    .logos-title{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; 
        -webkit-box-orient: vertical; 
        -webkit-box-direction: normal; 
            -ms-flex-direction: column; 
                flex-direction: column; 
        -webkit-box-pack: end; 
            -ms-flex-pack: end; 
                justify-content: flex-end;
        text-align: center; 
        -webkit-box-align: center; 
            -ms-flex-align: center; 
                align-items: center;
    }
    .modal-preview-link{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align: left;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        font-size: 10pt;
        padding-left: 5%;
        padding-right: 5%;
        color: #DE001A;

    }


}

header nav {
    background-color: rgba(0, 0, 0, 0.75);
}


.navbar-material .nav-wrapper .brand-logo img {
    height: 64px;
  }
  .navbar-material .nav-wrapper .button-collapse i {
    color: #333333;
  }
  @media (max-width: 600px) {
    .navbar-material .nav-wrapper .brand-logo img {
      height: 56px;
      /* padding: 50% !important; */
    }
  }

.sidenav{
    background-color: rgba(180, 0, 0);
}

.sidenav li > a {
    color: white;
}

header li{
    list-style-type: none;
}

html,body{
    overflow-x: hidden;
}



@media (max-width: 380px) {


.modal-menu > button:nth-child(1) {
    font-size: 10px;
  }
  
  
  .modal-menu > button:nth-child(2) {
    font-size: 10px;
  }
  

  .modal-menu > button:nth-child(3) {
    font-size: 10px;
  }
    
  .modal-menu button {
    padding: 5px;
  }
  
    .modal-text ul {
      text-align: left;
        line-height: 15px !important;
        font-size: 9px;
    }
    .modal-text {
      padding-top: 0px !important;
      line-height: 12px !important;
    }
    #datosUtilesVehiculos {
       font-size: 10px;
    }
  
  
  #myModal {
    margin-left: 3;
    margin-right: 10px;
    margin-left: 10px;
  }
  
  .modal-content .close {
    margin: 10px 10px 0px 0px;
  }
  
  .modal-menu {
    padding-top: 0px;
  }
  
    .modal-text {
      font-size: 10px;
    }
  
  
  .modal-text {
    padding-left: 1vw;
  }
  
  .modal-text {
     padding-bottom: 5px;
  }
  
  
  #datosUtilesVehiculos > h1:nth-child(1) {
    font-size: 12px;
  }
  
  
  #datosUtilesVehiculos > h3:nth-child(2) {
    font-size: 10px;
  }
  
  
  #datosUtilesVehiculos > ol:nth-child(4) > li:nth-child(1) {
    font-size: 10px;
  }
  
  
  #datosUtilesVehiculos > ol:nth-child(4) > ul:nth-child(2) {
    font-size: 10px;
  }
  
  
  #datosUtilesVehiculos > ol:nth-child(4) > li:nth-child(4) {
    font-size: 10px;
  }
  
  
  #datosUtilesVehiculos > ol:nth-child(4) > li:nth-child(6) {
    font-size: 10px;
  }
  
  
  #datosUtilesVehiculos > ol:nth-child(4) > li:nth-child(8) {
    font-size: 10px;
  }
  
  
  #datosUtilesVehiculos > ol:nth-child(4) > ul:nth-child(9) {
    font-size: 10px;
  }
  
  
  .modal-dialog-scrollable > div:nth-child(1) {
    width: 90vw;
  }
  
  
  .modal-dialog {
    margin: 10px;
  }
  
  
  #datosUtilesVehiculos {
    font-size: 10px;
  }

  #datosUtilesHogar {
      line-height: 15px;
  }

  #datosUtilesHogar h1, #datosUtilesHogar h3, #datosUtilesHogar ol li {
      font-size: 10px;
  }
  
  #datosUtilesNautica h1, #datosUtilesHogar h3, #datosUtilesHogar ol li {
    font-size: 10px;
}


}
.buttons-links{
    justify-content: center;
    display: flex; 
    width: 100%;
    align-items: center;
    margin-bottom: 70px;
}