/*
 * Custom Page CSS
 * ===============
 * This CSS file is used by all the custom pages as they are all the same
 *
 * Contents/Flow
 * =============
 * 1) Headings
 * 2) Columns
 * 3) Images
 * 4) Media Queries
 */

 /*
 * 1) Headings
 * ===========
 */

	.headingDiv {
		width: 100%;
	}

	.headingDiv.headingImage {
        padding: 96px 64px 96px 64px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
        text-align: center!important;
	}

	.headingDiv.headingImage h1 {
		padding-top: 0px!important;
		margin-top:0px!important;
		margin-bottom: 10px!important;
		text-align: center!important;
	}
	
	.headingDiv.headingImage h2 {
		font-weight: normal!important;
		margin-top: 20px!important;
  		margin-bottom: 10px!important;
		text-align: center;
		margin: 0 auto;
		max-width: 1000px;
	}
	

/*
 * 2) Columns
 * ==========
 */
	
	.textDiv-12 {
		width: 100%;
	}

	.imagesDiv-12 {
		width: 100%;
	}

	.textDiv-8 {
		float: left;
		width: 66%;
	}

	.imagesDiv-4 {
		float: right;
		text-align: right;
		width: 30%;
	}

	.table-add-border tr td {
		border: solid 1px;
	}

	.table-no-cell-padding tr td {
		padding: 0px!important;
	}

	.el-no-padding {
		padding: 0px!important;
	}

	.table-proportional-cols {
		display: table;
		table-layout: fixed;
		width: 100%;
	}

	.table-proportional-cols tr {
		display: flex;
		width: 100%;
	}

	.table-proportional-cols tr td {
		flex: 1 1 0;
		width: auto;
	}

	.table-proportional-cols tr td img {
		display: block;
		height: auto;
		margin: 0 auto;
		width: 100%;
	}



/*
 * 3) Images
 * =========
 */
	#lightGallery > div
	{
		cursor: pointer;
	}

	.customImageColumnDiv-4 > .customImageColumnDiv {
		margin: 0px !important;
		max-width: 100%;
		width: 100%;
	}

	.customImageColumnDiv {
		display: inline-block;
		margin-top: 26px;
		margin-left: 1%;
		margin-right: 1%;
		vertical-align: top;
		width: 31%;
	}

	.customImageColumnDiv:nth-child(3n-2) {
		margin-right: 2%;
		margin-left: 0%;
	}

	.customImageColumnDiv:nth-child(3n+3) {
		margin-left: 2%;
		margin-right: 0%;
	}

	.customPage1-Image {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		max-width: 100%;
		width: 100%;
	}

	.customPage1-Image:after {
		content: "";
		display: block;
		padding-top: 100%;
	}

	.customPage1-ImageCaption {
		max-width: 100%;
		text-align: center;
	}



/*
 * 4) Media Queries
 * ================
 */
	@media(max-width: 1030px){
		.customImageColumnDiv:nth-child(3n-2) {
			margin-right: 1%;
			margin-left: 0%;
		}

		.customImageColumnDiv:nth-child(3n+3) {
			margin-right: 0%;
			margin-left: 1%;
		}
	}

	@media(max-width: 991px){
		.textDiv-8 {
			float: none;
			width: 100%;
		}

		.imagesDiv-4 {
			float: none;
			text-align: left;
			width: 100%;
		}

		.customImageColumnDiv-4 > .customImageColumnDiv {
			margin-top: 20px !important;
		}

		.customImageColumnDiv {
			width: 47%;
		}

		.customImageColumnDiv:nth-child(3n-2) {
			margin-right: 0%;
			margin-left: 0%;
		}

		.customImageColumnDiv:nth-child(3n+3) {
			margin-right: 0%;
			margin-left: 0%;
		}

		.customImageColumnDiv:nth-child(2n-1) {
			margin-right: 2%;
			margin-left: 0%;
		}

		.customImageColumnDiv:nth-child(2n) {
			margin-right: 0%;
			margin-left: 2%;
		}

		.table-proportional-cols tr {
			flex-wrap: wrap;
		}

		.table-proportional-cols tr td {
			flex: 1 1 100%;
			width: 100%;
		}
	}

	@media(max-width: 625px){
		
		.headingDiv.headingImage {
            padding: 64px 32px 64px 32px!important;
        }
		
		.customImageColumnDiv {
			width: 100%;
		}

		.customImageColumnDiv:nth-child(3n-2) {
			margin-right: 0%;
			margin-left: 0%;
		}

		.customImageColumnDiv:nth-child(3n+3) {
			margin-right: 0%;
			margin-left: 0%;
		}

		.customImageColumnDiv:nth-child(2n-1) {
			margin-right: 0%;
			margin-left: 0%;
		}

		.customImageColumnDiv:nth-child(2n) {
			margin-right: 0%;
			margin-left: 0%;
		}
	}