@font-face{
	font-family: Back2TheFutureLEFT;
	src: url(fonts/Back2TheFutureLEFT.ttf);
}
@font-face{
	font-family: Back2TheFutureRIGHT;
	src: url(fonts/Back2TheFutureRIGHT.ttf);
	font-size:5pt;
}

*{
	position: relative;
	margin: 0;
	box-sizing: border-box;
}
button{
	border: 0;
	background-color: transparent;
	margin: 0;
}
button:focus{
	outline: 0;
}
.left-menu{
	position: fixed;
	background: url(img/left_menu/faqv2-6.png) no-repeat top right;
	background-size: cover;
	font-family: Back2TheFutureRIGHT, sans-serif;
	color: #666;
	height: 470px;
	left: -347px;
	top: 22%;
	transition: left .3s ease;
	opacity: .9;
	z-index: 190;
}
.left-menu.opened{
	left: -11px;
}
#trigger{
	position: absolute;
	background: url(img/left_menu/btn.png);
	width: 38px;
	height: 38px;
	right: 18px;
	top: 20px;
	opacity: .7;
	cursor: pointer;
	z-index: 1;
}
.left-menu.opened #trigger{
	right: -15px;
	top: 13px;
	width: 15px;
	height: 15px;
	background: url(img/left_menu/cross.png) no-repeat right;
}
#trigger:hover{
	opacity: 1;
}
.left-menu:not(.opened) #trigger:hover{
	background-image: url(img/left_menu/btn_hov.png);
}
.left-menu:not(.opened) > div{
	visibility: hidden;
}
.left-menu:not(.opened){
	height: 300px;
}
.first-page{
	width: 400px;
	height: 470px;
	display: flex;
	flex-direction: column;
}
.second-page{
	width: 610px;
	height: calc(100% - 20px);
	display: flex;
	flex-direction: column;
}
.left-menu.hided{
	left: -610px;
}
.head-title{
	background: url(img/left_menu/TRACKS.png) no-repeat center;
	width: 100%;
	height: 35px;
	margin-top: 35px;
}
.first-page ul{
	list-style: none;
	padding-left: 20px;
	flex: 1;
}
.first-page ul li{
	background-repeat: no-repeat;
	height: 20px;
	opacity: .7;
}
.first-page ul li.active{
	cursor: pointer;
}
.first-page ul li.active:hover{
	opacity: 1;
}
.download, .share{
	background: none;
	width: 100%;
	margin: 10px 20px 10px 0;
}
.first-page .download{
	margin-left: 12px;
}
.download span,
.share span{
	background: url(img/left_menu/download.png) no-repeat 7px 0;
	display: inline-block;
	width: 100px;
	height: 20px;
}
.share span{
	background: url(img/left_menu/share.png) no-repeat 34px 0;
}
.download a,
.share a{
	display: inline-block;
	width: 20px;
	height: 20px;
	opacity: .5;
	margin-left: 10px;
}
.second-page .download a,
.second-page .share a{
	margin-left: 5px;
}
.download a:hover,
.share a:hover{
	opacity: 1;
}
.download a.beatport{
	background-image: url(img/left_menu/beatport_White.png);
}
.download a.itunes{
	background-image: url(img/left_menu/itunes_White.png);
}
.download a.spotify{
	background-image: url(img/left_menu/spotify_White.png);
}
.share a.facebook{
	background-image: url(img/left_menu/FB_White.png);
}
.share a.twitter{
	background-image: url(img/left_menu/Twitter_White.png);
}
.share a.instagram{
	background-image: url(img/left_menu/Instagram_White.png);
}
.left-menu .top-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: 20px;
	margin-top: 25px;	margin-bottom: 15px;
}
#left-menu-to-first-page{
	background: url(img/left_menu/Arrow_White.png) transparent no-repeat;
	width: 20px;
	height: 20px;
	border: 0;
	opacity: .3;
	cursor: pointer;
}
#left-menu-to-first-page:hover{
	opacity: 1;
}
.second-page .head-title{
	background-position: 0 8px;
	width: calc(100% - 200px);
	margin: 0;
}
.left-menu .middle-row{
	display: flex;
	flex: 1;
}
.left-col{
	width: 210px;
	margin-left: 20px;
	margin-top: 5px;
}
.right-col{
	flex: 1;
}
p.track-description{
	font-family: Back2TheFutureRIGHT, sans-serif;
	font-size: 14px;
	color: white;
	opacity: 0.7;
	line-height: 1.5;
	text-align: justify;
	margin: 0;
	background-size: 0;
}
@-moz-document url-prefix(){
	p.track-description{
		color: transparent;
		height: 100%;
		background-repeat: no-repeat;
		background-size: contain;
	}
}
.shaped{
	shape-outside: linear-gradient(-77.5deg, rgb(77, 26, 103), transparent 67%, transparent);
	shape-image-threshold: 0.2;
	shape-margin: 12px;
	width: 106px;
	height: 100%;
	float: right;
}
a:not([href]):not([tabindex]).read-more{
	color: #fff;
	font-weight: bold;
	text-decoration: underline;
}
.left-menu .bottom-row{
	width: 100%;
	text-align: right;
	padding-right: 22%;
}
.lang{
	width: 20px;
	max-width: 20px;
	height: 20px;
	cursor: pointer;
	opacity: .5;
}
.lang:hover, .lang.active{
	opacity: 1;
}
[data-lang=en]{
	background: url(img/left_menu/EN_White.png) no-repeat;
}
[data-lang=ua]{
	background: url(img/left_menu/UA_White.png) no-repeat;
}
[data-lang=ru]{
	background: url(img/left_menu/RU_White.png) no-repeat;
}

.right-menu{
	background: url(img/right_menu/menu-div2.png) no-repeat left;
	position: fixed;
	right: -180px;
	height: 560px;
	padding-top: 27px;
	padding-left: 20px;
	padding-bottom: 10px;
	opacity: .9;
	transition: right .3s ease;
	z-index: 90;
}
.right-menu.opened{
	right: -18px;
}
.right-menu.hided{
	right: -400px;
}
#gamburger{
	position: absolute;
	background: url(img/right_menu/asd.png);
	width: 30px;
	height: 30px;
	left: -50px;
	top: 20px;
	opacity: .7;
	cursor: pointer;
	z-index: 190;
}
.right-menu.opened #gamburger{
	left: -20px;
	top: 23px;
	width: 15px;
	height: 15px;
	background: url(img/left_menu/cross.png) no-repeat;
}
#gamburger:hover{
	opacity: 1;
}
.right-menu .main-page{
	width: 150px;
}
.right-menu .main-page a{
	display: block;
	background: url(img/right_menu/About_B.png) no-repeat;
	height: 25px;
	cursor: pointer;
	opacity: .5;
	margin-bottom: 15px;
}
.right-menu .main-page a:hover{
	opacity: 1;
}
.right-menu .main-page a[data-target=album]{
	background: url(img/right_menu/Album_B.png) no-repeat;
	margin-left: 13px;
}
.right-menu .main-page a[data-target=contact]{
	background: url(img/right_menu/Contact_B.png) no-repeat;
	margin-left: 26px;
}
.album, .about, .contact{
	width: 350px;
	padding-right: 30px;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.top-row{
	display: flex;
	justify-content: space-between;
	height: 25px;
}
.right-menu .top-row a{
	display: block;
	width: 100px;
	height: 25px;
	opacity: .6;
	cursor: pointer;
}
.about .top-row a{
	background: url(img/right_menu/About_B.png) no-repeat;
}
.album .top-row a{
	background: url(img/right_menu/Album_B.png) no-repeat;
}
.contact .top-row a{
	background: url(img/right_menu/Contact_B.png) no-repeat;
}
.right-menu .top-row a:hover{
	opacity: 1;
}
.right-menu .top-row .lang-btns{
	display: flex;
	width: 69px;
	justify-content: space-between;
}
.right-menu .middle-row .text{
	background-repeat: no-repeat;
	background-size: 0;
}
@-moz-document url-prefix(){
	.right-menu .middle-row p.text{
		color: transparent;
		height: 100%;
	}
	.right-menu .middle-row p.text{
		background-size: contain;
	}
}
.right-menu .middle-row{
	flex: 1;
	overflow: hidden;
	text-overflow: clip;
}
.right-menu .middle-row .shaped{
	float: left;
	shape-outside: linear-gradient(73deg, rgb(77, 26, 103), transparent 64%, transparent);
	shape-image-threshold: 0.2;
	shape-margin: 0px;
	width: 146px;
}
.right-menu .middle-row .text,
.right-menu a.read-more{
	font-family: Back2TheFutureLEFT, sans-serif;
	font-size: 14px;
	color: white;
	opacity: 0.7;
	text-align: justify;
	line-height: 1.5;
}
.right-menu .bottom-row{
	display: flex;
	justify-content: space-between;
	width: 57%;
	align-self: flex-end;
	height: 12px;
	margin-bottom: 8px;
}
.right-menu .bottom-row button{
	width: 16px;
	height: 12px;
	opacity: .6;
	cursor: pointer;
}
.right-menu .bottom-row button:hover{
	opacity: 1;
}
.right-menu .bottom-row .next{
	background: url(img/right_menu/Arrows1L.png) no-repeat;
}
.right-menu .bottom-row .prev{
	background: url(img/right_menu/Arrows2L.png) no-repeat;
}
a:not([href]):not([tabindex]).read-more{
	display: none;
}

@media (max-width: 575px){
	.hide-on-mobile{
		display: none;
	}
	.show-on-mobile{
		display: block;
	}
	.left-menu.opened,
	.right-menu.opened{
		top: 0;
		width: calc(100% - 12px);
		height: 100%;
		z-index: 100;
		opacity: .98;
	}
	.right-menu.opened{
		background-size: 100% 100%;
	}
	.right-menu.opened.opened-main-page{
		right: -150px;
	}
	.right-menu .middle-row .shaped{
		shape-outside: linear-gradient(76.3deg, rgb(77, 26, 103), transparent 67%, transparent);
	}
	.right-menu .bottom-row{
		padding-left: 20px;
	}
	.left-menu.opened #trigger{
		right: -14px;
	}
	.second-page{
		width: 100%;
	}
	.second-page .head-title{
		width: 100%;
		margin-left: 20px;
		height: 23px;
		background-size: contain;
		background-position: left center;
	}
	.second-page .left-col{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.second-page img{
		/*width: 230px;*/
	}
	.show-on-mobile .shaped{
		shape-image-threshold: 0.2;
		shape-margin: 42px;
		width: 150px;
		height: 137%;
	}
	.text-container.show-on-mobile{
		/*height: 45vh;*/
		overflow: hidden;
		flex: 1;
	}
	a:not([href]):not([tabindex]).read-more{
		display: block;
	}
	.second-page .download, .second-page .share{
		margin: 10px 20px 0 0;
		height: 20px;
	}
	.second-page .download span, .second-page .share span{
		background-size: contain;
		background-position: center 5px;
		width: 64px;
	}
	.second-page .download a, .second-page .share a{
		background-size: contain;
		width: 16px;
		height: 16px;
	}
	.left-menu .bottom-row{
		position: absolute;
		right: 39px;
		padding: 0;
		top: 30px;
		max-width: 50%;
		display: flex;
		width: 66px;
		height: 20px;
		justify-content: space-between;
	}
	.lang{
		flex: 1;
		max-width: none;
	}
	.album, .about, .contact{
		width: 100%;
	}
}

@media (max-width: 998px) and (orientation: landscape){
	body .hide-on-mobile{
		display: none;
	}
	body .show-on-mobile{
		display: block;
	}
	body .show-on-mobile-landscape{
		display: block;
	}
	body .hide-on-mobile-landscape{
		display: none;
	}
	.shaped{
		shape-outside: linear-gradient(-75deg, rgb(77, 26, 103), transparent 67%, transparent);
	}
	.left-menu{
		z-index: 102;
		background-size: 102% 100%;
		height: 70%;
	}
	.left-menu.opened{
		left: 0;
		top: -5px;
		height: 102%;
		max-width: 85%;
	}
	.left-menu.opened #trigger{
		background-size: contain;
		width: 20px;
		height: 20px;
		right: -30px;
		top: 15px;
	}
	.first-page{
		height: 100%;
	}
	.second-page{
		height: 98%;
		max-width: 100%;
	}
	.right-col{
		overflow: hidden;
	}
	p.track-description{
		line-height: 1.4;
		font-size: 13px;
	}
	a:not([href]):not([tabindex]).read-more{
		display: block;
		position: absolute;
		left: 209px;
		width: 100px;
		z-index: 100;
	}
	#gamburger{
		width: 40px;
		height: 40px;
		background-size: cover;
		top: 4px;
	}
	.right-menu:not(.opened-main-page){
		background-image: url(img/right_menu/menu-div2-land.png);
	}
	.right-menu.opened{
		z-index: 100;
		right: -18px;
		background-size: 100% 100%;
		max-width: 85%;
		height: 100%;
	}
	.right-menu.opened #gamburger{
		width: 20px;
		height: 20px;
		background-size: contain;
		left: -30px;
	}
	.album, .about, .contact{
		width: 100%;
		max-width: 100%;
	}
	.right-menu .middle-row .shaped{
		shape-outside: linear-gradient(68.5deg, rgb(77, 26, 103), transparent 64%, transparent);
		shape-image-threshold: 0.25;
	}
	.right-menu .bottom-row{
		width: 77%;
	}
	.right-menu .main-page a[data-target=contact]{
		margin-left: 20px;
	}
	.right-menu .main-page a[data-target=album]{
		margin-left: 9px;
	}
}

.text-fullscreen{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	opacity: .9;
	background-color: #000;
	z-index: 200;
	max-height: 100vh;
}
.text-fullscreen .top{
	display: flex;
	justify-content: space-between;
	padding: 15px;
}
.text-fullscreen .main-text{
	font-family: Back2TheFutureRIGHT, sans-serif;
	font-size: 16px;
	color: #eee;
	opacity: 0.7;
	line-height: 1.5;
	text-align: justify;
	padding: 15px;
	overflow-y: scroll;
	max-height: 90%;
}
.text-fullscreen .top .close-btn{
	cursor: pointer;
	background: url(img/close2.png) no-repeat center center;
	width: 25px;
	height: 25px;
}