main{
	width: 1024px;
	margin: 0 auto;
}


#home-page-wrapper{
    display: block;
    height: auto;
    margin: 0 auto;
    position: relative;
    width: 1024px;
}


#hero-area{
    display: block;
    height: 500px;
    position: relative;
    width: 1024px;
    text-align: center;
/*    float: left;
*/

}

#promo-area{
    display: block;
    height: 500px;
    position: relative;
    width: 1024px;
/*    float: left;
*/    background-image: url(../images/home/stickers.png);
    background-size: 100% 100%;
}


#promo-area a{
  position: relative;
  display: block;
  width: 270px;
  height: 270px;
  margin: 63px auto 0 auto;
  background-image: url(../images/home/enter-ciy-btn-sprite.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

#promo-area a:hover{
	background-position: 0 -270px;
}


.hoveroff{
	background-position: 0 0;
}

#prev {
  float: left;
  width: 60px;
  height: 60px;
  display: block;
  position: relative;
  margin-top: 21%;
  background-image: url(../images/ui/arrows-pink-btn-sprite.png);
  background-position: 0 0;
}


#prev:hover{
	background-position: 0 62px;
}

#carousel{
	float: left;
	height: 497px;
	width: 898px;
	position: relative;
	overflow: hidden;
	left: 5px;

}


.carousel-image{
	float: left;
	width: 100%;
	/*height: 100%;*/
	height: auto;
	display: block;
	position: absolute;
	opacity: 0;
/*	background-image: url(../images/home/promo1.png);
*/	/*background-size: 100% 100%;*/

	background-size: 100% auto;
}

.carousel-image img{
  position: relative;
  width: inherit;
  height: inherit;
  background-size: 100% 100%;
}

#next {
  float: right;
  width: 60px;
  height: 60px;
  display: block;
  position: relative;
  margin-top: 21%;
  background-image: url(../images/ui/arrows-pink-btn-sprite.png);
  background-position: 63px 0px;
}


#next:hover{
	background-position: 63px 62px;
}

#paging-wrapper{
/*	width: 160px;
	width:96px;*/
	position: relative;
	clear: both;
	margin: 0 auto;
	height: 24px;
	padding-top: 5%;
	display: inline-block;
}


.stepper {
  display: block;
  position: relative;
  float: left;
  background-image: url(../images/home/rotation-btn-sprite.png);
  width: 24px;
  height: 24px;
  background-position: 0 0;
  margin-left: 8px;
}


.stepper:hover {
  background-position: 0 25px;

}

/*

*/
.show{

	opacity: 1;
	transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-webkit-transition: opacity 1s ease-in-out;


}


.hide{
	/*opacity: 0;*/
	/*transition: display   ,opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-webkit-transition: opacity 1s ease-in-out;*/

	display: none;
	opacity: 0;

	transition: display 3s linear 3s , opacity 1s ease-in-out;



}



.current{
	background-position: 0 25px;
}



@media (max-width: 1024px) {

	#home-page-wrapper, main, #hero-area, #promo-area{
		width: 100%;
	}

	#carousel{ 
		width: 88%;
	}

	#prev, #next{
		width: 6%;
	}


	.current{
		background-position: 0 25px !important;
	}


	.stepper:hover {
  		background-position: 0 0;
	}
	

}


@media (max-width: 768px) {

	#carousel{ 
		width: 100%;
		/*height: 446px;*/
		height:425px;
	}

	#prev, #next{
		position: absolute;
		/*margin-top: 490px;*/
		margin-top: 425px;
		width: 66px;
	}

	#paging-wrapper {
		padding-top:0;
	}

	#promo-area {
		background-image: none;
	}

	#promo-area a {
		background-position: 0 -270px;
	}


	#paging-wrapper {
		height: 90px;
		/*width: 140px;*/
		/*width: 96px;*/

	}


	.stepper { 
	  	margin-left: 8px;
	  	margin-top: 15px;
	}

	#prev{
		left: 0;
	}

	#next{
		right: -4px;

	}

}


@media (max-width: 568px) {

	#hero-area{
		height: 325px;
	}


	#carousel{
		height: 305px;
	}

	#prev, #next {
		margin-top: 340px;
	}

	#promo-area{
  		margin-top: 60px;
	}

}


@media (max-width: 480px) {


	#carousel{
		height: 260px;
	}

	#prev, #next {
  		margin-top: 195px;
  	}	

}


/*@media (max-width: 414px){

	#prev, #next {
	  margin-top: 280px;
	}

}
*/


@media(max-width: 414px){

	#prev, #next {
	  margin-top: 255px;
	}
}





@media (max-width: 320px) {

	#carousel{
		height: 200px;
	}

	#prev, #next {
	  margin-top: 200px;
	}

 }