@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');

:root {
  --blue1: #6FE8FE;
  --blue2: #007AC4;
  --blue3: #005D88;
  --red: #F32737;
  --grey1: #F2F2F2;
  --grey2: #FDFDFD;
}
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    background-color: transparent;
    z-index: 1;
}
body {
    background-color: var(--grey2);
}
nav {
	height: 50px;
	width: 100%;
	position: fixed;
  top: 0px;
  z-index: 100;
  box-sizing: content-box;
  border-bottom: 1px solid grey;
  box-shadow: 0px 3px 5px grey;
  background-color: var(--grey2);
}
p, ul {
	font-family: 'Poppins', sans-serif;
	font-size:  11pt;
	font-weight: 400;
	text-align: justify;
}
table {
	font-family: 'Poppins', sans-serif;
	font-size:  12pt;
	font-weight: 400;
	text-align: left;
	min-width: 350px;
	width: 52.5%;
	margin: 10px 5% 1vw 0px;
	float:  left;
	border-color: var(--blue3);
	border-width:  3px 0px;
	border-style: solid;
}
th {
	color: var(--blue3);
}
h1, h2 {
	font-family: /*Poppins*/ Courier New /*Cooper Black*/;
	font-weight: thick;
	color: var(--blue3);
}
.nav_menu_img {
	display: none;
}
.nav_button {
	width: 25%;
	height: 50px;
	padding-top: 10px;
	float:left;
	text-align: center;
  background-color: var(--grey2);
}
.nav_button > a > p {
	background-color: transparent;
	font-weight: bold;
	font-size: 19px;
	font-family: Verdana;
	text-decoration: none;
	color: var(--blue3);
	text-align: center;
}
.nav_button > a {
	font-size: 19px;
	text-decoration: none;
	color: var(--blue3);
}	
.nav_button:hover {
	/* background-color: lightgrey;*/
	border-top: 5px solid grey;
	transition: 0.5s ease;
	/*margin-left: -5px;
	margin-top: -5px;
	margin-right: 5px;
	padding-top: 15px;
	box-shadow: 5px 5px grey;*/
}
.nav_img {
	width: 8%;
	margin: auto;
	margin-top: 0px;
	z-index: 100;
	background-color: transparent;
	cursor: pointer;
}
.nav_box {
	width: 46%;
	height: 50px;
	margin-top: 0px;
}
#nav_left {
	margin-left: 0px;
	float: left;
}
#nav_right {
	margin-right: 0px;
	float: right;
}
.button6:hover #dropdown6 {
	display: block;
}
.button7:hover #dropdown7 {
	display: block;
}
.dropdown {
	display: none;
	position: absolute;
	height: auto;
	width: 11.5%;
	margin-top: 11px;
	box-shadow: 3px 3px 5px grey;
   background-color: var(--grey2);
}
.dropdown_button {
	text-decoration: none;
	color: var(--blue3);
	text-align: center;
}
.dropdown_button > p {
	padding-top: 12px;
	font-weight: bold;
	min-height: 50px;
	height: auto;
	width: 100%;
	font-size: 19px;
	font-family: Verdana;
	text-align: center;		
}
.dropdown_button_notlast > p:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 70%; /* Change this to whatever width you want. */
    padding-top:13px; /* This creates some space between the element and the border. */
    border-bottom: 1px solid grey; /* This creates the border. Replace black with whatever color you want. */
}
.dropdown_button:hover > p {
	border-left: 5px solid grey;
	transition: 0.5s ease;
}	
#nav_fullscreen {
	display: none;
}
/* nav_fullscreen */
#slider {
	width: 100%;
	height: 39.7vw;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 0px;
  position: relative;
  overflow: hidden;
}
/* Animation of slider */
@keyframes slider {
	0% {left: 100%;}
	5% {left: 0%;}
	25% {left: 0%;}
	30% {left: -100%;}
	100% {left: -100%;}
}
.slider_img {
	width: 100%;
	position: absolute;
	top: 0%;
	left: 100%;
	animation-name: slider;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
.slider1 {
	animation-delay: -1s; /* -5% */
}
.slider2 {
	animation-delay: 4s; /* 20% */
}
.slider3 {
	animation-delay: 9s; /* 45% */
}
.slider4 {
	animation-delay: 14s; /* 70% */
}
/* Not used at the moment: text box for in slider */
.slider_p {
	width: 200px;
	height: 200px;
	position: absolute;
	bottom: 20px;
	right: 20px;
	background-color: var(--blue2);
	color: white;
	padding: 20px;
	font-size: 12pt;
	font-family: Lucida Console;
}
.info {
	width: calc(90% + 10px);
	height: auto;
	padding-bottom: 10px;
	margin-left: 5%;
	margin-top:-60px;
	margin-bottom: 0px;
	background-color: transparent;
	overflow-y: hidden; 
	overflow-x: hidden;
	position: relative;
}

.homepage_info_box {
	width:calc(25% - 90px / 4 - 10px / 3);
	height: auto;
	padding-bottom: 20px;
	background-color: var(--grey1);
	box-shadow: 10px 10px lightgrey;
	color: black;
}
.homepage_info_box:hover {
	background-color: var(--blue2);
	color:white;
	transition: 0.5s ease;
	cursor: pointer;
}
.homepage_info_box:hover > .homepage_info_h1 {
	transition: 0.5s ease;
	color: var(--blue1);
}
#homepage_info_left {
	margin-right: 30px;
	float: left;
	display: block;
}
#homepage_info_middle {
	margin-right: 30px;
	float: left;
}
#homepage_info_right {
	margin-right: 10px;
	float: right;
}
.homepage_info_img {
	width: 60%;
  display: block; 
  margin: auto;
  background-color: transparent;
}
.homepage_info_p {
	width: 80%;
	height: calc(-0.61 * (18vw - 22px/*width of the parent element*/) + 320px);
	margin: auto;
	text-align: justify;
	font-size: 12pt;
	background-color: transparent;
}
.homepage_info_h1 {
	text-align: center;
	color: var(--blue3); 
	height: 70px;
	margin-top: 20px;
	font-size: calc(18pt + 2vw);
	background-color: transparent;
	font-family: cooper black;
}
.homepage_info_imgbox {
	height: auto;
	width: 100%;
	margin-top: 20px;
	background-color: transparent;
}
#homepage_text {
	width: calc(90%);
	margin: auto;
	margin-top: 60px;
	padding-bottom: 40px;
	padding-top: 20px;
	background-color: var(--grey1);
	box-shadow: 10px 10px lightgrey;

}
.homepage_text_h1 {
	text-align: center;
	color: var(--blue3); 
	height: 70px;
	font-size: 40pt;
	background-color: transparent;
}
.homepage_text_p {
	width: 90%;
	margin: auto;
	margin-top: 10px;
	text-align: justify;
	background-color: transparent;
}
/*footer*/
footer {
	min-height: 250px;
	background-color: var(--blue3);
	margin-top: 75px;
	padding-top: 30px;
}
.footer_p {
	text-align: center;
	font-family: Lucida Sans, Sans-serif;
	font-size: 11pt;
	color: white;
	background-color: transparent;
	position: absolute;
	border-top: 1px solid white;
	height: 15px;
	width: 90%;
	left: 5%;
	margin-top: 190px;
	padding-top: 5px;
}
.footer_div {
	width: 20%;
	margin-left: 10%;
	float: left;
	height: auto;
	background-color: transparent;
}
.footer_logo_img {
	margin:auto;
	max-width: 100%;
	max-height: 160px;
}
#footer_logo > p{
	color:  white;
	font-family: Poppins, Sans-serif;
	font-size:  25pt;
	font-weight: bold;
	text-align: center;
}
.footer_h2 {
	color: white;
	font-family: Poppins /*Lucida Sans*/, Sans-serif;
	font-size: 12pt;
	font-weight: medium;
	background-color: transparent;
	margin-bottom: 10px;
}
#footer_socials > a {
	background-color: transparent;
}
.footer_socials_img{
	width:40px;
	background-color: transparent;
}
.footer_links_a {
	background-color: transparent;
	text-decoration: none;
}
.footer_links_a > p {
	margin-top: 5px;
	color: white;
	background-color: transparent;
	font-size: 10pt;
	font-family: Poppins /*Lucida Sans*/, Sans-serif;
}
.footer_link_img {
	height: 10pt;
}

/* Fotos.php */
.foto_box {
	width: 95%;
	height: auto;
	margin: auto;
	margin-top: 120px;
	padding-bottom: 40px;
	padding-top: 20px;
	background-color: var(--grey1);
	box-shadow: 10px 10px lightgrey;
	overflow: hidden;
}
.foto_imgbox {
	width: 20%;
	height: 13vw;
	margin-left: 4%;
	float: left;
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	box-shadow: 0px 3px 5px grey;
	cursor: pointer;
}
.foto_imgbox_img {
	height: 13vw;
	min-width: 100%;
	margin: auto;
	position: absolute;
	top: 0px;
	transition: ease .5s;
	object-fit: cover;
}
.foto_imgbox_img:hover {
	transform: scale(1.2);
}
.foto_p:hover > .foto_imgbox_img {
	transform: scale(1.2);
}
.foto_wrap4 {
	width: 100%;
	height: 13vw;
	margin-bottom: 3.8vw;
}
.foto_p {
	height: 13vw;
	padding-top: 1vw;
	font-size: 11vw;
	position: absolute;
	top: 0px;
	color: white;
	opacity: 0.4;
	font-family: Courier New;
	font-weight: bold;
	text-align: center;
	display:none;
}
.foto_h1 {
	text-align: center;
	color: var(--blue3); 
	height: 70px;
	font-size: 40pt;
	background-color: transparent;
	margin-bottom: 20px;
}

/* Full page foto viewer */
#foto_viewer{
	width: 100%;
	height: 100vh;
	padding-top: 15vh;
	background-color: #292929;
	position: fixed;
	z-index: 200;
	top: 0px;
	left: 0px;
	display: none;
}
.foto_viewer_box {
	height: 70vh;
	width: 100%;
	display: flex;
	justify-content: center;
}
.foto_viewer_img {
	max-height: 70vh;
	max-width: 100vw;
	height: auto;
	width: auto;
	object-fit: contain;
	transition: linear 0.5s;
}
.foto_cross_box {
	width: 55px;
	height: 55px;
	padding-top: 10px;
	padding-left: 10px;
	position: absolute;
	top: 15px;
	right: 15px;
	transition: ease .2s;
	background-color: black;
	opacity: 0.8;
	border-radius: 8px;
}
.foto_cross_box:hover {
	transform: scale(1.1);
}
.foto_cross_img {
	width: 35px;
	height: 35px;
	transition: ease .2s;
}
.foto_arrow_box {
	height: 80px;
	position: absolute;
	top: calc(50vh - 40px);
	padding-top: 15px;
	background-color: black;
	opacity: 0.8;
	transition: ease .2s;
}
.foto_arrow_box:hover {
	transform: scale(1.1);
}
#foto_arrow_left {
	left: 0px;
	padding-left: 10px;
	padding-right: 15px;
	border-radius: 0px 8px 8px 0px;
}
#foto_arrow_right {
	right: 0px;
	padding-left: 15px;
	padding-right: 10px;
	border-radius: 8px 0px 0px 8px;
}
.foto_arrow_img {
	height: 50px;
}
#foto_viewer_p {
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: 20px;
	color: white;
	font-size: 15pt;
	font-family: lucida console;
}
#ship_info {
	width: 90%;
	margin: auto;
	margin-top: -60px;
	background-color: var(--grey1);
	box-shadow: 10px 10px lightgrey;
	padding: 25px 5% 20px 5%;
	position: relative;
	overflow: hidden;
}
#ship_info > h2 {
	color: var(--blue3);
	width: auto; 
	height: 45px;
	font-size: 25pt;
	text-align: center;
	margin: 10px 0px;
}

/*multi_foto style*/
.multi_foto_bottom {
	width: 42.5%;
	height: 29vw;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0px 3px 5px grey;
}
.multi_foto_bottom_main {
	height: auto;
	width: auto;
	min-width: 100%;
	transition: ease .5s;
	object-fit: cover;
}
.multi_foto_bottom_small {
	height: auto;
	min-height: 8.5vw;
	width: auto;
	min-width: 100%;
	transition: ease .5s;
	object-fit: cover;
}
.multi_foto_bottom_main:hover {
	transform: scale(1.2);
}
.multi_foto_bottom_smallbox:hover > .multi_foto_bottom_small {
	transform: scale(1.2);
}
.multi_foto_bottom_mainbox {
	width: 100%;
	height: 20.5vw;
	overflow: hidden;
	display: flex;
	justify-content: center;
}
.multi_foto_bottom_smallbox {
	width: calc(100% / 3);
	height: 8.5vw;
	overflow: hidden;
	float: left;
	display: flex;
	justify-content: center;
	position: relative;
}
#multi_foto_bottom_p {
	text-align: center;
	height: 8.5vw;
	width: calc(0.8 * 42.5vw / 3);
	position: absolute;
	font-size: 6vw;
	font-family: Courier New;
	font-weight: bold;
	line-height: 8.5vw;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0.6;
	color: white;
	transition: ease .5s;
	display: block;
}
#multi_foto1 {
	float: right;
	margin:  5px 0px 3vw 5%;
}
#sunday {
	width: 80%;
	margin: auto;
	height: 80vh;
	margin-top:  10vh;
	text-align: center;
	padding-top: 10vh;
}
#sunday > img {
	height: 30vh;
	margin: auto;
	margin-bottom: 6vh;
}
#sunday > p {
	text-align: center;
	padding-top: 3vh;
}
/*login*/
#login {
	width: 30%;
	min-width: 300px;
	margin: auto;
	height: 80vh;
	margin-top:  10vh;
	text-align: center;
}
input, textarea {
	width: 100%;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	height: 4vh;
	font-size: 2vh;
	background-color: var(--grey2);
	border: 2px solid #adadad;
	border-radius: 0px;
	padding-left: 20px;
	font-family: 'Poppins', sans-serif;
}
input:focus, textarea:focus {
	outline:  none;
	border: 2px solid var(--blue3);
}
input:focus::placeholder, textarea:focus::placeholder {
  color: transparent;
}
#login > form {
	width: 60%;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
#login > img {
	height: 20vh;
	margin: auto;
	margin-bottom: 1vh;
	margin-top: 1vh;
}
#login > h1 {
	margin-bottom: 2vh;
}
.login_label {
	width: 100%;
	text-align: left;
	font-family: 'Poppins', sans-serif;
	font-size:  12pt;
	font-weight: 400;
	margin: 2vh 0px 0px 0px;
	display: block;
}
.login_submit {
	width:  40%;
	margin-right: 0px;
	margin-left:  60%;
	background-color: var(--blue3);
	border: none;
	color:  white;
	text-align: center;
	padding:  0px;
	margin-top: 3vh;
}
#login > form > p {
	font-size: 10pt;
	color:  var(--red);
}
/*Foto upload page*/
#foto_upload {
	height: auto;
	width: 50%;
	min-width: 600px;
	margin: auto;
	margin-top: 0vh;
	margin-bottom: 5vh;
	background-color: var(--grey1);
	color: var(--blue3);
	text-align: center;
}
#foto_upload > img {
	height: 15vh;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1vh;
	margin-top: 1vh;
}
#foto_upload > h1 {
	text-align: center;
}
#foto_upload > p {
	text-align: left;
	width: 60%;
	min-width: 600px;
	margin:  auto;
}
#foto_upload > ul {
	width: 60%;
	min-width: 600px;
	margin:  auto;
	padding-left: 20px;
}
#logout_container {
	width: 80px;
	height: auto;
	position: absolute;
	right: 12px;
	top: 12px;
}
.logout_submit {
	width: 80px;
	background-color: var(--blue3);
	border: none;
	color:  white;
	text-align: center;
	padding:  0px;
}
.directory_select {
	width: 35%;
	height: auto;
	overflow:  hidden;
	margin-bottom: 35px;
}
.directory_select_left {
	float: left;
	margin-left: 15%;
}
.directory_select_right {
	float:  right;
	margin-right: 10%;
}
.directory_select > * {
	float:  left;
}
.image-upload > input {
  display: block;
}
.image-upload > label > img {
	height: 70px;
	cursor: pointer;
}
.directory_select > a {
	text-decoration: none;
	width: calc(100% - 81px);
	float:  right;
}
.directory_select > a > p {
	width: 100%;
	text-align: center;
	margin-top: 26px;
	text-decoration: none;
	color: var(--blue3);
}
/*contact page*/
#contact_box {
	width: 60%;
	min-width: 540px;
	margin: auto;
	margin-top: -60px;
	padding: 20px 5% 3vw 5%;
	background-color: var(--grey1);
	box-shadow: 10px 10px lightgrey;
}
#contact_box > h1 {
	text-align: center;
	margin-bottom: 10px;
}
#contact_box > p {
	margin-bottom: 10px;
}
#contact_box > form {
	font-family: 'Poppins', sans-serif;
	font-size:  11pt;
	font-weight: 400;
	text-align: left;
}
#contact_box > form > p {
	font-size: 10pt;
	color:  var(--red);
}
#email {
	margin-bottom: 10px;
	font-size: 11pt;
}
#subject {
	width: 100%;
	height: 200px;
	resize: vertical;
	font-size: 11pt;
}
#contact_submit {
	width: 120px;
	max-width: 100%;
	float: right;
	margin-right: 0px;
	padding-left: 0px;
	text-align: center;
}
#contact_box > form > #mail_send {
	float: right;
	margin-right: 10px;
	text-align: right;
	color: var(--blue3);
}
/* Small devices (smartphones/tablets, up to 1000px) */
@media only screen and (max-width: 1000px) {
	/*Nav bar*/
	nav > * {
		display: none;
	}
	nav {
		height: 6vh;
	}
	.nav_img {
		height: 9vh;
		width: auto;
	}
	.nav_img_a {
		display: block;
		margin:  auto;
		width: 13vh;
		height: auto;
		text-align: center;
	}
	#nav_menu_icon {
		display: block;
		height: 4.5vh;
		width: auto;
		margin-left: 1vh;
		float: left;
		margin-top:  0.75vh;
		overflow: hidden;
	}
	#nav_menu_icon > div {
		height: 1vh;
		width: 5vh;
		border-radius: 0.5vh;
		background-color: var(--blue3);
		margin-bottom: 0.75vh;
	}
	/*slider*/
	#slider {
		margin-top:  6vh;
	}
	/*homepage info boxes*/
	.info {
		margin-top: 5vw;
		width: 90%;
	}
	.homepage_info_box {
		width: calc(100% - 10px);
		margin: calc(5vw + 10px) 0px 0px 0px;
		padding-bottom: 15px;
	}
	#homepage_info_left {
		margin-top: 0px;
	}
	.homepage_info_h1 {
		font-size: 30pt;
		height: 50px;
		margin-top: 5px;
	}
	.homepage_info_p {
		width: 90%;
		height: auto;
	}
	.homepage_info_imgbox {
		margin-top:  10px;
	}
	.homepage_info_img {
		display: block;
	}
	/*homepage text*/
	#homepage_text {
		width: calc(90% - 10px);
		height: auto;
		margin-left: 5%;
		margin-top: 30px;
	}
	.homepage_text_h1 {
		height: 50px;
		font-size: 30pt;
	}
	/*footer*/
	footer {
		margin-top: calc(5vw + 10px);
	}
	#footer_logo {
		display: none;
	}
	#footer_socials {
		width: 30%;
	}
	#footer_links {
		width: 50%;
	}
	.footer_div {
		margin-left: 10%;
	}
	/*fullscreen menu*/
	@keyframes menushow {
		from {left: -100%; top: -100vh;}
		to {left: 0px; top: 0px;}
	}
	@keyframes menuhide {
		from {left: 0px; top: 0px;}
		to {left: -100%; top: -100vh;}
	}
	#nav_fullscreen {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: fixed;
		z-index: 200;
		top: 0px;
		left: 0px;
		background-color: var(--grey2);
		display: none;
		text-align: center;
		border-bottom: 1px solid grey;
  	box-shadow: 0px 3px 5px grey;
		animation-name: menushow;
  	animation-duration: 0.3s;
  	animation-timing-function: linear;
	}
	#nav_fullscreen_menu {
		width: 100%;
		padding-left: 10%;
		padding-top: 3vh;
	}
	#nav_full_img_container {
		display: block;
		height: auto;
		width: 13vh;
		margin: auto;
		text-align: center;
	}
	.nav_full_img {
		height: 9vh;
		margin:  auto;
	}
	#nav_fullscreen_menu > a, #nav_fullscreen_menu > div > a {
		width: auto;
		height: auto;
		text-decoration: none;
		background-color: transparent;
		color:  var(--blue3);
	}
	#nav_fullscreen_menu > a > p, #nav_fullscreen_menu > div > a > p {
		width: auto;
		height: auto;
		padding-top: 15px;
		font-family: Verdana;
		font-size: 16pt;
		font-weight: 600;
		background-color: transparent;
	}
	.nav_full_dropdown {
		text-decoration: none;
	}
	.nav_full_dropdown > p{
		padding-top: 10px;
		font-family: Verdana;
		font-size: 14pt;
		font-weight: 600;
		background-color: transparent;
		color: var(--blue3);
	}
	/*#nav_fullscreen_menu > a:hover {
		border-left: 5px solid grey;
		transition: 0.5s ease;
	}*/
	#nav_full_dropdown1, #nav_full_dropdown2 {
		display: none;
		padding-left: 10%;
	}
	.nav_full_button1:hover #nav_full_dropdown1 {
		display:  block;
	}
	.nav_full_button2:hover #nav_full_dropdown2 {
		display:  block;
	}
	.multi_foto_bottom {
		width: 81vw;
		height: 62vw;
	}
	.multi_foto_bottom_small {
		height: 18vw;
		object-fit: cover;
	}
	.multi_foto_bottom_mainbox {
		height: 44vw;
	}
	.multi_foto_bottom_smallbox {
		height: 18vw;
	}
	#multi_foto_bottom_p {
		height: 18vw;
		width: calc(81vw / 3);
		font-size: 12.5vw;
		line-height: 18vw;
	}
	#ship_info {
		margin-top: 5vw;
		padding-top: 4.5vw;
	}
	#ship_info > h2, #ship_info > p {
		float: left;
		width: 90%;
	}
	#multi_foto1 {
		margin-top: 0px;
	}
	/*foto viewer*/
	.foto_arrow_box {
		height: 40px;
		top: calc(50vh - 20px);
		padding-top: 7.5px;
	}
	#foto_arrow_left {
		padding-left: 5px;
		padding-right: 7.5px;
		border-radius: 0px 4px 4px 0px;
	}
	#foto_arrow_right {
		padding-left: 7.5px;
		padding-right: 5px;
		border-radius: 4px 0px 0px 4px;
	}
	.foto_arrow_img {
		height: 25px;
	}
	.foto_box {
		width: calc(90% - 10px);
		margin-left: 5%;
		margin-top: calc(9vh + 5vw);
		padding-bottom: 0px;
	}
	.foto_h1 {
		margin-bottom: 0px;
	}
	.foto_wrap4 {
		height: auto;
	}
	.foto_imgbox {
		width: 80%;
		height: 49vw;
		margin-left: 10%;
		margin-bottom: 9vw;
	}
	.foto_imgbox_img {
		height: 49vw;
	}
	#contact_box {
		width: calc(90% - 10px);
		min-width: 0px;
		margin-bottom: 4.5vw;
	}
	#contact_box > h1 {
		hyphens: manual;
	}
}