/* `XHTML, HTML4, HTML5 Reset
----------------------------------------------------------------------------------------------------*/

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
mark,
menu,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
xmp {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

html,
body {
  height: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
/*
  Override the default (display: inline) for
  browsers that do not recognize HTML5 tags.

  IE8 (and lower) requires a shiv:
  http://ejohn.org/blog/html5-shiv
*/
  display: block;
}

b,
strong {
/*
  Makes browsers agree.
  IE + Opera = font-weight: bold.
  Gecko + WebKit = font-weight: bolder.
*/
  font-weight: bold;
}

img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
/*
  For IE.
  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
*/
  -ms-interpolation-mode: bicubic;
}

ol,
ul {
  list-style: none;
}

li {
/*
  For IE6 + IE7:

  "display: list-item" keeps bullets from
  disappearing if hasLayout is triggered.
*/
  display: list-item;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td,
caption {
  font-weight: normal;
  vertical-align: top;
  text-align: left;
}

q {
  quotes: none;
}

q:before,
q:after {
  content: "";
  content: none;
}

sub,
sup,
small {
  font-size: 75%;
}

sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg {
/*
  For IE9. Without, occasionally draws shapes
  outside the boundaries of <svg> rectangle.
*/
  overflow: hidden;
}

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

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


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

@fontRegular:ProximaNova-Regular;
@fontThin:ProximaNovaT-Thin;
@fontExtrabold:ProximaNova-Extrabld;
@textColor:rgb(44,57,212);


div#page {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 800px;
  background-size: cover;

  .cont {
	position: relative;
	width: auto;
	width: 1000px;
	margin: 0 auto;
	height: auto;
  }
}

.line {
	width: 750px;
	height: 3px;
	background-color: @textColor;
	margin: 0 auto;
	margin-bottom: 12px;
}

.test-start-page {
	min-height: 100%;
	padding-top: 60px;
	padding-bottom: 40px;
    background-color:#f3f2f0;
    background-size: cover;
    
    header {
        .head-img {
            width: 970px;
            height: 537px;
            margin-top: 50px;
            background: url(../images/start.png);
            margin: 0 auto;
        }
        .article-info {
            width: 900px;
            margin-left: 100px;
            margin-top: 50px;
            .left {
                font:13px/26px PTSerif-Regular;
                color: #6100f0;
                width: 600px;
                height: auto;
                padding-right: 33px;
                border-right: solid 1px #6100f0;
                padding-top: 30px;
                float: left;
            }
            .right {
                width: 232px;
                padding-left: 33px;
                float: left;
                .ico {
                    width: 100px;
                    height: 100px;
                    background: url(../images/iconHand.png);
                    margin-top: 50px;
                    margin-bottom: 20px;
                }
                p {
                    font-family: @fontExtrabold;
                    font-size: 19px;
                    line-height: 26px;
                    color: #6100f0;
                }
            }
        }
    }
	

}

.test-action-page {
    background-color:#f3f2f0;
    
    padding-top: 60px;
    .box-sizing;
    height: auto;
    min-height: 700px;
	.question-wr {
		width: 600px;
		height: auto;
		display: table;
		margin: 0 auto;
		padding-bottom: 100px;
	
	.crt {
        font-family: @fontThin;
        font-size: 14px;
        color: #000;
        text-align: center;
        margin-bottom: 40px;

	}
		.q-img-wr {
			width: 150px;
            height: 150px;
			display: block;
			vertical-align: middle;
            display: block;
            margin: 0 auto;
            margin-bottom: 55px;

			.q-img {
				width: 150px;
				height: 150px;
				display: inline-block;
			}
		}

		.q-right-cell {
			display: block;
			width: 500px;
			height: auto;
			color: #000;
			font-family: @fontThin;
	        font-size:18px;
	        line-height: 30px; 
	        margin-left: 100px;

			.q-title {
				text-align: left;
				margin-bottom: 45px;
			}
			.q-answers-wr {
				.answ-btn {
		  width: 207px;
		  float: left;
		  font-family: @fontExtrabold;
		  font-size: 30px;
		  line-height: 36px;
		  color: #ff0000;
		  text-decoration: underline;
		  cursor: pointer;
		  text-transform: uppercase;
		  &:hover {
			text-decoration:none;
		  }
		}
			}
			.next-btn {
				width: 360px;
				cursor: pointer;
				position: relative;
		font-family: @fontExtrabold;
		font-size: 30px;
		line-height: 36px;
		color: #ff0000;
		text-decoration: underline;
		cursor: pointer;
		text-transform: uppercase;
		&:hover {
		  text-decoration:none;
		}

			}
		}
	.true-text {
	  width: 600px;
	  font-family: @fontRegular;
	  font-size: 16px;
	  line-height: 28px;
	  color: #000;
	  margin-top: 55px;
	  b {
		font-family: ProximaNova-Extrabld;
		font-weight: normal;
	  }
	}
	}
}

.test-finish-page {
  padding-top: 60px;
	.result-title {
	font-family: @fontThin;
	font-size: 12px;
	line-height: 36px;
	margin-bottom: 20px;
	text-align: center;
	color: #000;
	text-transform: uppercase;
  }
  .result-img {
		width: 600px;
		height: 359px;
		margin: 0 auto;
		margin-bottom: 40px;
	font-family: @fontExtrabold;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	}
  .r-title {
	font-family: @fontExtrabold;
	font-size: 30px;
	line-height: 36px;
	color: #ff0000;
	text-align: center;
	width: 600px;
	margin: 0 auto;
	margin-bottom: 40px;
	text-transform: uppercase;

  }
	.result-text {
		font-family: @fontRegular;
		font-size: 16px;
		line-height: 28px;
		color: #000;
		text-align: left;
		width: 600px;
		margin: 0 auto;
		margin-bottom: 40px;
	}
	.social {
		margin: 0 auto;
		margin-bottom: 40px;
	}
	.repeat-btn {
		width: 200px;
		height: auto;
		cursor: pointer;
		margin: 0 auto;
	text-align: center;
	color: #f00;
	font-family: @fontExtrabold;
	text-transform: uppercase;
	text-decoration: underline;
		
		&:hover {
			text-decoration:none;
		}

	}
}




/* SOCIAL BUTTON STYLE */

.social {

  width: 300px;
  height: 35px;
  margin: 0 auto;
  margin-top: 40px;
}
.social span {
  width: 140px;
  height: 35px;
  float: left;
}
.social span.vk {
  background: url(../images/socialButtons.png) -150px 0 ;
  &:hover {
	background-position: -150px -40px;
  }
}

.social span.tw {
  float: right;
  background: url(../images/socialButtons.png) -300px 0;
  &:hover {
	background-position: -300px -40px;  
  }
}

.social-btn {
  cursor: pointer;
}

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


@red: #c1000f;
@green: #00b739;
@blue: #0620f4;

.visual-data {
  width: 800px;
  margin: 0 auto;
  position: relative;
  /*display: none;*/

  .place-container {
	
	.place {
	  position: relative;
	  height: 150px;
	
	  .bar {
		@height: 50px;
	  
		position: relative;
		height: @height;
		background-color: @blue;
		overflow: hidden;
	  
		.runner {
		  width: 0px;
		  height: 100%;
		  position: relative;
		  background-color: #000000;
		  .transition;
		
		  .you {
			position: absolute;
			height: @height;
			top: 0;
			line-height: @height;
			left: 100%;
			width: 100px;
			margin-left: 0px;
			color: @blue;
			font-size: 24px;
		  }
		}
		
		.worse-percent {
		  position: absolute;
		  line-height: @height;
		  height: @height;
		  width: 100px;
		  top: 0px;
		  left: 0px;
		  color: #ffffff;
		  font-size: 34px;
		  padding-left: 20px;
		}
		
		.better-percent {
		  position: absolute;
		  line-height: @height;
		  height: @height;
		  width: 100px;
		  top: 0px;
		  left: 100%;
		  margin-left: -100px;
		  color: #ffffff;
		  font-size: 34px;
		}
	  }
	  
	  .worse-count {
		position: absolute;
		width: 200px;
		top: 70px;
		left: 0px;
		text-align: left;
		font-family: ProximaNova-Extrabld;
		font-size: 16px;
		line-height: 20px;
	  }
	  
	  .better-count {
		position: absolute;
		width: 200px;
		top: 70px;
		left: 100%;
		margin-left: -200px;
		text-align: right;
		font-family: ProximaNova-Extrabld;
		font-size: 16px;
		line-height: 20px;
	  }
	}
  }
  
  .distribution-container {
	position: relative;
	
	.text-two {
	  font-size: 28px;
	  line-height: 30px;
	  margin-bottom: 15px;
	  text-align: left;
	  font-family: @fontRegular;
	}
  
	.distribution {
	  @height: 250px;
	
	  width: 100%;
	  padding-bottom: 30px;
	  position: relative;
	  height: @height + 50px;
	  
	  .field {
		height: @height;
		position: relative;
		background-color: #ffffff;
	  }
	  
	  .bars {
		position: relative;
		text-align: center;
		height: @height;
		top: -@height;
		cursor: pointer;
	  
		.bar {
		  position: relative;
		  background-color: #000000;
		  display: inline-block;
		  margin-right: 15px;
		  opacity: 0.8;
		  
		  &:last-of-type {
			margin-right: 0px;
		  }
		  
		  .value {
			width: 100%;
			position: absolute;
			height: 22px;
			top: -22px;
			font-size: 18px;
			text-align: center;
		  }
		  
		  .number {
			font-size: 18px;
			position: absolute;
			width: 100%;
			height: 22px;
			top: 100%;
			text-align: center;
		  }
		  
		  .hint {
			overflow: hidden;
			padding: 0px;
			background-color: #050505;
			color: #fff;
			font-family: @fontRegular;
			font-size: 14px;
			line-height: 20px;
			width: 130px;
			position: absolute;
			top: 0px;
			left: 0px;
			padding: 10px;
			display: none;
			z-index: 100;
		  }
		  
		  &:hover {
			opacity: 1;
		  
			.hint {
			  display: block;
			}
		  }
		}
	  }
	}
  }
}