﻿
 

@keyframes spin {
  100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}

.tourne {
  animation: spin 55s linear infinite;
}


.zoom:hover {                                  
  cursor: zoom-in;
}
/*
cursor:zoom-in
cursor:crosshair
cursor:grab
cursor:help
cursor:cell
cursor:col-resize
cursor:move
cursor:pointer
cursor:not-allowed*/

.horizontal-scroll-item {
	height: 100%;
	width: 464px;
	background-size: cover;
	animation-duration: 30s;	
	animation-name: HorizontalScroll;
	animation-iteration-count: infinite;
	animation-timing-function: linear;

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating {
  animation: rotating 5s linear infinite;
}


	

@keyframes infiniteScroll {
	from {transform: translateX(0) }
	to {transform: translateX(calc(0px - 50% - 50px));}
}
	


.item-1 {
  background-image:url(../../images/cagep.jpg);
}

.item-2 {
  background-image:url(../../images/aboucayap.jpg);
}

.item-3 {
  background-image:url(../../images/commande2.jpg);

}
      


@keyframes infiniteScroll {
	from {transform: translateX(0) }
	to {transform: translateX(calc(0px - 50% - 50px));}
}
	







.taille:hover
{
    height : 400px;
    width : auto;
    cursor:zoom-in;
}


.ombre {
    filter:drop-shadow(5px 5px 5px #161616) /* droite - bas- flou autour - couleur */
    }

.ombre2 {
    filter:drop-shadow(2px 2px 5px #161616) /* droite - bas- flou autour - couleur */
    }

.flou:hover {
    filter:blur(2px)
}

.opaque:hover {
    filter:opacity(75%)
}


.posi {
  position: absolute;
  top: 150px;
  left: 200px;
}


.droite:hover
{
	/*margin-left:120px; éplacement à droite*/
	margin-left:55px;
}



.arrondi
{
	width: 160px;
	height: 220px;
	cursor: pointer;
	border-radius:15px;/*taille de l'arrondi */
	background: #444;
	padding:1px;/*épaisseur contour*/
	box-shadow: 3px 3px 15px #111111; /*épaisseur ombre*/
	
}



.arrondi2
{
	width: 260px;
	height: 188px;
	margin: 20px;
	cursor: pointer;
	border-radius:25px;/*taille de l'arrondi */
	background: #444;
	box-shadow: 5px 5px 5px #aaa; /*position ombre */
	padding:1px;/*épaisseur contour*/
}

.ombre2 {
     border : 1px solid #000000;
     box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);

}


.arrondi3
{
	width: 200px;
	height: 188px;
	margin: 20px;
	cursor: pointer;
	border-radius:25px;/*taille de l'arrondi */
	background: #444;
	box-shadow: 10px 10px 5px #aaa; /*position ombre */
	padding:1px;/*épaisseur contour*/
}


.arrondi4
{
	width: 180px;
	height: 188px;
	cursor: pointer;
	border-radius:15px;/*taille de l'arrondi */
	background: #444;
	box-shadow: 1px 1px 0px #aaa; /*position ombre */
	padding:1px;/*épaisseur contour*/
	margin-bottom:0px;
	margin-right:20px
}


.ombre3 {
     -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
     -ms-transition: all 0.2s;
     -o-transition: all 0.2s;
     transition: all 0.2s;
}
.ombre3:hover {
     border : 2px solid #000000;
     box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
	 /*margin-top:-25px;*/
}



.transform {
     -webkit-transition: all 0.s;
     -moz-transition: all 0.s;
     -ms-transition: all 0.2s;
     -o-transition: all 0.2s;
     transition: all 0.5s;
}
.transform:hover {
	/*scale(2, 0.5); H et V
	transform: translate(200px, 10px)*/
	 transform:scale(3);
    transform-origin: top left;
 
}


.placv10:hover
{
	/*margin-left:120px; éplacement à droite*/
	
}





