/**
 *
 * Mixins
 *
 */

@mixin calc($property, $expression) {
	#{$property}: -moz-calc(#{$expression});
	#{$property}: -webkit-calc(#{$expression});
	#{$property}: calc(#{$expression});
}

@mixin placeholder {
  &::-webkit-input-placeholder {@content}
  &:-moz-placeholder           {@content}
  &::-moz-placeholder          {@content}
  &:-ms-input-placeholder      {@content}  
}

/**
 *
 * Body
 *
 */
 h1,h2,h3,h4,h5,h6,p {
 	@include breakpoint(medium down) {
 		span { font-size: inherit !important; }
 	}
 }

.vc_parallax .vc_parallax-inner, .row-wrapper { background-position: center center !important; }
.row-parallax { z-index: 0 !important; }
// .row-wrapper > div { @include clearfix; }

// .el-svg-bg { position: absolute !important; width: 100%; height: 20px; top: 0; margin-top: -19px; overflow: hidden; left: 0;
// 	.torn-paper-effect { transform: rotateY(180deg); 
// 		path { fill: #fff; }
// 	}
// 	&.torn-paper-bottom { bottom: 0; margin-bottom: -19px; top: auto; margin-top: 0;
// 		.torn-paper-effect { transform: rotateX(180deg); }
// 	}
// }

body { overflow-x: hidden; 
	a, button { color: inherit;
		&:hover { color: inherit; }
		&:hover, &:focus, &:active, &:visited { outline: none; color: inherit; }
	}
	.content {
		a:not(.btn) { border-bottom-style: solid; border-color: inherit !important; border-bottom-width: 1px; transition: border-color .4s; 
		}
		p { 
			* { font-size: inherit; }
		}
	}
	&.no-scroll { overflow: hidden; }
}

.columns { min-height: 1px; }

/**
 *
 * Headers
 *
 */

h1, h2, h3, h4, h5, h6, p { margin-bottom: 30px; }
.header-underline { display: inline-block; 
	&:after { content: ""; position: absolute; left: 100%; height: 2px; background: $header-color; width: 200%; margin-left: 5px; bottom: 20%; }
	&.reda-light:after { background: $white; }
	&.underline-50:after { width: 50%; }
	&.underline-75:after { width: 75%; }
	&.underline-100:after { width: 100%; }
	&.underline-125:after { width: 125%; }
	&.underline-150:after { width: 150%; }
	&.underline-175:after { width: 175%; }
	&.underline-200:after { width: 200%; }
}	
.reda-header { position: relative; }
.reda-lg-header { position: relative; 
	&.header-underline:after { bottom: 12px; width: 200%; margin-left: 15px; }
}
.reda-lg-header * { font-size: 160px; line-height: 1; }
.reda-header-top, .reda-header-top * { text-transform: uppercase; color: $accent-color; letter-spacing: 5px; font-size: 12px; font-weight: 700; /* font-family: $body-font-family;  */position: relative; line-height: 1; }
.reda-page-header >div { line-height: 1;
	* { color: inherit !important; margin-bottom: 0; }
}
.reda-page-header { overflow: hidden; 
	.header-underline {
		* { display: inherit; }
	}
} 

/**
 *
 * Content
 *
 */

.page-wrapper { overflow: hidden; width: 100%; }
.outline-text { border-bottom: 2px solid $accent-color; }
.lg-content { font-size: 17px; line-height: 2.1em; }

.btn-content { display: inline-block;  
	.button-border { background: $black; }
}
.content-left { margin-left: 0; text-align: left; }
.content-right { margin-right: 0; text-align: right; }
.content-center { margin: 0 auto; text-align: center; }

a .fa { transition: transform .4s; 
	&:hover { transform: scale(1.2); }
}

.element-cta { max-width: 100%; width: 100%; 
	.cta-content, .image-content { vertical-align: middle; }
	.cta-content { padding: 0 30px; }
	img { width: 100%; }
	&.cta-bg-img { position: relative; display: block; 
		.cta-content { position: relative; z-index: 2; display: block; width: 100%; 
			p:empty { display: none; }
		}
		.image-content { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
		.cta-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
	}
}
// .call-to-action {
// 	@include breakpoint(small only) { 
// 		&.cta-sm { margin: 0 !important; padding: 0 !important; }
// 		.image-content { width: 100%; height: 300px; }
// 		.cta-content { padding: 45px !important; }
// 	}
// 	@include breakpoint(medium down) {
// 		.image-content { width: 100%; height: 400px; }
// 	}
// 	@include breakpoint(large){ 
// 		.cta-content .content > * { margin-bottom: 45px; }
// 		.cta-left-img, .cta-right-img { display: table; table-layout: fixed; 
// 			.cta-content, .image-content { display: table-cell; direction: ltr; width: 50%; height: 100%; }
// 		}
// 		.cta-right-img { direction: rtl; }
// 	}
// }


.call-to-action {
	@include breakpoint(small only) { 
		&.cta-sm { margin: 0 !important; padding: 0 !important; }
		.image-content { width: 100%; height: 300px; }
		.cta-content { padding: 45px !important; }
	}
	@include breakpoint(medium down) {
		.image-content { width: 100%; height: 400px; }
	}
	@include breakpoint(large){ 
		.cta-content .content > * { margin-bottom: 45px; }
		.cta-left-img, .cta-right-img { display: flex; align-items: stretch; align-content: stretch;
			.cta-content, .image-content { direction: ltr; width: 50%; }
		}
		.cta-right-img { direction: rtl; }
	}
}

.default-content { margin-bottom: 30px; }
.loading-wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #fff; z-index: 9999; will-change: opacity; }
.loading-progress { position: fixed; top: 0; left: 0; width: 0; height: 2px; background: #333; transition: width 0.7s ease-in; }
.page-intro { overflow: hidden; opacity: 1; transition: opacity .7s, transform .7s cubic-bezier(0.77,0,0.175,1); transform:translateX(-20px); 
	.row, .columns, .intro-content-wrapper { height: inherit; }

	&:before { content: ''; background: $white; position: absolute; left: 0; top: 0; right: 0; bottom: 0; transform: translateX(0) translateY(0) translateZ(0); transition: opacity .7s, transform .7s cubic-bezier(0.77,0,0.175,1);  z-index: 1;}
 
	&.intro-loaded { opacity: 1; transform: translateX(0); 
		&:before {transform: translateY(-100%) translateX(0) translateZ(0); opacity: 1; }
		&:after {transform: translateY(0%); }
	}
}

.intro-content-wrapper { transform: translateY(-50px);  transition: transform 1.5s 0s cubic-bezier(0.77, 0, 0.175, 1), opacity 1.5s 0s  cubic-bezier(0.77, 0, 0.175, 1); opacity: 0; }
.intro-loaded {
	.intro-content-wrapper { opacity: 1; }
}


.link-hover, .wpb_text_column p a:not(.non-outline) { position: relative;  border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: inherit; background: transparent; 
	&:after { content: ""; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; opacity: .5; transition: opacity .4s cubic-bezier(0.16, 0.51, 0.78, 0.64), transform .4s cubic-bezier(0.16, 0.51, 0.78, 0.64); transform-origin: top; }
	&:hover { 
		&:after { opacity: 1; transform: scale3d(1,2,1); transform-origin: top; }
	}
}
.link-hover-text:after { border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: inherit; background: transparent; }

 
.page-padding-top { position: relative; }
.standard-page { padding-bottom: 90px; }

.single-post-nav {
	.arrow-prev, .arrow-next { width: auto; }
	.arrow-prev { text-align: right; }
	.arrow-next { text-align: left; }
}

.lead { font-size: 24px !important; margin-bottom: 45px !important; }

.element-gallery-grid { overflow: hidden; 
	&:last-of-type { margin-bottom: 60px; }  
	@include breakpoint(large) {
		&.two-columns { 
			.image-content { width: 50%; }
		}
		&.three-columns { 
			.image-content { width: 33.3332%; }
		}
		&.four-columns { 
			.image-content { width: 25%; }
		}
		.image-content { float: left; }
	}
	
}

.element-list-table { margin: 0; margin-bottom: 30px; overflow: hidden;
	@include breakpoint(small only) {
		&.el-half-width {
			li { width: 100%; }
		}
		
	}
	@include breakpoint(medium) {
		&.el-half-width {
			li { width: 50%; float: left;
				&:first-of-type(), &:nth-child(2) { border: none; }
			}
		}

	}
	&.el-full-width {
		li { width: 100%; }
	}
	&.el-sm-list {
		li { padding: 5px 30px; font-size: 14px; }
	}
	li { border-top: 1px solid; padding: 20px 30px; position: relative; list-style-type: none; 
		&:first-of-type() { border: none; }
	}
}
ul.element-list-table li:before { content: ""; position: absolute; width: 6px; height: 6px; margin-top: -3px; top: 50%; left: 10px; background: $accent-color; border-radius: 50%; }
ol.element-list-table { counter-reset: counter_level1;
	li:before { content: counter(counter_level1) '.'; counter-increment: counter_level1; position: absolute; left: 10px; background: transparent; }
}

blockquote { border: none; color: $body-font-color; padding: 30px 15px 15px; margin: 0; margin-bottom: 25px; position: relative;
	* { color: inherit !important; font-size: 20px; }
	.quote-icon { position: absolute; left: 0px; top: 5px; opacity: .1; transform: rotate(180deg); }
	p { margin-left: 25px; margin-right: 15px; }
	p:last-of-type { margin-bottom: 0; }
}
.dropcap { font-size: 64px; line-height: 1; font-family: $header-font-family; padding-right: 15px; color: $accent-color; float: left;  }
.el-intro-page { 
	> .row { margin-bottom: 0 !important; }
}


.default-page { 
	> .row { margin-bottom: 60px; }
}

.img-content {
	&.float-left { margin: 8px 30px 15px 0; }
	&.float-right { margin: 8px 0px 15px 30px; }
}
figcaption { margin-top: 5px; font-size: 12px; color: $dark-gray; }

.img-content-lightbox, .gallery-content-lightbox { position: relative; display: block; overflow: hidden;
	&:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateY(30px); opacity: 0; transition: opacity .4s, transform .4s; z-index: 1; background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.8) 80%, black 100%); }
	&:hover:before { opacity: 1; transform: translateY(0); }
}

.grid-table { border: 1px solid #ddd; margin-bottom: 10px !important;
	.columns:nth-child(2) { background: #e1e1e1; }
	.columns { background: #f1f1f1; padding-top: 10px; padding-bottom: 10px; }
}
.fluid-row { background: #e1e1e1; }
.grid-page {
	> .row { margin-bottom: 30px; }
	.grid-padding-top { margin-top: 60px; }
}
.separator { width: 100%; height: 1px; background: $medium-gray; margin: 60px 0; }
.el-block-page .separator { margin-bottom: 0; }

.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal !important; }

pre { background: $light-gray; padding: 15px; }

.wp-caption { max-width: 100%; }
.wp-caption-text { margin-top: 5px; font-size: 12px !important; color: #8a8a8a; margin-bottom: 5px !important; }
img.alignleft { margin: 0; float: left; margin-right: 1.5em; }
img.alignright { margin: 0; float: right; margin-left: 1.5em; }
.alignleft { margin: 0; float: left; margin-right: 1.5em;}
.alignright { margin: 0; float: right; margin-left: 1.5em; }
.aligncenter { clear: both; display: block; margin: 30px auto; }
.alignnone { margin: 30px 0; }

/**
 *
 * Pagination 
 *
 */
.nav-links { width: 100%; text-align: center; 
	a, span { display: inline-block; vertical-align: middle; }
	.arrow-prev, .arrow-next { width: 30px; transform: translateX(0) !important; opacity: .5; transition: opacity .3s; text-align: center; 
		&:hover { opacity: 1; }
		i { line-height: 50px; transform: scale(1); font-size: 18px; opacity: 1; }
	}
	.page-numbers, .page-number { padding: 0 5px; font-size: 17px;
		&:not(.prev, .next, .current) { opacity: .5; transition: opacity .4s; }
		&:hover { opacity: 1 !important; }
	}

}
.page-links { width: 100%; text-align: center; display: flex; justify-content: center; align-items: flex-end;
	a, span { display: inline-block; vertical-align: middle; padding: 0 5px; font-size: 16px; }
	a { opacity: .5; transition: opacity .4s; 
		&:hover { opacity: 1; }
	}

}


/**
 *
 * Buttons
 *
 */
.btn { /* text-transform: uppercase; */ cursor: pointer; text-align: center; display: inline-block; position: relative; vertical-align: middle; line-height: 1; 
	&.btn-full { display: block; width: 100%; }
}
.btn-list { margin: 0 -5px;
	> div { display: inline-block; margin: 0 5px;}
}
.btn-double { display: inline-block; box-shadow: 0px 2px 2px rgba(0,0,0,.2); transition: box-shadow .4s, transform .4s, background .4s, border-color .4s, color .4s;
	&:hover { box-shadow: 1px 8px 30px rgba(0,0,0,.2); transform: translateY(-1px); }
	a:first-of-type() { position: relative;
		&:after { content: ""; position: absolute; width: 1px; right: -0.5px; height: 60%; top: 50%; transform: translateY(-50%); transition: background .4s; }
	}
	a:last-of-type() { position: relative; }
	
}
.btn-single { box-shadow: 0px 2px 2px rgba(0,0,0,.2); transition: box-shadow .4s, transform .4s, background .4s, border-color .4s, color .4s;
	&:hover { box-shadow: 1px 8px 30px rgba(0,0,0,.2); transform: translateY(-1px); }
}
.btn-xs { padding: 10px 15px; font-size: 14px; font-weight: 500; line-height: 1;
	.btn-text:after { width: 15px; }
}
.btn-sm { padding: 10px 20px; }
.btn-md { padding: 15px 30px; font-size: 16px; }
.btn-lg { padding: 15px 30px; font-size: 20px; }

.btn-rounded { border-radius: 40px; }
.btn-solid { border-style: solid; border-width: 1px; }
.btn-border { border-style: solid; border-width: 1px; background: transparent; 
	.btn-text { transition: color .4s; }
}
.btn-light { background: $white; color: $body-font-color; border-color: $white;
	.btn-text { color: $body-font-color; }
	&.btn-double a:first-of-type():after, &.btn-double a:first-of-type():before, &.btn-double a:last-of-type():after, &.btn-single .btn-text:after { background: $body-font-color; }
	&.btn-border { border-color: $white; background: transparent; 
		&.btn-double a:first-of-type():after, &.btn-double a:first-of-type():before, &.btn-double a:last-of-type():after, &.btn-single .btn-text:after { background: $white; }
		.btn-text { color: $white; }
		&:hover { background: $white; 
			&.btn-double a:first-of-type():after, &.btn-double a:first-of-type():before, &.btn-double a:last-of-type():after, &.btn-single .btn-text:after { background: $body-font-color; }
			.btn-text { color: $black; }
		}
	}
	&.btn-solid {
		&:focus { background: darken($white, 2%); }
	}
	&.btn-solid {
		&:hover { background: lighten($white, 2%); }
	}
}
.btn-dark { background: $black; color: $white; border-color: $black;
	.btn-text { color: $white; } 
	&.btn-double a:first-of-type():after, &.btn-double a:first-of-type():before, &.btn-double a:last-of-type():after, &.btn-single .btn-text:after { background: $white; }
	&.btn-border { border-color: $black; background: transparent;
		.btn-text { color: $black; }
		&.btn-double a:first-of-type():after, &.btn-double a:first-of-type():before, &.btn-double a:last-of-type():after, &.btn-single .btn-text:after { background: $black; }
		&:hover { background: $black; 
			&.btn-double a:first-of-type():after, &.btn-double a:first-of-type():before, &.btn-double a:last-of-type():after, &.btn-single .btn-text:after { background: $white; }
			.btn-text { color: $white; }
		}
	}
	&.btn-solid {
		&:focus { background: darken($black, 2%); }
	}
	&.btn-solid {
		&:hover { background: lighten($black, 2%); }
	}
}
.btn-accent { background: $accent-color; color: $white; border-color: $accent-color; 
	.btn-text { color: $white; }
	&.btn-double a:first-of-type():after, &.btn-double a:first-of-type():before, &.btn-double a:last-of-type():after, &.btn-single .btn-text:after { background: $white; }
	&.btn-border { border-color: $accent-color; background: transparent; 
		.btn-text { color: $accent-color; }
		&.btn-double a:first-of-type():after, &.btn-double a:first-of-type():before, &.btn-double a:last-of-type():after, &.btn-single .btn-text:after { background: $accent-color; }
		&:hover { background: $accent-color; 
			.btn-text { color: $white; }
			&.btn-double a:first-of-type():after, &.btn-double a:first-of-type():before, &.btn-double a:last-of-type():after, &.btn-single .btn-text:after { background: $white; }
		}
	} 
	&.btn-solid {
		&:focus { background: darken($accent-color, 2%); }
	}
	&.btn-solid {
		&:hover { background: lighten($accent-color, 2%); }
	}
}

#scroll-up { width: 60px; height: 60px; cursor: pointer; background: $white; text-align: center; box-shadow: 0px 2px 8px rgba(0,0,0,.2);
	i { line-height: 60px; color: $accent-color; font-size: 28px; }
	@include breakpoint(medium down) { margin: 0 auto; }
	@include breakpoint(large) { margin-right: 0; margin-left: auto; right: 30px; border-radius: 50% 0; top: calc(50% - 60px + 60px); }
}

/**
 *
 * Forms
 *
 */

.forms-style { 
	input, select, textarea { box-shadow: none !important; border: none; }
	// &.form-light { background: $light-gray; 
	// 	label { color: $body-font-color; }
	// 	input, select, textarea { color: $header-color; background: $medium-gray; border: $medium-gray; 
	// 		@include placeholder { color: $body-font-color; opacity: .5; }
	// 	}
	// }
	// &.form-accent { background: $accent-color; 
	// 	label { color: $white; }
	// 	input, select, textarea { color: $white; border: darken($accent-color, 7%); background: darken($accent-color, 7%); /* box-shadow: inset 0 1px 2px darken($accent-color, 8%);  */
	// 		@include placeholder { color: $white; opacity: .5; }
	// 		// &:focus { box-shadow: 0 0 5px  darken($accent-color, 7.5%); }
	// 	}
	// 	@keyframes autofill {
	// 	    to {
	// 	    	color: $white;
	// 	        background: darken($accent-color, 7%);
	// 	    }
	// 	}
	// 	.reda-fieldset-checkbox, .reda-fieldset-radio {
	// 		label:before { background: darken($accent-color, 7%); }
	// 		input[type=checkbox], input[type=radio] {
	// 			&:checked + label:after { background: $white; }
	// 		}
	// 	}
	// }
	// &.form-dark { background: $black; 
	// 	label { color: $white; }
	// 	input, select, textarea { color: $white; 
	// 		@include placeholder { color: $white; opacity: .5; }
	// 	}
	// }
	.reda-fieldset, fieldset { position: relative; width: 100%; text-align: left;
		&.message { width: auto; }
	}
	.message-error { 
		> *:not(label) { border: 1px solid #f10a4a !important; }
		label { color: #f10a4a !important; }
	}
	.input-required { position: relative; 
		label:after { content: "*"; color: inherit; font-size: 18px; display: inline-block; vertical-align: middle; margin-left: 5px; transition: color .4s; line-height: 1; }
		label:after { left: 0; }
		&.message-error:after { color: #f10a4a; }
	}
	label { margin-bottom: 3px; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
	input { line-height: 50px; }
	input, select { height: 50px; z-index: 2; padding: 15px; margin-bottom: 8px;
		&:focus { outline: none; }
		&:-webkit-autofill {  -webkit-animation-name: autofill; -webkit-animation-fill-mode: both; }
		@include placeholder { font-style: italic; opacity: .5; }
	}
	input[type="checkbox"], input[type="radio"] { box-shadow: none !important; border: none !important; display: block; height: auto; line-height: 1.8em; float: left; margin-top: 5px; 
		~ label { display: block; float: left; margin-left: 0; }
	}
	input[type="radio"] { margin-top: 0; }
	input[type="number"] { text-align: center; }
	textarea { z-index: 2; padding: 15px; margin-bottom: 8px; min-height: 150px; 
		&:focus { outline: none; }
		&:-webkit-autofill {  -webkit-animation-name: autofill; -webkit-animation-fill-mode: both; }
		@include placeholder { font-style: italic; opacity: .5; }
	}
	.success-message { position: absolute; top: 50%; z-index: 1; left: 60px; padding: 30px; text-align: center; background: $white; opacity: 0; right: 60px; color: $black; transform: translateY(-50%); box-shadow: 0 8px 20px rgba(0,0,0,.2); visibility: hidden; transition: opacity .4s 0s, visibility 0s 0s; 
		h5 { margin-bottom: 0; }
	}
	&.message-sent { 
		form { opacity: .4; }
		.success-message { opacity: 1; visibility: visible; transition: opacity .4s 0s, visibility 0s .4s; }
	}
	.post-password-form { max-width: 70%; margin: 0 auto;
		.btn { margin-top: 0; }
		input { margin-bottom: 0; }
	}
} 

.form-container { margin-bottom: 60px; }
.reda-form { text-align: center; padding: 30px 20px;
	.reda-fieldset { 
		@include breakpoint(medium) { display: flex; 
			> * { margin: 0 10px; }
		}
		> * { width: 100%; }
		
		input, textarea, select { box-shadow: none !important; border: none; }
	}
	form .btn { margin-top: 20px; }
	.btn-contact { 
		@include breakpoint(medium down) { margin-bottom: 60px; }
		&.button-success { background: #2ec556 !important; border: #2ec556; 
			.btn-text { color: #fff !important; }
		}
	}
}
.rtb-booking-form { padding: 30px 20px; 
	.reda-fieldset { flex-flow: row wrap;
		legend { flex: 1 100%; padding: 0; margin-bottom: 10px; margin-top: 20px; text-transform: uppercase; letter-spacing: 3px; color: $accent-color; }
		&:first-of-type() legend { margin-top: 0; }
		> div { flex: 1 1; }
		input, textarea, select { max-width: 100%; }
	}
	.add-message { font-size: 12px; text-transform: uppercase; margin: 0; text-align: left; margin-left: 30px;
		a { position: relative; display: inline-block; 
			&:before { content: ""; position: absolute; left: -20px; width: 10px; height: 1px; background: $medium-gray; top: 50%; }
			&:after { content: ""; position: absolute; left: -15px; width: 1px; height: 10px; background: $medium-gray; top: 50%; margin-top: -5px; }
		}
	}
}

.btn-no-active { position: relative; 
	.btn { opacity: .4; cursor: default !important; }
}

.post-password-form {
	fieldset { margin-bottom: 30px; 
		p { display: none; }
	} 
	p { text-align: right; }
}
// WP GALLERY

.gallery-item { display: inline-block; text-align: left; vertical-align: top; margin: 0 0 5px; padding: 0 10px 0 0; width: 50%; 
	a, a:hover, a:focus { box-shadow: none; background: none; display: inline-block; max-width: 100%; }
	a img { display: block; transition: filter 0.2s ease-in; backface-visibility: hidden; }
	a:hover img, a:focus img { filter: opacity(60%); }
}

.gallery-columns-1 .gallery-item { float: none; width: 100%; max-width: 100%; }
.gallery-columns-2 .gallery-item { float: none; max-width: 50%; }
.gallery-columns-3 .gallery-item { float: none; max-width: 33.3332%; }
.gallery-columns-4 .gallery-item { float: none; max-width: 25%; }
.gallery-columns-5 .gallery-item { float: none; max-width: 20%; }
.gallery-columns-6 .gallery-item { float: none; max-width: 16.6667%; }
.gallery-columns-7 .gallery-item { float: none; max-width: 14.28%; }
.gallery-columns-8 .gallery-item { float: none; max-width: 12.5%; }
.gallery-columns-9 .gallery-item { float: none; max-width: 11.11%; }

.gallery-caption { display: block; text-align: left; padding: 0 10px 0 0; margin-bottom: 0; }




/**
 *
 * Page Intro
 *
 */

.page-intro { position: relative; width: 100%; background-size: cover; background-position: center center; 
	.intro-overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: .5; }
	.intro-content-wrapper { display: table; min-height: 350px; padding: 90px 0; position: relative; z-index: 1; width: 100%; }
	.intro-content { display: table-cell; vertical-align: middle; padding: 0 30px; 
		p:last-of-type { margin-bottom: 0; }
		&.intro-content-left { text-align: left; }
		&.intro-content-right { text-align: right; }
		&.intro-content-center { text-align: center; }
	}
	.intro-header:last-child {
		@include breakpoint(small only) { margin: 0 0 30px; }
		@include breakpoint(medium only) { margin: 0 30px 30px; }
		@include breakpoint(large only) { margin: 0 60px 60px; }
		@include breakpoint(xlarge) { margin: 0 120px 90px; }
	}
	.page-header { padding: 0; }
} 
.page-header-intro { position: relative; }
.classic { /* margin-bottom: 60px; */
	.page-header { margin-bottom: 0; 
		> div { margin-bottom: 30px; 
			* { margin-bottom: 0; }
			&:last-of-type { margin-bottom: 0; }
		}
	}
}
.page-header { padding: 0 0 30px; overflow: hidden; 
	@include breakpoint(small only) { 
		.header { width: 100%; }
		.content { width: 100%; }
	}
	@include breakpoint(medium only) { 
		.header { width: 75%; }
		.content { width: 75%; }
	}
	@include breakpoint(large) { 
		.header { width: 50%; float: left; padding-right: 30px; }
 		.content { width: 50%; float: right; padding-left: 30px; }
	}
	.content p { font-size: 16px; }
	.header h3 { margin-bottom: 30px; letter-spacing: 1px; }
	a { color: inherit; }
}

/**
 *
 * Elements typo
 *
 */
.el-table { display: table; width: 100%; 
	.el-table-cell { display: table-cell; padding: 15px; }
}
.section-dark { background: $body-font-color; padding: 15px; }
.el-intro .el-table .el-table-cell { padding: 15px 0; }

/**
 *
 * 404 error
 *
 */
.error-404 { margin: 60px 0 120px 0;
	h1 { z-index: -1; font-size: 260px; font-family: "Lora"; font-style: italic; color: $light-gray; line-height: 1; text-align: center; margin-bottom: 0; }
	.page-content { margin-top: 15px; }
	fieldset { margin-bottom: 0; }
	@include breakpoint(medium down) { text-align: center; 
		h1 { margin-bottom: 30px; }
		.search-input { margin: 0 auto; width: 70%; }
	}
	@include breakpoint(small only) { 
		h1 { font-size: 150px; }
	}
}
.reda-form.reda-search-form { padding: 0; }
// .reda-search-form.form-light input { background: $light-gray; }
.search-input { position: relative; width: 100%;
	input { margin-bottom: 0; padding-right: 40px; }
	button { position: absolute; right: 0; height: 50px; width: 40px; bottom: 0; text-align: center; cursor: pointer; }
}

/**
 *
 * SVG icons
 *
 */
.arrow-prev { width: 100px; height: 50px; cursor: pointer; text-align: right;
	svg { opacity: .5; transition: opacity .4s cubic-bezier(0.16, 0.51, 0.78, 0.64), transform .4s cubic-bezier(0.16, 0.51, 0.78, 0.64); transform: translate3d(0,0,0); transform-origin: left; width: 50px; height: 50px; 
		&:hover { opacity: 1; transform: translateX(-15px); }
	}
}
.arrow-next { width: 100px; height: 50px; opacity: .5; transition: opacity .4s cubic-bezier(0.16, 0.51, 0.78, 0.64), transform .4s cubic-bezier(0.16, 0.51, 0.78, 0.64); transform: translateX(0); transform-origin: right; 
	svg {  width: 50px; height: 50px; }
	&:hover { opacity: 1; transform: translateX(15px); }
}

.arrow-prev line, .arrow-next line { stroke: $black; }
svg#icon-big-arrow-prev, svg#icon-big-arrow-next { width: 90px; height: 50px; 
	line { stroke-width: 1px; vector-effect: non-scaling-stroke; fill: none; }
}


/**
 *
 * Colors
 *
 */

.page-header-intro li { color: $dark-gray; }
.page-header-intro .link-hover:after, .page-header .link-hover:after { background: $body-font-color; }

.page-intro .intro-overlay { background: $black; }
.page-intro .intro-content, .page-intro .page-header-intro li { color: $white; }
.page-intro .link-hover:after { background: $white; }
.element-list-table li { border-color: $light-gray;
	&:before { background: $accent-color; }
}
.element-cta.cta-content-light { color: $white; }
.content a { border-color: $medium-gray; }


/**
 *
 * VC Elements
 *
 */


.vc_row-flex {
	> .columns {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		> .vc_column-inner {
			-webkit-box-flex: 1;
			-webkit-flex-grow: 1;
			-ms-flex-positive: 1;
			flex-grow: 1;
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
		}
	}
}
@include breakpoint(small only) {
	.row .row-wrapper { margin-top: 0 !important; padding-top: 15% !important; margin-bottom: 0 !important; padding-bottom: 15% !important;
		&.reset-padding { padding-top: 0 !important; padding-bottom: 0 !important; }
		.vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
	}
	.wpb_wrapper .wpb_text_column { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
}
@include breakpoint(medium down) {
	.wpb_wrapper .reda-page-header { margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; }
	.row .reset-padding .call-to-action { margin-left: 0 !important; margin-right: 0 !important; }
	.row .reset-padding .reda-parallax { display: none; }
}
.reda-shares { position: relative;
	span { margin-right: 15px; text-transform: uppercase; color: $accent-color; }
	i { color: $accent-color; }
	.shares-wrapper-inner { cursor: pointer; display: inline-block; }
	.shares-icons { opacity: 0; visibility: hidden; transition: opacity .4s 0s, visibility 0s .4s; transform: translateX(0); display: inline-block; padding-left: 30px; 
		a { margin: 0 5px; padding: 0 5px; color: inherit; }
	}
	&.text-center { 
		.shares-icons { left: 50%; transform: translateX(-50%); right: auto; bottom: -40px; position: absolute; display: block; padding-left: 0; }
	}
	&.text-right { float: right;
		.shares-icons { position: relative; float: left; margin-right: 30px; }
	}
	&.show-icons { 
		.shares-icons { opacity: 1; visibility: visible; transition: opacity .4s 0s, visibility 0s 0s; }
		
	}
}
.reda-carousel-container { position: relative; z-index: 2}
.reda-carousel { margin: 0 -60px;
	.img-wrapper { text-align: center; }
}
.reda-carousel-pagination { text-align: center; position: relative; top: 60px; padding: 60px 0;
	.swiper-pagination-bullet { /* background: $body-font-color; */ opacity: 1; transition: opacity .3s; width: 10px; height: 10px; opacity: .5; 
		&:hover { opacity: 1; }
		&.swiper-pagination-bullet-active { opacity: 1; }
	}
	
}
.reda-carousel-arrows { 
	.prev, .next { width: 30px; height: 50px; position: absolute; top: 50%; margin-top: -25px; text-align: center; z-index: 2; cursor: pointer; 
		&:hover i { opacity: 1; }
	}
	.prev { left: 0; }
	.next { right: 0; }
	i { line-height: 50px; font-size: 30px; transition: opacity .3s; opacity: .5; }
}

.room-img-slider .reda-carousel-arrows i { color: #fff; }

.reda-room-container { display: flex; align-items: stretch; position: relative; flex-flow: row wrap;
	.room-content { width: 50%; padding: 30px; }
	.wpb_content_element { padding: 30px 30px 0; }
	.room-img-slider { width: 50%; 
		.image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	}
	.room-img { width: 50%; position: relative;
		.image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
	}
	.room-amenities { top: 100%; left: 0; width: 100%; transition: max-height .4s; overflow: hidden; max-height: 0; }
	.element-list-table { position: relative; margin-bottom: 0; padding: 30px 60px; }
	.btn-list { padding: 0 30px; 
		> div { margin-bottom: 15px; } 
	}
	
	@include breakpoint(768 down) {
		.room-content { width: 100%; }
		.room-img-slider, .room-img { width: 100%; height: 400px; }
	}
	@include breakpoint(medium down) {
		.wpb_content_element, .btn-list { padding-left: 0 !important; padding-right: 0 !important; }
		.element-list-table { padding: 0 15px; 
			&.el-half-width {
				li { width: 100%; }
			}
		}
	}
	.swiper-wrapper { position: absolute; }
}

.reda-booking-box { padding: 30px; position: relative; border-top: 3px solid; 
	.box > h4 { display: inline-block; margin-left: 75px; }
	.reda-fieldset { margin-bottom: 30px; }
	.room-price-wrapper { position: absolute; padding: 15px; top: -15px; left: -15px; text-align: center; display: inline-block; 
		.price { font-size: 40px; font-family: $header-font-family; line-height: 30px; }
		.price-currency { font-size: 28px; margin-right: 5px; font-family: $body-font-family; }
		.price-text { text-transform: uppercase; font-size: 14px; letter-spacing: 3px; margin-top: 5px; }
	}
	.hasDatepicker { box-shadow: none; }
	.message-error { 
		> *:not(label) { border: 1px solid #f10a4a !important; }
		label { color: #f10a4a !important; }
	}
}
.reda-social-profiles { margin: 0;
	li { list-style-type: none; display: inline-block; margin: 0 8px;
		&:first-of-type() { margin-left: 0; } 
		&:last-of-type() { margin-right: 0; }
	}
}

.vc_row-o-content-top {
	> .vc_vc_column,
	> .vc_vc_column_inner {
		> .vc_column_container {
			> .vc_column-inner {
				-webkit-box-pack: start;
				-webkit-justify-content: flex-start;
				-ms-flex-pack: start;
				justify-content: flex-start;
			}
		}
	}
	&:not(.vc_row-o-equal-height) {
		> .vc_vc_column,
		> .vc_vc_column_inner {
			> .vc_column_container {
				-webkit-box-align: start;
				-webkit-align-items: flex-start;
				-ms-flex-align: start;
				align-items: flex-start;
			}
		}

	}
}
.vc_row-o-content-bottom {
	> .columns {
		> .vc_column-inner {
			-webkit-box-pack: end;
			-webkit-justify-content: flex-end;
			-ms-flex-pack: end;
			justify-content: flex-end;
		}
	}
	&:not(.vc_row-o-equal-height) {
		> .vc_vc_column,
		> .vc_vc_column_inner {
			> .vc_column_container {
				-webkit-box-align: end;
				-webkit-align-items: flex-end;
				-ms-flex-align: end;
				align-items: flex-end;
			}
		}
	}
}
.vc_row-o-content-middle {
	> .columns {
		> .vc_column-inner {
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			-ms-flex-pack: center;
			justify-content: center;
		}
	}
	&:not(.vc_row-o-equal-height) {
		> .vc_vc_column,
		> .vc_vc_column_inner {
			> .vc_column_container {
				-webkit-box-align: center;
				-webkit-align-items: center;
				-ms-flex-align: center;
				align-items: center;
			}
		}
	}
}

.wpb_single_image { position: relative; 
	.vc_figure { position: relative; 
		.vc_figure-caption { position: absolute; color: $white; top: 50%; left: 30px; right: 30px; z-index: 2; font-family: inherit; transform: translateY(-50%); opacity: 0; transition: opacity .4s; }
		&:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; z-index: 2; transition: opacity .4s; pointer-events: none; }
		.caption-triangle { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" zoomAndPan="disable"><path fill="#c32d3b"  d="M 0 100 L 100 100 100 100 L 100 0 100 0 C 80 30, 30 80, 0 100 Z"></path></svg>'); width: 100px; height: 100px; overflow: hidden; position: absolute; bottom: -5px; right: -5px; z-index: 3; cursor: pointer;
			&:before { content: "\f067"; font-family: "FontAwesome"; position: absolute; bottom: 15px; right: 15px; width: 30px; height: 30px; line-height: 30px; text-align: center; color: $white; opacity: 1; transition: opacity .4s; }
			&:after { content: "\f068"; font-family: "FontAwesome"; position: absolute; bottom: 15px; right: 15px; width: 30px; height: 30px; line-height: 30px; text-align: center; color: $white; opacity: 0; transition: opacity .4s; }
		}
		&.active-caption {
			&:before { opacity: .7; }
			.vc_figure-caption { opacity: 1; }
			.caption-triangle:before { opacity: 0; }
			.caption-triangle:after { opacity: 1; }
		}
	}
}

.el-shadow .img-wrapper { box-shadow: 0 10px 20px rgba(0,0,0,.2) !important; }
.wpb_gmaps_widget .wpb_wrapper { background: transparent; padding: 0 !important; }
.gray-map { filter: grayscale(100%); }

/**
 *
 * Colors 
 *
 */
.border-accent-color { border-color: $accent-color; }
.pseudo-accent-color:after, .bg-accent-color { background: $accent-color; }
.accent-color { color: $accent-color; }
.bg-accent-color { background-color: $accent-color; }
.header-color { color: $header-color; }
.bg-header-color { background: $header-color; }
.border-header-color { border-color: $header-color; }
.page-bg-color { background: $white; }
.darken-bg-color { background: darken($white, 4%); }
.darken2-bg-color { background: darken($white, 13.5%); }


.reda-parallax { position: absolute !important; height: 100%; top:0; left: 0; right: 0; background-size: cover; background-position: center center; }
.widget-reservation-form .forms-style input, .widget-reservation-form .forms-style select, .widget-reservation-form .forms-style textarea { line-height: 1.5; }
.forms-style input { line-height: 1em !important; }