body {font-family: 'Open Sans', arial, helvetica, sans-serif; color: #333; font-size: 1em; line-height: 1.5em; margin: 0; padding: 0; text-align: center;}
h1, h2, h3 {text-transform: uppercase; font-weight: 600;}
h2 {font-size: 2.5em; line-height: 1.3em;}
h3 {font-size: 2em; line-height: 1.3em; font-weight: 700;}
.logo {max-width: 50%; margin: 0 auto; border: none; min-width: 320px;}
a {color: #ee6600;}
a:hover {color: #333;}
.reference img {min-width: 360px; background: #fff; max-width: 80%; padding: 4px; margin-top: 20px; border: 1px solid #ccc; border-bottom: none;}


.odd, .even {
	display: inline-block;
	position: relative;
	padding: 150px 0 20px 0;
	width: 100%;
	text-align: center;
	overflow: hidden;
}
.reference {
	-webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #fff),
        color-stop(1, rgba(0,0,0,0))
    );	
}
.odd:before, .even:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
}
.reference:after {	
	display: block;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px; 
}
.reference.odd:after {
background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%, #fff 70%);
background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, #fff 70%);
background: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%, #fff 70%);
background: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%, #fff 70%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #fff 70%);
}
.reference.even:after {
background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%, #ffd7b9 70%);
background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, #ffd7b9 70%);
background: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%, #ffd7b9 70%);
background: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%, #ffd7b9 70%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #ffd7b9 70%);
}
.odd {
	background: #fff;
}
.odd:before {
	background: url('arrow-orange.png') no-repeat center bottom;
}
.even {
	background: #ffd7b9;
}
.even:before {
	background: url('arrow-white.png') no-repeat center bottom;
}
.odd:first-child {padding: 0;}
.odd:first-child:before {display: none;}
.reference.odd div, .reference.even div {float: left; width: 30%; margin: 1.66666666667%;}
.reference.odd div img, .reference.even div img {max-width: 80%; min-width: 0;}
@media screen and (max-width: 1024px) {
.reference.odd div, .reference.even div {width: 100%;}
.reference.odd div img, .reference.even div img {max-width: 50%;}
}

.display {padding: 190px 0 0 0; }
.display span {border: 1px solid #ee6600; color: #ee6600; padding: 10px 20px; cursor: pointer; display: inline-block; margin-top: 0; font-weight: bold;}
.display span:hover {border-color: #333; color: #333;}
.hidden, .close {display: none;}


.orange {background: url('footer.png') center bottom no-repeat; text-transform: uppercase; font-size: 2.5em; color: #ee6600; display: block; padding: 50px 0 70px 0; line-height: 1.2;}
.footer {}
.footer p {float: right; margin: 50px 5% 0 0; line-height: 80px;}
.footer .logo {float: left; max-width: 150px; margin: 0 0 0 5%; }
.partners {width: 100%; margin: 50px auto;}
.partners img {height: 50px; width: auto; margin: 5px 20px;}
.footer div {text-align: center;}
.footer div a {margin: 50px 0 0 0; display: inline-block; line-height: 80px;}
@media screen and (max-width: 640px) {
.orange {padding-bottom: 90px;}
.footer p, .footer .logo, .footer div a {float: none; text-align: center; margin: 0; }
.footer .logo {}
}