/* Responsive Styles
================================================== */

/***********  Smartphone *************/
@media screen and (max-width: 480px) {
  /* Navbar */
  #navbar {
    display: none !important;
    transform: translate(100%, 0);
    transition: transform 0.4s ease;
  }

  .burger {
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 3;
    top: 5px;
    left: 5px;
    padding: 10px;
    font-size: 25px;
  }

  .burger-icon::before {
    display: block;
    width: 25px;
    height: 25px;
    content: "\f0c9";
    font-family: FontAwesome;
    color: #676952;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }

  body.open .burger-icon::before {
    width: 25px;
    height: 25px;
    content: "\f00d";
    font-family: FontAwesome;
    color: #676952;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }

  body.open #navbar {
    transform: translate(0, 0);
    display: block !important;
  }

  body.open main {
    display: none !important;
  }

  /* Page d'accueil */
  .detail_recette{
    width: 100%;
    margin: 10px 0;
  }
  .detail_recette img{
    height: 200px;
  }

  /* Page détail recette */
  img.recipe_image{
    width: 100%;
    margin: 0!important;
  }

  article{
    width: 100%;
  }

  .recipe_comments{
    margin-top: 25px;
    padding: 0;
    width: 100%;
  }
  
  /* Page ingredients */
  .box_presentation_ingredients{
    justify-content: space-around;
  }

  .box_individual_ingredient{
    width: 110px!important;
    margin: 5px!important;
    padding: 5px!important;
  }
}

/***********  Tablette *************/
@media screen and (max-width: 768px) {
  #navbar {
    display: none !important;
  }

  .burger {
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 3;
    top: 5px;
    left: 5px;
    padding: 10px;
    font-size: 25px;
  }

  .burger-icon::before {
    display: block;
    width: 25px;
    height: 25px;
    content: "\f0c9";
    font-family: FontAwesome;
    color: #676952;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }

  body.open .burger-icon::before {
    width: 25px;
    height: 25px;
    content: "\f00d";
    font-family: FontAwesome;
    color: #fff;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }

  body.open #navbar {
    transform: translate(0, 0);
    display: block !important;
    width: 100%;
    position: fixed;
    transition-duration: 0.4s;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
}

/***********  Laptop *************/
@media screen and (max-width: 1024px) {
  #navbar {
    translate: 0 0;
    opacity: 1;
    visibility: visible;
    filter: blur(0);
  }
}

/***********  Desktop *************/
@media screen and (max-width: 1200px) {
  #navbar {
    translate: 0 0;
    opacity: 1;
    visibility: visible;
    filter: blur(0);
  }
}

/***********  TV *************/
@media screen and (min-width: 1200px) {
  #navbar {
    translate: 0 0;
    opacity: 1;
    visibility: visible;
    filter: blur(0);
  }
}