* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/* navbar */
.entete {
  height: 100px;
}

.navbar-scroll .nav-link,
.navbar-scroll .navbar-toggler-icon,
.navbar-scroll .navbar-brand {
  color: #fff;
}

.navbar-scrolled .nav-link,
.navbar-scrolled .navbar-toggler-icon,
.navbar-scrolled .navbar-brand {
  color: #fff;
}

.navbar-scroll,
.navbar-scrolled {
  background-color: #cbbcb1;
}

.blurry {
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, .15);
}

.navbar-brand {
  font-size: 1.75rem;
  letter-spacing: 3px;
}

.blurry a:hover {
  background-color: white;
}

/* accueil */
.slider {
  background: no-repeat center / cover url(../img/sexy-girl-black-dress-smoking-electronic-cigarette-dark-wall.jpg);
  height: 50%;
  display: flex;
  text-align: center;
  align-items: center;
}

.xcontainer {
  margin: auto;
  padding: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}


.produit {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(170, 170, 170, 0.2);
  box-shadow: 6px 6px 6px rgba(170, 170, 170, 0.9);
  border-radius: 10px;
  padding: 15px;
}

.produit img {

  height: 200px;
  object-fit: contain;
  object-position: center;
}

.boutons {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

.bouton {
  padding: 10px 40px;
  border: none;
  border-radius: 10px;
  box-shadow: 6px 6px 6px rgba(170, 170, 170, 0.9);
}

.basket {
  background: rgb(255, 218, 0);
}

.basket:hover {
  cursor: pointer;
  filter: brightness(110%) saturate(140%);
}

.pageprod {
  color: white;
  background: rgb(201, 64, 18);
}

/* panier */
.backmain {
  background: no-repeat center/cover url(../img/m2H7K9A0b1m2H7H7.png);
  min-height: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tableau1 a {
  color: black;
  text-decoration: none;
}

.tableau1 {
  width: 1200px;
  margin-top: 20px;
  text-align: center;
}

.tableau1 table,
td,
th,
tr {
  background: rgba(255, 255, 255, 0.3);
  border: rgba(255, 255, 255, 0.3);
  border-spacing: 0px;

}

.tableau1 img {
  height: 100px;
}

.tableau1 thead {
  padding-bottom: 20px;
}

.commmander {
  margin-left: 1050px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 40px;
  border: none;
  text-decoration: none;
  color: black;
  background: rgb(255, 218, 0);
  border-radius: 10px;
  box-shadow: 6px 6px 6px rgba(170, 170, 170, 0.9);
}

.panier {
  padding-bottom: 20px;
}

.tableau1 input:hover {
  cursor: pointer;
}

p {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.bas {
  margin-top: auto;
  margin-top: 10px;
  width: 100%;
  height: 60px;
  background: rgb(230, 230, 230, 0.5);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 50px;
}

.bas a:visited {
  color: black;
}

/* formulaire */
.container1 {
  min-height: 85%;
  align-items: center;
  justify-content: center;
}

.hauteur {
  min-height: 85%;
}

.title {
  background: rgb(255, 255, 255);
  width: 420px;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
}

.connec_inscri {
  width: 420px;
  margin: auto;
  padding: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  box-shadow: 6px 6px 6px rgba(170, 170, 170, 0.9);
  border: 1px solid rgba(170, 170, 170, 0.2);
  flex: 1 0 auto;
}

.champ {
  margin-bottom: 10px;
}

.champ input,
.champ select {
  width: 400px;
  height: 40px;
  border: none;
  box-shadow: inset 6px 6px 6px rgba(170, 170, 170, 0.5);
  border-radius: 5px;
  background: rgba(200, 200, 200, );
}


.envoyer input {
  height: 40px;
  border: none;
  border-radius: 10px;
  color: white;
  background: rgb(201, 64, 18);
  border: 1px solid rgba(170, 170, 170, 0.2);
  box-shadow: 6px 6px 6px rgba(170, 170, 170, 0.9);
  padding: 0px 10px;
  margin-bottom: 20px;
}

.envoyer input:hover {
  cursor: pointer;
  filter: brightness(110%) saturate(140%);

}

.sous_titre {
  margin: 10px 0px;
}

.red {
  color: red;
  font-size: 20px;
}







/* test */

.maincontainer
{
   position: relative;
   width: 400px;
   height: 500px;
}

.maincontainer .cover,
.maincontainer .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* cant see the backside elements as theyre turning around */
  transition: transform .5s linear 0s;
}


/* style the maincontainer class with all child div's of class .cover */
.maincontainer .cover
{
    transform: perspective(600px) rotateY(0);
}

/* style the maincontainer class with all child div's of class .back */
.maincontainer .back
{
    transform:  perspective(600px) rotateY(180deg);
}

.maincontainer:hover .cover
{
    z-index: 99;
    transform: perspective(600px) rotateY(-180deg);
}

.maincontainer:hover .back
{
  z-index: 99;
  transform: perspective(600px) rotateY(0);
}



.border {
  width: 100%;
  color: #717375;
  font-family: helvetica;
  line-height: 5mm;
  border-collapse: collapse;
}

.border th {
  border: 1px solid #000;
  color: white;
  background: #000;
  padding: 5px;
  font-weight: normal;
  font-size: 14px;
  text-align: center;
}

.border td {
  border: 1px solid #CFD1D2;
  padding: 5px 10px;
  text-align: center;
}

.no-border {
  border-right: 1px solid #CFD1D2;
  border-left: none;
  border-top: none;
  border-bottom: none;
}

.space {
  padding-top: 250px;
}