body {
 font-family: 'Poppins', sans-serif; left: 0;
  z-index: 0; margin: 0; overflow-x: hidden;
  background-color: black; width: 100%;
}

/*Navbar container, links, and dropdown on all pages*/
.navbar { display: flex; flex-direction: row;
  overflow: hidden; height: auto; padding: 0;
  position: fixed; margin-right: 0; border: none;
  background-color: #083587; z-index: 1;
  width: 100%; top: 0; left: 0; margin: 0;
  justify-content: center; align-items: center;
}
.navbar a {
  display: block; float: left;
  font-size: 16px; color: white; text-align: center;
  padding: 8px 12px; text-decoration: none;
  margin-bottom: 0; position: relative;}
.push {position: relative; margin: 0; left: 0.5%; width: auto; height: 3em; cursor: pointer;}
.navbar .icon {display: none;}
.dropdown > .dropbtn {
  font-size: 16px; border: none; padding: 8px 12px;
  outline: none; color: white; margin: 0;
  text-align: center; background-color: inherit;
  font-family: inherit; position: inherit;
}
.dropdown-content {
  display: none; position: fixed;
  background-color: #f9f9f9;
  min-width: 100px;
}
.dropdown-content a {
  float: none; color: black; left: 0;
  padding: 5px; text-decoration: none;
  display: flex; align-items: center;
  flex-direction: column; 
}
.navbar a:not(:first-child):hover, .dropdown:hover .dropbtn {
  background-color: rgb(255, 0, 0);
  cursor: pointer; color: white;
}
.dropdown-content a:hover {background-color: rgb(255, 0, 0); color: black; width: inherit;}
.dropdown:hover .dropdown-content {display: flex;}
.title { letter-spacing: 0.4rem; position: relative; margin-top: 0;
  font-family: 'Grey Qo', cursive; font-weight: bold; margin-bottom: 0;
  margin-right: auto; color: white; left: 1%; font-size: 3em;
}

/*Slideshow background on #home page*/
.img-slider{
  position: fixed; border: 0;
  height: 90vh;  padding: 0;
  width: 100%; z-index: 0;
  overflow-y: auto;
  left: 0; margin-top: 5vh;
}
.bg-slides, bg-slides:after {
  width: auto; height: 933px;
}
.bg-slides li span {
  width: 100%; height: 933px;
  left: 0px; position: absolute;
  top: 0px; color: transparent;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0; z-index: 0;
  -webkit-animation: imageAnimation 42s linear infinite 0s;
  -moz-animation: imageAnimation 42s linear infinite 0s;
  -o-animation: imageAnimation 42s linear infinite 0s;
  -ms-animation: imageAnimation 42s linear infinite 0s;
  animation: imageAnimation 42s linear infinite 0s; 
}
.bg-slides li:nth-child(1) span {
  background-image: url(./media/pic1.jfif);
}
.bg-slides li:nth-child(2) span { 
  background-image: url(./media/pic2.jfif);
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay:6s; 
}
.bg-slides li:nth-child(3) span { 
  background-image: url(./media/pic3.jfif);
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay:12s; 
}
.bg-slides li:nth-child(4) span { 
  background-image: url(./media/pic4.jfif);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay:18s; 
}
.bg-slides li:nth-child(5) span { 
  background-image: url(./media/pic5.webp);
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay:24s; 
}
.bg-slides li:nth-child(6) span { 
  background-image: url(./media/pic6.jfif);
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  -ms-animation-delay: 30s;
  animation-delay:30s; 
}
.bg-slides li:nth-child(7) span { 
  background-image: url(./media/port6.jfif);
  -webkit-animation-delay: 36s;
  -moz-animation-delay: 36s;
  -o-animation-delay: 36s;
  -ms-animation-delay: 36s;
  animation-delay:36s; 
}
@keyframes imageAnimation { 
  0% { opacity: 0; animation-timing-function: ease-in; }
  8% { opacity: 1; animation-timing-function: ease-out; }
  17% { opacity: 1 }
  26% { opacity: 0 }
  100% { opacity: 0 }
} .no-cssanimations .bg-slides li span{
  opacity: 1;
}

/*Exhibition page*/
.exhib {
  display: flex; z-index: -1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 2em; gap: 0.8em;
  padding: 0.7em;
}

/*Fixed/sticky side social media icons on all pages*/
.icons {
  position: fixed;
  top: 50%; left: 0%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.icons a {
  display: block; z-index: 2;
  text-align: center;
  padding: 5px; margin: 0%;
  transition: all 0.3s ease;
  color: white; border-radius: 50%;
  font-size: 20px; margin-bottom: 5px;
}.fa-facebook {
  background: #3B5998;
  color: white;
}.fa-twitter {
  background: #007bb5;
  color: white;
}.fa-instagram {
  background: #125688;
  color: white;
} .fa-youtube {
  background: #bb0000;
  color: white;
}

/*Contacts zone on all pages*/
.footer{  position: fixed;
  display: flex; padding: 0;
  flex-direction: column; width: 100%;
  justify-content: center; left: 0;
  align-items: center; margin-bottom: 5px;
  background-color: black; height: 10vh;
  text-align: center; bottom: 0;
} .footer h4 {color: red; font-size: 3.3em; margin: 0; font-family: 'Kolker Brush', cursive;}
#contact-links > p {
  text-align: center; max-width: 100%;
  font-size: 1rem; list-style: none; margin:0;
  margin-bottom: 5px;
}

/*Setting screen responsivity*/
@media screen and (max-width: 1040px) {
  .navbar a:not(:first-child), .dropdown .dropbtn {display: none;}
  .navbar a.icon {
    float: right;
    display: block;}
  }
@media screen and (max-width: 1040px) {
  .navbar.responsive {position: relative; display: block;}
  .navbar.responsive a {
    float: none;
    display: block; 
    text-align: left;
  }
  .navbar.responsive .dropdown {float: none;}
  .navbar.responsive .dropdown-content {position: relative;}
  .navbar.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
  .dropdown > .dropbtn {padding: 0; padding-left: 12px;}
  .dropdown:hover .dropdown-content {display: block;}
  .icons a {font-size: 17px}
}
@media screen and (max-width: 700px) {  
  .navbar a, .dropbtn > p {font-size: 1em;} .bg-slides, bg-slides:after {height: 800px;}
  .bg-slides li span {height: 800px;} .navbar .push {margin-right: auto;} .footer {height: auto;}
}
@media screen and (max-width: 450px) { #gallery {left: 0;} .title {font-size: 2em;} .footer h4 {font-size: 3em;}
  .left-margin {width: 8%;} iframe {width: 180px; height: 120px;} .bg-slides, bg-slides:after {height: 700px;}
  .bg-slides li span {height: 700px;}
  #contact-links > p {font-size: 0.8rem;} .push {font-size: 0.8em;}
}
}
@media screen and (max-width: 330px) { 
   .left-margin {width: 20px;} .img-slider {margin-top: 10vh;}
  .bg-slides, bg-slides:after {height: 600px;} .bg-slides li span {height: 600px;} 
}