* { margin:0; padding:0; box-sizing:border-box; }

body {
	background:url("../img/article-bg.png") 50% 0 repeat-y;
}

.lock {
	display:none;
}

/* preloader */
	.preloader { 
		width:100%; 
		height:100vh; 
		display:flex; 
		position:fixed; 
		top:0; 
		left:0; 
		align-items:center; 
		justify-content:center; 
		background:#fff;
		z-index:200;
	}

	.preloader__bg {
		width:100%;
		height:100%;
		display:block;
		position:absolute;
		top:0;
		left:0;
		background:url("../img/preloader.png") 50% 50% no-repeat;
		background-size:cover;
		opacity:0;
		z-index:1;
	}

	.preloader__num { 
		width:200px; 
		height:200px; 
		background:#fff; 
		border-radius:50%;
		box-shadow:0 0 40px #fff,0 0 40px #fff;
		z-index:20;
		position:relative;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		font-size:72px;
		text-align:center;
		padding-top:50px;
		z-index:10;
	}
/* preloader */

/* header */
	.header {
		width:100%;
		position:absolute;
		top:0;
		left:0;
		z-index:90;
	}

	.header__logo {
		width:134px;
		height:58px;
		display:block;
		position:absolute;
		background:url("../img/logo.png") 50% 50% no-repeat;
		background-size:contain;
		top:30px;
		left:54px;
	}

	.header--black .header__logo {
		background:url("../img/logo-black.png") 50% 50% no-repeat;
		background-size:contain;
	}

	.header__nav {
		width:50px;
		height:3px;
		top:46px;
		right:47px;
		background:#fff;
		display:block;
		position:absolute;
		transition:.6s ease all;
		box-shadow:0 0 10px #000;
		z-index:70;
	}

	.header__nav:before {
		width:33px;
		height:3px;
		background:#fff;
		content:" ";
		display:block;
		position:absolute;
		top:11px;
		left:17px;
		transition:.6s ease all;
		box-shadow:0 0 10px #000;
	}

	.header__nav:after {
		width:42px;
		background:#fff;
		content:" ";
		height:3px;
		display:block;
		position:absolute;
		top:22px;
		left:8px;
		transition:.6s ease all;
		box-shadow:0 0 10px #000;
	}

	.header--black .header__nav,
	.header--black .header__nav:before,
	.header--black .header__nav:after {
		background-color:#000;
		box-shadow:none;
	}

	.header__nav:hover, 
	.header__nav:hover:before,
	.header__nav:hover:after {
		width:50px;
	}

	.header__nav.active, 
	.header__nav.active:before,
	.header__nav.active:after {
		width:50px;
		background:#000;
	}

	.header__nav:hover:before,
	.header__nav:hover:after,
	.header__nav.active:before,
	.header__nav.active:after {
		left:0;
	}

	.header__nav span {
		display:block;
		position:absolute;
		top:0;
		left:0;
		width:55px;
		height:25px;
	}
/* header */

/* nav */
	.nav-bg {
		width:100%;
		height:100vh;
		background:rgba(0,0,0,0.85);
		display:none;
		position:fixed;
		z-index:60;
	}

	.nav {
		width:400px;
		height:100vh;
		display:block;
		position:fixed;
		top:0;
		right:-400px;
		z-index:65;
		background:#fff url("../img/nav-bg.png") 50% 50% no-repeat;
		background-size:cover;
		padding:100px 50px;
		transition:.6s ease all;
	}

	.nav.active {
		right:0;
	}

	.nav__item {
		display:block;
		color:#000;
		margin-bottom:25px;
		font-size:24px;
		text-decoration:none;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		transition:.6s ease all;
		position:relative;
	} 

	@media screen and (max-height:700px) {
		.nav {
			padding-top:45px;
			padding-bottom:45px;
		}

		.nav__item {
			font-size:22px;
			margin-bottom:15px;
		}
	}

	.nav__item:hover {
		padding-left:33px;
	}

	.nav__item:before {
		content:" ";
		display:block;
		position:absolute;
		z-index:5;
		width:38px;
		height:11px;
		top:50%;
		left: -50px;
		margin:-6px 0 0 0px;
		background:url("../img/game-btn-arrow-right-black.png") 100% 0;
		transition:.6s ease all;
		opacity:0;
	}

	.nav__item:after {
		content:" ";
		display:block;
		position:absolute;
		z-index:5;
		width:38px;
		height:1px;
		top:50%;
		left:0;
		margin:-1px 0 0 -88px;
		transition:.6s ease all;
		background:#fff;
		opacity:0;
	}

	.nav__item:hover:before {
		width:73px;
		opacity:1;
	}

	.nav__item:hover:after {
		width:13px;
		margin-left:-63px;
		opacity:1;
	}


	.nav__share {
		padding:20px 0;
	}

	.nav__share__text {
		font-size:14px;
		margin-bottom:10px;
		font-family: 'FuturaFuturisC';
	}

	.nav__share__item {
		display:inline-block;
		margin-right:4px;
		width:40px;
		height:40px;
		border:3px solid #000;
		text-align:center;
		color:#000;
		border-radius:50%;
		text-decoration:none;
		transition:.6s ease all;
		font-size:18px;
		padding-top:8px;
	}

	.nav__share__item:hover {
		background:#000;
		color:#fff;
	}
/* nav */

/* black btn */
	.black__btn {
		width:180px;
		height:60px;
		display:block;
		border-radius:30px;
		background:#000;
		color:#fff;
		text-decoration:none;
		font-size:14px;
		padding:22px 22px 22px 40px;
		text-align:center;
		z-index:4;
		transition:.6s ease all;
		position:relative;
		font-family: 'FuturaFuturisC';
	}

	.black__btn.abs {
		position:absolute;
		opacity:0;
	}

	.black__btn.sm { 
		width:160px;
		height: 47px;
		padding:15px 15px 15px 30px;
	}

	.black__btn:before {
		content:" ";
		display:block;
		position:absolute;
		z-index:5;
		width:38px;
		height:11px;
		top:50%;
		left:0;
		margin:-6px 0 0 0px;
		background:url("../img/game-btn-arrow-right.png") 100% 0;
		transition:.6s ease all;
	}
	
	.black__btn.back:before {
		background:url("../img/game-btn-arrow-left.png") 0 0;
		margin:-6px 0 0 -38px;
	}

	.black__btn:after {
		content:" ";
		display:block;
		position:absolute;
		z-index:5;
		width:38px;
		height:1px;
		top:50%;
		left:0;
		margin:-1px 0 0 -38px;
		transition:.6s ease all;
		background:#000;
	}

	.black__btn.back:after {
		background:#fff;
		margin:-1px 0 0 0;
	}

	.black__btn:hover {
		padding-left: 60px;
	}

	.black__btn:hover:before {
		width:58px;
	}

	.black__btn.back:hover:before {
		margin:-6px 0 0 -58px;
	}

	.black__btn:hover:after {
		width:18px;
		margin:-1px 0 0 -18px;
	}

	.black__btn.back:hover:after {
		width:18px;
		margin:-1px 0 0 0;
	}
/* black btn */

/* game */
	.game {
		width:100vw;
		height:100vh;
	}

	.game__scr__title-block {
		position:absolute;
		z-index:10;
		top: calc(50% - 210px);
		left:50%;
		transform:translate(-50%);
		width:0;
	}

	.game__scr3 .game__scr__title-block,
	.game__scr4 .game__scr__title-block {
		top: calc(50% - 280px);
	}

	.game__scr3 .game__scr__title-block__text {
		font-size:100px;
	}

	.game__scr__title-block__num {
		width:90px;
		height:90px;
		display:block;
		margin:0 auto;
		border-radius:50%;
		background:#fff;
		text-align:center;
		font-size:72px;
		padding-top:11px;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		line-height:1em;
		transform: translate(-50%);
	}

	.game__scr__title-block__text {
		font-size:130px;
		font-weight:400;
		color:#fff;
		text-align:center;
		white-space:nowrap;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		transform: translate(-50%);
    	width: 1200px;
    	text-shadow:0 0 40px #000, 0 0 80px #000;
	}

	@media screen and (min-width:640px) and (max-height:700px) {
		.game__scr__title-block {
			top:20vh;
		}

		.game__scr3 .game__scr__title-block {
			top:auto;
			bottom:370px;
		}

		.game__scr4 .game__scr__title-block {
			top:auto;
			bottom: 49vh;
		}
	}
/* game */

/* game screen 1 */
	.game__scr1 {
		display:block;
		position:absolute;
		z-index:20;
	}

	.game__scr1__list {
		width:100vw;
		height:100vh;
		position:relative;
		margin:0;
		padding:0;
		list-style-type:none;
		overflow:hidden;
		font-size:0;
	}

	.game__scr1__list > li {
		margin:0;
		padding:0;
		width:25vw;
		height:100vh;
		display:inline-block;
		vertical-align:top;
		position:relative;
		overflow:hidden;
		background:#000;

	}

	.game__scr1__list > li:hover {
		cursor:pointer;
	}

	.game__scr1__list > li > div {
		display:block;
		position:absolute;
		width:100%;
		height:100%;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		opacity:0.5;
		transition:0.5s linear all;
		background-position:50% 100%;
		background-size:cover;
	}

	.game__scr1__list > li:hover > div {
		opacity:1;
		transform:translate(-50%, -50%) scale(1.1);
	}

	.game__scr1__list > li > .black__btn {
		left:50%;
		bottom:20vh;
		transform:translate(-50%, -50%);
	}

	.game__scr1__list > li[rel-id="1"] > div { background-image:url("../img/game_1_1.jpg"); }
	.game__scr1__list > li[rel-id="2"] > div { background-image:url("../img/game_1_2.jpg"); }
	.game__scr1__list > li[rel-id="3"] > div { background-image:url("../img/game_1_3.jpg"); }
	.game__scr1__list > li[rel-id="4"] > div { background-image:url("../img/game_1_4.jpg"); }

	.game__scr1__list > li:hover > .black__btn {
		opacity:1;
	}
/* game screen 1 */

/* game screen 2 */
	.game__scr2 {
		display:block;
		position:absolute;
		z-index:15;
	}

	.game__scr2__list {
		width:100vw;
		height:100vh;
		position:relative;
		margin:0;
		padding:0;
		list-style-type:none;
		overflow:hidden;
		font-size:0;
	}

	.game__scr2__list > li {
		margin:0;
		padding:0;
		width:50vw;
		height:100vh;
		display:inline-block;
		vertical-align:top;
		position:relative;
		overflow:hidden;
		background:#000;
	}

	.game__scr2__list__bg {
		display:block;
		position:absolute;
		width:100%;
		height:100%;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		opacity:0.5;
		transition:0.5s linear all;
		background-position:50% 100%;
		background-size:cover;
		background-image:url("../img/game_2.jpg");
	}

	.game__scr2__list__pic {
		display:block;
		position:absolute;
		top:50%;
		left:50%;
		width:38vw;
		max-width:700px;
		transform:translate(-50%, -50%);
		z-index:5;
	}

	.game__scr2__list__desc {
		width:300px;
		color:#fff;
		text-align:center;
		display:block;
		position:absolute;
		top: calc(50% + 100px);
		left:50%;
		transform:translate(-50%, -50%);
		font-size:14px;
		font-family: 'FuturaFuturisC';
		text-shadow:0 0 15px #000;
		opacity:0;
	}

	.game__scr2__list > li:hover {
		cursor:pointer;
	}

	.game__scr2__list > li:hover .game__scr2__list__bg {
		opacity:1;
		transform:translate(-50%, -50%);
	}

	.game__scr2__list > li > .black__btn {
		left:50%;
		bottom:27vh;
		transform:translate(-50%, -50%);
	}

	.game__scr2__list > li:hover .game__scr2__list__desc,
	.game__scr2__list > li:hover .black__btn {
		opacity:1;
	}
/* game screen 2 */

/* game screen 3 */
	.game__scr3 {
		width:100vw;
		height:100vh;
		background:url("../img/game_2.jpg");
		display:block;
		position:absolute;
		z-index:10;
	}

	.game__scr3__popup {
		width:100%;
		max-width:700px;
		display:none;
		position:absolute;
		top:40%;
		left:50%;
		background:#fff;
		border-radius:20px;
		padding:60px 30px;
		transform:translate(-50%, -50%);
		box-shadow:0 0 30px #fff, 0 0 50px #fff, 0 0 70px #fff; 
		z-index:50;
	}

	.game__scr3__popup__text {
		margin:0;
		text-align:center;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		font-size:48px;
		line-height:1.2em;
	}

	.game__scr3__popup__btns {
		text-align:center;
		margin-top:20px;
	}

	.game__scr3__popup__btns .black__btn {
		margin:0 50px;
		display:inline-block;
	}

	.game__src3__selection {
		width:100vw;
		height:360px;
		position:absolute;
		margin:0;
		padding:0;
		overflow:hidden;
		background:#fff;
		left:0;
		bottom:0;
	}

	.game__src3__cats {
		width:100%;
		height:76px;
		text-align:center;
		padding:16px 0;
	}

	.game__src3__cats__item {
		width:139px;
		height:43px;
		display:inline-block;
		border:1px solid #bfbfbf;
		margin:0 18px;
		border-radius:22px;
		padding:13px;
		text-align:center;
		color:#535353;
		text-decoration:none;
		font-size:14px;
		text-transform:uppercase;
		font-family: 'FuturaFuturisC';
		transition:.5s ease all;
	}

	.game__src3__cats__item.active,
	.game__src3__cats__item:hover {
		border-color:#000;
		background:#000;
		color:#fff;
	}

	.game__scr3__list-wrap {
		width:100%;
		max-width:1140px;
		height:0;
		position:relative;
		margin:0 auto;
		padding:0 110px;
		list-style-type:none;
		overflow:hidden;
		z-index:5;
		opacity:0;
	}

	.game__scr3__list-wrap.active {
		display:block;
		z-index:20;
		opacity:1;
		height:calc(360px - 76px);
	}

	.game__scr3__list__item {
		margin:0;
		padding:0;
		width:25%;
		height:calc(360px - 76px);
		display:inline-block;
		vertical-align:top;
		position:relative;
		overflow:hidden;
		border-left:1px solid #acacac;
		transition:0.5 linear all;
		padding:1.4%;
	}

	.game__scr3__list > li:first-child {
		border-left:0;
	}

	.game__scr3__list > li:hover { 
		background:#fff;
		cursor:pointer;
	}

	.game__scr3__list > li.active {
		background:#fff;
	}

	.game__scr3__list__name {
		font-size:16px;
		color:#535353;
		margin-bottom:25px;
		text-align:center;
		text-transform:uppercase;
		line-height:1.2em;
		font-family: 'FuturaFuturisC';
	}

	.game__scr3__list__pic {
		display:block;
		position:relative;
		margin:0 auto 27px;
		height:100px;
	}

	.game__scr3__list__item .black__btn {
		margin-left: 13%;
		opacity:0;
	}

	.game__scr3__list__item:hover .black__btn,
	.game__scr3__list__item .black__btn.active { 
		opacity:1;
	}

	.game__scr3 .swiper-container {
		overflow:hidden;
	}

	.game__scr3__list__btn {
		display:block;
		position:absolute;
		width:43px;
		height:43px;
		border-radius:50%;
		top:50%;
		margin-top:-40px;
		border:1px solid #bfbfbf;
		color:#bfbfbf;
		transition:.5s ease all;
		text-align:center;
		font-size:24px;
		padding-top:9px;
		background:transparent;
	}

	.game__scr3__list__btn--prev {
		left:20px;
		padding-right:4px;
	}

	.game__scr3__list__btn--next {
		right:20px;
		padding-left:4px;
	}

	.game__scr3__list__btn:hover {
		border:1px solid #000;
		color:#fff;
		background:#000;
		cursor:pointer;
	}
/* game screen 3 */

/* game screen 4 */
	.game__scr4 {
		width:100vw;
		height:100vh;
		background:url("../img/game_2.jpg");
		display:block;
		position:absolute;
		z-index:10;
	}

	.game__scr4__selection {
		width:100vw;
		height:45vh;
		position:absolute;
		margin:0;
		padding:0;
		overflow:hidden;
		background:#fff;
		left:0;
		bottom:0;
		display:flex;
		align-items:center;
	}

	.game__scr4__selection__auth {
		width:700px;
		display:block;
		position:relative;
		margin:0 auto;
		text-align:center;
	}

	.game__scr4__selection__auth__text,
	.game__scr4__selection__mail__text {
		font-size:18px;
		margin-bottom:30px;
		font-family:"FuturaFuturisC";
	}
	
	.game__scr4__selection__auth__btn {
		width:70px;
		height:70px;
		border:3px solid #000;
		text-align:center;
		text-decoration:none;
		color:#000;
		font-size:36px;
		padding-top:14px;
		border-radius:50%;
		display:inline-block;
		margin:0 10px;
	}
	
	.game__scr4__selection__mail {
		width:700px;
		display:block;
		position:relative;
		margin:0 auto;
		text-align:center;
		display:none;
	}

	.game__scr4__selection__mail__input {
		width:300px;
		padding:12px;
		border:0;
		border-bottom:1px solid #7d7d7d;
		display:block;
		margin:0 auto 20px;
		font-family:"FuturaFuturisC";
		font-size:16px;
	}

	.game__scr4__selection .black__btn {
		margin:0 auto 20px;
	}
/* game screen 4 */

/* result */
	.result {
		width:100%;
		height:100vh;
		position:relative;
		display:flex;
		align-items:center;
		justify-content:center;
		background:url("../img/result-bg.png") 50% 50% no-repeat;
		background-size:cover;
	}

	.result__content {
		width:670px;
		display:block;
		position:relative;
	}

	.result__title {
		text-align:center;
		font-size:60px;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		font-weight:400;
		margin-bottom:37px;
		line-height:1.3em;
	}

	.result__pic {
		max-width:100%;
		max-height:40vh;
		display:block;
		position:relative;
		box-shadow:0 0 40px #999, 0 0 60px #999, 0 0 80px #999;
		margin:0 auto 30px;
	}

	.result__share {
		display:block;
		position:relative;
		text-align:center;
	}

	.result__share__text {
		font-size:16px;
		margin-bottom:15px;
		font-family: 'FuturaFuturisC';
	}

	.result__share__item {
		display:inline-block;
		margin-right:4px;
		width:40px;
		height:40px;
		border:3px solid #000;
		text-align:center;
		color:#000;
		border-radius:50%;
		text-decoration:none;
		transition:.6s ease all;
		font-size:18px;
		padding-top:8px;
	}

	.result__share__item:hover {
		background:#000;
		color:#fff;
	}

	.result .black__btn {
		margin:40px auto 20px;
	}
/* result */

/* main */ 
	.main {
		width:100vw;
		height:100vh;
		display:block;
		position:relative;
		overflow:hidden;
		background:#000;
	}

	.main__menu {
		display:block;
		position:absolute;
		top:50%;
		left:55px;
		margin-top:-151px;
		z-index:60;
	}
	
	.main__menu:after {
		content:" ";
		position:absolute;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.3);
		border-radius:30px;
		z-index:1;
		top:0;
		left:-11px;
	}

	.main__menu__item {
		width:50px;
		height:3px;
		display:block;
		position:relative;
		opacity:1;
		margin-bottom:24px;
		transition:0.4s linear all;
		z-index:5;
	}

	.main__menu__item__line {
		width:30px;
		height:3px;
		display:block;
		position:absolute;
		background:#fff;
		box-shadow:0 0 15px #000;
	}

	.main__menu__item__text {
		display:block;
		position:absolute;
		top:-8px;
		right: -25px;
		font-size:16px;
		color:#fff;
		transition:0.4s linear all;
		opacity:0;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		text-shadow:0 0 15px #000;
	}

	.main__menu__item:hover,
	.main__menu__item.active {
		opacity:1;
	}

	.main__menu__item:hover .main__menu__item__text,
	.main__menu__item.active .main__menu__item__text {
		opacity:0;
	}

	.main__menu__item:hover .main__menu__item__line,
	.main__menu__item.active .main__menu__item__line {
		width:50px;
	}

	.main__menu__arrow {
		width:12px;
		height:34px;
		display:block;
		position:relative;
		margin:24px 0 24px 6px;
		z-index:10;
	}

	.main__menu__arrow--top {
		background:url("../img/main-arr-top.png");
	}

	.main__menu__arrow--bottom {
		background:url("../img/main-arr-bottom.png");
	}

	.main__contest-btn {
		width:120px;
		height:120px;
		display:block;
		position:fixed;
		right:55px;
		bottom:55px;
		border-radius:50%;
		background:#000;
		text-decoration:none;
		z-index:70;
		padding: 9px;
		transition:.5s ease all;
	}

	.main__contest-btn:hover {
		padding-right:25px;
	}

	.main__contest-btn:before {
		content:" ";
		width:24px;
		height:11px;
		display:block;
		position:absolute;
		top:50%;
		right:0;
		margin-top:-5px;
		background:url("../img/main-necklace-arrow.png") 0 50% no-repeat;
		transition:.5s ease all;
	}

	.main__contest-btn:after {
		content:" ";
		width:22px;
		height:1px;
		left:100%;
		top:50%;
		background:#000;
		display:block;
		position:absolute;
		transition:.5s ease all;
	}

	.main__contest-btn:hover:before {
		width:30px;
	}

	.main__contest-btn:hover:after {
		width:10px;
	}

	.main__contest-btn img {
		display:block;
		margin:0 0 3px 15px;
		transition:.5s ease all;
	}

	.main__contest-btn:hover img {
		margin-left:7px;
	}

	.main__contest-btn__text {
		text-align:center;
		color:#fff;
		font-size:14px;
		font-family:"FuturaFuturisC";
	}

	.main__scroll-text {
		font-size:12px;
		display:block;
		position:absolute;
		color:#fff;
		font-family:"FuturaFuturisC";
		bottom:30px;
		left:55px;
		z-index:55;
		transform:rotate(-90deg);
		transform-origin:0 0;
	}

	.main__left {
		width:50vw;
		height:100vh;
		position:absolute;
		top:0;
		left:0;
		overflow:hidden;	
	}

	.main__left__item {
		width:50vw;
		height:100vh;
		position:absolute;
		top:0;
		left:0;
		background-size:cover;
		background-position:50% 50%;
		background-repeat:no-repeat;
		z-index:5;
	}

	.main__left__item[rel-id="1"] { background-image:url("../img/main-left-1.jpg"); z-index:30; }
	.main__left__item[rel-id="2"] { background-image:url("../img/main-left-2.jpg"); z-index:25; }
	.main__left__item[rel-id="3"] { background-image:url("../img/main-left-3.jpg"); z-index:20; }
	.main__left__item[rel-id="4"] { background-image:url("../img/main-left-4.jpg"); z-index:15; }
	.main__left__item[rel-id="5"] { background-image:url("../img/main-left-5.jpg"); z-index:10; }
	.main__left__item[rel-id="6"] { background-image:url("../img/main-left-6.jpg"); z-index:5;  }

	.main__left__item__bg {
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
		background-color:#000;
		opacity:0.1;
	}

	.main__left__item.active {
		z-index:50;
	}

	.main__left__item.preactive {
		z-index:45;
	}

	.main__left__item.transitionIn {
		animation:mainLeftIn 1s;
		z-index:45;
	}

	.main__left__item.transitionOut {
		transform:scale(1);
		animation:mainLeftOut 1s;
		animation-fill-mode: forwards;
	}

	@keyframes mainLeftOut {
		0% {
			height:100vh;
		}
		100% {
			height:0;
			top:100vh;
		}
	}

	@keyframes mainLeftIn {
		0% {
			transform:scale(1.1);
		}
		100% {
			transform:scale(1);
		}
	}

	.main__right__item {
		width:50vw;
		height:100vh;
		position:absolute;
		top:0;
		right:0;
		display:flex;
		align-items:center;
		justify-content:center;
		background:#000;
		overflow:hidden;
	}

	.main__right__item[rel-id="6"] {
		background:#fff url("../img/result-bg.png") 50% 50% no-repeat;
		background-size:cover;
	}

	.main__right__item.transitionIn {
		animation:mainRightIn 1s ease;
		z-index:20;
	}

	.main__right__item.transitionOut {
		animation:mainRightOut 1s ease;
		animation-fill-mode: forwards;
		z-index:30;
	}

	@keyframes mainRightOut {
		0% {
			height:100vh;
		}
		100% {
			height:0;
		}
	}

	@keyframes mainRightIn {
		0% {

		}
		100% {

		}
	}

	.main__right__item.active {
		z-index:20;
	}

	.main__right__item__bg {
		width:100%;
		height:100%;
		top:0;
		left:0;
		display:block;
		position:absolute;
		z-index:10;
		background-size:cover;
		background-position:50% 0;
		background-repeat:no-repeat;
		opacity:0.3;
	}

	.main__right__item[rel-id="1"] .main__right__item__bg { background-image:url("../img/main-right-1.jpg"); }
	.main__right__item[rel-id="2"] .main__right__item__bg { background-image:url("../img/main-right-2.jpg"); }
	.main__right__item[rel-id="3"] .main__right__item__bg { background-image:url("../img/main-right-3.jpg"); }
	.main__right__item[rel-id="4"] .main__right__item__bg { background-image:url("../img/main-right-4.jpg"); }
	.main__right__item[rel-id="5"] .main__right__item__bg { background-image:url("../img/main-right-5.jpg"); }

	.main__right__shapes {
		width:100%;
		height:100%;
		display:block;
		position:absolute;
		overflow:hidden;
		z-index:5;
	}

	.main__right__shapes__item {
		display:block;
		position:absolute;
		min-width:100%;
		min-height:100%;
		top:0;
		left:0;
		transition:0.5s ease all;
		opacity:0;
	}

	.main__right__item[rel-id="1"] .main__right__shapes__item.active,
	.main__right__item[rel-id="2"] .main__right__shapes__item.active,
	.main__right__item[rel-id="3"] .main__right__shapes__item.active,
	.main__right__item[rel-id="4"] .main__right__shapes__item.active,
	.main__right__item[rel-id="5"] .main__right__shapes__item.active,
	.main__right__item[rel-id="6"]:hover .main__right__shapes__item {
		opacity:1;
	}

	.main__right__item__content {
		display:block;
		position:relative;
		z-index:10;
	}

	.main__right__item__desc {
		color:#fff;
		font-size:18px;
		text-align:center;
		margin:0 auto 15px;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		max-width:510px;
		opacity:0;
	}

	.main__right__item__title {
		color:#fff;
		font-size:85px;
		text-align:center;
		margin-bottom:40px;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		font-weight:400;
		opacity:0;
	}

	.main__right__item .black__btn {
		margin:0 auto 20px;
		opacity:0;
	}

	.main__right__item[rel-id="6"] .black__btn {
		opacity:1;
	}

	.main__right__item__rules {
		display:block;
		position:relative;
		font-size:14px;
		text-align:center;
		color:#fff;
		font-family:"FuturaFuturisC";
		margin:40px auto 20px;
		opacity:0;
	}

	.main__right__item.transitionOut .main__right__item__desc,
	.main__right__item.transitionOut .main__right__item__title,
	.main__right__item.transitionOut .black__btn,
	.main__right__item.transitionOut .main__right__item__rules {
		opacity:1;
	}

	.main__right__item[rel-id="6"] .main__right__item__desc,
	.main__right__item[rel-id="6"] .main__right__item__title,
	.main__right__item[rel-id="6"] .main__right__item__rules {
		color:#000;
		opacity:1;
	}

	.main__right__item[rel-id="1"].active .main__right__item__desc,
	.main__right__item[rel-id="2"].active .main__right__item__desc,
	.main__right__item[rel-id="3"].active .main__right__item__desc,
	.main__right__item[rel-id="4"].active .main__right__item__desc,
	.main__right__item[rel-id="5"].active .main__right__item__desc,
	.main__right__item[rel-id="6"]:hover .main__right__item__desc {
		animation:showRightContent .4s;
		animation-fill-mode: forwards;
	}

	.main__right__item[rel-id="1"].active .main__right__item__title,
	.main__right__item[rel-id="2"].active .main__right__item__title,
	.main__right__item[rel-id="3"].active .main__right__item__title,
	.main__right__item[rel-id="4"].active .main__right__item__title,
	.main__right__item[rel-id="5"].active .main__right__item__title,
	.main__right__item[rel-id="6"]:hover .main__right__item__title {
		animation:showRightContent .4s;
		animation-fill-mode: forwards;
		animation-delay:.2s;
	}

	.main__right__item[rel-id="1"].active .black__btn,
	.main__right__item[rel-id="2"].active .black__btn,
	.main__right__item[rel-id="3"].active .black__btn,
	.main__right__item[rel-id="4"].active .black__btn,
	.main__right__item[rel-id="5"].active .black__btn,
	.main__right__item[rel-id="6"]:hover .black__btn {
		animation:showRightContent .4s;
		animation-fill-mode: forwards;
		animation-delay:.4s;
	}

	.main__right__item:hover .main__right__item__rules {
		animation:showRightContent .4s;
		animation-fill-mode: forwards;
		animation-delay:.6s;
	}

	@keyframes showRightContent {
		0% {
			opacity:0;
		}
		100% {
			color:#fff;
			opacity:1;
		}
	}
/* main */ 

/* article */
	.article {
		width:100%;
		position:relative;
		overflow:hidden;
	}

	.article__intro {
		display:block;
		position:relative;
		width:100%;
		height:100vh;
		background-repeat:no-repeat;
		background-size:cover;
		background-position:50% 50%;
	}

	.article__scroll-block {
		width:50px;
		height:50px;
		background:#000;
		border-radius:50%;
		display:block;
		position:absolute;
		left:50%;
		bottom:42px;
		margin-left:-25px;
		z-index:10;
		animation:articleScroll ease 2s infinite;
	}

	.article__scroll-block:before {
		width:1px;
		height:27px;
		display:block;
		background:#000;
		position:absolute;
		left:50%;
		bottom:100%;
		content:" ";
	}

	.article__scroll-block:after {
		width:11px;
		height:27px;
		display:block;
		position:absolute;
		top:0;
		left:50%;
		margin-left:-5px;
		background:url("../img/arrow-bottom.png");
		content:" ";
	}

	.article__scroll-block:hover {
		cursor:pointer;
	}

	@keyframes articleScroll {
		0% {
			bottom:42px;
		}
		50% {
			bottom:70px;
		}
		100% {
			bottom:42px;
		}
	}

	.article__content {
		width:100%;
		max-width:1000px;
		display:block;
		position:relative;
		margin:0 auto;
	}

	.article__content__block {
		width:100%;
		display:block;
		position:relative;
		overflow:hidden;
		margin-bottom:-5px;
		padding:0 20px;
	}

	.article__content__half {
		width:50%;
		display:block;
		position:relative;
		float:left;
	}

	.article__content__tq {
		width:75%;
		display:block;
		position:relative;
		float:left;
	}

	.article__content__q {
		width:25%;
		display:block;
		position:relative;
		float:left;
	}

	.article__content__pretitle {
		font-size:16px;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		padding:70px 0 0px;
		padding-right:35px;
	}

	.article__content__title {
		font-size:74px;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		padding-right:15px;
		font-weight:400;
		margin-bottom:10px;
	}

	.article__content__desc {
		font-size:16px;
		font-family: 'FuturaFuturisC';
		padding-right:35px;
		margin-bottom:35px;
		line-height:2em;
	}

	.article__content__credits {
		font-size:12px;
		font-family: 'FuturaFuturisC';
		color:#a0a0a0;
		line-height:2.2em;
		padding-right:35px;
	}

	.article__another-btn {
		width:133px;
		height:133px;
		display:none;
		position:fixed;
		bottom:30px;
		right:40px;
		background:#fff;
		box-shadow:0 0 30px #fff, 0 0 30px #fff, 0 0 30px #fff;
		text-align:center;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		color:#000;
		text-decoration:none;
		font-size:18px;
		padding: 30px 20px;
		transition:.5s ease all;
		border-radius:50%;
		z-index:50;
	}

	.article__another-btn--gray {
		background:#f8f8f8;
		box-shadow:0 0 30px #eeeeee, 0 0 30px #eeeeee, 0 0 30px #eeeeee;
	}

	.article__another-btn--win {
		font-size:14px;
		text-align:center;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		right: auto;
		left:40px;
		padding-top: 18px;
	}

	.article__another-btn--win img {
		display:block;
		position:relative;
		margin:0 0 0 10px;
		transition:0.5s ease all;
	}

	.article__another-btn--win:hover img {
		margin-left:0px;
	}

	.article__another-btn:after {
		content:" ";
		display:block;
		position:absolute;
		top:50%;
		right:-22px;
		width:44px;
		height:11px;
		background:url("../img/another-arrow.png") 50% 0 no-repeat;
		margin:-6px 0 0;
		transition:.5s ease all;
	}

	.article__another-btn:hover {
		padding-right:35px;
	}

	.article__another-btn:hover:after {
		right:-9px;
	}

	.article__click-access {
		display:block;
		position:absolute;
		padding-left:27px;
		width:200px;
		font-size:14px;
		color:#d2d2d2;
		left:37px;
		top:90px;
		font-family: 'FuturaFuturisC';
		background:url("../img/triangle-left.png") 0 50% no-repeat;
	}

	.article__click-access--right {
		left:0px;
   		top:24px;
		background:url("../img/triangle-right.png") 100% 50% no-repeat;
	}

	.article__content__info-block {
		padding-top:400px;
	}

	.article__content__info-block--sm-pad {
		padding-top:100px;
	}

	.article__info-arrow {
		display: none;
	    position: absolute;
	    width: 43px;
	    height: 43px;
	    border-radius: 50%;
	    top: 50%;
	    margin-top: -40px;
	    border: 1px solid #bfbfbf;
	    color: #bfbfbf;
	    transition: .5s ease all;
	    text-align: center;
	    font-size: 24px;
	    padding-top: 9px;
	    background: #fff;
	    text-decoration:none;
	    z-index:20;
	}

	.article__info-arrow:hover {
		border: 1px solid #000;
	    color: #fff;
	    background: #000;
	    cursor: pointer;
	}

	.article__info-arrow--left {
		left:-20px;
	}

	.article__info-arrow--right {
		right:-20px;
	}

	.article__info-block {
		position:relative;
	}

	.article__info-block__name {
		font-size:14px;
		text-transform:uppercase;
		color:#535353;
		font-family: 'FuturaFuturisC';
		text-align:center;
		padding-left:15px;
		padding-right:15px;
	}

	.article__info-block__price {
		font-size:18px;
		margin-bottom:35px;
		font-family: 'FuturaFuturisC';
		text-align:center;
		padding-left:15px;
		padding-right:15px;
	}

	.article__info-block__pic {
		width:150px;
		display:block;
		margin:0 auto 43px;
	}

	.article__content__dot-items__pic {
		display:block;
		position:relative;
		width:100%;
		z-index:1;
	}

	.article__content__dot-items__link {
		display:block;
		position:absolute;
		width:32px;
		height:32px;
		border:5px solid #fff;
		box-shadow:0 0 15px #fff, 0 0 15px #fff, 0 0 15px #fff;
		z-index:5;
		/*transition:0.5s ease all;*/
		border-radius:50%;
	}

	.article__content__dot-items__link.invisible {
		opacity:0 !important;
	}

	.article__content__dot-items__link.active,
	.article__content__dot-items__link:hover {
		background:#fff;
	}

	.article__content__dot-items__link.hidden {
		opacity:0;
	}

	.article__content__dot-block__block {
		display:none;
	}

	.article__content__dot-block__block .black__btn[href=""] {
		display:none;
	}

	.article__side-block {
		display:block;
		position:absolute;
	}

	.article__content__video {
		width:100%;
		display:block;
		position:relative;
	}
/* article */

/* smart casual */
	.article__intro--sc { background-image:url("../img/sc-intro.jpg"); }

	.article__content__block--sc1 .article__another-btn,
	.article__content__block--sc4 .article__another-btn {
		position:absolute;
		right:57px;
		bottom:30px;
		z-index:10;
	}

	.article__content__block--sc1 {
		z-index:10;
	}

	.article__content__block--sc2 {
		z-index:5;
	}

	.article__content__info-block .black__btn {
		margin:0 auto 34px;
	}

	.article__content__info-block .article__another-btn--gray {
		margin:0 auto;
	}

	.article__content__block--sc4 {
		margin-bottom:140px;
	}

	.article__content__block--sc5 .article__num-block {
		padding-top:0;
	}

	.article__content__block--sc6 {
		margin-bottom:75px;
	}

	.article__content__block--sc6 .article__click-access {
		top:25px;
	}

	.article__content__block--sc6 .article__content__info-block {
		padding-top:110px;
	}

	.article__content__block--sc7 {
		margin-bottom:45px;
	}


	/* smart casual side */
		.article__side-block--sc1 { width:calc((100vw - 960px)/2 + 240px); height:690px; background:#488ccb; top:calc(100vh + 70px); right:0; }
		.article__side-block--sc2 { width:calc((100vw - 960px)/2 + 120px); height:465px; background:#7f5122; top:calc(100vh + 1100px); left:0; }
		.article__side-block--sc3 { width:calc((100vw - 960px)/2 + 120px); height:500px; background:#000043; top:calc(100vh + 2055px); right:0; }
		.article__side-block--sc4 { width:calc((100vw - 960px)/2 + 120px); height:485px; background:#cba675; top:calc(100vh + 3055px); left:0; }
	/* smart casual side */

	/* smart casual pic 1 */	
		.article__content__dot-items--sc1 .article__content__dot-items__link[rel-id="1"] { top:28%; left:29%; }
		.article__content__dot-items--sc1 .article__content__dot-items__link[rel-id="2"] { top:38%; left:37%; }
		.article__content__dot-items--sc1 .article__content__dot-items__link[rel-id="3"] { top:44%; left:38%; }
		.article__content__dot-items--sc1 .article__content__dot-items__link[rel-id="4"] { top:52.8%; left:43%; }
		.article__content__dot-items--sc1 .article__content__dot-items__link[rel-id="5"] { top:73%; left:29%; }
		.article__content__dot-items--sc1 .article__content__dot-items__link[rel-id="6"] {top:41%; left:29%; }
		.article__content__dot-items--sc1 .article__content__dot-items__link[rel-id="7"] {top:42%; left:50%; }
	/* smart casual pic 1 */

	/* smart casual pic 2 */
		.article__content__dot-items--sc2 .article__content__dot-items__link[rel-id="1"] { top:17%; left:55%; }
		.article__content__dot-items--sc2 .article__content__dot-items__link[rel-id="2"] { top:27%; left:65%; }
		.article__content__dot-items--sc2 .article__content__dot-items__link[rel-id="3"] { top:48%; left:55%; }
		.article__content__dot-items--sc2 .article__content__dot-items__link[rel-id="4"] { top:70.5%; left:47%; }
	/* smart casual pic 2 */

	/* smart casual pic 3 */
		.article__content__dot-items--sc3 .article__content__dot-items__link[rel-id="1"] { top:31%; left:30%; }
		.article__content__dot-items--sc3 .article__content__dot-items__link[rel-id="2"] { top:39%; left:45%; }
		.article__content__dot-items--sc3 .article__content__dot-items__link[rel-id="3"] { top:69%; left:42%; }
		.article__content__dot-items--sc3 .article__content__dot-items__link[rel-id="4"] { top:81.5%; left:46%; }
	/* smart casual pic 3 */
/* smart casual */

/* sport casual */
	.article__intro--sp { background-image:url("../img/sport-intro.jpg"); }

	.article__content__block--sp3 .article__num-block {
		padding-top:50px;
	}

	/* sport casual side */
		.article__side-block--sp1 { width:calc((100vw - 960px)/2 + 240px); height:690px; background:#0000ff; top:calc(100vh + 70px); right:0; }
		.article__side-block--sp2 { width:calc((100vw - 960px)/2 + 120px); height:465px; background:#009640; top:calc(100vh + 1100px); left:0; }
		.article__side-block--sp3 { width:calc((100vw - 960px)/2 + 120px); height:500px; background:#e6007e; top:calc(100vh + 2071px); right:0; }
		.article__side-block--sp4 { width:calc((100vw - 960px)/2 + 120px); height:485px; background:#00b9ee; top:calc(100vh + 3110px); left:0; }
	/* sport casual side */

	/* sport casual pic 1 */	
		.article__content__dot-items--sp1 .article__content__dot-items__link[rel-id="1"] { top:28%; left:56%; }
		.article__content__dot-items--sp1 .article__content__dot-items__link[rel-id="2"] { top:39%; left:56%; }
		.article__content__dot-items--sp1 .article__content__dot-items__link[rel-id="3"] { top:44%; left:43%; }
		.article__content__dot-items--sp1 .article__content__dot-items__link[rel-id="4"] { top:38.8%; left:38%; }
		.article__content__dot-items--sp1 .article__content__dot-items__link[rel-id="5"] { top:46%; left:53%; }
		.article__content__dot-items--sp1 .article__content__dot-items__link[rel-id="6"] { top:43%; left:61%; }
		.article__content__dot-items--sp1 .article__content__dot-items__link[rel-id="7"] { top:46%; left:0; }
	/* sport casual pic 1 */

	/* sport casual pic 2 */
		.article__content__dot-items--sp2 .article__content__dot-items__link[rel-id="1"] { top:36%; left:50%; }
		.article__content__dot-items--sp2 .article__content__dot-items__link[rel-id="2"] { top:55%; left:56%; }
		.article__content__dot-items--sp2 .article__content__dot-items__link[rel-id="3"] { top:69%; left:48%; }
		.article__content__dot-items--sp2 .article__content__dot-items__link[rel-id="4"] { top:62.5%; left:45%; }
		.article__content__dot-items--sp2 .article__content__dot-items__link[rel-id="5"] { top:81.5%; left:48%; }
		.article__content__dot-items--sp2 .article__content__dot-items__link[rel-id="6"] { top:61.5%; left:50%; }
	/* sport casual pic 2 */

	/* sport casual pic 3 */
		.article__content__dot-items--sp3 .article__content__dot-items__link[rel-id="1"] { top:13%; left:37%; }
		.article__content__dot-items--sp3 .article__content__dot-items__link[rel-id="2"] { top:48%; left:53%; }
		.article__content__dot-items--sp3 .article__content__dot-items__link[rel-id="3"] { top:55%; left:49%; }
		.article__content__dot-items--sp3 .article__content__dot-items__link[rel-id="4"] { top:45.5%; left:45%; }
		.article__content__dot-items--sp3 .article__content__dot-items__link[rel-id="5"] { top:40.5%; left:51%; }
	/* sport casual pic 3 */
/* sport casual */

/* denim */
	.article__intro--denim { background-image:url("../img/denim-intro.jpg"); }

	.article__content__block--denim2 {
		height: 560px;
	}

	.article__content__block--denim2 .article__content__info-block {
		padding-top:170px;
	}

	.article__content__block--denim3 .article__num-block {
		padding-top:40px;
		padding-bottom:40px;
	}

	.article__content__block--denim6 {
    	margin-top: -106px;
    	margin-bottom: 75px;
	}

	.article__content__block--denim6 .article__click-access {
		top:20px;
	}

	.article__content__block--denim6 .article__content__info-block {
		padding-top:70px;
	}

	/* denim side */
		.article__side-block--denim1 { width:calc((100vw - 960px)/2 + 240px); height:690px; background:#ed677a; top:calc(100vh + 70px); right:0; }
		.article__side-block--denim2 { width:calc((100vw - 960px)/2 + 120px); height:465px; background:#00b9ee; top:calc(100vh + 705px); left:0; }
		.article__side-block--denim3 { width:calc((100vw - 960px)/2 + 120px); height:500px; background:#f7b284; top:calc(100vh + 1655px); right:0; }
		.article__side-block--denim4 { width:calc((100vw - 960px)/2 + 120px); height:485px; background:#7f5122; top:calc(100vh + 2555px); left:0; }
	/* denim side */

	/* denim pic 1 */	
		.article__content__dot-items--denim1 .article__content__dot-items__link[rel-id="1"] { top: 18%; left:47%; }
		.article__content__dot-items--denim1 .article__content__dot-items__link[rel-id="2"] { top: 24%; left:51%; }
		.article__content__dot-items--denim1 .article__content__dot-items__link[rel-id="3"] { top: 16%; left:36%; }
		.article__content__dot-items--denim1 .article__content__dot-items__link[rel-id="4"] { top: 34.8%; left:52%; }
		.article__content__dot-items--denim1 .article__content__dot-items__link[rel-id="5"] { top: 46%; left:42%; }
		.article__content__dot-items--denim1 .article__content__dot-items__link[rel-id="6"] { top: 70%; left:50%; }
		.article__content__dot-items--denim1 .article__content__dot-items__link[rel-id="7"] { top: 77%; left:50%; }
		.article__content__dot-items--denim1 .article__content__dot-items__link[rel-id="8"] { top: 83%; left:48%; }
		.article__content__dot-items--denim1 .article__content__dot-items__link[rel-id="9"] { top: 29%; left:33%; }
		.article__content__dot-items--denim1 .article__content__dot-items__link[rel-id="10"] { top: 28.8%; left:53%; }
		.article__content__dot-items--denim1 .article__content__dot-items__link[rel-id="11"] { top: 48%; left:51%; }
		.article__content__dot-items--denim1 .article__content__dot-items__link[rel-id="12"] { top: 41%; left:53%; }
		.article__content__dot-items--denim1 .article__content__dot-items__link[rel-id="13"] { top: 18%; left:47%; }
	/* denim pic 1 */

	/* denim pic 2 */
		.article__content__dot-items--denim2 .article__content__dot-items__link[rel-id="1"] { top: 57%; left: 44%; }
		.article__content__dot-items--denim2 .article__content__dot-items__link[rel-id="2"] { top: 32%; left: 68%; }
	/* denim pic 2 */

	/* denim pic 3 */
		.article__content__dot-items--denim3 .article__content__dot-items__link[rel-id="1"] { top: 28%; left: 90%; }
		.article__content__dot-items--denim3 .article__content__dot-items__link[rel-id="2"] { top: 57%; left: 35%; }
	/* denim pic 3 */
/* denim */

/* rock */
	.article__intro--rock { background-image:url("../img/rock-intro.jpg"); }

	.article__content__block--rock2 {
		margin-top:-70px;
	}

	.article__content__block--rock2 .article__click-access {
		top:155px;
	}

	.article__content__block--rock2 .article__content__info-block {
    	padding-top: 200px;
	}

	.article__content__block--rock3 .article__num-block {
   		padding-top: 100px;
   		height: 365px;
	}

	.article__content__block--rock4 {
		margin-bottom:80px;
	}

	.article__content__block--rock5 .article__num-block {
		padding-top:50px;
		padding-bottom:50px;
	}

	/* rock side */
		.article__side-block--rock1 { width:calc((100vw - 960px)/2 + 240px); height:690px; background:#00b3a0; top:calc(100vh + 70px); right:0; }
		.article__side-block--rock2 { width:calc((100vw - 960px)/2 + 120px); height:465px; background:#000000; top:calc(100vh + 775px); left:0; }
		.article__side-block--rock3 { width:calc((100vw - 960px)/2 + 120px); height:890px; background:#ff0007; top:calc(100vh + 1555px); right:0; }
		.article__side-block--rock4 { width:calc((100vw - 960px)/2 + 120px); height:785px; background:#966a39; top:calc(100vh + 2855px); left:0; }
	/* rock side */

	/* rock pic 1 */	
		.article__content__dot-items--rock1 .article__content__dot-items__link[rel-id="1"] { top: 53%; left: 60%; }
		.article__content__dot-items--rock1 .article__content__dot-items__link[rel-id="2"] { top: 49%; left: 66%; }
		.article__content__dot-items--rock1 .article__content__dot-items__link[rel-id="3"] {top: 52%; left: 33%;}
	/* rock pic 1 */

	/* rock pic 2 */	
		.article__content__dot-items--rock2 .article__content__dot-items__link[rel-id="1"] { top:85%; left:79%; }
		.article__content__dot-items--rock2 .article__content__dot-items__link[rel-id="2"] { top:76%; left:80%; }
		.article__content__dot-items--rock2 .article__content__dot-items__link[rel-id="3"] { top:28%; left:27%; }
		.article__content__dot-items--rock2 .article__content__dot-items__link[rel-id="4"] { top:66%; left:44%; }
		.article__content__dot-items--rock2 .article__content__dot-items__link[rel-id="5"] { top:48%; left:46%; }
		.article__content__dot-items--rock2 .article__content__dot-items__link[rel-id="6"] { top:60%; left:38%; }
		.article__content__dot-items--rock2 .article__content__dot-items__link[rel-id="7"] { top:53%; left:38%; }
		.article__content__dot-items--rock2 .article__content__dot-items__link[rel-id="8"] { top:44%; left:20%; }
	/* rock pic 2 */	

	/* rock pic 3 */	
		.article__content__dot-items--rock3 .article__content__dot-items__link[rel-id="1"] { top:19%; left:47%; }
		.article__content__dot-items--rock3 .article__content__dot-items__link[rel-id="2"] { top:32%; left:50%; }
		.article__content__dot-items--rock3 .article__content__dot-items__link[rel-id="3"] { top:65%; left:5%; }
	/* rock pic 3 */

/* rock */

/* party */
	.article__intro--party { background-image:url("../img/party-intro.jpg"); }

	.article__content__block--party2 {
		margin-top: -56px;
	}

	.article__content__block--party2 .article__click-access {
		top:135px;
	}

	.article__content__block--party2 .article__content__info-block {
		padding-top:183px;
	}

	.article__content__block--party4 {
		margin-bottom:0;
	}

	.article__content__block--party5 .article__num-block {
		padding-top:50px;
		padding-bottom:50px;
	}

	/* party side */
		.article__side-block--party1 { width:calc((100vw - 960px)/2 + 240px); height:690px; background:#ffb312; top:calc(100vh + 70px); right:0; }
		.article__side-block--party2 { width:calc((100vw - 960px)/2 + 120px); height:465px; background:#f39ca2; top:calc(100vh + 775px); left:0; }
		.article__side-block--party3 { width:calc((100vw - 960px)/2 + 120px); height:545px; background:#707070; top:calc(100vh + 1579px); right:0; }
		.article__side-block--party4 { width:calc((100vw - 960px)/2 + 120px); height:500px; background:#f7b284; top:calc(100vh + 2555px); left:0; }
	/* party side */

	/* party pic 1 */	
		.article__content__dot-items--party1 .article__content__dot-items__link[rel-id="1"] { top: 16%; left: 28%; }
		.article__content__dot-items--party1 .article__content__dot-items__link[rel-id="2"] { top: 19%; left: 63%; }
		.article__content__dot-items--party1 .article__content__dot-items__link[rel-id="3"] { top: 38%; left: 60%; }
		.article__content__dot-items--party1 .article__content__dot-items__link[rel-id="4"] { top: 51%; left: 39%; }
		.article__content__dot-items--party1 .article__content__dot-items__link[rel-id="5"] { top: 57%; left: 44%; }
		.article__content__dot-items--party1 .article__content__dot-items__link[rel-id="6"] { top: 60%; left: 50%; }
		.article__content__dot-items--party1 .article__content__dot-items__link[rel-id="7"] { top: 57%; left: 55%; }
		.article__content__dot-items--party1 .article__content__dot-items__link[rel-id="8"] { top: 51%; left: 60%; }
	/* party pic 1 */

	/* party pic 2 */
		.article__content__dot-items--party2 .article__content__dot-items__link[rel-id="1"] { top:38%; left:40%; }
		.article__content__dot-items--party2 .article__content__dot-items__link[rel-id="2"] { top:74%; left:58%; }
		.article__content__dot-items--party2 .article__content__dot-items__link[rel-id="3"] { top:92%; left:56%; }
	/* party pic 2 */

	/* party pic 3 */
		.article__content__dot-items--party3 .article__content__dot-items__link[rel-id="1"] { top:29%; left:69%; }
		.article__content__dot-items--party3 .article__content__dot-items__link[rel-id="2"] { top:48%; left:58%; }
		.article__content__dot-items--party3 .article__content__dot-items__link[rel-id="3"] { top:69%; left:27%; }
	/* party pic 3 */

/* party */


/* article num */
	.article__num-block {
		padding-left:25px;
		padding-right:25px;
		padding-top:110px;
		height:370px;
		opacity:0;
		transition:0.4s ease all;
	}
	
	.article__num-block.active {
		opacity:1;
	}

	.article__num-block__num {
		width:60px;
		height:60px;
		border-radius:50%;
		display:block;
		position:relative;
		background:#000;
		color:#fff;
		font-size:48px;
		line-height:1em;
		padding-top:7px;
		text-align:center;
		margin:0 auto 20px;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
	}

	.article__num-block__text {
		text-align:center;
		line-height:1.8em;
		font-size:16px;
		text-align:center;
		font-family: 'FuturaFuturisC';
	}
/* article num */

/* article mix */
	.article__mix {
		width:100%;
		height:596px;
		background:#f8f8f8 url("../img/article-mix-bg.png") 50% 50% no-repeat;
		background-size:cover;
		position:relative;
		display:flex;
		align-items:center;
		justify-content:center;
	}

	.article__mix__bg {
		width:100%;
		height:100%;
		display:block;
		position:absolute;
		top:0;
		left:0;
		background:url("../img/mix-bg-filled.png") 50% 50% no-repeat;
		background-size:cover;
		opacity:0;
		transition:0.5s ease all;
	}

	.article__mix__content {
		display:block;
		position:relative;
	}

	.article__mix__title {
		font-size:100px;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		margin:0 0 0;
		line-height:1.3em;
		text-align:center;
		font-weight:400;
		transition:0.5s ease all;
	}

	.article__mix__desc {
		font-size:30px;
		font-family: 'FuturaFuturisC';
		margin:0 auto 50px;
		text-align:center;
		transition:0.5s ease all;
		max-width:800px;
	}

	.article__mix__content .black__btn {
		margin:0 auto;
	}

	.article__mix.active .article__mix__title,
	.article__mix.active .article__mix__desc { color:#fff; }
	.article__mix.active .article__mix__bg { opacity:1; }

	.article__mix:hover .article__mix__title,
	.article__mix:hover .article__mix__desc { color:#fff; }
	.article__mix:hover .article__mix__bg { opacity:1; }
/* article mix */

/* map */
	.map-wrapper {
		width:100%;
		height:100vh;
		display:block;
		position:absolute;
		top:0;
		left:0;
		background:#f8f8f8;
	}

	.map {
		display:block;
		position:absolute;
		top:110px;
		bottom:65px;
		left:65px;
		right:65px;
		background:#fff;
		z-index:10;
		overflow:hidden;
	}

	.map__list {
		padding:25px;
		width:50%;
		height:100%;
		position:relative;
	}

	.map__list__title {
		text-align:center;
		font-size:30px;
		text-transform:uppercase;
		font-weight:400;
		margin-bottom:30px;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
	}

	.map__list__list-wrap {
		width:100%;
		height:60vh;
		position:relative;
		overflow:hidden;
	}

	.map__list__list {
		margin:0;
		padding:0 35px 0 65px;
		list-style-type:none;
	}

	.map__list__item {
		margin:0;
		padding:20px 0;
		position:relative;
	}

	.map__list__item__bubble {
		display:block;
		position:absolute;
		top:25px;
		left:-64px;
	}

	.map__list__item__title {
		font-size:24px;
		margin-bottom:5px;
		font-family: 'FuturaFuturisC';
		font-weight:400;
	}

	.map__list__item__type {
		font-size:14px;
		font-family: 'FuturaFuturisC';
		margin-bottom:5px;
	}

	.map__list__item__addr {
		font-size:14px;
		font-family: 'FuturaFuturisC';
		margin-bottom:10px;
		padding-bottom:10px;
		line-height:1.7em;
		border-bottom:1px solid #bfbfbf;
	}

	.map__list__item__info {
		font-size:14px;
		font-family: 'FuturaFuturisC';
		margin-bottom:5px;
		line-height:1.7em;
	}

	.ps__rail-x {
		display:none;
	}

	.ps__rail-y {
		display:block;
		position:absolute;
		top:0;
		right:10px;
		background:#000;
		width:1px;
	}

	.ps__thumb-y {
		width:11px;
		background:#000;
		border-radius:11px;
		margin-left:-5px;
		display:block;
		position:absolute;
	}

	.map__map {
		display:block;
		position:absolute;
		width:50%;
		height:100%;
		top:0;
		right:0;
		background:#999;
	}

	#map {
		width:100%;
		height:100%;
		display:block;
		position:absolute;
	}

	#map [class*="ymaps-2"][class*="-ground-pane"] {
	    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	    /* Firefox 3.5+ */
	    -webkit-filter: grayscale(100%);
	    /* Chrome 19+ & Safari 6+ */
	}

/* map */

/* game intro popup */
	.game__scr1__intro-popup {
		width:100%;
		max-width:825px;
		padding:30px;
		background:#fff;
		z-index:20;
		display:block;
		position:absolute;
		border-radius:20px;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		box-shadow:0 0 30px #fff, 0 0 70px #fff;
	}

	.game__scr1__intro-popup__title {
		text-align:center;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		font-size:60px;
		font-weight:400;
		/*margin-bottom:30px;*/
	}

	.game__scr1__intro-popup__subtitle {
		text-align:center;
		font-family:"Vogue Highline Serif","Times New Roman",serif;
		font-size:40px;
		font-weight:400;
		margin-bottom:30px;
	}

	.game__scr1__intro-popup > p {
		font-family: 'FuturaFuturisC';
		font-size:16px;
		line-height:1.7em;
		text-align:center;
	}

	.game__scr1__intro-popup p a {
		color:#000;
	}

	.game__scr1__intro-popup__nums {
		width:100%;
	}

	.game__scr1__intro-popup__num-block  {
		display:inline-block;
		vertical-align:top;
		width:32.333333%;
		text-align:center;
	}

	.game__scr1__intro-popup__num-block span {
		width: 90px;
	    height: 90px;
	    display: block;
	    margin:0 auto 20px;
	    border-radius: 50%;
	    background: #000;
	    color:#fff;
	    text-align: center;
	    font-size: 72px;
	    padding-top: 11px;
	    font-family: "Vogue Highline Serif","Times New Roman",serif;
	    line-height: 1em;
	}

	.game__scr1__intro-popup__num-block p {
		font-family: 'FuturaFuturisC';
		font-size:16px;
		line-height:1.7em;
	}

	.game__scr1__intro-popup .black__btn {
		margin:20px auto 0;
	}

	.game__scr1__intro-popup__rules {
		font-family: 'FuturaFuturisC';
		font-size:14px;
		text-align:center;
		display:block;
		color:#000;
		margin:20px 0;
	}

/* game intro popup */