#events {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#heroo {
  margin-top: 1%;
}

.event-container {
  margin-top: 10%;
}
.event-container2 {
  margin-top: 10%;
  display: none;
}
.event-container1 {
  margin-top: 10%;
}
.date {
  text-align: left;
  font-family: "GilroyLight";
  font-size: 15.1px;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 0.9;
  margin-left: 7px;
}
.place {
  text-align: left;
  font: normal normal 300 20px/22px GilroyLight;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
  margin-left: 7px;
}

.img-container, #casbahimg {
  text-align: center;
  position: relative;
  /* padding-top: 50px !important; */
  padding-bottom: 30px !important;
  /* padding-right: 50px !important; */
}
.bg-img {
  width: 90%;
  /* height: 90%; */
  z-index: 1;
  position: relative;

}

.event-img {
  z-index: 2;
  position: absolute;
  top: 20%;
  right: 17.5%;
  width: 65% !important;
  border-radius: 4%;
}
#imgbtn {
  z-index: 2;
  position: absolute;
  top: 28%;
  right: 17%;
  width: 65% !important;
  border-radius: 4%;
}
#imgbtn1 {
  z-index: 2;
  position: absolute;
  top: 26%;
  right: 17%;
  width: 65% !important;
  border-radius: 4%;
}

/* THE WEBSITE buttons */ 

.event-btn {
  z-index: 2;
  position: absolute;
  bottom: 14%;
  right: 24%;
  min-width: 50% !important;
}
#btn1 {
  z-index: 2;
  position: absolute;
  bottom: 15.5%;
  right: 24%;
  min-width: 50% !important;
}
#btn2 {
  z-index: 2;
  position: absolute;
  bottom: 23%;
  margin-top: 10px;
  right: 24%;
  min-width: 50% !important;
}
#btn3 {
  z-index: 2;
  position: absolute;
  bottom: 15%;
  right: 24%;
  min-width: 50% !important;
}
#btn4 {
  z-index: 2;
  position: absolute;
  bottom: 18%;
  right: 24%;
  min-width: 50% !important;
}
#btn5 {
  z-index: 2;
  position: absolute;
  bottom: 18%;
  right: 24%;
  min-width: 50% !important;
}


.event-btn > button {
  height: 50px;
}

.event-btn > button {
  min-width: 50% !important;
  width: 100%;
}

@media screen and (max-width: 1201px) {
  .event-img {
    top: 22%;
    right: 17.5%;
    width: 65%;
  }
  .event-btn {
    bottom: 12% !important;
    right: 23%;
    min-width: 50% !important;
  }
}

@media screen and (max-width: 1200px) {
  .event-img {
    top: 22%;
    right: 17.5%;
    width: 65%;
  }
  .event-btn {
    bottom: 18% !important;
    right: 24% !important;
    min-width: 50% !important;
  }
}

@media screen and (max-width: 1199px) {
  .event-img {
    top: 22%;
    right: 17.5%;
    width: 65%;
  }
  .event-btn {
    bottom: 18%;
    right: 25% !important;
    min-width: 50% !important;
  }
}
@media screen and (max-width: 993px) {
  .event-container1{
    display: none;
  }
  .event-container2{
    display: block;
  }
  .event-img {
    top: 20%;
    right: 16%;
    width: 70%;
    min-width: 50% !important;
  }
  .event-btn {
    bottom: 18%;
    right: 18% !important;
    min-width: 50% !important;
    width: 60% !important;
  }
}
@media screen and (max-width: 992px) {
  .event-container1{
    display: none;
  }
  .event-container2{
    display: block;
  }
  .event-img {
    top: 20%;
    right: 16%;
    width: 70%;
    min-width: 50% !important;
  }
  .event-btn {
    bottom: 13% !important;
    right: 20%;
    min-width: 50% !important;
    width: 60% !important;
  }
}
@media screen and (max-width: 991px) {
  .event-container1 {
    display: none;
  }
  .event-container2 {
    display: block;
  }
  .event-img {
    top: 20%;
    right: 17%;
    width: 70%;
    min-width: 50% !important;
  }
  .event-btn {
    bottom: 14% !important;
    right: 20%;
    min-width: 50% !important;
    width: 60% !important;
  }
}

@media screen and (max-width: 768px) {
  .event-img {
    top: 20%;
    right: 17%;
    width: 70%;
  }
  .event-btn {
    bottom: 9%;
    right: 20%;
    min-width: 50% !important;
    width: 60% !important;
  }
}

/* @media screen and (max-width: 768px){
  .event-img {
    top: 20%;
    right: 15%;
    width: 70%;
  }
  .event-btn{
    bottom: 5%;
    right: 22.5%;
    min-width: 50% !important;
    width: 50% !important;
  }
} */

@media screen and (max-width: 520px) {
  .event-img {
    top: 20%;
    right: 17%;
    width: 70%;
  }
  .event-btn {
    bottom: 5%;
    right: 20%;
    min-width: 50% !important;
    width: 60% !important;
  }
}

@media screen and (max-width: 441px) {
  .event-img {
    top: 20%;
    /* right: 20%; */
    width: 60%;
  }
  .event-btn {
    bottom: 5%;
    right: 19% !important;
    min-width: 50% !important;
    width: 60% !important;
  }
  .event-btn > button {
    height: 40px;
  }
}

@media screen and (max-width: 290px) {
  .event-img {
    top: 20%;
    /* right: 20%; */
    width: 60%;
  }
  .event-btn {
    bottom: 4%;
    right: 19%;
    min-width: 50% !important;
    width: 60% !important;
  }
  .event-btn > button {
    height: 35px;
    font-weight: normal;
  }
  #events {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

.stats-img-container {
  position: relative;
}
.stats-img {
  width: 100%;
  position: relative;
}

.stats-p {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  font: normal normal 500 17px/21px GilroyLight;
    letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
}
.stats-p > p {
  font-size: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}


@media screen and (max-width: 767px) {
  .title , .content , .date , .place {
    text-align: center;
    letter-spacing: 0px;
    color: #ffffff;
  }
}


@media screen and (min-width: 320px) and (max-width: 767px) {
  .title {
    text-align: center;
    letter-spacing: 0px;
    color: #ffffff;
    font-size: 35px;
    width: 80%;
    margin: 0 auto;
  }
  
}
@media screen and (min-width: 250px) and (max-width: 319px) {
  .title {
    text-align: center;
    letter-spacing: 0px;
    color: #ffffff;
    font-size: 32px;
    width: 80%;
    margin: 0 auto;
  }
  .date {
    text-align: center;
    font: normal normal 200 25px/30px GilroyLight;
    letter-spacing: 0px;
    color: #ffffff;
    opacity: 0.9;
  }
  
}

@media screen and (min-width: 496px) and (max-width: 767px) {
  .stats-p {
    text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  font: normal normal 500 14px/14px GilroyLight;
    letter-spacing: 0px;
  color: #ffffff;
  opacity: 1;
  }
}


@media screen and (min-width: 450px) and (max-width: 499px) {
  .stats-p {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    font: normal normal 500 12px/13px GilroyLight;
      letter-spacing: 0px;
    color: #ffffff;
    opacity: 1;
  }
  
}

@media screen and (min-width: 400px) and (max-width: 449px) {
  .stats-p {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    font: normal normal 500 10.5px/11px GilroyLight;
      letter-spacing: 0px;
    color: #ffffff;
    opacity: 1;
  }
}

@media screen and (min-width: 340px) and (max-width: 399px) {
  .stats-p {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    font: normal normal 500 10px/10px GilroyLight;
      letter-spacing: 0px;
    color: #ffffff;
    opacity: 1;
  }
}

@media screen and (min-width: 320px) and (max-width: 339px) {
  .stats-p {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    font: normal normal 500 8.2px/11px GilroyLight;
      letter-spacing: 0px;
    color: #ffffff;
    opacity: 1;
  }
}

@media screen and (min-width: 265px) and (max-width: 299px) {
  .stats-p {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    font: normal normal 500 7px/10px GilroyLight;
      letter-spacing: 0px;
    color: #ffffff;
    opacity: 1;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .stats-p {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    font: normal normal 500 13px/14px GilroyLight;
      letter-spacing: 0px;
    color: #ffffff;
    opacity: 1;
  }
}

@media screen and (min-width: 1200px) {
  .stats-p {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    font: normal normal 500 14.8px/15px GilroyLight;
      letter-spacing: 0px;
    color: #ffffff;
    opacity: 1;
  }
}

@media screen and (min-width: 320px) and (max-width: 767px) {
.img-container {
  text-align: center;
  position: relative;
  margin-top: 10% !important; 
  padding-bottom: 30px !important;
  /* padding-right: 50px !important; */
}
}


@media screen and (min-width: 320px) and (max-width: 767px) {
  .myplace svg
  {
  display: none;
  }
  .mydate , .myplace
{
justify-content: center !important;
}
}


@media screen and (min-width: 992px) and (max-width: 1199px) {
  .place {
    text-align: left;
    font: normal normal 300 17px/20px GilroyLight;
    letter-spacing: 0px;
    color: #ffffff;
    opacity: 1;
    margin-left: 7px;
  }
}


.content {
  margin-top: 7px;
}

@media screen and (min-width: 320px) and (max-width: 345px) {
.montitre {
  line-height: 2rem;
}
}

/* Resposnive buttons between 992px and 1199px */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .event-btn {
    z-index: 2;
    position: absolute;
    top: 64%;
    right: 24%;
    min-width: 50% !important;
  }
  #btn4 {
    z-index: 2;
    position: absolute;
    top: 57%;
    right: 24%;
    min-width: 50% !important;
  }
  .btn11 {
    z-index: 2;
    position: absolute;
    top: 75%;
    right: 24%;
    min-width: 50% !important;
  }
  .btn10 {
    z-index: 2;
    position: absolute;
    top: 73%;
    right: 24%;
    min-width: 50% !important;
  }
}

@media screen and (min-width: 320px) and (max-width: 767px) {
#mydate2 svg{
display: none;
}
}

@media screen and (min-width: 387px) and (max-width: 406px) {

.lhddate {
  text-align: center;
font-size: 14px;
font-family: "GilroyLight";
letter-spacing: 0px;
  color: #ffffff;
  opacity: 0.9;
}
}

@media screen and (min-width: 320px) and (max-width: 386px) {

  #lhddate {
    text-align: center;
  font-size: 13px;
  font-family: "GilroyLight";
  letter-spacing: 0px;
    color: #ffffff;
    opacity: 0.9;
  }
  }

  @media screen and (min-width: 320px) and (max-width: 372px) {

    #awadate {
      text-align: center;
    font-size: 12.8px;
    font-family: "GilroyLight";
    letter-spacing: 0px;
      color: #ffffff;
      opacity: 0.9;
    }
    }

    @media screen and (min-width: 320px) and (max-width: 368px) {
   #smcdate {
    text-align: center;
    font-size: 12.8px;
    font-family: "GilroyLight";
    letter-spacing: 0px;
      color: #ffffff;
      opacity: 0.9;
    }
    }

    @media screen and (min-width: 994px) {
#lhddate3 {
  text-align: center;
  font-size: 14.5px;
  font-family: "GilroyLight";
  letter-spacing: 0px;
    color: #ffffff;
    opacity: 0.9;
}
    }


    .scstats {
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      font: normal normal 500 15px/21px GilroyLight;
        letter-spacing: 0px;
      color: #ffffff;
      opacity: 1;
    }