body {
	background-color:black;
	margin:0;
	padding:0;
}

textarea, video, canvas {
	/* float:left; */
	width:100%;
	height:auto
}

.player-container {
	height: 70vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

.player-container .center {
	position: relative;
	width: 100%;
	height: 100%;
	/* padding: 20px; */
}


.player-container .frame {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index:10;
}

.player-container .video-container {
	position: absolute;
	top: 0;
	overflow: visible;
}

#player-error {
	visibility: hidden;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 30px;
	z-index: 30;
}

#content2, #content3, #content4 {
	display: none;
}

#reset, #sendPhoto {
	/* width: 45%; */
}

.actions-container {
	position: absolute;
	bottom: 50px;
	width: 100%;
	z-index: 15;
	background-color:black;
	padding:10px 0;
}

video {
	max-width:1080px;
}

.character-counter {
	position: absolute;
	right: 8px;
	bottom: 0;
}

.flex {
	display: flex;
	width: 100%;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}

.align-center {
	align-items: center;
}

.px-1 {
	padding-left: 4px;
	padding-right: 4px;
}

.px-2 {
	padding-left: 8px;
	padding-right: 8px;
}

.material-icons.left {
	margin-right: 8px;
}

.video-overlay{
	width: 100%;
	position: absolute;
	top: 100vw;
	left: 0;
	z-index: 1;
	height: calc(100% - 80vw);
	background-color: black;
}

.textblock{
	height: 100%;
	width: 100%;
	top: 10vw;
	position: absolute;
}

.flex-column {
	flex-direction: column;
}


.input-field textarea:focus + label {
	color: #f8bbd0 !important;
}
.input-field textarea:focus {
	border-bottom: 1px solid #f8bbd0 !important;
	box-shadow: 0 1px 0 0 #f8bbd0 !important;
}

.input-field .prefix.active {
	color: #f8bbd0;
}

.btn-large {
	padding: 0 22px !important;
}