html, body { 
	background-color: #333;
	margin:0;
	padding:0;
	height:100%;
	overflow:hidden;
	font-family:Arial,Helvetica,sans-serif;
	font-size:100%;
	font-smoothing:antialiased;
	font-smooth:always;
}



.mainWrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

	.myStream {
		position: absolute;
		bottom: 1em;
		right: 1em;
		width: 30vh;
		height: 22vh;
		border: 1px solid;
		transform: translateY(calc(100% + 1em + 1px));
		transition: transform 1s;
	}

	.myStream.show {transform: translateY(0);}

		.myStream > video {
			width: 100%;
			height: 100%;
			border: none;
		}

		#minimizeMyStream {
			position: absolute;
			z-index: 1;
			top: .5em;
			right: 1em;
			width: 1em;
			cursor: pointer;
		}

			#minimizeMyStream > svg {
				width: 100%;
				filter: drop-shadow( 0 0 .25em #000);
			}
			#minimizeMyStream > svg > path {fill: #fff;}

	#myStreamButton {
		position: absolute;
		bottom: 20vh;
		right: 0;
		padding: 0 1em 0 0;
		transform: translateX(100%);
		transition: transform 1s;
		cursor: pointer;
		z-index: 1;
	}
	#myStreamButton.show {transform: translateX(0);}
		#myStreamButton > svg {
			width: 2em;
			filter: drop-shadow( 0 0 .5em #000);
		}
			#myStreamButton > svg > path {fill: #fff;}

	.peersWrapper {
		position: relative;
		width: 100%;
		height: 100%;
		/*overflow-y: auto;*/
	}

		#peersWindows {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
		}

			.mediaWrapper.mw1 {
				width: 100%;
				height: 100%;
			}
			.mediaWrapper.mw2 {
				width: 50%;
				height: 100%;
			}
			.mediaWrapper.mw3 {
				width: 50%;
				height: 50%;
			}
			.mediaWrapper.mw4 {
				width: 33.33%;
				height: 33.33%;
			}
			.mediaWrapper.mw5 {
				width: 25%;
				height: 25%;
			}

			.mediaWrapper > video {
				width: calc(100% - 2px);
				height: calc(100% - 2px);
				border: 1px solid black;
			}