@font-face {
  font-family: "maharam";
  src: url("./fonts/MaharamNeue-Regular.otf");
  font-weight: normal;
}

@font-face {
  font-family: "maharam-italic";
  src: url("./fonts/MaharamNeue-Italic.otf");
  font-weight: normal;
}

@font-face {
  font-family: "maharam-medium";
  src: url("./fonts/MaharamNeue-Medium.otf");
  font-weight: medium;
}

@font-face {
  font-family: "maharam-medium-italic";
  src: url("./fonts/MaharamNeue-MediumItalic.otf");
  font-weight: medium;
}

  
  body{
    margin-bottom: 15vh;
  }
  
  #logo{
      width: 8rem;
      margin-left: 0.2vw;
      margin-top: 1.1vh;
  }
  
  #logolockup{
    display: inline-block;
    margin-left: 2.5vw;
    margin-top: 5vh;
    position: fixed;
  }

  #topnav{
    display: block;
    position: fixed;
    width: 100vw;
    height: 10vh;
    margin-top: -24vh;
    z-index: 100;
    background-color: rgb(255, 255, 255);
  }
  
  
  p {
      font-size: 16px;
      color: #000000;
      font-family: "maharam";
      font-weight: normal;
      vertical-align: top;
      line-height: 1.4;
    }
    
    h1 {
      font-size: 48px;
      color: #000000;
      font-family: "maharam";
      font-weight: normal;
      margin-bottom: 50px;
      vertical-align: top;
    }
    
    h2 {
      font-size: 20px;
      color: #000000;
      font-family: "maharam";
      font-weight: normal;
      vertical-align: top;
      margin-top: 20px;
    }

    
    h3 {
      font-size: 18px;
      color: #000000;
      font-family: "maharam";
      font-weight: normal;
      line-height: 1.2;
      margin-top: 15px;
      width: 50%;
      display: inline-block;
      margin-right: 0;
    }

    h4{
      font-size: 18px;
      color: #ffffff;
      font-family: "maharam";
      font-weight: normal;
      margin-top: 0px;
      margin-bottom: 16px;
    }

    h5{
      font-size: 12px;
      color: #535353;
      font-family: "maharam";
      font-weight: normal;
      margin-bottom: 0;
    }
  
    a{
      color: rgb(0, 0, 0);
      text-decoration: none;
    }
  
    a:hover{
      color: red;
    }

    #home{
      display: inline;
      }


      #nav-buttons{
        width: 200px;
        display: inline-flex;
        flex-direction: row;
        color: rgb(0, 0, 0);
        font-family: 'maharamNeue-Regular', sans-serif;
        position: fixed;
        right: 2vw;
        top: 7vh;
  }

      #nav-buttons h4{
      font-size: 14px;
      color: #000000;
      font-family: "maharam";
      font-weight: normal;
      margin-top: 0px;
      margin-bottom: 16px;
      }
      
      #index h4{
        color: #ff0000 !important;
        margin-left: 25px;
        vertical-align: bottom;
      }
      
      #scroll h4{ 
        margin-left: 20px;
        vertical-align: bottom;
        color: #000000 !important;
      }

       
      #scroll h4:hover{
        color: red !important;
      }
  

    #smallpreview{
      width: 25vw;
      transform: .2s; 
      height: 35vh;
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
      transition: 0.5s;
  
    }
  
    #smallpreview:hover{
      background-size: 105%;
    }
  
    .grid-item{
      display: inline-block;
      height: 47vh;
      margin-right: 2vw;
      margin-left: 2vw;
      margin-bottom: 30px;
      /* transition: 1s; */

    }
  
    #grid{
      position: relative;
      margin-top: 24vh;
      display: block;
      margin-left: 5.5vw;
      /* transition: 1s; */
    }
  
    #row{
      margin-bottom: 50px;
    }
  
    #productlink{
      line-height: 1.4;
      margin-left: 0;
      width: 60%;
      margin-top: 0.8rem;
      text-align: left;
    }

    #intro-name{
      height: 10vh;
    }

  #sortby{
    display: inline-flex;
    justify-content: flex-end;
    width: 35vw;
    position: absolute;
    top: 16vh;
    right: 8vw;
    margin-bottom: 20px !important;
  }

  #sort{
    margin-right: 20px;
  }

  .sort{
    border-radius: 50px;
    border: 1px solid rgb(99, 99, 99);
    width: 120px;
    height: 40px;
    display: inline-block;
    margin-top: 0.5vh;

  }

  .sort h4{
    color: rgb(99, 99, 99);
    font-size: 14px;
    margin-top: 12px;
    font-family: "maharam";
    transition: all 0.5s;
  }

  .sort h4:hover{
    color: black;
  }

    #order{
      position: absolute;
      display: inline-block;
      top: 18vh;
      right: 9vw;
    }

    .arrows h4{
      color: #000000;
      font-size: 14px;
      font-family: 'MaharamNeue-Regular', sans-serif;
    }
  
    #top{
      background-color: white;
      z-index: 1000;
    }

    .number{
      display: none;
    }

    .arrows{
      border: 0px;
      background-color: white;
    }

    .is-active{
      color: red;
    }

    #intro{
      display: inline-block;
      position: absolute;
      top: 16vh;
      left: 7.5vw;
      font-family: 'maharam-medium';
    }

    #productlink a{
      width: 100%;
    }

    #productlink a span {
      display: inline-block;
      transform: translateX(20%);
      transition: 0.5s;
    }

    #productlink:hover > a span {
      transform: translateX(50%);

    }

    #newtoold.is-active p,
    #oldtonew.is-active p {
        color: red;
    }

     #mobile-container{
      display: none;
     }


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

body{
  margin-top: 0;
}
 

      h3{
        font-size: 16px;
        width: 90%;
      }

      #mobile-container{
        position: absolute;
        top: 0;
        left: 0;
        display: block;
      }

      #rightnav{
        display: none;
       }

       #logolockup{
        margin-top: 2vh;
       }
    
       #logo{
        width: 120px;
        margin-left: 3.5vw;
        z-index: 500 !important;
       }
    
       #hamburger-menu{
        display: inline-block;
        margin-top: 5vh;
        position: fixed;
        right: 7vw;
        top: -10px;
        z-index: 600;
        width: 25px;
       }
    
       #exit{
        display: block;
        margin-top: 3vh;
        float: right;
        position: fixed;
        right: 7vw;
        top: 5px;
        z-index: 10;
        width: 25px;
       } 

       #mobile-menu{
        background-color: rgb(0,0,0);
        z-index: 100;
        width: 100vw;
        height: 100vh;
        margin-top: 0 !important;
        position: fixed;
        display: none;
        transition: all 0.5s;
        overflow-y: hidden;
       }
    
       #menubuttons ul{
        font-size: 32px;
        line-height: 1.4;
        margin-left: 0vw;
        color: white;
        font-family: "maharam";
       }
    
       #menubuttons{
        margin-top: 18vh;
       }

       #sortby{
        width: 48vw;
        right: 10vw;
       }

       #sort{
        font-size: 14px;
        margin-right: 20px;
       }

       .sort h4{
        font-size: 14px;
       }

       /* #sort{
        float: left;
        margin-right: 65vw !important;
       } */



       #smallpreview{
        width: 100%;
        height: 18vh;
        margin-right: 10vw;
        background-size: cover;
          }

      .grid-item{
        width: 40vw;
        height: 30vh;
        display: inline-block;
        right: 10vw;
        margin-bottom: 10px;

      }

      #grid{
        margin-left: 4vw;
       }


      #nav-buttons{
        display: none;
      }
    

      #productlink{
        float: left !important;
        width: 100%;
        margin-left: 0vw;
        margin-top: 5px;
      }

      #intro-name{
        height: 18vh;
      }


     }


     @media only screen and (min-width: 600px) and (max-width: 1070px) {

      #mobile-container{
        position: absolute;
        top: 0;
        left: 0;
        display: block;
      }

      #nav-buttons{
        display: none;
       }
    
       #hamburger-menu{
        display: inline-block;
        margin-top: 5vh;
        position: fixed;
        right: 7vw;
        top: 70px;
        z-index: 600;
        width: 25px;
       }
    
       #exit{
        display: block;
        margin-top: 3vh;
        float: right;
        position: fixed;
        right: 7vw;
        top: 5px;
        z-index: 10;
        width: 25px;
       } 

       #mobile-menu{
        background-color: rgb(0,0,0);
        z-index: 100;
        width: 100vw;
        height: 100vh;
        margin-top: 0 !important;
        position: fixed;
        display: none;
        transition: all 0.5s;
        overflow-y: hidden;
       }
    
       #menubuttons ul{
        font-size: 32px;
        line-height: 1.4;
        margin-left: 3vw;
        color: white;
        font-family: "maharam";
       }
    
       #menubuttons{
        margin-top: 18vh;
       }

      #productlink{
        float: left !important;
        width: 100%;
        margin-left: 0vw;
        margin-top: 5px;
      }

      #intro-name{
        height: 18vh;
      }

      #smallpreview{
        width: 100%;
        margin-right: 2vw;
        background-size: cover;
          }

      .grid-item{
        width: 40vw;
        height: 42vh;
        display: inline-block;
        right: 2vw;
      }

      h3{
        display: block;
        width: 70%;
      }

      #sort{
        margin-right: 3vw !important;
      }

      #oldtonew{
        right: 7vw !important;
      }

      #newtoold{
        right: 10vw !important;
      } #rightnav{
        display: none;
       }

       #logolockup{
        margin-top: 2vh;
       }
    
       #logo{
        width: 7rem;
        margin-left: 5.5vw;
        z-index: 500 !important;
       }
    
       #hamburger-menu{
        display: inline-block;
        margin-top: 5vh;
        position: fixed;
        right: 7vw;
        top: -10px;
        z-index: 600;
        width: 25px;
       }
    
       #exit{
        display: block;
        margin-top: 3vh;
        float: right;
        position: fixed;
        right: 7vw;
        top: 5px;
        z-index: 10;
        width: 25px;
       } 

       #mobile-menu{
        background-color: rgb(0,0,0);
        z-index: 100;
        width: 100vw;
        height: 100vh;
        margin-top: 0 !important;
        position: fixed;
        display: none;
        transition: all 0.5s;
        overflow-y: hidden;
       }
    
      #sortby{
        width: 30vw;
        right: 8vw;
       }
    
     }


     @media screen and (min-width:1070px) and (max-width: 2080px) {  /* -- 1600px -- */

      #logolockup{
        margin-top: 4vh;
      }
	
      #logo {
        margin-left: 0.5vw;
        margin-top: 2vh;
        width: 8rem;
      }
    
      #nav-buttons{
        top: 7vh;
      }

      #nav-buttons h4{
        font-size: 14px;
      }

      .grid-item{
        height: 48vh;

      }

      #smallpreview{
        height: 37vh;
      }

    }

    @media screen and (min-width:2080px) {  /* -- 1600px -- */

      #logolockup{
        margin-top: 4vh;
      }
	
      #logo {
        margin-left: 0.5vw;
        margin-top: 5.5vh;
        width: 140px;
      }

      #topnav{
        padding-bottom: 5vh;
        margin-top: -28vh;
      }
    
      #nav-buttons{
        top: 7vh;
        width: 250px;
      }

      #nav-buttons h4{
        font-size: 20px;
      }

      #sortby{
        right: 8vw;
        z-index: 5000;
      }

      #smallpreview{
      margin-right: 2vw;
      width: 24vw;
      height: 35vh;
      }

      .grid-item{
        height: 46vh;

      }

      #grid{
        margin-left: 6vw;
        margin-top: 25vh;
      }

      h3{
        font-size: 22px;
      }

      h5{
        font-size: 16px;
      }

    
    }