/**
* Define the styles for the #promotion and #case-studies sections on the homepage
  as well as the styles for the more-wins page.
*/

#promotion{
display:block;
width:100%;
overflow:hidden;
margin:50px 0;
padding: 0;
border:none;
box-sizing:content-box;
background-color:#fff;
}
#promotion .promo{
display:block;
width:100%;
height:auto;
overflow:hidden;
margin:0 0 50px;
padding:0;
float:none;
clear:both;
}
#promotion .promo:last-of-type{
margin:0;	
}
#case-studies{
font-size:1rem;
}
#case_studies_gallery{
font-size:1rem;
}

#case-studies .buttons ul li a,
#case-studies .buttons ul li a:visited{
background-color:rgba(233, 184, 32, 0.6);
color:#0F0708;		
border:none;	
}

#case-studies .buttons ul li a:hover{
background:#0F0708;
color:#E9B820;
border:none;
}


#more-wins #primary header h1{
font-size:4em;
}


#case-studies{
display:block;
clear:both;
width:100%;
height:auto;
overflow:hidden;
margin:0;
padding:1em 0 4em;
background-color:#fff;
font-family:Bentonsans, Verdana, Arial, Helvetica, sans-serif;
}
#case-studies section{
width:100%;
height:auto;
margin:0;
padding:0;
display:block;
float:none;
clear:both;
}
#case-studies section.intro{
display:block;
overflow:hidden;
background:#fff;
margin:0 0 2.5em;
padding:0;
font-size:1.4em;
font-weight:normal;
}
#loanagent #case-studies{
padding:1em 0;	
}
#loanagent #case-studies section.intro{
margin:0;
}

#content #case-studies header{
display:block;
max-width:100%;
height:auto;
overflow:hidden;
margin:0 auto;
padding:0;
color:#0F0708;
clear:both;
background:#fff;
text-align:center;
}

#content #case-studies header h1{
font-size:4em;
margin:0;
padding:0;
line-height:normal;
color:#E9B820;
font-weight:lighter;
}

#content #case-studies header h2{
font-size:1.35em;
margin:0;
padding:0;
text-align:center;
font-weight:normal;
}



#content #case-studies .intro p{
text-align:center;
font-size:1em;	
}
#case-studies .graphics{
display:block;
width:100%;
height:auto;
overflow:hidden;
margin:0;
padding:0;	
}
#case-studies footer{
display:block;
width:100%;
height:auto;
overflow:hidden;
margin:0;
padding:0;
}
#case-studies .buttons{
 width:200px;
 margin:20px auto;
}
#case-studies .buttons ul{
 margin:0;
}
#case-studies .buttons ul li{
 width:200px;
 padding:0;
 margin:0;
 float:none;
}
#case-studies .buttons ul li a{
 display:block;
 width:100%;
 float:none;
 clear:both;
 margin:0;
 padding:0;
 font-size:1.6em;
}
#case-studies .case-study{
 width:33.33%;
 height:auto;
 overflow:hidden;
 margin:0;
 padding:0;
 float:left;
 clear:none;
 position:relative;
}
#case-studies .case-study a,
#case-studies .case-study a:visited{
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
position:relative;
text-decoration:none;
}
#case-studies .case-study .overlay{
display:block;
width:100%;
height:100%;
top:auto;
bottom:8px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0.0;
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease-in-out;
}

#case-studies .case-study:hover .overlay{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity:1;
}


#case-studies .graphics .case-study:nth-of-type(4n){
 display:none;
}
#case-studies .case-study img{
 width:100%;
 height:auto;
 margin:0 1px 1px; /*Gap between images */
 padding:0;
 border:solid 1px #B3B2B3; /* #FAFAFA; */
 box-sizing:border-box;
}
#more-wins{
width:100%;
height:auto;
background:#fff;
}
#more-wins .intro{
display:block;
max-width:100%;
margin:1em;
padding:0;
}
#more-wins #primary .intro header, 
#more-wins #primary  .intro header h1{
text-align:center;
}
#more-wins #primary  .intro header h1{
font-size:4em;
}


#more-wins .intro p{
text-align:center;
}
#case_studies_gallery{
width:99%;
height:auto;
overflow:hidden;
margin:0 auto;
padding:0;
display:table;
font-family: Bentonsans, Roboto, Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
}

#more-wins .paginationblock{
display:block;
width:100%;
height:auto;
float:none;
clear:both;
margin:1em 0;
padding:0;
font-size:1.1em;
font-weight:normal;
line-height:1em;
text-align:center;
}

#more-wins .paginationblock span.current_page{
font-weight:normal;
color:#0F0708;
padding:0 0.75em;
}

#more-wins .paginationblock a,
#more-wins .paginationblock a:visited{
font-weight:normal;
text-decoration:none;
padding:0 0.75em;
color:#00A3D9;
}

#more-wins .paginationblock a:hover{
 text-decoration:underline;
}

#case_studies_gallery .case_study{
width:32%;
height:auto;
overflow:hidden;
margin:0 2% 30px 0;
padding:0;
height:auto;
overflow:hidden;
float:left;
clear:none;
background:#716C6B;
box-shadow:1px 2px 3px #B3B2B3;
box-sizing:border-box;
min-height:650px;
display:table-cell;
}
#case_studies_gallery .case_study:nth-of-type(3n+1){
clear:left;
}
#case_studies_gallery .case_study:nth-of-type(3n+1){
background:#B3B2B3;
}
#case_studies_gallery .case_study:nth-of-type(3n){
float:right;
clear:right;
margin:0;
background:#E9B820;
}
#case_studies_gallery .case_study a{
display:block;
height:auto;
overflow:hidden;
margin:0;
padding:0;
overflow:hidden;
text-decoration:none;
position:relative;
}
#case_studies_gallery .case_study img{
width:100%;
height:auto;
margin:0;
padding:0;
float:none;
clear:both;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity:1.0;
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease-in-out;
}

#case_studies_gallery .case_study img:hover{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity:0.6;
}


#case_studies_gallery .case_study .description{
display:block;
margin:0 20px 0;
padding:10px 0 30px;
clear:both;
line-height:1.5em;
}


/* ==================================== Tablet Landscape ====================================*/
@media screen and (min-width:961px) and (max-width:1280px){
	#case-studies .intro{
	 margin:0 auto;
	 padding:0;
	 font-size:1.2em;	
	}
	#case-studies .intro header{
	 margin:0 auto;
	 padding:0;	
	}

}

/* ==================================== Tablet Portrait ====================================*/
@media screen and (min-width:641px) and (max-width:960px){
	#case-studies{
	margin:0;
	}
	#case-studies .case-study{
	 width:50%;
	}
	#case-studies .graphics .case-study:nth-of-type(4n){
	 display:block;
	}
	#case-studies .intro{
	margin:0 auto;
	padding:0;
	font-size:1.2em;
	line-height:normal;	
	}
	#case-studies .intro header,
	#case-studies .intro header h1{
	margin:0 auto;
	padding:0;	
	}
	#case-studies .intro header h1{
	margin:0;
	padding:0;
	}
	#case-studies .buttons ul li{
	 width:100%;
	 max-width: 250px;
	 margin:0;
	 padding:0;
	}
	#case_studies_gallery .case_study{
	 width:48%;
	 height:auto;
	 overflow:hidden;
	 margin:0 0 30px 0;
	 padding:0;
	 height:auto;
	 overflow:hidden;
	 float:left;
	 clear:none;
	 background:#716C6B;
	 display:table-cell;
	 min-height:520px;
	 box-shadow:1px 2px 3px #B3B2B3;
	 box-sizing:border-box;
	}
	#case_studies_gallery .case_study:nth-of-type(2n+1){
	 clear:right;
	}
	#case_studies_gallery .case_study:nth-of-type(3n+1){
	 background:#B3B2B3;
	 clear:none;
	}
	#case_studies_gallery .case_study:nth-of-type(3n){
	 float:left;
	 clear:none;
	 background:#E9B820;
	}
	#case_studies_gallery .case_study:nth-of-type(2n+1){
	 float:left;
	 clear:left;
	 margin-bottom:30px;
	}
	#case_studies_gallery .case_study:nth-of-type(2n){
	float:right;
	clear:right;
	}
	#more-wins .intro{
	display:block;
	max-width:100%;
	margin:1em;
	padding:0;
	}
	#more-wins #primary .intro header, 
	#more-wins #primary  .intro header h1{
	text-align:center;
	}
	#more-wins .intro p{
	text-align:left;
	}
	
	
}


/*==================================== Phone Landscape ====================================*/
@media all and (min-width:481px) and (max-width:640px){
	#case-studies{
	margin:0;
	}
    #case-studies .case-study{
	 width:100%;
	 margin:0;
	 float:none;
	 clear:both;
	}
	#case-studies .graphics .case-study:nth-of-type(4n){
     display:none;
    }
	#case-studies .intro{
	font-size:1.2em;
	line-height:normal;
	}
	#case-studies .intro header, 
	#case-studies .intro header h1{
	margin:0;
	padding:0;
	}
	#case-studies .intro header h1{
	margin:0;
	}
	#case-studies .buttons ul li{
	 width:100%;
	 max-width: 250px;
	 margin:0;
	 padding:0;
	}
	
	#more-wins .intro{
	display:block;
	max-width:100%;
	margin:1em;
	padding:0;
	}
	#more-wins #primary .intro header, 
	#more-wins #primary  .intro header h1{
	text-align:center;
	}
	#more-wins .intro p{
	text-align:left;
	}
	
	#primary #case_studies_gallery .case_study{
	width:100%;
	height:auto;
	overflow:hidden;
	margin:0 0 30px 0;
	padding:0 0 30px;
	height:auto;
	overflow:hidden;
	float:none;
	clear:both;
	background:#716C6B;
	display:block;
	min-height:200px;
	box-shadow:1px 2px 3px #B3B2B3;
	box-sizing:border-box;
	margin-bottom:30px;
	}
}


/*==================================== Phone Portrait ====================================*/
@media screen and (max-width:480px){
	#promotion{
	margin:20px 0;
	}
	
	#case-studies{
	width:100%;
	margin:0;
	padding:0;
	height:auto;
	}
	#case-studies .case-study{
	 display:block;
	 width:100%;
	 float:none;
	 clear:both;
	}
	#case-studies section.intro{
	display:block;
	font-size:1.3em;
	line-height:normal;
	margin:0;
	padding:0 0 1em;
	text-align:left;
	clear:both;
	}
	#case-studies .intro header{
	margin:0;
	padding:0;
	}
	#case-studies .intro header h1{
	margin:0 auto 10px;
	padding:0;
	line-height:normal;
	text-align:center;
	font-size:3em;
	}
	#case-studies .intro p{
	margin:0.5em;
	}
	#case-studies nav.buttons{
	width:250px;
	margin:20px auto;
	padding:0;
	}
	#case-studies .buttons ul{
	width:100%;
	margin:0;
	padding:0;
	}
	#case-studies .buttons ul li{
	 width:100%;
	 max-width: 250px;
	 margin:0;
	 padding:0;
	}
	
	#primary #case_studies_gallery .case_study{
	width:100%;
	height:auto;
	overflow:hidden;
	margin:0 0 30px 0;
	padding:0 0 30px;
	height:auto;
	overflow:hidden;
	float:none;
	clear:both;
	background:#716C6B;
	display:block;
	min-height:200px;
	box-shadow:1px 2px 3px #B3B2B3;
	box-sizing:border-box;
	margin-bottom:30px;
	}
	
	#more-wins .intro{
	display:block;
	max-width:100%;
	margin:1em;
	padding:0;
	}
	#more-wins #primary .intro header, 
	#more-wins #primary  .intro header h1{
	text-align:center;
	}
	#more-wins .intro p{
	text-align:left;
	}
	
}