@media (min-width: 1025px)
{
	  .openbtn, .closebtn
	  {
		  display: none;
	  }
	  /* This will remove bullets from all list items, including sub lists */
	  ul
	  {
		  list-style-type: none;
	  }
	  nav > ul
	  {
		  /* this will keep menu items at the center of the menu bar */
		  text-align: center;
	  }
	  nav > ul > li
	  {
		  /* display will show menu items in a line */
		  display: inline-block;
	  }
	  nav > ul > li > a
	  {
		  color: black;
		  text-decoration: none;
	  }
	  nav > ul > li > a:hover
	  {
		  color: red;
	  }
	  .col-lg-4
	  {
		  padding: 10px 10px 10px 10px;
	  }
	  .dropdown-content
	  {
		  /* sub-menu items will not show initially */
		  display: none;
		  position: absolute;
	  }
	  .dropdown-content a
	  {
		  text-decoration: none;
		  /* this display will keep the sub menu items vertical */
		  display: block;
		  text-align: left;
		  padding: 10px 15px 10px 10px;
		  color: black;
		  background-color: white;
	  }
	  .dropdown:hover .dropdown-content
	  {
		  display: block;
		  text-align: left;
		  z-index: 9999;
		  margin-top: 10px;
	  }
	  .dropdown-content a:hover
	  {
		  color: white;
		  background-color: brown;
	  }
	  .caret
	  {
		  color: black;
		  font-size: 10px;
	  }
}

@media (min-width: 768px) and (max-width: 1024px)
{
	  .openbtn, .closebtn
	  {
		  display: none;
	  }
	  /* This will remove bullets from all list items, including sub lists */
	  ul
	  {
		  list-style-type: none;
	  }
	  nav > ul
	  {
		  /* this will keep menu items at the center of the menu bar */
		  text-align: center;
	  }
	  nav > ul > li
	  {
		  /* display will show menu items in a line */
		  display: inline-block;
	  }
	  nav > ul > li > a
	  {
		  color: black;
		  text-decoration: none;
	  }
	  nav > ul > li > a:hover
	  {
		  color: red;
	  }
	  .col-lg-4
	  {
		  padding: 10px 10px 10px 10px;
	  }
	  .dropdown-content
	  {
		  /* sub-menu items will not show initially */
		  display: none;
		  position: absolute;
	  }
	  .dropdown-content a
	  {
		  text-decoration: none;
		  /* this display will keep the sub menu items vertical */
		  display: block;
		  text-align: left;
		  padding: 10px 15px 10px 10px;
		  color: black;
		  background-color: white;
	  }
	  .dropdown:hover .dropdown-content
	  {
		  display: block;
		  text-align: left;
		  z-index: 9999;
		  margin-top: 10px;
	  }
	  .dropdown-content a:hover
	  {
		  color: white;
		  background-color: brown;
	  }
	  .caret
	  {
		  color: black;
		  font-size: 10px;
	  }
}

@media (max-width: 767px)
{
	  ul
	  {
		  /* This will remove bullets */
		  list-style-type: none;
	  }
	  .overlay
	  {
		  height: 100%;
		  width: 0;
		  top: 0;
		  left: 0;
		  /* Stay in place */
		  position: fixed;
		  /* Sit on top */
		  z-index: 1;
		  /* disable horizontal scroll */
		  overflow-x: hidden;
		  /* black background with opacity 1 */
		  background-color: rgba(0, 0, 0, 1);
		  /* 0.5 second sliding effect */
		  transition: 0.5s;
	  }
	  .overlay-content
	  {
		  /* 25% from top */
		  top: 25%;
		  width: 100%;
		  text-align: center;
		  position: relative;
		  /* 30px top margin to avoid conflict with close button */
		  margin-top: 30px;
	  }
	  .overlay a
	  {
		  /* display block instead of inline */
		  display: block;
		  font-size: 36px;
		  padding: 8px;
		  color: #818181;
		  text-decoration: none;
		  transition: 0.3s;
	  }
	  .overlay a:hover, .overlay a:focus
	  {
		  color: #f1f1f1;
	  }
	  /* position the close button */
	  .overlay .closebtn
	  {
		  top: 20px;
		  right: 45px;
		  font-size: 60px;
		  position: absolute;
	  }
	  /* For sub menu */
	  .overlay1
      {
		  height: 100%;
		  width: 0;
		  position: fixed; /* stay in place */
		  z-index: 1;   /* sit on top */
		  top: 0;
	      left: 0;
	      background-color: rgba(0,0,0,1); /* black back ground color with opacity */
	      overflow-x: hidden;  /* disable horizontal scroll */
	      transition: 0.5s; /* 0.5 second sliding effect */
      }
      .overlay-content1
      {
		  position: relative;
	      top: 25%; /* 25% from top */
	      width: 100%;
	      text-align: center;
	      margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
      }
      .overlay1 a
      {
		  display: block;  /* display block instead of inline */
	      font-size: 36px;
	      padding: 8px;
	      color: #818181;
	      text-decoration: none;
	      transition: 0.3s;
      }
      .overlay1 a:hover, .overlay1 a:focus
      {
		  color: #f1f1f1;
      }
      /* position the close button */
      .overlay1 .closebtn
      {
		  position: absolute;
	      top: 20px;
	      right: 45px;
	      font-size: 60px;
      }
	  /**********************/
	  .overlay2
      {
		  height: 100%;
		  width: 0;
		  position: fixed; /* stay in place */
		  z-index: 1;   /* sit on top */
		  top: 0;
	      left: 0;
	      background-color: rgba(0,0,0,1); /* black back ground color with opacity */
	      overflow-x: hidden;  /* disable horizontal scroll */
	      transition: 0.5s; /* 0.5 second sliding effect */
      }
      .overlay-content2
      {
		  position: relative;
	      top: 25%; /* 25% from top */
	      width: 100%;
	      text-align: center;
	      margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
      }
      .overlay2 a
      {
		  display: block;  /* display block instead of inline */
	      font-size: 36px;
	      padding: 8px;
	      color: #818181;
	      text-decoration: none;
	      transition: 0.3s;
      }
      .overlay2 a:hover, .overlay2 a:focus
      {
		  color: #f1f1f1;
      }
	  .overlay2 .closebtn
	  {
		  position: absolute;
		  top: 20px;
		  right: 45px;
		  font-size: 60px;
	  }
	  /**********************/
	  /**********************/
	  .overlay3
      {
		  height: 100%;
		  width: 0;
		  position: fixed; /* stay in place */
		  z-index: 1;   /* sit on top */
		  top: 0;
	      left: 0;
	      background-color: rgba(0,0,0,1); /* black back ground color with opacity */
	      overflow-x: hidden;  /* disable horizontal scroll */
	      transition: 0.5s; /* 0.5 second sliding effect */
      }
      .overlay-content3
      {
		  position: relative;
	      top: 25%; /* 25% from top */
	      width: 100%;
	      text-align: center;
	      margin-top: 30px;  /* 30px top margin to avoid conflict with close button */
      }
      .overlay3 a
      {
		  display: block;  /* display block instead of inline */
	      font-size: 36px;
	      padding: 8px;
	      color: #818181;
	      text-decoration: none;
	      transition: 0.3s;
      }
      .overlay3 a:hover, .overlay3 a:focus
      {
		  color: #f1f1f1;
      }
	  .overlay3 .closebtn
	  {
		  position: absolute;
		  top: 20px;
		  right: 45px;
		  font-size: 60px;
	  }
	  /**********************/
}