/* 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;
}

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

html, body {
    width: 100%;
    height: 100%;
    background-color: #E8EAEE;
}

/*================================*/

.preloader {
	@w: 200px;
	@h: 10px;

	position: fixed;
	z-index: 10;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	display: none;
	background-color: #ffffff;
	
	&.shown {
		display: block;
	}
	
	.line {
		position: absolute;
		left: 50%;
		top: 50%;
		width: @w;
		height: @h;
		margin-left: -@w / 2;
		margin-top: -@h / 2;
		background-color: #EAEBEC;
	
		.bar {
			height: 100%;
			width: 0%;
			background-color: #13A1F9;
		}
	}
}

.mobile-page {
	font-family: 'ProximaNova-Regular';
	
	.action {
		padding-bottom: 100px;
	
		.container {
			width: 100%;
			.box-sizing;
		}
		
		.question, .answer {
			display: none;
			position: relative;
			
			&.shown {
				display: block;
			}
			
			.panel {
				position: relative;
			}
			
			.image-container {
				.image {
					height: 200px;
					background-image: url(../images/Imgs/1.png);
					background-repeat: no-repeat;
					background-position: center center;
					.contain;
				}
			}
		}
		
		.question {
			.button {
				font-size: 24px;
				line-height: 1.2;
				cursor: pointer;
				text-align: center;
				font-family: 'ProximaNova-Regular';
				padding: 8px 0;
				
				&:hover {
					color: #13A1F9;
				}
			}
		}
		
		.answer {
			.state {
				font-size: 30px;
				line-height: 36px;
				padding: 8px 0;
				color: #BA2D0B;
				text-align: center;
				font-family: 'ProximaNova-Extrabld';
				
				&.right {
					color: #73BA9B;
				}
			}
		}
		
		.result {
			display: none;
			padding-top: 50px;
			
			&.shown {
				display: block;
			}
			
			.text {
				padding: 0 20px;
				font-size: 25px;
				line-height: 30px;
				text-align: center;
			
				span {
					display: block;
					font-size: 42px;
					line-height: 48px;
					margin-bottom: 20px;
				}
			}
		}
	}

	.start {
		background-color: #13A1F9;
		padding-bottom: 20px;
	
		.container {
			width: 100%;
			padding: 20px;
			.box-sizing;
		}
		
		.image {
			height: 200px;
			background-image: url(../images/Imgs/1.png);
			background-repeat: no-repeat;
			background-position: center center;
			.contain;
		}
		
		.info {
			margin-top: 20px;
			font-size: 16px;
			line-height: 1.2;
			font-family: 'ProximaNova-Regular';
			color: #ffffff;
			
			.description {
				span {
					display: block;
					font-size: 12px;
					padding: 20px 0;
				}
			}
			
			.authors {
			}
			
			.rubrics {
			}
			
			a {
				color: #ffffff;
				text-decoration: underline;
			}
		}
	}
}

.page {
	font-family: 'ProximaNova-Regular';

	.start {
		background-color: #13A1F9;
	
		.container {
			width: 1200px;
			margin: 0 auto;
			
			.title {
				text-align: center;
				font-size: 85px;
				line-height: 80px;
				padding-top: 50px;
				font-family: 'ProximaNova-Extrabld';
			}
			
			.subtitle {
				text-align: center;
				font-size: 30px;
				line-height: 36px;
				padding: 30px 0;
				font-family: 'ProximaNova-Extrabld';
			}
			
			.image {
				width: 540px;
				height: 367px;
				background-image: url(../images/Imgs/1.png);
				background-repeat: no-repeat;
				background-position: center center;
				padding: 50px 0;
				margin: 0 auto;
			}
			
			.info {
				color: #ffffff;
				position: relative;
				height: 320px;
				width: 400px;
				margin: 0 auto;
				font-size: 15px;
				line-height: 20px;
				background: url(../images/Imgs/2.png) center 90% no-repeat;
				
				.description {
					font-size: 16px;
				
					span {
						display: block;
						font-size: 14px;
						margin-top: 20px;
					}
				}
				
				.authors {
					margin-bottom: 10px;
					font-size: 14px;
				}
				
				.rubrics {
				}
				
				a {
					color: #ffffff;
					text-decoration: underline;
				}
			}
		}
	}
	
	.action {
		@w: 1000px;
		@h: 340px;
	
		position: relative;
		height: 420px;
		
		.container {
			position: absolute;
			width: @w;
			height: @h;
			left: 50%;
			top: 50%;
			margin-left: -@w / 2;
			margin-top: -@h / 2;
		}
		
		.question, .answer {
			display: none;
			position: relative;
			
			&.shown {
				display: block;
			}
			
			.q-counter {
				width: 80px;
				float: left;
				color: #BFBFBF;
				font-family: 'ProximaNova-Regular';
				font-size: 30px;
				padding: 8px 0;
			}
			
			.panel {
				position: relative;
				width: 350px;
				float: right;
			}
			
			.image-container {
				float: left;
				width: 523px;
				height: 319px;
				background-color: #ffffff;
				
				.image {
					height: 100%;
					.contain;
				}
			}
		}
		
		.question {
			.button {
				font-size: 30px;
				line-height: 36px;
				width: @w / 2;
				float: left;
				/*text-align: center;*/
				cursor: pointer;
				font-family: 'ProximaNova-Extrabld';
				padding: 8px 0;
				/*text-decoration: underline;*/
				
				&:hover {
					color: #13A1F9;
				}
			}
		}
		
		.answer {
			.state {
				font-size: 30px;
				line-height: 36px;
				padding: 8px 0;
				/*text-align: center;*/
				color: #BA2D0B;
				font-family: 'ProximaNova-Extrabld';
				
				&.right {
					color: #73BA9B;
				}
			}
			
			.text {
				font-size: 15px;
				line-height: 20px;
				text-align: center;
				margin: 10px auto 0 auto;
			}
			
			.next {
				position: absolute;
				width: 27px;
				height: 47px;
				cursor: pointer;
				top: 0;
				right: 0;
				background-image: url(../images/arrow.png);
			}
		}
		
		.result {
			display: none;
			
			&.shown {
				display: block;
			}
			
			.image {
				width: 304px;
				height: 400px;
				margin: 0 auto;
				background-image: url(../images/g.png);
			}
			
			.text {
				width: 500px;
				margin: 0 auto;
				font-size: 25px;
				line-height: 30px;
				text-align: center;
			
				span {
					display: block;
					margin-bottom: 10px;
					font-size: 30px;
					line-height: 36px;
				}
			}
			
			.panel {
				width: 450px;
				margin: 40px auto 0 auto;
			
				.share {
					float: left;
					width: 149px;
					height: 40px;
					background-image: url(../images/ShareButtons.png);
					cursor: pointer;
					
					&.vk {
						background-position: -149px 0px;
						
						&:hover {
							background-position: -149px -40px;
						}
					}
					
					&.fb {
						background-position: 0px 0px;
						
						&:hover {
							background-position: 0px -40px;
						}
					}
					
					&.tw {
						background-position: -149px * 2 0px;
						
						&:hover {
							background-position: -149px * 2 -40px;
						}
					}
				}
			}
		}
	}
}