body .sidebar{
	width:calc(100% - 40px);
}

@media screen and (max-width:991px){
	body .sidebar{
		height:calc(100% - 20px);
		border-bottom:20px solid #FFD881;
	}

	body .sidebar:after{
		height:calc(100% + 20px);
	}
}

@media screen and (max-width:950px){
	body .sidebar{
		width:calc(100% - 20px);
		height:calc(100% - 10px);
		border-bottom:10px solid #FFD881;
	}

	body .sidebar:after{
		height:calc(100% + 10px);
	}
}


.mobile_music{
	display:none;
}

.content {
	border: 20px solid #FFD881;
/*	display: none;*/
    width:100%;
    height:100vh;
	background-image: none;
}

.header{
	position:relative;
}

.headerright a {
	position: relative;
	z-index: 9999999;
}

.headerright span .headercircle {
	position: relative;
	z-index: 999999;
}

.mj_music_content{
	overflow:hidden;
	display:flex;
	position:absolute;
	top:20px;
	left:20px;
	width:calc(100% - 40px);
	height:calc(100vh - 40px);
}

.mj_left{
	width:45%;
}

.mj_right{
	flex:1;
}


.leftcontent {
	padding:0 2% 5vh 3%;
	background-color: #ffffff;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}


.rightcontent {
	background-image: url(../../Images/Front/background1.png);
	background-repeat: repeat;
	position:relative;
}

.rightcontent:before{
	content:'';
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color: #e2d2f9;
	transform:scale(0, 1);
	transform-origin:0 50%;
	transition:0.7s;
}

body.load .rightcontent:before{
	transform:scale(1, 1);
}


.leftcontentheader{
	margin-top:calc(150px + 5vh);
	font-family: 'bebasneue';
	font-size: 2.938em;
}

.leftcontentheader span{
	background: linear-gradient(to right, #E2D2F9, #FFD881);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-linear-gradient(to right, #E2D2F9, #FFD881);
}

.leftcontentalbum {
	position: fixed;
    bottom: 10%;
}


.leftcontentalbum span {
	display: block;
	width: 100%;
	font-family: 'bebasneue';
	font-size: 1.75em;
	line-height: 50px;
	font-weight: bold;
	text-transform: uppercase;
}

.firstalbum{
	margin-top: 70%;
}

.mg-icon-img{
	width:18px;
	max-height:18px;
}

.activealbum {
	background: linear-gradient(to right, #E2D2F9, #FFD881);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-linear-gradient(to right, #E2D2F9, #FFD881);
}

.articlearrow {
	position: absolute;
	top: 35%;
	text-align: center;
}

.articlearrow .slidedown {
	float: none;
	left:60px;
}

.articlearrow .slideup {
	background-color: #e2d2f9;
	border-color: #d2c2e7;
}


.musicrightcontent {
	position: relative;
}

.albumcover {
	width:100%;
	height:100%;
}

.albumcover img{
	width: 100%;
	height: 100%;
}

.albumcover h4, .album_name{
	text-align:center;
	font-family: 'bebasneue';
	color: #313131;
	font-size: 1.75em;
}

.album_name{
	transform:translateY(20vh);
	opacity:0;
	transition-duration:0.8s;
}

body.load .album_name{
	transform:translateY(0);
	opacity:1;
}

body.load .album_name + .album_name{
	transition-delay:0.2s;
}

body.load .album_name{
	transition-delay:0.1s;
}

.albumsocial{
	align-items: center;
}

.albumsocial span {
	font-family: 'bebasneue';
	color: #000000;
	font-size: 1.5em;
	letter-spacing: 0.01em;
	margin-right:0.5em;
}

.albumsocial a{
	color: #000;
	font-size:0.1em;
}

.icon-google-play {
	position: relative;
}


/*.icon-google-play:before {
	position: absolute;
	color: #000000;
	left: 10px;
	top: 1%;
}
*/
.icon-itunes {
	position: relative;
}


/*.icon-itunes:before {
	position: absolute;
	color: #000000;
	left: 35px;
	top: 1%;
}*/

.icon-spotify {
	position: relative;
}


/*.icon-spotify:before {
	position: absolute;
	color: #000000;
	left: 60px;
	top: 1%;
}
*/
.icon-amazon {
	position: relative;
}


/*.icon-amazon:before {
	position: absolute;
	color: #000000;
	left: 85px;
	top: 1%;
}*/

.music_slide{
	line-height:1em;
}

.music_slide, .music_slide_mobile{
	transition-duration:1s;
	opacity:0;
	transform:translateY(50vh);
}

body.load .music_slide, body.load .music_slide_mobile{
	transform:translateY(0);
	opacity:1;
}

.music_slide[data-index="2"], .music_slide_mobile[data-index="2"]{
	transition-delay:0.1s;
}

.music_slide[data-index="3"], .music_slide_mobile[data-index="3"]{
	transition-delay:0.2s;
}

.music_slide[data-index="4"], .music_slide_mobile[data-index="4"]{
	transition-delay:0.3s;
}

.music_slide[data-index="5"], .music_slide_mobile[data-index="5"]{
	transition-delay:0.4s;
}

.music_slide.swiper-slide-duplicate{
	opacity:0 !important;
	transition:0s linear 2s !important;
}

body.load .swiper-slide-duplicate{
	opacity:1 !important;
}

.music {
	bottom:40px;
    right:40px;
    left:auto;
}





.mj_music_sections{
	display:flex;
	height:100%;
}

.mj_section_left{ 
	position:relative;
	height:100%;
	width:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	transition:0.5s ease;
}

.open .mj_section_left{
	width:60%;
}

.mj_right{
	position:relative;
}

.mj_section_right{
	cursor:url("../../Images/Front/cursor.png"), auto;
	position:absolute;
	height:100%;
	transform:translateX(120%);
	top:0;
	right:0;
	width:40%;
	background:#ffffff;
	transition:0.5s ease;
}

.open .mj_section_right{
	transform:translateX(0);
}

.mj_albumimage{
	align-self:center;
}

.mj_cover_out{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transform:translateY(30vh);
	opacity:0;
	transition:0.5s;
}

body.load .mj_cover_out{
	opacity:1;
	transform:translateY(0);
}

.mj_album{
	width:100%;
	max-width:460px;
	opacity:0;
	transition:1s ease 0.1s;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, 0);
}

.mj_album.active{
	opacity:1;
	transform:translate(-50%, -50%);
	z-index:1;
}


.mj_cover_out img{
	max-height:70vh;
	max-width:100%;
}

.albumsocial{
	position:absolute;
	bottom:45px;
	left:3%;
	display:none;
}

.albumsocial.active{
	display:flex;
}

.albumsocial a{
	font-size:1.4em;
	margin-left:1em;
	display: flex;
	align-items: center;
}

a, .albumsocial a:active, .albumsocial a:focus{
	text-decoration: none !important;
}

/* album open */


.albumimage {
	width: 40%;
	height: 40%;
	margin-top: 20%;
	margin-left: 35%;
	position: relative;

}

.mj_cover_out:hover .icon-playlist {
	opacity: 1; 
}


.icon-playlist {
	position: absolute;
	width: 60px;
	height: 60px;
	top: 50%;
	left: 50%;
	transform:translate(-50%, -50%);
	background: linear-gradient(to right, #FFD881, #E2D2F9);
	-webkit-linear-gradient(to right, #FFD881, #E2D2F9);
	border-radius: 50%;
	opacity: 0;
	transition:0.5s ease;
	cursor: pointer;
	display:flex;
	align-items:center;
	justify-content:center;
}

.icon-playlist:before {
	font-size: 1.4em;
	color: #ffffff;
	position:relative;
	top:0.1em;
}







/* test */


.sidebarplaylist {
	position:absolute;
	max-height:calc(100% - 110px - 120px);
	width:100%;
	bottom:110px;
	overflow-y:auto;
	transform:translateY(100%);
	left:0;
	opacity:0;
	transition:0.7s ease-out 0.1s;
}

.sidebarplaylist.activeplaylist {
	right: 20px;
}

.open .sidebarplaylist.active{
	transition:0.7s ease-out 0.6s;
	opacity:1;
	transform:translateY(0);
}


.albumimage {
	transition: 0.5s ease-in;
}

.albumimage.activealbumimage {
	margin-left: 3%;
}

.albumcover h4 {
	transition: 0.5s ease-in;
}

h4.acitvealbumtext {
	margin-left: -53%;
}


.sidebarplaylist ul {
	list-style-type: none;
}


.sidebarplaylist ul li{
	width: 100%;
}

.sidebarplaylist li{
	font-size: 1.25em;
	text-decoration: none;
	text-transform: lowercase;
	color: #000000;
	font-family: 'bebasneue';
	padding:1em 2% 1em 5%;
	color:#95989A;
	position:relative;
}

.sidebarplaylist span{
	position:relative;
}

.sidebarplaylist li:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background: linear-gradient(to right, #E2D2F9, #FFD881);
  	-webkit-linear-gradient(to right, #E2D2F9, #FFD881);
  	transform-origin:0 50%;
  	transform:scale(0,1);
  	transition:0.3s;
}

.sidebarplaylist li:hover:before{
	transform:scale(1,1);
}



/* test */



@media (max-width: 1280px) {
	.icon-playlist {
		width: 50px;
		height: 50px;
	}

	.icon-playlist:before {
		right: 28%;
		top: 38%;
	}
}




@media (max-width: 991px) {
	.mobile_music{
		display:block;
	}

	.desktop_music{
		display:none;
	}

	.sidebar{
		height:calc(100% - 20px);
	}

	.leftcontent {
		display: none;
	}

	.rightcontent {
		display: none;
	}

	.musicleftcontent {
		background-color: #ffffff;
	}

	.musicrightcontent {
		background-color: #E2D2F9;
		margin-top: 3%;
	}

	.icon-playlist {
		display: none;
	}

	.albumimage {
		width: 40%;
		height: 40%;
		position: relative;
		margin-top: 10%;
		margin-left: 30%;
		cursor: pointer;
	}

	.albumcover h4 {
		margin-left: 0;
		font-size: 1.5em;
	}

	.leftcontentheader {
		text-align: center;
		margin-top: 5%;
	}

	.leftcontentheader span {
		float: none;
	}

	.content {
		height: 100%;
	}


	.leftcontentalbum span:last-child {
		padding-bottom: 5%;
	}

	.firstalbum {
		margin-top: 10%;
	}

	.articlearrow {
		margin-top: 10%;
		top: 0;
		right: 60px;
	}

	.articlearrow .slidedown {
		left: 30px;
	}

	.viewplaylist {
		float: left;
		margin-top: 3%;
	}

	.icon-playlist1 {
		position: relative;
	}

	.icon-playlist1:before {
		position: absolute;
		color: #000000;
		font-size: 1em;
		left: -20px;
		font-weight: bold;
		top: 3.2px;

	}

	.icon-playlist1.playlist{
		font-size: 1em;
		font-family: 'bebasneue';
		margin:3vh 0 1vh 19px;
		border: none;
		outline: none;
		background: none;
	}

	.viewplaylist ul {
		list-style-type: none;
	    margin-top: 3%;
	    padding: 0;
	    width: 50%;
	    display: none;
	}

	.viewplaylist ul li {
		font-family: 'bebasneue';
		font-size: 1.3em;
		line-height: 40px;
		margin-top: 10px;
		padding: 2%;
		cursor: pointer;
	}

	.viewplaylist ul li:hover {
		background: linear-gradient(to right, #E2D2F9, #FFD881);
  		-webkit-linear-gradient(to right, #E2D2F9, #FFD881);
	}

	.leftcontentalbum {
		position: relative;
	}

	.albumcover{
		display:flex;
		align-items:center;
		justify-content:center;
		height:60vh;
		min-height:300px;
		padding:5vh 0;
	}

	.mj_section_right {
	    cursor: url(../../Images/Front/cursor.png), auto;
	    position:relative; 
	    height:0;
	    transform-origin:50% 0;
	    transition:0.5s; 
	    transform:none; 
	    width:auto; 
	}

	.mj_section_right.active{
		 height:50vh;
		 transform:scale(1,1);
	}

	.sidebarplaylist{
		height:100%;
		max-height:none !important;
	    transform:none;
	    bottom:auto !important;
	    top:0;
	    width:100%;
	    z-index:-1;
	    
	}

	.sidebarplaylist.active{
		opacity:1;
		z-index:0;
	}

	.content{
		height:auto;
	}

	.musicrightcontent{
		position:relative !important;
	    left:-3%;
	    width:calc(103% + 20px) !important;
	}

	.mj_section_right .sidebarplaylist li{
		padding:0.6em 2% 0.6em 0;
	}

	.music_slider_out{
		margin-top:calc(5vh + 35px);
		margin-bottom:5vh;
	}

	.music_arrows_mobile{
    	bottom:calc(100% + 2.5vh);
	    left:0;
	    right:auto;
	}

	.mj_cover_out img{
		max-width:60vw;
		max-height:30vh;
		width:auto;
		height:auto;
	}
}


@media (max-width: 950px) {
	.content{
	    border:10px solid #FFD881;
	}

	.musicrightcontent{
	    width:calc(100% + 30px) !important;
	    left:-20px;
	}

	.mj_container {
	    margin: 0 10px 0 20px !important;
	}

	.icon-playlist1.playlist{
		margin:3vh 0 1vh 25px;
	}
}


@media (max-width: 767px) {
	.leftcontentheader span {
		font-size: 1.2em;
	}

	.albumcover h4 {
		font-size: 1.2em;
	}

	.leftcontentalbum span {
		font-size: 1em;
		line-height: 40px;
	}

	.viewplaylist ul li {
		font-size: 1em;
	}

	.sidebarplaylist li{
		font-size:1.1em;
		padding:1vh 10px 1vh 0 !important;
	}

	.music_slide_mobile{
		font-size:1.2em !important;
	}

/*	.articlearrow {
		left: 0;
		margin-top: 10%;
	}

	.articlearrow .slidedown {
		left: 30px;
	}

	.articlearrow .slideup {
		left: 8px;
	}*/

}

.music_slider_out{
	position:relative;
}

.music_slider{
/*	height:270px;*/
	height:200px;
}

.music_slide, .music_slide_mobile{
	cursor:pointer;
    font-family:'bebasneue';
    font-size:1.75em;
    display:flex;
    align-items:center;
    font-weight:bold;
    text-transform:uppercase;
}

.music_slide.swiper-slide-active, .music_slide_mobile.swiper-slide-active{
    background: linear-gradient(to right, #E2D2F9, #FFD881);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.music_arrows, .music_arrows_mobile{
	bottom:calc(100% + 3vh);
	top:auto;
	margin:0 !important;
	display:flex;
}

.music_arrows .slideup, .music_arrows .slidedown, .music_arrows_mobile .slideup, .music_arrows_mobile .slidedown{
	float:none;
	position:static;
	margin-top:0;
	z-index:0;
}

.swiper-container{
	z-index:0;
}

.music_arrows .slideup, .music_arrows_mobile .slideup{
	margin:0 1em 0 0;
}



@media (max-width:1750px){
	.mj_album{
	    max-width:400px;
	}

	.album_name{
		font-size:1.5em;
	}
}

@media (max-width:1550px){
	.mj_album{
	    max-width:300px;
	}

	.albumsocial{
		bottom:28px;
	}

	.music_slider, .music_slider_mobile{
		/*height:220px;*/
		height: 150px;
	}

	.music_slide, .music_slide_mobile{
		font-size:1.5em;
	}

	.sidebarplaylist{
    	max-height:calc(100% - 80px - 120px);
    	bottom:80px;
	}

	.sidebarplaylist li{
		padding:0.6em 2% 0.6em 5%;
	}
}