@charset "utf-8";
/*
@import url('https://fonts.googleapis.com/css?family=Lato:300,400');

*/
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,600');


.banner_parent{
text-align:center;
position:relative;
margin:0 auto;
padding:0px;

}

.banner_title {
	font-family: 'raleway', sans-serif;
	font-size: 32px;
	color:#FF6600;
	text-decoration: none;
	font-weight:700;
	line-height: 36px;
	}

.banner_caption {
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	color: #333333;
	text-decoration: none;
	padding-top:5px;
	line-height: 20px;
	
}
.banner_black_box {
	/*background-image: url(images/black_bg.png);*/
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	animation-name:black_box_anim;
	animation-duration:2s;
	right:0px;
	bottom:0px;
	}
	

.banner_container{
	background-repeat:no-repeat;
	background-position:center center;
	background-position:center;

}

.banner_background {
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	-webkit-animation: my_anim 1.25s;
	background-color: #F1F1F1;
	/*max-width:1031px;*/
	margin:0 auto;
	
}

@-webkit-keyframes my_anim
{
	0% {opacity:0.0;left:20px;}
	100%{opacity:1.0;left:0px}
}	




.banner_stage{
border:2px solid black;overflow:hidden; width:100%; height:360px; margin:0 auto;
}

@-webkit-keyframes elements_anim{
	0%{width:0px;}
	30%{width:0px;opacity:0.1;}
	100%{width:1030px;opacity:0.8;}
	
}

.banner_element_holder{
	max-width:1031px;
	height:360px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}

.banner_element{
	max-width:1031px;
	height:385px;
	margin:0 0;
	opacity:0.8;
	overflow:hidden;
	background-image:url(images/element.png);
	background-repeat:no-repeat;
	animation-name:elements_anim;
	animation-duration:1s;
	background-position:bottom left;
	background-size:100% 80%;
	
	
}

@-webkit-keyframes black_box_anim{
	0%{margin-left:-10px; opacity:0;}
	40%{margin-left:-10px; opacity:0;}
	80%{margin-left:0;opacity:1;}
	100%{margin-left:0;opacity:1;}
}	


@media screen and (max-width: 650px){
.banner_parent{
	max-width:100% !important;
	display:block !important;
	height:200px !important;

}

.banner_background{
	height:200px !important;
	max-width:100% !important;
}

.banner_element_holder{
	max-width:100%;
	height:200px !important;
	top:0px !important;
	left:0px !important;
	bottom:0px!important;
	right:0px !important;
}

.banner_element{
	max-width:100% !important;
	height:200px !important;
	top:0px !important;
	left:0px !important;
	bottom:0px !important;
	right:0px !important;
	background-position:0 -150px;
}

.banner_black_box{
	top:0px !important;
	left:0px !important;
	height:100% !important;
	width:95% !important;
	display:inline-block;
	text-align:right !important;
}

.banner_black_box > div{
	position:absolute;
	bottom:15px;
	right:0px;
}

.banner_title{
	font-size:22px;
	line-height:22px;
}

.banner_caption{
font-size:15px;
 line-height:15px;
}


}

@media screen and (max-width: 450px){
	
.banner_parent{
	max-width:100% !important;
	display:block !important;
	height:150px !important;

}

.banner_background{
	height:150px !important;
	max-width:100% !important;
	background-size:cover;
}

.banner_element_holder{
	display:none;
	max-width:100%;
	height:200px !important;
	top:0px !important;
	left:0px !important;
	bottom:0px!important;
	right:0px !important;
}

.banner_element{
	max-width:100% !important;
	height:200px !important;
	top:0px !important;
	left:0px !important;
	bottom:0px !important;
	right:0px !important;
	background-position:0 -150px;
}

.banner_black_box{
	top:0px !important;
	left:0px !important;
	height:100% !important;
	width:95% !important;
	display:inline-block;
	text-align:right !important;
}

.banner_black_box > div{
	position:absolute;
	bottom:15px;
	right:0px;
}

.banner_title{
	font-size:22px;
	line-height:22px;
}

.banner_caption{
font-size:15px;
 line-height:15px;
}	
}