/* 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:400ms, @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;
}

.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 {
        width: 100%;
        height: 100%;
}

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

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

@blue: #3fafce;
@yellow: #fee63f;
@red: #e9102b;
@green: #127238;

#page {
    position: relative;
    width: 100%;
    min-height: 100%;
    min-width: 920px;
    
    .start {
    	font-family: 'ProximaNova-Regular';
    	font-size: 12px;
    	line-height: 14px;
    	padding: 50px 0px;
    	display: none;
    
    	.title {
    		width: 402px;
    		height: 163px;
    		background-image: url(../images/1.png);
    		margin: 0 auto;
    		margin-bottom: 50px;
    	}
    	
    	.lead, .description {
    		text-align: center;
    	
    		a {
    			color: #000000;
    		}
    	}
    	
    	.description {
    		width: 480px;
    		margin: 0 auto;
    	}
    	
    	.image {
    		width: 100%;
    		/*background-image: url(../images/2.jpg);
    		height: 500px;
    		.cover;*/
    	}
    	
    	.button {
    		width: 267px;
    		height: 72px;
    		background-image: url(../images/3.png);
    		cursor: pointer;
    		margin: 0 auto;
    		margin-top: 80px;
    		
    		&:hover {
    			background-image: url(../images/3_h.png);
    		}
    	}
    	
    	&.shown {
    		display: block;
    	}
    }
    
    .action {
    	position: relative;
    	display: none;
    
    	.bordered {
    		@border_width: 45px;
    		
    		border: @border_width solid @yellow;
    		
    		&.after {
    			border-color: @blue;
    		}
    	}
    
    	.level {
    		position: relative;
    		display: none;
    		.box-sizing;
    		
    		.next {
    			width: 202px;
    			height: 146px;
    			background-image: url(../images/next.png);
    			position: fixed;
    			left: 50%;
    			margin-left: 330px;
    			top: 50%;
    			margin-top: -73px;
    			opacity: 0;
    			pointer-events: none;
    			z-index: 2;
    			
    			&.shown {
    				opacity: 1;
    				cursor: pointer;
    				pointer-events: auto;
    			}
    		}
    		
    		.container {
    			@w: 800px;
    			
    			width: @w;
    			margin: 50px auto;
    		}
    		
    		&.high {
    			.container {
	    			@w: 800px;
	    			@h: 500px;
	    			
	    			position: absolute;
	    			z-index: 1;
	    			width: @w;
	    			height: @h;
	    			left: 50%;
	    			top: 50%;
	    			margin-top: -@h / 2;
	    			margin-left: -@w / 2;
	    		}
    		}
    		
    		.title {
    			width: 600px;
    			text-align: center;
    			font-family: 'ProximaNova-Regular';
		    	font-size: 30px;
		    	line-height: 36px;
		    	margin: 0 auto;
		    	margin-bottom: 30px;
    		}
    		
    		.options {
    			.option {
    				cursor: pointer;
    				font-family: 'ProximaNova-Regular';
			    	font-size: 20px;
			    	padding: 3px 10px;
			    	text-transform: lowercase;
			    	border: 2px solid transparent;
			    	margin-bottom: 10px;
			    	display: inline-block;
			    	.radius(8px);
			    	
			    	&:hover:not(.chosen) {
			    		border-color: #000000;
			    	}
    			}
    		}
    		
    		
    		&.one {
    			.column {
	    			width: 50%;
	    			float: left;
	    			padding-left: 150px;
	    			.box-sizing;
	    			
	    			&.disabled {
	    				opacity: 0.5;
	    				pointer-events: none;
	    			}
	    		}
	    		
	    		.hint {
	    			position: absolute;
	    			width: 200px;
	    			left: 50%;
	    			top: 50%;
	    			color: #1d94be;
	    			font-family: 'ProximaNova-Regular';
			    	font-size: 15px;
			    	line-height: 20px;
			    	display: none;
	    			
	    			&.first {
	    				margin-left: -530px;
	    				margin-top: -143px;
	    				text-align: right;
	    				display: block;
	    				
	    				&:after {
	    					content: '';
	    					position: absolute;
	    					width: 66px;
	    					height: 1px;
	    					background-color: #1d94be;
	    					top: 10px;
	    					right: -77px;
	    				}
	    			}
	    			
	    			&.second {
	    				margin-left: 340px;
	    				margin-top: -143px;
	    				
	    				&:after {
	    					content: '';
	    					position: absolute;
	    					width: 66px;
	    					height: 1px;
	    					background-color: #1d94be;
	    					top: 10px;
	    					right: 210px;
	    				}
	    			}
	    			
	    			&.third {
	    				margin-left: -530px;
	    				margin-top: -143px;
	    				text-align: right;
	    				
	    				&:after {
	    					content: '';
	    					position: absolute;
	    					width: 66px;
	    					height: 1px;
	    					background-color: #1d94be;
	    					top: 10px;
	    					right: -77px;
	    				}
	    			}
	    		}
    		}
    		
    		&.two {
    			.pairs {
    				margin-bottom: 50px;
    			}
    		
    			.column {
    				width: 50%;
	    			float: left;
	    			.box-sizing;
	    			
	    			&.left {
	    				padding-left: 220px;
	    			}
	    			
	    			&.right {
	    				padding-left: 40px;
	    			}
    			}
    		}
    		
    		&.three {
    			.options {
    				width: 300px;
    				margin: 0 auto;
    				
    				.column {
    					width: 50%;
    					float: left;
    				}
    				
    				.chosen {
    					border-color: @red;
    				}
    			}
    		}
    		
    		&.four {
    			.up, .down {
    				text-align: center;
    			}
    			
    			.down {
    				margin-bottom: 30px;
    			}
    			
    			.title {
    				margin-bottom: 40px;
    			}
    			
    			.label {
    				color: #1d94be;
	    			font-family: 'ProximaNova-Regular';
			    	font-size: 15px;
			    	line-height: 20px;
			    	text-align: center;
			    	margin-bottom: 30px;
    			}
    			
    			.option {
    				margin-right: 15px;
    			
    				&.chosen {
    					border-color: #000000;
    				
    					&.color1 {
	    					border-color: @red;
	    				}
	    				
	    				&.color3 {
	    					border-color: @blue;
	    				}
	    				
	    				&.color4 {
	    					border-color: @green;
	    				}
	    				
	    				&.color2 {
	    					border-color: @yellow;
	    				}
    				}
    				
    				&.color1 {
    					color: @red;
    				}
    				
    				&.color3 {
    					color: @blue;
    				}
    				
    				&.color4 {
    					color: @green;
    				}
    				
    				&.color2 {
    					color: @yellow;
    				}
    			}
    			
    			.next {
    				width: 188px;
    				height: 51px;
    				background-image: url(../images/end.png);
    				margin-top: 180px;
    				margin-left: -94px;
    			}
    		}
    		
    		&.shown {
    			display: block;
    		}
    	}
    	
    	&.shown {
    		display: block;
    	}
    }
    
    .finish {
    	position: relative;
    	border: 45px solid @blue;
    	display: none;
		.box-sizing;
		
		.container {
			@w: 800px;
    			
			width: @w;
			margin: 50px auto;
			/*@w: 700px;
			@h: 200px;
			
			position: absolute;
			z-index: 1;
			width: @w;
			height: @h;
			left: 50%;
			top: 50%;
			margin-top: -@h / 2;
			margin-left: -@w / 2;*/
		}
		
		.text {
			font-family: 'ProximaNova-Regular';
	    	font-size: 30px;
	    	line-height: 36px;
	    	text-align: center;
	    	margin-bottom: 50px;
		}
		
		.buttons {
			height: 35px;
			text-align: center;
			width: 100%;
			
			.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);
					}
				}
			}
		}
		
		.right-answers {
			width: 300px;
			margin: 0 auto;
			margin-top: 50px;
			
			.title {
				font-family: 'ProximaNova-Regular';
		    	font-size: 30px;
		    	line-height: 36px;
		    	margin-top: 15px;
		    	margin-bottom: 25px;
			}
			
			.section {
				.title {
					font-family: 'ProximaNova-Regular';
			    	font-size: 30px;
			    	line-height: 36px;
			    	margin: 15px 0px;
				}
				
				.answers {
					font-family: 'ProximaNova-Regular';
			    	font-size: 20px;
			    	text-transform: lowercase;
				
					.column {
						float: left;
						width: 50%;
					}
				}
			}
		}
		
		&.shown {
			display: block;
		}
    }
    
    .footer {
    	/*display: none;*/
    	
    	&.shown {
    		display: block;
    	}
    }
}

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