#hero {
	background-image: url('../../img/header/WHAT_IS_ANIMALFLOW.jpg');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}	

#hero .inner {
	max-width: 1300px;
	width: 95%;

	height: 45vh;
	min-height: 350px;
	
	margin: 0 auto;
	padding: 0;
	
	display: flex;
	flex-flow: column;
	justify-content: flex-end;
}

#hero .inner h1 {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;

	font-size: 55px;
	text-transform: uppercase;
	margin: 0 0 100px 0;    margin: 0 auto 50px auto;color:#fff;font-family: 'oswaldbold' !important;
}

#hero .inner h1 span {
	background: #FFF;
	margin-bottom: 10px;
	display: block;
	padding: 0;
	margin: 0 0 15px 0;
	white-space: nowrap;
}

#hero .inner h1 span.black {
	color: #333;
	padding: 0 10px 0 25px;
}

#hero .inner h1 span.red {
	color: #CF1814;
	padding: 0 25px 0 10px;
}
.heading_col h1{margin-bottom:20px;color:#a00303}
.heading_col p{color:#a00303;    margin-bottom: 60px;}
@media only screen and (max-width: 550px) {
	#hero .inner h1 {
		font-size: 40px;
		margin: 0 0 70px 0;
	}

	#hero .inner h1 span { margin: 0 0 10px 0; }

	#hero .inner h1 span.black,
	#hero .inner h1 span.red { padding: 0 15px; }
}

@media only screen and (max-width: 400px) {
	#hero .inner h1 { font-size: 32px; }

	#hero .inner h1 span.black,
	#hero .inner h1 span.red { padding: 0 10px; }
}

#six {
	background: url(../../img/grey_full_bg.jpg) no-repeat center center;
	position: relative;
	padding: 60px 0 40px;background-size: cover;
}

#six > img.before-effect {
	position: absolute;
	top: -40px;
	left: 0;
	right: 0;

	display: block;
	width: 100%;
	height: 40px;
}

#six .inner {
	max-width: 1140px;
	width: 95%;
	
	margin: 0 auto;
	padding: 0;
	
	display: flex;
	flex-flow: column;
	justify-content: flex-end;
}


#six h3.title {
	width: 100%;
	margin: 0;
	padding: 0;

	color: #FFF;
	font-size: 36px;
	text-align: center;

}

#six p.text {
	max-width: 1150px;
	margin: 20px auto 50px;
	font: 400 14px "Open Sans", "Helvetica";

	color: #FFF;
	text-align: center;
	line-height: 24px;
	letter-spacing: 0.03em;
}

#six div.cards {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;
	align-content: flex-start;

	margin: 0;
	padding: 0;
}

#six div.cards .card {
	width: 48%;
	margin: 0 0 20px 0;
	padding: 15px 50px;
	text-align:center;

}

#six div.cards .card h4.card--title {
	font-size: 21px;
	text-transform: uppercase;    margin: 20px 0 5px 0;
    padding: 0 0 0 0;  font-family: 'exodemi_bold';  
    color: #323232;
}
#apply h4.section--title {
	font-size: 21px;
	text-transform: uppercase;    margin:15px 0 0px 0;
    padding: 0 0 0 0;  font-family: 'exodemi_bold';  
    color: #a00303;
}
#apply .info {
    padding: 5px 20px;
}
p.card--text , .section--text p{
font-family: 'exodemi_bold';    font-size: 16px;
    letter-spacing: 0.85px;
    line-height: 26px;
    color: #323232;
}
a.btn.section--btn {
    font-size: 16px !important;
    padding: 10px 20px !important;
}
.sorted_table__block {
    margin: 0 0 20px 0;
}
.card img{    max-height: 140px;}
#apply .img-container img{width:100%}
@media only screen and (max-width: 800px) {
	#six div.cards .card { width: 42%; }
}

@media only screen and (max-width: 650px) {
	#six { padding: 40px 0 40px; }
	#six h3.title { font-size: 27px; }
	#six p.text { font-size: 12px; }

	#six div.cards .card h4.card--title { font-size: 16px; }
	#six div.cards .card p.card--text { font-size: 12px; }
}

@media only screen and (max-width: 550px) {
	#six div.cards .card { width: 100%; }
}

#brands {
	padding: 50px 0;
	background: #333;
}

/*#brands p.pretext {
	color: #D8D8D8;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 21px 0;
	padding: 0;
}*/

#brands .inner {
	display: flex;
    max-width: 1140px;
    width: 95%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

@media only screen and (max-width: 1300px) {
	#brands .inner {
		width: 95%;
		margin: 0 auto;
	}

	#brands .inner img {
		margin: 0 10px;
		height: 30px;
	}
}

@media only screen and (max-width: 1024px) {
	#brands .inner img {
		margin: 0 10px;
		height: 25px;
	}
}

@media only screen and (max-width: 800px) {
	#brands .inner img { height: 19px; }
}

@media only screen and (max-width: 600px) {
	#brands { padding: 50px 0 75px; }

	#brands p.pretext { margin: 0 0 30px 0; }

	#brands .inner {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: flex-start;
	}

	#brands .inner .img-cont {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		margin: 0 0 50px 0;
	}

	#brands .inner .img-cont:last-child { margin: 0 !important; }

	#brands .inner img {
		margin: 0 10px;
		max-height: 35px;
		height: auto;
		max-width: 250px;
	}
}

@media only screen and (max-width: 500px) {
	#brands { padding: 50px 0; }
	#brands .inner .img-cont { margin: 0 0 35px 0; }
	#brands .inner img { max-height: 27px; }
}











#apply {
	padding:70px 0 50px;
	background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 43%, #cacaca 100%);
background: -webkit-linear-gradient(left, #ffffff 43%,#cacaca 100%);
background: linear-gradient(to right, #ffffff 43%,#cacaca 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cacaca',GradientType=1 );
}



#apply h3 {
	
	font-size: 36px;
	text-align: center;
}

#apply .sections {
	
}

#apply .sections .section {
	
	margin: 0 0 40px 0;
	padding: 0;
}

#apply .sections .section:last-child { margin: 0 !important; }



/* switches the order using flexbox's order attribute for flex-items inside of a flex-container */
/* switches the order using flexbox's order attribute for flex-items inside of a flex-container */
#apply .sections .section:nth-child(even) .info { 
	order: 0;
	margin: 0 25px 0 0;
}




/* switches the order using flexbox's order attribute for flex-items inside of a flex-container */
/* switches the order using flexbox's order attribute for flex-items inside of a flex-container */

#apply .sections .section .info h4.section--title {
	font-size: 21px;
	text-transform: uppercase;
	letter-spacing: 0.05em;

	border: none;
	padding: 0 0 5px 0;
	margin: 0;
}
#apply .sections .section .info{padding:20px}
#apply .sections .section .info h4.section--title { color: #CF1814; }

#apply .sections .section .info div.section--text {
	margin:5px 0 15px;
	overflow: hidden;
}

#apply .sections .section .info div.section--text p {

	    font-family: 'exodemi_bold';
    font-size: 16px;
    letter-spacing: 0.85px;
    line-height: 26px;
    color: #323232;    font-size: 16px !important;
}

#apply .sections .section .info a.section--btn {
    font-size: 16px !important;
    padding: 10px 20px !important;
}

h1.heading{text-align:center;}




@media only screen and (max-width: 1050px) {
	#apply .sections .section .info div.section--text p {
		font-size: 12px;
		line-height: 21px;
	}

	#apply .sections .section .info div.section--text { margin: 15px 0 10px; }
}

@media only screen and (max-width: 650px) {
	#apply { padding: 50px 0; }
	#apply h3.title { font-size: 27px; }

	#apply .sections .section {
		flex-flow: column;
		margin: 0 0 50px 0;
	}

	#apply .sections .section .img-container {  }

	#apply .sections .section .img-container {
		order: 0 !important;
		margin: 0 0 20px 0 !important;
	}
	
	#apply .sections .section .info { order: 1 !important; }

	#apply .sections .section .img-container,
	#apply .sections .section .info { width: 100%; }

	#apply h3.title { 
		font-size: 27px;
		text-align: center;
	}

	#apply .sections .section .info h4.section--title { font-size: 16px; }
	
	#apply .sections .section .info div.section--text { font-size: 12px; }
}

@media only screen and (max-width: 400px) {

}