html, body {
  height: 100%; }

body {
  color: #6f6f6f;
  font-family: 'Fira Sans', sans-serif;
  -webkit-font-smoothing: antialiased; }

@media screen and (min-width: 1224px) {
  #front {
    position: relative;
    width: 100%;
    height: 100%; }

  #bothCol {
    display: flex;
    position: relative;
    top: 20%;
    height: 72%;
    justify-content: space-between; }

  #menuProduits {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 15%;
    left: 0%;
    width: 100%; }

  #firstRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 12%;
    left: 0%;
    width: 100%; }

  #secondRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 12%;
    left: 0%;
    width: 100%; }

  .containerMenu {
	  height: 75px;
    display: flex;
    justify-content: center;
    position: relative;
    /*height: 100%;*/
    width: 100%;
    margin-left: 2%;
    margin-right: 2%;
    cursor: pointer; }
	
	.containerMenu:hover .overAbove, .containerMenu.active .overAbove {
		height: 35px;
	}
	
	.containerMenu:hover .overlay, .containerMenu.active .overlay {
		height: 6px;
	}

  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ee3967;
    overflow: hidden;
    width: 100%;
    height: 0;
	  bottom: -20px;
    transition: .5s ease; }

  .overAbove {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: #ee3967;
    overflow: hidden;
    width: 100%;
    height: 0;
	  top: -63px;
    transition: .5s ease; }

  /*.iconMenu {
    height: 61px; }*/

  /*#icon2 {
    margin-top: 20%; }*/

  /*#icon3 {
    margin-top: -2.8%; }*/

  /*#overAbove1 {
   top: -70px; }

  #over1 {
    margin-bottom: -6%; }

  #overAbove2 {
    top: -70px; }

  #over2 {
    margin-bottom: -6%; }*/

  /*#overAbove3 {
    margin-bottom: 21%; }*/

  /*#over3 {
    margin-bottom: -6%; }

  #overAbove4 {
    margin-bottom: 29.5%; }

  #over4 {
    margin-bottom: -9%; }

  #overAbove5 {
    margin-bottom: 21%; }

  #over5 {
    margin-bottom: -8%; }

  #over6 {
    margin-bottom: -8%; }

  #overAbove6 {
    margin-bottom: 21%; }*/

  /*#cont1 {
    margin-top: 0.5%; }*/

  /*#cont3 {
    height: 95%; }

  #cont4 {
    margin-top: 1.2%; }

  #cont1:hover #over1, #cont1.active #over1 {
    height: 9.5%; }

  #cont1:hover #overAbove1, #cont1.active #overAbove1 {
    bottom: 40%;
    height: 60%; }

  #cont2:hover #over2, #cont2.active #over2 {
    height: 8.2%; }

  #cont2:hover #overAbove2, #cont2.active #overAbove2 {
    bottom: 50%;
    height: 50%; }

  #cont3:hover #over3, #cont3.active #over3 {
    height: 7.8%; }

  #cont3:hover #overAbove3, #cont3.active #overAbove3 {
    bottom: 50%;
    height: 50%; }

  #cont4:hover #over4, #cont4.active #over4 {
    height: 11%; }

  #cont4:hover #overAbove4, #cont4.active #overAbove4 {
    bottom: 15%;
    height: 75%; }

  #cont5:hover #over5, #cont5.active #over5 {
    height: 8.5%; }

  #cont5:hover #overAbove5, #cont5.active #overAbove5 {
    bottom: 50%;
    height: 50%; }

  #cont6:hover #over6, #cont6.active #over6 {
    height: 8.5%; }

  #cont6:hover #overAbove6, #cont6.active #overAbove6 {
    bottom: 50%;
    height: 50%; }*/

  #colLeft {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin-left: 3%;
    width: 30%; }

  @keyframes moveTitle {
    0% {
      left: -50%; }
    100% {
      left: 0; } }
  #produitsTitle {
    position: relative;
    margin-right: 6%;
    animation-name: moveTitle;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    top: 20%; }
    #produitsTitle span {
      display: inline-block;
      font-size: 42px;
      letter-spacing: 0.12em;
      color: #fff;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f38f4d+0,ed246d+100 */
      background: #f38f4d;
      /* Old browsers */
      background: -moz-linear-gradient(left, #f38f4d 0%, #ed246d 100%);
      /* FF3.6-15 */
      background: -webkit-linear-gradient(left, #f38f4d 0%, #ed246d 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to right, #f38f4d 0%, #ed246d 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38f4d', endColorstr='#ed246d',GradientType=1 );
      /* IE6-9 */
      padding: 8px 60px 8px 25px;
      text-transform: uppercase;
      /*position: absolute;
      top: 30vh;
      left: 0;*/ }
      #produitsTitle span:nth-of-type(2) {
        margin-top: 10px;
        padding-right: 90px;
        /*top: 37vh;*/ }

  @keyframes moveText {
    0% {
      left: -50%; }
    100% {
      left: 0; } }
  #textArea {
    position: relative;
    /*margin-left:6%;*/
    margin-right: 6%;
    animation-name: moveText;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    top: 28%; }

  #p1 {
    font-weight: bold;
    margin-bottom: 6%; }

  .caracProd {
    margin-top: 3%;
    margin-left: 3%; }

  #colRight {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1%;
    width: 70%;
    background-image: url("/img/pattern.png");
    background-repeat: repeat repeat;
	overflow: hidden;
    margin-right: 1%;
    margin-bottom: 1%; }

  #produitsIMG {
    position: relative;
    top: 15%;
    left: 15%; }

  @keyframes moveProd {
    0% {
      margin-left: 100%; }
    100% {
      left: inherit;
      top: auto; } }
  #prod {
    animation-name: moveProd;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    margin-top: auto;
    margin-bottom: auto; } }
@media screen and (min-width: 751px) and (max-width: 1223px) {
  #front {
    position: relative;
    width: 100%;
    height: 100%; }

  #bothCol {
    display: flex;
    position: relative;
    top: 20%;
    height: 72%;
    justify-content: space-between; }

  #menuProduits {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 15%;
    left: 0%;
    width: 100%; }

  #firstRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 12%;
    left: 0%;
    width: 100%; }

  #secondRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 12%;
    left: 0%;
    width: 100%; }

  .containerMenu {
    display: flex;
    justify-content: center;
    position: relative;
    height: 100%;
    width: 100%;
    margin-left: 2%;
    margin-right: 2%;
    cursor: pointer; }

  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ee3967;
    overflow: hidden;
    width: 100%;
    height: 0;
	  bottom: -20px;
    transition: .5s ease; }
	
	.containerMenu:hover .overAbove, .containerMenu.active .overAbove {
		height: 35px;
	}
	
	.containerMenu:hover .overlay, .containerMenu.active .overlay {
		height: 6px;
	}

  .overAbove {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: #ee3967;
    overflow: hidden;
    width: 100%;
    height: 0;
	  top: -63px;
    transition: .5s ease; }

  .iconMenu {
    margin-bottom: 5%; }

  /*#icon2 {
    margin-top: 20%; }*/

  /*#icon3 {
    margin-top: -2.8%; }*/

  /*#overAbove1 {
    margin-bottom: 27%; }

  #over1 {
    margin-bottom: -6%; }

  #overAbove2 {
    margin-bottom: 22.5%; }

  #over2 {
    margin-bottom: -6%; }

  #overAbove3 {
    margin-bottom: 23%; }

  #over3 {
    margin-bottom: -6%; }

  #overAbove4 {
    margin-bottom: 36%; }

  #over4 {
    margin-bottom: -11%; }

  #overAbove5 {
    margin-bottom: 24%; }

  #over5 {
    margin-bottom: -8%; }

  #over6 {
    margin-bottom: -8%; }

  #overAbove6 {
    margin-bottom: 24%; }*/

  /*#cont1 {
    margin-top: 0.5%; }*/

  #cont3 {
    height: 95%; }

  #cont4 {
    margin-top: 1.2%; }

  #cont1:hover #over1 {
    height: 9.5%; }

  #cont1:hover #overAbove1 {
    bottom: 40%;
    height: 60%; }

  #cont2:hover #over2 {
    height: 8.2%; }

  #cont2:hover #overAbove2 {
    bottom: 50%;
    height: 50%; }

  #cont3:hover #over3 {
    height: 7.8%; }

  #cont3:hover #overAbove3 {
    bottom: 50%;
    height: 50%; }

  #cont4:hover #over4 {
    height: 11%; }

  #cont4:hover #overAbove4 {
    bottom: 15%;
    height: 75%; }

  #cont5:hover #over5 {
    height: 8.5%; }

  #cont5:hover #overAbove5 {
    bottom: 50%;
    height: 50%; }

  #cont6:hover #over6 {
    height: 8.5%; }

  #cont6:hover #overAbove6 {
    bottom: 50%;
    height: 50%; }

  #colLeft {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin-left: 3%;
    width: 30%; }

  @keyframes moveTitle {
    0% {
      left: -50%; }
    100% {
      left: 0; } }
  #produitsTitle {
    position: relative;
    margin-right: 6%;
    animation-name: moveTitle;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    top: 20%; }

  #pageTitle {
    display: block;
    width: 80%;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto; }

  @keyframes moveText {
    0% {
      left: -50%; }
    100% {
      left: 0; } }
  #textArea {
    position: relative;
    /*margin-left:6%;*/
    margin-right: 6%;
    animation-name: moveText;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    top: 28%; }

  #p1 {
    font-weight: bold;
    margin-bottom: 6%; }

  .caracProd {
    margin-top: 3%;
    margin-left: 3%; }

  #colRight {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1%;
    width: 70%;
    background-image: url("/img/pattern.png");
    background-repeat: repeat repeat;
	overflow: hidden;
    margin-right: 1%;
    margin-bottom: 1%; }

  #produitsIMG {
    position: relative;
    top: 15%;
    left: 15%; }

  @keyframes moveProd {
    0% {
      margin-left: 100%; }
    100% {
      left: inherit;
      top: auto; } }
  #prod {
    width: 60%;
    padding-top: 3%;
    animation-name: moveProd;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    margin-top: auto;
    margin-bottom: auto; } }
@media screen and (min-width: 621px) and (max-width: 750px) {
  #front {
    position: relative;
    width: 100%;
    height: 100%; }

  #bothCol {
    display: flex;
    position: relative;
    top: 12%;
    height: 80%;
    flex-direction: column-reverse;
    align-items: center; }

  #menuProduits {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 12%;
    left: 0%;
    width: 100%; }

  .containerMenu {
    display: flex;
    justify-content: center;
    position: relative;
    height: 100%;
    width: 100%;
    margin-left: 2%;
    margin-right: 2%;
    cursor: pointer; }

  #firstRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 12%;
    left: 0%;
    width: 100%; }

  #secondRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 12%;
    left: 0%;
    width: 100%; }

  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ee3967;
    overflow: hidden;
    width: 100%;
    height: 0;
	  bottom: -20px;
    transition: .5s ease; }

  .overAbove {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: #ee3967;
    overflow: hidden;
    width: 100%;
    height: 0;
	  top: -63px;
    transition: .5s ease; }

  .iconMenu {
    margin-bottom: 5%; }

  /*#icon2 {
    margin-top: 20%; }

  #icon3 {
    margin-top: -2.8%; }*/

  #overAbove1 {
    margin-bottom: 27%; }

  #over1 {
    margin-bottom: -6%; }

  #overAbove2 {
    margin-bottom: 22.5%; }

  #over2 {
    margin-bottom: -6%; }

  #overAbove3 {
    margin-bottom: 23%; }

  #over3 {
    margin-bottom: -6%; }

  #overAbove4 {
    margin-bottom: 36%; }

  #over4 {
    margin-bottom: -14%; }

  #overAbove5 {
    margin-bottom: 24%; }

  #over5 {
    margin-bottom: -8%; }

  #over6 {
    margin-bottom: -8%; }

  #overAbove6 {
    margin-bottom: 24%; }

  /*#cont1 {
    margin-top: 0.5%; }*/

  #cont3 {
    height: 95%; }

  #cont4 {
    margin-top: 1.2%; }

  #cont1:hover #over1 {
    height: 9.5%; }

  #cont1:hover #overAbove1 {
    top: 0;
    height: 60%; }

  #cont2:hover #over2 {
    height: 8.2%; }

  #cont2:hover #overAbove2 {
    bottom: 50%;
    height: 50%; }

  #cont3:hover #over3 {
    height: 7.8%; }

  #cont3:hover #overAbove3 {
    bottom: 50%;
    height: 50%; }

  #cont4:hover #over4 {
    height: 11%; }

  #cont4:hover #overAbove4 {
    bottom: 15%;
    height: 75%; }

  #cont5:hover #over5 {
    height: 8.5%; }

  #cont5:hover #overAbove5 {
    bottom: 50%;
    height: 50%; }

  #cont6:hover #over6 {
    height: 8.5%; }

  #cont6:hover #overAbove6 {
    bottom: 50%;
    height: 50%; }

  #colLeft {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    width: 100%;
    height: 40%; }

  @keyframes moveTitle {
    0% {
      top: 100%; }
    100% {
      top: 7.5%; } }
  #produitsTitle {
    position: relative;
    animation-name: moveTitle;
    animation-duration: 1s;
    animation-fill-mode: forwards; }

  #pageTitle {
    display: block;
    width: 60%;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto; }

  @keyframes moveText {
    0% {
      top: 100%; }
    100% {
      top: 16%; } }
  #textArea {
    position: relative;
    /*margin-left:6%;*/
    margin-right: 6%;
    animation-name: moveText;
    animation-duration: 1s;
    animation-fill-mode: forwards; }

  #p1 {
    font-weight: bold; }

  .caracProd {
    margin-top: 3%;
    margin-left: 3%; }

  #colRight {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1%;
    background-image: url("/img/pattern.png");
    background-repeat: repeat repeat;
	overflow: hidden;
    width: 100%;
    height: 60%; }

  #produitsIMG {
    position: relative;
    top: 15%;
    left: 15%; }

  @keyframes moveProd {
    0% {
      margin-left: 100%; }
    100% {
      left: inherit;
      top: auto; } }
  #prod {
    width: 60%;
    padding-top: 3%;
    animation-name: moveProd;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    margin-top: auto;
    margin-bottom: auto; }

  #listDesc {
    margin-left: 5%;
    margin-right: 5%; } }
@media screen and (max-width: 620px) {
  #front {
    position: relative;
    width: 100%;
    height: 100%; }

  #bothCol {
    display: flex;
    position: relative;
    top: 12%;
    height: 80%;
    flex-direction: column-reverse;
    align-items: center; }

  #menuProduits {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 12%;
    left: 0%;
    width: 100%;
    flex-direction: column; }

  #firstRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 12%;
    left: 0%;
    width: 100%;
    margin-top: 5%;
    margin-bottom: 10%; }

  #secondRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: 12%;
    left: 0%;
    width: 100%;
    margin-bottom: 5%; }

  .containerMenu {
    display: flex;
    justify-content: center;
    position: relative;
    height: 100%;
    width: 100%;
    margin-left: 2%;
    margin-right: 2%;
    cursor: pointer; }

  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ee3967;
    overflow: hidden;
    width: 100%;
    height: 0;
	  bottom: -20px;
    transition: .5s ease; }

  .overAbove {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: #ee3967;
    overflow: hidden;
    width: 100%;
    height: 0;
	  top: -63px;
    transition: .5s ease; }

  .iconMenu {
    margin-bottom: 5%; }

  /*#icon2 {
    margin-top: 20%; }

  #icon3 {
    margin-top: -2.8%; }*/

  #overAbove1 {
    margin-bottom: 27%; }

  #over1 {
    margin-bottom: -6%; }

  #overAbove2 {
    margin-bottom: 22.5%; }

  #over2 {
    margin-bottom: -6%; }

  #overAbove3 {
    margin-bottom: 23%; }

  #over3 {
    margin-bottom: -6%; }

  #overAbove4 {
    margin-bottom: 36%; }

  #over4 {
    margin-bottom: -13%; }

  #overAbove5 {
    margin-bottom: 24%; }

  #over5 {
    margin-bottom: -8%; }

  #over6 {
    margin-bottom: -8%; }

  #overAbove6 {
    margin-bottom: 24%; }

  /*#cont1 {
    margin-top: 0.5%; }*/

  #cont3 {
    height: 95%; }

  #cont4 {
    margin-top: 1.2%; }

  #cont1:hover #over1 {
    height: 9.5%; }

  #cont1:hover #overAbove1 {
    bottom: 40%;
    height: 60%; }

  #cont2:hover #over2 {
    height: 8.2%; }

  #cont2:hover #overAbove2 {
    bottom: 50%;
    height: 50%; }

  #cont3:hover #over3 {
    height: 7.8%; }

  #cont3:hover #overAbove3 {
    bottom: 50%;
    height: 50%; }

  #cont4:hover #over4 {
    height: 11%; }

  #cont4:hover #overAbove4 {
    bottom: 15%;
    height: 75%; }

  #cont5:hover #over5 {
    height: 8.5%; }

  #cont5:hover #overAbove5 {
    bottom: 50%;
    height: 50%; }

  #cont6:hover #over6 {
    height: 8.5%; }

  #cont6:hover #overAbove6 {
    bottom: 50%;
    height: 50%; }

  #colLeft {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 40%; }

  @keyframes moveTitle {
    0% {
      top: 100%; }
    100% {
      top: 7.5%; } }
  #produitsTitle {
    position: relative;
    animation-name: moveTitle;
    animation-duration: 1s;
    animation-fill-mode: forwards; }

  #pageTitle {
    display: block;
    width: 60%;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto; }

  @keyframes moveText {
    0% {
      top: 100%; }
    100% {
      top: 16%; } }
  #textArea {
    position: relative;
    /*margin-left:6%;*/
    margin-right: 6%;
    animation-name: moveText;
    animation-duration: 1s;
    animation-fill-mode: forwards; }

  #p1 {
    font-weight: bold; }

  .caracProd {
    margin-top: 3%;
    margin-left: 3%; }

  #colRight {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1%;
    background-image: url("/img/pattern.png");
    background-repeat: repeat repeat;
	overflow: hidden;
    width: 100%;
    height: 60%; }

  #produitsIMG {
    position: relative;
    top: 15%;
    left: 15%; }

  @keyframes moveProd {
    0% {
      margin-left: 100%; }
    100% {
      left: inherit;
      top: auto; } }
  #prod {
    position: relative;
    width: 60%;
    padding-top: 3%;
    animation-name: moveProd;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    margin-top: auto;
    margin-bottom: auto; }

  #listDesc {
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%; } }


@media screen and (max-height: 940px) {
  #menuProduits {
    padding: 10px 0; top: 18%; }
}

@media screen and (max-height: 800px) {
  #menuProduits {
    padding: 10px 0; top: 19%; }
}

@media screen and (max-height: 670px) {
  #menuProduits {
    padding: 10px 0; top: 21%; }
}