.palette-primary .transparent-background-color {
	background-color: transparent !important;
}

/** Header on top specific styles (this is the default style) **/
@media only screen and (min-width: 768px) {
	.flexbox .header-fixed.header-top .wp-custom-header {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		video {
			height: 100%;
			width: 100%;
			object-fit: cover;
		}
	}
}

/** Header on left **/

/* admin bar on mobile header fixed */
@media screen and (max-width: 782px) {
	.admin-bar.header-fixed{
		.header-left, .header-right {
			top: 46px;
		}
	}
}
@media only screen and (min-width: 768px) {
	.flexbox .header-left #boldgrid-sticky-wrap {
		flex-direction: row;
	}
	.flexbox .header-left.header-fixed #boldgrid-sticky-filler {
		flex: 0 0 auto;
	}
	.header-right, .header-left {
		.wp-custom-header,
		.site-header,
		#masthead {
			will-change: height, display, z-index, position;
			width: 400px;
		}
		#secondary-menu {
			justify-content: center;
		}
		&.header-fixed {
			.site-header {
				overflow-x: hidden;
				overflow-y: auto;
				height: 100vh;
				-webkit-transform: translateZ(0);
				transform: translateZ(0);
			}
		}
	}

	.flexbox .header-left .site-header {
		display: flex;
		flex: 0 0 400px;
	}
	.flexbox .header-left .site-content {
		width: calc(100% - 400px);
	}
	.flexbox .site-header {
		width: 100%;
	}
	/* Header adjustments */
	.flexbox .header-left.header-fixed .site-header {
		width: 400px;
		height: 100vh;
	}
	.flexbox .admin-bar.header-left.header-fixed .site-header {
		height: calc(100vh - 32px);
	}
	/* Footer Adjustment */
	.flexbox .header-left.header-fixed .site-footer {
		width: calc(100% - 400px);
		margin-left: 400px;
	}
	.flexbox .header-left.header-fixed .site-content {
		margin-left: 400px;
	}
	.flexbox .header-fixed .site-header {
		position: fixed;
		// Set z-index lower than customizer edit buttons @ 210.
		z-index: 201;
	}
}
/** Header on Right **/
@media only screen and (min-width: 768px) {
	.flexbox .header-right #boldgrid-sticky-wrap {
		flex-direction: row-reverse;
	}
	.flexbox .header-right.header-fixed #boldgrid-sticky-filler {
		flex: 0 0 auto;
	}
	.flexbox .header-right .site-header {
		display: flex;
		flex: 0 0 400px;
	}
	.flexbox .header-right .site-content {
		width: calc(100% - 400px);
	}
	/** Menu Styles */
	.flexbox .header-left .site-header input:checked ~ .sm-clean,
	.flexbox .header-left .site-header input:not(:checked):not(.hidden) ~ .sm-clean,
	.flexbox .header-right .site-header input:checked ~ .sm-clean,
	.flexbox .header-right .site-header input:not(:checked):not(.hidden) ~ .sm-clean {
		display: block;
	}
	/** Left w/ fixed position **/
	/* Header adjustments */
	.flexbox .header-right.header-fixed .site-header {
		position: fixed;
		width: 400px;
		height: 100vh;
	}
	/** Left w/ fixed position **/
	/* Header adjustments */
	.flexbox .admin-bar.header-right.header-fixed .site-header {
		height: calc(100vh - 32px);
	}
	/* Footer Adjustment */
	.flexbox .header-right.header-fixed .site-footer {
		width: calc(100% - 400px);
		margin-right: 400px;
	}
	.flexbox .header-right.header-fixed .site-content {
		margin-right: 400px;
	}
	.flexbox .header-fixed.header-left .wp-custom-header video,
	.flexbox .header-fixed.header-right .wp-custom-header video {
		min-height: 100vh;
		object-fit: cover;
		width: 100%;
		overflow: hidden;
	}
}

/** Youtube video iframe background styles **/
.has-youtube-header .wp-custom-header {
	background: #eee;
	height: 100%;
	overflow: hidden;
	padding: 0;
}

/**
* This is used to provide a similar effect as object-fit: cover for Youtube video embeds
* The magic number 56.25vw maintains the 16:9 aspect ratio for the height based on the
* viewport's width.
*/
.has-youtube-header iframe#wp-custom-header-video {
	box-sizing: border-box;
	height: 56.25vw;
	left: 50%;
	min-height: 100%;
	min-width: 100%;
	max-width: 3000%;
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	width: 177.77777778vh;
}

@media only screen and (min-width: 768px) {
	.has-youtube-header #navi-wrap {
		display: block;
		flex-wrap: wrap;
		align-self: center;
	}

	.header-left, .header-right {
		.has-youtube-header .custom-header-media {
			height: 100%;
		}
	}
}

/* Set up header for flex styles */
#masthead {
	backface-visibility: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
}

#navi-wrap {
	display: flex;
	flex-wrap: wrap;
	align-self: center;
	background-color: transparent !important;
	margin-right: 0;
	margin-left: 0;
	&:not(.container){
		width: 100%;
	}
	&.container > #header-widget-area {
		margin:1em calc(50% - 50vw);
	}
}
.header0-op {
	flex-basis: 100%;
}
#navi {
	background-color: transparent !important;
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
}

@media only screen and (min-width : 768px) {
	#navi-wrap {
		width: 100%;
	}
	#navi.container {
		flex-basis: auto;
	}
	.main-menu-btn {
		margin-top: -1em;
	}
}

/** Allow box shadow display **/
.site-header {
	z-index: 1;
}

.wp-custom-header {
	position: absolute;
	overflow: hidden;
	max-width: 100%;
	/** Fixes bug with video background adding gaps on scroll with object-fit cover on chrome. **/
	width: 100%;
	height: calc( 100% + 2px );
	margin-top: -2px;
	z-index: -1;
	.has-video-header &,
	.has-header-image &,
	.has-youtube-header & {
		z-index: 0;
	}
}

.wp-custom-header video {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.header-top .wp-custom-header video {
	width: 100vw;
}
.wp-custom-header img {
	width: 100vw;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

.header {
	position: relative;

	.wp-custom-header {
		top: 0;
		left: 0;
		bottom: 0;
		height: auto;
		max-height: 100vh;
	}
}

/*
 * Unset the user controled padding on mobile for header media. Reason: Media
 * doesnt fill space on mobile beacuse of hameber menus.
 */
@media only screen and (max-width: 767px) {
	.has-video-header,
	.has-header-image,
	.has-youtube-header {
		.site-header header {
			padding: 0;
		}
	}
}

// Header Layouts.
// Header Top Layouts.
.header-top {
	@media (min-width: 768px) {
		.layout {

			/** Header Top layout-1 **/
			&-1 {
				#main-menu, #secondary-menu {
					align-items: flex-start;
					justify-content: flex-start;
				}
			}

			/** Header Top layout-2 **/
			&-2 {
				#navi {
					flex-direction: row;
				}
				#secondary-menu {
					align-content: flex-start;
					justify-content: flex-start;
				}
				.container .site-branding {
					margin-left: -15px;
				}
				.site-branding {
					align-items: flex-start;
					flex-basis: 50%;
				}
				#main-menu {
					align-content: flex-end;
					align-items: flex-end;
					justify-content: flex-end;
				}
			}

			/** Header Top layout-3 **/
			&-3 {
				#navi {
					flex-direction: row-reverse;
				}
				#main-menu {
					align-items: flex-end;
					justify-content: flex-start;
				}
				.site-branding {
					align-items: flex-end;
					flex-basis: 50%;
				}
			}

			/** Header Top layout-4 **/
			&-4 {
				.site-branding {
					align-items: center;
				}
				#main-menu, #secondary-menu {
					align-items: center;
					justify-content: center;
				}
			}

			/** Header Top layout-5 **/
			&-5 {
				#secondary-menu, #main-menu {
					align-items: center;
					justify-content: center;
				}
				#navi {
					flex-direction: column-reverse;
				}
			}

			/** Header Top layout-6 **/
			&-6 {
				#secondary-menu {
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
}
.header-fixed.header-top {
	.sm, .sm ul, .sm li {
		width: 100%;

		@media (min-width: 768px) {
			width: auto;
		}
	}
}

.header-left, .header-right {
	.site-header {
		.sm.sm-clean {
			padding-left: 0;
			padding-right: 0;
			width: 100%;
			height: auto;
		}
		#navi-wrap {
			display: block;
		}
	}
}

// Site Content.
.home.blog {
	&.no-sidebar .site-content {
		display: flex;
		flex-direction: column;
		align-content: center;
		justify-content: flex-start;
	}
	& .main > .row > div {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}
}
.post {
	display: flex;
	flex-wrap: wrap;
	flex: 1 0 auto;
	width: calc((100% / 1 - .5vw) - 2vw);
	margin: 1vw;
}
.page .page,
.single .post {
	width: auto;
	margin: 0;
}
[class^="column-"] .post {
	flex-direction: column;
	flex: 0 0 auto;
}
.column-2 .post {
	width: calc((100% / 2 - .5vw) - 2vw);
}
.column-3 .post {
	width: calc((100% / 3 - .5vw) - 2vw);
}

.page .page,
.single .post {
	margin-top: 0;
	margin-bottom: 0;
}

.site-content.container {
	padding-left: 0;
	padding-right: 0;
	.main {
		padding-left: 15px;
		padding-right: 15px;
	}
}

// Post navigation.
nav.navigation.posts-navigation {
	display: flex;
	width: 100%;
	padding: 0 3.5vw;
}

// Widget Styles.
.bgtfw-widget-row {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	flex: 1 0 100%;
	z-index: 1;

	// Chrome bug - this forces widget areas to repaint when they are inside of fixed positioned areas.
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.header-top:not(.header-fixed) {

	#navi.container {
		flex: 1 0 auto;
		@media only screen and (min-width: 768px) {
			flex: 0 1 auto;
		}
	}
}

// Footer Widget Row Styles.
#footer-widget-area.bgtfw-widget-row {
	&.container {
		margin-left: auto;
		margin-right: auto;
	}
}

// Mobile First.
.bgtfw-widget-row > .sidebar {
	flex: 1 0 100%;
}

// Small Devices, Tablets.
@media only screen and (min-width: 768px) {
	.bgtfw-widget-row > .sidebar {
		flex: 1 0 50%;
	}
}

// Medium Devices, Desktops.
@media only screen and (min-width: 992px) {
	.bgtfw-widget-row > .sidebar {
		flex: 1 0 0;
	}
}

// .header-left and .header-right style for sidebar area in header.
.header-left,
.header-right {
	#header-widget-area {
		flex: 0;
		flex-direction: column;
		flex-wrap: nowrap;
		> .sidebar {
			margin-left: 0;
			margin-right: 0;
		}
		&.bgtfw-widget-row:first-child:after,
		&.bgtfw-widget-row:last-child:after {
			padding-bottom: 0;
		}
	}
}

// No JS sticky header to preserve style.
.no-js.flexbox .header-fixed .bgtfw-layout {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	overflow-y: scroll;
	max-height: 100%;
}
.no-js.flexbox .header-fixed #boldgrid-sticky-wrap {
	display: flex;
	flex-direction: column;
	flex: 1 0 100%;
}
.no-js.flexbox body.sticky-footer-enabled.header-fixed {
	overflow: hidden;
	display: flex;
	min-height: 100%;
	flex-direction: column;
}