/* #region IMPORT FONTS */

	@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

	/* #endregion */

	/* #region GPI CONFIGURATION */

	/* VARIABLES */

	:root {
		/* The max width of the content containing area of the site */
		--maxContentWidth: 1280px;
		--maxSmallContainerWidth: 1024px;
		--smallContainerWidth: 80%;
		--containerPadding:  clamp(10px, 1.5vw, 40px);
		/* The minimal padding of the main sectioning elements */
		--minContentPadding: 4vw;
		/* Font selection */
		--font-family-body: "Lato", serif;
		--font-family-heading: "Lato", sans-serif;
		--font-family-fancy-heading: "Dancing Script", serif;
		--font-family-navigation: "Roboto Condensed", sans-serif;
		--font-family-accent: "Lora", serif;
		--font-family-quote: "Courier New", Courier, monospace;
		--font-family-code: "Courier New", Courier, monospace;
		/* GPI colors pallet */
		--color-primary-1: hsl(209, 100%, 17%);
		--color-accent-1: hsl(68, 52%, 49%);
		--color-accent-2: hsl(20, 89%, 56%);
		--color-accent-3: hsl(68, 100%, 28%);
		--color-neutral-1: hsl(68, 59%, 74%);
		--color-neutral-2: hsl(21, 89%, 75%);
		--color-neutral-3: hsl(216, 48%, 87%);
		--color-neutral-4: hsl(0, 0%, 100%);
		/* Colors for semantic texts, like warnings and alerts */
		--color-semantic-error: hsl(0, 100%, 48%);
		--color-semantic-info: hsl(209, 88%, 47%);
		--color-semantic-success: hsl(236, 88%, 41%);
		--color-semantic-warning: hsl(44, 88%, 47%);
		--color-semantic-highlight: hsla(61, 87%, 49%, 0.534);
	}

	/* RESPONSIVE FONTS */
	/** Throughout the CSS we set font sizes in REM. This unit is relative to the html font size. Here we can resize all fonts at once for specific media queries **/

	html {
		font-size: 20px;
	}

	@media only screen and (max-width: 1360px) {
		html {
			font-size: 18px;
		}
	}

	@media only screen and (max-width: 800px) {
		html {
			font-size: 16px;
		}
	}

	/* #endregion */

	/* #region GPI LAYOUT */

	div#container {
		max-width: var(--maxContentWidth);
		margin: auto;
		overflow: hidden;
		box-shadow: 0px 0px 14px 0px rgba(181, 181, 181, 1);
	}

	.smallContainer {
		width: var(--smallContainerWidth);
		max-width: var(--maxSmallContainerWidth);
		margin: 3vw auto;
		padding: 8%;
		text-align: center;
	}

	div#container>* {
		padding: clamp(10px, 1.5vw, 40px);
	}

	@media screen and (min-width: 1300px) {
		body {
			margin-top: 30px;
			box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
		}
	}

	/* #endregion */

	/* #region GPI STYLING */

	a {
		color: var(--color-primary-1);
	}

	p a:hover {
		color: var(--color-accent-3);
		font-weight: 700;
	}

	article h2 {
		font-size: 1rem;
		text-transform: uppercase;
		margin-bottom: 0;
	}

	article strong, article b, article strong a, article a strong {
		font-weight: 600;
		color: var(--color-accent-1);
		text-transform: uppercase;
	}

	article p {
		line-height: 1.5rem;
	}

	p.buttonA {
		width: max-content;
		padding: 0.5rem 1rem;
		background-color: var(--color-accent-2);
		display: block;
		margin: 2rem auto;
	}

	p.buttonA:hover {
		transform: scale(1.1);
		transition: transform 0.4s ease-in-out;
	}

	p.buttonA a {
		text-transform: uppercase;
		color: white;
		text-decoration: none;
		font-weight: 800;
		font-size: 1.1rem;
	}

	p.buttonA a:hover,
	p.buttonA a:active {
		background-color: unset;
		}

	.imageOverlayButton {	
		display: inline-block;
		background-color: rgba(243,110,43,0.8);
		color: white;
		position: absolute;
		bottom: 1vw;
		right: 1vw;
		text-transform: uppercase;
		font-size: 0.7rem;
		width: max-content;
		padding: 0 15px;
		border: none;
		font-weight: 700;
	}

	h1.fancyHeadline, h2.fancyHeadline {
		font-size: 2.8rem;
		color: var(--color-accent-2);
		font-family: var(--font-family-fancy-heading);
		font-weight: 800;
		margin: auto auto 1rem auto;
		max-width: max-content;
		text-transform: none;
		text-align: center;
	}

	a.popupLink {
		font-size: 0.8rem;
	}
	
	a.popupLink:hover,
	a.popupLink:active {
		color: white;
		background-color: var(--color-accent-3);
		padding: 1px 5px;
	}
	
	div.popup {
		background-color: white;
		width: 50%;
		min-width: 300px;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
		margin: auto;
		font-size: 0.8rem;
		padding: 4%;
		height: max-content;
		max-height: 80%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	
	div.popup div#closeButton {
		font-weight: 900;
		position: absolute;
		right: 0.3rem;
		top: 0.8rem;
		margin: 0.8rem;
	}

	div.popup div#closeButton a {
		text-decoration: none;
		font-weight: 900;
		font-size: 1.5rem;
		color: var(--color-accent-2);
	}
	
	div#closeButton a:hover {
		color: var(--color-accent-1);
	}
	
	div.popup-inner footer a {
		font-size: 0.8rem;
	}
	
	div.popup-inner hgroup.streakline h1 span {
		background-color: var(--color-accent-2);
	}
	
	






		/* #region - FANCY HEADLINES */

	hgroup.streakline h1 span {
		background-color: var(--color-accent-1);
		line-height: 3.2rem;
		box-shadow: 0.1rem 0.1rem 0.8rem rgba(0, 0, 0, 0.7);
	}
	hgroup.streakline h2 span {
		background-color: var(--color-accent-2);
		line-height: 1.1rem;
		color: white;
		font-size: 1rem;
		box-shadow: 0.1rem 0.1rem 0.8rem rgba(0, 0, 0, 0.7);
	}

	hgroup.streakline span {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	display: inline;
	padding: 0 1rem;
	}
	hgroup.streakline {
		text-align: center;
		max-width: 80%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: auto auto;
	}
	hgroup.streakline strong {
		color: white;
		font-weight: 900;
	}
	hgroup.streakline span {
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		display: inline;
		padding: 0 1rem;
	}
	hgroup.streakline h1, hgroup.streakline h2 {
		color: #002d56;
		text-transform: uppercase;
	}
	hgroup.streakline h1 {
		transform: rotate(-6deg);
	}

	hgroup.streakline h2 {
		transform: rotate(4deg);
		width: 50%;
		max-width: 350px;
		text-align: left;
		line-height: 1.5rem;
		align-self: flex-start;
		margin: 10% 0 5% 15%;
	}

	@media screen and (max-width: 1360px) {
		hgroup.streakline h1 {
			font-size: 1.8rem;
		}
		hgroup.streakline h1 span {
			line-height: 2.6rem;
		}

	}

	@media screen and (max-width: 900px) {
		hgroup.streakline h1 {
			font-size: 1.4rem;
		}
		hgroup.streakline h1 span {
			line-height: 2.1rem;
		}

	}

		
	/* #endregion */

	
	

	
	
	
	
	/* #endregion */

	/* #region GPI OBJECTS */

	/* #region TICKER */

	ul#ticker {
		display: flex;
		animation: marquee 30s linear infinite;
		font-family: Lato, "sans-serif";
		font-weight: 700;
		color: white;
		margin: auto auto 5px auto;
		position: absolute;
		bottom: 0.3rem;
		opacity: 35%;
	}

	ul#ticker li {
		margin: 0;
		list-style-type: none;
		white-space: nowrap;
	}

	header {
		overflow: hidden;
		position: relative;
	}

	@media screen and (width > 1300px) {
		ul#ticker {
			animation: marquee-large 20s linear infinite;
		}
	}

	@keyframes marquee {
		0% {
			transform: translateX(100vw);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	@keyframes marquee-large {
		0% {
			transform: translateX(1300px);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	/* #endregion */

	/* #region PHOTOGRID */


	#quote {
		--width: 15%;
		--min-width: 178px;
		--max-width: 199px;
		--height: 8vw;
		--min-height: 110px;
		--max-height: 123px;
	}

	div.grid-1-3-1 {
		display: grid;
		grid-template-rows: var(--height) auto var(--height);
		grid-template-columns: var(--width) auto var(--width);
		gap: 0;
		margin: auto;
		justify-content: space-evenly;
	}

	div.grid-1 {
		grid-column: span 3;
		height: var(--height);
	}

	div.grid-3 {
		grid-column: span 3;
		height: var(--height);
	}

	div.grid-2-2 {
		height: min-content;
		min-width: 400px;
	}

	div.grid-2-1,
	div.grid-2-3 {
		overflow: visible;
	}

	div.grid-2-3 {
		margin-left: 2vw;
	}

	div.photoStrip {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		gap: 10px;
		position: relative;
	}


	div#photoStrip2 {
		margin-left: 0;
	}


	div#photoStrip3 {
		margin-top: -5%;
		margin-left: 7%;
	}

	div#photoStrip4 {
		align-items: flex-end;
	}

	div#photoStrip1,
	div#photoStrip3 {
		flex-direction: row;
		width: 100%;
		justify-content: space-between;
	}

	div#photoStrip2,
	div#photoStrip4 {
		flex-direction: column;
	}

	div.photoStripPhoto {
		width: var(--width);
		min-width: var(--min-width);
		max-width: var(--max-width);
		height: var(--height);
		min-height: var(--min-height);
		max-height: var(--max-height);
		border: 0.4rem solid white;
		background-color: black;
		box-shadow: 0.3rem 0.3rem 1rem rgba(0, 0, 0, 0.2);
		/* This prevents the photos from being resizes with the flex container, but rather, overlap */
		position: absolute;
	}

	div.photoStripPhoto img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		max-width: 100%;
		max-height: 100%;
	}

	@media only screen and (max-width: 1080px) {
		p#quoteRequestGuests {
			flex-direction: column;
			align-items: center;
			margin: auto;
		}

		p#quoteRequestGuests span {
			width: 200px;
			width: 165px;
			margin-top: -3px;
			margin-bottom: 20px;
		}

		p#quoteRequestDates {
			flex-wrap: wrap;
			max-width: 350px;
			margin: auto;
		}

		p#quoteRequestDates label {
			width: 50%;
			margin: auto auto;
		}

		p#quoteRequestDates label {
			text-align: center;
		}

		p#quoteRequestDates label:last-of-type {
			width: 80%;
			margin-top: 10px;
		}

		div#photoStrip1,
		div#photoStrip3 {
			left: 0;
		}

		div#photoStrip2 {
			margin-left: -25%;
		}

	}

	@media only screen and (max-width: 600px) {
		div.grid-1-3-1 {
			grid-template-columns: 1px auto 1px;
		}

		div#photoStrip2 {
			position: relative;
			left: -50px;
		}
	}

	/* #endregion */

	/* #region FOOTER */

	div#container>footer {
		height: min-content;
	}

	div#container>footer #bottomLogo {
		display: block;
		height: 4rem;
		margin-right: auto;
		margin-left: 5vw;
	}

	div#container>footer>nav>menu {
		background-color: rgba(255, 255, 255, 0.4);
	}

	div#container>footer>nav section#partners {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	div#container>footer>nav section#partners h1 {
		font-family: var(--font-family-fancy-heading);
		color: white;
		margin: 0 auto 1rem auto;
	}

	div#container>footer>nav section#partners img {
		max-width: 70%;
		display: block;
		margin: auto;
		max-height: 5.5rem;
	}

	div#container>footer {
		width: 100%;
		height: max-content;
		background-color: #00293b;
		background-image: url(/images/kayaking-vassiliki-04430.jpg);
		background-position: top right;
		background-size: 100%;
		background-repeat: no-repeat;
		border: none;
		background-clip: content-box;
		margin-top: 12vw;
		padding: 0;
	}

	div#container>footer>nav, div#container>footer>small, div#container>footer>div#footerLogos {
		width: 90%;
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
	}


	div#container>footer nav {
		display: flex;
		align-items: stretch;
		margin: 28vw auto auto auto;
		gap: 3vw;
		padding: 3vw;
		height: min-content;
	}

	div#container>footer>div#footerLogos {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 5vw;
	}

	div#footerLogos img {
		max-width: 40%;
	}

	div#container>footer>small {
		text-align: center;
		color: white;
		margin-top: 3vw;
		font-size: 0.7rem;
		display: block;
		padding: 2vw 0;
	}

	div#container>footer nav #footerMenu {
		padding: 1.5rem;
		padding-left: 0;
		background-color: rgba(255, 255, 255, 0.7);
		min-height: 300px;
		height: min-content;
		width: 70%;
		display: flex;
		position: relative;
	}

	div#container>footer>nav>#partners {
		min-height: min-content;
		width: 30%;
	}

	div#container>footer>nav>#partners a:hover {
		background-color: unset;
		transform: scale(1.05);
		transition: transform 0.3s ease;
	}


	div#container>footer nav #footerMenu div#socials {
		width: 6vw;
		min-width: 5rem;
		max-width: 7rem;
		border-right: 1px solid var(--color-primary-1);
	}

	div#container>footer nav #footerMenu div#socials img {
		/* temp value */
		width: 2.5rem;
		margin: 1.1rem auto;
		display: block;
	}

	div#container>footer nav #footerMenu div#theMenu {
		width: auto;
		height: 100%;
	}

	div#container>footer nav #footerMenu div#theMenu ul {
		flex-direction: column;
		gap: 0;
	}

	div#container>footer nav #footerMenu div#theMenu a {
		text-decoration: underline;
		padding: 2px;
	}

	div#container>footer nav #footerMenu div#theMenu ul li {
		margin: 0 0 0.3rem 0;
	}

	div#container>footer nav #footerMenu div#supportingLogos {
	position: absolute;
	width: 38%;
	right: 0;
	bottom: 0;
	}

	div#container>footer small a {
		color: var(--color-accent-1);
	}

	@media only screen and (max-width: 800px) {
		div#container>footer>nav {
			flex-direction: column;
		}

		div#container>footer>nav>#footerMenu,
		div#container>footer>nav>#partners {
			width: 90%;
			margin: auto;
		}

		div#container>footer>nav>#partners {
			max-width: 330px;
			margin: 8vw auto;
		}

		div#container>footer>nav section#partners h1 {
			font-size:2.6rem;
			margin-bottom: 6vw;
		}
		div#container>footer>nav section#partners img {
			margin-bottom:3vw;
		}

	}


	/* #endregion */

	/* #region ADVENTURE PICKER */

	div#adventureContainer {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 14vw;
		gap: 3vw;
		justify-content: left;
	}

	div#adventureContainer > div {
		width: 45%;
		border: 1px solid var(--color-primary-1);
		display: flex;
		flex-direction: column;
		position: relative;
	}

	div#adventureContainer div h2 {
		background-color: var(--color-primary-1);
		color: white;
		font-size: 0.9rem;
		padding: 0.4rem;
		margin: 0;
		text-align: center;
	}

	div#adventureContainer div p {		
		margin-bottom: 0;
		padding: 0.5rem 0.3rem;
		font-size: 0.8rem;
		font-style: italic;
		line-height: 1.2rem;
		min-height: 80px;
		text-align: center;		
	}

	div#adventureContainer div a img {
		height: 30vw;
		max-height: 260px;
		object-fit: cover;
		margin: 0;
		padding: 0;
		display: block;
		height: 30vw;
		width: 100%;
		min-height: 200px;
		max-height: 290px;
		object-position: bottom;	
	}

	@media  screen and (min-width: 1180px) {
		div#adventureContainer div {
			width: 27%;	
		}
	}
		@media  screen and (max-width: 550px) {
			div#adventureContainer div {
				width: 90%;	
		}
		}

	/* #endregion */

	/* #region - MAIN VIDEO */

article#mainVideo {
	width: 70%;
	max-width: 850px;
	margin: auto;
	display: flex;
	align-content: stretch;
	align-items: center;
	margin-bottom: 10vw;
}

article#mainVideo div#mainVideoCaption {
	width: 200px;
    display: block;
    float: left;
    margin-left: -200px;
    align-items: stretch;
}

article#mainVideo div#mainVideoCaption img {
	width: 80px;
    padding-top: 150px;
    margin-right: 1vw;
    margin-left: auto;
    display: block;
    margin-bottom: 1vw;
}

article#mainVideo div#mainVideoCaption p {
	font-family: var(--font-family-fancy-heading);
    font-size: 1.3rem;
    text-align: right;
    width: 70%;
    display: block;
    transform: rotate(-2deg);
    margin: auto;
}

article#mainVideo .responsiveVideo {
	/* This gives the video ultrawide dimensions */
	padding-bottom: 44.25%;
	margin: 4vw auto;
}

@media screen and (max-width: 1000px) {
	article#mainVideo div#mainVideoCaption {
		display: none;
	}
	article#mainVideo {
		width: 100%;
		margin-top: 100px;
		margin-bottom: 100px;
	}
}

/* #endregion */

	/* #endregion */

	/* #region TO SORT */

	div#container>header {
		width: 100%;
		height: 30vw;
		min-height: 20rem;
		max-height: 30rem;
		background-image: url(/images/diving-vassiliki-02253.jpg);
		background-size: cover;
		background-position-y: center;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	header hgroup {
		margin: auto auto 1.5rem auto;
		text-align: left;
		width: 80%;
		max-width: 800px;
		min-width: 400px;

	}

	header h1 {
		font-family: var(--font-family-heading);
		font-weight: 900;
		font-size: 4rem;
		min-width: 300px;
		line-height: 3.2rem;
		color: white;
		margin: 0;
		text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
	}

	header h2 {
		font-family: var(--font-family-fancy-heading);
		margin: 0;
		padding: 0;
		margin-bottom: 0;
		margin-left: 2.5rem;
		color: yellow;
	}

	header #mainLogo {
		display: block;
		margin: 1.5rem;
		margin-left: auto;
		height: 4rem;
		justify-self: flex-start;
	}

	main {
		min-width: 300px;
		max-width: var(--maxContentWidth);
		margin: auto;
		padding: var(--minContentPadding);
		padding-top: 4.5rem;
		position: relative;
	}

	section.minorSection {
		background-color: var(--color-neutral-2);
		padding: 1rem var(--minContentPadding) 1rem var(--minContentPadding);
		margin: auto auto 1.2rem auto;
		width: 90%;
	}

	section.minorSection p {
		text-align: center;
	}

	section.minorSection p a {
		color: white;
		font-size: 0.9rem;
		font-weight: bold;
	}

	section.minorSection p:last-of-type,
	section.minorSection p {
		margin-bottom: 0;
		font-size: 0.9rem;
	}

	section.minorSection#priceIndication p {
		color: white;
	}


	section.minorSection h1 {
		font-size: 1.2rem;
		font-weight: 800;
		text-align: center;
		margin: 0;
	}


@media screen and (max-width: 1000px) {
	header h1 {
		font-size: 3rem;
		line-height: 3rem;
	}

	header h2 {
		font-size: 1.8rem;
		line-height: 1.8rem;
	}
}

@media screen and (max-width: 600px) {
	header h1 {
		font-size: 2rem;
		line-height: 2rem;
	}

	header h2 {
		font-size: 1.3rem;
		line-height: 1.3rem;
	}
}

	/* #endregion */

/* #region CUSTOM HEADERS AND FOOTERS */

body#accommodation header.accommodation {
    background-image: url(/images/spotlight-e.jpg);
}

body#accommodation header.accommodation hgroup {
	margin: auto -2% 5% auto;
    max-width: 80%;
}

body#accommodation header.silver img#accommodation {
    filter: drop-shadow(0 0 8px white) drop-shadow(0 0 12px white);
}

body#lefkas header.lefkas {
    background-image: url(/images/spotlight-d.jpg);
}

body#lefkas header.lefkas hgroup {
    margin: auto 13% 3% auto;
    max-width: 80%;
}

body#contact header.contact hgroup {
    margin: auto 13% 3% auto;
    max-width: 80%;
}

body#contact header.contact {
    background-image: url(/images/spotlight-c.jpg);
}

body#contact header.contact hgroup {
	margin: auto auto 16% 55%;
    max-width: 80%;
}


/* #endregion */

	/* #region OVERRIDES AND EXCEPTIONS */

	/* #endregion */