/* GLOBAL */

a.big-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}

.container-fluid {
	max-width: calc(1320px + 8em);
	padding: 0 4em;
}

@media screen and (max-width:960px){
	.container-fluid {
		max-width: calc(1320px + 4em);
		padding: 0 2em;
	}
}

@media screen and (max-width:640px){
	.container-fluid {
		max-width: calc(1320px + 3em);
		padding: 0 1.5em;
	}
}

.standard-margin{
	margin:2em 0;
}

.standard-padding{
	padding:2em 0;
}

ul.styled {
	list-style: none;
	padding-left: 1rem;
	margin: 1em 0;
}

ul.styled li {
	margin: 10px 0;
	line-height: 1.375rem;
	font-weight: 500;
	font-size: 1rem;
	padding-left: 1.25rem;
	position: relative;
}

ul.styled li:before {
	content: '\f054';
	position: absolute;
	top: 0;
	left: 0;
	font-family: 'Font Awesome 5 Pro';
	font-weight: 400;
	font-size: 0.75em;
	color: var(--second-color);
}

/* FLICKETY */
.flickity-button:focus,
.flickity-button:focus-visible{
	box-shadow:none;
	outline:none;
}

/* FLICKITY NAV SIDES */
.flickety-nav-sides .flickity-prev-next-button {
	top: 50%;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	align-items: center;
	justify-content: center;
	display: flex;
	color: var(--main-color);
	transform: translateY(-50%);
}

.flickety-nav-sides .flickity-prev-next-button .flickity-button-icon {
	position: relative;
	padding: 0;
	width: 20px;
	height: 20px;
	left: initial;
	top: initial;
}

@media screen and (max-width:640px){
	.flickety-nav-sides .flickity-prev-next-button {
		width:36px;
		height:36px;
	}
}

/* FLICKITY NAV BOTTOM */
.flickety-nav-bottom .flickity-button{
	background:var(--second-color);
	transition:all 0.3s;
}

.flickety-nav-bottom .flickity-button:hover{
	background:var(--main-color);
}

.flickety-nav-bottom .flickity-prev-next-button{
	display:flex;
	align-items:center;
	justify-content:center;
	width:48px;
	height:36px;
}

.flickety-nav-bottom .flickity-prev-next-button .flickity-button-icon{
	fill:#fff;
	position: static;
	left: initial;
	top: initial;
	width: 16px;
	height: 16px;
}

.flickety-nav-bottom .flickity-prev-next-button.previous {
	left: 50%;
	transform: translate(calc(-100%), calc(100% + 10px));
	bottom: 0;
	top: initial;
	border-radius:5px 0 0 5px;
}
.flickety-nav-bottom .flickity-prev-next-button.next{
	left: initial;
	right:50%;
	transform: translate(calc(100% + 1px), calc(100% + 10px));
	bottom: 0;
	top:initial;
	border-radius:0 5px 5px 0;
}

/* VESSEL LIST */

section.vessel-list {
	position: relative;
	width: 100%;
}

.vessel-page-list-pages {
	display: flex;
	flex-wrap: wrap;
	gap: 1%;
	align-items: stretch;
	transition: all 0.3s;
}



.vessel-page-list-pages .vessel {
	width: 32.666%;
	position: relative;
	margin: 0.5% 0;
	transition: all 0.3s;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.vessel-page-list-pages .vessel-inner {
	background: #fff;
	overflow: hidden;
	height: 100%;
	clip-path: var(--clip-20px-both);
	position:relative;
}

.vessel-page-list-pages .vessel .image{
	padding-bottom:66%;
	background-size:cover;
	background-position:center;
}

.vessel-page-list-pages .vessel .info {
	padding: 20px;
}

.vessel-page-list-pages .vessel .info h4{
	margin:0;
}

.vessel-page-list-pages .vessel .info p{
	line-height:1.25em;
	margin-top:0.25em;
}

.vessel-page-list-pages .vessel .info p.vessel-type{
	font-weight:600;
	margin-bottom:0;
}

.vessel-page-list-pages .vessel a.big-link {
	background: rgba(1, 120, 225, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s;
	color: #fff;
	backdrop-filter: blur(12px);
	clip-path: var(--clip-20px-both);
	font-size: 1.25em;
	font-weight: 500;
}

.vessel-page-list-pages .vessel a.big-link .big-link-content {
	display: flex;
	flex-direction: column;
	text-align: center;
	gap: 5px;
}

.vessel-page-list-pages .vessel a.big-link i{
	font-size:1.5em;
}

.vessel-page-list-pages .vessel a.big-link:hover {
	opacity: 1;
}

.vessel-page-list-pages .admin-tools {
	position: absolute;
	top: 15px;
	left: 15px;
	display: flex;
	z-index: 50;
	gap: 10px;
}

.vessel-page-list-pages .admin-tool{
	background: #fff;
	cursor: pointer;
	padding: 5px 15px;
	border-radius: 5px;
	display: flex;
	gap: 5px;
	align-items: center;
	box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	font-weight: 600;
	transition: all 0.3s;
	width: fit-content;
}

.vessel-page-list-pages .admin-tool.delete-vessel {
	background: #b30000;
	color: #fff;
}

@media screen and (max-width:960px){
	.vessel-page-list-pages .vessel{
		width:49%;
	}
}

@media screen and (max-width:540px){
	.vessel-page-list-pages .vessel{
		width:99%;
		margin:0.5rem 0;
	}
}

/* Carousel Version */

.vessel-page-list-pages.carousel{
	display:block;
}

.vessel-page-list-pages.carousel .vessel {
	width: 405px;
	margin: 0 1rem;
	padding: 1rem 0;
	transition:none;
}

@media screen and (max-width:640px){
	.vessel-page-list-pages.carousel .vessel {
		width:310px;
		margin: 0 0.5rem;
	}
}


/* VESSEL FORM */

div.vessel-form label{
	font-weight:600;
}

div.vessel-form .group-heading{
	font-weight:600;
}

#vesselModal .modal-body {
	background: var(--body-color);
}

div.vessel-form .form-fields {
	box-shadow: 0 0 2px rgba(0,0,0,0.2);
	padding: 30px;
	background: rgba(255,255,255,0.85);
	border-radius: 15px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

div.image-picker .image-folder-wrapper {
	/* background: var(--body-color-lighter); */
	/* padding: 10px; */
	/* border-bottom: 1px solid #ddd; */
	margin-bottom: 10px;
	border-radius: 12px;
	overflow: hidden;
	/* box-shadow: var(--inset-shadow); */
}

div.image-picker .folder-name {
	padding: 9px 24px;
	display: flex;
	gap: 10px;
	align-items: center;
	cursor: pointer;
	box-shadow: 0 0 4px rgba(0,0,0,0.2);
	position: relative;
	background: #f2f4ee;
	font-weight: 500;
}

div.image-picker .folder-name:after {
	content: '\f067';
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'Font Awesome 5 Pro';
}

div.image-picker .folder-images {
	height: 0;
	overflow: hidden;
}


div.image-picker .folder-images .wrapper {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	padding: 16px;
	background: var(--body-color);
}

#sortable-images .image-thumbnail {
	cursor: grab;
}

div.image-picker .image-thumbnail {
	width: 80px;
	box-shadow: 0 0 0 2px #ccc;
	cursor: pointer;
	transition: all 0.3s;
	position: relative;
	height: 80px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

div.image-picker .image-thumbnail img {
	width: 100%;
	height: auto;
	display: block;
}

/* INDIVIDUAL VESSEL VIEW */

section.vessel-header {
	margin-top: 30px;
}

ul.hh-tabs {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 2px;
}

button.hh-nav-link {
	background: #fafafa;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.3s ease;
	border-bottom: 2px solid transparent;
	color: var(--main-color);
	border-radius: 0;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

button.hh-nav-link.active {
	background: #fff;
	color: var(--second-color);
}

section.vessel-content {
	margin: 30px 0;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.tab-content {
	background: #fff;
	/* border-radius: 0 8px 8px 8px; */
	overflow: hidden;
	clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 0, 100% 20px , 100% 100%, 0 100%);
}

.tab-content #downloads,
.tab-content #specs,
.tab-content #gallery {
	padding: 2em;
}

@media screen and (max-width:960px){
	.tab-content #downloads,
	.tab-content #specs,
	.tab-content #gallery {
		padding: 1em;
	}
}

@media screen and (max-width:580px){
	
	.tab-content{
		clip-path:none;
	}
	
	ul.hh-tabs{
		flex-direction:column;
		gap:0;
	}
	
	button.hh-nav-link{
		width:100%;
	}
	
	li.hh-nav-item:not(:first-of-type) button.hh-nav-link {
		clip-path: none;
	}

}

/* Introduction */

.tab-content .info-bar {
	color: var(--main-color);
}

.tab-content .info-bar ul {
	list-style: none;
	display: flex;
	gap: 30px;
	padding: 0;
	margin: 0;
	font-weight: 500;
}

.tab-content .info-bar ul li {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.tab-content .info-bar ul li span.title {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.75em;
	color: #999;
	letter-spacing: 0.05em;
}

.tab-content .info-bar ul li span.icon {
	display: flex;
	gap: 10px;
	align-items: center;
	font-weight: 600;
	text-transform: uppercase;
}

.description-row{
	display:flex;
	gap:5%;
}

.description-row .description{
	width:55%;
	padding:2em;
}
.description-row .map {
	width: 40%;
	position: relative;
	overflow: hidden;
	transition: opacity 1s;
	clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 0, 100% 20px , 100% 100%, 0 100%);
}

.description-row .map iframe {
	position: absolute;
	top: 0;
	left: 50%;
	width: 2000px;
	height: calc(100% + 400px);
	transform: translate(-50%, -200px);
}

/* GALLERY */

div.image-gallery {
	display: flex;
	flex-wrap: wrap;
}

div.image-gallery .thumbnail {
	width: 18%;
	margin:1%;
	box-shadow: 0 0 4px rgba(0,0,0,0.25);
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

div.image-gallery .thumbnail.pdf {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #c80000;
	color: #fff;
	padding: 15px;
	min-width: 240px;
}

div.image-gallery .thumbnail .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2em;
}

div.image-gallery .thumbnail.pdf .icon:before {
	content: '\f1c1';
	font-family: 'Font Awesome 5 Pro';
	font-weight: 300;
	font-size: 50px;
}

div.image-gallery .thumbnail .info {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 12px;
	padding: 0 10px;
	width: 100%;
	word-wrap: break-word;
}

@media screen and (max-width:640px){
	div.image-gallery .thumbnail{
		width:31.333%;
	}
}

/* SPECS */
.spec-group {
	/* border: 1px solid #ccc; */
	padding: 1rem;
	margin-bottom: 1rem;
	border-radius: 16px;
	background: #fdfdfd;
	box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
  
.spec-grid {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 0.5rem 1rem;
	margin-bottom: 2rem;
	max-width: 720px;
}

.spec-item {
	display: grid;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	grid-template-columns: 280px 1fr 40px;
}

.spec-name {
  font-weight: 600;
}
.spec-value {
  text-align: left;
}

@media screen and (max-width:960px){
	.description-row{
		flex-direction:column;
	}
	
	.description-row .description {
		width: 100%;
	}
	
	.description-row .map{
		display:none;
	}
}

/* SIMPLE LIST */

.simple-list-item{
	display:grid;
	grid-template-columns:1fr 40px;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
	
}