/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

.clear {
        clear: both;
}

.cover {
	background-size: cover;
	background-position: center center;
}

.transition( @target: all, @duration: 400ms, @type: ease, @delay: 0s ) {
	-webkit-transition: @target @duration @type @delay;
	-moz-transition: @target @duration @type @delay;
	-ms-transition: @target @duration @type @delay;
	-o-transition: @target @duration @type @delay;
	transition: @target @duration @type @delay;
}

.border-radius( @value: 1000px ) {
	-webkit-border-radius: @value;
	border-radius: @value;
	-webkit-background-clip: padding-box; 
	-moz-background-clip: padding; 
	background-clip: padding-box;
}

.contain {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.rotate( @value: 0deg ) {
	-webkit-transform: rotate( @value );
	-moz-transform: rotate( @value );
	-ms-transform: rotate( @value );
	-o-transform: rotate( @value );
	transform: rotate( @value );
}

.box-sizing {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html, body {
}

/* Generated by Font Squirrel (https://www.fontsquirrel.com) on July 13, 2016 */



@font-face {
    font-family: 't-star_probold';
    src: url('t-starpro-bold-webfont.eot');
    src: url('t-starpro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('t-starpro-bold-webfont.woff2') format('woff2'),
         url('t-starpro-bold-webfont.woff') format('woff'),
         url('t-starpro-bold-webfont.svg#t-star_probold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 't-star_probold_italic';
    src: url('t-starpro-bolditalic-webfont.eot');
    src: url('t-starpro-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('t-starpro-bolditalic-webfont.woff2') format('woff2'),
         url('t-starpro-bolditalic-webfont.woff') format('woff'),
         url('t-starpro-bolditalic-webfont.svg#t-star_probold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 't-star_proheavy';
    src: url('t-starpro-heavy-webfont.eot');
    src: url('t-starpro-heavy-webfont.eot?#iefix') format('embedded-opentype'),
         url('t-starpro-heavy-webfont.woff2') format('woff2'),
         url('t-starpro-heavy-webfont.woff') format('woff'),
         url('t-starpro-heavy-webfont.svg#t-star_proheavy') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 't-star_proitalic';
    src: url('t-starpro-italic-webfont.eot');
    src: url('t-starpro-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('t-starpro-italic-webfont.woff2') format('woff2'),
         url('t-starpro-italic-webfont.woff') format('woff'),
         url('t-starpro-italic-webfont.svg#t-star_proitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 't-star_prolight';
    src: url('t-starpro-light-webfont.eot');
    src: url('t-starpro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('t-starpro-light-webfont.woff2') format('woff2'),
         url('t-starpro-light-webfont.woff') format('woff'),
         url('t-starpro-light-webfont.svg#t-star_prolight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 't-star_prolight_italic';
    src: url('t-starpro-lightitalic-webfont.eot');
    src: url('t-starpro-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('t-starpro-lightitalic-webfont.woff2') format('woff2'),
         url('t-starpro-lightitalic-webfont.woff') format('woff'),
         url('t-starpro-lightitalic-webfont.svg#t-star_prolight_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 't-star_promedium';
    src: url('t-starpro-medium-webfont.eot');
    src: url('t-starpro-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('t-starpro-medium-webfont.woff2') format('woff2'),
         url('t-starpro-medium-webfont.woff') format('woff'),
         url('t-starpro-medium-webfont.svg#t-star_promedium') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 't-star_promedium_italic';
    src: url('t-starpro-mediumitalic-webfont.eot');
    src: url('t-starpro-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('t-starpro-mediumitalic-webfont.woff2') format('woff2'),
         url('t-starpro-mediumitalic-webfont.woff') format('woff'),
         url('t-starpro-mediumitalic-webfont.svg#t-star_promedium_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 't-star_proregular';
    src: url('t-starpro-webfont.eot');
    src: url('t-starpro-webfont.eot?#iefix') format('embedded-opentype'),
         url('t-starpro-webfont.woff2') format('woff2'),
         url('t-starpro-webfont.woff') format('woff'),
         url('t-starpro-webfont.svg#t-star_proregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/**/

.page {
	position: relative;
	overflow: hidden;
	padding-bottom: 300px;
	background-image: url(../images/bg.png);
	background-repeat: repeat-x;
	background-size: 1px 100%;
	background-position: 0 0;
	font-family: 't-star_promedium';
	font-weight: 400;
	
	.footer {
		display: block;
		position: absolute;
		z-index: 5;
		left: 0;
		bottom: 0;
		width: 100%;
		height: auto;
		
		img {
			width: 100%;
			height: auto;
			display: block;
		}
	}
	
	.deco {
		position: absolute;
		z-index: 2;
		width: auto;
		height: 100%;
		top: 0;
		
		img {
			width: auto;
			height: 100%;
			display: block;
		}
	
		&--left {
			left: 0;
		}
		
		&--right {
			right: 0;
		}
		
		&--top {
			display: none;
		}
	}
	
	.logo {
		position: absolute;
		cursor: pointer;
		z-index: 3;
		width: 200px;
		height: 77px;
		background-image: url(../images/i3.png);
		top: 20px;
		right: 50px;
	}
	
	.start, .action, .finish {
		display: none;
		
		&.shown {
			display: block;
		}
	}
	
	.start {
		.container {
			width: 700px;
			margin: 0 auto;
			height: 760px;
		}
		
		.label {
			font-family: 't-star_proheavy';
			position: absolute;
			z-index: 2;
			left: 50%;
			width: 200px;
			margin-left: -100px;
			text-transform: uppercase;
			font-size: 16px;
			line-height: 1;
			top: 40px;
			text-align: center;
			letter-spacing: 1px;
		}
		
		.title {
			position: absolute;
			z-index: 2;
			left: 50%;
			width: 425px;
			height: 167px;
			margin-left: -212px;
			background-image: url(../images/txt.svg);
			top: 80px;
		}
		
		.subtitle {
			font-family: 't-star_proheavy';
			position: absolute;
			z-index: 2;
			left: 50%;
			width: 440px;
			margin-left: -220px;
			font-size: 24px;
			line-height: 1.2;
			top: 280px;
			text-align: center;
		}
		
		.text {
			position: absolute;
			z-index: 2;
			left: 50%;
			font-size: 16px;
			line-height: 1.2;
			
		
			&--1 {
				top: 380px;
				width: 530px;
				margin-left: -265px;
			}
			
			&--2 {
				width: 375px;
				margin-left: -187px - 140px;
				top: 540px;
			}
		}
		
		.button {
			position: absolute;
			z-index: 2;
			cursor: pointer;
			opacity: 0.8;
			width: 258px;
			height: 213px;
			background-image: url(../images/i5.png);
			left: 50%;
			margin-left: 70px;
			top: 520px;
			
			&:before {
				content: 'Начать';
				font-family: 't-star_proheavy';
				text-transform: uppercase;
				font-size: 44px;
				position: absolute;
				left: 59px;
				top: 82px;
			}
			
			&:hover {
				opacity: 1;
			}
		}
		
		.el {
			z-index: 1;
			position: absolute;
		
			&--1 {
				width: 156px;
				height: 242px;
				background-image: url(../images/i2.png);
				left: 50%;
				margin-left: 120px;
				top: 50px;
			}
			
			&--2 {
				width: 273px;
				height: 264px;
				background-image: url(../images/i4.png);
				left: 50%;
				margin-left: -510px;
				top: 260px;
			}
		}
	}
	
	.action {
		.container {
			width: 700px;
			margin: 0 auto;
			height: 560px;
		}
		
		.ask, .after {
			opacity: 0;
			pointer-events: none;
			
			&.shown {
				opacity: 1;
				pointer-events: auto;
			}
		}
		
		.ask .question, .after .result {
			display: none;
			
			&.shown {
				display: block;
			}
		}
		
		.ask {
			.label {	
				font-family: 't-star_proheavy';
				position: absolute;
				z-index: 2;
				left: 50%;
				width: 200px;
				margin-left: -100px;
				text-transform: uppercase;
				font-size: 16px;
				line-height: 1;
				top: 40px;
				text-align: center;
				letter-spacing: 1px;
			}
			
			.question {
				position: absolute;
				width: 600px;
				height: 390px;
				left: 50%;
				margin-left: -300px;
				top: 100px;
				/*background-color: rgba(0,0,0,0.1);*/
			
				&__counter {
					font-family: 't-star_proheavy';
					position: absolute;
					width: 108px;
					height: 93px;
					left: 50%;
					top: 0;
					margin-left: -54px;
					background-image: url(../images/i9.png);
					text-align: center;
					line-height: 93px;
					color: #fff;
					font-size: 36px;
				}
				
				&__text {
					font-family: 't-star_proheavy';
					position: absolute;
					width: 100%;
					left: 0;
					top: 120px;
					font-size: 36px;
					line-height: 1.1;
					text-align: center;
				}
				
				&__answers {
					position: absolute;
					width: 100%;
					/*background-color: rgba(0,0,0,0.1);*/
					height: 150px;
					left: 0;
					bottom: 0;
				
					&__item {
						font-family: 't-star_proheavy';
						position: absolute;
						left: 50%;
						width: 140px;
						/*background-color: rgba(0,0,0,0.1);*/
						font-size: 18px;
						line-height: 1.3;
						text-transform: uppercase;
						cursor: pointer;
						
						&:hover {
							&:before {
								content: '';
								position: absolute;
								width: 163px;
								height: 140px;
								left: 50%;
								top: 50%;
								margin-left: -81px;
								margin-top: -70px;
								background-image: url(../images/i10.png);
							}
						}
						
						&--1, &--3, &--5 {
							top: 0;
						}
						
						&--2, &--4 {
							bottom: 0;
						}
						
						&--1 {
							margin-left: -300px;
						}
						
						&--3 {
							margin-left: -70px;
						}
						
						&--5 {
							margin-left: 160px;
						}
						
						&--2 {
							margin-left: -180px;
						}
						
						&--4 {
							margin-left: 50px;
						}
					}
				}
			}
			
			.next {
				
			}
		}
		
		.after {
			.result {
				&__text {
					position: absolute;
					z-index: 2;
					left: 50%;
					top: 60px;
					width: 556px;
					height: 326px;
					margin-left: -278px;
					background-image: url(../images/i12.png);
					color: #fff;
					text-align: center;
					.box-sizing;
					padding: 90px 90px 0 90px;
					font-size: 16px;
					line-height: 1.2;
				}
				
				&__left {
					position: absolute;
					z-index: 2;
					left: 50%;
					width: 200px;
					margin-left: -100px;
					text-transform: uppercase;
					font-size: 16px;
					line-height: 1;
					top: 420px;
					text-align: center;
					letter-spacing: 1px;
				}
			}
			
			.next {
				position: absolute;
				z-index: 2;
				left: 50%;
				top: 470px;
				width: 193px;
				height: 56px;
				margin-left: -96px;
				background-image: url(../images/i13.png);
				cursor: pointer;
				opacity: 0.8;
				
				&:hover {
					opacity: 1;
				}
				
				&:before {
					content: 'Дальше';
					font-family: 't-star_proheavy';
					text-transform: uppercase;
					font-size: 28px;
					position: absolute;
					left: 0px;
					top: 0px;
					width: 100%;
					height: 100%;
					text-align: center;
					line-height: 56px;
				}
			}
		}
	}
	
	.finish {
		.container {
			padding-top: 40px;
			padding-bottom: 40px;
			width: 610px;
			margin: 0 auto;
		}
		
		.label {
			font-family: 't-star_proheavy';
			width: 200px;
			margin: 0 auto;
			text-transform: uppercase;
			font-size: 16px;
			line-height: 1;
			text-align: center;
			letter-spacing: 1px;
		}
	
		.image {
			position: relative;
			width: 610px;
			height: 360px;
			margin: 30px auto 0 auto;
			
			&__img {
				position: absolute;
				z-index: 1;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				background-color: #FDD8FC;
				.cover;
			}
			
			&__text {
				font-family: 't-star_proheavy';
				position: absolute;
				z-index: 2;
				width: 100%;
				height: 58px;
				font-size: 58px;
				line-height: 1;
				text-transform: uppercase;
				text-align: center;
				top: 50%;
				left: 0;
				margin-top: -29px;
				/*color: #fff;*/
			}
			
			&__shares {
				position: absolute;
				z-index: 3;
				width: 100%;
				left: 0;
				bottom: 50px;
			}
		}
		
		.shares {
			height: 50px;
			font-size: 0;
			text-align: center;
		
			&__item {
				position: relative;
				display: inline-block;
				height: 50px;
				cursor: pointer;
				opacity: 0.9;
				
				&:hover {
					opacity: 1;
				}
				
				&:after {
					font-family: 't-star_proheavy';
					position: absolute;
					height: 50px;
					line-height: 50px;
					color: #fff;
					text-align: center;
					width: 100px;
					font-size: 16px;
					left: 50px;
				}
				
				&--fb {
					width: 171px;
					background-image: url(../images/s_fb.png);
					margin-right: 10px;
					
					&:after {
						content: 'Поделиться';
					}
				}
				
				&--tw {
					width: 170px;
					background-image: url(../images/s_tw.png);
					margin-right: 10px;
					
					&:after {
						content: 'Твитнуть';
					}
				}
				
				&--vk {
					width: 171px;
					background-image: url(../images/s_vk.png);
					
					&:after {
						content: 'Рассказать';
					}
				}
			}
		}
		
		.about {
			font-size: 16px;
			line-height: 25px;
			text-align: center;
			padding: 0 50px;
			margin-top: 60px;
		}
		
		.makeup {
			margin-top: 50px;
			background-size: 286px 348px;
			background-repeat: no-repeat;
			background-position: left 70%;
			min-height: 500px;
		
			&__title {
				font-size: 28px;
				padding-left: 150px;
				line-height: 1.1;
				margin-bottom: 30px;
				font-family: 't-star_proheavy';
			}
			
			&__subtitle {
				position: relative;
				text-transform: uppercase;
				font-size: 16px;
				padding-top: 10px;
				line-height: 1.3;
				padding-left: 110px;
				height: 88px;
				margin-left: 330px;
				font-family: 't-star_proheavy';
				
				&:after {
					content: '';
					position: absolute;
					width: 92px;
					height: 88px;
					background-image: url(../images/ant.png);
					left: 0;
					top: 0;
				}
			}
			
			&__text {
				margin-left: 330px;
				font-size: 16px;
				line-height: 1.2;
				margin-top: 20px;
			}
		}
		
		.f_logo {
			display: block;
			width: 192px;
			height: 27px;
			margin: 0 auto;
			margin-top: 50px;
			background-image: url(../images/i14.png);
		}
	}
	
	.mobile_mode() {
		padding-bottom: 250px;
	
		.reset-pos() {
			position: relative;
			left: auto;
			top: auto;
			right: auto;
			bottom: auto;
			margin: 0;
		}
	
		.deco {
			display: none;
			
			&--top {
				display: block;
				position: absolute;
				width: 100%;
				height: auto;
				left: 0;
				top: 0;
				
				img {
					display: block;
					width: 100%;
					height: auto;
				}
			}
		}
		
		.logo {
			display: block;
			.reset-pos;
			margin: 0 auto;
			margin-top: 30px;
		}
		
		.finish {
			.container {
				width: auto;
				padding: 0 20px;
			}
			
			.label {
				margin-top: 20px;
			}
			
			.image {
				width: 100%;
				height: 240px;
			
				&__img {
				}
				
				&__text {
					font-size: 40px;
					height: 40px;
					line-height: 40px;
					margin-top: -20px;
				}
			}
			
			.shares {
				display: none;
			}
			
			.about {
				margin-top: 30px;
				padding: 0;
				text-align: left;
			}
			
			.makeup {
				background-position: center 25%;
			
				&__title {
					padding: 0;
					text-align: center;
					margin-bottom: 420px;
				}
				
				&__subtitle {
					margin: 0;
				}
				
				&__text {
					margin: 0;
				}
			}
			
			.f_logo {
				
			}
		}
		
		.action {
			.container {
				width: auto;
				padding: 0 20px;
				height: auto;
			}
			
			.label {
				.reset-pos;
				margin: 20px auto;
			}
			
			.ask, .after {
				opacity: 1;
				pointer-events: auto;
				display: none;
				
				&.shown {
					display: block;
				}
			}
			
			.ask {
				.question {
					.reset-pos;
					height: auto;
					width: 100%;
				
					&__counter {
						.reset-pos;
						margin: 20px auto;
					}
					
					&__text {
						.reset-pos;
					}
					
					&__answers {
						.reset-pos;
						height: auto;
						margin-top: 30px;
					
						&__item {
							.reset-pos;
							margin: 0 auto;
							margin-top: 30px;
							text-align: center;
						}
					}
				}
			}
			
			.after {
				.reset-pos;
				margin-top: 20px;
			
				.result {
					.reset-pos;
					height: auto;
					width: 100%;
				
					&__text {
						.reset-pos;
						width: 100%;
						height: auto;
						padding: 50px 60px;
						background-image: url(../images/i16.png);
						font-size: 14px;
						.contain;
					}
					
					&__left {
						font-family: 't-star_proheavy';
						width: 100%;
						.reset-pos;
						height: auto;
						margin: 20px auto;
					}
				}
				
				.next {
					.reset-pos;
					margin: 20px auto;
				}
			}
		}
	
		.start {
			.container {
				width: auto;
				padding: 0 20px;
				height: auto;
			}
			
			.label {
				.reset-pos;
				margin: 20px auto;
			}
			
			.title {
				.reset-pos;
				width: 100%;
				.contain;
			}
			
			.subtitle {
				.reset-pos;
				width: 100%;
				margin: 20px auto;
			}
			
			.text {
				.reset-pos;
				width: 100%;
				margin: 20px auto;
				line-height: 1.5;
			
				&--1 {
				}
				
				&--2 {
					text-align: center;
				}
			}
			
			.el {
				&--1 {
					margin-left: -100px;
					top: 130px;
				}
				
				&--2 {
					margin-left: 40px;
					top: 460px;
				}
			}
			
			.button {
				.reset-pos;
				margin: 0 auto;
			}
		}
	}
	
	&.mobile {
		.mobile_mode !important;
	}
}