/* 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%;
        background: #f1f4ef;
}

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

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

html{
    height: 100%;
    overflow-x: hidden;
}

.curtains{
    width: 100%;
    z-index:1;
    position:relative;
}

.curtains>li{
    -webkit-transform:translateZ(0);
    background: white;
    position: fixed;
    display:block;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    z-index:1;
}
.curtains>li.hidden{display:none;}
.curtains>li:first-child{z-index:2;}

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

@green: #fb0016;
@blue: #7c4768;

#page {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 920;
    min-height: 600px;
    
    .layer {
    	width: 100%;
    	height: 100%;
    	position: relative;
    	/*background-attachment: fixed;*/
    }
    
    .start {
    	.cover;
    	background-position: center bottom;
    	min-height: 855px!important;
    	background-image: url(../images/z1.jpg);
    }
    
    .about {
    	background-image: url(../images/z2.jpg);
    	background-repeat: no-repeat;
    	background-position: center center;
    	min-height: 855px!important;
    	
    	a {
    		position: absolute;
    		width: 170px;
    		height: 50px;
    		left: 50%;
    		top: 50%;
    		margin-left: -50px;
    		margin-top: -180px;
    	}
    }
    
    .action {
    	background-color: #FFBA00;
    	.transition;
    	
    	&.green {
    		background-color: #FFBA00;
    	}
    
    	.wrapper {
    		width: 800px;
    		height: 500px;
    		position: absolute;
    		top: 50%;
    		left: 50%;
    		margin-left: -400px;
    		margin-top: -250px;
    		
    		.container {
    			width: 100%;
    			height: 100%;
    			position: relative;
    			
    			.question {
    				position: absolute;
    				width: 100%;
    				height: 100%;
    				opacity: 0;
    				top: 0;
    				left: 0;
    				color: #000000;
    				.transition;
    				
    				.counter {
    					position: absolute;
    					left: 0;
    					top: 0;
    					font-family: ProximaNova-Extrabld;
    					font-size: 20px;
    					line-height: 40px;
    				}
    				
    				.question-text {
    					font-family: ProximaNova-Extrabld;
    					font-size: 30px;
    					line-height: 36px;
    					margin-bottom: 40px;
    					padding-left: 60px;
    				}
    				
    				.f-answers {
    					padding-left: 60px;
    				
    					.f-answer {
    						cursor: pointer;
    						font-family: PTSerif-Regular;
	    					font-size: 18px;
	    					line-height: 28px;
	    					border-bottom: 4px solid transparent;
	    					display: inline-block;
    						
    						&.answered {
    							cursor: default;
    						}
    						
    						&:hover:not(.answered) {
    							border-color: #000000;
    						}
    					}
    				}
    				
    				&.shown {
    					opacity: 1;
    					z-index: 20;
    				}
    			}
    			
    			.results {
    				display: none;
    				width: 800px;
    				height: 420px;
    				position: relative;
    				left: 50%;
    				top: 50%;
    				margin-left: -400px;
    				margin-top: -310px;
    				color: #000000!important;
    				text-align: center;
    				
    				.image {
    					width: 440px;
    					height: 200px;
    					margin: 0 auto;
    					margin-bottom: 25px;
    					display: none;
    				}
    				
    				.name {
    					font-family: ProximaNova-Extrabld;
    					font-size: 30px;
    					line-height: 40px;
    					margin-bottom: 25px;
    				}
    				
    				.description {
    					font-family: PTSerif-Regular;
    					font-size: 16px;
    					line-height: 20px;
    					margin-bottom: 30px;
    					width: 520px;
    					margin: 0 auto;
    					text-align: center;
    					
    					p {
    						margin-bottom: 20px;
    						
    						&.p-3 {
    							margin-bottom: 0;
    							font-style: italic;
    						}
    						
    						a {
    							color: #000000;
    							text-decoration: underline;
    						}
    					}
    				}
    				
    				.buttons {
						height: 35px;
						text-align: center;
						width: 100%;
						position: absolute;
						bottom: 0px;
						margin: 0 auto;
						
						.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);
								}
							}
						}
					}
    			}
    		}
    	}
    }
}