html {
  padding: 0px;
  margin: 0px;
  background-color: #f1f1f1;
  font-family: sansation;
}

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

#info {
  position: fixed;
  display: flex;
  top: 102px;
  left: 0px;
  width: 100%;
  z-index: 2000;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}

#messageInfo {
  width: 95%;
  background-color: #cc3333;
  color: #ffffff;
  padding: 8px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#actionInfo {
  width: 5%;
  background-color: #cc3333;
  display: flex;
  justify-content: center;
  align-items: center;
}

#fermeInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background-color: #ffffff;
  color: #cc3333;
  cursor: pointer;
}

/*----------------------------------------------------------------*/
/*----------------  FORMATIONS ---------------------*/
/*----------------------------------------------------------------*/

.clsCadre {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  color: #28414b;
}

.clsEntete {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 20px;
  font-size: 40px;
  /*border:1px solid #000000;*/
}

.clsVignette {
  position: relative;
  /*border:1px solid #000000;*/
  width: 400px;
  height: 200px;
  margin: 50px;
  border-radius: 10px;
  text-shadow: 4px 4px 2px rgba(190, 190, 190, 0.75);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

#divFormation {
  margin-top: 100px;
}

.enteteVignette {
  display: block;
  position: absolute;
  top: -20px;
  left: 0px;
  width: 100%;
  /* border: 1px solid #000000; */
  transform-origin: 50% 50%;
  transform: rotate(-5deg);
}

.piedVignette {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 40px;
  /*background-color:rgba(200,200,200,1);*/
  border-radius: 0px 0px 10px 10px;
  color: #cc3333;
  font-size: 20px;
  text-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.devisVignette {
  margin-left: 14px;
}

.inscriptionVignette {
  margin-right: 14px;
}

.btnInscriVignette {
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 6px;
  background-color: #cc3333;
  color: #ffffff;
}

#imgPermisB {
  height: 130px;
  /*border:1px solid #444444;*/
}
#imgAac {
  height: 160px;
  /*border:1px solid #444444;*/
}
#imgCs {
  height: 170px;
  /*border:1px solid #444444;*/
}
#imgPerfectionnement {
  height: 150px;
  /*border:1px solid #444444;*/
}
#imgBvaBvm {
  height: 100px;
  /*border:1px solid #444444;*/
}
#imgAnnulation {
  height: 120px;
  /*border:1px solid #444444;*/
}

#divCertification {
  background: linear-gradient(
      217deg,
      rgba(176, 179, 177, 0.8),
      rgba(176, 179, 177, 0) 70.71%
    ),
    linear-gradient(
      127deg,
      rgba(210, 210, 210, 0.8),
      rgba(220, 220, 220, 0) 70.71%
    ),
    linear-gradient(
      336deg,
      rgba(142, 148, 144, 0.8),
      rgba(142, 148, 144, 0) 70.71%
    );
}

.infoRefVignette {
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
}

#qualiopiSmallScreen {
  display: none;
}

#lienQualiopi {
  display: block;
  text-align: left;
  height: 150px;
  width: 240px;
  background-color: #cc3333;
}

#imgQualiopi {
  height: 80px;
  margin: 10px 0px 0px 10px;
}

#infoQualiopi {
  font-family: arial;
  font-size: 12px;
  color: #ffffff;
  text-shadow: none;
  margin: 0px 10px 0px 10px;
}

#imgLabel {
  height: 120px;
}

#imgPermis1Euro {
  height: 120px;
}

.infoCoordonnees {
  font-size: 20px;
  text-shadow: none;
  text-align: left;
}

#telMail {
  flex-direction: column;
}

#adresse {
  flex-direction: column;
}

#imgRendezVous {
  height: 80px;
}

#divAvis {
  background: linear-gradient(
      127deg,
      rgba(142, 148, 144, 0.8),
      rgba(142, 148, 144, 0) 70.71%
    ),
    linear-gradient(
      217deg,
      rgba(210, 210, 210, 0.8),
      rgba(220, 220, 220, 0) 70.71%
    ),
    linear-gradient(
      336deg,
      rgba(176, 179, 177, 0.8),
      rgba(176, 179, 177, 0) 70.71%
    );
}

#avisVroomVroom {
  width: 80%;
  max-width: 1200px;
  height: 300px;
  overflow: hidden;
  padding-top: 50px;
  padding-bottom: 50px;
}

#coverInfosRappel {
  z-index: 1000;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(200, 200, 200, 0.5);
}

#centeredViewInfosRappel {
  position: relative;
  top: -10vh;
  max-width: 400px;
  width: 80vw;
  border: 1px solid #28414b;
  border-radius: 6px;
  box-shadow: 4px 4px 3px 2px #888888;
  font-size: 16px;
  overflow: hidden;
}

#headerInfosRappel {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 26px;
  color: #ffffff;
  background-color: #28414b;
}

#headerInfosRappel > img {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 22px;
  height: 22px;
  background-color: #ffffff;
  padding: 1px;
  border-radius: 50%;
}

#bodyInfosContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #eeeeee;
  padding: 20px 0;
}

#footerInfosRappel {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #eeeeee;
}

#footerInfosRappel > div {
  padding: 4px 20px;
  margin: 12px 0;
  background-color: #cc3333;
  color: #ffffff;
  font-weight: bold;
  border-radius: 4px;
  box-shadow: 2px 2px 1px 1px #444444;
  cursor: pointer;
  user-select: none;
}

#footerInfosRappel > div:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 1px 1px #444444;
}

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

@media screen and (max-width: 1199px) {
  #info {
    top: 82px;
    font-size: 16px;
  }

  #messageInfo {
    padding: 6px 0px;
  }

  #fermeInfo {
    width: 22px;
    height: 22px;
    border-radius: 11px;
  }

  .clsEntete {
    font-size: 36px;
  }

  .clsVignette {
    font-size: 25px;
  }

  #divPassRousseau {
    margin-top: 120px;
  }
}

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

@media screen and (max-width: 768px) {
  #info {
    top: 62px;
    font-size: 14px;
  }

  #messageInfo {
    padding: 4px 0px;
    width: 90%;
  }

  #actionInfo {
    width: 10%;
  }

  #fermeInfo {
    width: 20px;
    height: 20px;
    border-radius: 10px;
  }

  .clsEntete {
    font-size: 32px;
  }

  .clsVignette {
    font-size: 22px;
  }

  #divPassRousseau {
    margin-top: 100px;
    width: 300px;
  }
}

@media screen and (max-width: 430px) {
  #info {
    font-size: 12px;
  }

  #messageInfo {
    padding: 2px 0px;
  }

  #fermeInfo {
    width: 16px;
    height: 16px;
    border-radius: 8px;
  }

  .clsEntete {
    font-size: 32px;
  }

  .clsVignette {
    font-size: 22px;
  }
  .piedVignette {
    font-size: 16px;
  }

  #qualiopiBigScreen {
    display: none;
  }

  #qualiopiSmallScreen {
    display: block;
  }

  #centeredViewInfosRappel {
    font-size: 14px;
  }

  .infoCoordonnees {
    font-size: 16px;
    text-shadow: none;
    text-align: left;
  }

  #divPassRousseau {
    margin-top: 80px;
    width: 300px;
  }

  #enteteDivPassRousseau {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 14px;
  }

  #footerDivPassRousseau {
    font-size: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}