@charset "utf-8";
/* CSS Document */

/* --------------- Keyframes for animation -------------*/
/* --------------- Div Fader  -------------*/
@keyframes fader1{
	from {opacity: 1;}
	25.00000% {opacity: 1;}
	33.33333% {opacity: 0;}
	91.66667% {opacity: 0;}
	to {opacity: 1;}
}

@keyframes fader2{
	from {opacity: 0;}
	25.00000% {opacity: 0;}
	33.33333% {opacity: 1;}
	58.33333% {opacity: 1;}
	66.66667% {opacity: 0;}
	to {opacity: 0;}
}

@keyframes fader3{
	from {opacity: 0;}
	58.33333% {opacity: 0;}
	66.66667% {opacity: 1;}
	91.66667% {opacity: 1;}
	to {opacity: 0;}
}

/* --------------- Text Shifter h1  -------------*/
@keyframes shifter1{
	from {padding-right: 30%;}
	25.00000% {padding-right: 0;}
	91.66667% {padding-right: 30%;}
	to {padding-right: 30%;}
}

@keyframes shifter2{
	from {padding-right: 30%;}
	33.33333% {padding-right: 30%;}
	58.33333% {padding-right: 0;}
	to {padding-right: 0;}
}

@keyframes shifter3{
	from {padding-right: 30%;}
	66.66667% {padding-right: 30%;}
	91.66667% {padding-right: 0;}
	to {padding-right: 0;}
}

/* --------------- Text Shifter h2  -------------*/
@keyframes shifterB1{
	from {padding-left: 30%;}
	25.00000% {padding-left: 0;}
	91.66667% {padding-left: 30%;}
	to {padding-left: 30%;}
}

@keyframes shifterB2{
	from {padding-left: 30%;}
	33.33333% {padding-left: 30%;}
	58.33333% {padding-left: 0;}
	to {padding-left: 0;}
}

@keyframes shifterB3{
	from {padding-left: 30%;}
	66.66667% {padding-left: 30%;}
	91.66667% {padding-left: 0;}
	to {padding-left: 0;}
}

/* --------------- Main Banner Section  -------------*/
#top-nav-img {
	width: 100%;
	padding-top: 94px;
}

#banner_backs{
	width: 59.25%;
}

#banner_backs img{
	width: 100%;
	visibility: hidden;
}

.banner{
	width: 100%;
	position: relative;
}
.banner_img{
	width: 59.25%;
	right: 0px;
	position: absolute;
}

.banner_img img{
	width: 100%;
}

.banner_text{
	width: 40%;
	position: absolute;
	right: 60%;
	padding: 4% 0;
	font-variant-caps: all-petite-caps;
	font-family: 'Open Sans Condensed',Impact, "sans-serif";
	font-size: 2.0em;
	line-height: 1.2em;
	z-index: 1;
}

.banner_text h1 {
	text-align: right;
}

.banner_text h2{
	text-align: left;
}

.banner_text h1 ul{
	display: block;
	list-style: none;
}

.banner_text h2 ul{
	display: block;
	list-style: none
}

/* --------------- Element animations  -------------*/
#banner_1{animation: fader1 12s infinite ease-in-out;}
#banner_2{animation: fader2 12s infinite ease-in-out;}
#banner_3{animation: fader3 12s infinite ease-in-out;}
#banner_3{z-index: 99;}

#banner_1 h1{animation: shifter1 12s infinite ease-in-out;}
#banner_2 h1{animation: shifter2 12s infinite ease-in-out;}
#banner_3 h1{animation: shifter3 12s infinite ease-in-out;}

#banner_1 h2{animation: shifterB1 12s infinite ease-in-out;}
#banner_2 h2{animation: shifterB2 12s infinite ease-in-out;}
#banner_3 h2{animation: shifterB3 12s infinite ease-in-out;}


/* --------------- Adaptive Section  -------------*/
@media only screen and (min-width:800px) and (max-width:1000px){
	.banner_text{
		width: 40%;
		right: 60%;
		font-size: 1.6em;
	}
}

@media only screen and (min-width:576px) and (max-width:799px){
	.banner_text{
		width: 40%;
		right: 60%;
		padding: 3% 0;
		font-size: 1.2em;
	}
	
	footer{
		font-size: 0.9em;
	}
}

@media only screen and (min-width:490px) and (max-width:576px){
	.banner_text{
		width: 40%;
		right: 60%;
		padding: 2% 0;
		font-size: 1.0em;
	}
	
	section{
		flex-direction:column-reverse;
	}
	
	article{
		width: 90%;
		border: none;
	}

	aside{
		width: 90%;
	}
	
	footer{
		font-size: 0.8em;
	}
}

@media only screen and (min-width:346px) and (max-width:490px){
	.banner_text{
		width: 100%;
		font-size: 0.8em;
	}
	
	.banner_img{
		width: 100%;
	}
	
	#banner_backs{
		width: 100%;
		padding-bottom: 2.4em;
	}
	
	.banner_text{
		width: 100%;
		position: absolute;
		padding: 55% 0;
		right: 0;
		line-height: 0.2em;
	}
	
	.banner_text h1 ul li{
		display: inline;
	}

	.banner_text h2 ul li{
		display: inline;
	}
	
	section{
		flex-direction: column-reverse;
	}
	
	article{
		width: 90%;
		border: none;
	}

	aside{
		width: 90%;
	}
	
	footer{
		font-size: 0.8em;
		height: auto;
	}
	
	footer .wrapper{
		flex-direction: column;
	}
	
	#footer_data{
		padding-left: 10px;
	}
}

@media only screen and (max-width:346px){
	#top-menu-nav{
		top: 2.8em;
	}
	
	#top-nav-img {
		padding-top: 76px;
	}
	
	.banner_text{
		width: 100%;
		font-size: 0.72em;
	}
	
	.banner_img{
		width: 100%;
	}
	
	#banner_backs{
		width: 100%;
		padding-bottom: 2.16em;
	}
	
	.banner_text{
		width: 100%;
		position: absolute;
		padding: 55% 0;
		right: 0;
		line-height: 0.2em;
	}
	
	.top-callback-btn {
		height: 100%;
		width: 100px;
	}
	
	.banner_text h1 ul li{
		display: inline;
	}

	.banner_text h2 ul li{
		display: inline;
	}
	
	header {
		height: 2.8em;
	}
	
	.top-logo img {
		height: 2.8em;
	}
	
	section{
		flex-direction: column-reverse;
	}
	
	article{
		width: 90%;
		border: none;
	}

	aside{
		width: 90%;
	}
	
	footer{
		font-size: 0.8em;
		height: auto;
	}
	
	footer .wrapper{
		flex-direction: column;
	}
	
	#footer_data{
		padding-left: 10px;
	}
}