/* ==========================================================================
CUSTOM RESPONSIVE CSS
========================================================================== */

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	section.live-stream {
	    padding-top: 15px;
	    padding-bottom: 15px;
	    margin-right: 25%;
	    height: auto;
	    height: 100vh;
	}
	.live-stream-control-panel {
	    position: fixed;
	    top: 0;
	    right: 0;
	    /*left: 0;*/
	    bottom: 0;
	    z-index: 1030;
	    width: 25%;
	    overflow-y: scroll;
	}
	.live-stream-logo {
	    width: 120px;
	}
	.event-creative-background {
		border-right: 10px solid #b5a160;
	}
	.event-title {
	    position: absolute;
	    top: 10%;
	    left: 10%;
	    text-align: left;
	    padding-top: 0;
	}
	.event-title h1 {
	    font-size: 3.2rem;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.event-title {
	    position: absolute;
	    top: 15%;
	    left: 20%;
	    text-align: left;
	}
	.event-title h1 {
	    font-size: 3.6rem;
	}
}