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

body,html{height: 100%;}
 
header{height: 70px;
       background-color: black;
}

#bt{height: 50px;
    width: 50px;
    cursor: pointer;
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 50;
}

nav{width: 25%;
    height: 100%;
    background-color: white;
    position: fixed;
    left: -50%;
    top: 0;
    transition: all 1s;
    z-index: 20;
}

#search{width: 40px;
        position: absolute;
        right: 40px;
        top:17px;
        cursor: pointer;
        z-index: 10;}

nav ul{display: flex;
       justify-content: center;
       align-items: center;
       font-size: 50px;
       font-family: 'Libre Franklin', sans-serif;
       font-weight: 700;
       color: white;
       flex-direction: column;
       height: 100%;
}

nav ul li{background-color: none;}

nav ul li a:link,nav ul li a:visited{color: black;
                                     transition: all 0.5s;
                                     text-decoration: none;}

nav ul li a:hover{color: lightgray;}

.sposta{left:0!important;}

#logo{width: 150px;     
      margin-left: auto;
      margin-right: auto;
      z-index: 1;
      cursor: pointer;
      padding-top: 17px;
}

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

#bars{width: 40px;
      position: absolute;
      right: 40px;
      top:17px;
      cursor: pointer;
      z-index: 10;
} 

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

#slip{width: 40px;
      position: absolute;
      right: 100px;
      top:15px;
      cursor: pointer;
      z-index: 10;
} 

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

#knot{width: 40px;
      position: absolute;
      right: 160px;
      top:15px;
      cursor: pointer;
      z-index: 10;
} 

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

#faith{width: 13px;
      position: absolute;
      left: 40px;
      top: 30px;
      cursor: pointer;
      z-index: 10;
      font-family: sans-serif;
      font-size: 18px;
      color: white;
   
} 

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

#lang{width: 15px;
      position: absolute;
      left: 60px;
      top: 25px;
      cursor: pointer;
      z-index: 10;
      font-family: 'Libre Franklin', sans-serif;
      font-weight: 700;
      font-size: 18px;
      color: white;
   
}


#main{margin-left: auto;
      margin-right: auto;
      margin-bottom: 120px;
      width: 100%;
}

#main img{width: 100%;
          display: block;
          margin-left: auto;
          margin-right: auto;
}

#bmth{position: absolute;
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
}

#drown{font-size: 80px;
      color: white;
      position: absolute;
      top:750px;
      font-family: 'Libre Franklin', sans-serif;
      display: inline-block;
      font-weight: 800;
      z-index: 60;
}

.slider{width: 100%;
        margin: 0 auto;  
}

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

#nervous{width: 70%;
         margin-left: auto;
         margin-right: auto;
         display: flex;
         margin-top: 50px;
         flex-wrap: wrap;
         justify-content: center;
         background-color: white;
}

.bliss{width: calc(40% - 40px);
       
       margin: none;
       position: relative;
}

.room{position: absolute;
      width: 100%;
      color: black;
      font-family: 'Libre Franklin', sans-serif;
      font-size: 25px;
      font-weight: 800;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      cursor: pointer;
}

.thin{font-weight: 500;}

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

.room a:link,.room a:visited{color: black;
                                     transition: all 0.5s;
                                     text-decoration: none;}

.room a:hover{color: lightgray;}

footer{height: 360px;
       width: 100%;
}

.box1{background-color: black;
     height: 180px;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-left: auto;
     margin-right: auto;
}

.box2{background-color: black;
     height: 180px;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-left: auto;
     margin-right: auto;
}

.moma1{background-color: black;
       font-family: 'Libre Franklin', sans-serif;
       font-size: 23px;
       color: white;
       width: auto;
       margin-left: 50px;
       margin-right: auto;
       text-align: center; 
}

.social{background-color: black;
        height: 100px;
        width: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 200px
}

.fb{width: 70px;
    cursor: pointer;}

.tw{width: 70px;
    cursor: pointer;}

.ig{width: 70px;
    cursor: pointer;}

.yt{width: 70px;
    cursor: pointer;}

.pt{width: 70px;
    cursor: pointer;}

.moma2{font-family: 'Libre Franklin', sans-serif;
       font-size: 23px;
       color: white;
       width: auto;
       margin-right: 50px;
       margin-left: auto;
       text-align: center;
}

.privacy{font-family: 'Libre Franklin', sans-serif;
       font-size: 15px;
       color: white;
       width: auto;
       margin-left: 50px;
       margin-right: auto;
       margin-top: 120px;
}

.copyr{font-family: 'Libre Franklin', sans-serif;
       font-size: 15px;
       color: white;
       width: auto;
       margin-right: 50px;
       margin-left: auto;
       margin-top: 120px;
}

.strong{font-weight: 800;}

.moma1 a:link,.moma1 a:visited{color: white;
                                     transition: all 0.5s;
                                     text-decoration: none;}

.moma1 a:hover{color: gray;}

.moma2 a:link,.moma2 a:visited{color: white;
                                     transition: all 0.5s;
                                     text-decoration: none;}

.moma2 a:hover{color: gray;}

.privacy a:link,.privacy a:visited{color: white;
                                     transition: all 0.5s;
                                     text-decoration: none;}

.privacy a:hover{color: gray;}




@media only screen and (max-width:1024px) {
    
    #bt{height: 25px;
    width: 25px;
    right: 20px;
    bottom: 310px;}

    nav{width: 50%;}

    #search{width: 30px;
        right: 20px;
        top:20px;}

    nav ul{font-size: 38px;}
    
    nav ul li{margin: 5px;}

    #drown{font-size: 50px;
           z-index: 1;
           top:300px;}
    
    #nervous{width: 90%;
    margin-bottom: 70px;}

    .bliss{width: calc(40% - 30px);}

    .room{font-size: 15px;}
    
    footer{height: auto;
       width: 100%;}

    .box1{height: 160px;}

    .box2{height: 160px;}

    .moma1{width: 30%;
       font-size: 18px;}

    .social{height: auto;
        width: 250px;
        margin-top: 200px;}

    .moma2{width: 30%;
       font-size: 18px;}

    .privacy{font-size: 13px; 
       margin-top: 120px;}

    .copyr{font-size: 13px;
       margin-top: 120px;} 
    
}

@media only screen and (max-width:667px)  {
   
    header{height: 50px;
       background-color: black;
    }
    
    #bt{height: 20px;
    width: 20px;
    right: 10px; 
    bottom: 200px;}

    nav{width: 80%;
        left: -80%;}

    #search{width: 20px;
        right: 20px;
        top:20px;}

    nav ul{font-size: 30px;}
    
    nav ul li{margin: 4px;}
    
    #logo{width: 80px;
      padding-top: 16px;}

   #bars{width: 20px;
      right: 20px;
      top: 17px;}

   #slip{width: 20px;
      right: 50px;
      top: 15px;}

   #knot{width: 20px;
      position: absolute;
      right: 80px;
      top: 15px;}

   #faith{width: 7px;
      left: 20px;
      top: 22px;} 

   #lang{left: 30px;
         top: 20px;
         font-size: 10px;}
    
    #main{margin-bottom: 90px;}

    #drown{font-size: 25px;
           z-index: 1;
           top: 140px;}
    
    #nervous{width: 100%;
        margin-top: 5px; 
    margin-bottom: 70px;}

    .bliss{width: calc(40% - 20px);}

    .room{font-size: 8px;}
    
    footer{height: auto;
       width: 100%;}

    .box1{height: 100px;}

    .box2{height: 100px;}

    .moma1{width: 40%; 
       font-size: 10px;
       margin: 5px;}

    .social{height: auto;
        width: 140px; 
        margin-top: 200px;}

    .moma2{width: 40%;
       font-size: 10px;
       margin: 5px;}

    .privacy{font-size: 6px; 
       margin-top: 90px;}

    .copyr{font-size: 6px;
       margin-top: 90px;}
    
}