@font-face {

  font-family: 'Wicked Grit';

  src: url('../fonts/WickedGrit.woff2') format('woff2'),

      url('../fonts/WickedGrit.woff') format('woff'),

      url('../fonts/WickedGrit.svg#WickedGrit') format('svg');

  font-weight: bold;

  font-style: normal;

  font-display: swap;

}



/*

*@colors

*/

:root{

  --primary-color:#221e1f;

  --secondary-color:#c43a41;

  --third-color:#c88a07;

}



/*

  ####  ###### #    # ###### #####    ##   #

 #    # #      ##   # #      #    #  #  #  #

 #      #####  # #  # #####  #    # #    # #

 #  ### #      #  # # #      #####  ###### #

 #    # #      #   ## #      #   #  #    # #

  ####  ###### #    # ###### #    # #    # ######

*/



body{

  color:#fff;

  background-color: var(--primary-color);

  font-family: 'Wicked Grit', sans-serif;

}

.separateur {

  height: 5px;

  width: 100%;

  background-color: #e1e1e1;

}

/* .container-perso {

  max-width: 900px;

  margin: auto;

  background-color: #454849;

  margin-top: -200px;

} */

.container-perso .part-1 {

  background-color: var(--secondary-color);

}

.container-perso .part-2 {

  background-color: var(--third-color);

}

.container-perso .part-title {

  background-color: #221e1f;

}

.container-perso h2 {

  font-size: 2.5rem;

}

.container-perso h3 {

  font-size: 1.6rem;

}

.container-perso p,

.container-perso ul li {

  font-family: 'Lato', sans-serif;

  font-size: 1rem;

}

.cover {

  object-fit: cover;

}

/*

 #    # ###### #    # #    #

 ##  ## #      ##   # #    #

 # ## # #####  # #  # #    #

 #    # #      #  # # #    #

 #    # #      #   ## #    #

 #    # ###### #    #  ####

*/

.navigation {

  background: url('../images/bg-navbar.png') var(--primary-color) no-repeat bottom;

  position: relative;

  text-transform: uppercase;

}

.navigation .container {

  padding-top: 20px;

}

.navigation .logo-container {

  position: relative;

}

.navigation .logo {

  position: absolute;

  transform: scale(0.5);

  left: -25%;

  top: -100px;

}

.navigation p,

.navigation a,

.navigation .fa-brands,

.navigation button {

  color: #fff;

}

.navbar-nav {

  line-height: 15px;

}

.navbar ul li a {

  padding: 0 0 5px 0;

}

.navigation .fa-instagram {

  margin-bottom: -5px;

}

.navigation button,

.navigation .nav-pictos a {

  font-size: x-large;

}

.navigation a,

.navigation .fa-brands,

.navigation button {

  transition: all 0.3s;

}

.navigation a:hover, 

.navigation .fa-brands:hover,

.navigation button:hover,

.navigation .navigation:hover {

  color: var(--secondary-color);

}

.navigation .navbar-toggler {

  box-shadow: none;

  border: 3px solid #fff;

  transition: all 0.3s;

  margin-bottom: 30px;

}

.navigation .navbar-toggler:active,

.navigation .navbar-toggler:focus,

.navigation .navbar-toggler:hover {

  border: 3px solid var(--secondary-color);

}

/*

  ####   ####  #    # ##### ###### #    # #    #

 #    # #    # ##   #   #   #      ##   # #    #

 #      #    # # #  #   #   #####  # #  # #    #

 #      #    # #  # #   #   #      #  # # #    #

 #    # #    # #   ##   #   #      #   ## #    #

  ####   ####  #    #   #   ###### #    #  ####

*/

/*             Section-1           */

.section-1 {

  background: url('../images/bar-bg.jpg') no-repeat;

  background-position-x: 52%;

  background-position-y: 40%;

}

.section-1 .banniere {

  padding-top: 27vh;

  padding-bottom: 20vh;

}

.banniere .actu h3, .banniere .actu p {

  padding-left: 40px;

  padding-right: 20px;

  letter-spacing: .2rem;

}

/* Slick */



.slick-prev {

  /* margin-left: 25px; */

  left: 2%;

  z-index: 10;

}

.slick-prev::before {

  content: url('../images/arrow-left.png');

}

.slick-next {

  margin-left: -45px;

  right: 2%;

}

.slick-next::before {

  content: url('../images/arrow-right.png');

}

/*           Section-2            */

.section-2 {

  background-image: url('../images/effet-bg-2.png');

  background-repeat: no-repeat;

  background-position: bottom;

}

.section-2 .part-1,

.section-2 .part-3 {

  background-color: var(--third-color);

}

.section-2 .part-1 h2,

.section-2 .part-3 h2 {

  color: var(--secondary-color);

}

.section-2 .part-1 p,

.section-2 .part-2 p,

.actus .actu p {

  font-family: 'Lato', sans-serif;

  font-size: 1.2rem;

}

/* .iframe-container {

  max-width: 200px;

} */

.section-2 .part-2 {

  background-color: #b8343f;

}

.section-2 .part-2 h2 {

  color: var(--third-color);

}

.section-2 .part-4 {

  color: #b8343f;

  background-color: #fff;

  font-size: 1.4rem;

  text-transform: uppercase;

  text-align: center;

  padding-top: 20px;

}

.section-2 .part-4 .voir-plan {

  text-decoration: none;

  color: var(--secondary-color);

  border: 1px solid var(--secondary-color);

  padding: 5px 10px 5px 10px;

  transition: 0.5s all ease;

}

.section-2 .part-4 .voir-plan:hover {

  background-color: var(--secondary-color);

  color: #fff;

}

.section-2 .barriques {

  margin-top: -100px;

  pointer-events: none;

}

/************************************ Page Plans ***************************************************/

.plans {

  padding-top: 200px;

  padding-bottom: 150px;

}

.plans iframe {

  max-width: 100%;

  padding: 20px;

  margin-bottom: 20px;

}

.form-control{
  font-family:Arial, Helvetica, sans-serif;
}

/*

 ######  ####   ####  ##### ###### #####

 #      #    # #    #   #   #      #    #

 #####  #    # #    #   #   #####  #    #

 #      #    # #    #   #   #      #####

 #      #    # #    #   #   #      #   #

 #       ####   ####    #   ###### #    #

*/

.footer ul {

  list-style: none;

}

.footer a {

  text-decoration: none;

  color: #fff;

  transition: all 0.3s;

}

.footer .nav-item .nav-link:hover,

.footer p a:hover {

  color: var(--secondary-color);

}

.footer h4 {

  color: var(--secondary-color);

}

/*

 #####  ######  ####  #####   ####  #    #  ####  # #    # ######

 #    # #      #      #    # #    # ##   # #      # #    # #

 #    # #####   ####  #    # #    # # #  #  ####  # #    # #####

 #####  #           # #####  #    # #  # #      # # #    # #

 #   #  #      #    # #      #    # #   ## #    # #  #  #  #

 #    # ######  ####  #       ####  #    #  ####  #   ##   ######

*/



/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {



  .navigation .logo {

    position: absolute;

    transform: scale(0.7);

    left: 2%;

    top: -100px;

  }

  .section-1 .banniere {

    padding-top: 30vh;

    padding-bottom: 30vh;

  }

  .section-2 .barriques {

    margin-top: -110px;

  }

}



/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {



  

  .section-2 .container {

    max-width: 900px;

    margin: auto;

  }

  .section-2 .barriques {

    margin-top: -140px;

  }



}



/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {



  .navigation .logo {

    position: absolute;

    transform: scale(2.5);

    left: 300%;

    top: 0;

  }

  .section-1 .banniere {

    max-width: 900px;

  }

  .banniere .actu h3, .banniere .actu p {

    padding-right: 80px;

    padding-left: 80px;

  }

  .navigation .logo {

    transform: scale(2.3);

    left: 8px;

  }

  .section-2 .container {

    margin-top: -120px;

  }

  .section-2 .barriques {

    margin-top: -170px;

  }



}

/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {



  .navigation .logo {

    transform: scale(2);

  }

  .section-2 .barriques {

    margin-top: -170px;

  }



}