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

	D E F A U L T
	Default styles of browsers

=============================================== */
html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body {margin: 0;}

a {background-color: transparent;}
a:active, a:hover {outline: 0;}

b, strong {font-weight: bold;}

img {border: 0;}

table {border-collapse: collapse; border-spacing: 0;}
td, th {padding: 0;}

* {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
*:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}


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

	C O M M O N
	General styles

=============================================== */
html {font-size: 10px; position: relative; -webkit-tap-highlight-color: rgba(0,0,0,0);}
body {overflow: hidden; color: #455a64; font-size: 12px; line-height: 14px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; background: #f8f8f8; background-size: cover;}
input, button, select, textarea {font-size: inherit; line-height: inherit; font-family: inherit;}

html, body {min-height: 100%; height: auto;}

/* -------------------------------------------
	Link
------------------------------------------- */
a {color: #337ab7; text-decoration: underline;}
a:hover {color: #23527c; text-decoration: none;}
a:focus {outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;}

/* -------------------------------------------
	Images
------------------------------------------- */
img {vertical-align: middle;}

/* -------------------------------------------
	Position and clear
------------------------------------------- */
.clearfix:before, .clearfix:after,
.container:before, .container:after {content: " "; display: table;}
.clearfix:after, .container:after {clear: both;}

.pull-right {float: right !important;}
.pull-left {float: left !important;}
.affix {position: fixed;}

/* -------------------------------------------
	Show and hide block
------------------------------------------- */
.hide, .hidden {display: none !important;}
.show {display: block !important;}
.invisible {visibility: hidden;}
.text-hide {color: transparent; font: 0/0 a; text-shadow: none; border: 0; background-color: transparent;}

/* -------------------------------------------
	Transition
------------------------------------------- */
.trn, .trna a, .btn-ok {-webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}

.trn-o {-webkit-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease;}

/* -------------------------------------------
	Opacity
------------------------------------------- */
.opacity-0 {opacity: 0; filter: alpha(opacity=0);}
.opacity-1 {opacity: 1.0; filter: alpha(opacity=100);}
.opacity-5 {opacity: 0.5; filter: alpha(opacity=50);}

/* -------------------------------------------
	Border-radius
------------------------------------------- */
.rds3 {border-radius: 3px;}
.rds6 {border-radius: 6px;}
.rds10 {border-radius: 10px;}
.rds100 {border-radius: 100px;}

/* -------------------------------------------
	Box-shadow
------------------------------------------- */
.box-shadow {-webkit-box-shadow: 0 1px 2px 0px rgba(0,0,0,0.75); box-shadow: 0 1px 2px 0px rgba(0,0,0,0.75);}

/* -------------------------------------------
	User select
------------------------------------------- */
.no-select {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

/* -------------------------------------------
	List reset
------------------------------------------- */
.reset, .reset > li {list-style: none; padding: 0; margin: 0;}

/* -------------------------------------------
	Text overflow
------------------------------------------- */
.to-el {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* -------------------------------------------
	Font smoothing
------------------------------------------- */
.fsmoothing-y {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.fsmoothing-n {-webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto;}



/* -------------------------------------------
	Grid sistem
------------------------------------------- */
.container {max-width: 510px; margin-right: auto; margin-left: auto;}

/* -------------------------------------------
	Age
------------------------------------------- */
.age {width: 30px; height: 30px; color: #fff; font-size: 12px; font-weight: bold; text-align: center; top: 10px; right: 10px; position: absolute; z-index: 6; padding-top: 8px; border: 1px dashed #fff; border-radius: 15px; opacity: 0.4; filter: alpha(opacity=40);}

/* -------------------------------------------
	Button style
------------------------------------------- */
.btn {display: block;}
.btn, .btn:hover {color: #fff; text-decoration: none;}

.btn-container {height: 160px; text-align: center; position: relative; padding: 25px 0 0 0px; background: #fff; -webkit-box-shadow: 0 20px 40px rgba(0,0,0,0.05); box-shadow: 0 20px 40px rgba(0,0,0,0.05); border-radius: 20px;}

	/* -------------------------------------------
		Button
	------------------------------------------- */
	.btn-ok {height: 70px; display: inline-block; position: relative; padding: 2px; background: #7cb344; background: -moz-linear-gradient(top, #7cb344 0%, #689f38 50%, #558b2f 100%); background: -webkit-linear-gradient(top, #7cb344 0%,#689f38 50%,#558b2f 100%); background: linear-gradient(to bottom, #7cb344 0%,#689f38 50%,#558b2f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb344', endColorstr='#558b2f',GradientType=0 ); -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.1),inset 0 2px 0 rgba(255,255,255,0.25),inset 0 -2px 0 rgba(0,0,0,0.1); box-shadow: 0 2px 0 rgba(0,0,0,0.1),inset 0 2px 0 rgba(255,255,255,0.25),inset 0 -2px 0 rgba(0,0,0,0.1); border-radius: 35px;}

	.btn-ok:hover {-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.1),inset 0 2px 0 rgba(255,255,255,0.35),inset 0 -2px 0 rgba(0,0,0,0.15); box-shadow: 0 1px 0 rgba(0,0,0,0.1),inset 0 2px 0 rgba(255,255,255,0.35),inset 0 -2px 0 rgba(0,0,0,0.15);}

	.btn-ok:before,
	.btn-ok:after {content: ""; top: 5px; bottom: 5px; left: 5px; right: 5px; position: absolute; border: 1px solid rgba(255,255,255,0.12); border-radius: 30px;}
	.btn-ok:after {top: 6px; bottom: 4px; border-color: rgba(0,0,0,0.12);}

	.btn-ok-link {height: 66px; position: relative; z-index: 1; padding: 22px 26px 0 27px; border-radius: 33px;}

	.btn-ok-txt, .btn-ok-icon {display: inline-block; vertical-align: top;}

	.btn-ok-txt {font-size: 22px; text-transform: uppercase; text-shadow: 0 1px 1px rgba(0,0,0,0.2); padding: 5px 16px 0 0;}

	.btn-ok-icon {}
		.btn-ok-icon img {max-width: 25px;}

	/* -------------------------------------------
		btn-cancel
	------------------------------------------- */
	.btn-cancel {
		width: 70px;
		font-size: 12px;
		text-align: center;
		bottom: -38px;
		left: 50%;
		position: absolute;
		z-index: 2;
		padding: 5px 0 4px;
		margin-left: -35px;
		background: #888;
		border-radius: 4px;
	}

/* -------------------------------------------
	Speedometer
------------------------------------------- */
.speedometer {width: 184px; height: 185px; top: -10px; left: 28px; position: absolute;}

.speedometer-arrow {width: 8px; height: 60px; top: 29px; left: 87px; position: absolute;
	-webkit-animation-name: speedometer-animation;
	animation-name: speedometer-animation;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;

	transform: rotate(80deg);
	transform-origin: bottom;
}

@-webkit-keyframes speedometer-animation {
	0% {
		transform: rotate(-100deg);
	}
	50% {
		transform: rotate(40deg);
	}
	100% {
		transform: rotate(80deg);
	}
}

@keyframes speedometer-animation {
	0% {
		transform: rotate(-100deg);
	}
	50% {
		transform: rotate(40deg);
	}
	100% {
		transform: rotate(80deg);
	}
}

/* -------------------------------------------
	Images display: block;
------------------------------------------- */
.btn-ok-icon img, .logo img, .speedometer-bg,
.category-list img, .category-more img {width: 100%; height: auto; display: block;}

/* -------------------------------------------
	Head
------------------------------------------- */
.head {height: 110px; background: url("head-pattern.png") repeat-x 0 0;}

	/* -------------------------------------------
		logo
	------------------------------------------- */
	.logo {max-width: 329px; position: relative; padding-top: 27px; margin: 0 auto;}
		.logo-text {max-width: 179px; position: relative; z-index: 1; margin: 0 auto;}
		.logo-bg {top: 0; position: absolute;}

/* -------------------------------------------
	Content
------------------------------------------- */
.content {}

	/* -------------------------------------------
		Title
	------------------------------------------- */
	.title {font-size: 20px; font-weight: bold; font-style: italic; text-align: center; padding: 31px 0 30px;}

	/* -------------------------------------------
		Max speed
	------------------------------------------- */
	.max-speed {color: #78909c; font-size: 12px; font-style: italic; text-align: center; padding: 15px 0;}

	/* -------------------------------------------
		Category list
	------------------------------------------- */
	.category-list {margin: -10px 0 0 -10px;}
		.category-list li {max-width: 250px; float: left; margin: 10px 0 0 10px;}

	.category-more {max-width: 510px; margin-top: 10px;}

/* -------------------------------------------
	Footer
------------------------------------------- */
.footer {bottom: 0; left: 0; right: 0; position: fixed; z-index: 5; padding: 5px; background: #e8e8e8;}

.footer *, .rules-top, .rules-top * {
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
}

/* -------------------------------------------
	Rusel bottom
------------------------------------------- */
.rules, .rules-container {
	font-size: 10px;
	line-height: 10px;
	text-align: center;
}

.rules, .rules a, 
.rules-container, .rules-container a {
	color: #8f8f8f;
}

.rules-bottom {
	display: none;
}

.rules-top {
	padding: 5px;
	background: #135cb0;
}

.rules-top, .rules-top a {
	color: #a6bcd6;
}

/* -------------------------------------------
	Responsive max-width: 768px;
------------------------------------------- */
@media (max-width: 768px) {

	.rules, .rules-container {
		font-size: 9px;
		line-height: 9px;
	}

}

/* -------------------------------------------
	Responsive max-width: 309px;
------------------------------------------- */
@media (max-width: 309px) {

	.rules-bottom {
		display: block;
	}

	.rules-top {
		display: none;
	}

}


/* -------------------------------------------
	Responsive max-width: 510px;
------------------------------------------- */
@media (max-width: 510px) {

	/* -------------------------------------------
		Grid sistem
	------------------------------------------- */
	.container {max-width: 420px;}

	/* -------------------------------------------
		Button style
	------------------------------------------- */
	.btn-container {height: 120px; padding: 6px 0 0 170px;}

	/* -------------------------------------------
		Speedometer
	------------------------------------------- */
	.speedometer {width: 144px; height: 145px; top: -10px; left: 28px;}

	.speedometer-arrow {top: 11px; left: 66px;}

	/* -------------------------------------------
		Category list
	------------------------------------------- */
	.category-list li {max-width: 205px;}

}

/* -------------------------------------------
	Responsive max-width: 420px;
------------------------------------------- */
@media (max-width: 420px) {

	/* -------------------------------------------
		Grid sistem
	------------------------------------------- */
	.container {max-width: 320px;}

	/* -------------------------------------------
		Age
	------------------------------------------- */
	.age {top: 0; right: 0;}

	/* -------------------------------------------
		Button style
	------------------------------------------- */
	.btn-container {height: 210px; padding: 0; background: transparent; -webkit-box-shadow: none; box-shadow: none; border-radius: 0;}

		/* -------------------------------------------
			Button
		------------------------------------------- */
		.btn-ok {/*top: 140px;*/ z-index: 2;}

	/* -------------------------------------------
		Speedometer
	------------------------------------------- */
	.speedometer {width: 184px; height: 185px; top: 0px; left: 50%; margin-left: -92px;}

	.speedometer-arrow {top: 29px; left: 87px;}

	/* -------------------------------------------
		Title
	------------------------------------------- */
	.title {padding: 1px 0 20px;}

	/* -------------------------------------------
		Max speed
	------------------------------------------- */
	.max-speed {padding-top: 47px;}

	/* -------------------------------------------
		Category list
	------------------------------------------- */
	.category-list li {max-width: 155px;}

}

/* -------------------------------------------
	Responsive max-width: 320px;
------------------------------------------- */
@media (max-width: 320px) {

	/* -------------------------------------------
		Category list
	------------------------------------------- */
	.category-list {padding: 0 10px; margin-left: -3.3%;}
		.category-list li {max-width: 46.7%; margin-left: 3.3%;}

	.category-more {padding: 0 10px;}

}

/* -------------------------------------------
	Responsive max-width: 300px;
------------------------------------------- */
@media (max-width: 300px) {

	/* -------------------------------------------
		Head
	------------------------------------------- */
	.head {min-height: 73px; height: auto;}

		/* -------------------------------------------
			logo
		------------------------------------------- */
		.logo {padding-top: 20px;}

	/* -------------------------------------------
		Title
	------------------------------------------- */
	.title {padding: 41px 0 20px;}

}

/* -------------------------------------------
	Responsive max-width: 280px;
------------------------------------------- */
@media (max-width: 280px) {

	/* -------------------------------------------
		logo
	------------------------------------------- */
	.logo {padding-top: 24px;}
		.logo-text {max-width: 140px;}

	/* -------------------------------------------
		Title
	------------------------------------------- */
	.title {padding: 31px 0 20px;}

}

/* -------------------------------------------
	Responsive max-width: 260px;
------------------------------------------- */
@media (max-width: 260px) {

	/* -------------------------------------------
		logo
	------------------------------------------- */
	.logo {padding-top: 20px;}

	/* -------------------------------------------
		Title
	------------------------------------------- */
	.title {padding: 21px 0 20px;}

}




/* -------------------------------------------
	Responsive WEB for max-height 
------------------------------------------- */
@media 
(min-width: 511px) and (max-height: 400px),
(min-width: 460px) and (max-width: 510px) and (max-height: 370px) {

	/* -------------------------------------------
		Title
	------------------------------------------- */
	.title {padding: 1px 0 30px;}

}

@media 
(min-width: 511px) and (max-height: 370px),
(min-width: 460px) and (max-width: 510px) and (max-height: 340px) {

	/* -------------------------------------------
		Title
	------------------------------------------- */
	.title {display: none;}

}

@media 
(min-width: 511px) and (max-height: 330px),
(min-width: 460px) and (max-width: 510px) and (max-height: 300px) {

	/* -------------------------------------------
		Button style
	------------------------------------------- */
	.btn-container {height: auto; padding: 0; background: transparent; -webkit-box-shadow: none; box-shadow: none; border-radius: 0;}

	/* -------------------------------------------
		Speedometer
	------------------------------------------- */
	.speedometer {display: none;}

	/* -------------------------------------------
		Max speed
	------------------------------------------- */
	.max-speed {padding-top: 47px;}

}

@media 
(min-width: 511px) and (max-height: 280px),
(min-width: 460px) and (max-width: 510px) and (max-height: 280px) {

	/* -------------------------------------------
		Hide
	------------------------------------------- */
	.category-more,
	.category-list,
	.max-speed {display: none;}

}

@media 
(min-width: 511px) and (max-height: 280px),
(min-width: 460px) and (max-width: 510px) and (max-height: 280px),
(min-width: 421px) and (max-width: 459px) and (max-height: 290px),
(min-width: 310px) and (max-width: 420px) and (max-height: 420px),
(max-width: 309px) and (max-height: 776px) {

	/* -------------------------------------------
		Head
	------------------------------------------- */
	.head {height: 90px;}

		/* -------------------------------------------
			logo
		------------------------------------------- */
		.logo {max-width: 279px;}
			.logo-text {max-width: 180px;}

}

@media 
(min-width: 511px) and (max-height: 220px),
(min-width: 460px) and (max-width: 510px) and (max-height: 240px),
(min-width: 421px) and (max-width: 459px) and (max-height: 260px),
(min-width: 310px) and (max-width: 420px) and (max-height: 400px),
(max-width: 309px) and (max-height: 688px) {

	/* -------------------------------------------
		Head
	------------------------------------------- */
	.head {height: 90px;}

		/* -------------------------------------------
			logo
		------------------------------------------- */
		.logo {max-width: 249px; padding-top: 20px;}

}

@media 
(min-width: 460px) and (max-width: 510px) and (max-height: 220px),
(min-width: 421px) and (max-width: 459px) and (max-height: 240px),
(min-width: 310px) and (max-width: 420px) and (max-height: 380px) {

	/* -------------------------------------------
		Head
	------------------------------------------- */
	.head {height: 80px;}

		/* -------------------------------------------
			logo
		------------------------------------------- */
		.logo {max-width: 239px; padding-top: 15px;}

}





/* -------------------------------------------
	Responsive MOB for max-height 
------------------------------------------- */
@media 
(min-width: 421px) and (max-width: 459px) and (max-height: 458px) {

	/* -------------------------------------------
		Max speed
	------------------------------------------- */
	.max-speed {padding: 18px 0 8px;}

	/* -------------------------------------------
		Category list
	------------------------------------------- */
	.category-list,
	.category-more {display: none;}

}

@media 
(min-width: 421px) and (max-width: 459px) and (max-height: 430px) {

	/* -------------------------------------------
		Title
	------------------------------------------- */
	.title {padding: 1px 0 30px;}

}

@media 
(min-width: 421px) and (max-width: 459px) and (max-height: 400px) {

	/* -------------------------------------------
		Content
	------------------------------------------- */
	.content {padding-bottom: 20px;}

		/* -------------------------------------------
			Max speed
		------------------------------------------- */
		.max-speed {display: none;}

}

@media 
(min-width: 421px) and (max-width: 459px) and (max-height: 380px) {

	/* -------------------------------------------
		Title
	------------------------------------------- */
	.title {display: none;}

}

@media 
(min-width: 421px) and (max-width: 459px) and (max-height: 330px) {

	/* -------------------------------------------
		Button style
	------------------------------------------- */
	.btn-container {height: auto; padding: 0; background: transparent; -webkit-box-shadow: none; box-shadow: none; border-radius: 0;}

	/* -------------------------------------------
		Speedometer
	------------------------------------------- */
	.speedometer {display: none;}

}

@media 
(min-width: 421px) and (max-width: 459px) and (max-height: 290px) {

	/* -------------------------------------------
		Content
	------------------------------------------- */
	.content {padding-bottom: 10px;}

}

@media 
(min-width: 421px) and (max-width: 459px) and (max-height: 240px) {

	/* -------------------------------------------
		Content
	------------------------------------------- */
	.content {padding-bottom: 0;}

}





/* -------------------------------------------
	Responsive small MOB for max-height 
------------------------------------------- */
@media 
(min-width: 310px) and (max-width: 420px) and (max-height: 450px) {

	/* -------------------------------------------
		Title
	------------------------------------------- */
	.title {display: none;}

}

@media 
(min-width: 310px) and (max-width: 420px) and (max-height: 370px),
(min-width: 310px) and (max-width: 400px) and (max-height: 400px) {

	/* -------------------------------------------
		Button style
	------------------------------------------- */
	.btn-container {height: auto;}

		/* -------------------------------------------
			Button
		------------------------------------------- */
		.btn-ok {top: 10px;}

	/* -------------------------------------------
		Speedometer
	------------------------------------------- */
	.speedometer {display: none;}

	/* -------------------------------------------
		max-speed
	------------------------------------------- */
	.max-speed {
		padding-top: 57px;
	}

}

@media 
(min-width: 321px) and (max-width: 420px) and (max-height: 320px),
(min-width: 310px) and (max-width: 320px) and (max-height: 319px) {

	/* -------------------------------------------
		Button style
	------------------------------------------- */
	.btn-container {padding: 10px 0 20px;}

		/* -------------------------------------------
			Button
		------------------------------------------- */
		.btn-ok {top: 0;}

	/* -------------------------------------------
		Max speed
	------------------------------------------- */
	.max-speed {display: none;}

	.category-list {
		margin-top: 18px;
	}

}



@media 
(max-width: 309px) and (max-height: 776px) {

	/* -------------------------------------------
		Title
	------------------------------------------- */
	.title {display: none;}

}

@media 
(max-width: 309px) and (max-height: 738px) {

	/* -------------------------------------------
		Button style
	------------------------------------------- */
	.btn-container {margin-bottom: 48px;}

	/* -------------------------------------------
		Max speed
	------------------------------------------- */
	.max-speed {display: none;}

}

@media 
(max-width: 309px) and (max-height: 668px) {

	/* -------------------------------------------
		Category list
	------------------------------------------- */
	.category-more {display: none;}

}

@media 
(max-width: 309px) and (max-height: 582px) {

	/* -------------------------------------------
		Category list
	------------------------------------------- */
	.category-list li:nth-child(3),
	.category-list li:nth-child(4) {display: none;}

}

@media 
(max-width: 309px) and (max-height: 496px) {

	/* -------------------------------------------
		Category list
	------------------------------------------- */
	.category-list {display: none;}

}

@media 
(max-width: 309px) and (max-height: 400px) {

	/* -------------------------------------------
		Button style
	------------------------------------------- */
	.btn-container {height: 190px;}

		/* -------------------------------------------
			Button
		------------------------------------------- */
		.btn-ok {top: 110px;}

}

@media 
(min-width: 511px) and (max-height: 260px),
(min-width: 460px) and (max-width: 510px) and (max-height: 260px) {

	body {overflow: auto;}

	/* -------------------------------------------
		Footer
	------------------------------------------- */
	.footer {position: relative; margin-top: 50px;}

}





@media (max-width: 309px),
(max-width: 459px) and (orientation: landscape) {

	body {overflow: auto;}

	/* -------------------------------------------
		Footer
	------------------------------------------- */
	.footer {position: relative; margin-top: 10px;}

}