/* LIVESTREAM MODAL */

	.modal-open {
 	animation: modalopen 2s ease forwards;
 	}
 
 	.modal-close {
 	animation: modalclose .5s ease forwards;	
 	}
 
 	#modal-container {
	position: fixed;
    top: 110vh;
    left: 0;
    height: 100vh;
    width: 100vw;
    border-bottom: 15px solid #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 9999;
	}
	
	#mdl-top {
	position: relative;
    margin: 0 auto;
    width: calc(100% - 30px);
    height: 12vw;
    overflow: visible;
    z-index: 1;
	}
	
	.mdl-notchleft {
    position: absolute;
    top: 0;
    left: 0;
    width: 12vw;
    height: 12vw;
    overflow: hidden;
	}
	
	.mdl-notchcenter {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(76vw - 29px);
    height: 12vw;
    overflow: visible;
    text-align: center;
	}
	
	.mdl-notchright {
    position: absolute;
    top: 0;
    right: 0;
    width: 12vw;
    height: 12vw;
    overflow: hidden;
	}
	
	.notchcolor-l-4 {
	background-image: linear-gradient(to bottom right, rgba(0,0,0,0) 50%, #000 50%);
	}
	
	.notchcolor-c-4 {
	background-color: #000;
	}
	
	.notchcolor-r-4 {
	background-image: linear-gradient(to bottom left, rgba(0,0,0,0) 50%, #000 50%);
	}
	
	#mdlcaption {
    position: absolute;
    bottom: 3vh;
    left: 0;
    width: 100%;
	}
	
	span.mdltext {
    position: relative;
    display: block;
    font-family: "coluna-rounded", sans serif;
    font-style: normal;
    text-align: center;
    font-size: 40px;
    letter-spacing: 1px;
    color: #cd3300;
	}
	
	#stream-wrapper {
    position: relative;
    top: 0;
    width: 100vw;
    height: calc(100% - 12vw);
    border-left: 15px solid #fff;
    border-right: 15px solid #fff;
    background-color: #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	}
	
	.streamcontent {
	background-color: #000;
    height: 100%;
    position: relative;
    padding-top: 1vh;
	}
	
	.streamvideo {
    position: relative;
    height: 50vw;
    width: 70%;
    margin: 0 auto;
	}
	
	.sectcirc-mod {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%,-50%);
 	width: 6vw;
 	height: 6vw;
 	max-width: 62px;
 	max-height: 62px;
 	border-radius: 50%;
 	border: 2px solid #fff;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-transition: 200ms;
 	-moz-transition: 200ms;
 	transition: 200ms;
 	}
 	
 	.sectcirc-mod:hover {
 	border: 4px solid #bf2028;
 	-webkit-transition: 200ms;
 	-moz-transition: 200ms;
 	transition: 200ms;
 	cursor: pointer;
 	}
 
 	.modclosex {
 	background-image: url('../img/mod-close-x-wht.svg');
	background-size: 100% auto;
	background-position: center;
	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%,-50%);
 	width: 25px;
 	height: 25px;
 	}
 
 	.sectcirc-mod:hover .modclosex {
 	background-image: url('../img/mod-close-x-alt.svg');
 	}	
 
 	.sectcirc-mod:after,
 	.modprev:after,
 	.modnext:after {
 	content: "CLOSE";
 	font-family: "gibson-semibold", Gibson Semibold, sans serif; 
	font-weight: 400;
	font-style: normal;
	font-size: 10px;
	letter-spacing: .5px;
	line-height: 15px;
	text-align: center;
	color: #000;
 	}
 
 	.sectcirc-mod:after {
 	content: "CLOSE";
	position: absolute;
 	top: 110%;
 	left: 50%;
 	transform: translateX(-50%);
 	height: 15px;
 	}
 	
 	@media (orientation: portrait) {
 		#stream-wrapper {
			height: calc(100vh - 12vw);
		}
		span.mdltext {
		 	
		 	font-size: 5.5vw;
		}
 	}
 
	@media (max-width: 1500px) {
		.sectcirc-mod:after {
			display: none;
		}
	}
	
	@media (max-width: 900px) {
		#modal-container {
			border-bottom: none;
		}
		#mdl-top {
			width: 100%;
		}
		.mdl-notchcenter {
			width: 76%;
		}
		#stream-wrapper {
    		border-left: none;
    		border-right: none;
		}
		span.mdltext {
		 f	ont-size: 3vw;
		}
	}

	@media (max-width: 700px) {
		.sectcirc-mod {
			border: none;
		 }
		.modclosex {
			background-size: 100% auto;
			width: 28px;
			height: 28px;
		}
	}
	
	@media (max-width: 549px) {
		.sectcirc-mod {
			top: auto;
			bottom: 0;
			transform: translateX(-50%);
		}
	}
	
	@media (min-aspect-ratio: 16/10) {
		.streamcontent {
			padding-top: 3vw;
		}
		.streamvideo {
			height: calc((100vh - 12vw) - 18vw);
			width: auto;
		}
	} 
	
	@media (max-aspect-ratio: 1/1) {
		.streamvideo {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		margin: 0;
		}
	} 
	 /* Modal Animation */
	 
	 	@-moz-keyframes modalopen {
		0%   {top: 110vh;}
		100% {top: 0vh;}
		}

		@-webkit-keyframes modalopen {
		0%   {top: 110vh;}
		100% {top: 0vh;}
		}

		keyframes modalopen {
		0%   {top: 110vh;}
		100% {top: 0vh;}
		}
	 	
	 	
	 	@-moz-keyframes modalclose {
		0%   {top: 0vh;}
		100% {top: 110vh;}
		}

		@-webkit-keyframes modalclose {
		0%   {top: 0vh;}
		100% {top: 110vh;}
		}

		keyframes modalclose {
		0%   {top: 0vh;}
		100% {top: 110vh;}
		}