* {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    border: 0;
    padding: 0;}
body {
    background-color: black;}
.shell {
    position: absolute;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-height: 100%;
    overflow: hidden;}
.burn {
    position: absolute;
    pointer-events: none;
    z-index: 999;
    min-height: 100%;
    min-width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);}
.header {
    position: absolute;
    z-index: 998;
    width: 80%;
    height: 15%;
    top: 3%;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);}
.logo {
    position: relative;
    width: 50%;
    max-height: 100%;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);}
.ig,.tw,.cart {
    position: absolute;
    width: 7%;
    top: 40%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);}
.ig {
    right: 0;}
.tw {
    right: 10%;}
.cart {
    right: 20%;}
.footer {
    position: absolute;
    z-index: 999;
    width: 80%;
    height: 15%;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);}
.music,.vid {
    position: absolute;
    text-decoration: none;
    color: white;
    font-family: sans-serif;
    font-weight: 900;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);}
.music {
    left: 0;}
.vid {
    right: 0;}
.beenhad {
    position: absolute;
    height: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);}
.youtube {
	position: relative;
    display: block;
	padding-bottom: 48%; /* 16:9 */
	padding-top: 25px;
	height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);}
.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;}
.bhb {
    position: absolute;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    display: none;
    background-color: #f9668f;}
.sc {
    position: absolute;
    width: 80%;
    height: 55%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);}
.music-div {
    position: absolute;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    display: none;
    background-color: #5a9aa6;}
.vidslide {
    position: absolute;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    display: none;
    background-color: #9d3c43;}
.fotorama {
    position: absolute;
    width: 95%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);}

@media only screen and (min-aspect-ratio: 1/1) {
    body {
        height: 100vh;
        width: 100vw;
        overflow: hidden;}
    .header {
        height: 10%;}
    .logo {
        height: 100%;
        width: auto;}
    .ig,.tw,.cart {
        width: 3%;}
    .music {
        left: 25%;}
    .vid {
        right: 25%;}
    .youtube {
        width: 60%;
        display: block;
        padding-bottom: 30%; /* 16:9 */;
        z-index: 5;}
    .fotorama {
        width: auto;}
}