/* button styles */

 .lang_button {
   width: 120px;
   height: 30px;
   margin: 0px;
   padding: 0px;
   border: 2px solid green;
   border-radius: 15px;
   background-color: LemonChiffon;
   font-size: 16px;
   font-weight: bold;
   color: DarkOliveGreen;
   box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.6);
   transition-duration: 0.5s;
   vertical-align: middle;
   }
 .lang_button:hover {
   cursor: pointer;
   background-color: LightGreen;
   }

 .menu_button {
   width: 50px;
   height: 30px;
   margin: 0px;
   padding: 0px;
   border: 2px solid green;
   border-radius: 15px;
   background-color: LemonChiffon;
   font-size: 16px;
   font-weight: bold;
   color: DarkOliveGreen;
   box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.6);
   transition-duration: 0.5s;
   vertical-align: middle;
   }
 .menu_button:hover {
   cursor: pointer;
   background-color: LightGreen;
   }

/* menu styles */

 .menulist {
   margin: 0px;
   padding: 0px;
   }
 .menuitem {
   margin: 3px;
   padding: 2px;
   border: 1px solid #d4d4d4;
   border-radius: 4px;
   background-color: PaleGoldenRod;
   font-weight: bold;
   color: DarkOliveGreen;
   list-style-type: none;
   transition-duration: 0.5s;
   }
 .menuitem:hover {
   color: Green;
   background-color: LightGoldenRodYellow;
   cursor: pointer;
   box-shadow: 0px 0px 5px lightblue;
   }

/* menu images styles */

 .images {
   margin: 4px;
   padding-top: 4px;
   border-top: 1px solid DarkGray;
   border-bottom: 1px solid DarkGray;
   text-align: center;
   }
 .image {
   width: 80px; 
   transition: box-shadow 0.5s ease;
   }
 .image:hover {
   box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.6);
   cursor: pointer;
   }

 .icon {
   height: 40px;
   transition: box-shadow 0.5s ease;
   }
 .icon:hover {
   box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.6);
   cursor: pointer;
   }

 .ico {
   height: 20px;
   vertical-align: middle;
   }

 #deon {
   display: none;
   }

/* flex div & div styles */

#menu_div {
  margin: 0px;
  padding: 0px;
  border: 2px solid Green;
  border-radius: 4px;
  background-color: Ivory;
  flex-grow: 0;
  flex-shrink: 0;
  display: none;

  position: absolute;
  left: 4px;
  top: 80px;
  z-index: 3;

  }

#top_div {
  margin: 4px;
  padding: 3px;
  border: 0px solid red;
  display: block;
  }

#flex_div {
  display: flex;
  flex-direction: column;
  }
#left_div {
  margin: 4px;
  padding: 3px;
  border: 0px solid red;
  background-color: PaleGoldenRod;
  flex-grow: 5;
  display: none;
  }
#center_div {
  margin: 4px;
  padding: 3px;
  border: 0px solid red;
  background-color: LemonChiffon;
  flex-grow: 10;
  display: block;
  }
#right_div {
  margin: 4px;
  padding: 3px;
  border: 0px solid red;
  background-color: PaleGoldenRod;
  flex-grow: 5;
  display: none;
  }

@media screen and (min-width: 600px) and (max-width: 900px) {
  #flex_div {flex-direction: row;}
  #menu_div {display: none;}
  #left_div {display: none;}
  #center_div {display: block;}
  #right_div {display: block;}
  }

@media screen and (min-width: 901px) {
  #flex_div {flex-direction: row;}
  #menu_div {display: none;}
  #left_div {display: block;}
  #center_div {display: block;}
  #right_div {display: block;}
  #deon {display: inline;}
  }