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

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

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

#fast-f {
padding: 0;
margin-top: 89px !important;
width: 1500px;
height: 250px;
margin: 0 auto;
}

#fast-f .logo-f {
width: 25%;
position: relative;
float: left;
}

#fast-f .text-f {
width: 75%;
position:  relative;
float: right;
}

#fast-f .text-f p {
color: #707070;
}

#library-f {
width: 100%;
height: 350px;
padding: 0;

}

#library-f .line-grey {
width: 100%;
height: 72%;
top: 36px;
position: relative;
background: #eaeaea; 
}

#library-f .line-grey .cont-fashion {
width: 1500px;
height: auto;
margin: 0 auto;
}

#library-f .line-grey .cont-fashion .log-lib {
width: 25%;
height: auto;
position:  relative;
float: left;
text-align: center;
}

#library-f .line-grey .cont-fashion .log-lib img {
position: relative;
top: 22px;
width: 80%;
}

#library-f .line-grey .cont-fashion .litle-text {
width: 25%;
height: 100%;
position: relative;
float: left
}

#library-f .line-grey .cont-fashion .litle-text p {
width: 90%;
text-align: justify;
position: relative;
top: 22px;
color: #707070;
}

#library-f .line-grey .cont-fashion .list-img {
position: relative;
float: right;
width: 50%;
display: flex;
}

#library-f .line-grey .cont-fashion .list-img #girl-h {
width: 190px;
top: -56px;
position: relative;
}

#library-f .line-grey .cont-fashion .list-img #girl-2 {
width: 240px;
margin-left: 20px;
position: relative;
top: -62px;
left: 20px
}

#library-f .line-grey .cont-fashion .list-img #girito {
width: 240px;
position: relative;
float: right;
top: -65px;
right: 20px;
}

#library-nf {
width: 1500px;
padding: 0;
height: 400px;
margin: 0 auto;
}

#library-nf .log-nt {
width: 25%;
top: 25px;
position:  relative;
float: left;
text-align: center;
}

#library-nf .log-nt img {
position: relative;
top: 0px;
}

#library-nf .litle-text {
width: 25%;
height: 100%;
position: relative;
float: left;
top: 5px
}

#library-nf .litle-text p {
width: 90%;
text-align: justify;
position: relative;
top: 50px;
color: #707070;
}

#library-nf .girl-all {
position: relative;
float: right;
width: 50%;
}

#library-nf .girl-all #girito-2 {
width: 20%;
position: absolute;
top: 80px;
left: -10px;
z-index: 10;
}

#library-nf .girl-all #chapar {
width: 90%;
float: right;
top: -40px;
position: relative;
}


/********************* media queries **********************/

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

#fast-f {
width: 100%;
}
    
#fast-f .logo-f img  {
width: 90%;
}
    
#library-f .line-grey .cont-fashion {
width: 100%;
}
    
#library-f .line-grey .cont-fashion .log-lib img {
position: relative;
top: 22px;
width: 60%
}
    
#library-f .line-grey .cont-fashion .list-img #girl-h {
width: 29%;
top: -56px;
position: relative;
}

#library-f .line-grey .cont-fashion .list-img #girl-2 {
width: 36%;
margin-left: 20px;
position: relative;
top: -62px;
left: 20px
}

#library-f .line-grey .cont-fashion .list-img #girito {
width: 34%;
position: relative;
float: right;
top: -65px;
right: 20px;
}
    

#library-nf {
width: 100%;
padding: 0;

}
    
#library-nf .log-nt img {
width: 70%;
position: relative;
}
    

}

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

#portada-f {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 300px; 
overflow: hidden;
position: relative;
top: 89px;
margin: 0 auto;
padding: 0;
}

#fast-f {
padding: 0;
margin-top: 129px !important;
height: 250px;
margin: 0 auto;
}
    
#fast-f .text-f p {
font-size: 13px;
}
    
#library-f {
height: 300px;
}

#library-f .line-grey .cont-fashion .litle-text p {
top: 16px;
font-size: 13px
}

#library-f .line-grey .cont-fashion .list-img #girl-h {

top: -76px;
position: relative;
}

#library-f .line-grey .cont-fashion .list-img #girl-2 {

margin-left: 10px;
position: relative;
top: -72px;
left: 10px
}

#library-f .line-grey .cont-fashion .list-img #girito {

position: relative;
float: right;
top: -72px;
right: 20px;
}
    
#library-nf .log-nt {
width: 25%;
top: 55px;
position:  relative;

}

#library-nf .girl-all {
position: relative;
float: right;
width: 50%;
top: -20px;
}

#library-nf .girl-all #girito-2 {
width: 20%;
position: absolute;
top: 50px;
left: -10px;
z-index: 10;
}

#library-nf .girl-all #chapar {
width: 90%;
float: right;
top: -40px;
position: relative;
}
    
}

@media screen and (max-width: 720px) {
 #fast-f {
padding: 0;
height: 500px;
margin: 0 auto;
}

#fast-f .logo-f {
width: 90%;
height: 50%;
position: relative;
float: none;
margin: 0 auto;
text-align: center;
}

#fast-f .logo-f img {
width: 60%
}

#fast-f .text-f {
width: 90%;
position:  relative;
float: none;
margin: 0 auto;
text-align: justify;
}

#fast-f .text-f p {
color: #707070;
}

#library-f {
width: 100%;
height: 900px;
padding: 0;

}

#library-f .line-grey {
width: 100%;
height: 100%;
top: 0px;
position: relative;
background: #eaeaea; 
}

#library-f .line-grey .cont-fashion {
height: auto;
margin: 0 auto;
}

#library-f .line-grey .cont-fashion .log-lib {
width: 90%;
height: 400px;;
position:  relative;
float: none;
text-align: center;
}

#library-f .line-grey .cont-fashion .log-lib img {
position: relative;
top: 22px;
width: 50%;
}

#library-f .line-grey .cont-fashion .litle-text {
width: 90%;
height: 150px !important;
height: 100%;
position: relative;
float: none;

}

#library-f .line-grey .cont-fashion .litle-text p {
width: 90%;
text-align: justify;
position: relative;
top: 22px;
color: #707070;
margin: 0 auto;
}

#library-f .line-grey .cont-fashion .list-img {
position: relative;
float: right;
width: 100%;
display: flex;
}

#library-f .line-grey .cont-fashion .list-img #girl-h {
width: 25%;
top: 0px;
position: relative;
left: 20px;
}

#library-f .line-grey .cont-fashion .list-img #girl-2 {

margin-left: 20px;
position: relative;
top: 0px;
left: 30px
}

#library-f .line-grey .cont-fashion .list-img #girito {

position: relative;
float: right;
top: 0px;
right: 0px;
}

#library-nf {
padding: 0;
height: 700px;
}

#library-nf .log-nt {
width: 90%;
height: 350px;
top: 25px;
position:  relative;
float: none;
text-align: center;
}

#library-nf .log-nt img {
position: relative;
top: 0px;
width: 60%;
}

#library-nf .litle-text {
width: 90%;
height: 200px;
position: relative;
float: none;
top: 5px
}

#library-nf .litle-text p {
width: 90%;
text-align: justify;
position: relative;
top: 50px;
margin: 0 auto;
}

#library-nf .girl-all {
position: relative;
float: right;
width: 100%;
}

#library-nf .girl-all #girito-2 {
width: 20%;
position: absolute;
top: 80px;
left: -10px;
z-index: 10;
}

#library-nf .girl-all #chapar {
width: 90%;
float: right;
top: -40px;
position: relative;
}
   
}

@media screen and (max-width: 420px) {
 #fast-f {
padding: 0;
height: 450px;
margin: 0 auto;
}

#fast-f .logo-f {
width: 100%;
height: 45%;
position: relative;
float: none;
margin: 0 auto;
text-align: center;
}

#fast-f .logo-f img {
width: 90%
}

#fast-f .text-f {
width: 90%;
position:  relative;
float: none;
margin: 0 auto;
text-align: justify;
}

#fast-f .text-f p {
color: #707070;
}

#library-f {
width: 100%;
height: 700px;
padding: 0;

}

#library-f .line-grey {
width: 100%;
height: 100%;
top: 0px;
position: relative;
background: #eaeaea; 
}

#library-f .line-grey .cont-fashion {
height: auto;
margin: 0 auto;
}

#library-f .line-grey .cont-fashion .log-lib {
width: 100%;
height: 300px;;
position:  relative;
float: none;
text-align: center;
}

#library-f .line-grey .cont-fashion .log-lib img {
position: relative;
top: 22px;
width: 80%;
}

#library-f .line-grey .cont-fashion .litle-text {
width: 100%;
height: 90px !important;
position: relative;
float: none;

}

#library-f .line-grey .cont-fashion .litle-text p {
width: 90%;
text-align: justify;
position: relative;
top: 22px;
color: #707070;
margin: 0 auto;
}

#library-f .line-grey .cont-fashion .list-img {
position: relative;
float: right;
width: 100%;
display: flex;
}

#library-f .line-grey .cont-fashion .list-img #girl-h {
width: 25%;
top: 0px;
position: relative;
left: 20px;
}

#library-f .line-grey .cont-fashion .list-img #girl-2 {

margin-left: 20px;
position: relative;
top: 0px;
left: 30px
}

#library-f .line-grey .cont-fashion .list-img #girito {

position: relative;
float: right;
top: 0px;
right: 0px;
}

#library-nf {
padding: 0;
height: 600px;
top: 0;
}

#library-nf .log-nt {
width: 100%;
height: 290px;
top: 0px;
position:  relative;
float: none;
text-align: center;
}

#library-nf .log-nt img {
position: relative;
top: 0px;
width: 80%;
}

#library-nf .litle-text {
width: 100%;
height: 270px;
position: relative;
float: none;
top: 5px
}

#library-nf .litle-text p {
width: 90%;
text-align: justify;
position: relative;
top: 50px;
margin: 0 auto;
}

#library-nf .girl-all {
position: relative;
float: right;
width: 100%;
}

#library-nf .girl-all #girito-2 {
width: 20%;
position: absolute;
top: 20px;
left: -10px;
z-index: 10;
}

#library-nf .girl-all #chapar {
width: 90%;
float: right;
top: -40px;
position: relative;
}
   
}