/*Lobster*/
@font-face {
  font-family: 'Lobster Bold';
  src: url('fonts/Lobster/LobsterTwo-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Lobster BoldItalic';
  src: url('fonts/Lobster/LobsterTwo-BoldItalic.otf') format('opentype');
}
@font-face {
  font-family: 'Lobster';
  src: url('fonts/Lobster/LobsterTwo-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Lobster Italic';
  src: url('fonts/Lobster/LobsterTwo-Italic.otf') format('opentype');
}


body {
	margin: 0;
	padding: 0;
	font-family:sans-serif, Arial, Helvetica;
	font-size: 16px;
	background: url(images/williamFish-bg2.jpg);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
}
p {margin-bottom: 6px;}
h1,h2 {
	font-family: 'Lobster Italic';
}
h3,h4 {
	font-family: 'Lobster Italic';
}

/*UTILITIES*/
a {
	text-decoration: none;
	color: #fff;
}
a:hover,
a:active {color: #41B9B7;}
.Flexed {display: flex;}

button,
.gal-thumb,
section#contact .container > div {transition: all 0.3s ease 0s;}

.container {
	max-width: 1280px;
	margin: 0 auto;
}

#to-top {
	display: none;
  position: fixed;
  bottom: 12px;
  right: 12px;
  font-size: 32px;
	line-height: 32px;
	padding: 3px 12px 5px;
  background: rgba(255,255,255,.6);
  z-index: 20;
  border: 1px solid #fff;
  cursor: pointer;
}
#to-top span:before {
	content: "\1F819";
}
#to-top:hover {
  background: rgba(0,0,0,.4);
}

/* HEADER | NAVIGATION*/
#lang-switcher {
	position: absolute;
	top: 8px;
	right: 8px;
}
#lang-switcher a {
	padding: 3px 8px;
	font-size: 12px;
	border: 1px solid #fff;
	border-radius: 6px;
}
#lang-switcher a.active {
	color: #41B9B7;
	border: 1px solid #41B9B7;
	border-radius: 6px;
}
.ls-inner.Flexed {
	justify-content: flex-end;
	gap: 6px;
}
header {
	padding: 20px 0;
	border-bottom: 1px solid rgba(240,240,240,.4);
	background: rgba(0,0,0,.4);
}

nav.Flexed {justify-content: center;}
nav a,
footer a {
	font-size: 18px;
	display: block;
}
nav a.Flexed,
footer a.Flexed {
	align-items: center;
	gap: 6px;
}
nav img,
footer img {max-width: 48px;}

/*FOOTER*/
footer h3 {margin: 0;}
footer {background: #f9f9f9; padding: 8px 0;}
footer {
	font-size: 20px;
	font-family: 'Lobster Italic';
	color: #122F87;
}
footer a {font-family:sans-serif, Arial, Helvetica; color: #122F87;}
footer .Flexed {
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	gap: 24px;
	padding: 12px 0;
}

/*OVERVIEW SECTION*/
#overview .Flexed {
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#overview .container {
	max-width: 800px;
	min-height: 400px;
	padding: 68px 0 120px;
}
.highlight {
	font-size: 22px;
  color: #fff;
  max-width: 800px;
	text-shadow: rgba(46, 52, 64, .5) .1rem .2rem .1rem;
}
#site-title {
	font-size: 32px;
	margin: 24px 0;
	letter-spacing: .02em;
	color: #ffffff;
	text-shadow: rgba(46, 52, 64, .5) .1rem .2rem .1rem;
}

#whatsAppImage {
	max-height: 32px;
	max-width: 32px;
}

#whatsapp {
	justify-content: left;
        padding: 0 0px;
}



/*GALLERY SECTION*/
section#gallery {
	background: rgba(0,0,0,.4);
	padding: 10px 0px;
}
#pgallery.Flexed {
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 20px;
	gap: 20px;
}
.galpic.Flexed {
	align-items: flex-start;
}
.galpic {
	flex-basis: calc(20% - 20px);
	cursor: pointer;
}
.galpic img {
	width: 100%;
}
.gal-thumb:hover {filter: brightness(80%);}

/*GALLERY MODAL*/
.modal {
  display: none;
  position: fixed;
  z-index: 50;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
	transition: all 0.3s ease 0s;
}
.modal-content {
  max-width: 94%;
  max-height: 94%;
  text-align: center;
}
#modalImg {
  max-width: 100%;
  max-height: 80vh;
  border: 6px solid #f9f9f9;
}
#modalImg,
#modalImg img {border-radius: 6px;}

.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #FF7591;
  font-size: 40px;
  cursor: pointer;
}
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.3);
  color: #FF7591;
  border: none;
	border-radius: 50%;
  font-size: 28px;
  padding: 7px 20px;
  cursor: pointer;
}
.nav-btn:hover { background: rgba(255, 117, 145,0.5); color: #f9f9f9;}
.prev-btn { left: 20px; }
.next-btn { right: 20px; }

@media screen and (max-width:991px) {
	#overview .Flexed,
	#pgallery.Flexed {padding: 0 20px;}
}
@media screen and (min-width:769px) and (max-width:991px) {
	#site-title {font-size: 78px;}
}
@media screen and (max-width:768px) {
	body {background-position: top -68px center;}
}
@media screen and (min-width:481px) and (max-width:768px) {
	#site-title {font-size: 68px;}
	.highlight {font-size: 18px;}
	.galpic {flex-basis: calc(33.333% - 20px);}
	#to-top {padding: 0px 14px 12px; line-height: 28px;}
	#to-top span:before {content: "\2191";}
}
@media screen and (max-width:480px) {
	#site-title {
		text-align: center;
		font-size: 68px;
		line-height: 70px;
		margin-bottom: 48px;
	}
	#overview .Flexed {display: block;}
	.highlight {font-size: 16px;}
	.galpic {flex-basis: calc(50% - 20px);}
	#modalImg {border: 4px solid #f9f9f9;}
	footer .Flexed {
		display: block;
		padding: 12px 0;
		text-align: center;
	}
	#to-top {padding: 8px 14px 12px; line-height: 28px;}
	#to-top span:before {content: "\2191";}
}