.fadein { position:relative; height:300px; width:400px; }
.fadein img { position:absolute; left:0; top:0; }
#logo {
 	-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 3s; /* Firefox < 16 */
    -ms-animation: fadein 3s; /* Internet Explorer */
    -o-animation: fadein 3s; /* Opera < 12.1 */
    animation: fadein 3s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Slidebox slide in from bottom */
#slidebox {
 	position: absolute;
	height:300px;
	width:100%;
    animation: slideboxup 1.0s ease-out;
	-webkit-animation: slideboxup 1.0s ease-out;
	-moz-animation: slideboxup 1.0s ease-out;	
	-ms-animation: slideboxup 1.0s ease-out;	
	-o-animation: slideboxup 1.0s ease-out;	
}
#slidebox img {
	width:300px;
}
@media screen and (max-width: 800px) {
	#slidebox img {
		visibility: hidden;
		width: 0px;
		height: 0px;
	}
	#slidebox img_box, img_box {
		height: 0;
		width: 0;
	}
}

@keyframes slideboxup {
    0%  { padding-top: 300px; opacity: 0.3; }
    50%  { padding-top: 0px; opacity: 0.3; }
	100% {padding-top: 0px; opacity: 1; }
}
@-webkit-keyframes slideboxup {
    0%  { padding-top: 300px; opacity: 0.3; }
    50%  { padding-top: 0px; opacity: 0.3; }
	100% {padding-top: 0px; opacity: 1; }
}
@-moz-keyframes slideboxup {
    0%  { padding-top: 300px; opacity: 0.3; }
    50%  { padding-top: 0px; opacity: 0.3; }
	100% {padding-top: 0px; opacity: 1; }
}
@-ms-keyframes slideboxup {
    0%  { padding-top: 300px; opacity: 0.3; }
    50%  { padding-top: 0px; opacity: 0.3; }
	100% {padding-top: 0px; opacity: 1; }
}
@-o-keyframes slideboxup {
    0%  { padding-top: 300px; opacity: 0.3; }
    50%  { padding-top: 0px; opacity: 0.3; }
	100% {padding-top: 0px; opacity: 1; }
}
	
#container {
	background: black;
	position: relative;
	display: inline-block;
	height:300px;
	width:100%;
	overflow: hidden;
	border-radius: 12px;
	border-color: #c00;
	border-width:thin;
	border:groove;
}
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6 {
	color: #fff;
	font-weight: normal;
}
#container h1, #container h3, #container h5 {
	font-weight: bolder;
}
#container h1, #container h2 {
	font-size: 28px;
}
#container h3, #container h4 {
	font-size: 16px;
}
#container h5, #container h6 {
	font-size: 10px;
}

#container p {
	color: #fff;
	font: 12px/30px Arial, Helvetica, sans-serif;
}
#container a {
	color: #fff;
}
#container a:hover, a:visited {
	color: #bbb;
}

#pic1,#pic2,#pic3,#pic4 {
	position: absolute;
	left: 50%;
	margin-left: 2000px;
	width:400px;
	height:300px;
	visibility: visible;
	opacity: 0.8;
}
#txt1,#txt2,#txt3,#txt4 {
	position: absolute;
	left: 50%;
	margin-left: 2000px;
	width:400px;
	height:300px;
	visibility: visible;
}
@media screen and (max-width: 800px) {
	#pic1, #pic2, #pic3, #pic4 {
		width: 0px;
		visibility: hidden;
		}
	#txt1, #txt2, #txt3, #txt4 {
		width: 100%;
		left: 0%;
	}
	#container {
		zoom: 50%;
	}
}