html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;
vertical-align:baseline;}
/*HTML5 display-roleresetforolderbrowsers*/
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
*{
	outline:none;
}
@font-face {
	font-family: 'Gilroy-Regular';
	src: url('https://www.stb.ua/i-budut-ludi/font/Gilroy-Regular.eot'); /* IE9 Compat Modes */
	src: url('https://www.stb.ua/i-budut-ludi/font/Gilroy-Regular.woff2') format('woff2'), /* Super Modern Browsers */
		 url('https://www.stb.ua/i-budut-ludi/font/Gilroy-Regular.woff') format('woff'), /* Pretty Modern Browsers */
    	 url('https://www.stb.ua/i-budut-ludi/font/Gilroy-Regular.ttf')  format('truetype');
  	font-display: swap;
}

@font-face {
	font-family: 'Gilroy-RegularItalic';
	src: url('https://www.stb.ua/i-budut-ludi/font/Gilroy-RegularItalic.eot'); /* IE9 Compat Modes */
	src: url('https://www.stb.ua/i-budut-ludi/font/Gilroy-RegularItalic.woff2') format('woff2'), /* Super Modern Browsers */
		 url('https://www.stb.ua/i-budut-ludi/font/Gilroy-RegularItalic.woff') format('woff'), /* Pretty Modern Browsers */
    	 url('https://www.stb.ua/i-budut-ludi/font/Gilroy-RegularItalic.ttf')  format('truetype');
  	font-display: swap;
}

@font-face {
	font-family: 'Intro Head R';
	src: url('https://www.stb.ua/i-budut-ludi/font/Intro_Head_R_Base.otf');
  	font-display: swap;
}

:root {
	--main-black: #000;
	--main-blue: #242A33;
	--main-grey: #C4C4C4;
	--main-gold: #D8B68D;
	--main-dark-blue: #0E182C;
	--main-deep-blue: #2A3344;
}

/* TRANSITIONS */

.fade-enter-active, .fade-leave-active {
  transition: opacity 2.75s ease;
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}

/* SCROLL */
  	::-webkit-scrollbar {
		width: .625vw;
    }

    ::-webkit-scrollbar-thumb {
    	background-color: var(--main-dark-blue);
    	background-clip: padding-box;
    	border: .05vw solid var(--main-gold);
		border-radius: .52vw;
    }

    ::-webkit-scrollbar-track {
      background-color: var(--main-blue);
    }
    /* Buttons */
    ::-webkit-scrollbar-button:single-button {
      background-color: var(--main-dark-blue);
      display: block;
      border-style: solid;
      height: .625vw;
      width: .625vw;
    }
    /* Up */
    ::-webkit-scrollbar-button:single-button:vertical:decrement {
    	border-width: 0 .3125vw .416vw .3125vw;
		border-color: transparent transparent var(--main-gold) transparent;
    }
    /* Down */
    ::-webkit-scrollbar-button:single-button:vertical:increment {
    	border-width: .416vw .3125vw 0 .3125vw;
    	border-color: var(--main-gold) transparent transparent transparent;
    }
	
    ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    	border-color: transparent transparent rgb(216 182 141 / .8) transparent;
    }
	::-webkit-scrollbar-button:single-button:vertical:increment:hover{
		border-color: rgb(216 182 141 / .8) transparent transparent transparent;
	}

body{
    font-family: 'Gilroy-Regular';
    background-color: var(--main-black);
    overflow-y: scroll;
}
header .mobile.icon,
.slider.mobile,
.centered_absolute_mobile,
body>img{
	display: none;
}

.lazyLoadVideo__wrap .lazyLoadVideo.loaded,
.centered_absolute{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.centered_absolute{
    width: 100%;
}
.lazyLoadVideo__wrap{
	z-index: 0;
}
.lazyLoadVideo__wrap .lazyLoadVideo{
	opacity: 0;
	z-index: -1000;
	transition: opacity .4s;
}

.lazyLoadVideo.loaded {
    width: calc(calc(100vh / 9) * 16);
    min-width: 100%;
    opacity: 1;
    z-index: 0;
    min-height: 100vh;
}
.lazyLoadVideo__wrap:before{
    content: '';
    background-image: url('https://www.stb.ua/i-budut-ludi/images/grid.png');
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
}



.divider {
	flex: 1;
} 
 
/* HEADER */
header {
    position: absolute;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    padding: 3.33vh 8.4375vw 0;
    width: calc(100% - 16.875vw);
    z-index: 30;
}

header div.menu {
    flex-flow: row nowrap;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.menu a{
	position: relative;
    color: var(--main-gold);
    text-decoration: none;
    font-size: .7vw;
    line-height: 1.2;
    margin: 0 0 0 1.5625vw;
	font-family: 'Gilroy-Regular';
}

.socials a{
	margin: 0 0 0 1.45vw;
}
.socials a:first-of-type,
.menu a:first-of-type{
	margin: 0;
}

.socials a:nth-of-type(1) img{
	width: .4vw;
}
.socials a:nth-of-type(2) img{
	width: .83vw;
}
.socials a:nth-of-type(3) img{
	width: 1.04vw;
}





header div.menu a[href="/i-budut-ludi/heroes"].router-link-active:before,
header div.menu a[href="/i-budut-ludi/timeline"].router-link-active:before,
header div.menu a.router-link-exact-active:before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.18vh;
    width: 130%;
    height: .416vw;
    transform: translateX(-50%);
    background-color: var(--main-dark-blue);
    z-index: -1;
}


header div.logo img{
	margin: 0 auto;
    display: block;
	
}
header div.logo img,
.footer .logo img{
	width: 9.375vw;
}

#app {
    position: relative;
    width: 100%;
    min-height: 100vh;
}


/* HOME */
.heroes__wrap,
.director__wrap,
.timeline__wrap,
.news__wrap,
.home__wrap{
	position: relative;
/*    width: calc(100% - 16.875vw);*/
	padding: 16vh 8.4375vw 0;
    min-height: calc(100vh - 16vh);
    overflow: hidden;
	background-color: var(--main-blue);
}
.timeline__wrap {
    padding: 16vh 8.4375vw 12.25vh;
    min-height: unset;
    z-index: 0;
}
.heroes__wrap {
    min-height: 135vh;
}
.heroes__wrap.single{
    min-height: unset;
}


p.breadcrumbs {
    font-family: inherit;
    font-style: normal;
    font-weight: 300;
    font-size: .625vw;
    line-height: 1.2;
    color: var(--main-gold);
    z-index: 10;
}
p.breadcrumbs span,
p.breadcrumbs a{
	text-decoration: none;
	color: var(--main-grey);
}
p.breadcrumbs span.name{
    color: var(--main-gold);
}

.footer{
	background-color: #111D25;
    padding: 5.92vh 0 4.62vh;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.footer .socials{
	 margin: 3.51vh 0 2.7vh;
}
.footer .menu a{
	font-style: normal;
	font-weight: bold;
}
footer .dev,
.footer .heroes_list a,
.footer .copyright p,
.footer .support p{
	font-family: 'Gilroy-Regular';
	font-weight: bold;
	font-size: .72vw;
	line-height: 1;
	text-align: center;
    color: var(--main-gold);
}

.footer .support_list{
	margin: 1.11vh 0 4.44vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.footer .support_list img{
	margin: 0 auto;
	display: block;
}
.footer .heroes_list{
	margin: 2.22vh 0 4.44vh;
	display: flex;
	flex-flow: row nowrap;
}

.footer .heroes_list a{
    margin: 0 .57vw;
    line-height: 1.3;
    text-decoration: none;
    font-weight: 100;
}
.footer .copyright p {
    font-weight: 500;
    line-height: 1.5;
    color: rgba(196, 196, 196, .3);
    text-align: right;
    margin: 0 50px;
}

footer .dev a {
    text-decoration: none;
    font-weight: bold;
    color: rgba(196, 196, 196, .3);
}
.last_block{
    display: flex;
    flex-flow: row nowrap;
}

.support_list a:nth-of-type(1) img{
	width: 3.85vw;
    margin: 0 .625vw 0 auto;
}
.support_list a:nth-of-type(2) img{
	width: 4.375vw;
}
.support_list a:nth-of-type(3) img{
	width: 14.79vw;
	 margin: 0 auto 0 .625vw;
}



/* DIRECTOR */

.director__content_reverse,
.director__content{
	display: grid;
	grid-template-columns: 1fr 40.625vw;
	column-gap: 3.125vw;
	margin: 0 0 6.01vh;
}
.director__content.reverse {
    grid-template-columns: 40.625vw 1fr;
    margin: 19vh 0 7.22vh;
}
.director__book p,
.director__content .text,
.director__content .title{
	font-family: 'Gilroy-Regular';
	font-size: .9375vw;
	line-height: 1.2;
	letter-spacing: .05em;
	color: var(--main-grey);
}
.director__book p,
.director__content .text{
	font-size: .9375vw;
	line-height: 1.4;	
}
.director__content .text b{
	font-weight: bold;
}
.director__content.singleHero .mainText em,
.hero p.hero__description em,
.director__content .text em{
	font-family: 'Gilroy-RegularItalic';
}

.director__content .text h2{
	margin: 0 0 4.44vh;
}

.director__content .title{
	margin: 0 0 1.85vh;
}


.director__content .text h2{
	font-family: 'Intro Head R';
	font-size: 1.875vw;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--main-gold);
}
.video {
	position: relative;
  	overflow: hidden;
  	width: 100%;
  	padding-top: 56.25%;
}
.video iframe{
  	position: absolute;
  	top: 0;
  	left: 0;
  	bottom: 0;
  	right: 0;
  	width: 100%;
	height: 100%;
}

.director__content p.breadcrumbs{
	margin: 0 0 2.5vh;
}

.director__content.reverse .image.static img{
	width: 38.95vw;
	height: auto;
}

.slider__img__wrap{
    -webkit-mask: url(https://www.stb.ua/i-budut-ludi/images/svg/FRAME-380x248.svg);
    -webkit-mask-size: auto;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    margin: 0 .13vw;
	min-height: 26.5vh;
    background-size: cover;
}
.slick-slider{
	position: relative;
}
.slick-slider button{
	padding: 0;
	cursor: pointer;
	appearance: none;
    border: none;
	color: transparent;
}

.slick-arrow{
	position: absolute;
    background-color: rgba(14, 24, 44, .8);
    width: 3.125vw;
    height: 3.125vw;
    right: 0;
	transform: translateY(-50%) translateX(50%);
    top: 50%;
    padding: 0;
	z-index: 10;
}
.slick-arrow:before {
	content: '';
    width: 100%;
    display: block;
    height: 100%;
    background-image: url(https://www.stb.ua/i-budut-ludi/images/svg/arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 66%;
}
.slick-prev.slick-arrow {
    right: unset;
    left: 0;
    transform: translateY(-50%) translateX(-50%) rotate(180deg);
}

.slick-dots{
    display: flex;
    position: absolute;
    bottom: -3.51vh;
    left: 0;
    width: 100%;
    justify-content: center;
    transform: translateY(100%);
    align-items: flex-end;
}
.slick-slider .slick-dots button{
	margin: 0 .26vw;
	background: unset;
	font-family: 'Intro Head R';
	font-size: 1.25vw;
	line-height: .8;
	text-align: center;
	text-transform: uppercase;
	color: var(--main-gold);
}
.slick-slider .slick-dots .slick-active button{
    font-size: 2.5vw;
	position: relative;
    color: var(--main-grey);
	margin: 0 .83vw;
}
.slick-slider .slick-dots .slick-active button:before{
    content: '';
    width: 1.14vw;
    height: 1.48vh;
    background-color: var(--main-dark-blue);
    position: absolute;
    left: 50%;
    z-index: -1;
    bottom: -0.47vh;
    transform: translateX(-50%);
}
.image{
	-webkit-mask: url(https://www.stb.ua/i-budut-ludi/images/svg/FRAME-380x248.svg);
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.about_photo.last{
	margin: 0 0 12vh;
}

/* HERO */
.hero{
	position: absolute;
	padding: 0 0 0 1.3vw;
}


.lazyload{
	opacity: 0;
	transition: opacity .4s;
	width: 12.65vw;
	height: 29.25vh;
	background-color: #000;
}
.lazyload.loaded {
	opacity: 1;
	background-color: unset;
	width: auto;
	height: auto;
}
.hero{
	transition: filter .4s;
}
.hero p.hero__name {
    font-family: 'Intro Head R';
    font-size: 1.14vw;
    line-height: 1.18;
    text-align: center;
    color: var(--main-gold);
    width: 9.27vw;
	height: 3.14vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -2.5vh 0 4.44vh .98vw;
    position: relative;
    z-index: 1;
	transition: color .4s;
}
.hero__name:before{
	content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--main-dark-blue);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
	transition: background-color .4s;
}
.hero:hover .hero__name{
	color: var(--main-dark-blue);
}
.hero:hover .hero__name:before{
	background-color: var(--main-grey);
}
.hero p.hero__description {
	font-family: 'Gilroy-Regular';
	font-weight: 300;
	font-size: .83vw;
	line-height: 1.125;
	color: var(--main-grey);
}


.hero[data-num=hero_1]{
	width: 17.13vw;
	left: 9.84vw;
	top: 23.61vh;	
}
.hero[data-num=hero_1] img{
	width: 12.65625vw;
	height: auto;
}
.hero[data-num=hero_2] {
    padding: 0 0 0 .83vw;
    width: 16.66vw;
    left: 23.75vw;
    top: 16.57vh;
    display: flex;
    flex-flow: column-reverse;
    justify-content: space-between;
}

.hero[data-num=hero_2] p.hero__name{
	margin-bottom: 0;
}
.hero[data-num=hero_2] p.hero__description {
    margin: 0 0 2.77vh .2vw;
}
.hero[data-num=hero_2] img{
	width: 11.97vw;
	height: auto;
}
.hero[data-num=hero_3] {
    width: 17.03vw;
	left: 35.7vw;
    top: 22.68vh;
    padding: 0 0 0 .57vw;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}
.hero[data-num=hero_3] p.hero__name {
    margin: -2.5vh 0 2.59vh 2.76vw;
}

.hero[data-num=hero_3] p.hero__description {
    margin: 0 0 0 1.19vw;
}

.hero[data-num=hero_3] img{
	width: 13.69vw;
	height: auto;
}


.hero[data-num=hero_4] {
    width: 17.39vw;
    left: 48.8125vw;
    top: 15.27vh;
    padding: 0;
    display: flex;
    flex-flow: column-reverse;
    justify-content: space-between;
}
.hero[data-num=hero_4] p.hero__name {
    margin: -4.25vh 0 0 3.33vw;
}
.hero[data-num=hero_4] p.hero__description {
    margin: 0 0 2.59vh 1.61vw;
}

.hero[data-num=hero_4] img{
	width: 15.26vw;
	height: auto;
}


.hero[data-num=hero_5] {
	width: 17.03125vw;
    left: 62.9375vw;
	top: 27.87vh;
    padding: 0;
    display: flex;
    flex-flow: column-reverse;
    justify-content: space-between;
}

.hero[data-num=hero_5] p.hero__name {
    margin: -4.25vh 0 0 3.33vw;
}
.hero[data-num=hero_5] p.hero__description {
    margin: 0 0 2.59vh 1.92vw;
}
.hero[data-num=hero_5] img{
	width: 14.89vw;
	height: auto;
}


.hero[data-num=hero_6] {
	width: 16.66vw;
    left: 76.89vw;
    top: 33.27vh;
    padding: 0;
}
.hero[data-num=hero_6] p.hero__name {
    margin: -2.77vh 0 0 5.52vw;
}
.hero[data-num=hero_6] p.hero__description {
    margin: 4.16vh 0 0 .83vw;
}
.hero[data-num=hero_6] img{
	width: 12.65625vw;
	height: auto;
	margin: 0 0 0 3.95vw;
}


.hero[data-num=hero_7] {
    width: 18.33vw;
    left: 7.08vw;
    top: 95.05vh;
}
.hero[data-num=hero_7] p.hero__name {
	margin: -5vh 0 4.07vh 3.125vw;
}
.hero[data-num=hero_7] p.hero__description {
    margin: 0 0 0 2.6vw;
}   
.hero[data-num=hero_7] img{
	width: 15.67vw;
	height: auto;
}


.hero[data-num=hero_8] {
    width: 16.45vw;
	left: 16.66vw;
    top: 75.85vh;
    padding: 0;
    display: flex;
    flex-flow: column-reverse;
    justify-content: space-between;
	align-items: flex-end;
}
.hero[data-num=hero_8] p.hero__name {
    margin: -3.33vh 0 0 3.22vw;
}
.hero[data-num=hero_8] p.hero__description {
    margin: 0 0 3.88vh .83vw;
}

.hero[data-num=hero_8] img{
	width: 13.69vw;
	height: auto;
}


.hero[data-num=hero_9] {
    width: 19.47vw;
    left: 32.23vw;
    top: 92.62vh;
    padding: 0;
}
.hero[data-num=hero_9] p.hero__name {
    margin: -2.70vw 0 4.25vh 4.16vw;
}
.hero[data-num=hero_9] p.hero__description {
    margin: 0 0 0 3.75vw;
}

.hero[data-num=hero_9] img{
	width: 15.67vw;
	height: auto;
}

.hero[data-num=hero_10] {
    width: 16.66vw;
    left: 46.46vw;
    top: 81.85vh;
    padding: 0;
    display: flex;
    flex-flow: column-reverse;
    justify-content: space-between;
    align-items: center;
}
.hero[data-num=hero_10] p.hero__name {
    margin: -2.96vh 0 0 1.35vw;
}
.hero[data-num=hero_10] p.hero__description {
    margin: 0 0 3.7vh .83vw;
}

.hero[data-num=hero_10] img{
	width: 12.1875vw;
	height: auto;
}

.hero[data-num=hero_11]{
	width: 16.875vw;
    left: 60.89vw;
    top: 83.5vh;
    padding: 0;
}
.hero[data-num=hero_11] p.hero__name {
    margin: -4.62vh 0 0 3.4375vw;
}
.hero[data-num=hero_11] p.hero__description {
    margin: 4.07vh 0 0 1.14vw;
}
.hero[data-num=hero_11] img{
	width: 15.67vw;
	height: auto;
}


.hero[data-num=hero_12] {
	width: 16.66vw;
    left: 75.89vw;
    top: 97.85vh;
    padding: 0;
    display: flex;
    flex-flow: column-reverse;
    justify-content: space-between;
    align-items: flex-start;
}
.hero[data-num=hero_12] p.hero__name {
    margin: -2.96vh 0 0 3.85vw;
}
.hero[data-num=hero_12] p.hero__description {
    margin: 0 0 1.97vw .83vw;
}
.hero[data-num=hero_12] img{
	margin: 0 0 0 1.5625vw;	
	width: 12.96875vw;
	height: auto;
}



.hero:after,
.hero:before{
    content: '';
    display: block;
    width: .36vw;
    height: .36vw;
    background-color: var(--main-dark-blue);
    position: absolute;
}
.hero:after{
	background-color: unset;
	border-top: .05vw solid var(--main-dark-blue);
	border-left: .05vw solid var(--main-dark-blue);
}
.hero[data-num=hero_1]:after{
	height: 19.44vh;
    width: 2.08vw;
    bottom: 0;
    left: .15vw;
}
.hero[data-num=hero_1]:before{
    bottom: 0;
    left: 0;
}

.hero[data-num=hero_2]:after{
	border-top: unset;
	border-bottom: .05vw solid var(--main-dark-blue);
	height: 12.77vh;
    width: 2.70vw;
    top: .27vh;
    left: .3125vw;
}
.hero[data-num=hero_2]:before{
    top: .27vh;
    left: .15625vw;
}

.hero[data-num=hero_3]:before {
    bottom: 0;
    left: .78125vw;
}
.hero[data-num=hero_3]:after{
    width: 2.8125vw;
    height: 15vh;
    bottom: 0;
    left: .9375vw;
}

.hero[data-num=hero_4]:before {
    top: .18vh;
    left: .72vw;
}
.hero[data-num=hero_4]:after {
    width: 2.91vw;
    height: 14.81vh;
    top: .46vh;
    left: .88vw;
    border-top: unset;
    border-bottom: .05vw solid var(--main-dark-blue);
}

.hero[data-num=hero_5]:before {
    top: .27vh;
    left: .625vw;
}
.hero[data-num=hero_5]:after {
	width: 1.97vw;
    height: 12.77vh;
    top: .46vh;
    left: .78125vw;
    border-top: unset;
    border-bottom: .05vw solid var(--main-dark-blue);
}



.hero[data-num=hero_6]:before {
    bottom: 0;
    left: 0;
}
.hero[data-num=hero_6]:after {
    width: 5.83vw;
    height: 13.33vh;
    bottom: .27vh;
    left: .15625vw;
}


.hero[data-num=hero_7]:before {
    bottom: 0;
    left: 1.45vw;
}
.hero[data-num=hero_7]:after {
	width: 1.97vw;
    height: 14.62vh;
    bottom: .27vh;
    left: 1.61vw;
}

.hero[data-num=hero_8]:before {
bottom: unset;
    top: 3vh;
    left: 0;
}
.hero[data-num=hero_8]:after {
	width: 5.46875vw;
    height: 15.18vh;
    bottom: unset;
    top: 3.27vh;
    left: .15625vw;
    border-top: unset;
    border-bottom: .05vw solid var(--main-dark-blue);
}

.hero[data-num=hero_9]:before {
    bottom: 0;
    left: 2.6vw;
}
.hero[data-num=hero_9]:after {
	width: 1.97vw;
    height: 15.09vh;
    bottom: .27vh;
    left: 2.76vw;
}
.hero[data-num=hero_10]:before {
    bottom: unset;
	top: 0;
    left: .15625vw;
}
.hero[data-num=hero_10]:after {
	width: 3.22vw;
    height: 12.68vh;
    bottom: unset;
	top: .27vh;
    left: .3125vw;
	border-top: unset;
    border-bottom: .05vw solid var(--main-dark-blue);
}
.hero[data-num=hero_11]:before {
    bottom: 0;
    left: 0;
}
.hero[data-num=hero_11]:after {
	width: 3.54vw;
    height: 14.62vh;
    bottom: .27vh;
    left: .15625vw;
}


.hero[data-num=hero_12]:before {
    bottom: unset;
	top: .27vh;
    left: 0;
}
.hero[data-num=hero_12]:after {
	width: 4.27vw;
    height: 11.75vh;
    bottom: unset;
    left: .15625vw;
	top: .55vh;
	border-top: unset;
    border-bottom: .05vw solid var(--main-dark-blue);
}

/* timeline */
.timeline__wrap .date {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    margin: 2.77vh 0 0;
    z-index: -1;
}
.timeline__wrap .date span,
.timeline__wrap .date h2{
	font-family: 'Intro Head R';
    font-size: 20.8vw;
    line-height: 16.6vw;
    color: rgba(42, 51, 68, .4);
}

.timeline__wrap .date span {
	font-size: 7.5vw;
    line-height: 1;
    color: var(--main-deep-blue);
    margin: 0 0 0 1.66vw;
}
.timeline__wrap .timeline{
    display: grid;
    grid-template-columns: 21.25vw 1fr;
    column-gap: 3.64vw;
	
}
.timeline__wrap .timeline .main__text{
	position: relative;
}

.timeline__wrap .timeline .main__text .heading{
	font-family: 'Intro Head R';
    font-size: 1.875vw;
    line-height: 2.24vw;
    text-transform: uppercase;
    color: var(--main-grey);
    height: 3.95vw;
    display: flex;
    align-items: flex-end;
    margin: 1.85vh 0 0;
}
.timeline__wrap .timeline .main__text .text{
	margin: 1.875vw 0 0;
	width: 29.27vw;
	font-family: 'Gilroy-Regular';
	font-style: normal;
	font-weight: normal;
	font-size: .83vw;
	line-height: 1.14vw;
	color: var(--main-grey);
}

.fade_in{
	opacity: 0;
	transform: translate(5px, 8px);
}

.fade_in.animate{
	animation-name: fadeInAnim;
  	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.a1.fade_in.animate{
	animation-delay: .4s;
}
.a2.fade_in.animate{
	animation-delay: .8s;
}
.a3.fade_in.animate{
	animation-delay: 1.2s;
}

@keyframes fadeInAnim {
	0%   {opacity: 0; transform: translate(5px, 8px);}
	100% {opacity: 1; transform: translate(0,0);}
}
	


.vertical-line{
	display: flex;
    flex-flow: column;
}

.vertical-line a{
	font-weight: 250;
    font-size: .83vw;
    line-height: 1.125;
    color: #D8B68D;
    margin: 0 0 .9375vw;
    padding: 0 0 0 2.39vw;
    position: relative;
    text-decoration: none;
    z-index: 1;
    width: 1.82vw;
}

.vertical-line a:last-of-type{
	margin: 0;
}

.vertical-line a.router-link-exact-active:before,
.vertical-line a.time:before{
	content: '';
	top:50%;
	left: 0;
	transform: translateY(-50%);
	width: 1.97vw;
	position: absolute;
	height: .09vh;
	background-color: var(--main-deep-blue);
	transition: background-color .4s, width .4s;
	
}

.vertical-line a.time:not(.router-link-exact-active):hover:before{
	width: 100%;
	background-color: var(--main-gold);
	z-index: 10;
}

.vertical-line a.router-link-exact-active{
	line-height: 1.04vw;
	font-weight: bold;
	padding: 0 0 0 5.46875vw;
	color: #D8B68D;
	
}
.vertical-line a.router-link-exact-active:before{
    width: 7.29vw;
    height: .46vh;
    top: unset;
    transform: unset;
    bottom: .27vh;
    z-index: -1;
}



.timeline__wrap .image_1,
.timeline__wrap .image_2,
.timeline__wrap .image_3{
	position: absolute;
    width: 25.7vw;
    -webkit-mask: url(https://www.stb.ua/i-budut-ludi/images/svg/FRAME-494x278.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    height: 25.7vh;
}
@keyframes scaleanim {
	0%   {transform: translate(-50%, -50%) scale(1.05);}
	50%  {transform: translate(-50%, -50%) scale(1);}
	100% {transform: translate(-50%, -50%) scale(1.05);}
}

.timeline__wrap .image_1 .second-wave,
.timeline__wrap .image_2 .second-wave,
.timeline__wrap .image_3 .second-wave{
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	animation-name: scaleanim;
  	animation-duration: 8s;
	animation-iteration-count: infinite;
	width: 100%;
}
.timeline__wrap .image_1:hover .second-wave,
.timeline__wrap .image_2:hover .second-wave,
.timeline__wrap .image_3:hover .second-wave{
	animation: unset;
	transform: translate(-50%, -50%) scale(1.07);
}

.timeline__wrap .image_1{
	left: 0;
    bottom: 8vh;
}
.timeline__wrap .image_2 {
    left: 20.3125vw;
    bottom: 0;
}
.timeline__wrap .image_3{
	left: 33.2vw;
	top: 0;
}
.timeline__left {
    display: flex;
    flex-flow: column;
    min-height: calc(100vh - 29.7vh);
    justify-content: space-between;
}

/* SLIDER */
.slick-slide img {
    opacity: .7;
	transition: opacity .4s;
}
.slick-slide img:hover{
    opacity: 1;
	
}


/* HERO */
.director__content.singleHero h2, .director__content.singleHero h1 {
    font-family: 'Intro Head R';
    font-size: 10.41vw;
    line-height: .75;
    color: rgba(196, 196, 196, .26);
    margin: 0 0 2.03vh;
    text-transform: uppercase;
}
.director__content.singleHero h2{
	margin: 0;
	font-size: 4.27vw;
	line-height: .87;
	color: var(--main-grey);
	margin: 0 0 7.77vh;
}

.director__content.singleHero .main_image img{
	width: 26.25vw;
	height: auto;
	margin: -3.88vh 0 0 10.67vw;
}


.director__content.singleHero .actorName{
	font-family: 'Intro Head R';
	font-size: 1.875vw;
	line-height: 1.2;
	text-transform: uppercase;
	color: #D8B68D;
	margin: 0 0 4.07vh;
}
.director__content.singleHero .actor,
.director__content.singleHero .mainText{
	font-family: 'Gilroy-Regular';
	font-size: .9375vw;
	line-height: 1.4;
	color: var(--main-grey);
}

.director__content.singleHero .actor{
	font-size: .9375;
	line-height: 1.2;
	letter-spacing: .05em;
	margin: 0 0 1.04vw;
}
.slider__img__wrap.bg,
.director__slider.slider.singleHero .slider__img__wrap{
	opacity: .7;
	transition: opacity .4s;
}
.director__slider.slider.singleHero{
	margin: 0 0 15vh;
}

.slider__img__wrap.bg:hover,
.director__slider.slider.singleHero .slider__img__wrap:hover{
	opacity: 1;
}
.director__content.singleHero{
    grid-template-columns: 1fr 1fr;
    column-gap: 8.85vw;
}

.video__wrap{
	width: auto;
	margin: 0 25vw 9.25vh;
}
.lazyLoadVideo__wrap .audio{
	display: none;
	position: absolute;
    bottom: 9.25vh;
    right: 7.39vw;
    width: 3.125vw;
    height: 3.125vw;
}
.lazyLoadVideo__wrap .audio.ready{
	display: block;
}

#audio-off,
#audio-on{
    width: 3.125vw;
    height: 3.125vw;
    z-index: -1000;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
	cursor: pointer;
}
#audio-off.visible,
#audio-on.visible{
	z-index: 100;
	opacity: 1;
}

.director__wrap.view p.breadcrumbs {
    margin: 0 0 2.5vh;
}

.director__wrap.view iframe {
    width: calc(100% - 360px);
    height: calc(calc(calc(calc(100vw - 360px) - 16.875vw) / 16) * 9);
    padding: 0 180px;
    margin: 0 0 80px;
}


@media screen and (max-width: 1000px){
	.socials a:nth-of-type(3) img,
	.socials a:nth-of-type(2) img,
	.socials a:nth-of-type(1) img,
	header div.logo img, .footer .logo img {
    	width: auto;
	}
	.support_list a:nth-of-type(1) img,
	.support_list a:nth-of-type(2) img,
	.support_list > img{
		margin: 12px auto !important;
		width: auto;
	}
	.socials a {
		margin: 0 14px !important;
	}
	.footer .heroes_list a, .footer .copyright p, .footer .support p{
    	font-size: 14px;
	}
	header .menu.divider,
	.lazyLoadVideo__wrap:before,
	.image_1,
	.image_2,
	.image_3,
	.centered_absolute,
	.breadcrumbs,
	header .socials,
	.footer .menu,
	.footer .heroes_list{
		display: none;
	}
	.footer .support_list {
		margin: 12px 0 20px;
		grid-template-columns: unset;
		grid-template-rows: 1fr 1fr 1fr;
	}
	header div.logo img {
		height: 17px;
		margin: 0 auto 0 0;
	}
	header {
		width: calc(100% - 32px);
		padding: 16px 16px 0;
    	position: absolute;
	}
	.heroes__wrap, .director__wrap, .timeline__wrap, .news__wrap, .home__wrap {
		padding: 51px 16px 18px;
		min-height: calc(100vh - 562px);
		width: auto;
	}
	.director__content_reverse, .director__content{
		display: block; 
		margin: 0 0 26px; 
	}
	.director__content .text{
		font-size: 12px;
		line-height: 18px;
		margin: 0 0 26px;
	}
	.director__content .title{
		margin: 26px 0 12px;
		font-size: 12px;
	}
	.director__content .text h2{
		font-size: 24px;
		line-height: 1;
		margin: 0 0 26px;
	}
	.slick-arrow {
       	width: 40px;
		height: 40px;
	}
	.director__content .column{
		margin: 0 4px 0 24px;
	}
	.director__slider .slider,
	.director__wrap .about_photo{
		margin: 0 16px;
	}
	.slick-dots {
		bottom: 0;
	}
	.slick-slider .slick-dots button {
    	margin: 0 5px;
		font-size: 10px;
	}
	.slick-slider .slick-dots .slick-active button:before {
		width: 10px;
    	height: 4px;
		bottom: -1px;
	}
	.director__content.reverse .image.static img {
		width: 100%;
		height: auto;
	}
	.hero {
		position: relative;
		padding: 0;
		width: 100% !important;
		margin: 0 0 40px;
		top: unset !important;
		left: unset !important;
	}
	.hero:after, .hero:before {
		width: 7px;
		height: 7px;
		left: 9px !important;
	}
	.hero:before{
		left: 6px !important;
	}
	.hero img {
		width: auto !important;
		height: auto !important;
		display: block !important;
		margin: 0 auto 0 36px;
	}
	.heroes__all a{
		text-decoration: none;
	}
	.hero p.hero__name {
		font-size: 22px;
		line-height: 26px;
		height: unset;
		width: 178px;
		margin: -22px 0 48px 54px !important;
	}
	.hero p.hero__description {
		font-size: 16px;
		line-height: 18px;
		margin: 0 0 0 25px !important;
	}
	.hero[data-num=hero_3] img {
		margin: 0 auto 0 28px;
	}
	.director__content.singleHero .main_image img {
		width: 250px;
		height: auto;
		margin: 0;
	}
	.director__content.singleHero h2, .director__content.singleHero h1 {
		font-size: 90px;
    	line-height: 1;
    	margin: -80px 0 10px;
	}
	.director__content.singleHero h2{
		font-size: 40px;
		margin: 0 0 32px;
	}
	.director__content.singleHero .actor {
		font-size: 12px;
		line-height: 1;
		margin: 0 0 12px;
	}
	.director__content.singleHero .actorName{
		font-size: 24px;
		line-height: 24px;
		margin: 0 0 28px;
	}
	.director__content.singleHero .mainText{
		font-size: 12px;
		line-height: 18px;
		margin: 0 0 28px;
	}
	.video__wrap {
		width: auto;
		margin: 0 16px 30px;
	}
	.lazyLoadVideo__wrap .lazyLoadVideo.loaded {
    	position: unset; 
     	transform: unset; 
	}
	.lazyLoadVideo__wrap {
		z-index: 0;
		position: relative;
		width: 100%;
	}
	
	.lazyLoadVideo__wrap .lazyLoadVideo.loaded {
		width: 100%;
		height: auto;
		min-width: unset;
		min-height: unset;
		margin: 76px 0 0;
	}
	.home__wrap {
		position: relative;
		background-image: url(https://www.stb.ua/i-budut-ludi/images/ZEMLIA.jpg);
	}
	.home__wrap {
		min-height: calc(100vh - 69px);
	}
	.timeline__wrap{
		height: calc(100vh - 69px);
    	min-height: 742px;
	}
	.centered_absolute_mobile {
		display: block;
		margin: 110px 0 0;
	}
	#audio-off, #audio-on {
    	width: 28px;
		height: 28px;
	}
	.lazyLoadVideo__wrap .audio {
		bottom: 10px;
		right: 10px;
		width: 28px;
		height: 28px;
	}
	.timeline__wrap .timeline {
    	display: block;
	}
	.timeline__wrap .date {
		margin: 0;
	}
	.timeline__wrap .date span, .timeline__wrap .date h2 {
    font-size: 180px;
		line-height: 1;
	}
	.timeline__wrap .date span {
		font-size: 60px;
		margin: 20px 0 0;
	}
	.timeline__wrap .timeline .main__text {
		position: absolute;
		left: 63px;
		top: 190px;
		width: 312px;
		height: calc(100% - 190px);
		min-height: 622px;
	}
	.timeline__wrap .timeline .main__text .heading {
		font-size: 24px;
		line-height: 29px;
		height: auto;
		text-align: right;
		display: block;
		margin: 0 19px 26px 0;
	}
	.timeline__wrap .timeline .main__text .text {
		font-size: 12px;
		line-height: 18px;
		margin: 0 19px 0 0;
		width: auto;
	}
	.vertical-line a {
		margin: 0 0 10px;
		padding: 0 0 0 16px;
		width: 26px;
		font-size: 10px;
		line-height: 10px;
	}
	.vertical-line a.router-link-exact-active {
		line-height: 1;
		padding: 0 0 0 20px;
	}
	.timeline__left {
		height: calc(100vh - 264px);
		min-height: 570px;
	}
	.slider.mobile {
		display: block;
		width: 260px;
		height: 146px;
		margin: 42px 0 0 10px;
		position: absolute;
		bottom: 34px;
		right: 19px;
	}

	.slider.mobile .slick-slide img {
        width: 100%;
	}
	.slick-prev.slick-arrow {
		left: 13px;
	}
	.slick-next.slick-arrow {
		right: 13px;
	}
	.vertical-line {
		bottom: 120px;
		position: absolute;
	}
	header .mobile.icon {
		display: block;
		height: 17px;
		width: 28px;
		position: relative;
	}
	header .mobile.icon span{
		background-color: var(--main-gold);
		width: 28px;
		display: block;
		height: 1px;
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	header .mobile.icon span:nth-of-type(1){
		top: 0;
	}
	header .mobile.icon span:nth-of-type(3){
		top: 100%;
	}
	body.opened{
    	overflow-y: hidden;
	}
	body.opened header{
		position: fixed;
	}
	
	body.opened header .mobile.icon span:nth-of-type(1){
		top: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}
	body.opened header  .mobile.icon span:nth-of-type(2){
		display: none;
	}
	body.opened header .mobile.icon span:nth-of-type(3){
		top: 50%;
		transform: translate(-50%, -50%) rotate(135deg);
	}
	body.opened header:before{
		content: '';
		left: 0;
		top: 0;
		z-index: -1;
		position: fixed;
		display: block;
		width: 100%;
		height: 100vh;
		background-color: var(--main-dark-blue);
	}
	body.opened header .socials.divider,
	body.opened header .menu.divider{
		display: flex;
		position: fixed;
		top: 120px;
		left: 112px;
		flex-flow: column;
		align-items: center;
	}
	body.opened header .menu.divider a {
		font-size: 24px;
		line-height: 1;
		margin: 0 0 32px;
	}
	body.opened header .socials.divider {
		bottom: 88px;
		top: unset;
		left: 0;
		flex-flow: row;
		width: 100%;
		justify-content: center;
	}
	body.opened header .menu.divider a.router-link-exact-active,	
	body.opened header .menu.divider a[href="/i-budut-ludi/heroes"].router-link-active,
	body.opened header .menu.divider a[href="/i-budut-ludi/timeline"].router-link-active{
		color: 	var(--main-grey);
	}
	body.opened header div.menu a[href="/i-budut-ludi/heroes"].router-link-active:before,
	body.opened header div.menu a[href="/i-budut-ludi/timeline"].router-link-active:before,
	body.opened header div.menu a.router-link-exact-active:before {
		bottom: -5px;
		height: 12px;
		background-color: var(--main-deep-blue);
	}
	.director__wrap.view iframe {
    	width: 100%;
		height: calc(calc(calc(100vw - 32px) / 16) * 9);
		margin: 0;
		padding: 0;
	}
	.last_block {
    	flex-flow: column;
	}
	.footer .copyright.dev{
		margin: 12px 0 0;
	}
	.footer .copyright p{
    	text-align: center !important;
	}
}