@font-face {
  font-family:cblack;
  src: url(fonts/PeaceSansWebfont.ttf);
}
.container22{
	position:absolute;
	float:bottom;
	bottom:0px;
	width: 100%;
	background:rgb(255,255,255,0.5);
	
	padding:20px;
}
.container22c{
	position:absolute;
	float:top;
	top:190px;
	width: 100%;
	
	background:rgb(255,255,255,0.3);
	border:0px solid green;
	padding:20px;
}
.text22{
	font-family: cblack;
	font-size: 50px;
	text-align: center;
	-webkit-text-stroke-width: 2px;
            -webkit-text-stroke-color: black;

	padding: 0;
	color:gold;
	border:0px solid black;
	margin:auto 0;
	transform: translateX(-300%);
	opacity: 0;
	text-shadow: 0 4px white, 0 2px gold, 0 2px gold; 
	animation: slide-in-anim 1.5s ease-out forwards;
}

@keyframes slide-in-anim {
	20% {
		opacity: 0;
	}
	60% {
		transform: translateX(-45%);
	}
	75% {
		transform: translateX(-52%);
	}
	100% {
		opacity: 1;
		transform: translateX(0%);
	}
}
@media only screen and (max-width: 768px) {
.text22{
	text-align:left;
	font-size: 28px;	
}
}
@media only screen and (max-width: 768px) {
.container22{
	position:absolute;
	float:bottom;
	bottom:0px;
	width: 100%;
	background:rgb(255,255,255,0.5);
	padding:20px;
	padding-left:100px;
	border:0px solid green;
}
.container22c{
	position:absolute;
	float:top;
	top:200px;
	width: 100%;
	
	background:rgb(255,255,255,0.3);
	border:0px solid green;
	padding:20px;
}
}
@media only screen and (max-width: 500px) {
	
	.container22{
	position:absolute;
	float:bottom;
	bottom:0px;
	width: 100%;
	background:rgb(255,255,255,0.5);
	padding:20px;
	padding-left:100px;
	border:0px solid green;
}
.container22c{
	position:absolute;
	float:top;
	top:100px;
	width: 100%;
	
	background:rgb(255,255,255,0.3);
	border:0px solid green;
	padding:20px;
}
.text22{
	text-align:left;
	font-size: 24px;
	text-shadow: 0 2px white, 0 2px gold, 0 2px gold;
	
	
}
}