/*
Theme Name: Barco
Author: Neiko srl
Author URI: http://www.neiko.it/
Description: Barco - 2024
Version: 1.0
License: GNU General Public License v2 or later
*/

/*  
	
	FONTS UTILIZZATI : Frank Rhul Libre, Ortica Linear
	
	COLORI UTILIZZATI : #F6E8CF, #CDA12E, #100839, #000000, #FFFFFF
	
*/

/* GENERAL */

html,body {
	margin:0;
	padding:0;
	font-family: var(--font-family) !important;
	font-size: 18px !important;
	font-weight: 400;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	background-color:#FFFFFF;
	color:#000;
}

/* SCROLBLBAR */

/* width */
::-webkit-scrollbar {
  width: 10px;

}

/* Track */
::-webkit-scrollbar-track {
  background: var(--white);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--gold);
  padding: 3px;
  transition: var(--transition);
  border-radius: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--dark-gold);
}

/* COOKIE E PRIVACY POLICY BANNER */

#nk-cookie-banner-banner p {
	font-size: var(--18);
	line-height: 120%;
	font-family: "Arial", sans-serif;
	margin-bottom: 10px !important;
}

#nk-cookie-page-page p {
	font-size: var(--18);
	line-height: 120%;
	font-family: "Arial", sans-serif;
	margin-bottom: 10px !important;
}


/* LENIS */

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

@font-face {
	font-family: 'Ortica';
	src: url('fonts/OrticaLinear-Light.woff2') format('woff2'),
		 url('fonts/OrticaLinear-Light.woff') format('woff');
	font-weight: 300; /* Light */
	font-style: normal;
}

@font-face {
	font-family: 'Ortica';
	src: url('fonts/OrticaLinear-Regular.woff2') format('woff2'),
		 url('fonts/OrticaLinear-Regular.woff') format('woff');
	font-weight: 400; /* Regular */
	font-style: normal;
}

@font-face {
	font-family: 'Ortica';
	src: url('fonts/OrticaLinear-Bold.woff2') format('woff2'),
		 url('fonts/OrticaLinear-Bold.woff') format('woff');
	font-weight: 700; /* Bold */
	font-style: normal;
}


:root {
	--black: #000000;
	--blue: #100839;
	--light-gold: #F6E8CF;
	--white: #FAFAFA;
	--dark-white: #FFFFFF;
	--gold: #CDA12E;
	--dark-gold: #B38B27;
	--transition: all 0.3s ease-out;
	/* --font-family: "Frank Ruhl Libre", serif; */
	--font-family: 'Ortica', serif;
	--16: clamp(0.7rem, 0.83vw, 0.889rem);
	--18: clamp(0.889rem, 0.9375vw, 1rem);
	--22: clamp(0.93rem, 1.145vw, 1.222rem);
	--28: clamp(1.222rem, 1.4583vw, 1.556rem);
	--32: clamp(1.333rem, 1.666vw, 1.778rem);
	--50: clamp(1.556rem, 2.60vw, 2.778rem);
	--75: clamp(1.778rem, 3.90vw, 4.167rem);
	--90: clamp(2.5rem, 4.6875vw, 5rem);
	--175: clamp(5.556rem, 9.114vw, 9.722rem);
	--300: clamp(8.333rem, 15.625vw, 16.667rem);
}

.scroll-container {
	position: absolute;
	bottom: 0;
	right: 100px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform-origin: bottom left;
}

.scroll-container p {
	text-transform: uppercase;
	transform: rotate(-90deg);
	font-family: var(--font-family);
	font-weight: 400;
	color: var(--white);
}

.scroll-wrapper {
	overflow: hidden;
	margin-top: 50px;
}

.scroll {
	width: 1px;
	height: 100px;
	transform: translateY(-100%);
	background-color: var(--white);
	animation: slide 2.5s  ease-in-out infinite;
	}
	
	@keyframes slide {
		0% {
			transform: translateY(-100%);
		}
		50% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(-100%);
		}
	}
	
@media (max-width: 575.99px) {
		.scroll-container {
			position: absolute;
			bottom: 50%;
			transform: translateY(50%);
			right: 10px;
			z-index: 10;
			display: flex;
			flex-direction: column;
			align-items: center;
			transform-origin: bottom left;
		}
	}


@media (min-width: 1600px){ 
	html,body {
		font-size: 18px !important;
	}
}


img,a img {
	border: none !important;
}

::-moz-selection {
	background:none repeat scroll 0 0 #FFF;
	color:#000;
}

* {
	outline: 0 !important;
}

b,strong,.bold { 
	font-weight: 700;
}

a {
	width: fit-content;
}

a,a:visited { 
	outline-style:none;
	text-decoration:none;
}

a:hover { 
	cursor:pointer !important;
	text-decoration: none;
}


.container-fluid {
  padding-left: 100px !important;
  padding-right: 100px !important;
}

/* For screens smaller than 1600px */
@media (max-width: 1599px) {
  .container-fluid {
	padding-left: 50px !important;
	padding-right: 50px !important;
  }
}

/* For screens smaller than 1200px */
@media (max-width: 1199px) {
  .container-fluid {
	padding-left: 50px !important;
	padding-right: 50px !important;
  }
}

/* For screens smaller than 576px */
@media (max-width: 575px) {
  .container-fluid {
	padding-left: 20px !important;
	padding-right: 20px !important;
  }
}


/* TYPO */

.big{
	font-size: 1.1rem;  
}
.small{
	font-size: 0.9rem;
}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{ 

}

h1,.h1 {
	
}

h2,.h2 {
	font-family: var(--font-family);
	font-size: var(--75);
	font-weight: 400;
}

h3,.h3 {
	font-family: var(--font-family);
	font-size: var(--90);
	font-weight: 400;
}

h4,.h4 {
	font-family: var(--font-family);
	font-size: var(--28);
	font-weight: 400;
}

h5,.h5 {
	font-family: var(--font-family);
	font-size: var(--32);
	font-weight: 400;
	margin: 0px !important;
}

h6,.h6 {
	font-family: var(--font-family);
	font-size: var(--18);
	color: var(--white);
	text-transform: uppercase;
	font-weight: 400;
}

.hero-title {
	font-family: var(--font-family);
	font-size: clamp(2.5rem, 4.6875vw, 5rem);
	color: var(--white);
}

@media (max-width: 767.99px) {
	.hero-title {
		width: 80%;
	}
}

span,.span {
	font-family: var(--font-family);
	font-size: var(--18);
	font-weight: 300;
}

p,.p {
	font-family: var(--font-family);
	font-size: var(--18);
	font-weight: 300;
	margin: 0 !important;
}

.text-services {
	font-family: var(--font-family);
	font-size: var(--22);
	font-weight: 300;
	color: var(--blue);
	margin: 0 !important;
	text-transform: uppercase;
}

/* BUTTONS */

.primary-btn {
	padding: 8px 15px;
	background-color: var(--white);
	border: solid 1px var(--gold);
	border-radius: 50px;
	color: var(--blue);
	font-size: var(--16);
	text-transform: uppercase;
	transition: var(--transition);
	height: fit-content;
}

.primary-btn:hover {
	background-color: var(--gold);
	color: var(--white);
}

.secondary-btn {
	padding: 8px 15px;
	background-color: var(--gold);
	border: solid 1px var(--gold);
	border-radius: 50px;
	color: var(--white);
	font-size: var(--16);
	text-transform: uppercase;
	transition: var(--transition);
	height: fit-content;
}

.secondary-btn:hover {
	background-color: var(--dark-gold);
	border: solid 1px var(--dark-gold);
}

@media (max-width: 991.99px) {
	.primary-btn {
		padding: 6px 15px;
		background-color: var(--white);
		border: solid 1px var(--gold);
		border-radius: 50px;
		color: var(--blue);
		font-size: var(--16);
		text-transform: uppercase;
		transition: var(--transition);
		height: fit-content;
	}
	
	.primary-btn:hover {
		background-color: var(--gold);
		color: var(--white);
	}
	
	.secondary-btn {
		padding: 6px 15px;
		background-color: var(--gold);
		border: solid 1px var(--gold);
		border-radius: 50px;
		color: var(--white);
		font-size: var(--16);
		text-transform: uppercase;
		transition: var(--transition);
		height: fit-content;
	}
	
	.secondary-btn:hover {
		background-color: var(--dark-gold);
		border: solid 1px var(--dark-gold);
	}
}

/* COLOR */

.light-gold {
	background-color: var(--light-gold);
}

.dark-white {
	background-color: var(--dark-white);
}

.blue {
	background-color: var(--blue);
}

.text-blue {
	color: var(--blue);
}

.text-white {
	color: var(--white);
}

.text-light-gold {
	color: var(--light-gold);
}


/* LOADER */

#loading {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 9999;
	background-color: var(--white);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.6s ease-in-out; /* Transition for moving up */
}

#loading img {
	opacity: 0;
	width: var(--300);
	height: auto;
	transition: opacity 0.6s ease-in-out; /* Transition for fade-in */
}

/* Adding the fade-in class */
#loading img.fadein {
	opacity: 1;
}

/* HEADER */

#header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 160px;
	z-index: 1000;
	padding: 10px 0px;
	background-color: transparent;
	transition: var(--transition);
	align-items: center;
	display: flex;
	position: fixed;
}

.header-scrolled {
	background-color: var(--white) !important;
	padding: 5px 0px !important;
	border-bottom: 1px solid var(--gold);
	height: 130px !important;
}

.logo-full {
	position: absolute;
	top: 0;
	width: clamp(3.889rem, 7.8125vw, 8.333rem);
	height: auto;
	transform: translateY(0);
	transition: var(--transition);
	padding: 0;
}

.header-scrolled .logo-full {
	transform: translateY(-200%);
	transition: var(--transition);
}

.header-scrolled .logo-small {
	transform: translateY(0);
	transition: var(--transition);
}

.logo-small {
	width: clamp(3.889rem, 7.8125vw, 8.333rem);
	height: auto;
	transform: translateY(-200%);
	transition:var(--transition);
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: var(--transition);
}

#navigazione {
	position: fixed;
	top: -100%;
	left: 0;
	width: fit-content;
	background: var(--blue);
	padding: 200px 100px;
	display: none;
	z-index: 1000;
	transition: var(--transition);
}

.navbar-nav {
	display: flex;
	flex-direction: column;
}

.navbar-brand {
	display: inline-block;
	padding: 0 !important;
	margin: 0 !important;
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.nav-link {
	overflow: hidden;
	position: relative;
}

.nav-link::before {
	content: '';
	width: 100%;
	height: 1px;
	background-color: var(--gold);
	position: absolute;
	left: 0;
	bottom: 5px;
	transform: translateX(-100%);
	transition: var(--transition); /* Corrected transition property */
}

.nav-link:hover::before {
	transform: translateX(0%);
}

.nav-link span {
	font-family: var(--font-family);
	font-size: 28px;
	color: var(--gold);
	text-transform: capitalize;
	text-align: left;
}

.navbar-toggler {
	display: block;
	background: none;
	border: none;
	cursor: pointer;
	position: relative;
	z-index: 1001;
	transition: all 0.3s ease-in-out;
}

.header-scrolled .navbar-toggler-icon,
.header-scrolled .navbar-toggler-icon::before,
.header-scrolled .navbar-toggler-icon::after {
	background-color: var(--black);
}

.navbar-toggler-icon {
	width: 30px;
	height: 3px;
	background-color: var(--white);
	display: block;
	margin: 0px auto;
	transition: var(--transition);
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
	content: '';
	width: 30px;
	height: 3px;
	background-color: var(--white);
	display: block;
	position: absolute;
	transition: var(--transition);
}

.navbar-toggler-icon::before {
	top: -5px;
}

.navbar-toggler-icon::after {
	bottom: -5px;
}

.navbar-toggler.open .navbar-toggler-icon {
	background-color: transparent;
}

.navbar-toggler.open .navbar-toggler-icon::before {
	transform: rotate(45deg) translate(5px, 8px);
	background-color: var(--gold);
}

.navbar-toggler.open .navbar-toggler-icon::after {
	transform: rotate(-45deg) translate(5px, -8px);
	background-color: var(--gold);
}

.container-btn-header {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

@media (max-width: 991px) {
	
	#header {
		height: 100px;
	}
	
	.header-scrolled {
		height: 80px !important;
	}

	.navbar-nav {
		flex-direction: column;
	}

	/* Riordinare i tre bottoni in orizzontale accanto al menu */
	.container-btn-header {
		display: flex;
		flex-direction: row;
		gap: 7px;
		position: absolute;
		bottom: -310%;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.header-scrolled .container-btn-header {
		display: flex;
		flex-direction: row;
		gap: 7px;
		position: absolute;
		bottom: -250%;
		left: 50%;
		transform: translateX(-50%);
		transition: var(--transition);
		background-color: var(--white);
		padding: 15px 0;
		width: 100%;
		justify-content: center;
		border-bottom: 1px solid var(--gold);
	}

	.navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	
	#navigazione {
		padding: 250px 60px;
		width: 100%;
		height: 100vh;
	}

}

.btn-book {
	position: relative;
	background-color: var(--gold);
	color: var(--white);
	border: solid 1px var(--gold);
	font-size: var(--16);
	border-radius: 50px;
	padding: 6px 15px;
	text-transform: uppercase;
	transition: var(--transition);
	height: fit-content;
}

.btn-book:hover {
	background-color: var(--dark-gold);
	color: var(--white);
}

.header-scrolled .btn-book {
	background-color: var(--gold);
	color: var(--white);
	transition: var(--transition);
}

.header-scrolled .btn-book:hover {
	background-color: var(--dark-gold);
	color: var(--white);
}

.header-scrolled .navbar-brand {
	transform: translate(-50%, 0);
}

.menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
	z-index: 999;
	transition: var(--transition);
	opacity: 0;
}

.menu-overlay.show {
	display: block;
	opacity: 1;
}

@media (max-width: 991.99px) {
	.btn-book p {
		font-size: var(--16);
		margin: 0;
	}
}


/* whatsapp */
.whatsapp {
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 20px;
  border: solid 1px var(--gold);
  background-color: var(--white);
  border-radius: 50px;
  z-index: 1000;
  align-items: center;
  gap: 15px;
  transition: var(--transition); /* Transition for the container */
}

.whatsapp p {
	position: absolute;
	top: 50%;
	right: 115%;
	transform: translateY(-50%);
	background-color: var(--white);
	color: var(--blue);
	text-transform: uppercase;
	padding: 20px 30px;
	border: 1px solid var(--gold);
	border-radius: 50px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
}

.whatsapp:hover p,
.whatsapp.show p {
  opacity: 1;
  visibility: visible;
}

.whatsapp svg {
  width: auto;
  height: var(--50);
  z-index: 1001;
  position: relative;
}

@media (max-width: 767.99px) {
	.whatsapp p {
		display: none;
	}
}

/* SELETTORE LINGUA WPML */

.wpml-ls-legacy-list-horizontal {
	padding: 0 !important;
	border: none !important;
	margin-top: 100px;
	display: flex;
	flex-direction: row;
}

.wpml-ls-legacy-list-horizontal ul {
	display: flex;
	gap: 30px;
}

.wpml-ls-link {
	color: var(--light-gold);
	text-transform: uppercase;
	padding: 0 !important;
	transition: var(--transition);
}

.wpml-ls-link span {
	font-size: var(--32) !important;
}

.wpml-ls-link:hover {
	color: var(--gold);
}


/* FOOTER */

#footer {
	border-top: 1px solid var(--gold);
}

.container-footer-contact {
	gap: 20px;	
}

.container-footer-contact a {
	color: var(--black) !important;
	font-size: var(--18);
	transition: var(--transition);
}

@media (max-width: 575.99px) {
	.container-footer-contact {
		gap: 10px;	
	}
}


.container-footer-contact a:hover {
	color: var(--gold) !important;
}

.container-footer-social {
	display: flex;
	flex-direction: row;
	gap: 15px;
}

.container-footer-social a {
	width: var(--28);
	height: auto;
	transform: translateY(0);
	transition: var(--transition);
}

.container-footer-social a:hover {
	transform: translateY(-5px);
}

.line-gold {
	background-color: var(--gold);
	height: 1px;
	width: 100%;
}

.container-footer-privacy {
	text-align: right;
}

.container-footer-privacy a, .container-footer-privacy p {
	color: var(--black) !important;
	font-size: var(--18);
	transition: var(--transition);
	font-weight: 300;
}

.container-footer-privacy a:hover {
	color: var(--gold) !important;
}

/* PAGINE */

/* HOMEPAGE */

.container-hero {
	width: 100%;
	height: 100vh;
	position: relative;
}

.img-hero {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.wrapper-hero {
	position: absolute;
	bottom: 100px;
	left: 100px;
	z-index: 2;
	width: 80%;
}

@media (max-width: 991.99px) {
	
	.container-hero {
		width: 100%;
		height: 100svh;
		position: relative;
	}
	
	.wrapper-hero {
		bottom: 50px;
		left: 50px;
	}
}

@media (max-width: 575.99px) {
	.wrapper-hero {
		bottom: 20px;
		left: 20px;
	}
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--black);
	opacity: .5;
	z-index: 1;
}

.dark-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--black);
	opacity: .6;
	z-index: 1;
}

.upper {
	position: relative;
	z-index: 1;
}

.barco-text {
	text-transform: uppercase;
	font-family: var(--font-family-title);
	color: var(--light-gold);
	font-weight: 400;
	font-size: var(--175);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
}

.line {
	width: 100%;
	height: 1px;
	background-color: var(--gold);
}

.slick-hero .slick-slide  {
	margin: 0 !important; /* Gap di 30px tra le immagini */
}

.slick-hero {
	display: flex;
	align-items: center;
}

.slick-hero .slick-list {
	padding: 0 !important;
}

.slick-hero .slick-slide img {
	display: block;
	height: 100vh;
	width: 100%;
	object-fit: cover;
	object-position: bottom;
}

@media (max-width: 767.99px) {
	
	.slick-hero .slick-slide img {
		height: 100svh;
	}
	
	.slick-itinerari .slick-slide img {
		display: block;
		height: 100svh;
		width: 100%;
		object-fit: cover;
	}
}


/* CHI SIAMO */

.container-label-services {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 30px;
}

@media (max-width: 767.99px) {
	.container-label-services {
		gap: 15px;
	}
}

.label-services {
	display: flex;
	flex-direction: row;
	gap: 10px;
	padding: 10px 20px;
	border: 1px solid var(--gold);
	border-radius: 50px;
}

.icon-services {
	width: clamp(1.222rem, 1.30vw, 1.389rem);
	height: auto;
}

.container-riunione {
	display: flex;
	flex-direction: row;
}

@media (max-width: 991.99px) {
	
	.container-riunione {
		display: flex;
		flex-direction: row !important;
		gap: 15px;
	}
	
	.container-riunione > .col-lg-4 {
		flex: 1 1 auto;
		margin: 0; /* Rimuovere eventuali margini */
		padding: 0; /* Rimuovere eventuali padding */
		display: flex;
		flex-direction: column;
	}
}

@media (max-width: 767.99px) {
	
	.container-riunione {
		display: flex;
		flex-direction: column !important;
		align-items: stretch; /* Allineare gli elementi figli a tutta la larghezza del contenitore */
		gap: 30px;
	}
	
	.container-riunione > .col-lg-4 {
		flex: 1 1 auto;
		margin: 0; /* Rimuovere eventuali margini */
		padding: 0; /* Rimuovere eventuali padding */
		display: flex;
		flex-direction: column;
	}
}

/* CAMERE */

.same-height {
	display: flex;
	flex-wrap: wrap;
}

.same-height > div {
	display: flex;
	flex: 1;
}

.same-height img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

@media (max-width: 575.99px) {
	.row.d-flex.same-height > div {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.slick-prev:before, .slick-next:before {
	font-family: 'slick';
	font-size: 40px !important;
	line-height: auto;
	opacity: .5;
	color: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.slick-next:before {
	content: '→';
}

.slick-next {
	font-size: 0;
	line-height: 0;
	position: absolute !important;
	top: 50% !important;
	right: 0 !important;
	display: block;
	width: 40px !important;
	height: 40px !important;
	padding: 0;
	-webkit-transform: translate(-50%, -50%) !important;
	-ms-transform: translate(-50%, -50%) !important;
	transform: translate(-50%, -50%) !important;
	z-index: 10 !important;
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: transparent;
}

.slick-prev {
	font-size: 0;
	line-height: 0;
	position: absolute !important;
	top: 50% !important;
	left: 0 !important;
	display: block;
	width: 40px !important;
	height: 40px !important;
	padding: 0;
	-webkit-transform: translate(50%, -50%) !important;
	-ms-transform: translate(50%, -50%) !important;
	transform: translate(50%, -50%) !important;
	z-index: 10 !important;
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: transparent;
}

.icon {
	width: 50px;
	height: auto;
}

/* OFFERTE SPECIALI */

.slick-slide {
	margin: 0 15px; /* Gap di 30px tra le immagini */
}

.slick-itinerari {
	display: flex;
	align-items: center;
}

.slick-itinerari .slick-slide img {
	display: block;
	height: 40vh;
	width: 100%;
	object-fit: cover;
}

@media (max-width: 767.99px) {
	.slick-itinerari .slick-slide img {
		display: block;
		height: 70vh;
		width: 100%;
		object-fit: cover;
	}
}

.title-single-event {
	font-size: var(--50);
}

/* CONTATTI */

.contact-title {
	font-family: var(--font-family);
	font-size: var(--50);
	font-weight: 400;
}

.contact-link {
	color: var(--black);
	transition: var(--transition);
}

.contact-link:hover {
	color: var(--gold);
}

.wrapper-trovarci {
	display: flex;
	position: absolute;
	bottom: 30px;
	left: 30px;
	z-index: 1;
}

@media (max-width: 575.99px) {
	.wrapper-trovarci {
		bottom: 15px;
		left: 15px;
	}
}

.bollone-svg {
	width: var(--90);
	height: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-20%, -50%);
}