/*-- FHB Tiles CSS --*/

.images-section {
	float:left;
	margin-bottom:25px;
}
.homeFrame {
	clear: both;
    width: 100%;
	min-height:386px;
	overflow:hidden;
}

/*--- COLUMNS ---*/
.homeFrame .column {
	float:left;
	position:relative;
	height:387px !important;
	margin-top:0;
	margin-bottom:0;
	transition: all 0.2s ease-out 0s;
}
.homeFrame #homecol1, 	
.homeFrame #homecol1 .moduleContent {
	width:221px;
}
.homeFrame #homecol1 {
	margin-left: 0;
	margin-right:14px;
}	
.homeFrame #homecol2,
.homeFrame #homecol2 .moduleContent,
.homeFrame #homecol3,
.homeFrame #homecol3 .moduleContent,
.homeFrame #homecol4,
.homeFrame #homecol4 .moduleContent {
	width:221px;
}
.homeFrame #homecol2,
.homeFrame #homecol3,
.homeFrame #homecol4 {
	margin-left:14px;
	margin-right:14px;
}
.homeFrame #homecol5,
.homeFrame #homecol5 .moduleContent {
	width:140px;
}	
.homeFrame #homecol5 {
	margin-left:14px;
	margin-right:0;
}


/*--- EXPANDED COLUMNS ---*/
.homeFrame .column.expanded .moduleContent,
.homeFrame .column.expanded {
    width: 300px !important;
}
.homeFrame .column.expanded section {
	height:75px !important;	
}
.homeFrame .column.expanded .openModule .moduleContent,
.homeFrame .column.expanded .openModule {
	height:300px !important;
}
.homeFrame #homecol5.column.expanded .moduleContent,
.homeFrame #homecol5.column.expanded {
    width: 228px !important;
}
.homeFrame .column.expanded .small {
	display:none;
	transition: all 0.2s ease-out 0s;
}
.homeFrame .column.expanded .large,
.homeFrame .column.expanded .medium-square,
.homeFrame .column.expanded .medium-portrait,
.homeFrame .column.expanded .medium-landscape {
    width: 100% !important;
}
.homeFrame #homecol5.column.expanded .homeModule3 {
	top:0;
}

/*--- COLLAPSED COLUMNS ---*/
.homeFrame #homecol1.column.collapsed,
.homeFrame #homecol2.column.collapsed,
.homeFrame #homecol3.column.collapsed,
.homeFrame #homecol4.column.collapsed,
.homeFrame #homecol1.column.collapsed .moduleContent,
.homeFrame #homecol2.column.collapsed .moduleContent,
.homeFrame #homecol3.column.collapsed .moduleContent,
.homeFrame #homecol4.column.collapsed .moduleContent {
    width: 200px !important;
	overflow:hidden;
}
.homeFrame #homecol2.column.collapsed .small,
.homeFrame #homecol3.column.collapsed .small,
.homeFrame #homecol4.column.collapsed .small {
    left:-10px;
}
.homeFrame #homecol5.column.collapsed,
.homeFrame #homecol5.column.collapsed .moduleContent {
    width: 128px !important;
}

/*--- MODULE CONTENT ---*/
.homeFrame .module {
	background-size:100% !important;
	background-position: 50% center !important;
	overflow: hidden;
	position: absolute;
	transition: all 0.2s ease-out 0s;
}
.homeFrame .module:hover {
	cursor:pointer;
}
.homeFrame .module .moduleContent {
	float: left;
    overflow: hidden;
}
.homeFrame .module .moduleContentInner {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    opacity: 0;
    overflow: hidden;
    padding: 15px;
    transform: scale(0);
    transition: all 0.2s ease-out 0s;
	min-height:300px !important; /*---------May need to be changed-------*/
}
.homeFrame .module .moduleContentInner h2 {
	margin: 0 0 0.25em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.homeFrame .openModule .moduleContentInner article {
	display:block;
}
.homeFrame .openModule .moduleContentInner {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.2s;
}
.homeFrame .openModule:hover {
	opacity:1;
}
.homeFrame .moduleContent > h2 {
	position: absolute;
	bottom:1%;
	opacity:0;
	padding:5px;
	width:96%;
}
.homeFrame .module:hover .moduleContent {
	background:rgba(0, 0, 0, 0.4);
	transition: all 0.2s ease-out 0s;
}
.homeFrame .module:hover .moduleContent > h2 {
	opacity:1;
	transition: all 0.2s ease-out 0s;
}
.homeFrame .openModule:hover .moduleContent > h2 {
	opacity:0;
	display:none;
}
.homeFrame .openModule:hover .moduleContent {
	background:rgba(0, 0, 0, 0);
}


/*--- MODULES---*/
.homeFrame .large {
	width: 221px;
	height:224px;
}
.homeFrame .medium-square {
	width: 140px;
	height:139px;	
}
.homeFrame .medium-landscape {
	width: 221px;
	height: 140px;
}
.homeFrame .medium-portrait {
	width: 140px;
	height: 221px;
}
.homeFrame .small,
.homeFrame .small h2 {
	width: 59px;
	height: 58px;	
}
.homeFrame #homecol1 .homeModule1 {
	top:0;
}
.homeFrame #homecol1 .homeModule2 {
	bottom:0;	
}
.homeFrame #homecol2 .homeModule1 {
	top:0;	
}
.homeFrame #homecol2 .homeModule2 {
	top:164px;
}
.homeFrame #homecol2 .homeModule3 {
	bottom:0;
	right:0;
}
.homeFrame #homecol2 .homeModule4 {
	top:247px;
}
.homeFrame #homecol2 .homeModule5 {
	bottom:0;
}
.homeFrame #homecol3 .homeModule1 {
	top:0;
}
.homeFrame #homecol3 .homeModule2 {
	right:0;
}
.homeFrame #homecol3 .homeModule3 {
	top:81px;
}
.homeFrame #homecol3 .homeModule4 {
	bottom:0;
}
.homeFrame #homecol4 .homeModule1 {
	top:0;
}
.homeFrame #homecol4 .homeModule2 {
	right:0;
	bottom:0;
}
/*
.homeFrame #homecol4 .homeModule3 {
	top:81px;
}
.homeFrame #homecol4 .homeModule4 {
	bottom:0;
}*/
.homeFrame #homecol5 .homeModule1 {
	top:0;
}
.homeFrame #homecol5 .homeModule2 {
	right:0;
}
.homeFrame #homecol5 .homeModule3 {
	top:81px;
}
.homeFrame #homecol5 .homeModule4 {
	bottom:0;
}
/*--- MODULE CONTENT ---*/
.homeFrame #homecol5 .moduleContentInner p {
	font-size:16px;
	line-height:24px;
	margin:0 0 12px;
}


@media (max-width: 1200px) {
	.homeFrame {
		min-height:315px !important;
	}
	.homeFrame .column {
		height:315px !important;
	}
	.homeFrame #homecol1, 	
	.homeFrame #homecol1 .moduleContent {
		width:183px;
	}
	.homeFrame #homecol1 {
		margin-left: 0;
		margin-right:11.5px;
	}	
	.homeFrame #homecol2,
	.homeFrame #homecol2 .moduleContent,
	.homeFrame #homecol3,
	.homeFrame #homecol3 .moduleContent,
	.homeFrame #homecol4,
	.homeFrame #homecol4 .moduleContent {
		width:183px;
	}
	.homeFrame #homecol2,
	.homeFrame #homecol3,
	.homeFrame #homecol4 {
		margin-left:11.5px;
		margin-right:11.5px;
	}
	.homeFrame #homecol5,
	.homeFrame #homecol5 .moduleContent {
		width:115px;
	}	
	.homeFrame #homecol5 {
		margin-left:11.5px;
		margin-right:0;
	}

	/*--- EXPANDED COLUMNS ---*/
	.homeFrame .column.expanded .moduleContent,
	.homeFrame .column.expanded {
	    width: 247px !important;
	}
	.homeFrame .column.expanded .openModule .moduleContent,
	.homeFrame .column.expanded .openModule {
		height:247px !important;
	}
	.homeFrame #homecol5.column.expanded .moduleContent,
	.homeFrame #homecol5.column.expanded {
	    width: 188px !important;
	}
	.homeFrame .column.expanded section {
		height:50px !important;	
	}

	/*--- COLLAPSED COLUMNS ---*/
	.homeFrame #homecol1.column.collapsed,
	.homeFrame #homecol2.column.collapsed,
	.homeFrame #homecol3.column.collapsed,
	.homeFrame #homecol4.column.collapsed,
	.homeFrame #homecol1.column.collapsed .moduleContent,
	.homeFrame #homecol2.column.collapsed .moduleContent,
	.homeFrame #homecol3.column.collapsed .moduleContent,
	.homeFrame #homecol4.column.collapsed .moduleContent {
	    width: 165px !important;
		overflow:hidden;
	}
	.homeFrame #homecol5.column.collapsed,
	.homeFrame #homecol5.column.collapsed .moduleContent {
	    width: 106px !important;
	}
	
	/*--- MODULES---*/
	.homeFrame .large {
		width: 183px;
		height:185px;
	}
	.homeFrame .medium-square {
		width: 115px;
		height:115px;	
	}
	.homeFrame .medium-landscape {
		width: 183px;
		height: 115px;
	}
	.homeFrame .medium-portrait {
		width: 115px;
		height: 183px;
	}
	.homeFrame .small,
	.homeFrame .small h2 {
		width: 50px;
		height: 49px;	
	}
	.homeFrame #homecol2 .homeModule2 {
		top:141px;
	}
	.homeFrame #homecol2 .homeModule4 {
		top:207px;
	}
	.homeFrame #homecol3 .homeModule3,
	.homeFrame #homecol4 .homeModule3,
	.homeFrame #homecol5 .homeModule3 {
		top:66px;
	}
	
	/*--- MODULE CONTENT ---*/
	.homeFrame .moduleContentInner p {
		font-size:14px;
		line-height:21px;
		margin:0 0 16px;
	}
	.homeFrame #homecol5 .moduleContentInner p {
		font-size:13px;
		line-height:18px;
		margin:0 0 12px;
	}
	.homeFrame #homecol5 .moduleContentInner .button {
		font-size:14px;
		line-height:31px;
		margin:0 0 12px;
		min-width:90px;
		height:29px;
		margin:8px 0 !important;
	}
	.homeFrame #homecol5 .moduleContentInner .button:first-child {
		margin-top:0 !important;
	}
}

@media (max-width: 992px){
	.images-section {
		position:relative;
	}
	.homeFrame {
		margin-bottom:25px;
		min-height:292px !important;
	}
	.homeFrame .column {
		height:292px !important;
	}
	.homeFrame #homecol1, 	
	.homeFrame #homecol1 .moduleContent,
	.homeFrame #homecol2,
	.homeFrame #homecol2 .moduleContent,
	.homeFrame #homecol3,
	.homeFrame #homecol3 .moduleContent {
		width:168px;
	}
	.homeFrame #homecol4,
	.homeFrame #homecol4 .moduleContent {
		width:167px;
	}
	.homeFrame #homecol1 {
		margin-left: 0;
		margin-right:8px;
	}
	.homeFrame #homecol2,
	.homeFrame #homecol3 {
		margin-left:8px;
		margin-right:8px;
	}
	.homeFrame #homecol4 {
		margin-left:8px;
		margin-right:0;
	}
	.homeFrame #homecol5 {
		display:none;
		visibility:hidden;
	}
	
	/*--- EXPANDED COLUMNS ---*/
	.homeFrame .column.expanded .moduleContent,
	.homeFrame .column.expanded {
	    width: 226px !important; 
	}
	.homeFrame .column.expanded .openModule .moduleContent,
	.homeFrame .column.expanded .openModule {
		height:226px !important;
	}
	.homeFrame .column.expanded section {
		height:50px !important;	
	}

	/*--- COLLAPSED COLUMNS ---*/
	.homeFrame #homecol1.column.collapsed,
	.homeFrame #homecol2.column.collapsed,
	.homeFrame #homecol3.column.collapsed,
	.homeFrame #homecol4.column.collapsed,
	.homeFrame #homecol1.column.collapsed .moduleContent,
	.homeFrame #homecol2.column.collapsed .moduleContent,
	.homeFrame #homecol3.column.collapsed .moduleContent,
	.homeFrame #homecol4.column.collapsed .moduleContent {
	    width: 148px !important;
	}

	/*--- MODULES---*/
	.homeFrame .large {
		width: 168px;
		height:170px;
	}
	.homeFrame .medium-square {
		width: 106px;
		height:106px;	
	}
	.homeFrame .medium-landscape {
		width: 168px;
		height: 106px;
	}
	.homeFrame .medium-portrait {
		width: 106px;
		height: 168px;
	}
	.homeFrame .small,
	.homeFrame .small h2 {
		width: 46px;
		height: 45px;	
	}
	.homeFrame #homecol2 .homeModule2 {
		top:124px;
	}
	.homeFrame #homecol2 .homeModule4{
		top:186px;
	}
	.homeFrame #homecol3 .homeModule3,
	.homeFrame #homecol4 .homeModule3 {
		top:61px;
	}
	
	/*--- MODULE CONTENT ---*/
	.homeFrame .moduleContentInner p {
		font-size:13px;
		line-height:18px;
	}
	.homeFrame .moduleContentInner .button {
		font-size:14px;
		padding:0;
		height:25px;
		line-height:26px;
		min-width:95px;
	}
}

@media (max-width: 767px){
	.images-section {
		float:none;
		position:relative;
	}
	.homeFrame,
	.homeFrame .column {
		height:auto !important;
	}
	.homeFrame .column {
		margin:0;	
	}
	.homeFrame #homecol1, 	
	.homeFrame #homecol1 .moduleContent,
	.homeFrame #homecol2,
	.homeFrame #homecol2 .moduleContent,
	.homeFrame #homecol3,
	.homeFrame #homecol3 .moduleContent,
	.homeFrame #homecol4,
	.homeFrame #homecol4 .moduleContent {
		display:block;
		width:100%;
		margin:0 0 10px 0;
	}
	.homeFrame .module {
		position:relative;
		margin-bottom:12px;
		height:100px;
	}
	.homeFrame .small {
		display:none;
	}
	.homeFrame .large,
	.homeFrame .medium-landscape,
	.homeFrame .medium-square {
		width:100%;
		max-width:100%;
		max-height:100%;
	}
	.homeFrame .medium-portrait,
	.homeFrame .small,
	.homeFrame .small h2 {
		display:none;
	}
	/*--- EXPANDED COLUMNS ---*/
	.homeFrame .column.expanded .moduleContent,
	.homeFrame .column.expanded {
	    width: 100% !important;
	}
	.homeFrame .column.expanded .openModule .moduleContent,
	.homeFrame .column.expanded .openModule {
		height:276px !important;
	}
	.homeFrame .column.expanded section {
		height:100px !important;	
	}

	/*--- COLLAPSED COLUMNS ---*/
	.homeFrame #homecol1.column.collapsed,
	.homeFrame #homecol2.column.collapsed,
	.homeFrame #homecol3.column.collapsed,
	.homeFrame #homecol4.column.collapsed,
	.homeFrame #homecol1.column.collapsed .moduleContent,
	.homeFrame #homecol2.column.collapsed .moduleContent,
	.homeFrame #homecol3.column.collapsed .moduleContent,
	.homeFrame #homecol4.column.collapsed .moduleContent {
	    width: 100% !important;
	}
	
	/*--- MODULE CONTENT ---*/
	.homeFrame .moduleContentInner h2 {
		font-size:16px;
		line-height:24px;
	}
	.homeFrame .moduleContentInner p {
		font-size:16px;
		line-height:24px;
	}
	.homeFrame .moduleContentInner .button {
		font-size:16px;
		padding:0 12px;
		height:30px;
		line-height:31px;
		min-width:104px;
	}
	.homeFrame #homecol1 .homeModule2,
	.homeFrame #homecol4 .homeModule2 {
		display:none;
	}
	
	.homeFrame .module .moduleContent {
		background:rgba(0, 0, 0, 0.4);
	}
	.homeFrame .module .moduleContent > h2 {
		opacity:1;
	}

}