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

Body{
margin:0;
padding:0;
font-size:100%;
line-height:1.6;
font-family:Arial, Helvetica, sans-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:#FFFFFF;
}

.layer img{
position:absolute;
width:35%;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}


.layer h1{
font-size:2em;
}

.bottom{
background:#222222;
z-index:1;
}

.bottom .content-body{
right:5%;
}


.bottom h1{
color:#FFCC00;
}

.top{
background-color:#00FF99;
color:#CC0000;
z-index:2;
width:50vw;
}


.top .content-body{
left: 5%;
color: #006699;
}

.handle{
position: absolute;
height: 100%;
display: block;
background-color:#FF9900;
width: 5px;
top: 0;
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%;
}
}