* { margin:0; padding:0; box-sizing:border-box; font-family: 'Gotham Pro'; font-weight:300; }

body {
	background:url("../img/bg.jpg") 50% 50% no-repeat;
	background-size:cover;
	position:relative;
}

.cnt {
	width:100%;
	height:100vh;
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:10;
} 

.content {
	width:100%;
	max-width:790px;
	display:block;
	position:relative;
	padding-top: 30vh;
}

/* logos */
	.logos {
		display:flex;
		align-items:center;
		position:absolute;
		top:30px;
		left:49px;
		z-index:20;
	}

	.logos__mir {
		margin-right:30px;
	}

	.logos__sep {
		width:1px;
		height:37px;
		margin-right:23px;
		display:block;
		background:#fff;
	}

	.logos__kudago {

	}
/* logos */

/* counter */
	.counter {
		display:block;
		position:absolute;
		top:30px;
		right:32px;
		text-align:center;
		width:145px;
		transition:0.4s ease all;
	}

	.counter.shifted {
		margin-right:60px;
	}

	.counter__text {
		font-size:12px;
		margin-bottom:8px;
		text-align:center;
		color:#fff;
	}

	.counter__item {
		display:inline-block;
		margin:0 3px;
		border:2px solid #fff;
		border-radius:3px;
		width:26px;
		height:40px;
		text-align:center;
		font-size:24px;
		padding:5px 0;
		color:#fff;
	}
/* counter */

/* likes */
	.likes {
		display:block;
		position:absolute;
		left:43px;
		bottom:46px;
		padding: 5px 0 5px 40px;
	}

	.likes > p {
		color:#fff;
		font-size:12px;
		display:inline-block;
		vertical-align:middle;
	}

	.likes__icon {
		width:30px;
		height:30px;
		display:block;
		border-radius:16px;
		color:#fff;
		font-size:14px;
		padding-top:9px;
		text-align:center;
		background:#ef0034;
		margin-right:6px;
		transition:0.5s ease all;
		overflow:hidden;
		position:absolute;
		top:0;
		left:0;
	}

	.likes__icon:before {
		position:absolute;
		top:9px;
		left:7px;
	}

	.likes__icon:hover {
		width:160px;
		cursor:pointer;
	}

	.likes__icon__list {
		width:120px;
		display:block;
		position:absolute;
		text-align:center;
		top:0;
		left:30px;
	}

	.likes__icon__list a {
		font-size:16px;
		display:inline-block;
		vertical-align:middle;
		margin:0 6px;
		color:#fff;
		text-decoration:none;
		padding:7px 0;
	}

/* likes */

/* join */
	.join {
		width:px;
		display:block;
		position:absolute;
		bottom:49px;
		right:43px;
		transition:0.4s ease all;
	}

	.join.shifted {
		margin-right:60px;
	}

	.join__text {
		color:#fff;
		font-size:12px;
		margin-bottom:12px;
		text-align:center;

	}

	.join__btn {
		width:30px;
		height:30px;
		display:inline-block;
		vertical-align:middle;
		border-radius:50%;
		color:#fff;
		font-size:16px;
		padding-top:7px;
		text-align:center;
		background:#006848;
		transition:0.4s ease all;
		text-decoration:none;
		margin:0 2px;
	}

	.join__btn:hover {
		box-shadow:0 0 20px rgba(255,255,255,0.8);
		background:#00a263;
	}
/* join */

/* index */
	.index {
		width:100%;
		max-width:600px;
		position:relative;
		margin:0 auto;
		padding-bottom:12vh;
	}

	.index__logo {
		height:20vh;
		max-height:182px;
		display:block;
		position:relative;
		margin:0 auto 40px;
	}

	.index__logo-t {
		color:#fff;
		text-align:center;
		font-weight:500;
		margin-bottom:50px;
		font-size:64px;
	}

	.index__desc {
		width:100%;
		max-width:390px;
		font-size:24px;
		line-height:40px;
		text-align:center;
		margin:0 auto 55px;
		color:#fff;
	}

	.index__start {
		width:167px;
		height:60px;
		display:block;
		position:relative;
		margin:0 auto 60px;
		text-align:center;
		text-decoration:none;
		color:#fff;
		text-transform:uppercase;
		font-size:14px;
		font-weight:500;
		padding:22px 0;
		background:#006848;
		z-index:10;
	}

	.index__start:before {
		content:" ";
		display:block;
		position:absolute;
		width:60px;
		height:60px;
		top:0;
		left:-60px;
		background:#006848;
		border-radius:0 0 0 60px;
	}

	.index__start:after {
		content:" ";
		display:block;
		position:absolute;
		width:60px;
		height:60px;
		top:0;
		right:-60px;
		background:#006848;
		border-radius:0 60px 0 0;
	}

	.index__steps {
		width:100%;
		max-width:580px;
		display:block;
		position:absolute;
		bottom:40px;
		left:50%;
		transform:translate(-50%);
	}

	.index__steps__text {
		text-align:center;
		color:#006848;
		margin-bottom:25px;
		font-size:16px;
		font-weight:500;
		text-transform:uppercase;
	}

	.index__steps__list {
		width:100%;
		position:relative;
		display:flex;
		position:relative;
		justify-content:space-between;
	}

	.index__steps__list__item {
		position:relative;
	}

	.index__steps__list__item img {
		display:inline-block;
		vertical-align:middle;
		margin-right:10px;
	}

	.index__steps__list__item p {
		display:inline-block;
		vertical-align:middle;
		font-size:14px;
		color:#fff;
	}
/* index */

/* categories */
	.categories {
		width:58px;
		height:100vh;
		position:fixed;
		top:0;
		right:-58px;
		background:#006848;
		transition:0.4s ease all;
		z-index:10;
	}

	.categories.active {
		right:0;
	}

	.categories__item {
		width:58px;
		height:33.3333vh;
		display:block;
		position:relative;
		border-bottom:1px solid #00a263;
	}

	.categories .categories__item:last-child {
		border:0;
	}

	.categories__item__link {
		width:33.3333vh;
		height:58px;
		color:#fff;
		text-align:center;
		text-decoration:none;
		font-weight:500;
		font-size:14px;
		transform: translate(-50%, -50%) rotate(-90deg);
		transform-origin:50% 50%;
		display:block;
		position:absolute;
		top:50%;
		left:50%;
		text-transform:uppercase;
		padding:21px 0;
		transition:0.35s ease all;
	}

	.categories__item__link:hover,
	.categories__item__link.active {
		background:#00a263;
	}

	.categories__item__tip {
		display:none;
		position:absolute;
		top:50%;
		right:87px;
		width:160px;
		height:50px;
		background:#006848;
		color:#fff;
		font-size:14px;
		padding:16px 0;
		text-align:center;
		margin-top:-25px;
		/*transition:0.35s ease all;*/
		/*opacity:0;*/
	}

	.categories.tips .categories__item__tip {
		opacity:1;
	}

	.categories__item__tip:after {
		width:0;
		height:0;
		display:block;
		position:absolute;
		top:0;
		right:-20px;
		border:20px solid transparent;
		border-top:20px solid #006848;
		content:" ";
	}

	.categories__content {
		width:240px;
		padding:18px;
		background:#006848;
		position:absolute;
		top:50%;
		left:-275px;
		text-align:center;
		display:none;
	}

	.categories__content:after {
		width:0;
		height:0;
		display:block;
		position:absolute;
		top:0;
		right:-20px;
		border:20px solid transparent;
		border-top:20px solid #006848;
		content:" ";
	}

	.categories__content--bottom {
		top:auto;
		bottom:50%;
	}

	.categories__content--bottom:after {
		width:0;
		height:0;
		display:block;
		position:absolute;
		top:auto;
		bottom:0;
		right:-20px;
		border:20px solid transparent;
		border-bottom:20px solid #006848;
		content:" ";
	}

	.categories__content__title {
		text-align:center;
		color:#fff;
		margin-bottom:20px;
		font-size:12px;
	}

	.categories__content__icon {
		width:60px;
		height:60px;
		border-radius:50%;
		display:inline-block;
		vertical-align:center;
		background:#fff;
		margin:0 10px 17px;
		text-decoration:none;
		position:relative;
		transition:0.3s ease all;
	}

	.categories__content__icon:hover,
	.categories__content__icon.selected {
		background:#00a263;
	}

	.categories__content__font {
		display:block;
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		color:#000;
		font-size:30px;
	}

	.categories__content__icon[rel-type="font"][rel-id="2"] .categories__content__font {
		font-family:"Georgia";
		font-weight:700;
	}

	.categories__content__icon[rel-type="font"][rel-id="3"] .categories__content__font {
		font-family:"HeliosC";
		/*font-weight:700;*/
	}

	.categories__content__icon[rel-type="font"][rel-id="4"] .categories__content__font {
		font-family:"Times New Roman";
		font-style:italic;
	}

	.categories__content__pic {
		display:inline-block;
		position:relative;
		width:60px;
		height:60px;
		margin:0 10px 17px;
	}

	.categories__content__pic svg {
		max-width:60px;
		max-height:60px;
	}

	.categories__content__pic path {
		transition:.4s ease all;
		fill:#fff;
	}

	.categories__content__pic.active path,
	.categories__content__pic:hover path {
		fill:#00a263;
	}

	.categories__content__rm-icon {
		width:130px;
		display:block;
		position:relative;
		margin:0 auto;
		color:#fff;
		font-size:12px;
		text-decoration:none;
		background:url("../img/close.png") 0 50% no-repeat;
		padding:3px 0 3px 24px;
	}
/* categories */

/* main */
	.main {
		width:100%;
		max-width:600px;
		padding-top:35vh;
		position:relative;
		display:none;
	}

	.main-header {
		width:100%;
		max-width:780px;
		position:absolute;
		/*top:55px;*/
		top:100px;
		left:50%;
		transform:translate(-50%);
		display:none;
		opacity:0;
		margin-top:-20px;
	}

	.main__logo {
		height:15vh;
		max-height:155px;
		display:block;
		position:relative;
		margin:0 auto 20px;
	}

	.main__logo-t {
		color:#fff;
		text-align:center;
		font-weight:500;
		margin-bottom:20px;
		font-size:64px;
	}

	.main__desc {
		color:#fff;
		text-align:center;
		font-size:16px;
		line-height:26px;
	}

	.main__quest {
		width:100%;
		height:35vh;
		display:flex;
		align-items:center;
		justify-content:center;
		position:relative;
	}

	.main__quest__text {
		width:100%;
		max-width:500px;
		height:190px;
		position:relative;
		/*border-radius:30px;*/
		/*border:1px solid #fff;*/
		margin:0 auto;
		padding:15px 5px 5px;
		overflow:hidden;
	}

	.main__quest__text #bg {
		border-radius:30px;
	}

	.main__quest__text:before {
		width:30px;
		position:absolute;
		display:block;
		top:0;
		bottom:0;
		left:0;
		border-radius:30px 0 0 30px;
		border:1px solid #fff;
		border-right:0;
		content:" ";
		z-index:10;
	}

	.main__quest__text:after {
		width:30px;
		position:absolute;
		display:block;
		top:0;
		bottom:0;
		right:0;
		border-radius:0 30px 30px 0;
		border:1px solid #fff;
		border-left:0;
		content:" ";
		z-index:10;
	}

	.main__quest__text__icon {
		display:block;
		position:absolute;
		width:60px;
		height:60px;
		margin:0 auto 20px;
		background-position:50% 50%;
		background-repeat:no-repeat;
		background-size:contain;
		bottom:104px;
		left:50%;
		transform:translate(-50%);
		z-index:10;
	} 

	.main__quest__text__icon[rel-icon="1"] { background-image:url("../img/icons/1.svg"); }
	.main__quest__text__icon[rel-icon="2"] { background-image:url("../img/icons/2.svg"); }
	.main__quest__text__icon[rel-icon="3"] { background-image:url("../img/icons/3.svg"); }
	.main__quest__text__icon[rel-icon="4"] { background-image:url("../img/icons/4.svg"); }
	.main__quest__text__icon[rel-icon="5"] { background-image:url("../img/icons/5.svg"); }
	.main__quest__text__icon[rel-icon="6"] { background-image:url("../img/icons/6.svg"); }
	.main__quest__text__icon[rel-icon="7"] { background-image:url("../img/icons/7.svg"); }
	.main__quest__text__icon[rel-icon="8"] { background-image:url("../img/icons/8.svg"); }
	.main__quest__text__icon[rel-icon="9"] { background-image:url("../img/icons/9.svg"); }
	.main__quest__text__icon[rel-icon="10"] { background-image:url("../img/icons/10.svg"); }

	.main__quest__text__input {
		background:transparent;
		text-align:center;
		display:block;
		width:98%;
		max-width:500px;
	    height:102px;
		border:0;
		color:#fff;
		font-size:30px;
		outline:none;
		/*padding:8px 0;*/
		position:absolute;
		bottom:8px;
		z-index:20;
		overflow:hidden;
	}

	.main__quest__text__input[rel-font="2"] {
		font-family:"Georgia";
		font-weight:700;
	}

	.main__quest__text__input[rel-font="3"] {
		font-family:"HeliosC";
		/*font-weight:700;*/
	}

	.main__quest__text__input[rel-font="4"] {
		font-family:"Time New Roman";
		font-style:italic;
	}

	.main__quest__text__note {
		color:#fff;
		text-align:center;
		font-size:10px;
		margin-top:18px;
	}

	.main__quest__link {
		width:230px;
		height:60px;
		display:block;
		position:relative;
		margin:0 auto 60px;
		text-align:center;
		text-decoration:none;
		color:#fff;
		text-transform:uppercase;
		font-size:14px;
		font-weight:500;
		padding:22px 0;
		background:#006848;
		z-index:10;
	}

	.main__quest__link:before {
		content:" ";
		display:block;
		position:absolute;
		width:60px;
		height:60px;
		top:0;
		left:-60px;
		background:#006848;
		border-radius:0 0 0 60px;
	}

	.main__quest__link:after {
		content:" ";
		display:block;
		position:absolute;
		width:60px;
		height:60px;
		top:0;
		right:-60px;
		background:#006848;
		border-radius:0 60px 0 0;
	}
/* main */

/* picker override */
	.sp-top {
		margin:0;
	}

	.sp-container {
		border:0;
		background:transparent;
	}

	.sp-picker-container, 
	.sp-palette-container {
		padding:5px;
		margin:0;
		border:0;
	}

	.sp-color, 
	.sp-hue,
	.sp-clear {
		border:0;
	}

	.sp-val {
		bottom:-1px;
	}
/* picker override */

/* rocket */
	.rocket-wrap {
		width: 756.6px;
	    height: 1187.99px;
	    position: absolute;
	    bottom: 200px;
	    left: 50%;
	    margin-left: -40px;
	}

	.rocket-wrap.active {
		z-index:50;
	}

	.rocket-rotate {
		width:83px;
		height:265px;
	}

	.rocket.static {
    	bottom: -267px;
    	left: 2px;
	}

	.rocket {
		display:block;
		position:absolute;
		width:83px;
		height:265px;
		z-index:50;
		margin-bottom:-240px;
	}

	.rocket.liftoff {
		transform:rotate(90deg);
		/*animation: goToCircle 1.25s linear forwards;*/
	}

	.rocket.getout {
		/*animation: getOut 1.5s ease-out forwards;*/
	}

	@keyframes goToCircle {
		0% {
			left:50%;
			margin-left:-42px;
			top:calc(100% - 200px);
		}

		15% {
			top:calc(100% - 270px);
		}

		55% {
			transform:rotate(35deg);
		}

		100% {
			left:65vw;
			top:35vh;
			margin-left:0;
		}
	}

	@keyframes circleAnim {
		0% {
			transform:rotate(0deg);
		}
		25% {
			transform:rotate(-90deg);
		}
		50% {
			transform:rotate(-180deg);
		}
		75% {
			transform:rotate(-270deg);
		}
		100% {
			transform:rotate(-360deg);
		}
	}

	@keyframes getOut {
		0% {
			transform:rotate(0deg);
			left:65vw;
			top:35vh;
		}

		15% {
			transform:rotate(0deg);
			left:62vw;
			top:20vh;
		}

		100% {
			top:-600px;
			left:40vw;
			transform:rotate(-40deg);
		}
	}

	.rocket__inner.active {
		display:block;
		position:absolute;
		top:0;
		bottom:0;
		right:0;
		left:-15vw;
		transform-origin:0 50%;
		animation: circleAnim 3.2s linear 2 forwards;
	}

	.rocket__top {
		display:block;
		position:absolute;
		top:0;
		right:22px;
		transform-origin:0 100%;
		transition:0.5s ease all;
	}

	.rocket__top.opened {
		transform:rotate(-140deg);
	}

	.rocket__body {
		display:block;
		position:absolute;
		top:24px;
		right:0;
		z-index:10;
	}

	.rocket__fuel-1.active,
	.rocket__fuel-2.active {
		opacity:1;
	}

	.rocket__fuel-1 {
		width:35px;
		height:83px;
		z-index:5;
		display:block;
		position:absolute;
		top:157px;
		right:24px;
		animation:animFuel1 0.15s ease infinite;
		opacity:0;
	}

	.rocket__fuel-2 {
		width:35px;
		height:108px;
		z-index:3;
		display:block;
		position:absolute;
		top:157px;
		right:24px;
		animation:animFuel2 0.15s 0.15s ease infinite;
		opacity:0;
	}

	@keyframes animFuel1 {
		0%, 100% { width:35px; height:83px;	}
		50% { width:30px; height:95px; right:26px; }
	}

	@keyframes animFuel2 {
		0%, 100% { width:35px; height:108px; }
		50% { width:31px; height:95px; right:26px; }
	}

	.rocket__flair {
		display:block;
		position:absolute;
		z-index:2;
		right: 36px;
    	top: 156px;
    	height:397px;
	}

	.rocket__flair.active {
		/*animation:flair 10s ease-in-out forwards;*/
	}

	@keyframes flair {
		0% { height:40px; }
		60% { height:397px; }
	}
/* rocket */


/* capsule */
	.capsule-left {
		width:30px;
		height:60px;
		position:absolute;
		display:block;
		border-radius:30px 0 0 30px;
		z-index:30;
		background:#fff;
		box-shadow:0 0 25px #fff;
		opacity:0;
	}

	.capsule-right {
		width:30px;
		height:60px;
		position:absolute;
		display:block;
		border-radius:0 30px 30px 0;
		z-index:30;
		background:#fff;
		box-shadow:0 0 25px #fff;
		opacity:0;
	}
/* capsule */

/* stars */
	#stars {
		width:100%;
		height:100%;
		top:0;
		left:0;
		display:block;
		position:absolute;
		overflow:hidden;
		z-index:5;
	}
/* stars */

#bg {
	width:100%;
	height:100%;
	top:0;
	left:0;
	display:block;
	position:absolute;
	z-index:6;
	opacity:0.5;
}

/* share */
	.result {
		width:640px;
		display:none;
		position:absolute;
		left:50%;
		top:50vh;
		transform:translate(-50%);
		text-align:center;
	}

	.result__title {
		font-size:36px;
		font-weight:300;
		color:#fff;
		margin-bottom:30px;
		text-align:center;
	}

	.result__text {
		font-size:16px;
		font-weight:300;
		color:#fff;
		margin-bottom:10px;
		text-align:center;
	}

	.result__share__btn {
		display:inline-block;
		vertical-align:middle;
		width:50px;
		height:50px;
		border-radius:50%;
		margin:0 10px;
		background:#006848;
		text-align:center;
		color:#fff;
		text-decoration:none;
		padding-top:16px;
		transition:0.4s ease all;
		font-size:20px;
	}

	.result__share__btn:hover {
		background:#00a263;
	}

	.result__again {
		width:255px;
		padding:20px 10px 20px 72px;
		color:#fff;
		font-weight:500;
		text-transform:uppercase;
		text-decoration:none;
		margin:80px auto 0;
		display:block;
		background:url("../img/repeat.png?1") 0 50% no-repeat;
		font-size:14px;
	}
/* share */

/* const */
	.const {
		display:block;
		position:absolute;
		z-index:2000;
		left:50%;
	}

	.const--1 {
		bottom:15vh;
		margin-left:-42vw;
	}

	.const--1 .const__lines {
		width:210px;
		height:100px;
	}

	.const--2 {
		top:50vh;
		margin-left:25vw;
	}

	.const--2 .const__lines {
		width:325px;
		height:177px;
	}

	.const--3 {
		top:18vh;
		margin-left:-44vw;
	}

	.const--3 .const__lines {
		width:213.11px;
		height:240px;
	}

	.const__lines {
		display:block;
		position:relative;
		z-index:5;
		opacity:0.4;
	}

	.const__star {
		display:block;
		position:absolute;
		z-index:10;
		animation:animStar 10s infinite;
		opacity:0.5;
	}

	@keyframes animStar {
		0% {
			transform:scale(1);
			opacity:0.5;
		}
		30% {
			transform:scale(1.2);
			opacity:0.6;
		}
		70% {
			transform:scale(0.65);
			opacity:0.3;
		}
		100% {
			transform:scale(1);
			opacity:0.5;
		}
	}
/* const */

.smoke {
	display:block;
	position:absolute;
	bottom:0;
	left:50%;
	transform:translate(-50%);
	display:none;
}

.smoke.active {
	display:block;
	animation:smokeAnim 8s linear forwards;
}

@keyframes smokeAnim {
	0% {
		display:block;
		height:2vh;
		opacity:0;
	}

	50% {
		height:25vh;
		opacity:1;
	}

	100% {
		height:80vh;
		opacity:0;
	}
}


@media screen and (max-height:700px) {
	.main {
		padding-top:44vh;
	}

	.result {
		top:36vh;
	}
}