@font-face {   /*  font change   */
  font-family: "Squad Regular";  
  src: url("../font/Squad-Regular");
}

* {
  font-family: Squad regular, Sans-serif, Trebuchet MS;  /*  Setting font to all writing   */
  overflow-x: hidden;
}

/*just coloring */
body {
  background: #f5f5f5;
}

table{
  color: #333333;
}

/* Style page content */
.main {
  margin-left: 16%;
  /* Same as the width of the sidebar */
  margin-right: 16%;
  margin-top: 1.5%;
  padding: 0%;
  border-top: solid black 1px;
}

.main p {
  font-size: 105%;
  color: #333333;
}

.main h1, h2 {
  color: #595959;
}


#sidenav {
  height: 100%;
  /* Full-height */
  width: 14%;
  /* Setting the width of the sidebar */
  position: fixed;
  /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1;
  /* Stay on top */
  top: 0;
  /* Stay at the top */
  left: 0;
  background-color: #e3e3e3;
  /* color */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 5.90%;
  border-right: 1px solid #a6a6a6;
}

/* The navigation menu links */
#sidenav a {
  padding: 0px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #333333;
  display: block;
  padding-top: 5%;
  /*border-top: solid 1px black;*/
  /*border: 0.1px solid black;*/
}

/* When you mouse over the navigation links, change their color */
#sidenav a:hover {
  color: #f1f1f1;
  background-color: grey;
  border-left: solid 4px grey;
  border-right: 6px solid #0099cc;
}

.logob{  /*  Setting logo at the bottom of the navbar   */
  position: fixed;
  bottom: 0;
  width: 13.5%;
  padding-bottom: 0.2%;
}

#topinfo {
  height: 8.5%;
  /* Full-height */
  width: 100%;
  /* Setting the width of the sidebar */
  position: fixed;
  /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1;
  /* Stay on top */
  top: 0;
  /* Stay at the top */
  left: 0;
  background-color: #262626;
  /* color */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  overflow-y: hidden;
  padding-top: 0%;

  -webkit-box-shadow: 1px 1px 10px #262626;
          box-shadow: 1px 1px 10px #262626;
}

#topinfo a {
  text-decoration: none;
  color: #f2f2f2;
  font-size: 88%;
}

#topinfo a:hover {
  color: #0099cc;  /* #666666 */
}

.branding {
  padding-right: 1%;
  padding-left: 1%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#rdvnav {
  height: auto;
  /* auto-height */
  width: 10%;
  /* Setting the width of the rdvbox */
  position: absolute;
  /* Rdv box */
  top: 0;
  /* Stay at the top */
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  margin-top: 21.5%;
  margin-right: 2.5%;
  padding: 0.2%;
}

#rdv img {
  max-width: 80%;
  padding-bottom: 5%;
  background-color: white;
}

#rdvlink a {
  text-decoration: none;
  font-size: 160%;
  color: #ffffff;
}

#rdvlink {
  border: solid 1px #737373;
  padding: 2.5%;
  background-color: #737373;
}

#rdvlink:hover {
  background-color: #999999;
}

#rdvmap {
  height: auto;
  /* auto-height */
  width: 10%;
  /* Setting the width of the rdvbox */
  position: absolute;
  /* Rdv box */
  top: 0;
  /* Stay at the top */
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  margin-top: 8%;
  margin-right: 2.5%;
  padding: 0.2%;
}

#mapbox img {
  max-width: 80%;
  padding-bottom: 5%;
}

#mapplan a {
  text-decoration: none;
  font-size: 160%;
  color: #ffffff;
}

#mapplan {
  border: solid 1px #737373;
  padding: 2.5%;
  background-color: #737373;
}

#mapplan:hover {
  background-color: #999999;
}

#overnav {
  height: 100%;
  /* Full-height */
  width: 14%;
  /* Setting the width of the sidebar */
  position: fixed;
  /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1;
  /* Stay on top */
  top: 0;
  /* Stay at the top */
  left: 0;
  background-color: #e3e3e3;
  /* color */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 19.90%;
  border-right: 1px solid #a6a6a6;
}

/* The navigation menu links */
#overnav a {
  padding: 6px 8px 6px 8px;
  text-decoration: none;
  color: #333333;
  display: block;
  padding-top: 5%;
  /*border-top: solid 1px black;*/
  /*border: 0.1px solid black;*/
}

/* When you mouse over the navigation links, change their color */
#overnav a:hover {
  color: #f1f1f1;
  background-color: grey;
  border-left: solid 4px grey;
}
 /* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 2px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  margin-left: 30px;
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 40px;
  right: 15px;
  font-size: 60px;
}



/* On smaller screens, where width is less than xxxPx, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-width: 1800px) {
  #rdvnav {
    margin-top: 22%;
  }
  #rdvmap {
    margin-top: 8%;
  }
}

@media screen and (max-width: 1450px) {
  #rdvnav {
    margin-top: 26%;
  }
  #rdvmap {
    margin-top: 10%;
  }
}

@media screen and (max-width: 1150px) {
  #rdvnav {
    margin-top: 29%;
  }
  #rdvmap {
    margin-top: 12%;
  }
}

@media screen and (max-width: 650px) {
  #rdvnav {
    margin-top: 33%;
  }
  #rdvmap {
    margin-top: 14%;
  }
}

@media screen and (max-width: 550px) {
  #rdvnav {
    margin-top: 48%;
  }
  #rdvmap {
    margin-top: 22%;
  }
}

@media screen and (max-width: 1200px) {
  #sidenav {
    padding-top: 8%;
  }
  #sidenav a {
    font-size: 100%;
  }
  .main {
    padding-top: 6%;
  }
  #topinfo {
    padding-top: 1%;
  }
  #topinfo a {
    font-size: 100%;
  }
  #rdvlink a {
    font-size: 160%;
  }
  #mapplan a {
    font-size: 160%;
  }

}

@media screen and (max-width: 1100px) {
  #sidenav {
    padding-top: 10%;
  }
  #sidenav a {
    font-size: 90%;
  }
  .main {
    padding-top: 6%;
  }
  #topinfo {
    padding-top: 1%;
  }
  #topinfo a {
    font-size: 90%;
  }
  .branding {
    margin-top: -1%;
  }
  #rdvlink a {
    font-size: 140%;
  }
  #mapplan a {
    font-size: 140%;
  }
}

@media screen and (max-width: 1000px) {
  #sidenav {
    padding-top: 10%;
  }
  #sidenav a {
    font-size: 90%;
  }
  .main {
    padding-top: 6%;
  }
  #topinfo {
    padding-top: 1%;
  }
  #topinfo a {
    font-size: 80%;
  }
  .branding {
    margin-top: -1%;
  }
  #rdvlink a {
    font-size: 120%;
  }
  #mapplan a {
    font-size: 120%;
  }
}

@media screen and (max-width: 900px) {
  #sidenav {
    padding-top: 15%;
  }
  #sidenav a {
    font-size: 80%;
  }
  .main {
    padding-top: 6%;
  }
  #topinfo {
    padding-top: 1%;
  }
  #topinfo a {
    font-size: 70%;
  }
  .branding {
    margin-top: -2%;
  }
  #rdvlink a {
    font-size: 110%;
  }
  #mapplan a {
    font-size: 110%;
  }
}

@media screen and (max-width: 750px) {
  #sidenav {
    padding-top: 13%;
  }
  #sidenav a {
    font-size: 78%;
  }
  .main {
    padding-top: 6%;
  }
  #topinfo {
    padding-top: 1%;
  }
  #topinfo a {
    font-size: 60%;
  }
  .branding {
    margin-top: -2.5%;
  }
  #rdvlink a {
    font-size: 90%;
  }
  #mapplan a {
    font-size: 90%;
  }
}

@media screen and (max-width: 650px) {
  #sidenav {
    padding-top: 15%;
  }
  #sidenav a {
    font-size: 70%;
  }
  .main {
    padding-top: 6%;
  }
  #topinfo {
    padding-top: 1%;
  }
  #topinfo a {
    font-size: 50%;
  }
  .branding {
    margin-top: -3%;
  }
  #rdvlink a {
    font-size: 80%;
  }
  #mapplan a {
    font-size: 80%;
  }
}

@media screen and (max-width: 550px) {
  #sidenav {
    padding-top: 17%;
    display: none;
  }
  #sidenav a {
    font-size: 50%;
  }
  .main {
    padding-top: 6%;
  }
  #topinfo {
    padding-top: 1%;
  }
  #topinfo a {
    font-size: 40%;
  }
  .branding {
    margin-top: -5%;
  }
  #rdvlink a {
    font-size: 70%;
  }
  #mapplan a {
    font-size: 70%;
  }
}

@media screen and (max-width: 500px) {
  #sidenav {
    padding-top: 20%;
  }
  #sidenav a {
    font-size: 40%;
  }
  .main {
    padding-top: 6%;
  }
  #topinfo {
    padding-top: 1%;
  }
  #topinfo a {
    font-size: 40%;
  }
  .branding {
    margin-top: -5%;
  }
  #rdvlink a {
    font-size: 60%;
  }
  #mapplan a {
    font-size: 60%;
  }
}

@media screen and (max-width: 450px) {
  #sidenav {
    padding-top: 20%;
  }
  #sidenav a {
    font-size: 40%;
  }
  .main {
    padding-top: 6%;
  }
  #topinfo {
    padding-top: 1%;
  }
  #topinfo a {
    font-size: 42%;
  }
  #rdvlink a {
    font-size: 50%;
  }
  #mapplan a {
    font-size: 50%;
  }
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 55px;
    right: 35px;
  }
}

@media screen and (max-width: 400px) {
  #sidenav {
    padding-top: 20%;
  }
  #sidenav a {
    font-size: 40%;
  }
  .main {
    padding-top: 8%;
  }
  #topinfo {
    padding-top: 1%;
  }
  #topinfo a {
    font-size: 34%;
  }
  .branding {
    margin-top: -7%;
  }
  #rdvlink a {
    font-size: 50%;
  }
  #mapplan a {
    font-size: 50%;
  }
}

@media screen and (max-width: 350px) {
  #sidenav {
    padding-top: 20%;
  }
  #sidenav a {
    font-size: 40%;
  }
  .main {
    padding-top: 8%;
  }
  #topinfo {
    padding-top: 1%;
  }
  #topinfo a {
    font-size: 22%;
  }
  .branding {
    margin-top: -8%;
  }
  #rdvlink a {
    font-size: 40%;
  }
  #mapplan a {
    font-size: 40%;
  }
}