html,body{
	height:100%;
}
body{
	margin:0;
	background:#333 url(../img/dark_carbon.png) top center repeat;
	color:#ccc;
	box-sizing:border-box;
	font-size:16px;
	font-family:'Montserrat',Arial,Helvetica,FreeSans,sans-serif;
}
iframe{
	border:none;
	width:100%;
	height:100%;
}
::-moz-selection{
	background:#990000;
	color:black;
}
::selection{
	background:#990000;
	color:black;
}
.global-container{
	display:grid;
	padding:10px;
	grid-template-columns:1fr 340px;
	grid-template-rows:auto 1fr;
	grid-template-areas:
		"stream stream"
		"content content";
	grid-column-gap:10px;
	column-gap:10px;
	grid-row-gap:10px;
	row-gap:10px;
	min-height:100%;
	box-sizing:border-box;
}
.global-container.wide-stream{
	grid-template-areas:
		"stream stream"
		"content chat";
}
.global-container.standard-stream{
	grid-template-areas:
		"stream chat"
		"content chat";
}
	.stream-container{
		position:relative;
		grid-area:stream;
		height:53.6vh;
		border:1px solid #999;
		border-radius:5px;
		background:rgba(0,0,0,0.4);
		overflow:hidden;
	}
		.twitch-stream{
			height:100%;
		}
		.stream-actions{
			position:absolute;
			top:10px;
			right:10px;
			opacity:0;
			transition:0.5s;
		}
		.stream-actions.visible{
			opacity:1;
		}
			.stream-change{
				position:absolute;
				top:60px;
				right:0;
				display:flex;
			}
			.stream-change input{
				border-top-right-radius:0;
				border-bottom-right-radius:0;
			}
			.stream-change .btn{
				border-top-left-radius:0;
				border-bottom-left-radius:0;
			}
	.page-container{
		grid-area:content;
		padding:20px;
		min-height:100px;
		border:1px solid #999;
		border-radius:5px;
		background:rgba(0,0,0,0.4);
		overflow-x:hidden;
		overflow-y:auto;
	}
		.page-container h3{
			text-align:center;
		}
	.global-container.wide-stream .offline-content,
	.global-container.standard-stream .offline-content{
		display:none;
	}
	.global-container .online-content{
		display:none;
	}
	.global-container.wide-stream .online-content,
	.global-container.standard-stream .online-content{
		display:block;
	}
	.chat-container{
		display:none;
		grid-area:chat;
		border:1px solid #999;
		border-radius:5px;
		background:rgba(0,0,0,0.4);
		overflow:hidden;
	}
	.global-container.wide-stream .chat-container,
	.global-container.standard-stream .chat-container{
		display:block;
	}
.btn{
	cursor:pointer;
	display:inline-flex;
	padding:15px;
	border:1px solid #444;
	background:#222;
	border-radius:5px;
}
.btn:hover{
	background:#444;
	border-color:#666;
}
input{
	background:#222;
	border:1px solid #444;
	border-radius:5px;
	color:#eee;
	padding:5px 10px;
}
input:focus{
	background:#444;
	border-color:#666;
	outline:none;
}
.logo{
	display:flex;
	height:100%;
	justify-content:center;
	align-items:center;
	padding:20px;
	box-sizing:border-box;
}
	.logo-container{
		display:flex;
		position:relative;
		height:100%;
		width:1553px;
	}
		.logo-container img{
			width:auto;
			height:100%;
		}
		.logo-container:before,
		.logo-container:after{
			content:'';
			display:block;
			width:50%;
			z-index:1;
		}
		.logo-container:before{
			left:0;
		}
		.logo-container:after{
			right:0;
		}
		.logo-container.animate:before,
		.logo-container.animate:after{
			animation:mask 2s forwards;
		}
		.logo-container.reinit:before,
		.logo-container.reinit:after{
			animation:maskinit 1s forwards;
		}
		.logo-container .logo-bg{
			flex:1 0 auto;
			background:url(../img/redoleno.png) center center no-repeat;
			background-size:auto 100%;
		}
	.fred,
	.fou{
		position:absolute;
		height:100%;
		top:0;
		z-index:10;
	}
	.fred{
		left:34%;
	}
	.fou{
		right:34%;
	}
	.fred.animage img,
	.fou.animage img{
		animation:animage 2s forwards;
	}
	.fred.animate{
		animation:fred 2s forwards;
	}
	.fou.animate{
		animation:fou 2s forwards;
	}
	.fred.reinit{
		animation:fredinit 1s forwards;
	}
	.fou.reinit{
		animation:fouinit 1s forwards;
	}
@keyframes animage{
	0%{
		transform:rotate(-3600deg);
	}
	90%{
		transform:rotate(15deg);
	}
	98%{
		transform:rotate(15deg);
	}
	100%{
		transform:rotate(0deg);
	}
}
@keyframes mask{
	0%{
		width:50%;
	}
	5%{
		width:50%;
	}
	95%{
		width:0;
	}
	100%{
		width:0;
	}
}
@keyframes fred{
	0%{
		left:34%;
	}
	5%{
		left:35%;
	}
	93%{
		left:-0.8%;
	}
	97%{
		left:0.5%;
	}
	100%{
		left:0;
	}
}
@keyframes fou{
	0%{
		right:34%;
	}
	5%{
		right:35%;
	}
	93%{
		right:-0.8%;
	}
	97%{
		right:0.5%;
	}
	100%{
		right:0;
	}
}
@keyframes fouinit{
	0%{
		right:0;
	}
	100%{
		right:34%;
	}
}
@keyframes fredinit{
	0%{
		left:0;
	}
	100%{
		left:34%;
	}
}
@keyframes maskinit{
	0%{
		width:0;
	}
	100%{
		width:50%;
	}
}
.hide{
	display:none;
}
@media (max-width: 768px){
	.global-container{
		grid-template-columns:1fr;
		grid-template-rows:auto 1fr 1fr;
		grid-template-areas:
			"stream"
			"content"
			"content";
	}
	.global-container.wide-stream,
	.global-container.standard-stream{
		grid-template-areas:
			"stream"
			"chat"
			"content";
	}
}