/**
 * 1. UIkit additions
 * 2. Reusable
 * 3. Fotoheader block
 * 4. Content Slider block
 * 5. Fotogrid block
 * 6. Prijstabel block
 * 7. Call to action block
 * 8. Archief / archive block
 * 9. Kolom block
 * 10. Bootstrap 4 helpers
 * 11. Fadein animation feature
 */

/* 1. UIkit additions */
/* 1.1 .uk-block-small */

.uk-block.uk-block-small {
    padding-top: 15px;
    padding-bottom: 15px;
}
@media ( min-width: 768px ) {
	.uk-block.uk-block-small {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
@media ( min-width: 1220px ) {
	.uk-block.uk-block-small {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

/* 1.2 .uk-block-none */

.uk-block.uk-block-none {
    padding-top: 0;
    padding-bottom: 0;
}
@media ( min-width: 768px ) {
	.uk-block.uk-block-none {
        padding-top: 0;
        padding-bottom: 0;
    }
}
@media ( min-width: 1220px ) {
	.uk-block.uk-block-none {
        padding-top: 0;
        padding-bottom: 0;
    }
}
.uk-text-normal {
	font-weight: normal !important;
}
.uk-overflow-visible {
	overflow: visible !important;
}

/* 2. Resets */

.owcb-block {

	/* Clean up margin collapsing caused by inner .row elements */
	display: inline-block;
	width: 100%;
	vertical-align: top;
	/*overflow-x: hidden; /* In case absolute children are wider than the window. Conflicts with overflow-y which should be visible for .row's negative margins. Please just make sure there is never a horizontal overflow and manage exceptions in the specific blocks. */

	background-position: center; /* For block background image */
	background-size: cover; /* For block background image */
	position: relative;

}

/* When 2 consecutive blocks have the same background color, remove the 2nd block's top padding to avoid an visibly huge padding. */
/* Only applicable when both blocks have no background image, otherwise the sibling block content would touch the image. */

.owcb-block.owcb-has-no-bg-image.bg-white     + .owcb-block.owcb-has-no-bg-image.bg-white,
.owcb-block.owcb-has-no-bg-image.bg-primary   + .owcb-block.owcb-has-no-bg-image.bg-primary,
.owcb-block.owcb-has-no-bg-image.bg-secondary + .owcb-block.owcb-has-no-bg-image.bg-secondary,
.owcb-block.owcb-has-no-bg-image.bg-light     + .owcb-block.owcb-has-no-bg-image.bg-light,
.owcb-block.owcb-has-no-bg-image.bg-dark      + .owcb-block.owcb-has-no-bg-image.bg-dark {
	padding-top: 0 !important;
}

#main-content .container .owcb-block > .container {
	padding: 0; /* Remove horizontal padding in contentblocks within the content column */
}

/* 2. Reusable */

div[class^="owcb-overlay"] {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.owcb-overlay--dark {
	background: rgba( 0, 0, 0, 0.5 );
}
.owcb-overlay--light {
	background: rgba( 255, 255, 255, 0.5 );
}
.owcb-overlay--half-dark {
	background: rgba( 0, 0, 0, 0.25 );
}
.owcb-overlay--half-light {
	background: rgba( 255, 255, 255, 0.25 );
}

.owcb-cover-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

/* 3. Fotoheader block */
/* //todo responsive */

.owcb-fotoheader--height-small {
	min-height: 300px;
}

.owcb-fotoheader--height-medium {
	min-height: 450px;
}

.owcb-fotoheader--height-large {
	min-height: 600px;
}

.owcb-fotoheader--height-fullscreen {
	height: 100vh; /* To make uikit vertical-aligning work it needs a height */
	max-height: 2300px;
}

@media ( max-width: 767px ) {
	.owcb-fotoheader--height-small {
		min-height: 100px;
	}
	.owcb-fotoheader--height-medium {
		min-height: 200px;
	}
	.owcb-fotoheader--height-large {
		min-height: 300px;
	}
}

/* 4. Content Slider block */

.owcb-slider {
	overflow: hidden; /* For when the slides are wider than the screen */
}
.owcb-slider-wrapper {
	position: relative; /* Voor slider navigation positioning */
}

/*.owcb-contentslider {}*/
/*.owcb-contentslider-container {}*/

/*!* 4.1 Slides *!*/

/*.owcb-contentslider-slide {*/
	/*transition: opacity 0.3s;*/
/*}*/

/*.owcb-contentslider-slide-inner {*/
	/*position: relative; !* For overlay positioning *!*/
	/*padding: 50px 90px;*/
/*}*/

/*!* 4.2 Widths *!*/

/*.owcb-contentslider--w100p {}*/

/*!* 4.3 Heights *!*/

/*.owcb-contentslider-container,*/
/*.owcb-contentslider-slide-inner {*/
	/*box-sizing: border-box;*/
/*}*/
/*.owcb-contentslider--h400px .owcb-contentslider-container,*/
/*.owcb-contentslider--h400px .owcb-contentslider-slide-inner {*/
	/*height: 400px;*/
/*}*/
/*.owcb-contentslider--h450px .owcb-contentslider-container,*/
/*.owcb-contentslider--h450px .owcb-contentslider-slide-inner {*/
	/*height: 450px;*/
/*}*/
/*@media ( max-width: 767px ) {*/
	/*.owcb-contentslider--h400px .owcb-contentslider-container,*/
	/*.owcb-contentslider--h400px .owcb-contentslider-slide-inner {*/
		/*height: 300px;*/
	/*}*/
	/*.owcb-contentslider--h450px .owcb-contentslider-container,*/
	/*.owcb-contentslider--h450px .owcb-contentslider-slide-inner {*/
		/*height: 325px;*/
	/*}*/
/*}*/

/*!* 4.4 Slide content *!*/


/*.owcb-contentslider-slide-content {*/
	/*width: 100%; !* Because uikit vertical align middle can make it an inline-block *!*/
/*}*/
/*.owcb-contentslider-slide-title {*/
	/*margin-top: 0 !important;*/
/*}*/
/*.owcb-contentslider-slide-title:last-child {*/
	/*margin-bottom: 0 !important;*/
/*}*/
/*.owcb-contentslider-slide-text {}*/
/*.owcb-contentslider-slide-text p:last-child {*/
	/*margin-bottom: 0;*/
/*}*/

/*!* 4.5 Navigation arrows *!*/

/*.owcb-contentslider-arrow {*/
	/*display: block !important;*/
	/*transition: color 0.3s;*/
/*}*/
/*.owcb-contentslider-arrow--left {}*/
/*.owcb-contentslider-arrow--right {}*/

/*!* 4.6 Smooth transition (was 200ms linear) *!*/

/*.uk-slider:not( .uk-drag ) {*/
	/*-webkit-transition: -webkit-transform 0.5s;*/
	/*transition: transform 0.5s;*/
/*}*/

/* 5. Fotogrid block */

/*
.owcb-fotogrid {}
.owcb-fotogrid-item {}
.owcb-fotogrid-item-inner {
	width: 100%;
	position: relative;
	overflow: hidden;
	background-position: center;
	background-size: cover;
}
.owcb-fotogrid-item-content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.owcb-fotogrid-item-inner--height-auto .owcb-fotogrid-item-content {
	position: static;
}
.owcb-fotogrid-overlay {
	transition: opacity 0.25s;
}
.owcb-fotogrid-overlay--initial {
	opacity: 1;
	z-index: 0;
}
.owcb-fotogrid-overlay--hover {
	opacity: 0;
	z-index: 1;
}
.owcb-fotogrid-item--has-hover:hover .owcb-fotogrid-overlay--initial {
	opacity: 0;
}
.owcb-fotogrid-item--has-hover:hover .owcb-fotogrid-overlay--hover {
	opacity: 1;
}
*/

.owcb-fotogrid figure figcaption {
	right: 0;
	bottom: 0;
	left: 0;
}

.owcb-fotogrid figure figcaption p {
	margin: 0;
}

.owcb-fotogrid figure figcaption .hover-overlay,
.owcb-fotogrid figure figcaption .initial-overlay {
	bottom: 0;
}

.owcb-fotogrid figure figcaption .hover-overlay,
.owcb-fotogrid figure:hover figcaption .initial-overlay {
	opacity: 0;
	transition: opacity .1s ease;
}

.owcb-fotogrid figure:hover figcaption .hover-overlay,
.owcb-fotogrid figure figcaption .initial-overlay {
	opacity: 1;
	transition: opacity .1s ease;
}

.owcb-fotogrid figure,
.owcb-fotogrid figure img {
	object-fit: cover;
}

/* 6. Prijstabel block (meer generieke 'functionele' css)  */

/* DEV NOTE: class .py-3 wijzigen in .py-5 (dan deze overwrite niet meer nodig */
.owcb-prijstabel.py-3 {
	padding-bottom: 3rem !important;
}

.owcb-prijstabel-kriegel {
    position: absolute;
    z-index: 1;
    right: 0;
    left: 0;
	top: -40px;
}

.owcb-prijstabel-kriegel p {
    position: absolute;
    left: 50px;
    top: -20px;
    margin: 0;
    white-space: nowrap;
}

.owcb-prijstabel-kriegel img {
	width: 40px;
    padding-left: 20px;
}

.owcb-prijstabel-col-title {
	padding: 18px 10px 19px 10px;
	text-align: center;
    -webkit-font-smoothing: antialiased;
}

.owcb-prijstabel-col-price {
	padding: 15px 20px 10px 20px;
	text-align: center;
}

.owcb-prijstabel-col-price .price,
.owcb-prijstabel-col-price .duration {
	margin-bottom: 0;
	line-height: 1.2em;
}

.owcb-prijstabel-triangle-down {
    box-sizing: border-box;
    width: 100%;
    height: 0;
    padding-top: 15%;
    padding-left: 50%;
    overflow: hidden;
}

.owcb-prijstabel-triangle-down:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
}

.owcb-prijstabel-col-content {
	padding: 0 27px 20px 27px;
}

.owcb-prijstabel-col-features {
    margin: 20px 0 25px;
}

/* DEV NOTE: .owc-block ul te specifiek */
.owcb-block ul.owcb-prijstabel-col-features {
	margin-top: 1rem;
}

.owcb-block ul.owcb-prijstabel-col-features li {
	padding-left: 25px;
}

.owcb-block ul.owcb-prijstabel-col-features li:before {
	content: '\f00c';
}

.owcb-block ul.owcb-prijstabel-col-features li+li {
	margin-top: 5px;
}

.owcb-prijstabel-col-submit-button {
	display: block;
	width: 100%;
	margin-bottom: 7px;
	padding: 5px;
	text-align: center;
}

.owcb-prijstabel-col-submit-button:hover,
.owcb-prijstabel-col-submit-button:focus {
	text-decoration: none;
}

.owcb-prijstabel-col-link {
	position: relative;
	display: block;
	width: 100%;
	padding: 9px;
	text-align: center;
}

.owcb-prijstabel-col-link:hover,
.owcb-prijstabel-col-link:focus {
	text-decoration: none;
}

.owcb-prijstabel-col-link:after {
    content: '\f105';
    font-family: FontAwesome;
    display: inline-block;
    position: relative;
    top: 3px;
    left: 5px;
}

/* 7. Call to action block */

.owcb-calltoaction {}
.owcb-calltoaction--buttonright {}
.owcb-calltoaction--buttonbelow {}
.owcb-calltoaction-col {}
.owcb-calltoaction .owcb-buttons {
	text-align: center;
}
.owcb-calltoaction--buttonright .owcb-buttons {
	text-align: right;
}
@media ( max-width: 767px ) {
	.owcb-calltoaction .owcb-calltoaction-col {
		text-align: center;
	}
}

/* 8. Archief / archive block */

/* .owcb-archive-block {} */
.owcb-archive-item + .owcb-archive-item {
	margin-top: 30px; /* Match default bootstrap grid gutter */
}
.owcb-archive-item-thumbnail {
	background-size: cover;
	background-position: center;
}
.owcb-archive-item-buttons {
	position: relative; /* For z-index */
	z-index: 3; /* Above cover-link */
}

/* 9. Kolom block */

.owcb-column-text > :first-child {
	margin-top: 0;
}
.owcb-column-text > :last-child {
	margin-bottom: 0;
}

/* 10. Bootstrap 4 Helpers */

.bg-cover {
	background-size: cover;
	background-position: center center;
}

/* 11. Fadein animation feature */
/* Note it is targetting > * to exclude block backgrounds which don't look nice to fade in/out when multiple blocks are connected for example */

.owcb-feature-fadein > * {
	transition: opacity 1s;
}
.owcb-feature-fadein.-is-fadeout > * {
	opacity: 0;
}