@font-face {
font-family: 'GalanoGrotesqueAltBold';
src: url(GalanoGrotesqueAltBold.otf);
}

@font-face {
font-family: 'pantonblack';
src: url(pantonblack.otf);
}

@font-face {
font-family: 'pantonlight';
src: url(pantonlight.otf);
}

@font-face {
font-family: 'PantonRegular';
src: url(Panton-Regular.otf);
}

@font-face {
font-family: 'PantonExtraBold';
src: url(Panton-ExtraBold.otf);
}

#portada-j {
background-size: 100%;
background-repeat: no-repeat;

width: 1500px;
height: 400px; 
overflow: hidden;
position: relative;
top: 89px;
margin: 0 auto;
padding: 0;
}

#portada-j h2 {
width: 40%;
position: relative;
float: right;
text-align: right;
color: white;
top: 150px;
font-size: 45px;
font-family: 'pantonblack';
right: 50px;
}


#portada-l {
background-size: 100%;
background-repeat: no-repeat;
width: 1500px;
height: 570px; 
overflow: hidden;
position: relative;
top: 89px;
margin: 0 auto;
padding: 0;
}

.textito {
width: 1500px;
height: 100px;
overflow: hidden;
}

.textito p {
width: 95%;
margin: 0 auto;
text-align: center;
font-size: 18px;
font-family: 'PantonRegular';
font-weight: 500;
}

#rosa-cont {
width: 100%;
height: 500px;
padding: 0;
background-image: url(../assets/img-more/color-rosa.jpg);
}

#rosa-cont .cont-rosita {
width: 1500px;
height: 100%;
position: relative;
margin: 0 auto;
}

#rosa-cont .cont-rosita .text-rosa {
width: 60%;
position: relative;
float: left;
height: 100%;
}

#rosa-cont .cont-rosita .text-rosa p {
font-family: 'PantonRegular';
width: 95%;
margin: 0 auto;
margin-top: 45px;
color: white;
font-size: 15px;
text-shadow: 1px 2px 3px rgba(25,25,25,0.7);
}

#rosa-cont .cont-rosita .text-rosa h2 {
width: 95%;
text-align: left;
color: yellow;
font-family: 'PantonExtraBold';

top: 15px;
position: relative;
text-shadow: 1px 2px 3px rgba(25,25,25,0.7);
}

#rosa-cont .cont-rosita .img-rosa {
width: 40%;
height: 100%;
position: relative;
float: left;
text-align: right;
}


#rosa-cont .cont-rosita .img-rosa img {
width: 90%;
position: relative;
top: 50px;
}


#quienes {
width: 1500px;
height: auto;
overflow: hidden;
margin: 0 auto;
}

#quienes h2 {
position: relative;
font-size: 25px;
width: 90%;
text-align: center;
}

#quienes p {
text-align: center;
width: 90%;
padding: 25px 0;
margin: 0 auto;
position: relative;
top: 0px;
}

#quienes h3 {
position: relative;
font-size: 20px;
width: 90%;
text-align: center;
}

#contact-nos {
width: 100%;
height: 390px;
background: #eaeaea;
overflow: hidden;
}

#contact-nos .atenderemos {
width: 1500px;
height: 100%;
position: relative;
text-align: center;
top: -70px;
}

#contact-nos .atenderemos #carita {
position: relative;
margin-top: 40px;
}

#contact-nos .atenderemos h5 {
position: relative;
width: 400px;
font-size: 20px;
margin-top: 40px;
}

#contact-nos .atenderemos #nete {
width: 90%;
position: relative;
top: 40px;
margin: 0 auto;
}

#contact-nos .atenderemos #elcorreo {
position: relative;
width: 400px;
margin-top: 70px
}

#contact-nos .atenderemos #elcorreo p {
color: #828080;
}

/***************** quienes somos *****************/

#eq-prov {
width: 1500px;
height: 400px;
overflow: hidden;
text-align: center;
margin: 0 auto;
}

#eq-prov h2 {
color: #595959;
font-size: 25px;
font-family: pantonblack;
font-weight: 100;
}

#eq-prov p {
width: 70%;
margin: 0 auto;
}

#prod-prov {
width: 100%;
height: 200px;
background: #eaeaea;
padding: 0
}

#prod-prov .container-nex {
width: 1500px;

text-align: center;
margin: 0 auto;
}

#prod-prov .container-nex #petit {
display: flex;
width: 350px;
top: 55px;
position: relative;
margin: 0 auto;
}

#prod-prov .container-nex img {
margin: 0;
filter: saturate(100%);
}

#prod-prov .container-nex .fech-num {
margin: 0;

}

#prod-prov .container-nex .fech-num h2 {
color: #757575;
font-family: pantonblack;
}

#prod-prov .container-nex .fech-num p {
width: 200px;
color: #757575;
font-family: pantonlight;
}

#sin-na {
width: 100%;
height: 200px;
}

/* ++++++++++++++++++++++++++++++

           media Queries

+++++++++++++++++++++++++++++++ */


@media screen and (max-width: 1500px) {
    
#portada-j {
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 320px;
overflow: hidden;
}
    
#portada-l {
width: 100%;
}
    
.textito {
width: 100%;

}
    
#rosa-cont .cont-rosita {
width: 100%;
}
    
#quienes {
width: 100%;
overflow: hidden;
}

#contact-nos .atenderemos {
width: 100%;

}
    
#eq-prov {
width: 100%;
}

#prod-prov .container-nex {
width: 100%;
}

}

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

#portada-l {
background-size: 120%;
background-repeat: no-repeat;
height: 570px; 
overflow: hidden;
position: relative;
top: 89px;
margin: 0 auto;
padding: 0;
}

#portada-j h2 {
width: 40%;
position: relative;
float: right;
text-align: right;
color: white;
top: 110px;
font-size: 45px;
font-family: 'pantonblack';
right: 50px;
}

}

@media screen and (max-width: 1080px) {
    
#portada-l {
background-size: 110%;
background-repeat: no-repeat;
height: 490px; 
overflow: hidden;
position: relative;
top: 89px;
margin: 0 auto;
padding: 0;
}

#portada-j {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 300px; 
overflow: hidden;
position: relative;
top: 89px;
margin: 0 auto;
padding: 0;
}
    
#portada-j h2 {
width: 40%;
position: relative;
float: right;
text-align: right;
color: white;
top: 150px;
font-size: 35px;
font-family: 'pantonblack';
right: 50px;
}
    
#rosa-cont .cont-rosita .text-rosa p {
width: 95%;
margin: 0 auto;
margin-top: 45px;
font-size: 14px;
}
    
#rosa-cont .cont-rosita .text-rosa h2 {
width: 95%;
text-align: left;
top: 13px;
position: relative;
font-size: 27px;
}
    
}


@media screen and (max-width: 720px) {
    
#portada-l {
background-size: 140%;
background-repeat: no-repeat;
height: 410px; 
overflow: hidden;
position: relative;
top: 89px;
margin: 0 auto;
padding: 0;
}
    
#portada-j h2 {
width: 60%;
position: relative;
float: none;
text-align: center;
color: white;
top: 110px;
font-size: 30px;
font-family: 'pantonblack';
right: 0px;
}
    
 
    
.textito p {
width: 95%;
font-size: 14px;
top: 0px;
position: relative;
font-weight: 500;
}
    
#rosa-cont .cont-rosita .text-rosa p {
width: 95%;
margin: 0 auto;
margin-top: 45px;
font-size: 12px;
}
    
#rosa-cont .cont-rosita .text-rosa h2 {
width: 95%;
text-align: left;
top: 13px;
position: relative;
font-size: 20px;
}
    
#contact-nos {
width: 100%;
height: 390px;
background: #eaeaea;
overflow: hidden;
}

#contact-nos .atenderemos {
height: 100%;
position: relative;
text-align: center;
top: -70px;
}

#contact-nos .atenderemos #carita {
position: relative;
margin-top: 40px;
}

#contact-nos .atenderemos h5 {
position: relative;
width: 100%;
font-size: 20px;
margin-top: 40px;
}

#contact-nos .atenderemos #nete {
width: 90%;
position: relative;
top: 40px;
margin: 0 auto;
}

#contact-nos .atenderemos #elcorreo {
position: relative;
width: 100%;
margin-top: 70px
}

#contact-nos .atenderemos #elcorreo p {
color: #828080;
}

}

@media screen and (max-width: 420px) {
    
#portada-l {
background-size: 200%;
background-repeat: no-repeat;
height: 350px; 
overflow: hidden;
position: relative;
top: 89px;
margin: 0 auto;
padding: 0;
}
    
.textito p {
width: 95%;
font-size: 12px;
top: 0px;
position: relative;
font-weight: 500;
}
    
#rosa-cont {
width: 100%;
height: 700px;
padding: 0;
position: relative;
top: 20px;
background-image: url(../assets/img-more/color-rosa.jpg);
background-size: cover
}    
 
#rosa-cont .cont-rosita .text-rosa {
width: 100%;
position: relative;
float: left;
height: 60%;
}

#rosa-cont .cont-rosita .text-rosa p {
width: 90%;
margin: 0 auto;
margin-top: 45px;
font-size: 12px;
text-align: justify
}
    
#rosa-cont .cont-rosita .text-rosa h2 {
width: 95%;
text-align: left;
top: 13px;
position: relative;
font-size: 20px;
}
    
#rosa-cont .cont-rosita .img-rosa {
width: 100%;
height: 50%;
position: relative;
float: left;
text-align: center;
}

#rosa-cont .cont-rosita .img-rosa img {
width: 60%;
position: relative;
top: 50px;
}    
    
#contact-nos {
width: 100%;
height: 300px;
background: #eaeaea;
overflow: hidden;
}

#contact-nos .atenderemos #carita {
margin-top: 30px;
width: 30px;
}

#contact-nos .atenderemos h5 {
position: relative;
width: 100%;
font-size: 19px;
margin-top: 40px;
}

}