body {
  background-color:#EFF2F5;
  height: 100%;
}

html {
  height: 100%;
  font-family: 'EB Garamond', serif;
} 

h1{
  font-family: 'EB Garamond', serif;
  color: #003466;
  text-align: center;
  font-style: italic;
}

h2 {
  font-family: 'EB Garamond', serif;
  color: #003466;
  text-align: center;
  font-size: 25px;
} 

p1 {
  font-family: 'Zen Kurenaido', sans-serif;
  color: #003466;
  text-align: center;
  margin-bottom: 50px;
  font-size: 20px;
  margin-top: -10px;

} 

p2 {
  color: #003466;
  font-family: 'Zen Kurenaido', sans-serif;
  text-align: center;
  font-size: 18px;
  font-style: normal;
}


p {
  color: #003466;
  font-family: 'Zen Kurenaido', sans-serif;
  text-align: center;
  float: right;
  font-size: 20px;
  margin-top: -40px;
}

ul {
  color: #003466;
  font-family: 'EB Garamond', serif;
  background-color: rgba(249, 227, 197, 0.6);
  border-radius: 10px;
}

table {
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}

th {
  background-color: rgba(249, 227, 197, 0.6);
  border-radius: 10px;
  color: #003466;
  position: relative;
  font-weight: 900;
  font-family: 'EB Garamond', serif;
  font-size: 18px;
  font-style: normal;
  padding: 5px;

}
 
td {
  padding-right: 10px;
  padding-left: 10px;
  background-color: rgba(249, 227, 197, 0.6);
  border-radius: 10px;
  color: #003466;
  position: relative;
  font-weight: 900; 
  font-family: 'EB Garamond', serif;
  font-size: 18px;

}

dt { 
  padding-bottom: 10px;
  padding-top: -3px;
  text-align: center;
  position: relative;
  font-style: normal;
}



* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}


.header {
  font-size: 60px;
  margin-top: -80px;
  text-shadow: 2px 2px 12px #dbcab4;

}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-top: 60px;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #003466;
}

.menu li:hover {
  background-color: #0099cc;
}

.picture {
    margin-left: 30px;
  margin-right: 30px;
}

.aside {
  color: #003466;
  text-align: center;
  font-size: 20px;
  margin-left: 5px;

  margin-top: -50px;
}

.footer {

  color: #003466;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  font-style: italic;
  background-color: rgba(0, 52, 102, 0.8);
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
text-decoration: none;

}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #f9e3c5;
  display: block;
  transition: 0.3s;

}

.sidenav a.active {
  background-color: #f9e3c5;
  color: #003466;
}
  

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  background-color: rgba(249, 227, 197, 0.8);
  color: #003466;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 35px;
  margin-left: 50px;
  color:#f9e3c5;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 15px;
  position: fixed;
  top: 0;
  left: 0px;
  color:#f9e3c5;
  background-color: rgba(0, 52, 102, 0.8);
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}



.hero-image {
  background-image: url("logo.jpg");
  height: 30%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  width: 100%;
  margin-top: -10px;
}  


.fa-caret-down {
   margin-left:97px;

   float: right;
}

.dropdown-container {
  display: none;
  background-color: #60809F;

  color: #003466;
}

.dropdown-btn:hover {
  background-color: #f9e3c5;
  color: #003466;
}

  .dropdown-btn {
  padding: 8px 8px 8px 0;
  font-style: italic;
  text-decoration: none;
  text-align: center;
  font-size: 25px;
  color: #f9e3c5;
  display: inline-block;
  transition: 0.3s;
  border: none;
  font-family: 'EB Garamond', serif;
  background-color: transparent;
  width: 100%;
}


.navbar {
  position: static;
  font-style: italic;

  margin-bottom: -20px;

  font-family: 'EB Garamond', serif;
  text-align: center;
  background: rgba(0, 52, 102, 0.8);

  overflow: hidden;
  width: 100%;
  color: #f9e3c5;
  padding: 14px;
  border: 4px solid #f9e3c5;
  box-shadow:
    inset 0 0 0 4px #60809F;

}

/* Style the links inside the navigation bar */
.navbar a {
  font-style: italic;
  color: #f9e3c5;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  font-size: 18px;
  overflow: hidden;
  margin-top: -5px;

}

/* Change the color of links on hover */
.navbar a:hover {
  background-color: rgba(249, 227, 197, 0.8);
  color: #003466;
}

/* Add a green background color to the active link */
.navbar a.active {
  background-color: #f9e3c5;
  color: #003466;
}

/* Hide the link that should open and close the navbar on small screens */
.navbar .icon {
  display: none;
  margin-top: -5px;
}

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;

  }
}

/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .navbar.responsive a.icon {

    display:block;


  }
  .navbar.responsive a {
    float: none;
    display:block;
    text-align: center;

  }

}
}

.myImg {
  border: 1px solid #ddd; 
  border-radius: 4px;
  padding: 5px;
  width: 150px;
  cursor: pointer;
  transition: 0.3s;
}

.myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0, 52, 102, 0.8);
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 900px;
  height: 800px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f9e3c5;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #60809F;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
    height: auto;
  }
}

@media only screen and (max-width: 700px){
  .picture {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}



footer {
    bottom: 0;
    position: relative;


}
.copyright{
    float: left;
    padding-top:20px;
    padding-bottom: 10px;
}

.creator {
   float: right;
    padding-top:20px;
    padding-bottom: 10px;
}

.image {
  display: none
}

@media only screen and (max-width: 700px){
  .image {
     display: block;
     

  }

}


@media only screen and (max-width: 700px){
   .logo {
    display: none;
  }

  .header {
     font-size: 30px;
     margin-top: 30px;
}
}