/* css к карусели*/
#carousel1 {
    margin-top: 20px;
    margin-left: 0px;
}

.carouselMy {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.carouselMy .carouselMy-next,
.carouselMy .carouselMy-prev {
	position: absolute;
	display: block;
    width: 30px;
    height: 50px;
	background: #666;
    top: 103px;    
    cursor: pointer;
    z-index: 1;
    background: url('../icone/icone-carousel.png') no-repeat;
}

.carouselMy .carouselMy-next:hover,
.carouselMy .carouselMy-prev:hover {
    /*background: #333;*/
}

.carouselMy .carouselMy-next {    
    right: 0px;
    background-position: -30px 0;
}
.carouselMy .carouselMy-prev {   
    left: -5px;
    background-position: 0px 0; 
}

.carouselMy .carouselMy-next:hover {  
    background-position: -30px -60px;
}
.carouselMy .carouselMy-prev:hover { 
    background-position: 0px  -60px; 
}


.carouselMy .wrapper-display {
	position: relative;
	overflow: hidden;
	height: 310px;
}

.carouselMy .wrapper-display .display-carousel {
	position: absolute;
	width: 10px;
	/*left: 0px;*/
	/*transform: ;*/
	transition: left 0.3s cubic-bezier(0.4, 0, 1, 1) 0.2s;	
}

.carouselMy .wrapper-display .display-carousel .slide {
	box-sizing: border-box;
	position: relative;
	float: left;
	width: 190px;
	/*height: 290px;
	border: 1px solid #FFF;*/
	margin-top: 5px;
	margin-left: 22px;
	margin-right: 22px;
	/*box-shadow: 1px 1px 2px #000;*/
	cursor: pointer;
	height: 293px;
	overflow: hidden;
}

.carouselMy .wrapper-display .display-carousel .slide .more-slide {
	background: rgba(0, 0, 0, 0.77);;
	width: 100%;
	height: 293px;
	position: absolute;
	top: 263px;
	padding: 8px;
	color: #FFF;
	box-sizing: border-box;
	text-align: center;

	animation: eye3 1s;
   animation-fill-mode: both;
}

.carouselMy .wrapper-display .display-carousel .slide:hover .more-slide {
  animation: eye2 1s;
  animation-fill-mode: both;
}

@keyframes eye2 {
    from { 
      top: 263px;
    }   
    to { 
      top: 0px;
    }
}

@keyframes eye3 {
    from { 
      top: 0px;
    }   
    to { 
      top: 253px;
    }
}



.carouselMy .wrapper-display .display-carousel .slide .slide-img {
    width: 190px;
}

.carouselMy .wrapper-display .display-carousel .slide:hover {
	box-shadow: 0px -1px 8px rgba(0, 0, 51, 0.38);
}


.next-carouselMy {
	left: -100px; 

}



/*
@keyframes  nextMy {
	from {}
	to { left: -100px;}
}*/

.gazovik-content-carousel {
	position: absolute;
	left: 50%;	
	bottom: 50px;
	background: rgba(0, 0, 0, .8);
	width: 200px;
	z-index: 1000000;
	padding: 8px;
	color: #FFF;
	line-height: 16px;
	text-decoration: none;
	border-radius: 10px;

}

.gazovik-content-carousel a {
	color: #FFF;
	cursor: default;
}


.gazovik-content-carousel a:hover {
	text-decoration: none;
}

.gazovik-content-carousel span {
	text-decoration: underline;	
    cursor: pointer;
}

.gazovik-content-carousel span:hover {
	text-decoration: none;
}