@font-face {
  font-family: "Dukas";
  src: url(../Fonts/DukasCFSemiBold-Regular.ttf);
}
@font-face {
  font-family: "Ral";
  src: url(../Fonts/Raleway-Bold.ttf);
}
@font-face {
  font-family: "Gotu";
  src: url(../Fonts/Gotu-Regular.ttf);
}
/* gallery */
#gallery {
  flex:21;
  margin: 5px;
  margin-top: 0;
  position: relative;
  display: grid;
  height: calc(100vh);
  grid-template: repeat(12, 1fr)/repeat(12, 1fr);
  grid-gap: 0.5em;
}
#gallery.hov .gallery__image,
#gallery:hover .gallery__image {
  filter: grayscale(1);
}
#gallery .gallery__image {

  transition: 0.3s;
}
#gallery .gallery__link.hov .gallery__image,
#gallery .gallery__link:hover .gallery__image {
  filter: grayscale(0);
  transform: scale(1.1);
}
#gallery img:hover div{
  filter: grayscale(0);
}
@media (max-width: 800px) {
  #gallery {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
  }
  #gallery > div {
    width: 78%;
    margin: 1%;
  }
  #gallery > div > a {
    opacity: 1!important;
    font-size: 2.2em !important;
  }
}
@media (max-width: 800px) and (max-width: 350px) {
  #gallery > div {
    width: 98%;
  }
  #gallery > div > a {
    opacity: 1;
    font-size: 2.2em !important;
    mix-blend-mode: normal!important;
    background-color: transparent!important;
  }
}
/* #gallery > div:nth-child(6n+1) {
  grid-column: span 2;
  grid-row: span 2;
}
#gallery > div:nth-child(2) {
  grid-column: span 3;
  grid-row: span 3;
}
#gallery > div:nth-child(4) {
  grid-column: span 1;
  grid-row: span 2;
} */
#gallery > div:nth-child(n) {
  grid-column: span 4;
  grid-row: span 4;
}
#gallery > div:nth-child(7) {
  grid-column: span 3;
  grid-row: span 3;
}
#gallery > div:nth-child(8) {
  grid-column: span 3;
  grid-row: span 3;
}
#gallery > div:nth-child(9) {
  grid-column: span 3;
  grid-row: span 3;
}
#gallery > div:nth-child(10) {
  grid-column: span 3;
  grid-row: span 3;
}

#gallery > div > a {
  opacity: 0;
  position: absolute;
  color: #fff;
  background-color: transparent;
  background-image: linear-gradient(transparent 60%,#155577);
  font-weight: bold ;
  font-size: 3.8em ;
  font-family: "Dukas", sans-serif;
  padding: 1rem;
  width: 100%;
  height: 100%;
  transition: all ease 1s;
}
#gallery > div img {
  width: 100%;
  min-height: 100%;
  transition: all ease 1s;
}
/* #gallery > div:hover img {
} */
#gallery > .gallery__link.hov a,
#gallery > div:hover a {
  opacity: 1;
}
#gallery > div {
  overflow: hidden;
  position: relative;
}
#gallery div,
#gallery a {
  display: flex;
  justify-content: center;
  align-items: end;
  text-decoration: none;
}


.gallery {
  flex: 21;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#hero_img a {
  margin-top: 2em;
  margin-bottom: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}
#hero_img img {
  width: 80%;
  margin: 0;
}
.infos {
  text-align: center;
  margin-bottom: 2em;
  padding: 1em;
  width: 80%;
  justify-content: center;
  align-items: center;
}
.infos span {
  margin: 0;
}
.infos p a{
  color: #155577;
}
.infos p {
  margin-bottom: 0.5em;
  font-family: "Dukas", sans-serif;
  color: #155577;
  font-size: 4em;
  line-height: 1em;
}
.infos p span {
  font-family: Arial, Helvetica, sans-serif;
}
.infos span {
  font-family: "Gotu", sans-serif;
  font-size: 1em;
  margin-bottom: 0.5em;
  line-height: 1.5em;
}
#gallery2 {
  width: 80%;
  margin: 5px;
  position: relative;
  display: grid;
  margin-top: 0;
  grid-template: repeat(12, 1fr) / repeat(12, 1fr);
  grid-gap: 0.5em;
}
@media (max-width: 800px) {
  #gallery2 {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
  }
  #gallery2 > div {
    width: 78%;
    margin: 1%;
  }
  #gallery2 > div > a {
    opacity: 1!important;
    font-size: 2.2em !important;
    mix-blend-mode: normal!important;
    background-color: transparent!important;
  }
  .infos p {
    font-size: 3em;
  }

}
@media (max-width: 800px) and (max-width: 350px) {
  #gallery2 > div {
    width: 98%;
  }
  #gallery2 > div > a {
    opacity: 1;
    font-size: 2.2em !important;
    mix-blend-mode: normal!important;
    background-color: transparent!important;
  }
}
/* Africana */
.gallery2 > div:nth-child(n) {
  grid-column: span 4;
  grid-row: span 1;
}
.gallery2 > div:nth-child(4) {
  grid-column: span 8;
  grid-row: span 2;
}
#gallery2 > div > span {
  display: flex;
  opacity: 0;
  padding: 8px;
  position: absolute;
  color: #fff;
  font: 1.6em "Helvetica";
  width: 100%;
  height: 100%;
  top: 0;
  left: -3rem;
  text-shadow: 0 -1px 5px #000;
  transition: all ease 1s;
  line-height: 30px;
  transition: 1s ease;
  flex-direction: column;
  align-content: center;
  align-self: center;
  align-items: center;
}
#img1:hover span {
  opacity: 1;
  left: 0;
}
#img1 img {
  transition: 1s;
}
#img1:hover img {
  filter: brightness(50%);
}
#gallery2 > div > span > p {
  margin-top: 10px;
  text-align: center;
  font-size: 1.9em;
  font-weight: bold;
  line-height: 80px;
  flex: 2;
}
#gallery2 > div > span > span {
  flex: 5;
}
#gallery2 > div img {
  width: 100%;
  min-height: 100%;
  transition: all ease 1s;
}
#gallery2 > div {
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 20px 0 rgba(0, 0, 0, 0.19);
}
/* panacea */

.gallery3 > div:nth-child(n) {
  grid-column: span 4;
  grid-row: span 1;
}
.gallery3 > div:nth-child(4) {
  grid-column: span 8;
  grid-row: span 2;
}
.gallery3 > div:nth-child(7) {
  grid-column: span 8;
  grid-row: span 2;
}
.gallery3 > div:nth-child(10) {
  grid-column: span 8;
  grid-row: span 2;
}


/*grandview*/
.gallery4 > div:nth-child(n) {
  grid-column: span 4;
  grid-row: span 1;
}
.gallery4 > div:nth-child(4) {
  grid-column: span 8;
  grid-row: span 2;
}

/*vila nova*/
.gallery5 > div:nth-child(n) {
  grid-column: span 4;
  grid-row: span 1;
}
.gallery5 > div:nth-child(4) {
  grid-column: span 8;
  grid-row: span 2;
}
/*king garden*/
.gallery6 > div:nth-child(n) {
  grid-column: span 4;
  grid-row: span 1;
}
.gallery6 > div:nth-child(4) {
  grid-column: span 8;
  grid-row: span 2;
}
/*Fady land*/
.gallery7 > div:nth-child(n) {
  grid-column: span 4;
  grid-row: span 1;
}
.gallery7 > div:nth-child(4) {
  grid-column: span 8;
  grid-row: span 2;
}
/*Rabwa*/
.gallery7 > div:nth-child(n) {
  grid-column: span 4;
  grid-row: span 1;
}
.gallery7 > div:nth-child(4) {
  grid-column: span 8;
  grid-row: span 2;
}
/*KIAS*/ /*laverna*/ 
.gallery8 > div:nth-child(n) {
  grid-column: span 4;
  grid-row: span 1;
}
.gallery8 > div:nth-child(4) {
  grid-column: span 8;
  grid-row: span 2;
}
 /*vidorra*/
 .gallery9 > div:nth-child(n) {
  grid-column: span 4;
  grid-row: span 1;
}
.gallery9 > div:nth-child(4) {
  grid-column: span 8;
  grid-row: span 3;
}