@font-face {
  font-family: 'SackersGothicStdLight';
  src: url('fonts/SackersGothicStdLight.eot');
  src: url('fonts/SackersGothicStdLight.eot') format('embedded-opentype'),
  url('fonts/SackersGothicStdLight.woff2') format('woff2'),
  url('fonts/SackersGothicStdLight.woff') format('woff'),
  url('fonts/SackersGothicStdLight.ttf') format('truetype'),
  url('fonts/SackersGothicStdLight.svg#SackersGothicStdLight') format('svg');
}



/* for demo purposes */
.card {
  margin: 10px 10px;
}

/* Flip Cards CSS */
.card-container {
  display: grid;
  perspective: 900px;
}

.card-flip {
  display: grid;
  grid-template: 1fr / 1fr;
  grid-template-areas: "frontAndBack";
  transform-style: preserve-3d;
  transition: all 0.7s ease;
}

.card-flip div {
  backface-visibility: hidden;
  /* transform-style: preserve-3d; */
}

.front {
  grid-area: frontAndBack;
}

.back {
  grid-area: frontAndBack;
  transform: rotateY(-180deg);
}

.card-container:hover .card-flip {
  transform: rotateY(180deg);
}


.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9 {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.container{
  max-width: 90%;
  padding-top:5px;
  padding-left:20px;
  padding-right:20px;
}

.divCarte img{
  height:90vh;
}
.divCarte ul{
  margin:0px;
  padding:0px;
  display:flex;
  flex-direction: row;
}
.divCarte ul li:nth-child(1) img{
  margin-right:60px;
}
.divCarte ul li{
  list-style: none;
}
.divCarte ul li img{
}

#divHome,#divUnivers{
  margin-top: 40vh; /* poussé de la moitié de hauteur de viewport */
  transform: translateY(-40%); /* tiré de la moitié de sa propre hauteur */
}

#logoHome{
  display:block;
  max-width:100%;
  height: auto;
  margin:0 auto 80px;
}

#langueHome,#univers {
  list-style: none;
  display:block;
  margin:0 auto;
  padding-top:10px;
  padding-right:0px;
  padding-left:0px;
  text-align: center;
}
#langueHome li, #univers li{
  list-style: none;
  display: inline-block;
  padding-left:10px;
}
#univers li{
  padding-right:10px;
}

#langueHome li  img{
  width:30px;
  height:auto;
}
#univers li a{
  color:#000000;
  text-decoration: none;
  font-size:35px;
  padding-left:80px;
  padding-right:80px;
  font-family: 'SackersGothicStdLight';
}

#divUniversMakeup h1{
  margin:0 auto;
  text-align:center;
  margin-top:5vh;
  font-size:45px;
  font-family: 'SackersGothicStdLight';
}
#universMakeup{
  display:flex;
  justify-content:space-around;
  padding:0px;
  margin-top:30px;
}
#universMakeup li{
  list-style: none;
  border:1px solid #000;
}
#universMakeup li img{
  max-width: 360px;
  height: auto;
}

#headerCard{
  text-align: center;
  display:block;
  padding-top:10px;
  padding-bottom: 15px;
}

#headerCard img{
  display:inline-block;
  width:167px;
  height:auto;
}

#headerCard a{
  padding-left:30px;
  font-size:18px;
  font-family: 'SackersGothicStdLight';
  color:#000;
  text-decoration: none;
}

#headerCard #imgRetour{
  display: inline-block;
  width:36px;
  height:auto;
}

@media (max-width: 1024px) {
  #universMakeup li img{
    max-width: 300px;
  }
  #univers{
    display:flex;
    justify-content:space-around;
  }

  #univers li a {
    font-size:29px;
    padding-left: 0px;
    padding-right: 0px;
  }

  #headerCard a {
    font-size:16px;
  }

  #divUniversMakeup h1{
    margin-top:3vh;
    font-size:40px;
  }
}


@media (max-width: 768px) {


}
@media (max-width: 767px) {
  #univers li a {
    font-size:22px;
  }

  #divUniversMakeup h1{
    font-size:35px;
  }

  #universMakeup li img{

  }
  #universMakeup{
    flex-wrap: wrap;
    margin-top:20px;
  }

  #headerCard {
   padding-top:10px;
    padding-bottom:0px;
  }

  #headerCard img{
    display:block;
    margin:0 auto;
    padding-bottom:10px;
  }

  #headerCard a {
    font-size:16px;
    padding-left:0px;
  }
  #universMakeup li{
    margin-bottom:20px;
  }
  #univers{
    flex-wrap: wrap;
  }
}

img{-ms-interpolation-mode:bicubic;}

@media (max-width: 1024px) and (orientation: landscape) {
  .divCarte img{
    width:auto;
    height:85vh;
  }
}
@media (max-width: 1024px) and (orientation: landscape) {
  .divCarte img{
    width:auto;
    height:85vh;
  }
}
@media (max-width: 800px) and (orientation: landscape) {

  .divCarte img{
    width:auto;
    height:70vh;
  }
}

@media (max-width: 960px) and (orientation: portrait) {

  .divCarte img{
    height:auto;
    width:40vw;
  }
}
@media (max-width: 740px) and (orientation: portrait) {

  .divCarte img{
    height:auto;
    width:80vw;
  }
  .divCarte ul li:nth-child(1) img{
    margin-right:0px;
  }
}