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

.social-share {
        margin-top:  50px;
        margin-left: 20px;
        position: fixed;
        z-index: 1000;
        
        &.pie {
        	display: block;
        }
}

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

.transition( @duration:200ms, @target:all ) {
        -webkit-transition: @target @duration ease;
        -moz-transition: @target @duration ease;
        -o-transition: @target @duration ease;
        transition: @target @duration ease;
}

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

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

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

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

html, body {
}

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

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

@width: 900px;
@yellow: #fefc8b;

#page {
	min-width: @width;
	color: #000000;
	
	a {
		color: #000000;
	}
	
	.container {
		position: relative;
		width: @width;
		margin: 0 auto;
		height: 100%;
	}
	
	.start {
		height: 1220px;
		background-image: url(../images/1.gif);
		background-repeat: no-repeat;
		background-position: 20% 0%;
		
		.image {
			position: absolute;
			width: 313px;
			height: 357px;
			background-image: url(../images/2.png);
			top: 38px;
			left: 0px;
		}
		
		.title {
			position: absolute;
			width: 516px;
			height: 637px;
			background-image: url(../images/3.png);
			top: 0px;
			left: 290px;
		}
		
		.lead {
			position: absolute;
			width: 322px;
			height: 330px;
			background-image: url(../images/4.png);
			top: 410px;
			left: 130px;
		}
		
		.description {
			position: absolute;
			width: 650px;
			top: 765px;
			left: 50%;
			margin-left: -325px;
			font-family: 'PTSerif-Regular';
			font-size: 16px;
			line-height: 28px;
		}
		
		.author {
			position: absolute;
			width: 200px;
			height: 30px;
			font-family: 'PTSerif-Regular';
			font-size: 16px;
			line-height: 30px;
			top: 600px;
			left: 560px;
		}
	}
	
	.action {
		height: 700px;
		overflow: hidden;
		.transition;
		
		&.hidden {
			height: 0px;
		}
	
		.counter {
			position: absolute;
			width: 100px;
			height: 60px;
			left: 0px;
			top: 0px;
			font-family: 'ProximaNova-Regular';
			font-size: 21px;
			line-height: 26px;
			.no-select;
		}
		
		.image {
			position: absolute;
			width: 600px;
			height: 600px;
			left: 0px;
			top: 50px;
			background-repeat: no-repeat;
			.transition;
			.no-select;
			
			&.hidden {
				opacity: 0;
			}
		}
		
		.answers {
			position: absolute;
			width: 300px;
			text-align: center;
			top: 200px;
			left: 600px;
			.no-select;
		
			.answer {
				display: inline-block;
				cursor: pointer;
				font-family: 'ProximaNova-Extrabld';
				font-size: 39px;
				line-height: 56px;
				color: #000000;
				border-bottom: 3px solid transparent;
				.transition;
				
				&.disabled {
					cursor: default;
					opacity: 0.8;
				}
				
				&.right {
					color: #00ff00;
				}
				
				&.wrong {
					color: #ff0000;
				}
				
				&:hover:not(.disabled) {
					border-color: #000000;
				}
			}
			
			&:before {
				content: '';
				position: absolute;
				width: 153px;
				height: 153px;
				background-image: url(../images/5.png);
				top: -200px;
				left: 70px;
			}
		}
		
		.name {
			position: absolute;
			top: 600px;
			left: 630px;
			width: 270px;
			font-family: 'ProximaNova-Extrabld';
			font-size: 16px;
			line-height: 19px;
			.transition;
			
			&.hidden {
				opacity: 0;
			}
		}
		
		.next {
			position: absolute;
			width: 300px;
			text-align: center;
			height: 80px;
			left: 600px;
			top: 400px;
			color: #5766fa;
			cursor: pointer;
			font-family: 'ProximaNova-Regular';
			font-size: 21px;
			line-height: 26px;
			text-decoration: underline;
			.transition;
			.no-select;
			
			&.hidden {
				opacity: 0;
			}
		
			&.disabled {
				cursor: default;
			}
			
			&:hover:not(.hidden) {
				opacity: 1;
			}
		}
	}
	
	.finish {
		background-color: #4ebefb;
		height: 3470px;
		overflow: hidden;
		padding: 50px 0px;
		.transition;
		
		.container {
			height: auto;
		}
		
		&.hidden {
			height: 0px;
			padding: 0px;
		}
		
		.you {
			color: #ffffff;
			font-family: 'ProximaNova-Extrabld';
			font-size: 43px;
			line-height: 51px;
			width: 650px;
			margin: 0 auto;
		}
		
		.buttons {
			height: 35px;
			text-align: left;
			width: 650px;
			margin: 0 auto;
			padding: 30px 0px;
			border-bottom: 1px solid @yellow;
			
			.button {
				width: 145px;
				height: 35px;
				display: inline-block;
				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);
					}
				}
			}
		}
		
		.about {
			width: 1000px;
			margin: 0 auto;
			color: #000000;
			
			a {
				color: #000000;
			}
			
			.title {
				margin: 50px 0px;
				padding: 0px 170px;
				font-family: 'PTSerif-Regular';
				font-size: 29px;
				line-height: 30px;
			}
			
			.section {
				margin-bottom: 50px;
			
				.text {
					padding: 0px 170px;
					margin-bottom: 50px;
					font-family: 'PTSerif-Regular';
					font-size: 16px;
					line-height: 28px;
					
					span {
						color: @yellow;
					}
				}
				
				.columns {
					img {
						display: inline-block;
					}
					
					.names {
						margin-left: 20px;
						width: 220px;
						display: inline-block;
						vertical-align: top;
						color: @yellow;
						
						.name {
							margin-bottom: 100px;
							font-family: 'ProximaNova-Regular';
							font-size: 14px;
							line-height: 17px;
						}
					}
				}
			}
		}
	}
}

.comm {
        width: 920px;
        margin: 0 auto;
        margin-top: 20px;
        
        @active_color: #ffca24;

        .most-read {
                color: #000000!important;
        
                a {
                        color: #000000!important;
                }
                margin-bottom: 30px;
        
                .container {
                        width: 920px!important;
                        margin: 0 auto;
                
                        .label {
                                padding: 30px 0px;
                                font-family: PTSansPro-Caption;
                                font-size: 19px;
                        }
                
                        .item {
                                width: 200px;
                                float: left;
                                margin-left: 40px;
                        
                                .image {
                                        display: block;
                                        width: 200px;
                                        height: 200px;
                                        background-size: cover;
                                        background-position: 50% 50%;
                                }
                                
                                .title {
                                        display: block;
                                        padding: 10px 0px;
                                        font-family: PTSerif-Regular;
                                        font-size: 18px;
                                        line-height: 20px;
                                        color: #000000;
                                        text-decoration: none;
                                }
                                
                                .lead {
                                        font-family: PTSansPro-Caption;
                                        font-size: 12px;
                                        line-height: 13px;
                                }
                                
                                &:nth-child(2) {
                                        margin: 0px;
                                }
                                
                                &:hover {
                                        .title {
                                                color: @active_color;
                                        }
                                }
                        }
                }
        }
        
        .same-read {
                color: #000000!important;
        
                a {
                        color: #000000!important;
                }
                margin-bottom: 30px;
                
                .container {
                        width: 920px;
                        margin: 0 auto;
                        
                        .label {
                                padding: 30px 0px;
                                font-family: PTSansPro-Caption;
                                font-size: 19px;
                        }
                        
                        .item {
                                width: 300px;
                                height: 100px;
                                margin-bottom: 30px;
                                float: left;
                                
                                .image {
                                        display: block;
                                        width: 100px;
                                        height: 100px;
                                        float: left;
                                        background-size: cover;
                                        background-position: 50% 50%;
                                        .transition;
                                }
                                
                                .info {
                                        float: left;
                                        width: 170px;
                                        padding: 0px 15px;
                                        
                                        .rubrics {
                                                margin-bottom: 15px;
                                                
                                                 a {
                                                        color: #000000;
                                                        text-decoration: none;
                                                        font-family: MonoCondensed-Bold;
                                                        font-size: 11px;
                                                        line-height: 13px;
                                                        
                                                        &:hover {
                                                                color: @active_color;
                                                        }
                                                 }
                                        }
                                        
                                        .title {
                                                margin-bottom: 20px;
                                                display: block;
                                                font-family: PTSerif-Regular;
                                                font-size: 20px;
                                                line-height: 21px;
                                                color: #000000;
                                                text-decoration: none;
                                                
                                                &:hover {
                                                        color: @active_color;
                                                }
                                        }
                                }
                                
                                &:hover {
                                        .title {
                                                color: @active_color;
                                        }
                                }
                        }
                }
        }
}