:root {
    --red: #b30000;
    --white: #ffffff;
    interpolate-size: allow-keywords; /* allow animate height to and from */
}
html{
    font-size:16px;
}
body{
	display:flex;
	position:relative;
	min-height:100vh;
	padding:0;
	margin:0;
	border:0;
	box-sizing:border-box;
	width:100%;
	text-wrap: wrap;
}
h1{
    flex:1 1 25%;
    width:calc(25vw);
	display:block;
	text-decoration:none;
	position:relative;	
	justify-content: center;
	align-items: center;
	font-size:3rem;
	font-family: monospace;
	padding:10px 20px 0 20px;
	margin:0;
}
h1 span{
    color:var(--red);
}
/*********************************************
    LEFT
*********************************************/
a.left, a.right {
	width:calc(37.5vw);
	display:block;
	text-decoration:none;
	position:relative;	
	display: flex;
	justify-content: center;
	align-items: center;
	background-color:black;
	color:white;
}

a.left span, a.middle span, a.right span{
	font-family: monospace;		
	text-align:center;		
	vertical-align: middle;
	line-height: normal;
	opacity:1;
	font-size:5rem;
	/*flex: 1 1 100%;*/
	transition:all .25s ease-in-out;
	-webkit-transition:all .25s ease-in-out;
}
a.left span svg, a.middle span svg, a.right span svg{
    vertical-align: middle;
    margin: 0 auto;
    text-align: center;
    display: block;
    transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
}
a.left span p, a.middle span p, a.right span p{
	font-size:1.2rem;
	line-height: normal;
	margin:0 0 0 0;
	padding:0;
	opacity:1;
	transition:all .25s ease-in-out;
	-webkit-transition:all .25s ease-in-out;
}
a.left{
	vertical-align:bottom;
	text-align: right;
	border-right:1px solid white;
}
a.left:hover{
	
}
a.left:hover .logoleft{
    transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
}
a.left:hover span{
	font-size:5rem;
	line-height: normal;
	margin:-15px 0 0 0;
	opacity:1;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
}
a.left:hover span::first-letter{
    color:#b30000;
}
a.left:hover span p{
	font-size:2rem;
	line-height: normal;
	margin:0 0 0 0;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	color:#b30000;
}
/*********************************************
    RIGHT
*********************************************/
a.right{
	vertical-align:bottom;
	text-align: right;
	border-right:1px solid black;
}
a.right:hover{
	
}
a.right:hover .logoright{
    transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
}
a.right:hover span{
	font-size:5rem;
	line-height: normal;
	margin:-15px 0 0 0;
	opacity:1;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
}
a.right:hover span::first-letter{
    color:#b30000;
}
a.right:hover span p{
	font-size:2rem;
	line-height: normal;
	margin:0 0 0 0;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	color:#b30000;
}

a.left:hover span svg, a.middle:hover span svg, a.right:hover span svg{
    transform: scale(.5) rotate(30deg);
    transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
}


.logoleft{
	position:absolute;
	top:10%;
	right:-4px;
	font-size:3rem;
	font-family: monospace;
}
.logocenter{
	position:absolute;
	top:10%;
	left:50%;
	transform: translateX(-50%);
	font-size:3rem;
	font-family: monospace;
}
.logoright{
	position:absolute;
	top:10%;
	left:-4px;
	font-size:3rem;
	font-family: monospace;
}
	
@media screen and (max-width: 780px) {
	body{
		flex-wrap:wrap;
		flex-flow:wrap;
		justify-content:flex-start;
		align-items: flex-start;
		align-content: flex-start;
		background-color:black;
	}
	a.left, h1, a.right{
		width:100%;
		flex:1 1 100%;
		border: 0;
		padding: 20px 0;
	}
    a.left, a.right{
		border-bottom:1px solid white;
	}
	h1{
	    text-align: center;
	    background-color: white;
	}
	.logoleft, .logoright, .logocenter {
		font-size: 1.5rem;
		top: 10px;
		left: 10px;
		right:auto;
		transform:none;
	}
	a.left span p, a.right span p, a.middle span p{
		/*font-size: 1.2rem;
		line-height: normal;
		margin:0 0 0 0;
		transform: rotate(90deg);*/
		display:none;
	}
}