@media (max-width: 720px){
		/*HEADER*/
	body .top{
		width: 100%;
		height: 200px;
		max-height: 200px;
		display: flex;
	}
	body .top .logo{
		width: 250px;
		height: 250px;
		margin: 0px;
		padding: 0px;
	}
	body .top .logo img{
		transform: scale(0.6);
		margin-left: 0px;
		margin: 0px;
		padding: 0px;
		position: relative;
		top: -0%;
	}

	body .menubutton{
		display: block;
		margin: 0px;
		padding: 0px;
		height: auto;
		z-index: 100;
		background-color: transparent;
		border: none;
		animation: none;
		will-change: transform;
		transform: translateX(0%);
		position: fixed;
	}
	@keyframes move{
		from{transform: translateX(0%);}
		to{transform: translateX(500%);}
	}
	@keyframes moveback{
		from{transform: translateX(500%);}
		to{transform: translateX(0%);}
	}
	body .menubutton pre{
		will-change: transform;
		width: 30px;
		height: 6px;
		margin: 0px;
		margin-bottom: 3px;
		padding: 0px;
		border-radius: 1px;
		background-color: lime;
	}
	body .menubutton .pre1{animation: none;}
	body .menubutton .pre2{animation: none;}
	body .menubutton .pre3{animation: none;}
	@keyframes pre1{
		0%{transform: rotateZ(0deg);}
		100%{transform: rotateZ(-45deg);}
	}
	@keyframes pre2{
		0%{opacity: 100%;}
		100%{opacity: 0%;}
	}
	@keyframes pre3{
		0%{transform: rotateZ(0deg);}
		100%{transform: rotateZ(48deg);}
	}

	@keyframes pre1back{
		0%{transform: rotateZ(-45deg);}
		100%{transform: rotateZ(0deg);}
	}
	@keyframes pre2back{
		0%{opacity: 0%;}
		100%{opacity: 100%;}
	}
	@keyframes pre3back{
		0%{transform: rotateZ(48deg);}
		100%{transform: rotateZ(0deg);}
	}

	/*MENU*/
	body nav {
		will-change: transform, opacity;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		transform: translateX(-110%);
		animation: none;
		z-index: 50;
		background-color: black;
	}

	/* Slide-in animation */
	@keyframes opensesame {
		from { transform: translateX(-110%);}
		to { transform: translateX(0%);}
	}

	/* Slide-out animation */
	@keyframes closesesame {
		from { transform: translateX(0%);}
		to { transform: translateX(-110%);}
	}

	body nav .menlogo{
		display: block;
	}
	body nav .menlogo img{
		position: relative;
		width: auto;
		height: 300px;
		left: -20%;
		transform: scale(0.5);
	}
	body nav ul{
		display: block;
		align-items: none;
		justify-content: space-evenly;
		margin-left: 10px;
		color: lime;
		background-color: black;
		text-align: left;
	}
	body nav ul li{
		height: auto;
		padding: 10px;
		text-align: left;
		text-justify: left;
		width: 200px;
	}
	body nav ul li a{
		height: auto;
		color: white;
		padding: 0px;
		text-align: left;
		text-justify: left;
	}

	/*MAIN CONTENT*/
	body .page{
		z-index: 0;
	}
	body .page div{
		width: 100%;
		margin-bottom: 120px;

	}
	body .page .up{
		display: none;
	}

	/*MINI ABOUT*/
	body .page .About{
		height: auto;
		border: none;
		padding: 5px;
		box-shadow: 3px 1px 10px 2px lime;
		background-color: #0000001f;
	}

	body .page .About .smallabout{
		width: 90%;
	}

	body .page .About .smallabout h2{
		font-size: 60px;
	}
	body .page .About .smallabout hr{
			width: 50%;
	}

	body .page .About .smallabout p{
		padding: 5px;
	}

	body .page .About .abim{
		display: none;
	}

	/*ARTISTS*/
	body .page .artists{
		display: block;
		padding: 5px;
	}

	body .page .artists .cont{
		width: 100%;
		padding: 10px;
		border-radius: 10px 0px 0px 10px;
	}
	body .page .artists .cont .intro{
		display: block;
		margin-bottom: 150px;
		height: auto;
	}

	/*ARTIST IMAGE*/
	body .page .artists .cont .intro .im{
		margin: 0px;
		margin-bottom: 20px;
		width: 170px;
		height: 170px;
	}
	body .page .artists .cont .intro .im img{
	width: 170px;
	height: 170px;
	border-radius: 50%;
	}

	/*INTRO*/
	body .page .artists .cont .intro .info{
		width: 80%;
	}

	/*Who is [Artist name]*/
	body .page .artists .cont p{
		width: 90%;
		margin-left: 0%;
		margin-right: 0%;
		margin-top: 50px;
		padding: 5px;
		font-size: 20px;
	}
	/*VID*/
	body .page .vid{
		height: auto;
	}
	body .page .vid video{
		opacity: 100%;
	}

	/*DEMOS*/
	body .page .demos h2{
		transform: scale(2.5);
	}
	/*Demo Container*/
	body .page .demos .demo{
		width: 100%;
		height: auto;
		margin: 0px;
		display: block;
		border-radius: 10px 10px 0px 0px;
	}

	body .page .demos .demo .demoimg{
		width: 100%;
		height: 300px;
		padding: 0px;
		margin: 0px;
		background-size: cover;
		border-radius: 10px 10px 0px 0px;
	}

	body .page .demos .demo .demoinfo{
		width: 60%;
		padding: 10px;
		margin: 20px;
		color: black;
	}
	body .page .demos .demo .demoinfo p{
		text-justify: center;
	}
	/*GALLERY*/
	body .page .gallery{
		height: auto;
		/*display: flex;*/
		/*background-color: black;*/
	}

	body .page .gallery ul{
		margin: 0px;
		padding: 0px;
		list-style: none;
	}
	body .page .gallery ul li{
		display: inline-block;
		margin: 0px;
		padding: 0px;
		margin-left: 10%;
		margin-right: 10%;
	}
	body .page .gallery .cont{
		width: 300px;
		height: 300px;
		margin: 0 0 auto;
		margin-top: 0px;
		padding: 0px;
		border-spacing: 0px;
		background-color: white;
	}
	body .page .gallery .cont a{
		margin: 0px;
		padding: 0px;
	}
	body .page .gallery .cont a img{
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
	}

	body footer{
		width: 100%;
		overflow-x: hidden;
		background-color: black;
	}

	body footer p{
		color: white;
	}

	body footer .wd {
		font-family: play;
		font-weight: bold;
	}
	body footer .wd a{
		color: lime;
	}

}

/*TABLET DEVICES===============================*/
@media (min-width: 768px) and (max-width: 1024px){
	/*HEADER*/
	body .top{
		width: 100%;
		height: 200px;
		max-height: 200px;
		display: flex;
	}
	body .top .logo{
		width: 250px;
		height: 250px;
		margin: 0px;
		padding: 0px;
	}
	body .top .logo img{
		transform: scale(0.8);
		margin-left: 0px;
		margin: 0px;
		padding: 0px;
		position: relative;
	}

	/*MAIN CONTENT*/
	body .page{
		z-index: 0;
	}
	body .page div{
		width: 100%;
		margin-bottom: 120px;

	}
	body .page .up{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 70px;
		height: 70px;
		border: none;
		border-radius: 50% 0% 0% 50%;
		position: fixed;
		right: 0%;
		top: 40%;
		background-color: black;
		font-size: 50px;
		color: lime;
	}

	/*MINI ABOUT*/
	body .page .About{
		height: auto;
		border: none;
		padding: 5px;
		box-shadow: 3px 1px 10px 2px lime;
		background-color: #0000001f;
		animation: clr 10s infinite;
	}
	@keyframes clr{
		0%{box-shadow: 3px 1px 10px 2px lime;}
		25%{box-shadow: 3px 1px 10px 2px orangered;}
		50%{box-shadow: 3px 1px 10px 2px white;}
		75%{box-shadow: 3px 1px 10px 2px red;}
		100%{box-shadow: 3px 1px 10px 2px lime;}
	}

	body .page .About .smallabout{
		width: 90%;
		transform: scale(0.9);
	}

	body .page .About .smallabout h2{
		font-size: 60px;
	}
	body .page .About .smallabout hr{
			width: 50%;
	}

	body .page .About .smallabout p{
		padding: 5px;
	}

	body .page .About .abim{
		display: none;
	}

	/*ARTISTS*/
	body .page .artists{
		display: block;
		padding: 5px;
	}

	body .page .artists .cont{
		width: 100%;
		padding: 10px;
		border-radius: 10px 0px 0px 10px;
	}
	body .page .artists .cont .intro{
		display: block;
		margin-bottom: 150px;
		height: auto;
	}

	/*ARTIST IMAGE*/
	body .page .artists .cont .intro .im{
		margin: 0px;
		margin-bottom: 50px;
		width: 300px;
		height: 300px;
	}
	body .page .artists .cont .intro .im img{
		width: 300px;
		height: 300px;
	}

	/*INTRO*/
	body .page .artists .cont .intro .info{
		width: 80%;
		display: block;
	}

	/*Who is [Artist name]*/
	body .page .h3{
		margin: 0px;
		margin-left: 0;
		width: auto;
		text-align: left;
		display: flex;
		justify-content: flex-end;
		align-items: center;

	}
	body .page .artists .cont p{
		width: 90%;
		margin-left: 0%;
		margin-right: 0%;
		margin-top: 50px;
		padding: 5px;
		font-size: 20px;
	}

	/*DEMOS*/
	body .page .demos h2{
		transform: scale(2.5);
	}
	/*Demo Container*/
	body .page .demos .demo{
		width: 80%;
		height: auto;
		margin: 0px;
		margin-left: 10%;
		margin-right: 10%;
		display: block;
		border-radius: 10px 10px 0px 0px;
	}

	body .page .demos .demo .demoimg{
		width: 100%;
		height: 200px;
		padding: 0px;
		margin: 0px;
		border-radius: 10px 10px 0px 0px;
	}

	body .page .demos .demo .demoinfo{
		width: 60%;
		padding: 10px;
		margin: 20px;
		color: black;
	}
	body .page .demos .demo .demoinfo p{
		text-justify: center;
	}
	/*GALLERY*/
	body .page .gallery{
		height: auto;
		display: inline-table;
		margin-left: -5%;
		margin-right: 0%;
	}

	body .page .gallery ul{
		margin: 0px;
		list-style: none;
	}
	body .page .gallery ul li{
		display: inline-block;
		margin: 0px;
		padding: 0px;
	}
	body .page .gallery .cont{
		width: 300px;
		height: 300px;
		margin: 0 0 auto;
		margin-top: 0px;
		padding: 0px;
		border-spacing: 0px;
		background-color: white;
	}
	body .page .gallery .cont a{
		margin: 0px;
		padding: 0px;
	}
	body .page .gallery .cont a img{
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
	}

	body footer{
		width: 100%;
		overflow-x: hidden;
		background-color: black;
	}

	body footer p{
		color: white;
	}

	body footer .wd {
		font-family: play;
		font-weight: bold;
	}
	body footer .wd a{
		color: lime;
	}
}