:root {
	--main-bg-color: black;
	--main-fg-color: rgb(174, 205, 230);
	--h1-color: rgb(73, 116, 182);
	--h-color-grn: rgb(105, 201, 109);
}

* { box-sizing: border-box; }

@font-face {
	font-family: "OpenSans";
	src: url("../css/fonts/openSans/OpenSans-Regular.ttf");
}

@font-face {
	font-family: "OpenSans";
	src: url("../css/fonts/openSans/OpenSans-BoldItalic.ttf");
	font-style: oblique;
	font-weight: 700;
}

@font-face {
	font-family: "OpenSans";
	src: url("../css/fonts/openSans/OpenSans-Bold.ttf");
	font-weight: 700;
}

@font-face {
	font-family: "OpenSans-Light";
	src: url("../css/fonts/openSans/OpenSans-Light.ttf");
}

html { 
	font: 1em OpenSans; 
	letter-spacing: -0.5px;
	line-height: 1.75em;
	background-color: var(--main-bg-color);
	color: var(--main-fg-color);
}

body {
	margin: 0;
	background: url("../img/background-marine.webp");
	background-repeat: no-repeat;
	background-size: 100vw auto;
	background-position: top center;
	background-attachment: scroll;
}

header {
	display: grid;
	grid-template-areas: 
		"menu YachtServiceSKN";
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr;
}

header div:nth-child(2) { 
	grid-area: YachtServiceSKN;
	padding: 10px 30px 0 0px;
	text-align: right;
}

header div:nth-child(2) img { width: 30%; height: auto; }

header div:first-child { grid-area: menu; }

a { color: rgb(200,200,200); text-decoration: none; }
a:hover { color: rgb(255,255,255); }
a:visited { color: rgb(150, 150, 150); }

h1 {
	letter-spacing: -2px;
	color: var(--h-color-grn);
	/*-webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.8);*/
}

h2 {
	letter-spacing: -2px;
	color: var(--h-color-grn);
	/*-webkit-text-stroke: 0.5px rgba(255, 240, 240, 0.8);*/
}

.h1Light {
	display: block;
	font: 1.75em OpenSans-Light;
	color: var(--h-color-grn);
}

#subsidBranding { grid-area: subsidLogo; }
#subsidBranding img { width: 30%; margin: 0px 45px; }

#introGrid {
	max-width: 1300px;
	margin: auto;
	display: grid;
	grid-template-areas:
		"subsidLogo subsidLogo"
		"services est";
	grid-template-rows: 130px 1fr;  
	grid-template-columns: 1fr 1.25fr;
	grid-auto-rows: auto;
	gap: 25px;
}

/* Services list */
#introGrid div:nth-child(2) {
	/* font-size: clamp(1rem, 1.5vw, 3rem); */
	font-size: 1.3em;
	margin: -25px 0 0 0;
	padding: 0px 30px 30px 30px;
	grid-area: services;
}

#introGrid div:nth-child(2) ul li {
	margin: 0 0 1.1em 0;
}
/* Marine Assist */
#introText {
	grid-area: est;
	font-family: OpenSans-Light;
	#font-size: clamp(1rem, 1.5vw, 6rem);
	font-size: 1.3rem;
	line-height: 1.5em;
	background: rgba(8, 61, 92, 0.6);
	color: rgb(109, 136, 162);
	margin: 0 25px 0 0;
	padding: 30px;
	border-radius: 10px;
	align-self: center;
}

#introText img {
	display: inline-block;
	float: right;
	width: 60%; height: auto;
	border-radius: 10px;
	#padding: 10px;
	margin: 20px;
	align-self: center;
}

.mainBlock {
	max-width: 1300px;
	margin: 0px auto;
	padding: 25px;
}

#ospray {
	display: grid;
	grid-template-areas: 
		"heading heading"
		"osprayPhoto capabilities";
	grid-template-rows: 2em 1fr;
	grid-template-cols: 1fr 1fr;
	gap: 25px;
	margin: auto;
	padding: 25px;
	border-radius: 10px;
	background: rgb(4, 31, 47);
}


#ospray div img { 
	width: 80%; height: auto; 
	margin: 25px 0;
	border-radius: 10px;
}

#contactMarineAssist {
	margin: 25px auto;
	display: grid;
	grid-template-areas: 
		"heading heading"
		"contact socialMedia";
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
	padding: 25px;
	background: rgba(12,29,38, 0.5);
	border-radius: 10px;
	
}

@media(max-width: 2000px) {
	header { 
		grid-template-rows: 10vh; padding: 0 0 0 25px; 
	}
	header div:nth-child(2) img {
		width: 60%;
	}
}

@media(max-width: 1000px) {
	
	#introText { font-size: 1em; }
	
}

@media(max-width: 800px) {
	
	header { 
		display: block;
		width: 100%;
		margin-bottom: 25px;
	}
	
	header div:nth-child(2) img {
		width: 40% !important;
	}
	
	html { font-size: 1.3em; }
	
	h1 { font-size: 1.5em; letter-spacing: -2px;}
	
	header { grid-template-rows: 10vh; padding: 0 0 0 25px; }
	
	header div:nth-child(2) img { width: 80%; height: auto; }
	
	#subsidBranding { text-align: center; }
	
	#subsidBranding img { width: 70%; margin: 0px 45px; }
	
	#introGrid { display: flex; flex-flow: row wrap; }
	
	/* Services list */
	#introGrid div:nth-child(2) { font-size: 1em; line-height: 1.2em; }
	
	#introGrid div:nth-child(2) ul li { margin-bottom: 15px; }
	
	#introText { margin: auto; }
	
	#introText img:nth-child(2) { 
		display: block; 
		width: 100%; 
		margin: 0 auto 25px auto; 
	}
	
	#introText > img {
		padding-top: 20px;
	}
	
	#ospray div img { 
		width: 100%; height: auto; 
		margin: 25px 0;
		border-radius: 10px;
	}
	
	.mainBlock { margin: 25px auto; }
	
	
	#ospray {
		display: block;
	}
	
	#contactMarineAssist {
		display: block;
		margin: 0px;
	}
	
	#socialMediaLinks { width: 100%; margin: 35px 0 0 0;}
}

/*
@media(max-width: 500px) {
	
	#contactMarineAssist   {
		justify-content: end; 
	}
	
}

*/

#slideshow-container {
	float: right;
	position: relative;
	width: 350px;
	height: 450px;
	margin: 25px 0 10px 0 !important;
	/* border: 3px dashed green; */
}


.fade-slideshow-image {
	position: absolute;
	top: -20px;
	right: -25px;
	width: 100% !important;
	height: auto;
	transition: opacity 1s ease-in-out;
	object-fit: cover;
	/* border: 3px dashed red; */
}