*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.present-block{
	width: 150px;

	height: 150px;
	text-align: center;
	border-radius: 50%;
	border: 5px solid #f5f5f5;
	overflow: hidden;
}
.present-block .img-block{
	background: url(../images/sprite.png) no-repeat 0 8px;
	width: 86px;
	height: 140px;
	display: inline-block;
}
.present-block[data-click="present-block-2"] .img-block{
	background: url(../images/sprite.png) no-repeat -105px 17px;
	width: 86px;
	height: 140px;
	display: inline-block;

}
.present-block[data-click="present-block-3"] .img-block{
	background: url(../images/sprite.png) no-repeat -215px 10px;
	width: 96px;
	height: 140px;
	display: inline-block;

}
.present-block[data-click="present-block-4"] .img-block{
	background: url(../images/sprite.png) no-repeat -335px 15px;
	width: 100px;
	height: 140px;
	display: inline-block;

}
.present-block[data-click="present-block-5"] .img-block{
	background: url(../images/sprite.png) no-repeat -445px 13px;
	width: 86px;
	height: 140px;
	display: inline-block;

}
.present-block[data-click="present-block-6"] .img-block{
	background: url(../images/slide6.png) no-repeat -7px -6px;
	width: 150px;
	height: 150px;

}
.present-block.active{
	
	border: 5px solid #ff183f;
}

.face-block{
	position: relative;
	left: 200px;
	width: 260px;
	height: 250px;
	background: url(../images/emo1.png) no-repeat 0 5px;
}

.progress-price{
	height: 35px;
	background-color: #f5f5f5;
	position: relative;

}
.progress-price i{
	color: #fff;
}
.progress-price .progress-line{
	background-color: #0ab5ff;
	height: 35px;
	width: 20%;
	-webkit-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

.progress-price i{
	position: absolute;
	color: #fff;
	height: 25px;
	width: 25px;
	top: 50%;
	left: 5px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	line-height: 21px;
	text-align: center;
	border-radius: 50%;
	border: 2px solid #fff;

}
.progress-smile{
	height: 35px;
	background-color: #f5f5f5;
	position: relative;

}
.progress-smile i{
	color: #fff;
}

.progress-smile .progress-line{
	background-color: #ff183f;
	height: 35px;
	width: 25%;
	-webkit-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	transition: all .3s ease-in;
}

.progress-smile i{
	position: absolute;
	color: #fff;
	top: 50%;
	left: 5px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	line-height: 21px;
	font-size: 25px;
	text-align: center;
	

}
.face-block[data-present="present-block-1"]{
	background: url(../images/emo1.png) no-repeat 0 5px;
}
.progress-price[data-present="present-block-1"] .progress-line{
	width: 20%;
}
.progress-smile[data-present="present-block-1"] .progress-line{
	width: 20%;
}
.face-block[data-present="present-block-2"]{
	background: url(../images/flowers.png) no-repeat 0 5px;
}
.progress-price[data-present="present-block-2"] .progress-line{
	width: 60%;
}
.progress-smile[data-present="present-block-2"] .progress-line{
	width: 15%;
}
.face-block[data-present="present-block-3"]{
	background: url(../images/kino.png) no-repeat 0 5px;
}
.progress-price[data-present="present-block-3"] .progress-line{
	width: 30%;
}
.progress-smile[data-present="present-block-3"] .progress-line{
	width: 30%;
}
.face-block[data-present="present-block-4"]{
	background: url(../images/miska.png) no-repeat 0 5px;
}
.progress-price[data-present="present-block-4"] .progress-line{
	width: 50%;
}
.progress-smile[data-present="present-block-4"] .progress-line{
	width: 28%;
}
.face-block[data-present="present-block-5"]{
	background: url(../images/iphone.png) no-repeat 0 -10px;
}
.progress-price[data-present="present-block-5"] .progress-line{
	width: 100%;
}
.progress-smile[data-present="present-block-5"] .progress-line{
	width: 25%;
}
.face-block[data-present="present-block-6"]{
	background: url(../images/love.png) no-repeat 0 -10px;
}
.progress-price[data-present="present-block-6"] .progress-line{
	width: 5%;
}
.progress-smile[data-present="present-block-6"] .progress-line{
	width: 100%;
}
.text-progress {
	position: relative;
	left: 500px;
	top: -40px;
	min-width: 280px;
	height: 60px;
	text-align: center;
	font-family: "Roboto" sans-serif;
	font-size: 14px;
	color: #fff;
	text-transform: uppercase;
	line-height: 60px;
	background-color: #ff183f;
	border-radius: 25px;
	margin-bottom: 300px;
}
.img_top {
	position: absolute;
	top: 0;
}
.img1 {
	position: absolute;
	top: 170px;
	left: 65px;
}
.img2 {
	position: absolute;
	top: 320px;
	left: 175px;
}
.img3 {
	position: absolute;
	bottom: 80px;
	left: 350px;
}
.img4 {
	position: absolute;
	bottom: 100px;
	right: -200px;
}
.img5 {
	position: absolute;
	bottom: 150px;
	right: -400px;
}