/**/

@font-face {
 font-family: 'oukwat-regular';
 src: url('fonts/oukwat-regular_b-webfont.eot');
 src: url('fonts/oukwat-regular_b-webfont.eot?#iefix') format('embedded-opentype'),
      url('fonts/oukwat-regular_b-webfont.woff2') format('woff2'),
      url('fonts/oukwat-regular_b-webfont.woff') format('woff'),
      url('fonts/oukwat-regular_b-webfont.ttf') format('truetype');
 font-weight: 400;
 font-style: normal;
}

@font-face {
 font-family: 'trivia-grotesk';
 src: url('fonts/storm_-_trivia_grotesk_r3-webfont.eot');
 src: url('fonts/storm_-_trivia_grotesk_r3-webfont.eot?#iefix') format('embedded-opentype'),
      url('fonts/storm_-_trivia_grotesk_r3-webfont.woff2') format('woff2'),
      url('fonts/storm_-_trivia_grotesk_r3-webfont.woff') format('woff'),
      url('fonts/storm_-_trivia_grotesk_r3-webfont.ttf') format('truetype');
 font-weight: 400;
 font-style: normal;
}

@font-face {
 font-family: 'trivia-serif';
 src: url('fonts/storm_-_trivia_serif_10-webfont.eot');
 src: url('fonts/storm_-_trivia_serif_10-webfont.eot?#iefix') format('embedded-opentype'),
      url('fonts/storm_-_trivia_serif_10-webfont.woff2') format('woff2'),
      url('fonts/storm_-_trivia_serif_10-webfont.woff') format('woff'),
      url('fonts/storm_-_trivia_serif_10-webfont.ttf') format('truetype');
 font-weight: 400;
 font-style: normal;
}

/**/

.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;
}

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

.transform-origin( @x, @y ) {
	transform-origin: @x @y;
	-ms-transform-origin: @x @y;
	-webkit-transform-origin: @x @y;
}

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

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

.scale( @value: 1 ) {
	-webkit-transform: scale( @value );
	-moz-transform: scale( @value );
	-ms-transform: scale( @value );
	-o-transform: scale( @value );
	transform: scale( @value );
}

.clear {
	clear: both;
}

/**/

@gold: 0.618;
@yellow: #ffe14d;
@lyellow: #ffeb9a;
@black: #000000;
@white: #ffffff;
@red: #ff0017;
@small: 900px;
@gap: 20px;

#m_page {
	width: 100%;
	overflow: hidden;

	a {
		text-decoration: underline;
		color: inherit;
	}

	.hello {
		background-color: @yellow;
		padding: @gap;
	
		.title {
			font-family: 'oukwat-regular';
			font-size: 26px;
			line-height: 26px;
			margin-bottom: @gap;
		}
		
		.doit {
			font-family: 'oukwat-regular';
			font-size: 20px;
			line-height: 20px;
			margin-bottom: @gap;
			margin-bottom: @gap;
		}
		
		.goat {
			float: left;
			height: 200px;
			width: 40%;
			background-image: url(../images/Koza.gif);
			.contain;
		}
		
		.subtitle {
			float: right;
			width: 50%;
			font-family: 'oukwat-regular';
			font-size: 16px;
			line-height: 20px;
			margin-bottom: @gap;
			margin-bottom: @gap;
			
			span {
				color: @red;
			}
		}
		
		.authors {
			font-family: 'trivia-grotesk';
			font-size: 14px;
			margin: @gap / 2 0;
		}
		
		.description {
			font-family: 'trivia-grotesk';
			font-size: 14px;
			line-height: 22px;
		}
	}
	
	.rules {
		padding: @gap;
		background-color: @white;
		color: @black;
	
		.title {
			font-family: 'oukwat-regular';
			font-size: 16px;
			margin-bottom: @gap / 2;
		}
		
		.text {
			font-family: 'trivia-grotesk';
			font-size: 14px;
			line-height: 22px;
		}
	}
	
	.disclaimer {
		padding: @gap;
		background-color: @black;
		color: @white;
		text-align: center;
	
		.title {
			color: @red;
			font-family: 'oukwat-regular';
			font-size: 16px;
			margin-bottom: @gap / 2;
		}
		
		.text {
			font-family: 'oukwat-regular';
			font-size: 16px;
			line-height: 18px;
		}
	}
	
	.action {
		padding: @gap;
		
		.items {
			.item {
				text-align: center;
				margin: @gap 0;
			
				.image {
					width: 100%;
					height: 250px;
					background-size: 200px 250px;
					background-repeat: no-repeat;
					background-position: center;
				}
				
				.name {
					font-family: 'oukwat-regular';
					font-size: 16px;
					line-height: 18px;
					margin: @gap / 2 0;
				}
				
				.text {
					font-family: 'trivia-grotesk';
					font-size: 14px;
					line-height: 22px;
				}
				
				&.selected {
					opacity: 0.5;
					pointer-events: none;
				}
			}
		}
		
		&.hidden {
			display: none;
		}
	}
	
	.result {
		padding: @gap;
	
		.title {
			font-family: 'trivia-grotesk';
			font-size: 14px;
			margin-bottom: @gap;
			text-align: center;
		}
		
		.items {
			position: relative;
			
			.item {
				position: relative;
				float: left;
				width: 50%;
			
				.image {
					width: 100%;
					height: 125px;
					background-size: 100px 125px;
					background-repeat: no-repeat;
					background-position: center;
				}
				
				.name {
					font-family: 'trivia-grotesk';
					font-size: 14px;
					margin: @gap / 2 0;
					text-align: center;
				}
			}
		}
		
		.text {
			margin-top: @gap;
			font-family: 'trivia-grotesk';
			font-size: 14px;
			line-height: 20px;
		}
		
		.shares {
			margin-top: @gap;
		
			.share-button {
				width: 140px;
				height: 35px;
				margin-bottom: 30px;
				cursor: pointer;
				display: block;
				float: left;
				
				&.vk {
					background-image: url(../images/vk.png);
				}
				
				&.tw {
					background-image: url(../images/twitter.png);
				}
				
				&.fb {
					background-image: url(../images/fb.png);
				}
			}
		}
		
		.button {
			margin: 0 auto;
			padding: @gap @gap * 2;
			font-family: 'oukwat-regular';
			font-size: 16px;
			border: 2px solid @black;
			background-color: @yellow;
			text-align: center;
		}
	
		&.hidden {
			display: none;
		}
	}
	
	.panel {
		z-index: 10;
		height: 60px;
		line-height: 60px;
		color: @black;
		background-color: @yellow;
		position: relative;
		width: 100%;
		padding: 0px @gap;
		.box-sizing;
		
		.label {
			font-family: 'oukwat-regular';
			font-size: 16px;
			line-height: 60px;
			text-align: center;
		
			&.hidden {
				display: none;
			}
		}
		
		.items {
			float: left;
			width: 240px;
			height: 60px;
		
			.item {
				float: left;
				height: 60px;
				width: 55px;
				.contain;
				background-size: 40px;
				background-position: center;
				background-repeat: no-repeat;
				cursor: pointer;
				opacity: 1;
			
				&.empty {
					background-image: url(../images/mockup.png);
					pointer-events: none;
					opacity: @gold;
				}
			}
			
			&.hidden {
				display: none;
			}
		}
		
		.button {
			float: right;
			width: 40px;
			height: 40px;
			margin-top: 10px;
			border: 2px solid @black;
			text-align: center;
			line-height: 36px;
			background-color: @white;
			.box-sizing;
			
			&.hidden {
				display: none;
			}
			
			&.disabled {
				opacity: 0.3;
				pointer-events: none;
			}
		}
		
		&.hidden {
			display: none;
		}
	}
}

#page {
	width: 100%;
	overflow: hidden;
	margin-bottom: 50px;

	a {
		text-decoration: underline;
		color: inherit;
	}
	
	.hello {
		position: relative;
		height: 890px;
		background-color: @yellow;
	
		.title {
			position: absolute;
			width: @small;
			height: 0px;
			left: 50%;
			top: 50px;
			margin-left: -@small / 2;
			margin-top: 0px;
			text-align: center;
			font-family: 'oukwat-regular';
			font-size: 52px;
			line-height: 52px;
		}
		
		.authors {
			position: absolute;
			width: 350px;
			height: auto;
			left: 50%;
			top: 240px;
			margin-left: -480px;
			margin-top: 0px;
			font-family: 'oukwat-regular';
			font-size: 18px;
			line-height: 100px;
			text-align: right;
		}
		
		.goat {
			position: absolute;
			width: 219px;
			height: 350px;
			left: 50%;
			top: 200px;
			margin-left: -110px;
			margin-top: 0px;
			background-image: url(../images/Koza.gif);
		}
		
		.doit {
			position: absolute;
			width: 350px;
			height: 0px;
			left: 50%;
			top: 360px;
			margin-left: 120px;
			margin-top: 0px;
			font-family: 'oukwat-regular';
			font-size: 24px;
			line-height: 24px;
		}
		
		.subtitle {
			position: absolute;
			width: @small;
			height: 0px;
			left: 50%;
			top: 600px;
			margin-left: -@small / 2;;
			margin-top: 0px;
			text-align: center;
			font-family: 'oukwat-regular';
			font-size: 22px;
			line-height: 34px;
			
			span {
				color: @red;
			}
		}
		
		.description {
			position: absolute;
			width: @small;
			height: 0px;
			left: 50%;
			top: 740px;
			margin-left:-@small / 2;
			margin-top: 0px;
			font-family: 'trivia-grotesk';
			font-size: 14px;
			line-height: 22px;
		}
	}
	
	.rules {
		position: relative;
		height: 290px;
		background-color: @black;
		color: @white;
	
		.title {
			position: absolute;
			width: 550px;
			height: 0px;
			left: 50%;
			top: 30px;
			margin-left: -450px;
			margin-top: 0px;
			font-family: 'oukwat-regular';
			font-size: 22px;
			line-height: 22px;
		}
		
		.text {
			position: absolute;
			width: 550px;
			height: 0px;
			left: 50%;
			top: 80px;
			margin-left: -450px;
			margin-top: 0px;
			font-family: 'trivia-grotesk';
			font-size: 16px;
			line-height: 22px;
		}
		
		.label {
			position: absolute;
			width: 500px;
			height: 0px;
			left: 50%;
			top: 230px;
			margin-left: 140px;
			margin-top: 30px;
			font-family: 'oukwat-regular';
			font-size: 26px;
			line-height: 26px;
			.transform-origin(@x:0%, @y:0%);
			.rotate(-90deg);
		}
		
		.out {
			position: absolute;
			width: 200px;
			height: 0px;
			left: 50%;
			top: 30px;
			margin-left: 200px;
			margin-top: 0px;
			font-family: 'oukwat-regular';
			font-size: 16px;
			line-height: 26px;
		}
	}
	
	.container {
		width: @small;
		margin: 0 auto;
		position: relative;
	}
	
	.panel {
		@height: 50px;
	
		position: relative;
		z-index: 10;
		background-color: @yellow;
		height: @height;
		padding: 10px 0px;
		left: 0;
		top: 0;
		width: 100%;
		opacity: 0.8;
		.transition(@duration: 300ms);
		
		.label {
			font-family: 'oukwat-regular';
			font-size: 16px;
			line-height: @height;
			float: left;
			width: 300px;
			height: 100%;
		}
		
		.items {
			height: @height;
			width: 280px;
			float: left;
		
			.item {
				float: left;
				height: 100%;
				width: 70px;
				.contain;
				background-position: center;
				background-repeat: no-repeat;
				cursor: pointer;
				opacity: 1;
				
				&:hover {
					opacity: @gold;
				}
			
				&.empty {
					background-image: url(../images/mockup.png);
					pointer-events: none;
					opacity: @gold;
				}
			}
		}
		
		.button {
			float: left;
			padding: 10px 20px;
			border: 2px solid @black;
			font-family: 'oukwat-regular';
			font-size: 16px;
			cursor: pointer;
			background-color: @white;
			margin-top: 5px;
			margin-left: 50px;
			
			&:hover {
				background-color: @yellow;
			}
		
			&.disabled {
				pointer-events: none;
				opacity: @gold;
			}
		}
		
		&.fixed {
			position: fixed;
		}
		
		&.hidden {
			display: none;
		}
		
		&:hover {
			opacity: 1;
		}
	}
	
	.action {
		padding-top: 0px;
		
		.items {
			width: @small;
			margin: 0 auto;
			padding-top: 50px;
			
			.item {
				z-index: 1;
				position: relative;
				width: @small / 3;
				float: left;
				cursor: pointer;
				margin-bottom: 30px;
				
				.image {
					width: @small / 3;
					height: @small / 3;
					background-size: 200px 250px;
					background-repeat: no-repeat;
					background-position: center;
					.transition(@duration: 300ms);
					.scale(0.95);
				}
				
				.name {
					text-align: center;
					font-family: 'oukwat-regular';
					font-size: 18px;
					line-height: 28px;
				}
				
				.hint {
					position: absolute;
					width: 100%;
					padding: 20px;
					background-color: @yellow;
					opacity: 0;
					pointer-events: none;
					left: 100%;
					top: 15%;
					.transition(@duration: 300ms);
				
					.title {
						font-family: 'oukwat-regular';
						font-size: 16px;
						line-height: 18px;
						margin-bottom: 10px;
					}
					
					.text {
						font-family: 'trivia-grotesk';
						font-size: 14px;
						line-height: 20px;
					}
					
					&:before {
						content: '';
						position: absolute;
						left: -50px;
						top: 38%;
						margin-top: -1px;
						height: 2px;
						width: 50px;
						background-color: @yellow;
					}
				}
				
				&:hover:not(.selected) {
					z-index: 2;
					
					.image {
						.scale(1);
					}
				
					.hint {
						opacity: 1;
					}
				}
				
				&:nth-child(3n) {
					.hint {
						left: auto;
						right: 300px;
						
						&:before {
							left: auto;
							right: -50px;
						}
					}
				}
				
				&.selected {
					pointer-events: none;
					opacity: 0.5;
					
					.image {
						.scale(1);
					}
				}
			}
		}
	
		&.with-padding {
			padding-top: 60px;
		}
		
		&.hidden {
			display: none;
		}
	}
	
	.result {
		.title {
			text-align: center;
			font-family: 'trivia-grotesk';
			font-size: 16px;
			line-height: 24px;
			letter-spacing: 10px;
			padding: 30px 0px;
		}
		
		.items {
			width: @small;
			margin: 20px auto;
		
			.item {
				width: @small / 4;
				float: left;
				
				.image {
					height: @small / 3;
					background-size: 200px 250px;
					background-repeat: no-repeat;
					background-position: center;
					background-repeat: no-repeat;
					background-position: center;
				}
				
				.name {
					margin-top: 5px;
					text-align: center;
					font-family: 'trivia-grotesk';
					font-size: 16px;
					line-height: 24px;
				}
			}
		}
		
		.final {
			background-color: @yellow;
			padding: 30px 0px;
		
			.shares {
				width: 200px;
				float: left;
				
				.share-button {
					width: 145px;
					height: 35px;
					margin-bottom: 30px;
					cursor: pointer;
					
					&.vk {
						background-image: url(../images/vk.png);
						
						&:hover {
							background-image: url(../images/vk_hover.png);
						}
					}
					
					&.tw {
						background-image: url(../images/twitter.png);
						
						&:hover {
							background-image: url(../images/twitter_hover.png);
						}
					}
					
					&.fb {
						background-image: url(../images/fb.png);
						
						&:hover {
							background-image: url(../images/fb_hover.png);
						}
					}
				}
			}
			
			.text {
				float: left;
				width: 700px;
				font-family: 'trivia-grotesk';
				font-size: 16px;
				line-height: 24px;
			}
		}
		
		.button {
			margin: 50px auto 0px auto;
			border: 2px solid @black;
			width: 250px;
			text-align: center;
			padding: 20px 0px;
			font-family: 'oukwat-regular';
			font-size: 18px;
			line-height: 24px;
			background-color: @yellow;
			cursor: pointer;
			
			&:hover {
				background-color: @white;
			}
		}
	
		&.hidden {
			display: none;
		}
	}
}