*{padding: 0; 
  margin: 0;
  list-style: none;
  text-decoration: none;
}

body,html{height: 100%;} 

.loader{height: 100%;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 7000;
        position: fixed;
        background-color: black;
}
 
svg{
  width: 100px;
  height: 100px;
  margin: 20px;
  display:inline-block;
}

header{height: 15%;
       width: 100%;
       background-color: black;
       display: flex;
       align-items: center;
       justify-content: center;
}

#bt{cursor: pointer;
    position: fixed;
    right: 2%;
    bottom: 4%;
    z-index: 50;
    width: 3%;
}

#bt img{width: 100%; display: block;}

#logo{position: absolute;
      left: 2%;
      width: 5%;
      cursor: pointer;
}

#logo img{width: 100%; display: block;}

nav{display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Staatliches', cursive;
    width: 100%;
    height: 27%;
    
}

nav ul{display: flex;
       height: 100%;
       width: 43.5%;
       align-items: center;
       justify-content: center;
      
}

nav ul li{margin-left: 7%;
          margin-right: 7%;
          font-size: 2rem;
          cursor: pointer;
          
}

nav ul li a:link,nav ul li a:visited{color: white;
                                     text-decoration: none;}

nav ul li a:hover{background-color: #373737;
                  transition: all 0.5s;
}

#lang{position: absolute;
      right: 2%;
      width: 2%;
      cursor: pointer;
}

#lang img{width: 100%; display: block;}

#payoff{background-color: black;}

#main{margin: 0 auto;
      width: 100%;}

#main img{width: 100%; display: block;}

#shoes{position: absolute;
       z-index: 1000;
       width: 42%;
       top: 20%;
       right: 31%;
}

#shoesback{position: absolute;
       z-index: 1;
       width: 42%;
       top: 20%;
       right: 31%;}

#shoesback img{width: 100%; display: block;}

#shoes img{width: 100%; display: block;}

#01{background-color: black;}

#padre1{position: relative;
        height: auto;
        width: 20%;
        display: flex; 
        justify-content: center;
        align-items: center;}

#coll {
    font-size: 2.8rem;
    color: white;
    font-family: 'Staatliches', cursive;
    z-index: 10;
    position: absolute;
    cursor: pointer;
    left: 300%;
    top: 430px;
}

#madre1{position: relative;
        height: auto;
        width: 100%;
        display: flex; 
        justify-content: center;
        align-items: center;}

#dida1{font-size: 2rem;
       color: white;
       width: 100%;
       text-align: center;
       top: 740px;
       position: absolute;
       font-family: 'Ultra', serif;
       z-index: 10;
}

#collection{margin: 0 auto;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
}

.sx01{width: 76%;
      margin: 0 auto;}

.sx01 img{width: 100%; display: block;}

.dx01{width: 24%;
      margin: 0 auto;}

.dx01 img{width: 100%; display: block;}

#back01{margin: 0 auto; width: 100%;}

#back01 img{width: 100%; display: block;}


#02{background-color: black;}

#padre2{position: relative;
        height: auto;
        width: 20%;
        background-color: aqua;
        display: flex; 
        justify-content: center;
        align-items: center;}

#look {
    font-size: 2.8rem;
    color: white;
    font-family: 'Staatliches', cursive;
    z-index: 10;
    position: absolute;
    top: 450px;
    left: 140%;
    cursor: pointer;
}

#madre2{position: relative;
        height: auto;
        width: 100%;
        background-color: aqua;
        display: flex; 
        justify-content: center;
        align-items: center;}

#dida2{font-size: 2rem;
       color: white;
       width: 100%;
       text-align: center;
       top: 750px;
       position: absolute;
       font-family: 'Ultra', serif;
       z-index: 10;
}

#lookbook{margin: 0 auto;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
}

.sx02{width: 25%;
      margin: 0 auto;}

.sx02 img{width: 100%; display: block;}

.dx02{width: 75%;
      margin: 0 auto;}

.dx02 img{width: 100%; display: block;}

#back02{margin: 0 auto; width: 100%;}

#back02 img{width: 100%; display: block;}



#03{background-color: black;}

#padre3{position: relative;
        height: auto;
        width: 20%;
        background-color: aqua;
        display: flex; 
        justify-content: center;
        align-items: center;}

#test{
    font-size: 2.8rem;
    color: white;
    font-family: 'Staatliches', cursive;
    z-index: 10;
    position: absolute;
    top: 430px;
    left: 290%;
    cursor: pointer;
}

#madre3{position: relative;
        height: auto;
        width: 100%;
        background-color: aqua;
        display: flex; 
        justify-content: center;
        align-items: center;}

#dida3{font-size: 2rem;
       color: white;
       width: 100%;
       text-align: center;
       margin-top: 1700px;
       position: absolute;
       font-family: 'Ultra', serif;
       z-index: 10;
}

#testimonial{margin: 0 auto;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
}

.sx03{width: 75%;
      margin: 0 auto;}

.sx03 img{width: 100%; display: block;}

.dx03{width: 25%;
      margin: 0 auto;}

.dx03 img{width: 100%; display: block;}

#back03{margin: 0 auto; width: 100%;}

#back03 img{width: 100%; display: block;}

#coll:hover,#look:hover,#test:hover{background-color: black;
                  transition: all 0.5s;
}

footer{height: 10%;
       width: 100%;
       background-color: black;
       display: flex;
       align-items: center;
       justify-content: center;
}

#ft{font-family: 'Staatliches', cursive;
     font-size: 1rem;
     color: white;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
}

.social{letter-spacing: auto;
         width: 13%;
         cursor: pointer;
}

.social img{width: 100%; display: block;}

#ft a:link,#ft a:visited{color: white;}

@media only screen and (max-width:1024px) {
    
    header{height: 10%;}
    
    #shoes{top: 12%;}
    
    #shoesback{top: 12%;}
    
    #logo{width: 7%;}
    
    #lang{width: 4%;}
    
    nav ul li{font-size: 1.8rem;}
    
    #coll{font-size: 1.5rem;
          width: 102%;
          margin-top: 370%;}
    
    #look{font-size: 1.5rem;
          width: 102%;
          margin-top: 370%;}
    
    #test{font-size: 1.5rem;
          width: 106%;
          margin-top: 370%;}
    
    #dida1{font-size: 1.3rem;}
    
    #dida2{font-size: 1.3rem; margin-top: 110%;}
    
    #dida3{font-size: 1.3rem; margin-top: 110%;}
    
    footer{height: 8%;}
    
    #ft{font-size: 0.8rem;}

    .social{width: 14%;}
    
    #bt{right: 2%;
    bottom: 8%;
    width: 5%;}
    
}

@media only screen and (max-width:1024px) and (orientation: landscape) {
    
    #bt{right: 2%;
    bottom: 8%;
    width: 3.5%;}
}

@media (max-width:736px) {
    
    #coll {
        font-size: 0.7rem;
        top: -160px!important;
        left: 300%;
        width: auto;
    }
    
}
    
@media only screen and (max-width:667px) {
    
    header{height: 7%;}
    
    #shoes{top: 8%;}
    
    #shoesback{top: 8%;}
    
    #logo{width: 8%;}
    
    #lang{width: 5%;}
    
    nav ul li{font-size: 1rem;}
    
    #coll {
        font-size: 0.7rem;
        top: -160px!important;
        left: 300%;
        width: auto;
    }

   #look {
        font-size: 0.7rem;
        width: auto;
        margin-top: -340px;
        left: 150%;
    }

    #test {
        font-size: 0.7rem;
        width: auto;
        top: -160px;
    }

    
    #dida1{font-size: 0.65rem; top:175px;}
    
    #dida2{font-size: 0.65rem; top:-220px;}
    
    #dida3{font-size: 0.65rem; margin-top:220px;}
    
    footer{height: 5%;}
    
    #ft{font-size: 0.45rem;}

    .social{width: 18%;}
    
    #bt{right: 2%;
    bottom: 8%;
    width: 5%;}
    
}
    
@media only screen and (max-width:667px) and (orientation: landscape) {
    
    header{height: 14%;}
    
    #shoes{top: 18%;}
    
    #shoesback{top: 18%;}
    
    #coll{font-size: 1rem;}
    
    #look{font-size: 1rem;}
    
    #test{font-size: 1rem;}
    
    #dida1{font-size: 0.8rem;}
    
    #dida2{font-size: 0.8rem;}
    
    #dida3{font-size: 0.8rem;}
    
    footer{height: 10%;}
}