body {
	overflow: hidden; 
}

#bgimg {
position: fixed;
    z-index: -1;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}
#logo {
margin-left:50px;
	margin-top:50px;
}

#logo img {
  width: 200px;
  height: auto;
}
#logo-responsive {
	display:none;
}

.mid-pic {
width: 800px;
  height: auto;
}

#stage {
  max-width: 900px;
top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}




/* portrait screens */

@media only screen and (max-width: 900px) {
	
.mid-pic {
width: 90vw;
  height: auto;
}
	
#logo {
display:none;
}
#logo-responsive {
	display:block;
    text-align: center;
	margin-left: 0px;
  margin-top: 0px;

}
	#logo-responsive img {
max-width: 25vw;
}
	}

@media only screen and (max-width: 767px) {
	
#logo img {
  width: 150px;
  height: auto;
}
	}

@media only screen and (max-width: 667px) {
#logo {
      margin-left: 40px;
        margin-top: 40px;
}
    .mid-pic {
        width: 92vw;

    }
	}

@media only screen and (max-height: 600px)   {
	body {
	overflow: scroll 
}	
	
	#real-body {
    margin-top: 70px;
    margin-bottom: 70px;
}
	
#stage {
  max-width: 900px;
top: 0%;
left: -50%;
        transform: translateX(50%);
  position: relative;
	        text-align: center;
	        margin-top: 60px;
	        margin-bottom: 60px;
}
	
	    .mid-pic {
        width: 70vw;
        height: auto;
    }
	
	}