#hero {
  background-color: #d2e0a7;
}
@media screen and (max-width: 992px) {
  #hero .row {
    flex-direction: column-reverse;
  }
}
#discover-col,
#read-col {
  perspective: 1000px;
}

/* #discover-col.flipped .flipper, #read-col.flipped .flipper {
    display:none;
    transform: rotateY(180deg);
    background-image: none !important;
} */
.discover-col-back {
  display: none;
}
.read-col-back {
  display: none;
}
.flipper:hover .discover-col-front {
  /* display: none; */
}
.flipper:hover .read-col-front {
}
.flipper:hover .discover-col-back {
  display: none;
}
.flipper:hover .read-col-back {
  display: none;
}

#read-col .flipper {
  /* cursor: pointer; */
  transform-style: preserve-3d;
  position: relative;
  background-repeat: no-repeat;
  margin-top: -20%;
  width: 100%;
  height: 0;
  /* https://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size#answer-22211990 */
  padding-top: 119.5%;
  background-size: 100%;
  /* transition: all 0.3s ease-in-out, transform 0.6s ease-in-out; */
}
.box-hero {
  background: #ffffffeb !important;

  padding-left: 80px !important;
}
.plirofories {
  text-align: left;
  font-weight: bold;
  padding-bottom: 20px;
  font-size: 24px;
  letter-spacing: -0.24px;
  color: #4a5a0b;
  text-transform: uppercase;
  opacity: 1;
}
.right-hero {
  font-size: 30px;
}
#discover-col .flipper {
  /* cursor: pointer; */
  transform-style: preserve-3d;
  position: relative;
  /* background-image: url('../../images/discover_lesvos.png'); */
  background-image: url("../../images/discover_lesvos.png");
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
  /* https://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size#answer-22211990 */
  padding-top: 59.2%;
  /* transition: all 0.3s ease-in-out, transform 0.6s ease-in-out; */
}

.discover-col-front,
.discover-col-back,
.read-col-front,
.read-col-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.discover-col-back,
.read-col-back {
  /* transform: rotateY(180deg); */
  position: absolute;
  top: 0;
  right: 0;
}

.discover-col-front,
.read-col-front {
  z-index: 2;
  transform: rotateY(0deg);
}

.read-col-front {
  position: absolute;
  top: 0;
}

.col-title {
  color: #ffffff;
  font-size: 75px;
  bottom: 100px;
  left: 10%;
  transition: all ease-in-out 0.3s;
}

div#read-col .col-title {
  position: absolute;
  max-width: 80%;
  bottom: 30%;
}

.flipper:hover,
#read-col:hover {
  /* background-size: 110% !important; */
  background-color: #f6f7f1;
  /* background-image: none!important; */
}

.flipper:hover .col-title {
  color: white;
  /* -webkit-text-stroke-width: 2px; */
  -webkit-text-stroke-color: #ffffff;
}

.menu-list {
  list-style: none;
  gap: 1.5rem;
  margin-bottom: 0px;
}

.menu-list li a {
  color: #181e03;
  font-size: 18px;
  font-weight: bold;
}

.activities-container {
  background: #f4f6ef;
  flex: 1;
}

.historic-container {
  background: #faffef;
  flex: 1;
}

.discover-list {
  gap: 3rem;
}

div#read-col .col-desc {
  top: 0;
  left: 0;
  background: rgba(57, 71, 19, 0.9);
  mix-blend-mode: multiply;
  background-blend-mode: multiply;
}

div#read-col.flipped .col-desc {
  background: rgba(57, 71, 19, 0.9);
}

#read-col.flipped .flipper {
  background: #f6f7f1;
}

.articles-list a {
  width: fit-content;
}

.articles-list a:hover {
  width: fit-content;
  color: #8aa04e !important;
}
@media screen and (max-width: 992px) {
  #read-col .flipper {
    margin-top: 0;
  }
  /* #discover-col .flipper{
        height: 500px;
        padding-top:0%;
        margin-top: 107px;
    }
    div#discover-col.flipped .flipper, div#read-col.flipped .flipper{
        height: 500px;
        
    } */
  /* #discover-col, #read-col{
        height: 1300px;
    }
    #discover-col, #read-col{
        height: 1300px;
    } */
  div#discover-col.flipped .discover-col-back,
  div#read-col.flipped .read-col-back {
    position: absolute;
    top: 0;
    right: 0;
    /* position: relative; */
    height: 350px !important;
  }
  .flipper:hover .discover-col-back {
    height: 350px !important;
  }
  .flipper:hover .read-col-back {
    height: 500px;
  }
  #read-col .flipper {
    margin-top: 0;
    height: 600px !important;
    padding-top: 0px;
  }
  div#read-col.flipped .flipper {
    /* height: auto !important; */
    height: 600px !important;
    padding-top: 0;
  }
  div#discover-col.flipped .flipper {
    /* height: auto !important; */
    height: 348px !important;
    padding-top: 0;
  }
  .activities-container {
    /* height: 348px!important; */
  }
  .historic-container {
    /* height: 348px!important; */
  }
  .flipper:hover,
  #read-col:hover {
    height: 600px;
  }
  .menu-list {
    list-style: none;
    gap: 1.5rem;
    position: relative;
    z-index: 99;
    /* margin-bottom: 98px; */
  }
  .col-title {
    bottom: -192px;
  }
  #discover-col .flipper {
    cursor: pointer;
    transform-style: preserve-3d;
    position: relative;
    background-image: url(../../images/discover_lesvos.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 348px !important;
    padding-top: 0%;
    background-size: cover;
    /* transition: all 0.3s ease-in-out, transform 0.6s ease-in-out; */
  }
}
@media screen and (max-width: 1750px) {
  div#read-col .col-title {
    top: 80px;
    position: relative;
    font-size: 60px;
  }
}
@media screen and (max-width: 1400px) {
  div#read-col .col-title {
    top: 80px;
    position: relative;
  }
  #read-col .flipper {
    padding-top: 165.5%;
  }
}
@media screen and (max-width: 992px) {
  #read-col .flipper {
    padding-top: 100.5%;
  }
}
@media screen and (max-width: 550px) {
  #read-col .flipper {
    padding-top: 200%;
  }
}
@media screen and (max-width: 500px) {
  .col-title {
    font-size: 50px;
  }
  .box-hero {
    padding-left: 20px !important;
  }
  div#discover-col.flipped .flipper {
    /* height: auto !important; */
    height: 500px !important;
    padding-top: 0;
  }
  #discover-col .flipper {
    height: 500px !important;
  }
}
@media screen and (max-width: 400px) {
  #read-col .flipper {
    padding-top: 250%;
  }
}
@media screen and (min-width: 1310px) {
  .menu-list {
    top: 1vh;
    /* position: relative; */
  }
}
@media screen and (min-width: 1600px) {
  .menu-list {
    top: 2vh;
  }
}
@media screen and (min-width: 1900px) {
  .menu-list {
    top: 3vh;
  }
}