* {
    box-sizing: border-box;
  }
  
@font-face{
    font-family: myfirstface;
    src: url(SutroHeavy.ttf);
  }

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif, myfirstface;
    background-color:rgb(255, 255, 255);
  }

  
  .topnav {
    overflow: hidden;
    background-color: #003a6e;
    box-shadow: 0 4px 8px 0 rgba(78, 70, 70, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  
  
  }



  .topnav a {

    font-weight: bold;
    float: left;
    display: block;
    color: #e1c10e;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #e1c10e ;
    color:#003a6e;
   
  }
  
  .topnav a.active {
    background-color: #e1c10e;
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }

  .topnav {
    top: 0;
    overflow: hidden;
    background-color: #003a6e;
    
  }

 

  .container{
    position:relative;
    width:100%;
  }


.imgrnd {
    border-radius: 10px;
    border: 2px solid #e1c10e;
    transition: .5s ease;
    width: 33.33%;
    height: auto;
    box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: .5s ease;
    backface-visibility: hidden;

  }


  .middle {
    transition: .5s ease;
    opacity: 0;
   width:50%;
   top: -50%;
    
       text-align: center;
  }
  


  .container:hover .imgrnd {
    opacity: 0.3;
  }

  .container:hover .middle {
    opacity: 1;
  }

  .text {
  background-color:#003a6e;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }

  @media screen and (max-width: 600px) {
    .topnav.scrolled a:not(:first-child) {display: none;}
    .topnav.scrolled a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.scrolled.responsive {position: relative;}
    .topnav.scrolled.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.scrolled.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  } 

  footer {

    position:inherit;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: #003a6e;
     color:#e1c10e;
     margin-bottom: 0%;
     padding-bottom: 0%;
  }
  

  .mySlides {display: none;
   }

  .slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
   object-fit: cover;
  
}
.dot {
  
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */


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

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  
  border-right: 16px solid #003a6e;

  border-left: 16px solid #003a6e;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: block;
  text-align: center;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Dark background */
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}