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

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

@orange: #e99736;

#page {
    position: relative;
    width: 100%;
    height: 100%;
    
    .start {
    	position: relative;
    	width: 100%;
    	background-color: #000000;
    	padding-top: 50px;
    	padding-bottom: 100px;
    	
    	&.hidden {
    		display: none;
    	}
    	
    	.title {
    		padding: 20px;
    		border: 6px solid #ffffff;
    		margin: 0px auto;
    		width: 400px;
    		color: #ffffff;
    		text-align: center;
    		font-family: 'ProximaNova-Extrabld';
    		font-size: 24px;
    		line-height: 30px;
    		text-transform: uppercase;
    	}
    	
    	.subtitle {
    		color: #ffffff;
    		font-family: 'PTSerif-Italic';
    		font-size: 24px;
    		line-height: 60px;
    		width: 700px;
    		margin: 50px auto;
    		border-bottom: 1px solid @orange;
    		text-align: center;
    	}
    	
    	.authors {
    		width: 600px;
    		margin: 30px auto;
    		text-align: center;
    		color: #ffffff;
    		font-family: 'ProximaNova-Regular';
    		font-size: 16px;
    		
    		a {
    			color: @orange;
    		}
    	}
    	
    	.hand {
    		width: 1000px;
    		height: 600px;
    		margin: 0 auto;
    		position: relative;
    		pointer-events: none;
    		
    		.image {
    			position: absolute;
    			width: 100%;
    			height: 100%;
    			left: 0;
    			top: 0;
    			display: none;
    			
    			&.shown {
    				display: block;
    			}
    		}
    	}
    	
    	.description {
    		color: #ffffff;
    		margin: 0px auto;
    		margin-bottom: 50px;
    		width: 400px;
    		font-family: 'ProximaNovaT-Thin';
    		font-size: 14px;
    		line-height: 18px;
    		text-align: center;
    	}
    	
    	.button {
    		width: 330px;
    		height: 70px;
    		line-height: 68px;
    		text-align: center;
    		font-family: 'ProximaNova-Regular';
    		font-size: 14px;
    		color: @orange;
    		cursor: pointer;
    		border: 1px solid @orange;
    		margin: 0 auto;
    		.radius;
    		.box-sizing;
    		
    		&:hover {
    			color: #000000;
    			background-color: @orange;
    		}
    	}
    }
    
    .action {
    	min-width: 1200px;
    	min-height: 600px;
    	position: relative;
    	width: 100%;
    	height: 100%;
    	background-color: #000000;
    	
    	&.hidden {
    		display: none;
    	}
    	
    	&.disabled {
    		pointer-events: none;
    	}
    	
    	.scene {
    		position: absolute;
    		width: 1000px;
    		height: 600px;
    		top: 50%;
    		left: 50%;
    		margin-left: -400px;
    		margin-top: -300px;
    		
    		.control {
    			width: 25px;
    			height: 48px;
    			position: absolute;
    			top: 50%;
    			margin-top: -24px;
    			cursor: pointer;
    			z-index: 5;
    			
    			&.prev {
    				left: 0;
    				background-image: url(../images/arrow_left.png);
    			}
    			
    			&.next {
    				right: 0;
    				background-image: url(../images/arrow_right.png);
    			}
    		}
    		
    		.country {
    			z-index: 4;
    			position: absolute;
    			color: #ffffff;
    			width: 500px;
    			height: 30px;
    			line-height: 30px;
    			left: 0%;
    			bottom: 80px;
    			font-family: 'ProximaNova-Extrabld';
    			font-size: 20px;
    		}
    		
    		.designer {
    			z-index: 4;
    			position: absolute;
    			color: @orange;
    			width: 850px;
    			height: 30px;
    			line-height: 30px;
    			left: 0%;
    			bottom: 50px;
    			font-family: 'ProximaNova-Regular';
    			font-size: 14px;
    			
    			span {
    				color: #ffffff;
    				text-transform: uppercase;
    			}
    			
    			a {
    				color: #ffffff;
    			}
    		}
    		
    		.like-it {
    			position: absolute;
    			width: 200px;
    			height: 30px;
    			z-index: 4;
    			bottom: 10px;
    			left: 0%;
    		}
    		
    		.real-form {
    			position: absolute;
    			width: 100%;
    			height: 100%;
    			z-index: 6;
    			display: none;
    			background-color: rgba(0, 0, 0, 0.8);
    			
    			&.shown {
    				display: block;
    			}
    			
    			.close {
    				position: absolute;
    				width: 40px;
    				height: 40px;
    				background-image: url(../images/cross.png);
    				cursor: pointer;
    				top: 10px;
    				right: 40px;
    			}
    			
    			.image {
    				width: 300px;
    				height: 450px;
    				position: absolute;
    				left: 50%;
    				top: 50%;
    				margin-left: -151px;
    				margin-top: -226px;
    				border: 1px solid @orange;
    			}
    		}
    		
    		.real-form-show {
    			position: absolute;
    			top: 120px;
    			right: 10px;
    			cursor: pointer;
    			width: 100px;
    			z-index: 4;
    			text-align: center;
    			font-family: 'ProximaNova-Regular';
    			font-size: 11px;
    			line-height: 13px;
    			color: @orange;
    			
    			&:hover {
    				text-decoration: underline;
    			}
    		}
    		
    		.comment-button {
    			position: absolute;
    			top: 10px;
    			right: 10px;
    			cursor: pointer;
    			width: 100px;
    			padding-top: 50px;
    			z-index: 4;
    			text-align: center;
    			font-family: 'ProximaNova-Regular';
    			font-size: 11px;
    			line-height: 13px;
    			color: @orange;
    			.box-sizing;
    			
    			background-image: url(../images/eye.png);
    			background-repeat: no-repeat;
    			background-position: center top;
    			
    			&:hover {
    				background-image: url(../images/eye_hover.png);
    				text-decoration: underline;
    			}
    			
    			&.hidden {
    				display: none;
    			}
    		}
    		
    		.comment {
    			position: absolute;
    			z-index: 4;
    			top: 0;
    			right: 30px;
    			width: 400px;
    			padding: 50px;
    			background-color: rgba(255, 255, 255, 0.8);
    			.box-sizing;
    			
    			.name {
    				display: none;
    			}
    			
    			.text {
    				color: #000000;
    				font-family: 'PTSerif-Italic';
    				font-size: 16px;
    				line-height: 20px;
    				
    				a {
    					color: #000000;
    				}
    			}
    			
    			.close {
    				position: absolute;
    				width: 40px;
    				height: 40px;
    				background-image: url(../images/cross.png);
    				cursor: pointer;
    				top: 10px;
    				right: 10px;
    			}
    		
    			&.hidden {
    				display: none;
    			}
    		}
    	
    		.preview {
    			position: absolute;
    			width: 100%;
    			height: 100%;
    			z-index: 3;
    			display: none;
    			
    			&.shown {
    				display: block;
    			}
    		}
    		
    		.form-images {
    			position: absolute;
    			width: 100%;
    			height: 100%;
    			z-index: 2;
    			
    			.image {
    				position: absolute;
    				width: 100%;
    				height: 100%;
    				position: absolute;
    				left: 0;
    				top: 0;
    				display: none;
    				.cover;
    				
    				&.shown {
    					display: block;
    				}
    			}
    		}
    	}
    
    	.country-list {
    		width: 200px;
    		position: absolute;
    		height: 90%;
    		outline: none!important;
    		top: 5%;
    		
    		.jspVerticalBar {
    			background-color: #000000;
    			
    			.jspTrack {
    				background-color: #000000;
    				
    				&:after {
    					content: '';
    					position: absolute;
    					z-index: 1;
    					height: 100%;
    					width: 1px;
    					background-color: @orange;
    					left: 7px;
    					top: 0px;
    				}
    				
    				.jspDrag {
    					background-color: #000000;
    					border: 1px solid @orange;
    					.box-sizing;
    					z-index: 2;
    				}
    			}
    		}
    		
    		.country {
    			height: 20px;
    			padding: 10px 0px;
    			cursor: pointer;
    			
    			.left {
    				float: left;
    				width: 50px;
    				height: 100%;
    				
    				.flag {
    					width: 20px;
    					height: 20px;
    					margin: 0 auto;
    					.cover;
    					.radius;
    				}
    			}
    			
    			.right {
    				float: left;
    				width: 120px;
    				height: 100%;
    				
    				.name {
    					height: 100%;
    					line-height: 20px;
    					font-size: 18px;
    					color: @orange;
    					font-family: 'ProximaNova-Regular';
    					font-size: 11px;
    					text-transform: uppercase;
    					white-space: nowrap;
    				}
    			}
    			
    			&.disabled {
    				pointer-events: none;
    				
    				.name {
    					color: #ffffff;
    				}
    			}
    		}
    	}
    }
    
    .footer {
    	padding-top: 30px;
    	background-color: #000000;
    }
}

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

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

        .most-read {
                color: #ffffff!important;
        
                a {
                        color: #ffffff!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: #ffffff!important;
        
                a {
                        color: #ffffff!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;
                                        }
                                }
                        }
                }
        }
}


.form-shares {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 4;
	color: @orange;
	font-family: ProximaNova-Regular;
	text-transform: uppercase;
	font-size: 11px;
	line-height: 13px;
	text-align: center;
	width: 100px;
	
	.b-share {
		a {
			display: block;
			text-align: center;
			width: 30px;
			height: 30px;
			float: none;
		}
		.b-share-icon {
			display: inline-block;
			width: 30px;
			height: 30px;
		}
		.b-share-icon_vkontakte {
			background: url(../images/vk.png);
			
			&:hover {
				background: url(../images/vk_hover.png);
			}
		}
		.b-share-icon_facebook {
			background: url(../images/fb.png);
			
			&:hover {
				background: url(../images/fb_hover.png);
			}
		}
		.b-share-icon_twitter {
			background: url(../images/twitter.png);
			
			&:hover {
				background: url(../images/twitter_hover.png);
			}
		}
	}
}

.comments {
	background: #fff;
	padding: 30px;
}