/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: "font";
  src: url(font/MorrisRomanBlack.ttf);
}

body {
height:100vh;
    width:100vw;
    margin:0px;
    background-color:black;
    

}
ul{
  padding-top:6em;

  
  
  }
ul li{
  list-style-type: none; /* Remove bullets */
  padding-top:10px;/* Remove padding */
  margin: 0; /* Remove margins */
  }
  
  
 ul li a{
  text-decoration:none;
margin-left:-10px;
  font-size:25px;
  height: 70px;
  width: 120px;
  

  } 
ul li a:hover{
  text-decoration:none;
  background-image: url('');

  }
  
  
a{text-decoration: none;color:white;}

a:hover{
  color:white;
  text-shadow: 2px 2px 2px #FFFFFF;
  
  }

#content {
  position: relative;
  margin:auto;
  font-family: "font",Verdana;
  background-image: url(img/background.png);
  background-position: center center;
  background-repeat: no-repeat;
  height:100%;
  width:90%;
  object-fit:cover;
  display:block;
    
}
#heroes {
  position: relative;
  margin:auto;
  font-family: "font",Verdana;
  background-image: url(img/backgroundheroes.png);
  background-position: center center;
  background-repeat: no-repeat;
  height:100%;
  width:90%;
  object-fit:cover;
  display:block;
    
}
#centermenu{
  margin:auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color:white;
  font-size:15px;
  }  
  
#menurad{
 padding:7em;

  }
#menuleft {
  position:absolute;
  background-image: url(img/fondgrey.png);
  color:white;
  width:150px;
  height:100%;
  margin-left:1em;

  }  
  #menuframe{
    width:200px;
 position:fixed;
   height:100%;
  margin-left:12em;
  }
  
#contentframe{
  
   position:fixed;
   width: 60%;
   height:100%;
  margin-left:22em;
  
}


   #map {
  margin-top:2%;
  width:500px;
  height:500px;
  }
  #map_cont {
  background-image:url(img/map_mfd.jpg);
  width:100%;
  height:100%;
  }
  
#footer {
  position: fixed;
    bottom: 0;
    width: 90%;
    font-family:verdana;
        color:white;
        font-size:12px;
    
}
  .barup{
 
    background-image: url(img/fondup.png);
  height:30px;
  background-repeat: repeat-x;
z-index:3;
    
    }
      .life{
        position:relative;
    padding-bottom:2%;   
    background-image: url(img/fond.png);
  height:2em;
  padding-left:10em;
  vertical-align:top;
 
    }
    .foot {position: relative;float:right;padding-right:1em;}
 
.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-color:black;border-style:solid;border-width:0px;font-size:18px;
  overflow:hidden;padding:0px 0px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:0px;font-size:18px;
  font-weight:normal;overflow:hidden;padding:0px 0px;word-break:normal;}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top;}
.tg .tg-c3ow2{border-color:inherit;text-align:center;vertical-align:top;height:120px;background-image:url('img/arrowup.png');}
.tg .tg-c3ow2 a:hover{background-image:url('img/arrowup_hover.png');}
.tg .tg-lqy6{text-align:right;vertical-align:top}
.tg .tg-0lax{text-align:left;}
.tg .tg-dvpl{border-color:inherit;text-align:right;vertical-align:top}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}

#galleryco{
      margin:auto;
      max-width:900px;
      padding-left:50px;
      
      
      }
    .grid {
  position: relative;
  display: grid;
  height: 100vh;
  
}

.grid::before,
.grid::after {
  content: "";
  position: absolute;
  background: #333;
  z-index: 1;
}

.grid::before {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
}

.grid::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
}

.grid .col {
  position: relative;
  grid-area: 1/1;
  cursor: pointer;
  transition: clip-path 0.5s;
}

.grid .col-1 {
  clip-path: inset(0 50% 50% 0);
}

.grid .col-2 {
  clip-path: inset(0 0 50% 50%);
}

.grid .col-3 {
  clip-path: inset(50% 50% 0 0);
}

.grid .col-4 {
  clip-path: inset(50% 0 0 50%);
}

.grid .col figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  margin: 0;
  transition: all 0.5s;
}

.grid .col-2 figure {
  left: 50%;
}

.grid .col-3 figure {
  top: 50%;
}

.grid .col-4 figure {
  top: 50%;
  left: 50%;
}

.grid .col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.grid .col figcaption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 5px;
  width: max-content;
  max-width: 95%;
  line-height: 1;
  color: white;
  background: #ff0054;
  text-align: center;
  opacity: 0;
  transition-property: opacity;
}

.grid .col.animate-col {
  clip-path: inset(0);
}

.grid .col.animate-col figure {
  top: 0;
  left: 0;
  width: 90%;
  height: 90%;
}

.grid .col.animate-caption figcaption {
  opacity: 1;
  transition-duration: 0.3s;
}