.logo{
    width: 280px;
    padding-right: 10%;
    float: left;
}

.col2 .main_nav{
    padding-top: 20px;
}

.main_nav li{
    overflow: hidden;
     list-style-type: none;
     background-color: #34495e;
     padding: 0px;
     width: 200px;
     height: 50px;
     margin: 5px;
     font-size: 20px;
     font-family: calibri,arial,verdana;
     line-height: 50px;
     float: left;
   }
   
   .main_nav a{
     padding-top: 5px;
     text-decoration: none;
     color: white;
     display: block;
     text-align: center;
     transition: 1s; 
     
   }
   
    .main_nav span{
     display: block;
     margin-top:-60px;
   }
   
   .main_nav a:hover{
    
     color: white;
     margin-top:55px;
     
     
   }     

   @media (max-width:820px){


    .logo{
        width: 230px;
        padding-right: 10%;
        float: left;
    }
    
    .col2 .main_nav{
        padding-top: 30px;
    }
    
    .main_nav li{
        overflow: hidden;
         list-style-type: none;
         background-color: #34495e;
         padding: 0px;
         width: 200px;
         height: 35px;
         margin: 5px;
         font-size: 10px;
         font-family: calibri,arial,verdana;
         line-height: 50px;
         float: left;
       }
       
       .main_nav a{
         padding-top: 5px;
         text-decoration: none;
         color: white;
         display: block;
         text-align: center;
         transition: 1s; 
         
       }
       
        .main_nav span{
         display: block;
         margin-top:-60px;
       }
       
       .main_nav a:hover{
        
         color: white;
         margin-top:55px;
        }   

   }

   @media (max-width:702px){
    .logo{
        width: 230px;
        padding-right: 10%;
        float: left;
    }
    
    .col2 .main_nav{
        padding-top: 0px;
    }
    
    .main_nav li{
        overflow: hidden;
         list-style-type: none;
         background-color: #34495e;
         padding: 0px;
         width: 200px;
         height: 35px;
         margin: 5px;
         font-size: 10px;
         font-family: calibri,arial,verdana;
         line-height: 50px;
         float: left;
       }
       
       .main_nav a{
         padding-top: 5px;
         text-decoration: none;
         color: white;
         display: block;
         text-align: center;
         transition: 1s; 
         
       }
       
        .main_nav span{
         display: block;
         margin-top:-60px;
       }
       
       .main_nav a:hover{
        
         color: white;
         margin-top:55px;
        }   

   }
   .main_area { 
    position: relative; 
    width: 100%; 
 }


 @media (max-width:767px){
    .logo{
        margin-right: -50px;
        float: left;
    }
    
}

 h1 span{
    color: rgb(151, 22, 22);
}


.container{   
    top: 200px;
    width: 99%;
    height: 1450px;
    background-color: #e4e4e4;
    position: absolute;

}

.container1{
  top: 0px;
  left: 19%;
  right: 7%;
  height: 1430px;
   background-color: rgb(255, 255, 255);
   position: absolute;
   padding: 10px;
}

#logo1{

  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1170px;
}

#products1{
  box-shadow: 3px 3px 3px rgb(237, 237, 237);
  top: 180px;
  margin-left: 30px;
  position: relative; 
}

#products #h1{
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: inherit;
  margin-top: 190px;
  margin-left: 52px;
  width: 443px;
  font-size: 20px;
}

#products #p1{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13.5px;
  margin-top: 260px;
  margin-left: 52px;
  width: 443px;
  color: #8a8a8a;
}

#products2{
  box-shadow: 3px 3px 3px rgb(237, 237, 237);
  top: 180px;
  float: right;
  position: relative;
  right: 38px;
}

#products #h2{
  right: 48px;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: inherit;
  margin-top: 190px;
  width: 443px;
  font-size: 20px;
}

#products #p2{
  right: 48px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13.5px;
  margin-top: 260px;
  width: 443px;
  color: #8a8a8a;
}

#products3{
  box-shadow: 3px 3px 3px rgb(237, 237, 237);
  top: 550px;
  margin-left: 30px;
  position: relative; 
}

#products #h3{
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: inherit;
  margin-top: 560px;
  margin-left: 52px;
  width: 443px;
  font-size: 20px;
}

#products #p3{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13.5px;
  margin-top: 630px;
  margin-left: 52px;
  width: 443px;
  color: #8a8a8a;
}

#products4{
  box-shadow: 3px 3px 3px rgb(237, 237, 237);
  top: 550px;
  float: right;
  position: relative;
  right: 38px;
}

#products #h4{
  right: 48px;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: inherit;
  margin-top: 560px;
  width: 443px;
  font-size: 20px;
}

#products #p4{
  right: 48px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13.5px;
  margin-top: 630px;
  width: 443px;
  color: #8a8a8a;
}

#pro1{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 22px;
  margin-top: 50px;
  margin-left: 30px;
}

#pro2{
  font-size: 14px;
  font-family: 'Courier New', Courier, monospace;
  margin-top: 37px;
  margin-left: 30px;
}

#background{
  width: 100%;
  height: 100%;
}


#products5{
  box-shadow: 3px 3px 3px rgb(237, 237, 237);
  top: 920px;
  margin-left: 30px;
  position: relative; 
}

#products #h5{
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: inherit;
  margin-top: 930px;
  margin-left: 52px;
  width: 443px;
  font-size: 20px;
}

#products #p5{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13.5px;
  margin-top: 1000px;
  margin-left: 52px;
  width: 443px;
  color: #8a8a8a;
}

@media (max-width:1410px){
  .container{   
    top: 200px;
    width: 99%;
    height: 2170px;
    background-color: #e4e4e4;
    position: absolute;
  }

  .container1{
    top: 0px;
    left: 8%;
    right: 8%;
    height: 2150px;
     background-color: rgb(255, 255, 255);
     position: absolute;
     padding: 10px;
  }
  
  #background{
    width: 100%;
    height: 100%;
  }
  
  #logo1{

    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1880px;
    padding-bottom: 20px;
  }
  #products1{
    width: 60%;
    right: 20%;
    box-shadow: 0px 3px 0px rgb(237, 237, 237);
    top: 190px;
  }
  
  #products #h1{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: inherit;
    width: 53%;
    right: 24%;
    margin-top: 190px;
    font-size: 21px;
  }
  
  #products #p1{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    margin-top: 260px;
    width: 53%;
    right: 24%;
    color: #8a8a8a;
  }
  
  #products2{
    width: 60%;
    box-shadow: 0px 3px 0px rgb(237, 237, 237);
    right: 20%;
    top: 560px;
  }
  
  #products #h2{
    width: 53%;
    right: 24%;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: inherit;
    margin-top: 560px;
    font-size: 21px;
  }
  
  #products #p2{
    right: 48px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    margin-top: 630px;
    width: 53%;
    right: 24%;
    color: #8a8a8a;
  }
  
  #products3{
    width: 60%;
    box-shadow: 0px 3px 0px rgb(237, 237, 237);
    right: 20%;
    top: 930px;
  }
  
  #products #h3{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: inherit;
    margin-top: 930px;
    width: 53%;
    right: 24%;
    font-size: 21px;
  }
  
  #products #p3{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    margin-top: 1000px;
    width: 53%;
    right: 24%;
    color: #8a8a8a;
  }

  #products4{
    width: 60%;
    box-shadow: 0px 3px 0px rgb(237, 237, 237);
    right: 20%;
    top: 1300px;
  }
  
  #products #h4{
    right: 48px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: inherit;
    margin-top: 1300px;
    width: 53%;
    right: 24%;
    font-size: 21px;
  }
  
  #products #p4{
    right: 48px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    margin-top: 1370px;
    width: 53%;
    right: 24%;
    color: #8a8a8a;
  }
  
  #pro1{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 22px;
    margin-top: 50px;
    margin-left: 30px;
  }
  
  #pro2{
    font-size: 14px;
    font-family: 'Courier New', Courier, monospace;
    margin-top: 37px;
    margin-left: 30px;
  }
  
  #background{
    width: 100%;
    height: 100%;
  }
  
  
  #products5{
    width: 60%;
    box-shadow: 0px 3px 0px rgb(237, 237, 237);
    right: 20%;
    top: 1670px;
  }
  
  #products #h5{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: inherit;
    margin-top: 1670px;
    width: 53%;
    right: 24%;
    font-size: 21px;
  }
  
  #products #p5{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    margin-top: 1740px;
    width: 53%;
    right: 24%;
    color: #8a8a8a;
  }
}