/* 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, @type:ease) {
        -webkit-transition: all @duration @type;
        -moz-transition: all @duration @type;
        -o-transition: all @duration @type;
        transition: all @duration @type;
}

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

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

/*.slider {
	@duration: 1200ms;
	@type: cubic-bezier(.59,.1,.38,.78);
	@controller_width: 44px;
	@controller_height: 44px;
	@controller_step: -@controller_width / 2;
	
	width: 100%;
	height: 100%;

	.slider-content {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		
		.slide {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 1;
			top: 0%;
			left: 0%;
			display: none;
			.cover;
			
			&.current {
				left: 0%;
				z-index: 3;
				display: block;
			}
			
			&.prev {
				left: -100%;
				z-index: 2;
				display: block;
			}
			
			&.next {
				left: 100%;
				z-index: 2;
				display: block;
			}
			
			&.current-to-prev {
				left: -100%;
				z-index: 2;
				display: block;
				-webkit-transition: all @duration @type;
		        -moz-transition: all @duration @type;
		        -o-transition: all @duration @type;
		        transition: all @duration @type;
			}
			
			&.current-to-next {
				left: 100%;
				z-index: 2;
				display: block;
				-webkit-transition: all @duration @type;
		        -moz-transition: all @duration @type;
		        -o-transition: all @duration @type;
		        transition: all @duration @type;
			}
			
			&.to-current {
				left: 0%;
				z-index: 3;
				display: block;
				-webkit-transition: all @duration @type;
		        -moz-transition: all @duration @type;
		        -o-transition: all @duration @type;
		        transition: all @duration @type;
			}
		}
	}
	
	.slider-utility {
		position: relative;
		width: 100%;
		height: 100%;
		top: 0;
		
		.slider-controller {
			position: absolute;
			width: @controller_width;
			height: @controller_height;
			cursor: pointer;
			top: 50%;
			left: auto;
			margin-left: auto;
			margin-top: -@controller_height / 2;
			z-index: 5;
			color: #ffffff;
			line-height: @controller_height;
			font-size: 12px;
			text-align: center;
			background-color: #000000;
			.border-radius(7px);
			
			&.prev {
				left: @controller_step;
				
				&:hover:not(.disabled) {
				}
			}
			
			&.next {
				right: @controller_step;
				
				&:hover:not(.disabled) {
				}
			}
			
			&.disabled {
				opacity: 0.5;
				cursor: default;
			}
			
			&:hover:not(.disabled) {
			}
		}
	}
}*/

@-webkit-keyframes webkit-rotation {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(-360deg);
    }
}

/*@-moz-keyframes moz-rotation {
    from{
        -moz-transform: rotate(0deg);
    }
    to{
        -moz-transform: rotate(360deg);
    }
}

@-o-keyframes o-rotation {
    from{
        -o-transform: rotate(0deg);
    }
    to{
        -o-transform: rotate(360deg);
    }
}

@keyframes rotation {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}*/

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

@red: #c2010e;

#page {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 920;
    min-height: 600px;
    font-family:'PTSerif-Italic';
    font-size: 14px;
    line-height: 18px;
    
   	.start {
   		.title {
   			width: 643px;
   			height: 495px;
   			margin: 0 auto;
   			background-image: url(../images/1.jpg);
   			margin-top: 30px;
   		}
   		
   		.authors {
   			width: 500px;
   			margin: 0 auto;
   			margin-top: 20px;
   			text-align: center;
   		
   			a {
   				color: @red;
   			}
   		}
   		
   		.description {
   			width: 500px;
   			margin: 0 auto;
   			margin-top: 40px;
   			text-align: center;
   			   		
   			a {
   				color: @red;
   			}
   		}
   	}
   	
   	.action {
   		position: relative;
   		width: 920px;
   		min-height: 800px;
   		margin: 0 auto;
   		margin-top: 80px;
   		
   		.translate {
   			position: absolute;
   			width: 100px;
   			left: 50%;
   			margin-left: -350px;
   			color: @red;
   			top: 230px;
   			.transition;
   			
   			&.hidden {
   				opacity: 0;
   			}
   		}
   	
   		.panel {
   			position: absolute;
   			width: 250px;
   			left: 50%;
   			margin-left: 250px;
   			
   			.what-share {
   				position: absolute;
   				width: 150px;
   				height: 80px;
   				top: 160px;
   				left: 26px;
   				background-image: url(../images/3.png);
   			}
   			
   			.what-or {
   				position: absolute;
   				width: 145px;
   				height: 47px;
   				top: 340px;
   				left: 26px;
   				background-image: url(../images/4.png);
   			}
   			
   			.social-buttons {
   				position: absolute;
   				width: 200px;
   				height: 55px;
   				top: 265px;
   			
   				.button {
   					width: 55px;
   					height: 55px;
   					background-image: url(../images/socail.png);
   					background-repeat: no-repeat;
   					cursor: pointer;
   					float: left;
   					   					
   					&:hover {
   						background-image: url(../images/social_h.png);
   					}
   				}
   			
   				.vk {
   					background-position: 0px 0px;
   					margin-right: 17px;
   				}
   				
   				.fb {
   					background-position: -72px 0px;
   					margin-right: 18px;
   				}
   				
   				.tw {
   					background-position: -144px 0px;
   				}
   			}
   			
   			.save {
   				position: absolute;
   				top: 400px;
   				width: 199px;
   				height: 94px;
   				background-image: url(../images/5.png);
   				cursor: pointer;
   				
   				&:hover {
   					background-image: url(../images/5h.png);
   				}
   			}
   			
   			.make {
   				position: absolute;
   				top: 40px;
   				width: 199px;
   				height: 94px;
   				background-image: url(../images/button.png);
   				cursor: pointer;
   			
   				.name {
   					width: 100%;
   					height: 100%;
   					background-image: url(../images/2.png);
   				}
   				
   				.loading {
   					position: relative;
   					width: 100%;
   					height: 100%;
   					display: none;
   					
   					&:after {
   						content: '';
   						position: absolute;
   						top: 50%;
   						left: 50%;
   						margin-left: -17px;
   						margin-top: -19px;
   						-webkit-animation: webkit-rotation 1s linear infinite;
   						/*-moz-animation: moz-rotation 1s linear infinite;
   						-o-animation: o-rotation 1s linear infinite;
   						animation: rotation 1s linear infinite;*/
   						background-image: url(../images/preloader.png);
   						width: 34px;
   						height: 37px;
   					}
   				}
   				
   				&.in-process {
   					cursor: default;
   				
   					.name {
  						display: none;
   					}
   					
   					.loading {
   						display: block;
   					}
   				}
   				
   				&:hover:not(.in-process) {
   					.name {
   						background-image: url(../images/2h.png);
   					}
   				}
   			}
   		}
   	
   		.paper {
   			@width: 330px;
   			@height: 550px;
   		
	    	position: absolute;
	    	height: @height;
	    	width: @width;
	    	left: 50%;
	    	margin-left: -@width / 2;
	    	
	    	.element {
	    		height: @height;
	    		width: @width;
   				left: 0px;
   				top: 0px;
	    		position: absolute;
	    		.transition;
	    		.cover;
	    	
	    		&.hidden {
	    			opacity: 0;
	    		}
	    	}
	    
	    	.border {
	    		z-index: 1;
	    	}
	    	
	    	.content {
	    		z-index: 2;
	    	}
	    	
	    	.bottom {
	    		z-index: 3;
	    	}
	    }
	    
	    .end {
	    	position: absolute;
			top: 560px;
			width: 210px;
			height: 210px;
			left: 50%;
			margin-left: -105px;
			background-image: url(../images/end.jpg);
	    }
   	}
}

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