/* VARIABLES */

:root {
  --BG-TRANSPARENT-COLOR: rgba(32, 32, 32, 0.7);
}

/*--------------------------HERO-------------------------- */

.hero {
  height: 250px;
  overflow: hidden;
  position: relative;
}

/* Slides */

.img_washington-monument, .img_lincoln-memorial, .img_cashew-tasting, .img_greenhouse-work, .img_rice-farming, .img_sara, .img_anader-colleagues, .img_cassava-farm, .img_egea-fellows, .img_suu-fellows, .img_graduation, .img_piquetage, .img_culture-sharing, .img_soccer-team, .img_soccer-winners, .img_pool {
  width: 100%;
  height: auto;
  position: absolute;
  top: -100px;
}

.img_greenhouse-work, .img_rice-farming {
  top: -90px;
}

.img_sara, .img_piquetage {
  top: -150px;
}

.img_anader-colleagues, .img_cassava-farm {
  top: -200px;
}

.img_lincoln-memorial, .img_egea-fellows, .img_suu-fellows, .img_culture-sharing {
  top: -50px;
}

.img_soccer-team {
  top: -20px;
}

.img_graduation {
  top: 0px;
}

.mySlides {
  display: none;
}

/* Numbers on slides */

.slide-number {
  position: absolute;
  top: 15px;
  left: 15px;
  font-weight: bold;
  z-index: 1;
}

/* Slide caption */

.slide-caption {
  position: absolute;
  bottom: 0;
  background-color: var(--BG-TRANSPARENT-COLOR);
  width: 100%;
  height: 40px;
  padding: 10px;
  z-index: 1;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1s;
}

@keyframes fade {
  from {opacity: 0}
  to {opacity: 1}
}

/* Prev and next btn */

.prev-btn, .next-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--BG-TRANSPARENT-COLOR);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  position: absolute;
  top: calc(50% - 25px);
  opacity: 0.6;
  user-select: none;
  transition: 0.4s;
}

.prev-btn {
  left: 30px;
}

.next-btn {
  right: 30px;
}

.prev-btn:hover, .next-btn:hover {
  opacity: 1;
  background-color: var(--BG-TRANSPARENT-COLOR);
}

/*------------------------------------------------------- */

/* Main page */

.description h1 {
  font-size: 3rem;
  color: black;
  text-align: center;
  margin-bottom: 30px;
}

.welcome {
  display: inline-block;
  background-color: red;
  color: white;
  padding: 10px;
  transform: skewX(-20deg) rotate(-10deg);
}

.flash-cards-container {
  display: flex;
  flex-flow: row wrap;
  padding: 0 25px;
}

.flash-cards {
  width: 30%;
  margin: 15px;
  box-shadow: 5px 5px 15px gray;
}

.flash-cards_header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  font-size: 1.2rem;
  font-weight: bold;
}

.flash-cards_header_about {
  background-color: black;
}

.flash-cards_header_school {
  background-color: rgb(0, 3, 103);
}

.flash-cards_header_company {
  background-color: rgb(19, 59, 0);
}

.flash-cards_content {
  padding: 15px;
  min-height: 300px;
}

.flash-cards_content a {
  color: black;
}

.description p {
  color: black;
  font-size: 1.1rem;
  line-height: 1.8;
}

.about_profile-picture, .inp-logo, .suu-logo, .anader-logo, .mayiya-logo {
  width: 54px;
  height: auto;
  float: left;
  margin: 0 10px 10px 0;
}

.about_profile-picture {
  width: 66px;
}

.suu-logo {
  width: 64px;
}

.anader-logo {
  width: 78px;
}

.mayiya-logo {
  width: 84px;
}

/* MEDIA QUERIES */

@media only screen and (max-width: 1500px) {
  .flash-cards {
    width: 45%;
  }
}

@media only screen and (max-width: 900px) {
  .flash-cards {
    width: 45%;
  }
}

@media only screen and (max-width: 600px) {
  .flash-cards {
    width: 100%;
  }

  .hero {
    height: 150px;
  }

  /* Shift the slides down */
  .img_washington-monument, .img_lincoln-memorial, .img_cashew-tasting, .img_greenhouse-work, .img_rice-farming, .img_sara, .img_anader-colleagues, .img_cassava-farm, .img_egea-fellows, .img_suu-fellows, .img_graduation, .img_piquetage, .img_culture-sharing, .img_soccer-team, .img_soccer-winners, .img_pool {
    top: 0;
  }

  /* Slide caption */

  .slide-caption {
    font-size: 0.8rem;
  }

  /* Prev and next btn */

  .prev-btn, .next-btn {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }

}