@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Slabo+27px&display=swap);
body {
	margin: 0;
}
.top-left {
	background: #C5DACC;
	width: 50%;
	height: 0;
	position: relative;
	float: left;
	animation: cover0 1s ease-in-out  forwards;
}
.top-left:after {
	content: "";
	display: block;
	position: absolute;
	background: #C5DACC;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	animation: cover1 1s ease-in-out  forwards;
}
.top-right:after {
	content: "";
	display: block;
	position: absolute;
	background: #F9EBA1;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	animation: cover1 1s ease-in-out forwards;
}
.top-right {
	background: #F9EBA1;
	width: 50%;
	height: 0;
	position: absolute;
	left: 50%;
	bottom: auto;
	bottom: 0;
	animation: cover0 1s ease-in-out forwards;
}
@keyframes cover0 {
 0% {
 height:0;
}
 100% {
 height:100vh;
}
}
 @keyframes cover1 {
 0% {
 width:100%;
}
 100% {
 width:0;
}
}
@media only screen and (max-width:736px) {
.top-left {
	background: #C5DACC;
	width: 0;
	height: 50vh;
	position: relative;
	float: none;
	animation: cover0 1s ease-in-out forwards;
}
.top-right {
	background: #F9EBA1;
	width: 0;
	left: auto !important;
	right: 0;
	height: 50vh;
	float: none;
	top: 50%;
	bottom: auto;
	animation: cover0 1s ease-in-out forwards;
}
 @keyframes cover0 {
 0% {
 width:0;
}
 100% {
 width:100%;
}
}
 @keyframes cover1 {
 0% {
 width:100%;
}
 100% {
 width:0;
}
}
}
.top-left h1, .top-right h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
 -webkit- transform: translateY(-50%) translateX(-50%);
	text-align: center;
	animation: opaopa 1s ease-in-out 1s forwards;
	opacity: 0;
}
@keyframes opaopa {
 0% {
 opacity:0;
}
 100% {
 opacity:1;
}
}
.top-left h1 span {
	font-family: 'Slabo 27px', serif !important;
	display: block;
	border: 1px solid #333;
	width: 100px;
	padding: 10px 0;
	margin: 20px auto 0 auto;
}
.top-right h1 span {
	font-family: 'Slabo 27px', serif !important;
	display: block;
	padding: 10px 0;
	margin-top: 20px;
}
.top-left h1 a, .top-right h1 a {
	transition: all 0.3s ease-in-out;
}
.top-left h1 a:hover, .top-right h1 a:hover {
	opacity: 0.7;
}
.top-left h1 img, .top-right h1 img {
	width: 75%;
}