/**
1) Изменить пути к фото кнопок
2) Менять размеры всей карусели 860px
3) Менять размеры всей (wrapper) всех блоков 810px
4) Менять каждого блока всех блоков 250px
*/

/********** Container ************/
.carousel  {
	max-width: 690px; /* ширина 3х блоков(810px) + ширина кнопок(25px) */
	margin: 0px auto;
	width:100%;
}

.carousel-wrapper {
	width: 620px;
	margin: 0 auto;
	overflow: hidden; /* скрываем содержимое, выходящее за рамки основной области */
	position:relative;
}
.carousel-items {
   width: 10000px; /* устанавливаем большую ширину для набора элементов */
   position: relative; /* позиционируем блок относительно основной области карусели */
   margin: 0 auto;
}
.carousel-block {
   float: left; /* выстраиваем все элементы карусели в ряд */
   width: 600px;/* задаём ширину каждого элемента */
   height: 220px;/* задаём высоту каждого элемента */
   padding: 0px 10px 10px 10px; /* делаем оступы, чтобы элементы не сливались */
   margin: 0px 10px 10px 10px; /* делаем оступы, чтобы элементы не сливались */
   border: 0px solid #000; /*Обводка для каждого блока*/ 
   box-sizing: border-box; /*включают в себя значения полей и границ, но не отступов (margin) */
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}


/*********** BUTTONS ***********/
.carousel-button-left a, .carousel-button-right a{
   width: 25px; 
   height: 36px; 
   position: relative;
   top: 75px; 
   cursor: pointer; 
   text-decoration:none;
}
.carousel-button-left a{
   float: left; 
   background: url(../img/carousel/arraw-left.png) no-repeat; 
   margin: 0 0 0 0;
}
.carousel-button-left a:hover{ 
   background: url(../img/carousel/arraw-left-hover.png) no-repeat; 
}
.carousel-button-right a{
   float: right;
   background: url(../img/carousel/arraw-right.png) no-repeat; 
   margin: 0 0 0 0;
}
.carousel-button-right a:hover{ 
   background: url(../img/carousel/arraw-right-hover.png) no-repeat; 
}



/********** Container ************/
.carousel1  {
	max-width: 790px; /* ширина 3х блоков(810px) + ширина кнопок(25px) */
	margin: 25px auto;
	width:100%;
}

.carousel1-wrapper {
	width: 720px;
	margin: 0 auto;
	overflow: hidden; /* скрываем содержимое, выходящее за рамки основной области */
	position:relative;
}
.carousel1-items {
   width: 10000px; /* устанавливаем большую ширину для набора элементов */
   position: relative; /* позиционируем блок относительно основной области карусели */
   margin: 0 auto;
}
.carousel1-block {
   float: left; /* выстраиваем все элементы карусели в ряд */
   width: 700px;/* задаём ширину каждого элемента */
   height: 400px;/* задаём высоту каждого элемента */
   padding: 0px 10px 10px 10px; /* делаем оступы, чтобы элементы не сливались */
   margin: 0px 10px 10px 10px; /* делаем оступы, чтобы элементы не сливались */
   border: 0px solid #000; /*Обводка для каждого блока*/ 
   box-sizing: border-box; /*включают в себя значения полей и границ, но не отступов (margin) */
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}


/*********** BUTTONS ***********/
.carousel1-button-left a, .carousel1-button-right a{
   width: 25px; 
   height: 36px; 
   position: relative;
   top: 75px; 
   cursor: pointer; 
   text-decoration:none;
}
.carousel1-button-left a{
   float: left; 
   background: url(../img/carousel/arraw-left.png) no-repeat; 
   margin: 0 0 0 0;
}
.carousel1-button-left a:hover{ 
   background: url(../img/carousel/arraw-left-hover.png) no-repeat; 
}
.carousel1-button-right a{
   float: right;
   background: url(../img/carousel/arraw-right.png) no-repeat; 
   margin: 0 0 0 0;
}
.carousel1-button-right a:hover{ 
   background: url(../img/carousel/arraw-right-hover.png) no-repeat; 
}



/*////////МОБИЛКИ////////*/

@media screen and (max-width: 1000px) {
	.carousel1  {
		max-width: 760px; /* ширина 3х блоков(810px) + ширина кнопок(25px) */

	}

	.carousel1-wrapper {
		width: 670px;
	}

	.carousel1-block {
	   width: 670px;/* задаём ширину каждого элемента */
	}

}


@media screen and (max-width: 768px) {
	.carousel  {
		max-width: 300px; /* ширина 3х блоков(810px) + ширина кнопок(25px) */

	}

	.carousel-wrapper {
		width: 250px;
	}

	.carousel-block {
		width: 230px;/* задаём ширину каждого элемента */
		height: 350px;
	}
	
	
		
	.carousel1  {
		max-width: 300px; /* ширина 3х блоков(810px) + ширина кнопок(25px) */

	}

	.carousel1-wrapper {
		width: 250px;
	}

	.carousel1-block {
		width: 230px;/* задаём ширину каждого элемента */
		height: 520px;
		text-align: center;
	}
	



}