@import 'library.less';

.box-sizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clear {
  clear: both;
}

.no-animate * {
  -webkit-transition: all 0 ease 0s !important;
  -moz-transition: all 0 ease 0s !important;
  -o-transition: all 0 ease 0s !important;
  transition: all 0 ease 0s !important;
}

.transition( @target: all, @duration: 400ms, @type: ease, @delay: 0s ) {
	-webkit-transition: @target @duration @type @delay;
	-moz-transition: @target @duration @type @delay;
	-o-transition: @target @duration @type @delay;
	transition: @target @duration @type @delay;
}

.border-radius( @value: 1000px ) {
	-webkit-border-radius: @value;
	border-radius: @value;
	-webkit-background-clip: padding-box; 
	-moz-background-clip: padding; 
	background-clip: padding-box;
}

.cover {
  background-size: cover;
  background-position: center center;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
}

* {
  padding: 0;
  margin: 0;
}

@gold: 0.62;

@width: 1240px;
@menuHeight: 56px;
@articleItemHeight: 460px;
@slidesNum: 4;
@radius: 12px;
@screenWidth: 724px;
@screenHeight: 452px;

@blue: #3042a8;
@white: #ffffff;
@bgColor: #efeff0;
@black: #000000;
@grey: #f3f3f3;
@red: #f1455d;
@beige: #fefef2;

body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  background-color: @bgColor;
  font-family: ProximaNova-Regular;
}

#wrapper {
	position: relative;
	width: 100%;
	min-width: @width;
	
	.top-spacer {
		height: @menuHeight;
	}
	
	.page-index {
		.competition-is-end {
			width: 500px;
			margin: 0 auto;
			padding: 80px 0px;
			color: @blue;
			text-align: center;
			
			h1 {
				font-family: FunCity;
				font-size: 21px;
				line-height: 25px;
				margin-bottom: 20px;
			}
			
			p {
				font-family: ProximaNova-Regular;
				font-size: 15px;
				line-height: 20px;
			}
		}
	
		.competition-result {
			.so-sweet {
				.section {
					&.first {
						text-align: center;
						color: @blue;
					
						h1 {
							font-family: FunCity;
							font-size: 21px;
							line-height: 38px;
							margin: 40px auto 20px auto;
							width: 700px;
						}
						
						.image {
							margin: 0 auto;
							margin-bottom: 30px;
							width: 270px;
							height: 230px;
							background-image: url(../images/sweet/1.jpg);
						}
						
						.first-description {
							font-family: ProximaNova-Regular;
							font-size: 15px;
							line-height: 20px;
							margin: 0 auto;
							margin-bottom: 30px;
							width: 500px;
						}
					}
					
					&.second {
						background-color: @blue;
						padding: 30px 0px;
						
						.content {
							width: 700px;
							margin: 0 auto;
							border-top: 1px dotted #ffffff;
							border-bottom: 1px dotted #ffffff;
							padding: 30px 0px;
							
							.column {
								float: left;
								
								&:first-of-type {
									width: 300px;
								}
								
								&:last-of-type {
									width: 400px;
								}
								
								.text {
									font-family: ProximaNova-Regular;
									font-size: 15px;
									line-height: 20px;
									color: #ffffff;
									margin-top: 50px;
								}
								
								.photo {
									position: relative;
									display: block;
									width: 160px;
									height: 240px;
									overflow: hidden;
									margin-left: 110px;
									
									.lens {
										position: absolute;
										top: 100%;
										background-image: url(../images/lens.png);
										background-repeat: no-repeat;
										background-position: center center;
										width: 160px;
										height: 240px;
										.transition;
									}
									
									.image {
										width: 160px;
										height: 240px;
										.cover;
									}
									
									&:hover {
										.lens {
											top: 0%;
										}
									}
								}
							}
						}
					}
					
					&.third {
						color: @blue;
						padding-bottom: 40px;
						position: relative;
					
						h2 {
							margin: 30px auto 50px auto;
							text-align: center;
							font-family: FunCity;
							font-size: 16px;
							line-height: 26px;
							width: 500px;
						}
						
						.image {
							margin: 0 auto;
							margin-bottom: 30px;
							width: 200px;
							height: 264px;
							background-image: url(../images/sweet/2.jpg);
						}
						
						.text {
							position: absolute;
							width: 240px;
							font-family: ProximaNova-Regular;
							font-size: 15px;
							line-height: 20px;
							left: 50%;
							margin-left: 130px;
							top: 220px;
						}
					}
				}
			}
		
			.about {
				text-align: center;
				color: @blue;
				width: 500px;
				margin: 0 auto;
				padding: 50px 0px;
			
				h2 {
					font-family: FunCity;
					font-size: 19px;
					line-height: 23px;
					margin-bottom: 30px;
				}
				
				p {
					font-family: ProximaNova-Regular;
					font-size: 15px;
					line-height: 20px;
				}
				
				.sep-line {
					margin: 30px auto;
					width: 400px;
					height: 1px;
					background-color: @blue;
				}
				
				a {
					color: @blue;
				}
			}
			
			.people {
				background-color: #fefed8;
				padding: 50px 0px;
				/*margin-bottom: 50px;*/
				
				.people-container {
					width: 1200px;
					margin: 0 auto;
					
					.finalists {
						padding: 30px 0px;
					
						.title {
							font-family: FunCity;
							font-size: 15px;
							line-height: 18px;
							color: @blue;
							width: 400px;
							text-align: center;
							margin: 0 auto;
							margin-bottom: 30px;
						}
						
						.finalists-list {
							position: relative;
						
							.finalist {
								float: left;
								width: 240px;
								
								&:nth-of-type(1) {
									.finalist-content {
										left: 0px;
									}
								}
								
								&:nth-of-type(2) {
									.finalist-content {
										left: -240px;
									}
								}
								
								&:nth-of-type(3) {
									.finalist-content {
										left: -480px;
									}
								}
								
								&:nth-of-type(4) {
									.finalist-content {
										left: -720px;
									}
								}
								
								&:nth-of-type(5) {
									.finalist-content {
										left: -960px;
									}
								}
						
								.finalist-image {
									width: 240;
									height: 215px;
									cursor: pointer;
									position: relative;
									.cover;
									
									.lay {
										position: absolute;
										width: 100%;
										height: 100%;
										color: #ffffff;
										font-family: FunCity;
										font-size: 16px;
										line-height: 19px;
										text-align: center;
										padding: 90px 30px 0px 30px;
										text-shadow: 0px 1px 1px #000000;
										.cover;
										/*.transition;*/
										.box-sizing;
										
										&.shown {
											background-image: url(../images/layer.png);
										}
									}
									
									&:hover {
										opacity: 0.9;
									}
								}
								
								.finalist-content {
									overflow: hidden;
									width: 1200px;
									height: 0px;
									position: relative;
									top: 0px;
									/*.transition;*/
									
									&.shown {
										height: auto;
									}
									
									.all {
										float: left;
										padding-right: 160px;
										width: 760px;
										margin-top: 30px;
										.box-sizing;
									}
									
									.materials {
										float: left;
										width: 440px;
										margin-top: 30px;
										.box-sizing;
										
										.label {
											font-size: 14px;
											color: @black;
											font-family: 'FunCity';
											margin-bottom: 20px;
											text-align: center;
										}
										
										.photos {
											padding-bottom: 20px;
											
											.photo {
												position: relative;
												display: block;
												width: 133px;
												height: 133px;
												float: left;
												margin-left: 20px;
												overflow: hidden;
												
												&:first-of-type {
													margin-left: 0px;
												}
												
												&:nth-of-type(n + 4) {
													display: none;
												}
												
												.lens {
													position: absolute;
													top: 100%;
													background-image: url(../images/lens.png);
													background-repeat: no-repeat;
													background-position: center center;
													width: 133px;
													height: 133px;
													.transition;
												}
												
												.image {
													width: 170px;
													height: 170px;
													.cover;
												}
												
												&:hover {
													.lens {
														top: 0%;
													}
												}
											}
										}
										
										.videos {
											
										}
									}
								}
							}
						}
					}
					
					.winner {
						text-align: center;
						color: @blue;
					
						.title {
							font-family: FunCity;
							font-size: 15px;
							line-height: 18px;
							margin-bottom: 20px;
						}
						
						.name {
							font-family: FunCity;
							font-size: 30px;
							line-height: 36px;
							margin-bottom: 20px;
						}
						
						.info {
							font-family: ProximaNova-Regular;
							font-size: 14px;
							line-height: 17px;
							
							a {
								color: @blue;
							}
						}
						
						.ipad {
							width: 1050px;
							height: 605px;
							background-image: url(../images/w_ipad.png);
							background-repeat: no-repeat;
							background-position: 90px 0px;
							margin: 30px auto;
							position: relative;
							
							.slider {
								@duration: 800ms;
								@type: cubic-bezier(.59,.1,.38,.78);
								@controller_width: 22px;
								@controller_height: 46px;
							
								width: 720px;
								height: 455px;
								left: 184px;
								top: 76px;
								position: absolute;
							
								.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;
										
										/*==== mixins ====*/
										
										.animated {
											.transition(@duration:@duration, @type:@type);
										}
										
										.prev {
											left: -100%;
											z-index: 2;
											display: block;
										}
										
										.current {
											left: 0%;
											z-index: 3;
											display: block;
										}
										
										.next {
											left: 100%;
											z-index: 2;
											display: block;
										}
										
										/*=========*/
										
										&.current {
											.current;
										}
										
										&.prev {
											.prev;
										}
										
										&.next {
											.next;
										}
										
										&.current-to-prev {
											.prev;
											.animated;
										}
										
										&.current-to-next {
											.next;
											.animated;
										}
										
										&.to-current {
											.current;
											.animated;
										}
									}
								}
								
								.slider-utility {
									position: relative;
									width: 100%;
									height: 100%;
									top: -100%;
								
									.slider-label {
										position: absolute;
										width: 100%;
										top: 100%;
										margin-top: 20px;
										text-align: center;
									}
									
									.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;
										background-image: url(../images/slider-arrows.png);
										
										&.prev {
											left: 20px;
											background-position: 0px 0px;
											
											&:hover:not(.disabled) {
												background-position: 0px -@controller_height;
											}
										}
										
										&.next {
											right: 20px;
											background-position: -@controller_width 0px;
											
											&:hover:not(.disabled) {
												background-position: -@controller_width -@controller_height;
											}
										}
										
										&.disabled {
											opacity: 0.5;
											cursor: default;
										}
									}
								}
								
								&.vertical {
									.slider-content {
										.slide {
											top: 0%;
											left: 0%;
										
											/*==== mixins ====*/
											.animated {
												.transition(@duration:@duration, @type:@type);
											}
											
											.prev {
												top: -100%;
												z-index: 2;
												display: block;
											}
											
											.current {
												top: 0%;
												z-index: 3;
												display: block;
											}
											
											.next {
												top: 100%;
												z-index: 2;
												display: block;
											}
											
											/*=========*/
											
											&.current {
												.current;
											}
											
											&.prev {
												.prev;
											}
											
											&.next {
												.next;
											}
											
											&.current-to-prev {
												.prev;
												.animated;
											}
											
											&.current-to-next {
												.next;
												.animated;
											}
											
											&.to-current {
												.current;
												.animated;
											}
										}
									}
									
									.slider-controller {
										left: 50%!important;
										top: auto;
										margin-top: auto;
										margin-left: -@controller_height / 2;
										width: @controller_height;
										height: @controller_width;
										background-image: url(../images/slider-arrows-vertical.png);
										
										&.prev {
											top: 20px!important;
											background-position: 0px 0px;
											
											&:hover:not(.disabled) {
												background-position: -@controller_height 0px;
											}
										}
										
										&.next {
											bottom: 20px!important;
											background-position: 0px -@controller_width;
											
											&:hover:not(.disabled) {
												background-position: -@controller_height -@controller_width;
											}
										}
									}
								}
							}
						}
						
						.winner-description {
							font-family: ProximaNova-Regular;
							font-size: 14px;
							line-height: 17px;
							width: 600px;
							margin: 0 auto;
							
							p {
								margin-bottom: 20px;
							}
						}
					}
				}
			}
		}
	
		.description {
			width: 500px;
			margin: 0 auto;
			padding: 70px 0px;
			text-align: center;
			color: @blue;
			font-size: 14px;
			
			.title {
				margin-bottom: 25px;
				font-family: FunCity;
				font-size: 24px;
			}
			
			.text {
				line-height: 18px;
				
				a {
					color: @blue;
				}
			}
		}
		
		.go-to-vote {
			&.button {
				display: inline-block;
				height: 52px;
				line-height: 52px;
				cursor: pointer;
				text-align: center;
				font-size: 13px;
				border: 1px solid @blue;
				color: @blue;
				.border-radius();
				.box-sizing;
				.transition;
				font-family: FunCity;
				padding: 0 30px;
				text-transform: uppercase;
				margin-bottom: 50px;
				font-size: 17px;
				
				&:hover {
					color: #fff;
					background: @blue;
				}
			}
		}
		
		.video-container {
			width: @width;
			position: relative;
			margin: 0 auto;
			text-align: center;
			.cover;
			
			.title {
				height: 228px;
				width: 100%;
				color: @white;
				text-align: center;
				position: absolute;
				top: 50%;
				margin-top: -114px;
				background: url(../images/name.png) no-repeat center center;
			}
			
			.faux {
				display: inline-block;
				width: 215px;
				height: 58px;
				background: url(../images/fauxpas.png);
				cursor: pointer;
				.transition();
				margin: 15px 0;
				
				&:hover {
					background: url(../images/fauxpas_hover.png);
				}
			}
			.faux-container {
				.transition(@duration: 1s);
				width: 1000px;
				margin: 0 auto;
				height: 0;
				overflow: hidden;
				text-align: left;
				
				p {
					font-size: 14px;
					line-height: 20px;
					padding-bottom: 20px;
				}
				h3 {
					font-family: FunCity;
					font-size: 24px;
					font-weight: normal;
					padding: 10px 0 10px;
				}
				
				table {
					width: 100%;
					
					td {
						vertical-align: text-top;
					}
				}
				
				&.show {
					height: 470px;
				}
			}
		}
		
		.articles-container {
			width: @width;
			margin: 0 auto;
			position: relative;
			margin-bottom: 30px;
		
			.article-item {
				position: absolute;
				display: block;
				text-decoration: none;
				color: @white;
				border-color: @white;
				border-style: solid;
				border-width: 0px;
				.box-sizing;
				overflow: hidden;
				
				.info {
					position: absolute;
					bottom: 30px;
					left: 100px;
					z-index: 2;
					
					.icon {
						width: 44px;
						height: 40px;
						background-image: url(../images/ico.png);
						position: absolute;
						margin-left: -55px;
						margin-top: 0px;
						.transition(@duration:1s);
					}
					
					.title {
						font-size: 20px;
						width: 330px;
						margin-bottom: 10px;
						font-family: FunCity;
					}
					
					.lead {
						font-size: 14px;
						width: 320px;
					}
				}
				.photo {
					position: absolute;
					top: 0px;
					height: 0px;
					width: 100%;
					height: 100%;
					z-index: 1;
					.cover;
					.transition(@duration:2s);
				}
				
				&.a1 {
					left: 0px;
					top: 0px;
					width: @width / 2;
					height: @articleItemHeight;
				}
				
				&.disabled {
					opacity: 0.5;
					-webkit-filter: grayscale(100%);
					-moz-filter: grayscale(100%);
					filter: grayscale(100%);
					
					&:after {
						content: 'Скоро';
						position: absolute;
						z-index: 2;
						font-family: FunCity;
						text-align: center;
						width: 100%;
						height: 100px;
						line-height: 100px;
						font-size: 50px;
						top: 50%;
						margin-top: -50px;
						text-shadow: 0px 1px 1px #000000;
					}
				}
				
				&:hover:not(.disabled) {
					.photo {
						-webkit-transform: scale(1.05);
						-moz-transform: scale(1.05);
						-ms-transform: scale(1.05);
						-o-transform: scale(1.05);
						transform: scale(1.05);
					}
					.icon {
						-webkit-transform: translate(0px, -5px);
						-moz-transform: translate(0px, -5px);
						-ms-transform: translate(0px, -5px);
						-o-transform: translate(0px, -5px);
						transform: translate(0px, -5px);
					}
				}
			}
			
			&.b2 {
				height: @articleItemHeight;
				
				.a2 {
					left: @width / 2;
					top: 0px;
					width: @width / 2;
					height: @articleItemHeight;
					border-left-width: 1px;
				}
				
				.a3, .a4, .a5 {
					display: none;
				}
			}
			
			&.b3 {
				height: @articleItemHeight;
				
				.a2 {
					left: @width / 2;
					top: 0px;
					width: @width / 2;
					height: @articleItemHeight / 2;
					border-left-width: 1px;
				}
				
				.a3 {
					left: @width / 2;
					top: @articleItemHeight / 2;
					width: @width / 2;
					height: @articleItemHeight / 2;
					border-left-width: 1px;
					border-top-width: 1px;
				}
				
				.a4, .a5 {
					display: none;
				}
			}
			
			&.b4 {
				height: @articleItemHeight * 2;
				
				.a2 {
					left: @width / 2;
					top: 0px;
					width: @width / 2;
					height: @articleItemHeight;
					border-left-width: 1px;
				}
				
				.a3 {
					left: 0;
					top: @articleItemHeight;
					width: @width / 2;
					height: @articleItemHeight;
					border-top-width: 1px;
				}
				
				.a4 {
					left: @width / 2;
					top: @articleItemHeight;
					width: @width / 2;
					height: @articleItemHeight;
					border-left-width: 1px;
					border-top-width: 1px;
				}
				
				.a5 {
					display: none;
				}
			}
			
			&.b5 {
				height: @articleItemHeight * 2;
			
				.a2 {
					left: @width / 2;
					top: 0px;
					width: @width / 2;
					height: @articleItemHeight / 2;
					border-left-width: 1px;
				}
				
				.a3 {
					left: @width / 2;
					top: @articleItemHeight / 2;
					width: @width / 2;
					height: @articleItemHeight / 2;
					border-left-width: 1px;
					border-top-width: 1px;
				}
				
				.a4 {
					left: 0;
					top: @articleItemHeight;
					width: @width / 2;
					height: @articleItemHeight;
					border-top-width: 1px;
				}
				
				.a5 {
					left: @width / 2;
					top: @articleItemHeight;
					width: @width / 2;
					height: @articleItemHeight;
					border-left-width: 1px;
					border-top-width: 1px;
				}
			}
		}
		
		.ipad-container {
			position: relative;
			width: @width;
			height: 750px;
			margin: 0 auto;
		
			.ipad {
				position: absolute;
				width: 932px;
				height: 605px;
				left: 50%;
				top: 50%;
				margin-left: -454px;
				margin-top: -303px;
				background-image: url(../images/ipad.png);
				
				.menu-button {
					position: absolute;
					width: 20px;
					height: 20px;
					margin-top: 550px;
					margin-left: 346px;
					cursor: pointer;
				}
				
				.home-button {
					position: absolute;
					width: 57px;
					height: 20px;
					margin-top: 550px;
					margin-left: 425px;
					cursor: pointer;
				}
				
				.back-button {
					position: absolute;
					width: 20px;
					height: 20px;
					margin-top: 550px;
					margin-left: 540px;
					cursor: pointer;
				}
				
				.ipad-screen {
					position: absolute;
					overflow: hidden;
					width: @screenWidth;
					height: @screenHeight;
					left: 91px;
					top: 76px;
					
					.question-button {
						position: absolute;
						background-image: url(../images/b3.png);
						width: 114px;
						height: 60px;
						margin-top: 305px;
						margin-left: 436px;
						z-index: 10;
						cursor: pointer;
						.cover;
						.transition;
						
						&.small {
						
							margin-top: 383px;
							margin-left: 600px;
							
							-webkit-transform: scale(0.8);
							-moz-transform: scale(0.8);
							-ms-transform: scale(0.8);
							-o-transform: scale(0.8);
							transform: scale(0.8);
						}
						&.hidden {
							margin-top: 500px;
						}
						
						&:hover {
							background-image: url(../images/b3h.png);
						}
					}
					
					.hint-frame {
						width: 100%;
						height: 100%;
						position: absolute;
						z-index: 11;
						overflow: hidden;
						background-color: #efefac;
						margin-top: 25px;
						.box-sizing;
						.transition;
						
						.close {
							position: absolute;
							cursor: pointer;
							color: red;
							width: 30px;
							height: 30px;
							line-height: 30px;
							text-align: center;
							left: 100%;
							margin-left: -40px;
							margin-top: 10px;
							font-size: 20px;
						}
						
						.title {
							color: @red;
							text-align: center;
							font-family: 'FunCity';
							font-size: 22px;
							margin: 30px 0px 20px 0px;
						}
						
						.left, .right {
							float: left;
							width: 50%;
							height: 100%;
							padding: 20px 30px;
							font-size: 14px;
							.box-sizing;
							
							a {
								color: red;
							}
						}
						
						.right {
							float: left;
						}
						
						&.hidden {
							height: 0%;
						}
					}
					
					.question-frame {
						width: 100%;
						height: 100%;
						position: absolute;
						z-index: 11;
						overflow: hidden;
						background-color: @blue;
						.box-sizing;
						.transition;
						text-align: center;
						
						.close {
							cursor: pointer;
							position: absolte;
							width: 20px;
							height: 20px;
							text-align: center;
							line-height: 20px;
							color: @white;
							margin-left: 695px;
							margin-top: 10px;
						}
						
						.label {
							position: absolute;
							width: 250px;
							height: 50px;
							line-height: 50px;
							color: @white;
							text-align: center;
							font-size: 12px;
							text-transform: uppercase;
							
							&.of-question {
								margin-top: -210px;
								line-height: 14px;
							}
						}
						
						input {
							display: inline-block;
							width: 250px;
							border: none;
							border-bottom: 1px dotted @white;
							background-color: @blue;
							height: 50px;
							line-height: 50px;
							margin-top: 0px;
							outline: none!important;
							color: @white;
						}
						
						textarea {
							display: inline-block;
							width: 500px;
							height: 161px;
							background-image: url(../images/textarea_bg_white.png);
							border: none;
							outline: none;
							line-height: 32px;
							margin-top: 120px;
							resize: none;
							overflow: hidden;
							background-color: @blue;
							color: @white;
						}
						
						.send-question {
							width: 140px;
							height: 45px;
							border: 1px solid @white;
							-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
							color: @white;
							line-height: 45px;
							text-align: center;
							font-size: 18px;
							cursor: pointer;
							margin: 0 auto;
							margin-top: 15px;
							.border-radius(@radius);
							.box-sizing;
							
							&:hover:not(.disabled) {
								background-color: @white;
								color: @blue;
							}
							
							&.disabled {
								opacity: 0.5;
								cursor: default;
							}
						}
						
						&.hidden {
							height: 0%;
						}
					}
					
					.frame {
						width: 100%;
						height: 100%;
						overflow: hidden;
						background-color: @white;
						.transition;
						
						&.end {
							overflow: hidden;
						
							.text {
								height: 50px;
								margin-top: 200px;
								text-align: center;
								width: 100%;
								color: @blue;
							}
						}
						
						&.start {
							background-image: url(../images/cover.jpg);
							
							overflow: hidden;
							
							.logo {
								display: inline-block;
								width: 253px;
								height: 45px;
								margin-left: 225px;
								margin-top: 388px;
							}
							
							&.hidden {
								height: 25px!important;
							}
						}
						
						&.add {
							width: 100% * @slidesNum;
							
							.bar {
								height: 30px;
								position: absolute;
								width: 100%;
								background-image: url(../images/poloska.jpg);
								display: none;
							}
						}
						
						&.materials {
							height: 100%;
							background-color: @blue;
							
							.dropzone {
								height: 100%;
								background-color: rgba(255, 255, 255, 0.3);
								line-height: @screenHeight;
								color: @white;
								text-align: center;
								font-size: 28px;
								display: none;
								
								&.active {
									display: block;
								}
							}
							
							.photos {
								width: 420px;
								height: @screenHeight - 90px;
								float: left;
								padding: 30px;
								padding-bottom: 0px;
								overflow: hidden;
								.box-sizing;
								
								&:before {
									content: '';
									position: absolute;
									width: 1px;
									height: 300px;
									background-color: @white;
									margin-left: 400px;
									margin-top: 0px;
								}
							
								.photo {
									width: 110px;
									height: 110px;
									margin-right: 15px;
									margin-bottom: 15px;
									position: relative;
									background-image: url(../images/addphoto.png);
									float: left;
									.cover;
									
									.delete {
										position: absolute;
										width: 20px;
										height: 20px;
										display: none;
										top: 0%;
										left: 100%;
										margin-top: 0px;
										margin-left: -20px;
										cursor: pointer;
										text-align: center;
										line-height: 20px;
										background-color: rgba(0,0,0,0.5);
										color: #ffffff;
									}
									
									&:hover {
										.delete {
											display: block;
										}
									}
									
									&.add {
										font-size: 70px;
										text-align: center;
										line-height: 102px;
										color: @blue;
										cursor: pointer;
										
										.fu {
											position: absolute;
											top: 0px;
											left: 0px;
											width: 100%;
											height: 100%;
										
											.qq-uploader {
												background: none;
												width: 100%;
												height: 100%;
												.qq-upload-list {display: none;}
											}
											.qq-upload-button {
												width: 100%;
												height: 100%;
												padding: 0px;
												background: none;
											}
											.qq-drop-processing {
												display: none;
											}
											.qq-upload-drop-area {
												display: none !important;
											}
										}
									}
									
									&:nth-of-type(3n) {
										margin-right: 0px;
									}
									
									&[data-is_file="true"] {
										color: @white;
										line-height: 110px;
										overflow: hidden;
										text-align: center;
										border: 1px solid @white;
										.border-radius(@radius);
										.box-sizing;
									}
								}
							}
							
							.videos {
								width: 300px;
								padding-top: 30px;
								.box-sizing;
								float: left;
								text-align: center;
							
								input {
									display: inline-block;
									.border-radius(@radius);
									border: 1px solid @white;
									width: 200px;
									height: 45px;
									outline: none!important;
									background-color: @blue;
									color: @white;
									margin-top: 60px;
									padding: 10px 15px;
									.box-sizing;
								}
								
								.label {
									position: absolute;
									width: 200px;
									height: 50px;
									line-height: 14px;
									color: @white;
									text-align: center;
									font-size: 12px;
									text-transform: uppercase;
									margin-top: -108px;
									margin-left: 50px;
								}
							}
							
							.save {
								width: 140px;
								height: 45px;
								border: 1px solid @white;
								-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
								color: @white;
								line-height: 45px;
								text-align: center;
								font-size: 18px;
								cursor: pointer;
								margin: 0 auto;
								.border-radius(@radius);
								.box-sizing;
								
								&:hover {
									background-color: @white;
									color: @blue;
								}
							}
						}
					
						&.hidden {
							height: 0%;
						}
					}
					
					.slider-navigation {
						width: 100%;
						height: 40px;
						position: absolute;
						top: 25px;
						.transition;
						
						.title {
							font-size: 12px;
							line-height: 40px;
							color: @blue;
							height: 100%;
							width: 150px;
							float: left;
							text-align: center;
						}
						
						.items {
							height: 100%;
							width: 574px;
							float: left;
						
							.navigation-item {
								float: left;
								width: 170px;
								height: 100%;
								cursor: pointer;
								-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
								
								&:before {
									content: '';
									position: absolute;
									width: 160px;
									height: 2px;
									margin-top: 19px;
									margin-left: 10px;
									background-color: #c9caca;
								}
							
								&.active {
									cursor: default;
								
									&:before {
										background-color: #f9b1b8;
									}
								}
								
								&.disabled {
									cursor: default;
								}
							}
						}
						
						.close {
							position: absolute;
							width: 20px;
							height: 20px;
							text-align: center;
							line-height: 20px;
							color: @blue;
							font-size: 14px;
							margin-top: 11px;
							left: 100%;
							margin-left: -37px;
							cursor: pointer;
						}
						
						&.hidden {
							top: 100%;
						}
					}
					
					.form {
						width: 500px;
						margin: 0 auto;
						
						.label {
							position: absolute;
							width: 500px;
							height: 50px;
							line-height: 50px;
							color: @blue;
							text-align: center;
							font-size: 12px;
							text-transform: uppercase;
							
							&.of-about {
								margin-top: -210px;
								line-height: 14px;
							}
							
							&.of-motivation {
								margin-top: -210px;
								line-height: 14px;
								width: 300px;
								margin-left: 190px;
							}
							
							&.of-photo {
								margin-top: -201px;
								line-height: 14px;
								width: 190px;
							}
							
							&.hidden {
								display: none;
							}
						}
						
						input {
							display: block;
							width: 100%;
							border: none;
							border-bottom: 1px dotted @blue;
							height: 50px;
							line-height: 50px;
							margin-top: 30px;
							outline: none!important;
							color: @blue;
							font-size: 12px;
						}
						
						textarea {
							display: block;
							width: 100%;
							height: 161px;
							background-image: url(../images/textarea_bg.png);
							border: none;
							outline: none;
							line-height: 32px;
							margin-top: 120px;
							resize: none;
							overflow: hidden;
							color: @blue;
							font-size: 12px;
							
							&.motivation {
								display: inline-block;
								width: 300px;
							}
						}
						
						.photo {
							display: inline-block;
							width: 190px;
							height: 160px;
							
							.button {
								width: 121px;
								height: 127px;
								background-image: url(../images/button.png);
								cursor: pointer;
								margin: 0 auto;
								margin-top: 35px;
							}
						}
					}
					
					.button-next {
						cursor: pointer;
						-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
						color: @red;
						border: 1px solid @red;
						.border-radius(@radius);
						width: 140px;
						height: 45px;
						line-height: 45px;
						text-align: center;
						margin: 0 auto;
						margin-top: 80px;
						
						&:hover:not( .disabled ) {
							background-color: @red;
							color: @white;
						}
						
						&.in-first {
							width: 376px;
							height: 126px;
							background-image: url(../images/b1.png);
							margin-top: 100px;
							margin-bottom: 160px;
							border: none;
							
							&:hover {
								background-color: transparent;
								background-image: url(../images/b1h.png);
							}
						}
						
						&.of-textarea {
							margin-top: 45px;
						}
						
						&.disabled {
							opacity: 0.5;
							cursor: default;
						}
					}
					
					.finish-button {
						cursor: pointer;
						-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
						color: @red;
						border: 1px solid @red;
						.border-radius(@radius);
						width: 140px;
						height: 45px;
						line-height: 45px;
						text-align: center;
						margin: 0 auto;
						margin-top: 40px;
						
						&:hover:not(.disabled) {
							background-color: @red;
							color: @white;
						}
						
						&.disabled {
							opacity: 0.5;
							cursor: default;
						}
					}
					
					.slide {
						float: left;
						width: 100% / @slidesNum;
						height: 100%;
						padding-top: 40px;
						.box-sizing;
						.transition;
						
						&.first {
							.title {
								font-size: 22px;
								line-height: 27px;
								color: @blue;
								text-align: center;
							}
							
							.rules {
								color: @blue;
								text-align: center;
								font-size: 12px;
								line-height: 14px;
								margin-top: -50px;
							
								a {
									color: @red;
									text-decoration: underline;
								}
							}
							
							.text {
								width: 376px;
								color: @blue;
								position: absolute;
								margin-left: 181px;
								margin-top: -25px;
								text-align: center;
							}
							
							.hint-button {
								width: 244px;
								height: 60px;
								position: absolute;
								background-image: url(../images/b2.png);
								margin-top: 240px;
								margin-left: 175px;
								cursor: pointer;
								
								&:hover {
									background-image: url(../images/b2h.png);
								}
							}
						}
						
						&.slided {
							margin-left: -25%;
						}
					}
				}
			}
		}
		
		.competition-container {
			width: 100%;
			margin: 0 auto;
			
			.title {
				font-size: 32px;
				text-align: center;
				color: @black;
				margin-bottom: 50px;
				font-family: FunCity;
			}
			
			.countdown {
				font-size: 22px;
				text-align: center;
				color: @black;
				margin-bottom: 50px;
				font-family: FunCity;
				
				span {
					color: @blue;
				}
			}
			
			.last-rules {
				font-size: 16px;
				text-align: center;
				color: @black;
				margin-bottom: 50px;
				font-family: FunCity;
				
				a {
					color: @blue;
				}
			}
			
			.about-gifts {
				display: inline-block;
				width: 213px;
				height: 52px;
				background: url(../images/buttonadd.png);
				cursor: pointer;
				.transition();
				
				&:hover {
					background: url(../images/buttonadd_hover.png);
				}
			}
			
			.menu {
				position: relative;
				top: 15px;
				width: 250px;
				height: 30px;
				margin: 0 auto;
				border: 1px solid @blue;
				position: relative;
				background: @grey;
				.box-sizing;
				.border-radius();
			
				.item {
					position: absolute;
					cursor: pointer;
					height: 100%;
					line-height: 28px;
					width: 50%;
					text-align: center;
					color: @blue;
					background-color: @grey;
					.border-radius();
					
					&[data-state="new"] {
						/*margin-left: -2px;*/
					}
					
					&[data-state="popular"] {
						left: 50%;
						margin-left: 0px;
					}
					
					&.active {
						cursor: default;
						background-color: @blue;
						color: @white;
						
						&[data-state="new"] {
							margin-left: -2px;
						}
						&[data-state="popular"] {
							margin-left: 2px;
						}
					}
				}
			}
			
			.load-button {
				cursor: pointer;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				color: @blue;
				border: 1px solid @blue;
				.border-radius(@radius);
				width: 360px;
				height: 66px;
				line-height: 66px;
				text-align: center;
				margin: 100px auto;
				font-size: 24px;
				font-family: 'FunCity';
				
				&:hover:not( .disabled ) {
					background-color: @blue;
					color: @white;
				}
			}
			
			.contestants {
				padding-bottom: 70px;
				.contestant-container {
					width: 100%;
					border-top: 1px dotted @blue;
					background-color: @bgColor;
					.transition;
					
					.contestant {
						width: 940px;
						margin: 0 auto;
						padding: 30px 0px;
						
						.header {
							position: relative;
							z-index: 1;
						
							.label {
								float: left;
								width: 230px;
								height: 80px;
								font-size: 14px;
								line-height: 16px;
								color: @blue;
								padding-left: 35px;
								.box-sizing;
								display: table;
								
								span {
									display: table-cell;
									vertical-align: middle;
								}
							}
							
							.photo {
								float: left;
								width: 80px;
								height: 80px;
								background-image: url(../images/lights2.jpg);
								.border-radius;
								.cover;
							}
							
							.name {
								float: left;
								width: 300px;
								height: 80px;
								font-size: 14px;
								line-height: 21px;
								padding: 0px 35px;
								font-family: 'FunCity';
								font-size: 21px;
								.box-sizing;
								display: table;
								
								span {
									display: table-cell;
									vertical-align: middle;
								}
							}
							
							.about {
								float: left;
								width: 350px;
								font-size: 13px;
								line-height: 15px;
								min-height: 1px;
							}
							
							.votes {
								float: left;
								width: 150px;
								text-align: center;
								font-size: 13px;
								line-height: 15px;
								margin-top: 9px;
								
								span {
									display: block;
									font-size: 39px;
									line-height:47px;
								}
							}
							
							.buttons {
								float: left;
								height: 30px;
								width: 150px;
								margin-left: 30px;
								
								.button {
									width: 150px;
									height: 40px;
									line-height: 40px;
									cursor: pointer;
									text-align: center;
									font-size: 13px;
									border: 1px solid @blue;
									.border-radius(@radius);
									.box-sizing;
									.transition;
									
									&.hide {
										color: @white;
										background-color: @blue;
										margin-top: 20px;
									}
									
									&.show {
										color: @blue;
										background-color: transparent;
										margin-top: 20px;
									}
									
									&.hidden {
										display: none;
									}
									
									&:hover {
										background: @blue;
										color: #fff;
									}
								}
							}
						}
						
						.content {
							overflow: hidden;
							height: 0px;
							.transition;
							
							.all {
								float: left;
								padding-right: 60px;
								width: 500px;
								margin-top: 30px;
								.box-sizing;
							}
							
							.materials {
								float: left;
								width: 440px;
								margin-top: 30px;
								.box-sizing;
								
								.label {
									font-size: 14px;
									color: @black;
									font-family: 'FunCity';
									margin-bottom: 20px;
									text-align: center;
								}
								
								.photos {
									padding-bottom: 20px;
									
									.photo {
										position: relative;
										display: block;
										width: 133px;
										height: 133px;
										float: left;
										margin-left: 20px;
										overflow: hidden;
										
										&:first-of-type {
											margin-left: 0px;
										}
										
										&:nth-of-type(n + 4) {
											display: none;
										}
										
										.lens {
											position: absolute;
											top: 100%;
											background-image: url(../images/lens.png);
											background-repeat: no-repeat;
											background-position: center center;
											width: 133px;
											height: 133px;
											.transition;
										}
										
										.image {
											width: 170px;
											height: 170px;
											.cover;
										}
										
										&:hover {
											.lens {
												top: 0%;
											}
										}
									}
								}
								
								.videos {
									
								}
							}
						}
					}
					
					&.full {
						background-color: @beige;
						
						.content {
							height: 500px;
						}
					}
					
					&:first-of-type {
						padding-top: 20px;
					}
					
					&.highlight {
						background: #efeabf;
					}
					
					.shares {
						width: 500px;
						padding-bottom: 20px;
						
						.yashare, .yashares {
							display: inline-block;
						}
						.yashares {
							margin-left: -3px;
						}
						.member-link {
							padding: 4px 8px 5px 8px;
							border: none;
							.border-radius;
							width: 250px;
							font-family: ProximaNova-Regular;
							font-size: 14px;
							margin-left: 20px;
							
							&:focus {
								outline: none;
							}
						}
						p {
							font-size: 10px;
							text-transform: uppercase;
							color: #777;
							margin-bottom: 4px;
						}
					}
					
					.content-footer {
						padding: 30px 0;
						
						.button {
							width: 220px;
							height: 60px;
							line-height: 60px;
							cursor: pointer;
							text-align: center;
							font-size: 17px;
							font-family: FunCity;
							text-transform: uppercase;
							border: 1px solid @blue;
							margin-left: 110px;
							.border-radius();
							.box-sizing;
							.transition;
							
							&.vote {
								color: @blue;
								background-color: transparent;
								margin-top: 20px;
							}
							&.disabled {
								opacity: 0.5;
								cursor: default;
							}
							&:hover:not(.disabled) {
								background: @blue;
								color: #fff;
							}
						}
					}
				}
			}
		}
	}
}

#top-menu {
	position: fixed;
	z-index: 20;
	width: 100%;
	height: @menuHeight;
	top: 0;
	background-color: @bgColor;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
	-webkit-transform: translateZ(0);	

	>.container {
		width: @width;
		margin: 0 auto;
		position: relative;
	}
	
	.left {
		float: left;
		height: 100%;
		width: 200px;
		padding-left: 50px;
		
		.logo {
			display: block;
			background-image: url(../images/logo1.png);
			width: 200px;
			height: 41px;
			margin-top: 9px;
		}
	}
	
	.center {
		margin-left: 340px;
		height: 100%;
		width: 570px;
		
		.logo {
			display: inline-block;
			background-image: url(../images/logo_home.png);
			background-position: -67px 11px;
			background-repeat: no-repeat;
			width: 160px;
			height: 33px;
		}
	}
	
	.right {
		float: right;
		height: 100%;
		width: 212px;
		padding-right: 50px;
		
		.logo {
			display: inline-block;
			background-image: url(../images/db.png);
			background-repeat: no-repeat;
			background-position: 0px 2px;
			width: 81px;
			height: 27px;
			margin-right: 0px;
			margin-top: 14px;
			.cover;
			
			&:after {
				content: '';
				position: absolute;
				height: 40px;
				width: 1px;
				background-color: @blue;
				margin-top: -5px;
				margin-left: 98px;
			}
		}
		
		.wos {
			display: inline-block;
			background-image: url(../images/logo_wos.png);
			width: 98px;
			height: 36px;
			margin-left: 20px;
			margin-bottom: -6px;
			
			-webkit-transform: scale(0.8);
			-moz-transform: scale(0.8);
			-ms-transform: scale(0.8);
			-o-transform: scale(0.8);
			transform: scale(0.8);
		}
	}
	
	.menu-item {
		display: inline-block;
		margin: 0px 15px;
		color: @blue;
		text-decoration: none;
		font-size: 14px;
		padding-bottom: 5px;
		.box-sizing;
		
		&:hover:not(.disabled) {
			color: @red;
		}
		&.active {
			border-bottom: 2px solid @blue;
				
			&:hover {
				color: @blue;
				cursor: default;
			}
		}
		
		&.disabled {
			cursor: default;
			opacity: 0.5;
		}
	}
}

article {
	width: 1200px;
	position: relative;
	margin: 0 auto !important;
	z-index: 1;
	padding-top: 100px;
	
	>.container {
		padding-bottom: 70px;
	}
	.body {
		position: relative;
		font-family: PTSerif-Regular !important;
		font-size: 16px !important;
	}
	h1 {
		font-size: inherit;
		line-height: inherit;
		font-weight: normal;
	}
	.object {
		position: absolute;
		z-index: 5;
		
		.share-it {
			display: none;
			position: absolute;
			width: 100%;
			bottom: 0px;
			left: 0px;
			background: rgba(255,255,255,0.7);
			z-index: 5;
			text-align: center;
			padding: 5px 0 0 0;
			
			.button {
				cursor: pointer;
				display: inline-block;
			}
			.button[data-social="vk"] {
				background: url(../images/ui/shares/vk.png);
				
				&:hover {
					background: url(../images/ui/shares/vk_hover.png);
				}
			}
			.button[data-social="fb"] {
				background: url(../images/ui/shares/fb.png);
				
				&:hover {
					background: url(../images/ui/shares/fb_hover.png);
				}
			}
			.button[data-social="tw"] {
				background: url(../images/ui/shares/tw.png);
				
				&:hover {
					background: url(../images/ui/shares/tw_hover.png);
				}
			}
		}
		
		&:hover {
			.share-it {
				display: block;
			}
		}
	}
	
	.right-column {
		position: absolute;
		float: none;
		right: 30px;
		top: 60px;
		z-index: 999;
	}
	p {
		/*margin: 0px;*/
		margin-top: 0;
		margin-bottom: 1em;
	}
	a {
		color: #0782C1;
	}
	.text-left {
		text-align: left;
	}
	.text-right {
		text-align: right;
	}
	.text-center {
		text-align: center;
	}
	.text-bold {
		font-weight: bold;
	}
	.text-italic {
		font-style: italic;
	}
	/*caption*/
	.style_1 {
		font-size: 12px;
		line-height: 15px;
		font-family: PTSansPro-Caption;
	}
	
	/*mono18*/
	.style_2 {
		font-size: 18px;
		line-height: 25px;
		font-family: MonoCondensed-Bold;
	}
	
	/*gothic22*/
	.style_3 {
		font-size: 22px;
		line-height: 24px;
		font-family: Gothic725BlkBT;
	}
	.object[data-type="image"] {
		.content {
			overflow:hidden;
			width: 100%;
			height: 100%;
			.box-sizing;
		}
		img {
			display: block;
			width: 100%;
			height: auto;
			-webkit-user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
		}
	}
	.object[data-flip-image="true"] {
		.content {
			overflow: visible;
			position: relative;
			
			-webkit-perspective: 800;
			-moz-perspective: 800;
			-ms-perspective: 800;
			-o-perspective: 800;
			perspective: 800;
			
			>img {
				position: absolute;
				z-index: 2;
				-webkit-backface-visibility:hidden;
				-moz-backface-visibility:hidden;
				-ms-backface-visibility:hidden;
				-o-backface-visibility:hidden;
				backface-visibility:hidden;
				.transition();
			}
			&:hover {
				>img {
					-webkit-transform: rotateY(180deg);
					-moz-transform: rotateY(180deg);
					-ms-transform: rotateY(180deg);
					-o-transform: rotateY(180deg);
					transform: rotateY(180deg);
					
				}
				.back-side {
					-webkit-transform: rotateY(0deg);
					-moz-transform: rotateY(0deg);
					-ms-transform: rotateY(0deg);
					-o-transform: rotateY(0deg);
					transform: rotateY(0deg);
				}
			}
		}
		.back-side {
			position: absolute;
			top: 0px;
			left: 0px;
			font-family: ProximaNova-Regular;
			font-size: 18px;
			z-index: 1;
			.box-sizing;
			.transition();
			
			-webkit-transform: rotateY(-180deg);
			-moz-transform: rotateY(-180deg);
			-ms-transform: rotateY(-180deg);
			-o-transform: rotateY(-180deg);
			transform: rotateY(-180deg);
			
			
			&.txt {
				padding: 30px;
				background: #fff;
				text-align: center;
			}
			
			.va {
				display:table;
				height: 100%;
				width: 100%;
				
				p {
					display: table-cell;
					vertical-align: middle;
				}
			}
		}
	}
	.object[data-type="showcount"]{
		z-index: 20;
	}
	.object[data-type="sharesinline"]{
		z-index: 20;
	}
	.object[data-type="embed"]{
		.content {
			height: 100%;
		}
		iframe {
			display: block;
		}
	}
	.object[data-type="end"] {
		display: none !important;
	}
	.object.slider {
		overflow: hidden;
		
		.slide {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
		}
		img {
			width: 100%;
		}
		p {
			padding: 10px 0;
			font-family: ProximaNova-Regular, Helvetica;
			font-size: 14px;
			line-height: 18px;
			color: #666666;
			
			&:empty {
				display:none;
			}
		}
	}
	.new-slider-arrow-l{
		position:absolute;
		width:30px;
		background: url('../images/arrow_left.png') no-repeat center center;
		cursor:pointer;
		z-index: 100;
		background: #ccc;
	}
	.new-slider-arrow-r{
		position:absolute;
		width:30px;
		background: url('../images/arrow_right.png') no-repeat center center;
		cursor:pointer;
		z-index: 100;
		background: #ccc;
	}
	.post-data {
		font-family: PTSansPro-Caption;
		font-size: 12px;
		color: #000;
		
		.field {
			padding-bottom: 10px;
		}
		.data a {
			display: inline-block;
			color: #03b2d9;
			text-decoration: underline;
			cursor: pointer;
		}
	}
	.item.views {
		font-family: PTSansPro-Caption;
		font-size: 12px;
		display: inline-block;
		padding-left: 22px;
		background: url(../images/ui/ico-views.png) no-repeat left center;
		padding-right: 20px;
	}
	.item.comments {
		font-family: PTSansPro-Caption;
		font-size: 12px;
		display: inline-block;
		padding-left: 22px;
		background: url(../images/ui/ico-comments.png) no-repeat left center;
	}
	.social-share.inline {
		a {
			text-decoration: none !important;
		}
		.count {
			position: static !important;
			margin-top: 1px !important;
			top: 0px !important;
			text-align: left !important;
		}
		.fb {
			margin-right: 50px;
			.count {margin-left: 90px;}
		}
		.vk {
			margin-right: 42px;
			.count {margin-left: 90px;}
		}
		.tw {
			margin-right: 40px;
			.count {margin-left: 83px;}
		}
		.sb {
			.count {margin-left: 73px;}
		}
	}
	.float-left {
		float: left;
	}
	.column.w50 {
		img {
			width: 100%;
			height: auto;
		}
	}
	.actual-size {
		width: auto !important;
		height: auto !important;
	}
	
	.button-go-to-main {
		display: inline-block;
		cursor: pointer;
		position: relative;
		top: 90px;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		color: #3042a8;
		border: 1px solid #3042a8;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding;
		background-clip: padding-box;
		height: 45px;
		text-align: center;
		margin: 0 auto;
		margin-top: 80px;
		padding: 10px 20px;
		text-decoration: none;
		
		&:hover:not( .disabled ) {
			background-color: @blue;
			color: @white;
		}
		
	}
}

.cc {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 0;
	
	div {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		
		/*-webkit-transition: background 0.5s linear;
		-moz-transition: background 0.5s linear;
		-o-transition: background 0.5s linear;
		transition: background 0.5s linear;*/
	}
	.z1 {
		z-index: 0;
	}
	.z0 {
		z-index: -1;
	}
}

.footer {
	position: relative;
	height: 70px;
	background: @blue;
	color: #fff;
	box-shadow: 0px -2px 4px rgba(0,0,0,0.14);
	/*margin-top: 70px;*/
	z-index: 10000;
	margin-top: 50px;
	
	a {
		display: block;
		height: 70px;
		line-height: 70px;
		text-align: center;
		font-size: 12px;
		text-decoration: none;
		color: inherit;
		text-align: center;
		
		&:hover {
			text-decoration: underline;
		}
	}
	.logo-white {
		display: inline-block;
		width: 200px;
		height: 41px;
		background: url(../images/logo_white.png);
		position: relative;
		top: 22px;
		left: 8px;
	}
}

.social-share {
	position: fixed;
	right: 0px;
	top: 50%;
	margin-top: -67px;
	padding: 15px 12px 12px 12px;
	.part-radius(@tl:20px, @bl: 20px);
	background-color: fadeout(@blue, 40%);
	z-index: 122;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
	
	a {
		display: block;
		width: 33px;
		height: 36px;
		background: url(../images/social.png);
		margin-bottom: 0px;
		
		&.vk {
			background-position: -3px -44px;
			&:hover {background: url(../images/social_hover.png); background-position: -3px -44px;}
		}
		&.fb {
			background-position: -4px -8px;
			&:hover {background: url(../images/social_hover.png); background-position: -4px -8px;}
		}
		&.tw {
			background-position: -4px -83px;
			&:hover {background: url(../images/social_hover.png); background-position: -4px -83px;}
		}
		&:last-of-type {
			margin-bottom: 0px;
		}
	}
}


.rating-ulogin {
	position: absolute;
	display: none;
	background: @blue;
	.border-radius(3px);
	padding: 6px 4px 4px 6px;
	z-index: 10;
	width: 160px;
	height: 35px + 18px;
	
	i {
		position: absolute;
		font-style: normal;
		bottom: -20px;
		left: 50%;
		margin-left: -10px;
		color: @blue;
		z-index: -1;
		font-size: 34px;
	}
	p {
		font-size: 12px;
		color: #fff;
		font-family: PTSansPro-Caption;
		line-height: 12px;
		text-align: center;
	}
	.container {
		padding-top: 6px;
	}
}