.hidden-content{
  display: none;
}

body{
    background-color:#fff;
    font-family: circe, sans-serif;
}

h1{
 font-size: 30px;
 font-weight: 700;
}

h2{
  font-style: italic;
  font-size: 18px;
  font-weight: 700;
}

h3{
    font-weight: 400;
}

body{
 font-weight:275;
 text-align: justify;
 font-size: 15px;
}


/*Whole side bar fixing it to the left*/
.side-bar{
  position: fixed;
  padding:2%;
  width:16%;
  z-index: 10;
  float: left;
  height: max-content;
}


.vertical-menu a{
    color: black; 
    display: block;
    padding-left:5%;
    padding-top:5%;
    text-decoration: none;
    font-weight: 325;
    font-size: larger;
    width: auto;
}
/*Put transition on element vs. hover effect to NOT HAVE SNAP BACK*/
.architecture-page{
  margin-top: 1%;
  width: fit-content;
  font-weight: 600;
}

.architecture-link{
   transition: ease-in-out 0.6s;
   z-index: 3;
   width: fit-content;
   font-weight: 600;
 }

.architecture-page:hover .architecture-link{
    display: inline-block;
    transform: translateX(33px);
    font-weight: 600;
    z-index: 2;
    width: fit-content;
}

.overlay{
  position:absolute;
  z-index: 1;
  opacity: 0;;
  transition: 0.6s ease-in-out;
  margin-left:-66px;
  margin-top:-24px;
  width: fit-content;
}

/**over appear :D!!!!!**/
.architecture-page:hover  .overlay{
  opacity: 1;
  transform: translateX(66px);
  font-weight: 600;
}

.personal-page{
  margin-top: 1%;
  width: fit-content;
  font-weight: 600;
}

.personal-link{
   transition: ease-in-out 0.6s;
   z-index: 3;
   width: fit-content;
   font-weight: 600;
   white-space: nowrap;
 }

.personal-page:hover .personal-link{
    display: inline-block;
    transform: translateX(33px);
    font-weight: 600;
    z-index: 2;
    width: fit-content;
}

.overlay-1{
  position:absolute;
  z-index: 1;
  opacity: 0;;
  transition: 0.6s ease-in-out;
  margin-left:-66px;
  margin-top:-24px;
  width: fit-content;
}

/**over appear :D!!!!!**/
.personal-page:hover  .overlay-1{
  opacity: 1;
  transform: translateX(66px);
  font-weight: 600;
}



.about-page{
  margin-top: 1%;
  width: fit-content;
  white-space: nowrap;
  transition: 0.6s ease-in-out;
}

.about-link{
  transition: ease-in-out 0.6s;
  z-index: 3;
  width: fit-content;
  font-weight: 600;
  white-space: nowrap;
}

.about-page a{
  color: black;
  transition: ease-in-out 0.6s;
  width: fit-content;
}
.about-page a:hover{
  display: inline-block;
  transform: translateX(66px);
  font-weight: 600;
}

.overlay-2{
  position:absolute;
  z-index: 1;
  opacity: 0;;
  transition: 0.6s ease-in-out;
  margin-left:-66px;
  margin-top:-24px;
  width: fit-content;
}

.about-page:hover .about-link{
  display: inline-block;
  transform: translateX(33px);
  font-weight: 600;
  z-index: 2;
  width: fit-content;
}
.about-page:hover  .overlay-2{
  opacity: 1;
  transform: translateX(66px);
  width: fit-content;
}

.page-bottom{
  height: 100%;
}

.page-bottom:hover .email-arrow{
  opacity: 1;
 }
 
 .email-arrow{
   bottom: 3%;
   position: fixed;
   left:95px;
   margin-bottom: 50px;
   opacity: 0;
   transition: ease-in-out 0.6s;
 }
 
 
 .footer{
     position:fixed;
     left:2%;
     bottom: 3%;
     background-color: white;
     z-index: 10;
 }
 
 .footer a{
     text-decoration: none;
     padding:3%;
     color: black;
     font-size: 20.5px;
     font-weight: 325;
     transition: ease-in-out 0.3s;
   }
 
   .footer a:hover{
     font-weight: 600;
   }
   
.content{
    float: right;
    margin-left: 20%;
    width: 78%;
}

#banner{
    width: 87%;
}

.left{
    float: left;
    width: 30%;
    margin-top: -8px;
    left: 24.5%;
    position: absolute
}

.right{
    float: right;
    width: 42.5%;
    margin-left: 35%;
    position: absolute;
}

#year{
  display: inline-block;
  margin-top: -42px;
  position: absolute;
  right: 20%;
}

#site{
    width: 78%;
    padding:none;
    margin: none;
    margin-left: -2%;
    margin-top: -10px;
}

.site-info{
    margin-top: 80%;
}

#grid{
    width: 26%;
}

.surrounding-info{
    position: absolute;
    margin-left: 24%;
    margin-top: -22%;
    width: 20%;
    float:inline-end;
}

#text{
    margin-top: -15px;
}

img{
  padding-top: 3%;
  padding-left: 3%;
}

#plan-1{
  width: 65%;
}

#plan-2{
  width: 65%;
}

#long{
  width: 65%;
}

#short{
  width: 65%;
}

.mySlides {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
  margin-left: 10%;
  margin-top: 10%;
}


@-webkit-keyframes fade {
  from {opacity: .45}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .45}
  to {opacity: 1}
}

#orthographics{
  margin-left: 13%;
}

#model{
  width: 65%;
  margin-left: 10%;
  display:block;
}

#outside{
  width: 65%;
  margin-left: 10%;
  display: block;
}

#prev{
  width: 66px;
  display: block;
  margin-bottom: 2%;
  float: left;
}

#next{
  width: 70px;
  display: block;
  margin-bottom: 2%;
  float:right;
  padding-right: 11%;
}

/**screen size smaller**/
@media screen and (max-width:1000px){
  .side-bar{
    display: none;
  }
  .content{
    display: none;
  }

  .hidden-content{
    display: block;
    margin: 3% 3% 3% 3%;
  }
  img{
    padding-top: 0%;
    padding-left: 0%;
  }

}

@media screen and (max-width:1200px){
  .page-bottom{
    display: none;
  }
}

.home-button{
  float: left;
  width: 15%;
}

/* Dropdown Button */
.dropbtn {
  background-color: none;
  border: none;
  color:black;
  padding: none;
  font-size: 30px;
  border: none;
  cursor: pointer;
  font-family: circe, sans-serif;
 font-weight: 700;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  background-color: none;
  border: none;
  position: relative;
  display: inline-block;
  float: right;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  border: none;
  background-color: none;
  min-width: 160px;
  z-index: 1;
  font-family: circe, sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin-left: -20px;

}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  background-color: none;
  border: none;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: none;
  border: none;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}