@font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-light-webfont.woff2') format('woff2'),
	 url('../fonts/roboto-light-webfont.woff') format('woff');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
	 url('../fonts/roboto-regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-medium-webfont.woff2') format('woff2'),
	 url('../fonts/roboto-medium-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'Roboto Slab';
src: url('../fonts/subset-RobotoSlab-Black.woff2') format('woff2'),
	url('../fonts/subset-RobotoSlab-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}


body, html {
height: 100%;
min-height: 100%;
min-width: 320px;
}

body {
padding: 0px;
margin: 0px;
color: #464646;
line-height: 1.5;
font-size: 18px;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
background: url(../img/bg.png) repeat top center #fffcf4;
font-weight: 400;
}

img {
border-style: none;
}

* {
box-sizing: border-box;
}

*:hover,
*:focus,
*:active {
outline: none;
}

a {
text-decoration: underline;
color: inherit;
}

a:hover {
text-decoration: none;
}

b {
font-weight: 500;
}

p {
margin: 0 0 1.8em;
}

p:last-child {
margin-bottom: 0;
}

input::-ms-clear {
display: none;
}

.center {
text-align: center;
}

.main_frame {
width: 100%;
min-height: 100vh;
overflow: hidden;
position: relative;
}

.main_width {
max-width: 1520px;
width: 90%;
margin: 0 auto;
position: relative;
}

.nowrap {
white-space: nowrap;
}

.header {
position: absolute;
top: 5.5vh;
left: 0;
right: 0;
height: 0px;
z-index: 300;
}

.header .logo {
display: block;
width: 150px;
}

.header .logo img {
display: block;
width: 100%;
}

.start_slide {
height: 100vh;
min-height: 650px;
position: relative;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
}

.start_img {
position: absolute;
left: 50%;
margin-left: -150px;
right: 0;
top: 50%;
transform: translateY(-50%);
}

.start_img img {
display: block;
max-width: 100%;
}

.start_slide .main_width {
flex: 0 1 auto;
}

.start_text {
margin-right: 50%;
padding-right: 130px;
}

.h1 {
font-weight: 900;
font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;
font-size: 72px;
line-height: 1;
color: #E60000;
text-shadow: 0px 15px 30px rgba(221, 191, 115, 0.15);
margin: 0 0 30px;
}

.start_text p {
margin: 0 0 30px;
max-width: 500px;
}

.btn {
display: inline-block;
vertical-align: top;
font-size: 20px;
color: #fff;
text-decoration: none;
padding: 24px 30px;
line-height: 22px;
text-align: center;
white-space: nowrap;
min-width: 190px;
border: 0 none;
margin: 0;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
font-weight: 500;
background: #E60000;
}

.btn span {
display: inline-block;
position: relative;
}

.anim_btn {
position: relative;
overflow: hidden;
}

.anim_btn:before {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
opacity: 0;
background-image: -webkit-linear-gradient( transparent 50%, rgba(197,15,15,1) 50%);
background-image: -moz-linear-gradient(transparent 50%, rgba(197,15,15,1) 50%);
background-size: 10px 10px;
-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}

.anim_btn:hover:before,
.anim_btn.hover:before {
height: 360%;
opacity: 1;
}

.top_deco {
position: absolute;
top: 0;
right: 0;
width: 360px;
height: 197px;
background: url(../img/top_deco.png) no-repeat 0 0 transparent;
}

.deco {
position: absolute;
z-index: -1;
opacity: 0;
transition: all 0.3s ease 0s;
}

.in_game .deco {
z-index: auto;
opacity: 1;
}

.floor {
left: 0;
right: 0;
height: 118px;
background: url(../img/floor.svg) no-repeat bottom center transparent;
background-size: 100% 100%;
bottom: -120px;
}

.in_game .floor {
bottom: 0;
}

.deco1 {
width: 277px;
height: 240px;
background: url(../img/deco1.png) no-repeat 0 0 transparent;
left: 0;
bottom: 600px;
margin-left: -30px;
}

.in_game .deco1 {
margin-left: 0;
}

.deco2 {
width: 393px;
height: 446px;
background: url(../img/deco2.png) no-repeat 0 0 transparent;
left: -20px;
bottom: 40px;
margin-left: -30px;
margin-bottom: -30px;
}

.in_game .deco2 {
margin-left: 0;
margin-bottom: 0;
}

.deco3 {
width: 248px;
height: 253px;
background: url(../img/deco3.png) no-repeat 0 0 transparent;
right: 250px;
bottom: 500px;
margin-right: -30px;
margin-bottom: 15px;
}

.in_game .deco3 {
margin-right: 0;
margin-bottom: 0;
}

.deco4 {
width: 315px;
height: 632px;
background: url(../img/deco4.png) no-repeat 0 0 transparent;
right: 80px;
bottom: 0;
margin-right: -30px;
margin-bottom: -30px;
}

.in_game .deco4 {
margin-right: 0;
margin-bottom: 0;
}

.game_slide {
padding: 210px 0 50px;
position: relative;
}

.game_nav {
position: absolute;
top: -200px;
left: 50%;
width: 466px;
height: 78px;
background: url(../img/flag_route.png) no-repeat 0 0 transparent;
margin-left: -233px;
transition: top 0.3s linear;
transform-origin: top center;
}

.game_nav.visible {
top: 0;
}

.game_nav .flag {
position: absolute;
transform-origin: top center;
width: 66px;
height: 80px;
}

.game_nav .flag:before,
.game_nav .flag:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url(../img/flags.png) no-repeat 0 0 transparent;
transform-origin: top center;
transform: scale(0.64);
}

.game_nav .flag1 {
top: 23px;
left: 28px;
transform: rotate(28deg);
}

.game_nav .flag1:after {
background-position: 0 -83px;
}

.game_nav .flag2 {
top: 52px;
left: 95px;
transform: rotate(16deg);
}

.game_nav .flag2:before {
background-position: -66px 0;
}

.game_nav .flag2:after {
background-position: -66px -83px;
}

.game_nav .flag3 {
top: 64px;
left: 172px;
transform: rotate(4deg);
}

.game_nav .flag3:before {
background-position: -132px 0;
}

.game_nav .flag3:after {
background-position: -132px -83px;
}

.game_nav .flag4 {
top: 67px;
left: 242px;
transform: rotate(-4deg);
}

.game_nav .flag4:before {
background-position: -198px 0;
}

.game_nav .flag4:after {
background-position: -198px -83px;
}

.game_nav .flag5 {
top: 55px;
left: 309px;
transform: rotate(-16deg);
}

.game_nav .flag5:before {
background-position: -264px 0;
}

.game_nav .flag5:after {
background-position: -264px -83px;
}

.game_nav .flag6 {
top: 30px;
left: 375px;
transform: rotate(-30deg);
}

.game_nav .flag6:before {
background-position: -330px 0;
}

.game_nav .flag6:after {
background-position: -330px -83px;
}

.game_nav .flag:before {
opacity: 1;
}

.game_nav .flag.red:before {
opacity: 0;
}

.game_nav .flag:after {
opacity: 0;
}

.game_nav .flag.red:after {
opacity: 1;
}

.game_nav .flag.active:before,
.game_nav .flag.active:after {
transform: scale(1);
}

.game_holder {
position: relative;
width: 400px;
margin: 0 auto;
}

.game_cards {
height: 575px;
position: relative;
z-index: 10;
}

.card_holder {
position: absolute;
top: 0;
left: 50%;
margin-left: 200px;
opacity: 0;
width: 400px;
height: 575px;
transition: all 0.6s ease 0s;
transform-origin: 50% 100%;
transform: rotate(12deg);
visibility: hidden;
}

@keyframes shadow {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

.card_holder:before {
content: "";
display: block;
position: absolute;
height: 545px;
background: #F6F0DE;
border-radius: 5px;
width: 380px;
left: 50%;
margin-left: -190px;
bottom: -10px;
opacity: 0;
transition: opacity 0.6s;
}

.card_holder.active {
opacity: 1;
margin-left: -200px;
transform: rotate(0deg);
visibility: visible;
}

.card_holder.done {
margin-left: -600px;
transform: rotate(-12deg);
opacity: 0;
visibility: visible;
}

.card_holder.active:before {
opacity: 1;
animation: none;
}

.card_holder.flip:before {
animation: shadow 1.0s linear forwards;
}

.card_holder.done:before {
opacity: 0;
animation: none;
}

.card_persp {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-perspective: 2000px;
perspective: 2000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

@-webkit-keyframes flip_z {
	0% {
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		-webkit-transform: translateZ(0) rotateY(0deg);
		transform: translateZ(0) rotateY(0deg);
	}
	50% {
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		-webkit-transform: translateZ(300px) rotateY(90deg);
		transform: translateZ(300px) rotateY(90deg);
	}
	100% {
		-webkit-transform: translateZ(0) rotateY(180deg);
		transform: translateZ(0) rotateY(180deg);
	}
}

@keyframes flip_z {
	0% {
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		-webkit-transform: translateZ(0) rotateY(0deg);
		transform: translateZ(0) rotateY(0deg);
	}
	50% {
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		-webkit-transform: translateZ(300px) rotateY(90deg);
		transform: translateZ(300px) rotateY(90deg);
	}
	100% {
		-webkit-transform: translateZ(0) rotateY(180deg);
		transform: translateZ(0) rotateY(180deg);
	}
}

.card {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: #fff;
border-radius: 5px;*/
z-index: 1;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: center center;
transform-origin: center center;
}

.flip .card {
-webkit-animation-name: flip_z;
-webkit-animation-duration: 1.0s;
-webkit-animation-fill-mode: forwards;
animation-name: flip_z;
animation-duration: 1.0s;
animation-fill-mode: forwards;
}

.card_side {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../img/stripes.png) no-repeat center center #ffffff;
border-radius: 5px;
box-shadow: 0px 15px 30px rgba(221,191,115,0.15);
}

.card_side.side1 {
z-index: 2;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}

.card_side.side2 {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
background: url(../img/stripes_g.png) no-repeat center center #8dc7a9;
padding: 60px 0 0;
}

.card_side.side2.red {
background: url(../img/stripes_r.png) no-repeat center center #ffc2b1;
}

.border_top,
.border_bottom {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
border: 30px solid transparent;
border-image: url(../img/border_tl.png);
border-image-slice: 30;
border-image-repeat: repeat;
}

.border_top:before,
.border_bottom:before {
content: "";
display: block;
position: absolute;
width: 100%;
left: 100%;
top: -30px;
margin-left: 30px;
height: 100%;
border: 30px solid transparent;
border-image: url(../img/border_tr.png);
border-image-slice: 30;
border-image-repeat: repeat;
}

.border_bottom {
top: 50%;
border-image: url(../img/border_bl.png);
border-image-slice: 30;
border-image-repeat: repeat;
}

.border_bottom:before {
border-image: url(../img/border_br.png);
border-image-slice: 30;
border-image-repeat: repeat;
}

.side2 .border_top {
border-image: url(../img/border_tl2.png);
border-image-slice: 30;
border-image-repeat: repeat;
}

.side2 .border_top:before {
border-image: url(../img/border_tr2.png);
border-image-slice: 30;
border-image-repeat: repeat;
}

.side2 .border_bottom {
border-image: url(../img/border_bl2.png);
border-image-slice: 30;
border-image-repeat: repeat;
}

.side2 .border_bottom:before {
border-image: url(../img/border_br2.png);
border-image-slice: 30;
border-image-repeat: repeat;
}

.card_side_inner {
position: relative;
text-align: center;
height: 100%;
}

.card_img {
padding: 15px 0 0;
}

.card_img img {
display: block;
max-width: 100%;
margin: 0 auto;
}

.card_num {
font-weight: 500;
font-size: 14px;
line-height: 16px;
letter-spacing: 0.1em;
color: #E60000;
margin: -3px 0 10px;
text-transform: uppercase;
}

.card_num span {
color: #E9E9E9;
}

.card_text {
font-weight: 500;
font-size: 20px;
line-height: 1.3;
padding: 0 32px;
}

.card_tree {
position: absolute;
bottom: 12px;
left: 0;
right: 0;
height: 79px;
background: url(../img/tree1.png) no-repeat bottom center transparent;
}

.side2 .card_tree {
background-image: url(../img/tree2.png);
}

.card_title {
font-weight: 900;
font-size: 48px;
line-height: 1;
font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;
margin: 0 0 30px;
}

.card_title:after {
content: "";
display: block;
width: 232px;
height: 31px;
margin: 40px auto 0;
background: url(../img/title_deco.png) no-repeat 0 0 transparent;
}

.side2 .card_text {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
height: 230px;
padding: 0 30px;
}

.game_controls {
margin: 30px 0 0;
}

.game_controls > div {
overflow: hidden;
}

.game_btns .btn {
float: left;
}

.game_btns .btn + .btn {
float: right;
}

.game_note {
margin: 30px auto 0;
max-width: 270px;
font-size: 12px;
opacity: 0.5;
text-align: center;
}

.game_next .btn {
width: 100%;
}

.game_next .btn svg {
display: block;
position: absolute;
top: 50%;
right: 25px;
margin-top: -12px;
}

.game_next .btn svg path {
transition: stroke 0.75s ease 0s;
}

.game_next .btn svg path,
.game_next .btn:hover svg path,
.game_next .btn.hover svg path {
stroke: #fff;
}

.final_slide {
padding-top: 97px;
padding-bottom: 20px;
}

.white_bg {
background: url(../img/str_fin2.svg) repeat top left #fff;
border-radius: 5px;
position: relative;
padding: 50px 30px;
text-align: center;
max-width: 800px;
margin: 0 auto;
}

.white_bg_inner {
position: relative;
}

.h2 {
font-weight: 900;
font-size: 35px;
line-height: 1.3;
font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;
margin: 0 0 10px;
}

.result_num {
font-weight: 900;
font-size: 64px;
line-height: 1.3;
font-family: 'Roboto Slab', Arial, Helvetica, sans-serif;
margin: 0 0 20px;
color: #E60000;
text-shadow: 0px 15px 30px rgba(221,191,115,0.15);
}

.result_text > div {
display: none;
}

.result_text > div.active {
display: block;
}

.result_green {
background: url(../img/str_fin1.svg) repeat top left #256e67;
color: #fff;
border-radius: 5px;
margin: 40px 0 50px;
padding: 35px 20px 50px;
position: relative;
}

.result_green:before {
content: "";
display: block;
width: 163px;
height: 162px;
background: url(../img/res1.png) no-repeat 0 0 transparent;
position: absolute;
bottom: -24px;
left: 18px;
}

.result_green:after {
content: "";
display: block;
width: 93px;
height: 131px;
background: url(../img/res2.png) no-repeat 0 0 transparent;
position: absolute;
bottom: -17px;
right: 28px;
}

.result_green p {
margin: 0 auto 1em;
max-width: 570px;
position: relative;
}

.result_green b {
font-size: 20px;
font-weight: 500;
}

.result_green .btn {
margin-top: 12px;
}

.result_green .btn span {
display: inline-block;
position: relative;
padding-left: 20px;
}

.result_green .btn span:before {
content: "";
display: block;
width: 24px;
height: 24px;
background: url(../img/download.svg) no-repeat 0 0 transparent;
position: absolute;
top: 50%;
margin-top: -12px;
left: -20px;
}

.result_share {
font-size: 0px;
white-space: nowrap;
}

.result_share span {
font-size: 18px;
display: block;
max-width: 500px;
margin: 0 auto 30px;
white-space: normal;
}

.result_share a {
display: inline-block;
vertical-align: top;
border: 1px solid #E60000;
width: 65px;
height: 65px;
background: transparent;
margin: 0 15px;
position: relative;
transition: background 0.3s;
}

.result_share a:hover {
background: #E60000;
}

.result_share a svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.result_share a path {
transition: fill 0.3s;
}

.result_share a:hover path {
fill: #ffffff;
}

#mobile_detect {
width: 1px;
height: 1px;
position: fixed;
top: -10px;
left: -10px;
display: none;
}