.wrapper {
 min-height: 100vh;
}
 
 .background {
  margin-top: 50px;
    width: 100vw;
    object-fit: cover;
    opacity:;
    animation-name: fadein;
    animation-duration: 5s;
 
}

@keyframes fadein {
  from  {
    opacity:0;
  }

  to  {
    opacity:1;
  }
}


.text-accueil{
  position: relative;
  top:-100px;
  left:10%;
  padding: 30px;
  background-color: white;
  line-height:1.2;
  text-indent: 0;
  white-space: pre-line;
  font-size: 16px;
  height:auto;
  color: #3C6931;

  animation-name: slidein;
  animation-duration: 5s;

}

.bandeau
{
  position: relative;
  top:-100px;
  height: 80px;
  background-color: ;
  font-size:2em;
  color: #3C6931;
  background-color: rgba(60,105,49, .3 );
  text-align: center;
}


@keyframes slidein {
  from  {
    top:-100px;
    left:100%;
    color: rgba(255,255, 255, 0);
    background-color: rgba(255,255, 255, 0);
  }

  to  {
    top:-100px;
    left:10%;
    color: #3C6931;
    background-color: rgba(255,255, 255, 1);
  }

}

.groupe {
    animation-name: news;
    animation-duration: 3s;
    position: relative;
}

@keyframes news {
  from  {
    position: absolute;
    top:0px;
   
  }

  to  {
    position: absolute;
    top:1200px;
   
  }

}




.focusProduit {
    width: 100%;
}


.nomProduit {
    font-weight: bold;
    color: #3C6931; 
}



.description {
    font-size: 16px;
    line-height: 1.2 ;
    font-weight: normal;
    color: #3C6931;
}

.trait {
    height: 1px;
    background-color:#000;

}
.btn {
    color: #3C6931;
    padding: 0;
    margin-top: 20px;
    background-color: rgba(60,105,49, .3 );
    border: solid 1px #3C6931;
    border-color:  #3C6931;
    font-size: 16px;
    transition: all .3s ease-in-out;
}
.btn:hover{
    transform: scale(1.1); 
}


/* iphone */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait)  {
    .nomProduit {
      color: #3C6931; 
      font-size:4vw;
    }
    

	
	}


/* ipad */
	@media only screen 
	and (min-device-width: 768px) 
	and (max-device-width: 1024px) 
	and (-webkit-min-device-pixel-ratio: 2) {
	.nomProduit {
    color: #3C6931; 
		font-size:3vw;
	}
	
	}

/* Galaxy from S6 */
	@media only screen 
  and (min-device-width: 360px) 
  and (max-device-width: 740px) 
  and (-webkit-device-pixel-ratio: 4) 
  and (orientation: portrait) {
	.nomProduit {
    color: #3C6931; 
		font-size:4vw;
	}
	

  }