@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins-Regular.ttf");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Poppins-Bold";
    src: url("fonts/Poppins-Bold.ttf");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Poppins-SemiBold";
    src: url("fonts/Poppins-SemiBold.ttf");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Poppins-Regular";
    src: url("fonts/Poppins-Regular.ttf");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: "Poppins-Medium";
    src: url("fonts/Poppins-Medium.ttf");
    font-style: normal;
    font-weight: 400;
}


body, div {
	margin:0;
	padding:0;
	border:0;
}

#frame {
	
	width:100vw;
}

#content{
	width:100%;
	height:100%;
	position:relative;
}

#videocontent{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
}

#videooverlay {
	display:block;
	position:relative;
}


#content canvas{
	width:100vw;
	height:100vh;
	display:block;
	margin:0 auto;
}

@media screen and (min-aspect-ratio: 2/1) {
	#content canvas {
		width:200vh;
		height:100vh;
		margin:0 auto;
	}
}

@media screen and (max-aspect-ratio:4/3) {
	#content canvas {
		width:100vw;
		height:75vw;
		margin:auto 0;
	}
}

@media screen and (min-width: 500px) and (max-width:800px) {

}


body {
	font-family:"Poppins";
}

.fontload {
	position:absolute;
	top:0;
	left:0;
}

.poppins {
	font-family:"Poppins";
}
.poppins-bold {
	font-family:"Poppins-Bold";
}
.poppins-medium {
	font-family:"Poppins-Medium";
}


#frame{
    max-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
}
*{
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#captions {
	font-family:"Poppins";
	font-weight:600;
	color:#FFFFFF;
	text-align:center;
	border-radius:0 0 1.43em 1.43em;
	background-color:rgba(0,53,124,0.9);
	z-index:10;
	display:none;
}

#captiontext {
	padding:0 0.5em;
	margin:auto;
}

#captioncontainer {
	position:absolute;
	display:flex;
	width:100%;
	justify-content:center;
	pointer-events:none;
}

video::cue {
	font-family:"Poppins";
	font-weight:500;
	color:#FFFFFF;
}

#videoplay {
	position:relative;
	border:none;
	margin:0 auto;
	left:0;
	background-repeat:no-repeat;
	background-size:30%;
	background-position:50% 50%;
	background-color:transparent;
	background-image:none;
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-focus-ring-color: rgba(0,0,0,0);
}

#videoplay.pause {
	background-color:rgba(155,155,155,0.35);
	background-image:url(images/button_overlay_play.png);
}

#videooverlay {
	height:100%;
}

#videocontent {
	display:block;
	margin:0 auto;
}