﻿
#triangle1 {
border-style: solid;
border-width: 20px 200px 0 0;
border-color: #30ac56 transparent transparent transparent;
}







.brands {
	text-align: center;
	padding: 0 0em 0 0em;
	width: 100%;
	}

	
.brands h1 {
	margin: 0 auto;
	text-transform: uppercase;
	padding:.6em .5em 2.0em .5em;
	text-decoration:none;
	border-radius:2px;
	font-size: 1.6em;
	font-weight: 600;
	color: #025493;
	}	
	
.brands .flexcontainer {
	display: flex;
    max-width: 100%;
	flex-direction: row;

	flex-wrap: nowrap;

	flex-flow: row wrap;
	}	
	
.brands .flexcontainer article  { 
    background: #fff;
	color: #46af53;
	text-transform: uppercase;
	font-size: 2.6em;
	font-weight: 100;
	border-bottom: 1px solid #84c825;
	height: 140px;
	padding-top: 1em;
	
	
	flex-grow: 1;

	flex-shrink: 0;

	flex-basis: 400px;
	
	flex:1 1 330px;
	
  	}
.brands .flexcontainer article a { 
	color: #46af53;
	text-transform: uppercase;
	font-size: 1.2em;
	font-weight: 100;
  	}
  	
  	
  	
  	
  	
.brands .flexcontainer article:nth-of-type(5) {
	padding-top: .3em;
	}	
.brands .flexcontainer article:last-of-type {
	border: none;
	}	
		
.brands .flexcontainer article a p { 
	font-size: .6em;
	color: #005d99;
	text-transform: none;
	margin-top: 0;
  	}	

.brands .flexcontainer article img { 
	width: 230px;
	height: auto;
	padding-top: .5em;
  	}


#triangle2 {
border-style: solid;
border-width: 20px 0 0 200px;
border-color: transparent transparent transparent #80c141;
}







@media screen and (min-width:300px) {
	#triangle1 {
	border-width: 20px 270px 0 0;
	}
	#triangle2 {
	border-width: 20px 0 0 270px;
	}

}

@media screen and (min-width:350px) {
	.brands .flexcontainer article img { 
		width: 300px;
		padding-top: .2em;
	  	}
}
	  	
@media screen and (min-width:400px) {
	#triangle1 {
	border-width: 20px 370px 0 0;
	}
	#triangle2 {
	border-width: 20px 0 0 370px;
	}

}

@media screen and (min-width:500px) {
	#triangle1 {
	border-width: 20px 470px 0 0;
	}
	#triangle2 {
	border-width: 20px 0 0 470px;
	}
}
	
@media screen and (min-width:600px) {
	#triangle1 {
	border-width: 25px 570px 0 0;
	}
	#triangle2 {
	border-width: 25px 0 0 570px;
	}
}

@media screen and (min-width:640px) {
	.brands .flexcontainer article:nth-of-type(5) {
		border: none;
		}
	.brands .flexcontainer article:nth-of-type(1) {
		border-right: 1px solid #84c825;
		}	
	.brands .flexcontainer article:nth-of-type(3) {
		border-right: 1px solid #84c825;
		}
	.brands .flexcontainer article:nth-of-type(5) {
		border-right: 1px solid #84c825;
		}	
}

@media screen and (min-width:700px) {
	#triangle1 {
	border-width: 30px 670px 0 0;
	}
	#triangle2 {
	border-width: 30px 0 0 670px;
	}
}
	
@media screen and (min-width:800px) {
	#triangle1 {
	border-width: 35px 770px 0 0;
	}
	#triangle2 {
	border-width: 35px 0 0 770px;
	}
}
	
@media screen and (min-width:900px) {
	#triangle1 {
	border-width: 35px 870px 0 0;
	}
	#triangle2 {
	border-width: 35px 0 0 870px;
	}
}



	
	






@media screen and (min-width:990px) {
	.brands .flexcontainer article:nth-of-type(4) {
		border: none;
		}
	.brands .flexcontainer article:nth-of-type(2) {
		border-right: 1px solid #84c825;
		}
	.brands .flexcontainer article:nth-of-type(3) {
		border-right: none;
		}
	.brands .flexcontainer article:nth-of-type(4) {
		border-right: 1px solid #84c825;
		}			
	}
@media screen and (min-width:1000px) {
	#triangle1 {
	border-width: 35px 970px 0 0;
	}
	#triangle2 {
	border-width: 35px 0 0 970px;
	}
}
@media screen and (min-width:1100px) {
	#triangle1 {
	border-width: 35px 1070px 0 0;
	}
	#triangle2 {
	border-width: 35px 0 0 1070px;
	}
}
@media screen and (min-width:1280px) {
	#triangle1 {
	border-width: 35px 1250px 0 0;
	}
	#triangle2 {
	border-width: 35px 0 0 1250px;
	}
}


