:root { /*CUSTOM PROPERTIES*/
    --white: #ffffff;
    --gray0: #eaedec;
    --gray1: #c6c5c5;
    --gray2: #aaa6a6;
    --gray3: #30342f; 
    --gray44:#556A73;
    --red44: #A6173D;
    --text1: #989392;
    --white2: #f6f6f6;
    --back1: #e2e3e4;
    --navb: #363a3af5; 

}



html{
    font-size: 62.5%;
    background-color: var(--white2);
    box-sizing: border-box;
    scroll-snap-type: y mandatory;
}

.products, .navmaster{
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.form{
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

*, *:before, *:after {
    box-sizing: inherit;
}


body{
    font-size: 16px; /* 1rem = 10px*/
    font-family:'Source Sans Pro', sans-serif;
    background-image: linear-gradient(to top, #e2e3e4 0%, var(--white2) 50%);
    text-align: center;
}
h1.title{
    text-align: center;
    font-size: 1rem;
    color: var(--gray0);
    background-color: var(--navb);
    margin: 0 auto;
}
h2.slogan{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 2.2rem;
    color:  rgba(214, 9, 9, 0.6);
    font-weight: 700;
}

h2.slogan span{
    font-family: 'Roboto', sans-serif;
    font-size: 2.2rem;
    color:  rgba(183, 182, 182, 0.6);
    font-weight: 700;
}


.container{
    max-width: 120rem;
   /** margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;**/
    margin: 0 auto;
}
.nav-bg{
    background-color: var(--navb);
}
.navmaster{
    display: flex;
    flex-direction: column;
}

@media (min-width: 480px) {/*MQ CELLPHONE*/
    .navmaster{
        flex-direction: row;
        justify-content: center;
        font-size: .5rem;
    }
}

.navmaster a{
    display: block;
    text-align: center;
    color: var(--gray1);
    font-size: 1.75rem;
    text-decoration: none;
    padding: 1rem;
}
.navmaster a:hover{
    background-color: var(--red44);
}

.img1{
    background-image: url(../img/PORT2.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 50rem;
    position: relative;
}
@media (min-width: 480px) {/*MQ CELLPHONE*/
    .img1{
        height: 40rem;
    }
}

@media (min-width: 1048px) {/*MQ CELLPHONE*/
    .img1{
        height: 45rem;
    }
}

@media (min-width: 1300px) {/*MQ CELLPHONE*/
    .img1{
        height: 55rem;
    }
}

.contenent-img1{
    position: absolute;
    background-color: rgba(37, 38, 38, 0.3);
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contenent-img1 a{
    color: var(--white);
    font-size: 1.9rem;
    text-decoration: none;
    padding: .5rem;
}
.contenent-img1 a:hover{
    background-color: var(--red44);
}

.sombra{
    -webkit-box-shadow: 0px 9px 11px -1px rgba(112,112,112,0.6);
    -moz-box-shadow: 0px 9px 11px -1px rgba(112,112,112,0.6);
    box-shadow: 0px 9px 11px -1px rgba(112,112,112,0.6);
    background-color: var(--white);
}

.main h3 {
    color: var(--gray3);
    font-weight: 700;
    font-size: 2.4rem;
    text-align: left;
    margin-left: 7rem;
    margin-right: 7rem;
    padding-top: 4rem;
}

.main h4{
    color: #ba1212;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    font-size: 2.4rem;
}

.main h5{
    color: var(--gray3);
    font-weight: 500;
    font-size: 1.6rem;
    text-align: left;
    margin-left: 7rem;
    margin-right: 7rem;
    padding-bottom: 3rem;
}



@media (min-width: 768px) {
    .products{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 6rem;
        row-gap: 6rem;
        margin-left: 7rem;
        margin-right: 7rem;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .products p{
        padding-left: 5rem;
        padding-right: 4rem;
        text-align: center;
        font-size: 5rem;
    }
}

@media (max-width: 768px) {
    .products img{
        height: 55%;
        width: 55%;
    }
}

    
.products p{
    font-size: 1.45rem;
    color: var(--gray3);
    font-weight: 600;
    text-align: left;
}

.form{
    padding-top: 7rem;
    padding-bottom: 8rem;

}

.form h2{
    color: var(--gray3);
    font-weight: 600;
    font-size: 1.8rem;
}

.form p{
    color: var(--gray3);
    /*font-weight: 700;*/
    font-size: 1.4rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.form iframe{          /*ESTILOS DE MAPA*/
    margin-top: 3rem;
}

@media (max-width: 768px) {
    .form iframe{
        height: 90%;
        width: 90%;
    }
}

.btn-whatsapp {
    display:block;
    width:70px;
    height:70px;
    color: #fff;
    position: fixed;
    right:20px;
    bottom:20px;
    border-radius:50%;
    line-height:80px;
    text-align:center;
    z-index:999;
}


.copy p{
        color: var(--white);
    }

.logo{
    padding: 2rem;
}

@media (min-width: 1000px) {/*FALTA PA HACER GRANDE EL LOGO!!!*/
    .logo{
        width: 500;
    }
}