body {
	padding:0;
	margin:0;
	font-family:sans-serif;
	background-color:thistle;
}
#box {
	display:flex;
	justify-content:center;
	align-items:center;
	height:100vh;
}
.content {
	position:absolute;
	width:60%;
	height:200px;
	border:5px solid red;
	opacity:0;
	text-align:center;
	transition:.5s;
	overflow:hidden;
}
.content.active {
	opacity:1;
}
.content:first-child {
	background-color:black;
	color:white;
}
.content:nth-child(2) {
	background-color:white;
	color:black;
}
.content:last-child {
	background-color:blanchedalmond;
	color:cadetblue;
}
h1 {
	position:relative;
	width:100%;
	height:50px;
	transition:.5s ease-out .5s;
	top:-60px;
}
.content.active h1 {
	top:0px;
}
p {
	position:relative;
	width:100%;
	height:50px;
	left:-300px;
	transition:1s ease-out .5s;
}
@media (min-width:1000px) {
	.content {
	width:1000px;
	height:300px;
	font-size:1.5rem;
}
h1 {
	width:1000px;
	height:100px;
	top:-100px;
}
p {
	width:1000px;
	height:100px;
	left:-1000px;
}
}.content.active p {
	left:0;
}
.btn {
	cursor:pointer;
	transition:.5s;
}
#left:hover {
	border-right:40px solid white;
	transition:.3s;
}
#right:hover {
	border-left:40px solid white;
	transition:.3s;
}
#left {
	position:absolute;
	width:0;
	height:0;
	border:40px solid transparent;
	border-right:40px solid black;
	left:0;
	top:50%;
	margin-top:-20px;
	transition:1s;
}
#right {
	position:absolute;
	width:0;
	height:0;
	border:40px solid transparent;
	border-left:40px solid black;
	right:0;
	top:50%;
	margin-top:-20px;
	transition:1s;
}
@media(max-width:600px) {
	#left {
	border-right:20px solid black;
}
#right {
	border-left:20px solid black;
}
#left:hover {
	border-right:20px solid white;
}
#right:hover {
	border-left:20px solid white;
}
}