/* Common */
* { margin: 0; padding: 0; }

.sidepanel  { width: 0px; position: fixed; z-index: 1; height: 100%; top: 0; left: 0; background-color: #333333; overflow-x: hidden; transition: 0.5s; padding-top: 60px; }
.sidepanel a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: white; display: block; transition: 0.3s; }
.sidepanel a:hover { color: #f1f1f1; }
.sidepanel .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px;}

/* Navigation Menu */
.navbar { height:100%; width: 700px; display: flex; align-items: center; justify-content: space-between; margin: auto; }
a.menu:link { display:block; line-height: 40px; text-decoration:none; color: #111111; }
a.menu:visited{ color: #111111; text-decoration:none;}
a.menu:hover{ color: #c20909; text-decoration:none;}

/* Footer Area */
header { position: fixed; width: 100%; background-color: white; top: 0; border-bottom: 1px dashed #000000; }
footer { height: 100px; width: 100%; background-color: white; color: black; bottom: 0; border-top: 1px dashed #000000;}

.follow_us {line-height: 50px; margin: 0 auto; }
a.footer_link:link { color: black; text-decoration: none; }
a.footer_link:visited { color: black; text-decoration: none; }
a.footer_link:hover { color: red; text-decoration: none; }

.product_title { font-family: "Arial, sans-serif"; color: #000000; text-decoration: none; }
.heading1 { font-family: "Arial, sans-serif"; text-wrap-mode: nowrap; text-align:center; font-weight: bold; color: #222222; -webkit-text-stroke: 1px #777777; }
.heading2 { font-family: "Arial, sans-serif"; text-wrap-mode: nowrap; text-align:center; }
.menu_button { cursor: pointer; background-color: white; color: black; border: none; }
.footer_col { font-family: 'Times New Roman', Times, serif; text-align: center; }
.footer_text { font-family: 'Times New Roman', Times, serif; text-align: center; }

.about_us_text {font-family: "Arial, sans-serif"; text-decoration: none; text-align: justify}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .logo { width: 15vw;}
  .product-image { width: 30vw; height: 30vw; }
  .product_title { font-size: 3.65vw; padding: 25px; }
  .heading1 { font-size: 6vw;}
  .heading2 { font-size: 3vw;}  
  .header_container { height:18vw; display: flex; grid-template-columns: auto 1fr auto; align-items: center; justify-content: space-between; }
  .products_container {margin-top: 18vw; min-height: 80vw; display: grid; grid-template-columns: auto;}
  .single_product_container {display: grid; grid-template-columns: auto; }
  .single_product_text { font-size: 3.65vw; padding-top: 20px; line-height: 50px; text-align: center;}
  .body_container {margin-top: 18vw; min-height: 120vw;}
  .footer_container { display: grid; grid-template-columns: auto; }
  .footer_col { font-size: 3.65vw; line-height: 50px;}
  .footer_text { font-size: 3.65vw; line-height: 50px; margin: 0 auto; }
  .about_us_text { font-size: 3.65vw; line-height: 40px; padding-left:50px; padding-right:50px; }
  #mobile-header { display: block; }
  #mobile-footer { display: block; }
  #desktop-header { display: none; }
  #desktop-footer { display: none; }
  #tablet-header { display: none; }
  #tablet-footer { display: none; }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .logo { width: 17vw;}
  .product-image { width: 25vw; height: 25vw; }
  .product_title { font-size: 2.75vw; padding: 25px; }
  .heading1 { font-size: 6vw; }
  .heading2 { font-size: 3vw; }
  .header_container { height: 20vw; display: flex; grid-template-columns: auto 1fr auto; align-items: center; justify-content: space-between;}
  .single_product_container {display: grid; grid-template-columns: auto;}
  .single_product_text { font-size: 3vw; padding-top: 20px; line-height: 40px; text-align: center;}
  .products_container { margin-top: 20vw; min-height: 80vw; display: grid; grid-template-columns: auto auto;}
  .body_container { margin-top: 20vw; min-height: 100vw;}
  .footer_container { display: grid; grid-template-columns: auto auto; }
  .footer_col { font-size: 3vw; line-height: 50px; }
  .footer_text { font-size: 3vw; line-height: 50px; margin: 0 auto; }
  .about_us_text { font-size: 3vw; line-height: 40px; padding-left:50px; padding-right:50px; }
  #mobile-header { display: block; }
  #mobile-footer { display: block; }
  #desktop-header { display: none; }
  #desktop-footer { display: none; }
  #tablet-header { display: none; }
  #tablet-footer { display: none; }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .logo { width: 20vw;}
  .product-image { width: 15vw; height: 15vw; }
  .product_title { font-size: 2.5vw; padding: 25px; }
  .heading1 { font-size: 6vw; }
  .heading2 { font-size: 3vw; }
  .header_container { height: 20vw; display: flex; grid-template-columns: auto 1fr auto; align-items: center; justify-content: space-between;}
  .products_container { margin-top: 20vw; min-height: 80vw; display: grid; grid-template-columns: auto auto auto;}
  .single_product_container {display: grid; grid-template-columns: auto; }
  .single_product_text { font-size: 3vw; padding-top: 20px; line-height: 40px; text-align: center;}
  .body_container { margin-top: 20vw; min-height: 80vw;}
  .footer_container { display: grid; grid-template-columns: auto auto; }
  .footer_col { font-size: 3vw; line-height: 50px; }
  .footer_text { font-size: 3vw; line-height: 50px; margin: 0 auto; }
  .about_us_text { font-size: 3vw; line-height: 40px; padding-left:50px; padding-right:50px; }
  #tablet-header { display: block; }
  #tablet-footer { display: block; }
  #mobile-header { display: none; }
  #mobile-footer { display: none; }
  #desktop-header { display: none; }
  #desktop-footer { display: none; }
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .logo { width: 8vw;}
  .product-image { width: 10vw; height: 10vw; }
  .product_title { font-size: 1.2vw; padding: 25px; }
  .heading1 { font-size: 2vw; }
  .heading2 { font-size: 1vw; }
  .header_container { height: 100px; display: flex; grid-template-columns: auto auto auto; align-items: center; justify-content: space-between;}
  .products_container { margin-top: 100px; min-height: 600px; display: grid; grid-template-columns: auto auto auto;}
  .single_product_text { font-size: 1.2vw; padding-top: 20px; line-height: 50px; text-align: center;}
  .single_product_container {display: grid; grid-template-columns: auto;}
  .body_container { margin-top: 100px; min-height: 600px;}
  .footer_container { display: grid; grid-template-columns: auto auto auto; }
  .footer_col { font-size: 1.2vw; font-weight: bold; line-height: 50px; }
  .footer_text { font-size: 1.2vw; line-height: 50px; margin: 0 auto; }
  .about_us_text { font-size: 1.2vw; line-height: 50px; padding-left:50px; padding-right:50px; }
  #desktop-header { display: block; }
  #desktop-footer { display: block; }
  #tablet-header { display: none; }
  #tablet-footer { display: none; }
  #mobile-header { display: none; }
  #mobile-footer { display: none; }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .logo { width: 8vw; }
  .product-image { width: 10vw; height: 10vw; }
  .product_title { font-size: 1vw; padding: 25px; }
  .heading1 { font-size: 2vw; }
  .heading2 { font-size: 1vw; }
  .header_container { height: 120px; display: flex; grid-template-columns: auto auto auto; justify-content: space-between; }
  .products_container { margin-top: 120px; min-height: 600px; display: grid; grid-template-columns: auto auto auto auto; }
  .single_product_container {display: grid; grid-template-columns: auto;}
  .single_product_text { font-size: 1vw; padding-top: 20px; line-height: 50px; text-align: center;}
  .body_container { margin-top: 120px; min-height: 600px;}
  .footer_container { display: grid; grid-template-columns: auto auto auto; }
  .footer_col { font-size: 1vw; font-weight: bold; line-height: 50px; }
  .footer_text { font-size: 1vw; line-height: 50px; margin: 0 auto; }
  .about_us_text { font-size: 1vw; line-height: 50px; padding-left:50px; padding-right:50px; }
  #desktop-header { display: block; }
  #desktop-footer { display: block; }
  #tablet-header { display: none; }
  #tablet-footer { display: none; }
  #mobile-header { display: none; }
  #mobile-footer { display: none; }
}