#subscriber {
    width: 100%;
    height: 50;
    z-index: 10;
	padding:0 5px;
}

#videos {
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

#publisher {
    position: absolute;
    width: 180px;
    height: 120px;
    bottom: 10px;
    left: 10px;
    z-index: 20;
    border: 3px solid white;
    border-radius: 3px;
}


:root {
  /*--clr-p: #ed771e;*/
  --clr-p: #510168;
  --clr-s: #ed771e;
}
body  {
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.altru-box {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.box.controls{
	position: relative;
}
.box.screen {
	position: relative;
	width: 100%;
	background: #23262a;
}
.box.screen::after {
	position: absolute;
	content: "";
	font-weight: 900;
	font-size: 3rem;
	font-family: -system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	text-align: center;
	color: rgba(0, 0, 0,  .3);
}
.box.preview {
	position: relative;
	width: 16.6%;
	background: #23262a;
}
.box__btns {
	position: relative;
	cursor: pointer;
	overflow: hidden;
	background: radial-gradient(#510168dd, #510168);
	display: flex;
	justify-content: center;
	align-items: center;
	height: 33.3333%;
	/*width: 70%;*/
	border-bottom: 2px solid rgba(255, 255, 255, .15);
	transition: all .25s;
}
.box__btns img {
	width: 100px;
	/*transform: scale(3);*/
	/*filter: invert(1);*/
	transition: all .25s;
}
.box__btns svg path {
	transition: all .25s;
	fill: #fff;
}
.box__btns svg {
	transform: scale(.75);
}
/*.box__btns:hover svg path {
	fill: var(--clr-s);
}*/

@media screen and (orientation:portrait) {
	.box:nth-child(1) {
		order: 1;
	}
	.box:nth-child(2) {
		order: 2;
	}
	.box:nth-child(3) {
		order: 3;
	}
	.controls {
		flex: 1 0 50%;
	}
	.box.controls{
		height: 50vh;
	}
	.box.screen {
		height: 50vh;
	}
	.brl {
		border-left: 2px solid rgba(255, 255, 255, .15);
	}
	#videos{
	left: 2%;
	bottom: 52%;
	height: 50vh;
	}

}
@media screen and (orientation:landscape) {
	.box.controls{
		height: 100vh;
	}
	.box.screen {
		height: 100vh;
	}
	.box:nth-child(1) {
		flex: 1 0 65%;
		order: 2;
	}
	.box:nth-child(2) {
		flex: 1 0 10%;
		order: 1;
	}
	.box:nth-child(3) {
		flex: 1 0 10%;
		order: 3;
	}
	#videos{
	left: 15%;
	bottom: 2%;
	}
}