@media only screen and (max-width:1023px)
{
  /*
  -------------------------------------------------------------------------------
  -- PHOTO SAC
  -------------------------------------------------------------------------------
  */

  .navBtn{
    margin: 50px 3vw 75px 3vw;
    position:relative;
  }

  #photoSac {
    position: static;
    z-index: 2;
    width: 90vw;
    margin: 5% 0;
  }

  #pictureBox {
    width: 90vw;
    height: 64.28vw;
    border-radius: 12px;
  }

  #pictureBox img {
    width: 90vw;
  }

  #listePhotos {
    width: 100%;
    margin: 6% 0;
  }

  .miniature {
    height: 13vw;
    width: 20.5%;
    margin: 0 6% 4% 0;
    border-radius: 6px;

  }
  .miniature:nth-child(6n){
    margin-right: 6%;
  }
  .miniature:nth-child(4n){
    margin-right: 0;
  }


  /*
  -------------------------------------------------------------------------------
  -- description sacs
  -------------------------------------------------------------------------------
  */

  #content {
    float:none;
    width: 90vw;
    margin: 0 5vw;
  }


  /*
  -------------------------------------------------------------------------------
  -- prix du sac
  -------------------------------------------------------------------------------
  */

  #sacPrix {
    margin:20% 20% 0 20%;
    width: 60%;
    font-size: 2.6rem;
  }

  #texteBuy {
    margin: 15px 0 20% 0;
  }

  #prixSac{
    margin: 20px 0;
  }

  /*
  -------------------------------------------------------------------------------
  -- DESCRIPTION MODELE
  -------------------------------------------------------------------------------
  */

  #modeleDescription{
    margin: 30px 0 100px 0;
  }

  /*
  -------------------------------------------------------------------------------
  -- DESCRIPTION SAC
  -------------------------------------------------------------------------------
  */

  #sacDescription{
    margin: 2em 0 4em 0;
  }

  /*
  -------------------------------------------------------------------------------
  -- SAC RECOMMANDATION
  -------------------------------------------------------------------------------
  */

  #listeMiniatureSacs {
    width: 100%;
  }

}



@media only screen and (any-hover: none) and (max-width:1023px)
{
    #retour{
      line-height: 180px;
    }

    #retour div {
      height: 8px;
      bottom: 40px;
    }

    .miniature{
      box-shadow:	0 0 0 6px #fff, 0 0 0 14px #fff;
    }

    .miniature:hover{
      box-shadow:	0 0 0 6px #fff, 0 0 0 14px #bbb;
    }

    .miniature.select {
      box-shadow:	0 0 0 6px #fff, 0 0 0 14px #111;
    }


    /*
    -------------------------------------------------------------------------------
    -- BOUTON BUY
    -------------------------------------------------------------------------------
    */

    .btnBuy{
      border: 8px solid #ddd;
      font-size: 1em;
      height: 130px;
      line-height: 130px;
      border-width: 8px;
    }

    a .btnBuy {
      border: 8px solid #ddd;
    }

    a:hover .btnBuy {
      -webkit-box-shadow: 0px 0px 0px 8px #111;
      -moz-box-shadow: 0px 0px 0px 8px #111;
      box-shadow: 0px 0px 0px 8px #111;
    }

    /*
    -------------------------------------------------------------------------------
    -- CHOIX DE COMBINAISON
    -------------------------------------------------------------------------------
    */

    .colorChoice {
      width: 128px;
      height: 128px;
      border-radius: 100px;
      margin: 0 40px 40px 0;
      box-shadow:	0 0 0 6px #fff, 0 0 0 14px #fff;
    }

    .colorCircle {
      width: 128px;
      height: 128px;
    }

    .color1{
      width: 128px;
      height: 128px;
      border-radius: 64px;
    }

    .color2{
      position: absolute;
      width: 128px;
      height: 64px;
      border-radius: 64px 64px 0 0;
    }

    .colorNumber {
      width: 128px;
      line-height: 128px;
      font-size: 3.2rem;
    }

    .colorChoice:hover {
      box-shadow:	0 0 0 6px #fff, 0 0 0 14px #bbb;
    }

    .colorChoice.select {
      box-shadow:	0 0 0 6px #fff, 0 0 0 14px #111;
    }

    /*
    -------------------------------------------------------------------------------
    -- SAC RECOMMANDATION
    -------------------------------------------------------------------------------
    */
    .miniatureSac {
      -webkit-filter: none; /* Safari 6.0 - 9.0 */
        filter: none;
        overflow: visible;
    }
    .miniatureTexteSac{
      bottom: -1.5em;
      left:0px;
      opacity: 1;
    }
}
