.outframe{
  box-sizing: border-box; 
  position:relative; 
  display:flex; 
  flex-direction:column; 
  align-items: center; 
  justify-content: center;
  /* border: 1px solid rebeccapurple; */
}

.navigator{
  box-sizing: border-box;
  margin-bottom:20px;
  width: 900px; 
  height: 70px;
  position: sticky;
  top:0; 
  display:flex;
  background-color:black; 
  z-index:2;
}

.navigator #logo{
  box-sizing: border-box; 
  height: 100%; 
  display: flex; 
  align-items: center;
  width:30%;
  padding-left: 3%;
  /* border: 1px dashed white; */
}

#logo img{
  height: auto; 
  width: 90%;
  
  /* border: 1px dashed yellow; */
  }


  .navigator #subnavi{
    width:70%;
    box-sizing: border-box; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: left;
    padding-left: 100px;
    background-color:black;
    color:white;
    /* border: 1px dashed white; */

  }
  
.navigator #subnavi span{
  margin-left:50px;
  font-size: 20px;
  font-weight: 500;

  }

  .container{
    box-sizing: border-box; 
    width: 900px; 
    display: flex;
  }

  .gaptitle{
    box-sizing: border-box; 
    width: 900px; 
    display: flex;
    height:40px; 
    align-items: center;
    /* border: 1px dashed black; */
  }

  .gaptitle span{
    padding-left:15px; 
    font-size:20px; 
    font-weight:300;
  }

  #productsMenu{
    height: 20px;
  }

  #productsMenu span{
    font-size:20px;
  }

  #banner{
    width:100%; 
    display: flex; 
    box-sizing: border-box; 
    justify-content:center; 
    align-items: center;
  }

    #banner img {
    padding: 2%; 
    height: auto; 
    width:100%;
    cursor: pointer;
    }

    .container #productslide{
      width: 100%; 
      /* padding:2%;  */
      overflow-x: scroll; 
      white-space: nowrap; 
      display: inline-block; 
    }

    .container #productslide .productbox{
      height:405px; 
      width:324px; 
      display:inline-block;
      border-radius: 3px;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
      margin: 0 10px;
      /* border: 1px solid lightslategray; */
    }


    .container #productsList{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      position: relative;
      /* left: 70px; */
      width: 760px;
      /* border: 1px dashed yellow; */
    }

    .container #productsList .productbox{
      height:350px; 
      width:224px;
      display:inline-block;
      border-radius: 3px;
      font-size:16px; 
      font-weight: 700;
      /* border: 1px dashed red; */
    }



    #contactbox{
      display:flex;
      height:700px; 
      justify-content:center; 
      align-items:center;
    }

    #contactgrid{
      height:350px; 
      width:750px; 
      display:grid; 
      grid-template: 250px 100px / 250px 250px 250px; 
    } 

    #contactgrid img{
      width:auto; 
      height:100%;
      cursor: pointer;
    } 

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

    .container{
      box-sizing: border-box; 
      width: 100%; 
      display: flex;
      /* border: 1px dashed red; */
    }
    
    .navigator{
      box-sizing: border-box;
      margin-bottom:20px;
      width: 100%; 
      height: 70px;
      position: sticky;
      top:0; 
      display:flex;
      background-color:black; 
      z-index:2;

      /* border: 1px dashed red; */
    }

    .gaptitle{
      box-sizing: border-box; 
      width: 100%; 
      display: flex;
      height:40px; 
      align-items: center;
      /* border: 1px dashed black; */
    }

    .container #productslide{
      width: 100%; 
      /* padding:2%;  */
      overflow-x: scroll; 
      white-space: nowrap; 
      display: inline-block; 
      /* border: 1px dashed red; */
    }

    .navigator #subnavi{
      width:70%;
      box-sizing: border-box; 
      height: 100%; 
      display: flex; 
      align-items: center; 
      justify-content: center;
      padding-left: 0;
      background-color:black;
      color:white;
      /* border: 1px dashed yellow; */
  
    }

    .navigator #subnavi span{
      margin-left:0;
      font-size: 14px;
      font-weight: 500;
      /* border: 1px dashed blue; */
      }

      .navigator #subnavi span:not(:first-child) {
        margin-left: 10%;
    }

      .container #productslide .productbox{
        height:300px; 
        width:240px; 
        display:inline-block;
        border-radius: 3px;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        margin: 0 10px;
        /* border: 1px solid lightslategray; */
      }

      .container #productsList{
        display: flex;
        flex-wrap: wrap;
        position: relative;
        box-sizing: border-box;
        width: 100%;
      }
      
      

      .container #productsList .productbox{
        box-sizing: border-box;
        height: auto; 
        width: 50%;
        display:inline-block;
        border-radius: 3px;
        font-size:16px; 
        padding: 3%;
      }

      #productsMenu{
        height: 20px;
      }
    

      #productsMenu span{
        padding-left:0; 
        font-size:14px;
      }

      #contactbox{
        display: flex;
        height:100%; 
        justify-content:center; 
        align-items:center;
      }
  
      #contactgrid{
        box-sizing: border-box;
        margin-top: 20%;
        padding-left: 10%;
        height:300px; 
        width:100%; 
        display:grid; 
        grid-template: 150px 50px /repeat(3, 30%); 
        /* border: 1px dashed yellow; */
        
      }
      
      #contactgrid img{
        width:100%; 
        height:auto;
        cursor: pointer;
      } 
  }