/* 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;
                z-index: 999999;
        }
}

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

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

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

#page {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .transition;
    
    #preloader {
    	width: 100%;
    	height: 100%;
    	position: fixed;
    	z-index: 1000;
    	background-color: #fff;
    	overflow: auto;
    	.transition;
    	
    	.progress {
    		position: absolute;
    		height: 60px;
    		top: 493px;
    		left: 470px;
    		line-height: 50px;
    		font-size: 60px;
    		text-align: center;
    		color: #ffffff;
    	}
    	
    	.zahod {
    		position: relative;
    		width: 791px;
    		height: 637px;
    		background: url(../zahod/zah.png);
    		margin: 30px auto;
    		
    		.text {
    			position: absolute;
    			font-family: ProximaNova-Regular;
    			font-size: 14px;
    			line-height: 17px;
    			width: 435px;
    			top: 245px;
    			left: 310px;
    			color: #fff;
    			
    			a {
    				color: #fff;
    			}
    		}
    		.authors {
    			position: absolute;
    			font-family: ProximaNova-Regular;
    			font-size: 12px;
    			line-height: 17px;
    			width: 200px;
    			top: 159px;
    			left: 600px;
    			color: #fff;
    			
    			a {
    				color: #fff;
    			}
    		}
    		.start {
    			display: none;
    			position: absolute;
    			width: 252px;
    			height: 60px;
    			top: 486px;
    			left: 408px;
    			background: url(../zahod/button.png);
    			cursor: pointer;
    			
    			&:hover {
    				background: url(../zahod/button_hover.png);
    			}
    		}
    	}
    	
    	&.hidden {
    		opacity: 0;
    	}
    }
    
    #stage {
    	width: 100%;
    	height: 100%;
    	overflow: hidden;
    	position: relative;
    	z-index: 1;
    	
    	.object {
	    	position: absolute;
	    }
    }
    
    #guide {
    	position: fixed;
    	display: none;
    	width: 268px;
    	height: 97px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin: -46px 0 0 -134px;
    	background: url(../zahod/info.png);
    	z-index: 99999;
    }
}

#artist {
	display: none;
	position: fixed;
	right: 20px;
	top: 20px;
	z-index: 1;
	width: 90px;
	
	.image {
		width: 90px;
		height: 75px;
		background-repeat: no-repeat;
		background-position: center center;
	}
	.name {
		text-align: center;
		width: 90px;
		font-family: ProximaNova-Regular;
		padding-top: 10px;
		font-size: 16px;
	}
}