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

.part-radius( @tl: 0px, @tr: 0px, @br: 0px, @bl: 0px ) {
	border-radius: @tl @tr @br @bl;
     -moz-border-radius: @tl @tr @br @bl;
     -webkit-border-radius:  @tl @tr @br @bl;
}

.box-shadow(@value) {
	-webkit-box-shadow: @value;
	box-shadow: @value;
}

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

/*======= ANIMATION & TRANSFORM =======*/

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

.translate(@x: 0px, @y: 0px, @z: 0px) {
	-webkit-transform: translateX( @x );
	-moz-transform: translateX( @x );
	-ms-transform: translateX( @x );
	-o-transform: translateX( @x );
	transform: translateX( @x );
	
	-webkit-transform: translateY( @y );
	-moz-transform: translateY( @y );
	-ms-transform: translateY( @y );
	-o-transform: translateY( @y );
	transform: translateY( @y );
	
	-webkit-transform: translateZ( @z );
	-moz-transform: translateZ( @z );
	-ms-transform: translateZ( @z );
	-o-transform: translateZ( @z );
	transform: translateZ( @z );
	
	-webkit-transform: translate3d( @x, @y, @z );
	-moz-transform: translate3d( @x, @y, @z );
	-ms-transform: translate3d( @x, @y, @z );
	-o-transform: translate3d( @x, @y, @z );
	transform: translate3d( @x, @y, @z );
}

.animation(@str) {
	-webkit-animation: @str;
	-moz-animation: @str;
	-o-animation: @str;
	animation: @str;
}

.animation-play-state(@str) {
	-webkit-animation-play-state: @str;
	animation-play-state: @str;
}

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

/*======= SPECIAL =======*/

.clear {
	clear: both;
}

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

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

.no-select {
	-webkit-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

/**/

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

/*======= VARIABLES =======*/

@gold: 0.618;
@maxZindex: 299792458;

/**/

@width: 900px;
@tight: 500px;
@pink: #fb6d6b;
@blue: #77d0fc;
@yellow: #fee63f;
@red: #fb6d6b;
@green: #b8e53c;

#page {
	min-width: @width;
	
	.hello {
		.header {
			height: 600px;
			background-image: url(../images/1.jpg);
			background-position: center;
		
			.title {
				position: absolute;
				font-family: 'oukwat-regular';
				font-size: 36px;
				color: #000000;
				line-height: 44px;
				text-align: center;
				width: 700px;
				left: 50%;
				margin-left: -350px;
				top: 100px;
			}
			
			.subtitle {
				position: absolute;
				width: 300px;
				top: 270px;
				color: #000000;
				font-size: 14px;
				line-height: 17px;
				font-family: 'trivia-serif';
				left: 50%;
				margin-left: -150px;
				text-align: center;
			}
		}
		
		.vignette {
			display: block;
			margin: 50px auto;
		}
		
		.description {
			width: 500px;
			text-align: center;
			font-family: 'trivia-grotesk';
			font-size: 23px;
			line-height: 28px;
			margin: 0 auto;
		}
	}
	
	.results {
		padding: 50px 0px;
		
		.result-button {
			width: 300px;
			padding: 15px 30px;
			font-family: 'oukwat-regular';
			font-size: 36px;
			margin: 0 auto;
			cursor: pointer;
			background-color: @yellow;
			opacity: 0.9;
			
			&:hover {
				opacity: 1;
			}
			
			&.disabled {
				pointer-events: none;
				opacity: 0.5;
			}
			
			&.hidden {
				display: none;
			}
		}
		
		.sections-left {
			padding: 20px 0px;
			text-align: center;
			font-size: 20px;
			line-height: 24px;
			font-family: 'trivia-serif';
			color: #000000;
			
			&.hidden {
				display: none;
			}
			
			&.hidden {
				display: none;
			}
		}
		
		.the-end {
			&.hidden {
				display: none;
			}
		}
		
		.you {
			font-family: 'trivia-grotesk';
			font-size: 20px;
			line-height: 28px;
			width: 900px;
			margin: 0 auto;
			text-align: center;
			
			.r {
				text-align: center;
				font-family: 'oukwat-regular';
				font-size: 50px;
				padding: 80px 0px;
				color: @blue;
			}
			
			a {
				color: @blue;
			}
		}
		
		.we {
			font-family: 'oukwat-regular';
			font-size: 36px;
			line-height: 48px;
			width: 900px;
			padding-bottom: 50px;
			margin: 0 auto;
			text-align: center;
		}
	}

	.all {
		.section {
			padding: 50px 0px;
		
			.container {
				width: @width;
				margin: 0 auto;
			}
		
			.chapter {
				text-align: center;
				font-family: 'oukwat-regular';
				font-size: 124px;
				line-height: 165px;
				color: #000000;
			}
			
			.question {
				width: @tight;
				margin: 0 auto;
				text-align: center;
				font-family: 'oukwat-regular';
				font-size: 27px;
				line-height: 35px;
				color: #000000;
			}
			
			.content {
				margin-top: 40px;
			}
			
			.end {
				display: none;
				margin-top: 40px;
			
				.result {
					width: @tight;
					margin: 0 auto;
					text-align: center;
					color: @pink;
					font-size: 18px;
					line-height: 22px;
					font-family: 'trivia-grotesk';
				}
				
				.vignette {
					display: block;
					margin: 40px auto;
				}
				
				.some-words {
					width: 600px;
					margin: 40px auto;
					font-size: 20px;
					line-height: 24px;
					font-family: 'trivia-grotesk';
					text-align: center;
				}
				
				.next {
					position: relative;
					width: @tight;
					margin: 0 auto;
					text-align: center;
					color: @pink;
					font-size: 18px;
					line-height: 22px;
					font-family: 'trivia-grotesk';
					
					&:after {
						content: '↓';
						position: absolute;
						width: 11px;
						height: 14px;
						/*background-image: url(../images/arrow.png);*/
						left: 50%;
						top: 100%;
						margin-left: -5px;
						margin-top: 5px;
					}
				}
				
				&.shown {
					display: block!important;
				}
			}
			
			&.map {
				#map {
					position: relative;
					width: 883px;
					height: 484px;
					background-image: url(../images/3.jpg);
				
					.marker {
						position: absolute;
						pointer-events: none;
						.transition(@target: opacity, @duration: 400ms);
					
						&.user {
							width: 48px;
							height: 80px;
							background-image: url(../images/5.png);
							opacity: 0;
							margin-left: -4px;
							margin-top: -81px;
							z-index: 1;
						}
					
						&.real {
							width: 45px;
							height: 76px;
							background-image: url(../images/4.png);
							opacity: 0;
							margin-left: -3px;
							margin-top: -76px;
							z-index: 2;
						}
					}
					
					&.answered {
						.marker {
							opacity: 1;
						}
					}
					
					&:hover:not(.answered) {
						.user {
							opacity: 1;
						}
					}
				}
			}
			
			&.monarch {
				background-color: @blue;
				
				.portraits {
					@n: 4;
					@p_width: @width / @n;
					@border_width: 7px;
				
					.item {
						position: relative;
						width: @p_width;
						float: left;
						
						.portrait {
							width: @p_width - @border_width * 2;
							border: @border_width solid @blue;
							cursor: pointer;
							.transition(@duration: 400ms);
						}
						
						.name {
							padding: 10px 0px;
							font-size: 20px;
							line-height: 24px;
							font-family: 'trivia-serif';
							color: transparent;
							pointer-events: none;
							text-align: center;
							
							span {
								font-size: 16px;
							}
						}
					}
					
					&.answered {
						.item {
							.portrait {
								pointer-events: none;
								cursor: default;
							}
						
							.name {
								color: #ffffff;
								pointer-events: auto;
							}
							
							&.this-one {
								.portrait {
									border-color: #ffffff;
								}
							}
							
							.true {
								border-color: @green!important;
							}
							
							.selected {
								border-color: @red;
							}
						}
					}
				}
				
				.next {
					color: #ffffff;
				}
			}
			
			&.pushkin {
				.lyrics {
					font-family: 'trivia-serif';
					font-size: 27px;
					line-height: 35px;
					text-align: left;
					margin: 0 auto;
					width: 640px;
					
					.selectricWrapper {
						display: inline-block;
						top: 10px;
						text-align: center;
						
						&.true {
							.selectric {
								background-color: @green;
							}
						}
						
						&.false {
							.selectric {
								background-color: @red;
							}
						}
						
						&.disabled {
							pointer-events: none;
						}
						
						.button {
							top: 3px;
						}
						
						.label, li {
							padding: 0;
						}
						
						* {
							font-family: 'trivia-serif'!important;
							font-size: 27px!important;
							line-height: 35px!important;
						}
						
						&:nth-of-type(1) {
							width: 250px;
						}
						
						&:nth-of-type(2) {
							width: 150px;
						}
						
						&:nth-of-type(3) {
							width: 70px;
						}
						
						&:nth-of-type(4) {
							width: 60px;
						}
						
						&:nth-of-type(5) {
							width: 70px;
						}
						
						&:nth-of-type(6) {
							width: 220px;
						}
						
						&:nth-of-type(7) {
							width: 60px;
						}
						
						&:nth-of-type(8) {
							width: 170px;
						}
						
						&:nth-of-type(9) {
							width: 140px;
						}
						
						&:nth-of-type(10) {
							width: 80px;
						}
						
						&:nth-of-type(11) {
							width: 60px;
						}
						
						&:nth-of-type(12) {
							width: 190px;
						}
						
						&:nth-of-type(13) {
							width: 60px;
						}
						
						&:nth-of-type(14) {
							width: 60px;
						}
						
						&:nth-of-type(15) {
							width: 80px;
						}
						
						&:nth-of-type(16) {
							width: 120px;
						}
						
						&:nth-of-type(17) {
							width: 60px;
						}
					}
				}
			}
			
			&.fine {
				background-color: @yellow;
				
				.items {
					.item {
						.transition(@duration: 400ms);
					
						.item-question {
							font-family: 'trivia-serif';
							font-size: 30px;
							line-height: 36px;
							margin-bottom: 12px;
							cursor: pointer;
							
							&:hover {
								text-decoration: underline;
							}
						}
						
						.item-answer {
							font-family: 'trivia-grotesk';
							font-size: 20px;
							line-height: 24px;
							margin-bottom: 24px;
							opacity: 0;
							pointer-events: none;
							.transition(@duration: 400ms);
						}
					}
				}
				
				&.answered {
					.item {
						opacity: 0.3;
						pointer-events: none;
					}
				
					.item.selected {
						opacity: 1;
						
						.item-question {
							text-decoration: line-through;
						}
					
						.item-answer {
							opacity: 1;
							pointer-events: auto;
							color: @red;
						}
					}
					
					.item.true {
						opacity: 1;
						
						.item-question {
							text-decoration: none!important;
						}
					
						.item-answer {
							opacity: 1;
							pointer-events: auto;
							color: #000000!important;
						}
					}
				}
				
				.next {
					color: #ffffff;
				}
			}
			
			&.emigrants {
				.answer-it {
					text-align: center;
					width: 200px;
					padding: 15px 30px;
					background-color: @yellow;
					margin: 0 auto;
					font-family: 'oukwat-regular';
					font-size: 24px;
					color: #000000;
					cursor: pointer;
					opacity: 0.8;
					
					&:hover {
						opacity: 1;
					}
					
					&.hidden {
						display: none;
					}
				}
			
				.list {
					width: 550px;
					margin: 0 auto;
					margin-bottom: 40px;
					overflow: hidden;
					.transition(@duration: 600ms);
				
					.list-item {
						position: relative;
						height: 70px;
						line-height: 70px;
						margin-bottom: 10px;
					
						.left {
							position: relative;
							height: 100%;
							float: left;
							width: 550px;
							
							.bar {
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								background-color: #feeed2;
								.transition(@duration: 600ms);
							}
							
							.info {
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								
								.country {
									margin-left: 100px;
									font-family: 'oukwat-regular';
									font-size: 28px;
									line-height: 70px;
								}
								
								.population {
									font-family: 'trivia-serif';
									font-size: 24px;
									line-height: 70px;
									margin-left: 20px;
									opacity: 0;
									pointer-events: none;
									.transition(@duration: 600ms);
								}
							}
						}
						
						.right {
							position: absolute;
							height: 100%;
							width: 150px;
							right: -30px;
						
							.data {
								display: block;
								padding-left: 0px;
								font-family: 'trivia-grotesk';
								font-size: 12px;
								line-height: 15px;
								color: #a6a6a6;
								opacity: 0;
								pointer-events: none;
								.transition(@duration: 600ms);
							}
						}
						
						&.placeholder {
							.left {
								border: 1px dashed fadeout(#000000, 70%);
								.box-sizing;
							}
						}
					}
				}
				
				&.answered {
					.list {
						width: 700px!important;
					}
				
					.population, .data {
						opacity: 1!important;
						pointer-events: auto!important;
					}
					
					.b-1 {
						width: 7% + 15%!important;
					}
					
					.b-2 {
						width: 2% + 15%!important;
					}
					
					.b-3 {
						width: 60% + 15%!important;
					}
					
					.b-4 {
						width: 27% + 15%!important;
					}
					
					.b-5 {
						width: 5% + 15%!important;
					}
				}
			}
			
			&.news {
				background-color: @blue;
				
				.questions {
					width: 600px;
					float: left;
				
					.question {
						width: 180px;
						float: left;
						font-family: 'trivia-grotesk';
						font-size: 17px;
						line-height: 20px;
						color: #000000;
						text-align: left;
						margin-bottom: 30px;
						margin-right: 20px;
						
						
						.num {
							color: #ffffff;
							margin-bottom: 10px;
						}
					}
				}
				
				.answers {
					width: 250px;
					float: right;
					
					.answer {
						padding: 10px 15px;
						background-color: rgba(255, 255, 255, 1 - 0.618);
						margin-bottom: 3px;
						cursor: pointer;
						font-family: 'oukwat-regular';
						font-size: 17px;
						line-height: 22px;
						
						&:hover {
							background-color: rgba(255, 255, 255, 0.618);
						}
					}
				}
				
				&.answered {
					.answers {
						pointer-events: none;
						
						.selected {
							background-color: @red;
						}
						
						.true {
							background-color: @green!important;
						}
					}
				}
				
				.next {
					color: #ffffff;
				}
			}
		}
	}
}

#m-page {
	width: 320px;
	
	.queue {
		.item {
			.before {
				.num {
					background-color: @blue;
					padding: 20px 20px;
					color: #ffffff;
					font-family: 'trivia-grotesk';
					font-size: 17px;
					line-height: 20px;
				}
				
				.question {
					font-family: 'oukwat-regular';
					font-size: 24px;
					line-height: 28px;
					background-color: @blue;
					padding: 0px 20px;
					padding-bottom: 30px;
					color: #ffffff;
				}
				
				.answers {
					.answer {
					}
				}
			}
			
			.after {
				.state {
				}
				
				.description {
					
				}
				
				.next {
					
				}
			}
		}
	}

	.hello {
		.header {
			position: relative;
			height: 400px;
			background-image: url(../images/m1.jpg);
			.cover;
			
			.title {
				position: absolute;
				width: 100%;
				font-family: 'oukwat-regular';
				font-size: 30px;
				color: #000000;
				line-height: 32px;
				text-align: center;
				top: 50px;
			}
		}
		
		.subtitle {
			padding: 20px 20px;
			font-family: 'trivia-serif';
			font-size: 20px;
			line-height: 26px;
			text-align: center;
		}
		
		.vignette {
			width: 320px;
		}
		
		.description {
			padding: 20px 20px;
			font-family: 'trivia-grotesk';
			font-size: 20px;
			line-height: 26px;
		}
		
		.start {
			background-color: @yellow;
			font-family: 'oukwat-regular';
			font-size: 30px;
			padding: 30px 0px;
			cursor: pointer;
			text-align: center;
		}
	}
}

/*======================================================================
  Selectric
======================================================================*/
.selectricWrapper {
  position: relative;
  margin: 0 0 10px;
  width: 300px;
  cursor: pointer;
}

.selectricResponsive {
  width: 100%;
}

.selectric {
  border: 1px solid #DDD;
  background: #F8F8F8;
  position: relative;
  border-radius: 2px;
}
.selectric .label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 30px 0 0;
  padding: 6px;
  font-size: 12px;
  line-height: 18px;
  color: #444;
  min-height: 18px;
}
.selectric .button {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  color: #BBB;
  text-align: center;
  font: 0/0 a;
  /* IE Fix */
  *font: 20px/30px Lucida Sans Unicode, Arial Unicode MS, Arial;
}
.selectric .button:after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: #BBB;
  border-bottom: none;
}

.selectricHover .selectric {
  border-color: #CCC;
}
.selectricHover .selectric .button {
  color: #888;
}
.selectricHover .selectric .button:after {
  border-top-color: #888;
}

.selectricOpen {
  z-index: 9999;
}
.selectricOpen .selectric {
  border-color: #CCC;
  background: #F0F0F0;
}
.selectricOpen .selectricItems {
  display: block;
}

.selectricDisabled {
  filter: alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.selectricHideSelect {
  position: relative;
  overflow: hidden;
  width: 0;
  height: 0;
}
.selectricHideSelect select {
  position: absolute;
  left: -100%;
  display: none;
}

.selectricInput {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  outline: none !important;
  border: none !important;
  *font: 0/0 a !important;
  background: none !important;
}

.selectricTempShow {
  position: absolute !important;
  visibility: hidden !important;
  display: block !important;
}

/* Items box */
.selectricItems {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #F9F9F9;
  border: 1px solid #CCC;
  z-index: -1;
  box-shadow: 0 0 10px -6px;
}
.selectricItems .selectricScroll {
  height: 100%;
  overflow: auto;
}
.selectricAbove .selectricItems {
  top: auto;
  bottom: 100%;
}
.selectricItems ul, .selectricItems li {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  min-height: 20px;
}
.selectricItems li {
  display: block;
  padding: 5px;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #EEE;
  color: #666;
  cursor: pointer;
}
.selectricItems li.selected {
  background: #EFEFEF;
  color: #444;
  border-top-color: #E0E0E0;
}
.selectricItems li:hover {
  background: #F0F0F0;
  color: #444;
}
.selectricItems li.disabled {
  background: #F5F5F5;
  color: #BBB;
  border-top-color: #FAFAFA;
  cursor: default;
}