@charset "utf-8";
/* CSS Document */

body{
	margin:0;
	padding:0;
	font-size:100%;
	line-height:1.6;
	font-family: Arial, Helvetica, san-serif;
	}
	
#wrapper{
	position:relative;
	width:100%;
	min-height:55vw;
	overflow: hidden;
	}
	
.layer{
	position:absolute;
	width:100vw;
	min-height:55vw;
	overflow:hidden;
	}
	
.layer .content-wrap{
	position:absolute;
	width:100vw;
	min-height:55vw;
	}
	
.layer .content-body{
	width:25%;
	position:absolute;
	top:50%;
	text-align: center;
	transform:translateY(-50%);
	color:#fff;
	}

.layer img{
	position: absolute;
	width:35;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	}
	
.layer h1{
	font-size:2em;
	}
	
.bottom {
	background:#222;
	z-index:1;
	}
	
.bottom .content-body{
	right:5%;
	}
	
.bottom h1{
	color:#fdab00;
	}
	
.top{
	background:#eee;
	color:#222;
	z-index:2;
	width:50vw;
	}	
	
.top .content-body{
	left:5%;
	color:#222;
	}
	
.handle{
	position:absolute;
	height:100%;
	display:block;
	background-color:#fdab00;
	width:5px;
	top0;
	left:50%;
	z-index:3;
	}
	
.skewed .handle{
	top:50%;
	transform:rotate(30deg) translateY(-50%);
	height:200%;
	transform-origin:top;
	}
	
.skewed .top{
	transform: skew(-30deg);
	margin-left:-1000px;
	width: calc(50vw + 1000px);
	}
	
.skewed .top .content-wrap{
	transform:skew(30deg);
	margin-left:1000px;
	}
	
@media(max-width:768px){
	body{
		font-size:75%;
		}
	}