/*	
	Theme Name: Ibiza Concierge Element
	Theme URI: http://osplus.nl/	
	Author: Maurits-Jan Seriese
	Author URI: http://osplus.nl/	
	Description: Template for Ibiza Concierg Eelement
	Version: 1
*/

*,
*:before,
*:after {
	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:			border-box;
	outline:			0;
	-moz-appearance:		none;
	-webkit-appearance:		none;
}

html
{
	-webkit-font-smoothing:		antialiased;
	-webkit-text-size-adjust:	100%;
	-webkit-tap-highlight-color:	transparent;
	scroll-behavior:		smooth;
}

html,
body
{
	font:				normal 1rem/1.5rem 'Quicksand', Verdana, Arial, Helvetica, sans-serif;
	width:				100%;
	color:				#002e34;
	background:			#fff;
	padding:			0;
	margin:				0;
}

a {
	color:				#231f20;
	text-decoration:		none;
}

h1 {
	font-size:			1.5rem;
	line-height:			1.5rem;
	margin:				1rem 0 1.5rem;
	width:				100%;
	color:				#002e34;
}

h2 {
	font-size:			1.375rem;
	line-height:			2rem;
	margin:				0;
	color:				#002e34;
}

h2.page_title > span {
	color:				#222;
}


/*******************************************************************************************************
********************************************************************************************************


NAVIGATION


********************************************************************************************************
*******************************************************************************************************/


#menu_toggle {
	position:			fixed;
	left:				2rem;
	top:				85px;
	width:				3rem;
	height:				3rem;
	cursor:				pointer;
	z-index:			15;
	transition:			top .5s ease-in;
}

#menu_toggle > div {
	position:			relative;
	width:				3rem;
	height:				3rem;
}

#menu_toggle > div > span {
	display:			inline-block;
	position:			absolute;
	width:				2rem;
	height:				3px;
	background-color:		#000037;
	border-radius:			2px;
	transition:			transform .25s ease-in;
}

#menu_toggle > div > span.menu_dot_up {
	top:				0;
	left:				0;
}

#menu_toggle > div > span.menu_dot_middle {
	top:				.5rem;
	left:				0;
	width:				1.5rem;
	background-color:		#790d2c;
}

#menu_toggle > div > span.menu_dot_down {
	top:				1rem;
	left:				0;
	width:				1rem;
	background-color:		#324ea1;
}

nav {
	display:		flex;
	flex-direction:		column;
 	position:		fixed;
	top:			0;
	left:			0;
	width:			100%;
	height:			100%;
	background:		#4094d0;
	visibility:		hidden;
	opacity:		0;
	transition:		all .15s ease-in-out;
	transform:		scale(.9);
	z-index:		14;
}

#menu_toggle.on + nav {
	opacity:		1;
	visibility:		visible;
	overflow-y:		auto;
	transform:		scale(1.0);
}

#menu_toggle.on > div > span {
	background-color:	#fff !important;
}

#menu_toggle.on .menu_dot_up {
	top:			.5rem;
	transform:		rotate(45deg);
}

#menu_toggle.on .menu_dot_middle {
	display:		none;
}

#menu_toggle.on .menu_dot_down {
	top:			.5rem;
	width:			2rem;
	transform:		rotate(-45deg);
}

#menu_toggle.on,
#menu_toggle.page_scrolled {
	top:			2.25rem;
}

#menu_toggle.page_scrolled > div > span {
	//background-color:		#333;
}

nav ul,
nav li,
nav li > a {
	margin:			0;
	padding:		0;
	list-style:		none;
}

nav > ul {
	margin:			0;
	flex:			1;
}

nav > ul > li {
	position:		relative;
}

nav > ul > li:last-child:after {
	height:			0;
}

nav > ul > li:last-child {
	border:			0;
}

.menu {
	flex:			1;
	display:		flex;
	flex-direction:		column;
	justify-content:	center;
}

.menu > ul > li {
	font-size:		1rem;
	line-height:		1rem;
	text-transform:		uppercase;
}

.menu-item-has-children:before {
	position:		absolute;
	content:		">";
	top:			0;
	right:			1.75rem;
	width:			1.75rem;
	height:			1.75rem;
	line-height:		1.6rem;
	color:			#000037;
	text-align:		center;
	border-radius:		.25rem;
	border:			1px solid #000037;
	z-index:		3;
	transition:		background .2s ease-in-out,
				transform .2s ease-in-out;
	cursor:			pointer;
}

.current-menu-item.menu-item-has-children:before {
	color:			#150958;
	background:		#fff;
}

.menu-item-has-children.on:before {
	color:			#150958;
	background:		#fff;
	transform:		rotate(90deg);
}

.children,
.sub-menu {
	position:		relative;
	display:		none;
	margin:			0 0 0 1.25rem;
}

.current-menu-ancestor .sub-menu,
.current-menu-parent .sub-menu,
.on .sub-menu,
.on .children {
	display:		block;
}

.sub-menu *:before {
	display:		none;
}

nav > ul > li > a,
.sub-menu > li > a,
.children > li > a
{
	position:		relative;
	display:		block;
	padding:		.375rem 2.5rem .375rem 2.5rem;
	color:			#000037;
	font-size:		1.25rem;
	line-height:		1.25rem;
	letter-spacing:		.125rem;
	font-weight:		800;
	opacity:		1;
	text-decoration:	none;
	outline:		0;
	transition:		all .3s ease-in-out;
}

.current_page_item > a,
nav > ul > li.current_page_item > a,
.current-submenu-item > a,
nav > ul > li > a:hover,
nav > ul > li > a:focus,
nav > ul > li > a:active,
.sub-menu > li > a:hover,
.sub-menu > li > a:focus,
.sub-menu > li > a:active,
.children > li > a:hover,
.children > li > a:focus,
.children > li > a:active
{
	text-shadow:		none;
}

.current_page_item > a {
	color:			#093349;
}

#menu-hider {
	display:		none;
	position:		fixed;
	top:			0;
	left:			0;
	width:			100%;
	height:			100%;
	z-index:		13;
}

#menu-hider.on {
	display:		block;	
}

.m_hide {
	display:		none;
}

#language {
	position:		absolute;
	top:			1.5rem;
	right:			1.5rem;
	z-index:		13;
}

#language > ul {
	display:		flex;
	align-items:		center;
	margin:			0;
	padding:		0;
	font-size:		.875rem;
	line-height:		.875rem;
	list-style:		none;
}

#language > ul > li.lang-item {
	padding:		0 .25rem 0 0;
    	margin:			0 .25rem 0 0;
	border-style:		solid;
	border-width:		0 1px 0 0;
	border-color:		#002e34;
	overflow:		hidden;
}

#language > ul > li.lang-item:last-child {
	margin:			0;
	padding:		0;
	border:			0;
}

#language > ul > li > a {
	display:		inline-block;
	overflow:		hidden;
	color:			#002e34;
	text-transform:		uppercase;
}

#language > ul > li.current-lang > a {
	font-weight:		bold;
}

/*******************************************************************************************************
********************************************************************************************************


END NAVIGATION


********************************************************************************************************
*******************************************************************************************************/

header {
	position:		relative;
	width:			100%;
}

#background_parallax {
	position:		fixed;
	display:		flex;
	align-items:		center;
	justify-content:	center;
	height:			100vh;
	width:			100vw;
	z-index:		2;
	opacity:		0;
	transition:		opacity .75s .5s ease-out;
}

#background_parallax.ready {
	opacity:		1;
}

#background_parallax > img {
	height:			100%;
	width:			auto;
}

#site_container {
	position:		absolute;
	width:			100%;
	z-index:		9;
}

#logo_container {
	position:		absolute;
	top:			0;
	left:			0;
	display:		flex;
	align-items:		center;
	justify-content:	center;
	width:			100%;
	height:			140px;
	background-color:	#fff;
	z-index:		12;
}

#logo {
	margin-top:		.5rem;
}

#logo > svg,
#logo > img {
	height:			90px;
}

#explore,
.splash_page_explore {
	position:		absolute;
	top:			144px;
	left:			0;
	width:			100%;
	text-align:		center;
	text-transform:		uppercase;
	cursor:			pointer;
	z-index:		11;
	
}

.splash_page_explore > div {
	display:		flex;
	align-items:		center;
	justify-content:	center;
	width:			92%;
	background-color:	rgba(255, 255, 255, .7);
	color:			#000038;
	font-size:		.875rem;
	line-height:		1rem;
	min-height:		2.75rem;
	font-weight:		800;
	border-radius:		1.5rem;
}

#slider_text {
	display:		flex;
	align-items:		center;
	justify-content:	center;
	position:		absolute;
	left:			10%;
	top:			0;
	width:			80%;
	height:			100%;
	z-index:		11;
}

#slider_text > div {
	font-weight:		300;
	font-size:		1.5rem;
	line-height:		1.5rem;
	letter-spacing:		.125rem;
	color:			#fff;
	text-shadow:		0 0 3px #000;
	text-transform:		uppercase;
}

#next_page {
	display:		flex;
	align-items:		center;
	justify-content:	center;
	position:		absolute;
	left:			0;
	bottom:			2rem;
	width:			100%;
	height:			2rem;
	font-size:		2rem;
	line-height:		2rem;
	color:			#fff;
	text-shadow:		0 0 3px #000;
	z-index:		11;
	animation:		hithere 1.5s .5s ease;
	animation-iteration-count: 1;
}

@keyframes hithere {
	30% { transform: scale(1.4); }
	40%, 60% { transform: rotate(-20deg) scale(1.4); }
	50% { transform: rotate(20deg) scale(1.4); }
	70% { transform: rotate(0deg) scale(1.4); }
	100% { transform: scale(1); }
}


#next_page > div {
	width:			2rem;
	height:			2rem;
	background-color:	transparent;
	border-radius:		50%;
	transform:		rotate(90deg);
	cursor:			pointer;
}

#next_page > div > svg {
	width:			1.5rem;
	height:			1.5rem;
	margin:			.5rem 0 0 .5rem;
	fill:			#fff;
}

#social-media {
	display:		none;
	position:		absolute;
	right:			.5rem;
	bottom:			1rem;
	z-index:		12;
}

body.home #social-media {
	display:		inline-block;
}

#social-links > a,
#social-media > a {
	display:		flex;
	align-items:		center;
	font-size:		.875rem;
	padding:		.25rem 1rem;
}

#social-links > a:last-child,
#social-media > a:last-child {
	margin:			0 0 1.5rem;
}

#social-links > a > svg,
#social-media > a > svg {
	fill:			#fff;
	width:			1.75rem;
	height:			1.75rem;
	margin:			0 .25rem 0 0;
}

.social_instagram,
.social_facebook,
.social_whatsapp {
	display:		flex;
	align-items:		center;
}

.social_instagram > svg,
.social_facebook > svg,
.social_whatsapp > svg {
	width:			1.5rem;
	height:			1.5rem;
	margin:			0 .5rem 0 0;
	fill:			#fff;
}

#bottom_email {
	position:		absolute;
	bottom:			0;
	height:			2rem;
	line-height:		2rem;
	font-weight:		600;
	width:			100%;
	color:			#093349;
	background-color:	#a1905f;
	text-align:		center;
	z-index:		10;
}


/*******************************************************************************************************
********************************************************************************************************


CONTENT


********************************************************************************************************
*******************************************************************************************************/

.home_content {
	position:		relative;
	height:			100vh;
	background-color:	#fff;
}

.mobile_slider_container,
.desktop_slider_container {
	position:		relative;
	width:			100%;
	height:			100%;
}

.slider_previous,
.slider_next {
	display:		flex;
	align-items:		center;
	position:		absolute;
	top:			0;
	left:			1rem;
	width:			2rem;
	height:			100vh;
	font-size:		2rem;
	line-height:		2rem;
	color:			#fff;
	text-shadow:		0 0 3px #000;
	z-index:		10;
	opacity:		0;
	transition:		opacity .75s .75s ease-out;
	cursor:			pointer;
}

.slider_previous.active,
.slider_next.active {
	opacity:		.95;
}

.slider_previous {

}

.slider_next {
	left:			unset;
	right:			0;
}

.slider_buttons > div,
.slider_buttons > div > svg {
	width:			2rem;
	height:			2rem;
}

#gallery_slider_buttons {
	display:		none;
}

.slider_previous {
	flex:			1;
}

.slider_buttons > div > svg {
	fill:			#fff;
}

.slider_previous > svg {
	transform:		rotate(90deg);
}

.slider_next > svg {
	transform:		rotate(-90deg);
}

.desktop_slider_container {
	display:		none;
}

.mobile_slider_container > div,
.desktop_slider_container > div {
	opacity:		0;
	transition:		opacity .75s ease-in-out;
}

.mobile_slider_container > div.selected_container,
.desktop_slider_container > div.selected_container,
.mobile_slider_container > div.previous_selected_container,
.desktop_slider_container > div.previous_selected_container {
	opacity:		1;
}

.mobile_slider_container > div > span,
.desktop_slider_container > div > span {
	position:		absolute;
	top:			calc(50% - 1.25rem);
	left:			15%;
	width:			70%;
	height:			2.5rem;
	font-size:		1.125rem;
	line-height:		1.25rem;
	font-weight:		800;
	color:			#000;
	background-color:	rgba(255, 255, 255, .75);
	z-index:		3;
	text-align:		center;
	opacity:		0;
	transition:		opacity 1s ease-in-out;
	border-radius:		1rem;
	cursor:			pointer;
}

.mobile_slider_container > div.selected_container > span,
.desktop_slider_container > div.selected_container > span {
	opacity:		1;
}

.mobile_slider_container > div > span > span,
.desktop_slider_container > div > span > span {
	color:			#05aeef;
}

.mobile_slider_container > div > img,
.desktop_slider_container > div > img {
	position:		absolute;
	width:			100%;
	height:			100%;
	object-fit:		cover;
	opacity:		0;
	z-index:		1;
	transition:		opacity .3s ease-in-out;
}

.mobile_slider_container > div > img.selected_slider,
.desktop_slider_container > div > img.selected_slider {
	opacity:		1;
	z-index:		3;
}

.all_pages {
	position:		absolute;
	top:			2rem;
	left:			0;
	width:			100%;
	font-weight:		bold;
}

.all_pages > .scroll_to_page {
	font-size:		1.5rem;
	line-height:		2.25rem;
	color:			#fff;
	text-align:		center;
	text-transform:		uppercase;
	text-shadow:		0 0 3px black;
}

.scroll_to_page {
	cursor:			pointer;
}

#main_content {
	position:		relative;
}

body:not(.home) #main_content {

}

#main_content > .page {
	position:		relative;
	margin-top:		50vh;
	font-size:		1rem;
	line-height:		1.75rem;
	background-color:	rgba(255, 255, 255, .97);
}

#main_content > .page:first-child {
	margin-top:		0;
}

.splash_page_container {
	display:		flex;
	flex-flow:		wrap;
	height:			100vh;
}

.splash_page_item {
	display:		flex;
	justify-content:	center;
	position:		relative;
	width:			50%;
	height:			50%;
	overflow:		hidden;
}

.splash_page_explore {
	display:		flex;
	align-items:		center;
	justify-content:	center;
	width:			100%;
	height:			100%;
	font-size:		.875rem;
	line-height:		1.25rem;
	left:			0;
	top:			0;
}

.splash_page_item > img {
	width:			100%;
	height:			100%;
	object-fit:		cover;
}

.page_main_image {
	position:		relative;
}

.page > .page_main_image > img {
	position:		absolute;
	top:			0;
	left:			0;
	display:		block;
	width:			100%;
	height:			auto;
}

.page > .page_main_image > img.page_image_parallax {
	opacity:		0;
	transition:		top 2s,
				opacity 2s;
}

.page > .page_main_image > img.page_image_parallax.slide_in {
	top:			1100px;
}

.page > .page_main_image > img.page_image_parallax.on {
	opacity:		1;
}

.page > .page_content {
	position:		relative;
	min-height:		100vh;
	padding:		5rem 2rem 3rem 2rem;
	overflow:		hidden;
}

.page > .page_content > .page_arrow,
.page > .page_content > .page_arrow_reverse {
	position:		absolute;
	left:			0;
	bottom:			1rem;
	display:		flex;
	justify-content:	center;
	width:			100%;
	height:			2rem;
	cursor:			pointer;
}

.page > .page_content > .page_arrow > svg,
.page > .page_content > .page_arrow_reverse > svg {
	width:			1.25rem;
	fill:			#002e34;
}

.page > .page_content > .page_arrow_reverse > svg {
	transform:		rotate(180deg);
}

.page > .page_content > .page_social_media {
	position:		absolute;
	bottom:			2rem;
	right:			1.125rem;
	z-index:		3;
}

.page > .page_content > .page_social_media > svg {
	width:			1.75rem;
	height:			1.75rem;
	fill:			#093349;
}

body.home #content {
	color:			#ffffff;
	font-size:		1.625rem;
	line-height:		2.5rem;
	text-shadow:		0 0 6px #093349;
	opacity:		.9;
}

.page_content ul > li {
	margin:			0;
	color:			#a1905f;
}

.page_content ul > p {
	display:		none;
}

.page_content > figure.wp-block-image {
	margin:			0 -2rem 1rem -2rem;
}

.page_content > figure.wp-block-image.small_image {
	margin:			0;
	width:			180px;
}

.page_content > figure.wp-block-image > img {
	transform:		scale(.5);
	opacity:		0;
	transition:		opacity .5s .25s ease-out,
				transform .5s .25s ease-out;
}

.page_content > figure.wp-block-image > img.wp-block-image-on {
	transform:		scale(1);
	opacity:		1;
}

.wp-block-quote {
	margin:			0;
}

figure.wp-block-gallery.has-nested-images {
	position:		relative;
	height:			210px;
	width:			60%;
	margin:			2rem 20%;
}

figure.wp-block-gallery.has-nested-images > p {
	display:		none;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	position:		absolute;
	top:			0;
	left:			0;
	width:			100% !important;
	height:			auto;
	opacity:		0;
	transform:		translateX(120%);
	transition:		opacity .5s ease-out,
				transform .5s ease-out;
}

.wp-block-gallery.has-nested-images figure.wp-block-image.figure_selected:not(#individual-image) {
	opacity:		1;
	transform:		translateX(0);
}

.gallery_selector_container {
	display:		inline-flex;
	flex-wrap:		wrap;
	justify-content:	center;
	width:			calc(100% + 2rem);
	margin-top:		3rem;
}

.gallery_selector {
	display:		inline-block;
	width:			1.25rem;
	height:			1.25rem;
	margin:			.25rem;
	background-color:	rgba(0, 0, 0, .15);
	border-radius:		50%;
	cursor:			pointer;
}

.gallery_selector.selected {
	background-color:	#05aeef;
}

.about_block {
	padding:		.25rem .5rem;
	color:			#fff;
	background-color:	#0072bc;
	border-radius:		.25rem;
}


/************************************************************
*************************************************************

CONTACT TEMPLATE

*************************************************************
************************************************************/

.partner_of {
	margin:			4rem 0 0;
}

#main_content > .page.template-contact {
	background-color:	#4094d0;
}

#main_content > .page.template-contact .page_content > figure.wp-block-image {
	width:			140px;
	margin:			0;
}

#main_content > .page.template-contact .page_content > figure.wp-block-image > img {
	transform:		scale(1);
	opacity:		1;
}


/************************************************************
*************************************************************

TRANSPORTATION TEMPLATE

*************************************************************
************************************************************/

#main_content > .page.template-transportation {
	color:			#fff;
	background-color:	#f9a51a;
}

#main_content > .page.template-transportation h2 {
	color:			#fff;
}

#main_content > .page.template-transportation > .page_content > .page_arrow > svg {
	fill:			#fff;
}

/************************************************************
*************************************************************

YACHTS TEMPLATE

*************************************************************
************************************************************/

#main_content > .page.template-yachts {
	color:			#fff;
	background-color:	#790d2c;
}

#main_content > .page.template-yachts h2 {
	color:			#fff;
}

#main_content > .page.template-yachts > .page_content > .page_arrow > svg {
	fill:			#fff;
}

/************************************************************
*************************************************************

VILLAS TEMPLATE

*************************************************************
************************************************************/

#main_content > .page.template-villas {
	color:			#fff;
	background-color:	#000037;
}

#main_content > .page.template-villas h2 {
	color:			#fff;
}

#main_content > .page.template-villas > .page_content > .page_arrow > svg {
	fill:			#fff;
}

/************************************************************
*************************************************************

PURPLE TEMPLATE

*************************************************************
************************************************************/

#main_content > .page.template-purple {
	color:			#fff;
	background-color:	#7c51a1;
}

#main_content > .page.template-purple h2 {
	color:			#fff;
}

#main_content > .page.template-purple > .page_content > .page_arrow > svg {
	fill:			#fff;
}

/************************************************************
*************************************************************

BLUE TEMPLATE

*************************************************************
************************************************************/

#main_content > .page.template-blue {
	color:			#fff;
	background-color:	#4094d0;
}

#main_content > .page.template-blue h2 {
	color:			#fff;
}

#main_content > .page.template-blue > .page_content > .page_arrow > svg {
	fill:			#fff;
}

@media only screen and (min-width: 1024px) {
	h1 {
		max-width:		unset;
		margin:			0;
		padding:		2rem 4rem 1rem;
		text-align:		left;
	}

	h2 {
		margin:			0;
		font-size:		1.75rem;
		line-height:		1.75rem;
		font-weight:		800;
		text-align:		left;
	}

	#menu_toggle {
		left:			2rem;
		z-index:		15;
	}

	#menu_toggle > div {
		background-color:	transparent;
	}

	#explore {
		top:			190px;
		left:			calc(50% - 150px);
		width:			300px;
		font-size:		3rem;
		line-height:		3rem;
	}

	.desktop_slider_container > div > span {
		top:			calc(50% - 1.5rem);
		left:			20%;
		width:			60%;
		height:			auto;
		font-size:		1.25rem;
		line-height:		1.5rem;
		padding:		.25rem 0;
		border-radius:		2rem;
	}

	nav {
		top:			0;
		width:			40%;
		height:			100%;
		z-index:		14;
	}

	#logo_container {
		bottom:			-.25rem;
	}

	#background_parallax > img {
		height:			unset;
		width:			100%;
	}

	.mobile_slider_container {
		display:		none;
	}

	.desktop_slider_container {
		display:		block;
	}

	#slider_text > div {
		font-size:		3rem;
		line-height:		3rem;
	}

	#logo > svg, #logo_lang > svg {
		width:			240px;
	}

	#social-media {
		right:			1rem;
	}

	#social-media > a {
		width:			4.5rem;
	}

	#social-links > a > svg,
	#social-media > a > svg {
		width:			2.75rem;
		height:			2.75rem;
	}

	#main_content > .page {
		display:		flex;
		justify-content:	center;
		flex-direction:		row-reverse;
		min-height:		100vh;
		overflow:		hidden;
	}

	#main_content > .page.template-sponsors {
		min-height:		50vh;
	}

	.page > .page_content {
		min-height:		unset;
		padding:		6rem 6.5rem 3rem 4.5rem;
	}

	.page > .page_main_image,
	.page > .page_content {
		width:			50%;
	}

	figure.wp-block-gallery.has-nested-images {
		height:			580px;
		width:			calc(100% + 6.5rem);
	}

	.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {

	}

	.gallery_selector_container {
		width:			calc(100% + 6.5rem);
	}

	#main_content > .page.splash_page_container {
		flex-direction:		row;
	}

	.splash_page_explore {
		font-size:		1.25rem;
		line-height:		2rem;
		left:			calc(50% - 100px);
		width:			200px;
	}
}