// General page section setup

.page-section.style-dark {
	background-color: #7D818C;
}
.page-section.style-med {
	background-color: #FBFBFB;
}

.page-title {
	padding: 20px 0px;
}
// .spacing {
// .section-inner
.alt-row, .introduction_feature_boxes, .accordion, .card_grid, 
.section-inner.news, .section-inner.gallery, .plain_text, .content_columns{
	margin: 50px auto;
} 
.clearfix:before {
	display: table; 
	content: " " ;
	width: 100%;
}

@media screen and (min-width: $small-screen-up) {
	.image-cta.boxed {
		margin :50px auto;
	}
}
@media screen and (min-width: 1600px) {
	.alt-row, .introduction_feature_boxes, .accordion, .card_grid, 
	.section-inner.news, .section-inner.gallery, .plain_text, .content_columns{
		margin: 80px auto;
	}

}


.large-slide img {
	// width: 100%;
	display: block;
	margin: 0 auto;
}
// }

// News
// ---------------------------------------------------
.page-section .slick-track
{
    display: flex !important;
}

.page-section  .slick-slide
{
    height: inherit !important;
    > div {
    	height: 100%;
    	display: flex;
    }
}

.news-buttons {
	margin-top: 30px;
}
@media screen and (min-width: $medium-screen-up){
	.page-section .news {
		.post-card {
			width: 24%;
			display: inline-block;
			vertical-align:top;
		}
	}
}
@media screen and (max-width: $small-screen) {
	.news-buttons .buttons {
		display: flex;
		align-items:center;
		justify-content: space-between;
	}
}
// Gallery
// ---------------------------------------------------
.theme-gallery {
	text-align:center;
	.gallery-item {
		display: block;
		width: 100%;
		break-inside: avoid;
		font-size: 0px;
		margin-bottom: 4px;
		img {
			display: block;
			width: 100%;
		}
	}
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 4px;
	-moz-column-gap: 4px;
	column-gap: 4px;
}

@supports (grid-template-rows: masonry) {
	.theme-gallery {
	  /* masonry code here */
	  display: grid;
	  // grid-template-columns: repeat(4, 1fr);
	  grid-template-rows: masonry;

	  display: grid;
	  grid-gap: 5px;
	  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
	  // grid-auto-rows: 0;
	  column-count: 1;
		.gallery-item {
			display: block;
		}
	}
}
@media screen and (min-width: $small-screen-up) {
	.theme-gallery {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
}
@media screen and (min-width: $large-screen-up) {
	.theme-gallery {
		-webkit-column-count: 4;
		-moz-column-count: 4;
		column-count: 4;
	}
}
// Content columns
// ---------------------------------------------------
.content-columns {
	display: grid; 
	grid-gap: $gutter-width;

}
.content-column-card > img {
	// width: 100%;
	// margin: 0 auto;
	margin-right: auto;
}
.section-inner {
	overflow: hidden;
}
@media screen and (min-width: $small-screen-up) {
	.content-columns {
		grid-template-columns: 1fr 1fr;
	}
}
@media screen and (min-width: $medium-screen-up) {
	.content-columns {
		&.column-count-2 {
			grid-template-columns: 1fr 1fr;
		}
		&.column-count-3 {
			grid-template-columns: 1fr 1fr 1fr;
		}
		&.column-count-4 {
			grid-template-columns: 1fr 1fr 1fr;
		}
	}
}

// Feature-boxes
// ---------------------------------------------------
.feature-boxes-introduction {

}

.feature-grid-box {
	padding-top: 0px;
	h4 {
		margin-top: 0px;
		overflow-wrap: break-word;
// word-break:break-all;
	}
	a {
		color :#fff;
		width: 100%;
	}

	text-align:center;
	overflow: hidden;
	.feature-box-content {
		margin-bottom: 2.5em;
	}
	.btn {
		margin-top: auto;
		margin-bottom: 0;
		width: auto;
		max-width: 293px;
		margin-left: auto;
		margin-right: auto;
	}
	>a {
		display: block;
		transition:  all .2s;
		&:hover {
			background-color: rgba(0,0,0,.2);
		}
	padding: 12px 20px;
	}
}
.feature-grid-box:nth-child(1n) {
	background-color: #0D2F56;
}
.feature-grid-box:nth-child(2n) {
	background-color: #194F8E;
}
.feature-grid-box:nth-child(3n) {
	background-color: #19768E;
}
@media screen and (max-width: $small-screen) {
	.feature-grid-box {
		text-align: center;
		>a {
			padding-top: 15px;
		}
		h4 {
			display: block;
			margin-bottom: 0px;
		}
	}
}

@media screen and (min-width: $small-screen-up) {
	.feature-boxes-introduction {
		padding-right: $gutter-width;
		padding-left: $gutter-width;
	}
	.feature-grid-box {
	display: flex;
	>a {
		padding: 28px 28px;
		display: flex;
		flex-direction: column;
	}
	}
}


@media screen and (min-width: $medium-screen-up) {
	.feature-grid {
		display: grid;
		grid-gap: 11px;
		grid-template-columns: 1fr 1fr 1fr;
	}
}


// Featurebackground row
.feature-background-box {
	@include coverbg;
	min-height: 554px;
	&:before {
		content: " " ;
		display: table;
		clear:both;
		width: 100%;

	}
}

.feature-background-box-content-inner {
	margin: 0 auto;
	max-width: 400px;
}

.feature-background-box-content {
	background-color: #fff;
	  box-shadow: 0 2px 15px 0 rgba(0,0,0,0.27);
	  padding: 27px;
}

@media screen and (max-width: $small-screen) {
	.feature-background-box-content {
		margin-top: 309px;
		// margin-bottom: -95px;
		position: relative;
		bottom: -95px;
	}
	.feature-background-box {
		margin-bottom: 145px;
	}
}

@media screen and (min-width: $small-screen) {
	.feature-background-box-content {
		margin: 113px 20px 113px auto;
		width: 50%;
	}
}

@media screen and (min-width: $large-screen) {
	.feature-background-box-content {

		width: 32%;
	}
}

// ---------------------------------------------------

// image cta
// ---------------------------------------------------

.image-cta {
	@include coverbg;
}
.image-cta.boxed {
	.btn {
		margin-top: 2em;
	}
}

@media screen and (max-width: $small-screen-up) {
	.image-cta {
		text-align:center; 
		padding: 47px 20px;
	}
	.image-cta.boxed {
			&:before {
			content: " ";
			display: table;
			clear:both;
			width: 100%;
		}
		.image-cta-content {
			margin-top: 435px;
		}
	}

}

@media screen and (min-width: $small-screen-up) {
	.image-cta {
		padding: 60px;
	}
	.image-cta.boxed {text-align: center;}
	.image-cta.full-width {
		.image-cta-content {
			display: flex;
			justify-content: space-between;
			align-items:center;
		}
	}
}

@media screen and (min-width: 1400px) {
	.image-cta.full-width {
		padding: 110px;
	}
}
// Accordion
// ---------------------------------------------------
.accordion {
	margin: 3em auto;
}
.accordion-item {
}
.accordion-title {
	border-top: 1px solid #DEDFEB;
	background-color: #fff;
	overflow:hidden;
	cursor: pointer;
	padding: 1em 0em;
	padding-right: 3em;
	position:relative;
	transition: all .2s;
	&:hover {
		h2,h3,h4,h5,h6 {
			color: $blue;
		}
		svg path {
			fill: $blue;
		}
	}
	h1,h2,h3,h4,h5 {
		font-weight: 600;
		  color: #26282D;
		  font-size: 18px;
		  font-weight: 600;
		  letter-spacing: 0;
		  line-height: 25px;
		
	}
}
.accordion-title .chevron {
	position:absolute;
	right: 1em;
	top: 50%;
	transform:translateY(-50%);
	transition: all .2s;
	width:1em;
}
.accordion-item.open .accordion-title .chevron {

	transform:translateY(-50%) rotate(45deg);
}
.accordion-content {
	overflow:hidden;
	padding: 1em 0em;
}

@media screen and (max-width: $small-screen-up) {
  .page-section .accordion {
    margin-left: -$outer-padding;
    margin-right: -$outer-padding;
  }
  .accordion-title, .accordion-content {
  	padding-left: $outer-padding;
  	padding-right: $outer-padding;
  	.chevron {
  		right: 2em;
  	}
  }
}
// Split row 
// ---------------------------------------------------
.alt-row {
	overflow:hidden;
	position:relative;
	.row-content {
  		padding: 0px $gutter-width*.75;

	}
	.image-cover {
		@include coverbg;
		min-height:400px;
	}
	.row-content-inner {
		max-width: 640px;
		margin: 3em 0px;
	}
}
.slick-slide .alt-row {
	margin-bottom: 0px;
}

.slider .control-range {
	margin-top: 45px;
}

.alt-row-image-column {
	img {
		display: block;
		margin: 0 auto;
	}
}

@media screen and (min-width: $medium-screen-up) {
	.alt-row-column {
		width:50%;
	}
	.alt-row-column {
		float:left;
	}
	.image-right .alt-row-column {
		float:right;
	}

	.alt-row-inner-container  {
		display: flex;
		align-items:center;
	}

	.image-right .alt-row-inner-container {
		flex-direction: row-reverse;
	}
	.image-left .alt-row-image-column {
		padding-right: $gutter-width;
	}
	.image-right .alt-row-image-column {
		padding-left: $gutter-width; 
	}
	.alt-row-content {
		padding: $gutter-width 60px;
		.wysiwyg {
			max-width: 750px;
			margin: 0 auto;
		}
	}

}
// Hero



// Hero/////

.site-header {
	z-index:99;
}
.background-video{
	position:absolute;
	min-width:100%;
	min-height: 100%;
	top: 50%;
	left: 50%;
	transform:translate(-50%, -50%) ;
}
.video-block-hover {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 2;
  background: linear-gradient(180deg, #2D2F37 0%, rgba(45,47,55,0) 100%);

}
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;

    position:absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%) ;


    height: 100%;
    width: 177.77777778vh; /* 100 * 16 / 9 */
    min-width: 100%;
    min-height: 56.25vw; /* 100 * 9 / 16 */

}
.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.hero {
	text-align:center;
	background-color: $gray-dark;
	overflow:hidden;
	position:relative;
	padding: 155px 0px;
	min-height: 597px;
	@include coverbg();



	.container{
		position: relative;
	}


 }

 .hero-inner > .buttons {
 	margin-top: 4em;

 }
 .explore-page-links-mobile {
 	margin-top: 80px;
 	h3 {
 		margin-bottom: 1.25em;
 	}
 }
 .explore-page-links-mobile .btn {
 	display: block;
 	margin-bottom: 18px;
 }
 .explore-page-links-desktop {
 	display: grid;
 	grid-gap: $gutter-width;
 	text-align:center;
 	margin-top: 90px;

 }

 .explore-box {
 	background-color: #fff;
 	padding: 12px 58px 28px 58px;
 	display: flex;
 	flex-direction: column;
 	min-height: 230px;
 	h4 {
 		// margin-bottom: 2em;
 	}
 	.btn {
 		margin-bottom: 0px;
 		margin-top: auto;
 		margin-left: auto;
 		margin-right: auto;
 		display: inline-block;
 	}
 }

@media (min-width:$medium-screen-up) {
	.explore-page-links-desktop {
		grid-template-columns: 1fr 1fr 1fr;
	}
}


@media screen and (max-width: $small-screen-up) {
	.explore-block {
		padding-top: 98px;
		padding-bottom: 98px;
	}
}


.fullscreen-video-button {
	position: absolute;
	bottom: 20px;
	left: 20px;
}

@media (min-width:$small-screen-up) {
	.hero {
		min-height: 530px;	
	}
	.hero-inner {
		max-width:785px;
		margin: 0 auto;
	}

	.explore-block-inner {
		max-width: 994px;
	}
	.split-row {
		.row-content {
			float:right;
			width: 50%;
	  		padding: 0px $gutter-width;
		}
		.image-cover {
			width:50%;
			height:100%;
			position:absolute;
			top: 0;
			left: 0;
		}
		.row-content-inner {
			margin: 4em 0px;
		}
	}

}

@media (min-width:$large-screen-up) {
	.hero-inner > .buttons {
		.btn {
	  		font-size: $button-large-fontsize;
		}
	}
	.split-row {
		.row-content {
	  		padding: 0px $gutter-width*2;
		}
		.row-content-inner {
			margin: 4em 0px;
		}
	}

}
