@import url(reset.css);
@import url(home.css);
@import url(panier.css);
@import url(parution.css);
@import url(account.css);
@import url(header.css);
@import url(footer.css);
@import url(modal.css);
@import url(form.css);
@import url(login.css);
@import url(auteure.css);
@import url(actu.css);

:root {
  --color-beige-light: #fbf8f1;
  --color-beige: #eeebdd;
  --color-red-light: #ce1212;
  --color-red-blood: #810000;
  --color-black: #1b1717;
  --font-family: Dosis;
}

body {
  font-family: var(--font-family);
  background-color: #000000;
  padding-top: 60px;
  overflow-x: hidden;
}

section {
  background-color: black;
  width: 100%;
  height: 100vh;
}

h1,
h2,
h3 {
  margin: 5%;
  color: #ce1212;
  text-align: center;
  font-weight: 500;
}

.navbar-brand {
  color: #ce1212 !important;
  font-weight: 500;
}

h1 {
  font-weight: bolder;
}

h4 {
  color: var(--color-red-light);
  text-transform: uppercase;
  font-weight: bold;
}

.h6-title {
  text-transform: uppercase;
}

a {
  text-decoration: none !important;
  color: var(--color-black);
}

a:hover {
  color: var(--color-red-light);
}

#social-icon {
  color: var(--color-beige) !important;
}

#social-icon:hover {
  color: var(--color-red-light) !important;
}

.link_perso {
  text-decoration: none;
}

#cgu {
  color: #fbf8f1 !important;
}

#cgu a {
  color: #810000;
}

/* ---------MEDIA QUERY --------- */

@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) {
  #hs-video video {
    position: center;
  }
}


@media screen and (max-width: 500px) {
  .responsive-table-line td:before {
    content: attr(data-title);
  }
  .responsive-table-line,
  .responsive-table-line table,
  .responsive-table-line thead,
  .responsive-table-line tbody,
  .responsive-table-line td,
  .responsive-table-line tr {
    display: block;
  }

  .data-title-creation,
  .data-creation,
  .data-title-action,
  .slide-parution {
    display: none;
  }

  .social-icons {
    padding: 10% 10%;
  }

  .account-item {
    padding: 20px;
  }

  .auteure-css {
    border-radius: 15px;
  }
}

@media screen and (max-width: 360px) {
  .tunnel-achat img {
    display: none;
  }
}

@media screen and (min-width: 280px) and (max-width: 539px) {
  #hs-video video {
    position: center;
  }
}

@media screen and (max-width: 820px) {
  .form-register,
  .form-login,
  .form-adresse {
    width: 100%;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  #hs-video {
    position: center;
  }
}

@media screen and (min-width: 576px) and (max-width: 991px) {
  .overlay-item small,
  .overlay-item p {
    display: none;
  }
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 400px;
  }
  .modal-dialog .modal-content {
    padding: 1rem;
  }
}

@media screen and (min-width: 992px) and (max-width: 1024px) {
  .overlay-item p {
    margin: 1% 1%;
    padding: 2% 2%;
    text-align: left;
  }
}