.top-border { border-top: 0; padding-top: 0; } /* hack out the mandatory top border on columns */
.col-padding-right { padding-right: 0.15625em;  }
.col-padding-left { padding-left: 0.15625em;  }
.col-margin-right { margin-right: 0.3125em; }
.col-margin-left { margin-left: 0.3125em;  }
#back-top {display: none !important; } /* hide the autoscroller for the homepage */
/* a bootstrap gutter removal css. 	http://stackoverflow.com/questions/16489307/how-to-remove-gutter-space-for-a-specific-div-only-bootstrap/21282059#21282059
*/
.row.no-gutter {
	margin-left: 0;
	margin-right: 0;
}
/* ignore the left and right side
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
	padding-right: 0;
	padding-left: 0;
}
*/
.row.no-gutter > [class*='col-'], 
.row.no-gutter > [class^='col-']  {
	padding-right: 0;
	padding-left: 0;
}

.case-carousel-caption a
{
  color: #fff;
}

#leftbox {
	height: 365px;	
	padding: 15px;	
	margin-bottom: 5px;	
	border-radius: 5px;
	background: #0a304e;
	color: #fff;
  	overflow: hidden: 
    text-overflow: ellipsis;
}  	

#leftbox h2 {
	font-size: 2.75rem;
    font-weight: 300;
}	

#leftbox p {
	font-size: 1.3rem;  	  	
  	font-weight: 300;
}

/* fix icon color */
#leftbox .fa {
  /*color: #bfbfbf;*/
  color: #d9d9d9;
  
}



.btn-leftbox { background-color:#0a304e; color:#fff; border: 1px solid #fff !important; }
.btn-leftbox:hover {background-color:#0e446e; color:#fff; }
.btn-leftbox:active {border-right: 5px solid #294051; }
.btn-leftbox .glyphicon, .btn-leftbox .fa { color: #a5a5a5; } /* fix the icon color for blue buttons. */
/* #topbox p, #bottombox p { height: 150px; } */


h2.features { margin-top: 0px; }

#topbox, #bottombox {	
  	overflow:hidden;
  	text-overflow: ellipsis;
	height: 180px;	
	margin-bottom: 5px;	
	border-radius: 5px;
	background: #bfbfbf;
	color: #0a304e;
    padding: 15px 15px 5px 15px;
}

h2 a {
	color: #0a304e; /* 20% the value of #626262 */
}

#topbox .fa, #bottombox .fa {
   	color: #d9d9d9;
}


.thumbnail img {
	margin-bottom: 0px;
}

.thumbnail figcaption {
  margin-top: 0px;
  background: #bfbfbf;
  padding: 15px 15px 50px 15px;
}

.thumbnail figcaption h3 {
	margin-top: 0px;
}

h3.h3blue {
	color: #0a304e; /* 20% the value of #626262 */
}

#mosaic {
	position: relative;	
	overflow: hidden;		
}

#mosaic .tile {
	position: absolute; 	
	/* border: 1px solid red; */
	border-radius: 5px;
	overflow: hidden;
}

#tile2 { /* border: solid red 1px;*/) }
.tile img { height: 100%; width: 100%; margin: 0; padding: 0;}

/* Captions are overlays! */
.tile figcaption { 
	position: absolute;
	width: 100%;
	text-align: center;		
	border-radius: 2px;    
}

/* bounce from bottom to top 100% height */
.tile figcaption.bounce {
	color: #fff;
	bottom: 0;
	height: 0em; /* you can change this to make captions visible or not 0 = invisible. */
	background: rgba(10, 48, 78, 0.5);
	transition: all 0.4s cubic-bezier(.25,-0.5,.75,1.5);
    -webkit-transition: all 0.4s cubic-bezier(.25,-0.5,.75,1.5);
    -ms-transition: all 0.4s cubic-bezier(.25,-0.5,.75,1.5);
    -moz-transition: all 0.4s cubic-bezier(.25,-0.5,.75,1.5);
    -o-transition: all 0.4s cubic-bezier(.25,-0.5,.75,1.5);
}

.tile figure:hover figcaption.bounce{
     height: 100%;
     /* height: 2.0em */
}

/* Start with blue opaque then fade to 0 opacity */
.tile figcaption.fade-out {	
  color: #fff;  
  top: 0;
    height: 100%;   
    background: rgba(10, 48, 78, 0.25);
	
     transition: opacity 0.4s ease-in-out;
    -webkit-transition: opacity 0.4s ease-in-out;
    -ms-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
}

.tile figure:hover figcaption.fade-out {	
	opacity: 0;
}

img.banner {
  margin:0;
  padding: 5px 5px 0 5px;
}

@media (max-width: 544px) { /* new extra small breakpoint */
	#leftbox h2 {
    	font-size: 1.4rem;
      	font-weight: 300;
    }
    #leftbox p {
        font-size: 1.1rem;  	  	
        font-weight: 300;
    }
  	#leftbox .fa {
  		font-size: 3.0em;
  	}
    .mobile-tile a {
      font-size: 1.2rem !important;
    }
}

@media (min-width: 544px) and (max-width: 768px){
	#leftbox h2 {
    	font-size: 2.0rem;
      	font-weight: 300;
    }	

    #leftbox p {
        font-size: 1.3rem;  	  	
        font-weight: 300;
    }
  	#leftbox .fa {
  		font-size: 4.0em;
  	}
}  

/* Extra small container - Phone mode only */
@media (max-width: 767px) {
	/* mobile fixes 	
    .logo { margin-left: 0 !important; }	
	#site-title-row { margin-left: -15px; }
	#site-title { margin-right: 0px; } */
  img.banner {
  margin:0;
  padding:0;
}
  	.row { margin: 0; }
	.mobile-colfix { padding: 0px !important; }
	footer section ul { margin-top: 0px; border-top: 0.25em solid #626262; }
    .carousel-control span { color: #fff; } /* change the color of the carousel handles */
  	.carousel-indicators {bottom:0;}
  
	#leftbox {
    	height: auto;
		width: 100%;			
		border-radius: 0;
		margin: 0;
		padding: 15px;
		background: #0a304e;
		color: #fff;
		border-bottom: 0.25em solid #626262;
	}
 
 
	
	#mobile-apply-btn, .mobile-tile  {	
		height: 75px; 
		background: #0a304e;
	}
	#mobile-apply-btn a, .mobile-tile a { 
		display: block; 
		height: 100%; 		
		text-align: center; 
		line-height: 75px; 
		color: #fff;
		font-size: 1.5rem;
	}
	#mobile-banner img {
		margin: 0;
		padding: 0 -15px;
	}
	
	#mobile-banner figcaption {
		position: absolute;
		width: 100%;
		text-align: center;			
		bottom: 0;
		font-size: 0.9rem;
		padding: 0.1625em;
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
	}	
	.mobile-tile {
		border: 1px solid #626262; /* faking gutters */
		/* padding: 0px !important;  reset bootstrap column */
	}
}

@media (min-width: 768px) and (max-width: 991px) { /* small size container*/
  
    #leftbox h2 {
        font-size: 2.35rem;
        font-weight: 300;
    }	
    
    
    #leftbox p {
        font-size: 1.1rem;  	  	
        font-weight: 300;
    }
	.tile figcaption.bounce { font-size: 0.6rem; }
	#mosaic { height: 289px; }
	#mosaic .sq1-1 { height: 88px; width: 88px;}
	#mosaic .sq2-2 { height: 181px;	width: 181px; }
	#mosaic .rect2-1 { height: 88px; width: 181px;	}
	#mosaic .rect1-2 { height: 181px; width: 88px;	}
	
	#mosaic #tile1 { }
	#mosaic #tile2 { }
	#mosaic #tile3 { }
	#mosaic #tile4 { width: 88px; height: 62px; } 
	#mosaic #tile5 { width: 181px; height: 160px; }
	#mosaic #tile6 { }
	#mosaic #tile7 { }
	#mosaic #tile8 { }
	#mosaic #tile9 { top: 73px; width: 88px; height: 113px;  }	
	#mosaic #tile10 { }
	#mosaic #tile11 { }
	#mosaic #tile12 { }
	#mosaic #tile13 { }
	#mosaic #tile14 { top: 170px; width: 181px; height: 109px; }
	#mosaic #tile15 { }
	
	#mosaic .row1 { top: 5px; }
	#mosaic .row2 {	top: 98px; }
	#mosaic .row3 {	top: 191px; }

	#mosaic .col1 {	left: 5px; } /* notice the 1 px difference */
	#mosaic .col2 {	left: 98px; }
	#mosaic .col3 {	left: 191px; }
	#mosaic .col4 {	left: 284px; }
	#mosaic .col5 {	left: 377px; }
	#mosaic .col6 {	left: 470px; }
	#mosaic .col7 {	left: 563px; }
	#mosaic .col8 {	left: 656px; }
}

@media (min-width: 992px) and (max-width: 1199px) {/* medium size container*/
.tile figcaption.bounce { font-size: 0.75rem; }
	#mosaic { height: 373px; }
	#mosaic .sq1-1 { height: 116px; width: 116px;}
	#mosaic .sq2-2 { height: 237px;	width: 237px; }
	#mosaic .rect2-1 { height: 116px; width: 237px;	}
	#mosaic .rect1-2 { height: 237px; width: 116px;	}
	
	#mosaic #tile1 { }
	#mosaic #tile2 { }
	#mosaic #tile3 { }
	#mosaic #tile4 { width: 116px; height: 82px;  } 
	#mosaic #tile5 { width: 237px; height: 210px; }
	#mosaic #tile6 { }
	#mosaic #tile7 { }
	#mosaic #tile8 { }	
	#mosaic #tile9 { top: 93px; width: 116px; height: 149px;  }	
	#mosaic #tile10 { }
	#mosaic #tile11 { }
	#mosaic #tile12 { }
	#mosaic #tile13 { }
	#mosaic #tile14 { top: 220px; width: 237px; height: 143px;   }
	#mosaic #tile15 { }
	
	#mosaic .row1 { top: 5px; }
	#mosaic .row2 {	top: 126px; }
	#mosaic .row3 {	top: 247px; }

	#mosaic .col1 {	left: 4px; }
	#mosaic .col2 {	left: 124px; }
	#mosaic .col3 {	left: 245px; }
	#mosaic .col4 {	left: 366px; }
	#mosaic .col5 {	left: 487px; }
	#mosaic .col6 {	left: 608px; }
	#mosaic .col7 {	left: 729px; }
	#mosaic .col8 {	left: 850px; }
}

@media (min-width: 1200px) { /* large size container*/
	#mosaic { height: 446px; }
	#mosaic .sq1-1 { width: 141px; height: 141px;}
	#mosaic .sq2-2 { width: 287px; height: 287px;	 }
	#mosaic .rect2-1 { width: 287px; height: 141px; }
	#mosaic .rect1-2 { width: 141px; height: 287px; }
	
	#mosaic #tile1 { }
	#mosaic #tile2 { }
	#mosaic #tile3 { }
	#mosaic #tile4 { width: 141px; height: 100px;  } 
	#mosaic #tile5 { width: 287px; height: 250px;}
	#mosaic #tile6 { }
	#mosaic #tile7 { }
	#mosaic #tile8 { }
	#mosaic #tile9 { top: 111px; width: 141px; height: 181px;  }	
	#mosaic #tile10 { }
	#mosaic #tile11 { }
	#mosaic #tile12 { }
	#mosaic #tile13 { }
	#mosaic #tile14 { top: 260px; width: 287px; height: 178px; }
	#mosaic #tile15 { }
	
	#mosaic .row1 { top: 5px; }
	#mosaic .row2 {	top: 151px; }
	#mosaic .row3 {	top: 297px; }

	#mosaic .col1 {	left: 4px; }
	#mosaic .col2 {	left: 149px; }
	#mosaic .col3 {	left: 295px; }
	#mosaic .col4 {	left: 441px; }
	#mosaic .col5 {	left: 587px; }
	#mosaic .col6 {	left: 733px; }
	#mosaic .col7 {	left: 879px; }
	#mosaic .col8 {	left: 1025px; }
}