@font-face {
  font-family: 'MuseoSansCyrl';
  src: local('MuseoSansCyrl_2.otf'), 
       url('./fonts/MuseoSansCyrl_2.otf') format('opentype');
       font-weight:700;
}
@font-face {
  font-family: 'MuseoSansCyrl';
  src: local('MuseoSansCyrl_3.otf'), 
       url('./fonts/MuseoSansCyrl_3.otf') format('opentype');
       font-weight:900;
}
@font-face {
  font-family: 'MuseoSansCyrl';
  src: local('MuseoSansCyrl-100.otf'), 
       url('./fonts/MuseoSansCyrl-100.otf') format('opentype');
       font-weight:100;
}
@font-face {
  font-family: 'MuseoSansCyrl';
  src: local('MuseoSansCyrl-300.otf'), 
       url('./fonts/MuseoSansCyrl-300.otf') format('opentype');
  font-weight:300;
}
@font-face {
  font-family: 'MuseoSansCyrl';
  src: local('MuseoSansCyrl-500.otf'), 
       url('./fonts/MuseoSansCyrl-500.otf') format('opentype');
       font-weight:500;
}
@font-face {
  font-family: 'Museosanscyrl';
  src: local('Museosanscyrl.otf'), 
       url('./fonts/Museosanscyrl.otf') format('opentype');
       font-weight:normal;
}

@media screen and (min-width:1023px) {
	.mobile {
		display:none !important;
	}
}

@media screen and (max-width:1024px) {
	.desktop {
		display:none !important;
	}

	.mobile {
		display:block !important;
	}

	* {
		box-sizing:border-box;
		font-family:"Museosanscyrl";
	}

	/* hero */
		.hero {
			width:100%;
			height:100vh;
			display:block;
			position:relative;
			overflow:hidden;
			background:url("./mobile/bg.jpg") 50% 100% no-repeat;
			background-size:cover;	
		}

		.hero__logos {
			opacity:0;
			animation:1s op1 linear;
			animation-fill-mode: forwards;
			animation-delay:0.5s;

			position:relative;
			z-index:5;
		}

		.hero__logos .logo-buro {
			background: url(./svg/logo-buro.svg) center/contain no-repeat;
			font-size: 0;
			width: 55px;
			height: 45px;
			display:block;
			position:absolute;
			top:18px;
			left:23px;
		}

		.hero__logos .logo-adidas {
			background: url(./svg/logo-adidas.svg) center/contain no-repeat;
			font-size: 0;
			width: 45px;
			height: 30px;
			display:block;
			position:absolute;
			top:18px;
			right:23px;
		}

		.hero__pic {
			max-width:85%;
			max-height:calc(100vh - 175px);
			position:absolute;
			left:50%;
			transform:translate(-50%);
			bottom:0;
			z-index:5;
			
			opacity:0;
			animation:1s op1 linear;
			animation-fill-mode: forwards;
			animation-delay:0.9s;
		}

		.hero--mari .hero__pic {
			max-width:95%;
		}

		.hero--sasha .hero__pic {
			max-width: 65%;
		}

		.hero__stripes {
			display:block;
			position:absolute;
			height:110%;
			opacity:0;
			z-index: 1;
		}

		.hero__stripes--right {
			top:-20px;
			left:50%;
			transform:translate(15%);
    		animation:anim_stripe_right 2.5s ease;
    		animation-fill-mode: forwards;
    		animation-delay:0.5s;
		}

		.hero__stripes--left {
			bottom:-20px;
			right: 50%;
    		transform: translate(5%);
    		animation:anim_stripe_left 2.5s ease;
    		animation-fill-mode: forwards;
    		animation-delay:0.5s;
		}

		@keyframes anim_stripe_left {
			0% 	 { transform: translate(5%); opacity:0; }
			100% { transform: translate(60%); opacity:1; }
		}

		@keyframes anim_stripe_right {
			0% 	 { transform:translate(15%); opacity:0; }
			100% { transform:translate(-35%); opacity:1; }
		}

		@keyframes op1 {
			0% 	 { opacity:0; }
			100% { opacity:1; }
		}

		.hero__list {
			display:flex;
			align-items:center;
			justify-content:space-between;
			padding:95px 20px 0;
			position:relative;
			margin:0 auto;
			width:320px;
			z-index:5;
			
			opacity:0;
			animation:1s op1 linear;
			animation-fill-mode: forwards;
			animation-delay:0.8s;
		}

		.hero__list__item {
			font-size:9px;
			color:#fff;
			font-weight:300;
			text-decoration:none;
		}

		.hero__list__item span {
			font-weight:900;
		}

		.hero__list__separator {
			width:63px;
			height:18px;
			background:url("./mobile/hero_sep.png") 50% 50% no-repeat;
			background-size:contain;
		}

		.hero__title {
			text-align:center;
			font-size:15px;
			margin-top:20px;
			color:#fff;
			font-weight:300;
			z-index:5;

			opacity:0;
			animation:1s op1 linear;
			animation-fill-mode: forwards;
			animation-delay:0.8s;
		}

		.hero__title span {
			font-weight:900;
		}

		.hero__footer {
			position:absolute;
			bottom:20px;
			left:50%;
			transform:translate(-50%);
			z-index:5;


			opacity:0;
			animation:1s op1 linear;
			animation-fill-mode: forwards;
			animation-delay:1.2s;
		}

		.hero__desc {
			display:block;
			position:absolute;
			bottom:60px;
			font-weight:300;
			color:#fff;
			text-align:center;
			text-transform:uppercase;
			font-size:10px;
			padding:0 30px;
			z-index:5;
			left:50%;
			transform:translate(-50%);


			opacity:0;
			animation:1s op1 linear;
			animation-fill-mode: forwards;
			animation-delay:1.2s;
		}

		.hero__desc p {
			font-weight:900;
		}

		.hero__desc__arrow {
			width:34px;
			height:11px;
			display:block;
			position:relative;
			margin:15px auto 0;

			opacity:0;
			animation:1s op1 linear;
			animation-fill-mode: forwards;
			animation-delay:1.3s;
		}
	/* hero */

	/* shares */
		.socials-link {
			width: 70px;
			height: 15px;
			font-size: 0;
			display:block;
		}
		.vk {
			background: url(./svg/icon-vk.svg) center/contain no-repeat;
		}
		.fb {
			background: url(./svg/icon-facebook.svg) center/contain no-repeat;
		}
		.tw {
			background: url(./svg/icon-twitter.svg) center/contain no-repeat;
		}
		.tg {
			background: url(./svg/icon-telegram.svg) center/contain no-repeat;
		}
		.vk-dark {
			background: url(./svg/icon-vk-dark.svg) center/contain no-repeat;
		}
		.fb-dark {
			background: url(./svg/icon-facebook-dark.svg) center/contain no-repeat;
		}
		.tw-dark {
			background: url(./svg/icon-twitter-dark.svg) center/contain no-repeat;
		}
		.tg-dark {
			background: url(./svg/icon-telegram-dark.svg) center/contain no-repeat;
		}
	/* shares */

	.section {
		width:100%;
		padding:24px;
		display:block;
		position:relative;
	}

	.section__text.mt0 {
		margin-top:0;
	}

	.section.section--pb0 {
		padding-bottom:0;
	}

	.section__title {
		font-size:15px;
		font-weight:100;
		text-align:center;
		text-transform:uppercase;
		margin-top:35px;
	}

	.section__title span {
		font-weight:900;
	}
	
	.section__subtitle {
		text-align:center;
		text-transform:uppercase;
		font-weight:300;
		font-size:10px;
		margin:23px 0;
	}

	.section__text {
		font-weight:100;
		font-size:12px;
		line-height:18px;
		margin-top:50px;
		margin-bottom:50px;
	}

	.section > .section__text:first-child {
		margin-top:0;
	}

	.section__video {
		width:calc(100% + 48px);
		/*height:56.8vw;*/
		margin-left:-24px;
		/*background:#686e6c;*/
	}

	.section__video video {
		display:block;
		position:relative;
		width:100%;
	}


	.section__image {
		display:block;
		position:relative;
		margin-left:auto;
		margin-right:auto;
	}

	.section__image--thin {
		max-width:78.125%;
	}

	.section__image--full {
		width:calc(100% + 48px);
		margin-left:-24px;
	}

	.section__image--full-wp {
		width:100%;
	}

	.section blockquote {
		width:100%;
		position:relative;
		font-weight:900;
		text-transform:uppercase;
		font-size:20px;
		line-height:30px;
		margin:0 0 50px;
	}

	.section blockquote > span {
		width: 43px;
    	height: 22px;
		background:url("./mobile/sep.png") 50% 50% no-repeat;
		background-size:contain;
		display:inline-block;
		vertical-align:top;
		margin-left:6px;
    	margin-top: 2px;
	}

	.section__lined-block {
		width:calc(100% + 48px);
		background:url("./mobile/lined-bg.png") 50% 0 no-repeat;
		background-size:cover;
		padding:50px 24px;
		margin-left:-24px;
		margin-bottom:-30px;
	}

	.section__lined-block .section__text {
		margin:0;
	}

	.section__lined-block + * {
		margin-top:50px;
	}

	.section__lined-gif {
		width:calc(100% + 48px);
		background:url("./mobile/gif-bg.jpg") 50% 0 no-repeat;
		background-size:contain;
		margin-left:-24px;
	}

	.section__lined-gif blockquote {
		padding:0 24px;
	}

	.section__gif {
		display:block;
		position:relative;
		margin:0 auto 38px;
		width:66.6%;
	}

	/* footer */
		.page-footer {
		  padding-top:20px;
		  padding-bottom:20px;
		  color: #9b9b9b;
		  font-weight:100;
		  font-size: 24px;
		  background: #fafafa;
		}

		.page-footer .footer-text {
		  margin-bottom:20px;
		  letter-spacing: normal;
		  font-weight:900;
		  font-size:10px;
		}

		.page-footer .bottom-nav {
		  width:100%;
		  max-width:220px;
		  background: url(./img/backslash.png) 100px center no-repeat, url(./img/backslash-opacity25.png) 40px center no-repeat, url(./img/backslash-opacity25.png) 80px center no-repeat;
		  display:flex;
		  align-items:center;
		  justify-content:space-between;
		}

		.page-footer .bottom-nav .nav-link {
		  color: inherit;
		  letter-spacing: normal;
		  font-size:7px;
		  font-weight:100;
		}

		.page-footer .bottom-nav .nav-link .strong {
			font-weight:900;
		}

		.page-footer .bottom-nav .nav-link-separator {
			width: 37px;
	    	height: 16px;
			background:url("./mobile/sep-dark.png") 50% 50% no-repeat;
			background-size:contain;
			display:inline-block;
			vertical-align:middle;
		}

		.footer-adidas {
		  color: black;
		  padding-top: 30px;
		  max-width: 160px;
		  font-size: 10px;
		  line-height: 13px;
		  font-weight:100;
		}

		.footer-adidas .strong {
			font-weight:700;
		}

		.footer-adidas-link {
		  font-size: 15px;
		  color: inherit;
		  display: block;
		  padding: 25px;
		}

		.footer-adidas-logo {
		  background: url(./svg/logo-adidas.svg) center/contain no-repeat;
		  font-size: 0;
		  width: 100px;
		  height: 70px;
		  margin-bottom:55px;
		}
	/* footer */

}