/*** CSS by Luigi Astarita @ Astartup ***/
/* Copyright 2026 Luigi Astarita */

/*** Import fonts ***/
@import url('../fonts/ku/stylesheet.css');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* Variabili  */

:root {
	--c-base: #2A2A2A;
	--c-main: #4CA1AF;
	--c-bg: #F3F0EB;
}

body {
	font-family: "DM Sans", sans-serif;
	color: var(--c-base);
	background: #FFF;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'webfontregular';
	/* font-family: var(--f-headers); */
	font-weight: normal;
}

h1 i,
h2 i,
h3 i,
h4 i,
h5 i,
h6 i {
	/* font-family: 'new_yorkregular_italic'; */
	/* font-family: var(--f-headers); */
	font-weight: normal;
}

a {
	color: var(--c-base);
	text-decoration: none;
	transition: color .2s;
}

a:hover {
	color: var(--c-base);
}

p {
	/* margin-bottom: 0; */
}

/* Heade */

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 160px;
	z-index: 10;
	background: #051017;
	background: linear-gradient(180deg, rgba(5, 16, 23, 1) 0%, rgba(5, 16, 23, 0) 100%);
	animation: header-in 5s;
	animation-delay: 1s;
	animation-fill-mode: both;
	--logo-w: 90px;
	--logo2-w: 300px;
	backdrop-filter: blur(0px);
	transition: backdrop-filter .3s, background .3s, height .3s;
}

@media (max-width: 575.98px) {
	.header {
		--logo-w: 60px;
		--logo2-w: 220px;
	}
}

@keyframes header-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.header.stick {
	height: 70px;
	background: rgba(255, 255, 255, .8);
	backdrop-filter: blur(10px);
}

.header .navbar {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

/* .header .navbar .row {
	width: 100%;
	padding: 0;
	margin: 0;
} */

.header .navbar .coll {
	display: flex;
	align-content: center;
	padding: 0 1rem;
}

.header .navbar .coll:nth-of-type(1) {
	width: calc((100% - var(--logo2-w)) / 2);
}

.header .navbar .coll:nth-of-type(1) .navbar-collapse {
	justify-content: flex-start;
}

@media (max-width: 1199.98px) {
	.header .navbar .coll:nth-of-type(1) .navbar-collapse {
		position: absolute;
		left: .5rem;
		top: calc(50% + 2rem);
	}
}

.header .navbar .coll:nth-of-type(2) {
	justify-content: center;
	width: var(--logo2-w);
}

.header .navbar .coll:nth-of-type(3) {
	justify-content: flex-end;
	width: calc((100% - var(--logo2-w)) / 2);
}

.header .navbar .coll:nth-of-type(3) .navbar-collapse {
	justify-content: flex-end;
}

@media (max-width: 1199.98px) {
	.header .navbar .coll:nth-of-type(3) .navbar-collapse {
		position: absolute;
		right: .5rem;
		top: calc(50% + 2rem);
	}
}

.header .navbar .coll:nth-of-type(3) .navbar-collapse .nav-link {
	text-align: right;
}

.navbar-brand {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.navbar-brand img {
	width: 100%;
	max-width: var(--logo-w);
	margin: 0 0 .5rem;
	transition: width .3s, max-width .3s, margin .3s;
}

.header.stick .navbar-brand img {
	width: 0;
	max-width: 0;
	margin: 0;
	height: auto;
}

.navbar-brand svg {
	width: 100%;
	max-width: var(--logo2-w);
	height: auto;
	margin: 0;
}

.header.stick .navbar-brand svg * {
	fill: var(--c-base);
}

@media (max-width: 1199.98px) {
	.header .navbar-nav {
		background: rgba(0, 0, 0, .8);
		padding: .5rem 1.5rem;
	}
}

.header .navbar-nav .nav-link {
	color: rgba(255, 255, 255, .6);
	text-transform: uppercase;
	font-size: .9rem;
	transition: color .3s;
}

.header .navbar-nav .nav-link.active,
.header .navbar-nav .nav-link:hover {
	color: #FFF;
}

.header.stick .navbar-nav .nav-link {
	color: var(--c-base);
}

@media (max-width: 1199.98px) {
	.header.stick .navbar-nav .nav-link {
		color: #FFF;
	}
}

.header .navbar-toggler {
	/* margin: auto; */
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 1rem;
}

.header.stick .navbar-toggler svg * {
	fill: var(--c-base);
}

.header.stick .lng-toggler svg * {
	fill: transparent;
	stroke: var(--c-base);
}

/* Hero */

.hero {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	overflow: hidden;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .2);
}

.hero::after {
	position: absolute;
	width: 100%;
	height: 100%;
	content: "";
	z-index: 1;
	background: url(../images/positano-amalfi-coast.webp) center;
	background-size: cover;
	animation: hero-zoom 30s infinite;
	animation-direction: alternate;
}

@keyframes hero-zoom {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.2);
	}
}

.hero::before {
	position: absolute;
	width: 100%;
	height: 100%;
	content: "";
	animation: hero-in 3.5s;
	z-index: 3;
}

@keyframes hero-in {
	0% {
		border-top: 50vh solid #FFF;
		border-bottom: 50vh solid #FFF;
	}

	100% {
		border: 0 solid #FFF;
	}
}

.hero h1 {
	color: var(--c-main);
	text-align: center;
	font-size: clamp(2.5rem, 5vw, 6rem);
	line-height: 90%;
	position: relative;
	z-index: 2;
}

.hero h1 strong {
	color: #FFF;
	font-weight: normal;
	display: block;
	text-align: center;
	animation: h1-in 3s;
	animation-delay: 2s;
	animation-fill-mode: both;
}

@keyframes h1-in {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero h1 em {
	color: var(--c-main);
	font-weight: normal;
	display: block;
	text-align: center;
	font-style: normal;
	animation: h1-in 3s;
	animation-delay: 3s;
	animation-fill-mode: both;
}

.mouse-scroll {
	width: 20px;
	height: 40px;
	border-radius: 15px;
	border: 2px solid #FFF;
	margin-bottom: 2rem;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	position: relative;
	z-index: 2;
	animation: h1-in 3s;
	animation-delay: 5s;
	animation-fill-mode: both;
}

.mouse-scroll::before {
	width: 2px;
	height: 12px;
	border-radius: 1px;
	background: #FFF;
	content: "";
	animation: mouse-scroll 1.5s infinite;
	animation-timing-function: ease-in-out;
}

@keyframes mouse-scroll {
	0% {
		opacity: 1;
		margin-top: 18px;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		margin-top: 5px;
	}
}

/* Whatsapp */

.whatsapp {
	position: fixed;
	bottom: 1rem;
	left: 1rem;
	display: block;
	width: 67px;
	height: 67px;
	border-radius: 40px;
	background: #25D366;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: scale(.8);
	transition: transform .3s;
	animation: whatsapp-in 2s;
	animation-delay: 3s;
	animation-fill-mode: both;
}

@keyframes whatsapp-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.whatsapp:hover {
	transform: scale(1);
}

/* Highlight */

.highlight {
	background: var(--c-bg);
	padding: 5rem 0;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.highlight strong {
	font-family: 'webfontregular';
	font-size: clamp(2rem, 4vw, 2rem);
	font-weight: 400;
	width: 1100px;
	max-width: 94%;
	margin: 0 auto;
	line-height: 120%;
}

.highlight strong+div {
	margin-top: 1rem;
}

.highlight>p,
.highlight>div>p {
	font-size: .9rem;
	width: 1100px;
	max-width: 94%;
	margin: auto;
}

.highlight strong p {
	margin-bottom: 0;
}

/* Footer */

.footer {
	/* margin-top: 100vh; */
	background: #377998;
	color: #FFF;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 1rem;
}

.footer svg {
	width: 240px;
}

.footer a,
.footer span {
	color: #FFF;
	text-align: center;
}

.footer a::before,
.footer span::before {
	content: "";
	display: block;
	width: 1px;
	height: 40px;
	background: #FFF;
	margin: .8rem auto;
}

.footer a svg {
	width: 28px;
	height: auto;
	transform: translateY(-2px);
}

.footer a svg * {
	fill: #FFF;
}

/* Firma */

.footer2 {
	background: #1F4658;
	padding: 2rem 1rem;
	color: rgba(255, 255, 255, .6);
	text-align: center;
}

.footer2 a {
	color: rgba(255, 255, 255, .6);
	font-size: .8rem;
	/* margin-bottom: 2rem; */
	display: inline-block;
}

.footer2 a:hover {
	color: rgba(255, 255, 255, 1);
}

#jamstudio {
	width: auto;
	height: 1.625rem;
	margin-top: 2rem;
}

#jamstudio * {
	fill: #FFF;
}

/* Limite animazioni */

#visibles {
	position: fixed;
	bottom: 100px;
	width: 100%;
	height: 1px;
	/* background: rgba(255,0,0,.1); */
	z-index: 1000;
	display: block;
}

@media (max-width: 575.98px) {
	#visibles {
		bottom: 50px;
	}
}

/* concierge-choice */

.concierge-choice {
	width: 100%;
	min-height: 100vh;
	background: url(../images/bg.webp) center;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 3%;
	flex-wrap: wrap;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.concierge-choice a {
	width: 30%;
	height: 600px;
	max-width: 360px;
	background: #FFF;
	border-radius: 200px 200px 10px 10px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	font-family: 'webfontregular';
	font-size: clamp(1.5rem, 4vw, 2rem);
	line-height: 130%;
	overflow: hidden;
	margin-bottom: 1rem;
}

.concierge-choice.show a {
	animation: windows 2s;
	animation-fill-mode: both;
	transition: transform .3s;
}

@keyframes windows {
	0% {
		width: 0;
		height: 0;
		max-width: 0;
		color: rgba(0, 0, 0, 0);
	}

	100% {
		width: 30%;
		height: 600px;
		max-width: 360px;
		color: var(--c-base);
	}
}

@media (max-width: 991.98px) {
	@keyframes windows {
		0% {
			width: 90%;
			height: 0;
			max-width: 360px;
			color: rgba(0, 0, 0, 0);
		}

		100% {
			width: 90%;
			height: 600px;
			max-width: 360px;
			color: var(--c-base);
		}
	}
}

.concierge-choice a:hover {
	transform: scale(1.05);
}

.concierge-choice a.choice-stays {
	background: url(../images/stays.webp) center;
	background-size: cover;
}

.concierge-choice a.choice-experiences {
	background: url(../images/experiences.webp) center;
	background-size: cover;
	animation-delay: .3s;
}

.concierge-choice a.choice-concierge {
	background: url(../images/concierge.webp) center;
	background-size: cover;
	animation-delay: .6s;
}

.concierge-choice a strong {
	background: #ffffff;
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 4rem 1rem 1.5rem;
	width: 100%;
}

.mouse-scroll-cont {
	width: 100%;
	display: flex;
	justify-content: center;
}

.mouse-scroll-cont .mouse-scroll {
	animation-delay: 0;
}

/* about-us */

.about-us {
	/* min-height: 100vh; */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3rem;
	padding: 6rem 0;
}

.about-us img {
	width: 90%;
	max-width: 470px;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .2);
}

.about-us span {
	width: 90%;
	max-width: 470px;
}

.about-us span strong {
	display: block;
	color: var(--c-main);
	text-transform: uppercase;
	font-size: 1.1rem;
}

.about-us span h2 {
	font-size: clamp(2.5rem, 4vw, 3rem);
	line-height: 100%;
}

.about-us span h2 b {
	font-weight: 400;
	display: block;
	color: var(--c-main);
}

.about-us span p {}

/* Stays */

.luxury-stays {
	background: url(../images/luxury-stays.webp) center;
	background-size: cover;
	display: flex;
	justify-content: flex-end;
	/* min-height: 100vh; */
}

@media (max-width: 991.98px) {
	.luxury-stays {
		background: url(../images/luxury-stays-m.webp) left bottom no-repeat #0B5276;
		background-size: 100% auto;
		display: flex;
		justify-content: center;
		/* min-height: 100vh; */
		padding-bottom: 60%;
	}
}

.luxury-stays span {
	display: flex;
	flex-direction: column;
	padding: 8rem 2rem;
	color: #FFF;
	max-width: 550px;
	text-align: center;
	margin: auto 6%;
}

@media (max-width: 991.98px) {
	.luxury-stays span {
		padding: 4rem 0;
	}
}

.luxury-stays span strong {
	display: block;
	text-transform: uppercase;
	font-size: 1.1rem;
	margin-bottom: .6rem;
}

.luxury-stays span h3 {
	font-size: clamp(2.5rem, 4vw, 3rem);
	line-height: 100%;
}

.luxury-stays span h3 b {
	font-weight: 400;
	display: block;
}

.luxury-stays span p {
	color: rgba(255, 255, 255, .6);
}

.luxury-stays+.highlight {
	padding-top: 0;
	position: relative;
	z-index: 1;
	overflow: visible;
}

.luxury-stays+.highlight ul {
	display: flex;
	flex-wrap: wrap;
	padding: 0 0 4rem;
	list-style: none;
	justify-content: center;
	gap: 2%;
	margin-top: -2rem;
}

.luxury-stays+.highlight ul li {
	width: 22%;
	background: #4CA1AF;
	background: radial-gradient(ellipse at bottom, rgba(76, 161, 175, 1) 0%, rgba(30, 118, 133, 1) 100%);
	border: 1px solid #4CA1AF;
	color: #FFF;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 4px;
	box-shadow: 0 15px 30px rgba(0, 0, 0, .2);
	margin-bottom: 1rem;
}

@media (max-width: 1199.98px) {
	.luxury-stays+.highlight ul li {
		width: 47%;
		padding: 1rem;
	}
}

@media (max-width: 991.98px) {
	.luxury-stays+.highlight ul li {
		width: 47%;
	}
}

@media (max-width: 575.98px) {
	.luxury-stays+.highlight ul li {
		width: 96%;
	}
}

.luxury-stays+.highlight ul li strong {
	font-size: 1.4rem;
	margin-bottom: 1rem;
}

.luxury-stays+.highlight ul li p {
	color: rgba(255, 255, 255, .6);
	line-height: 130%;
	margin: 0;
}

/* Experiences */

.experiences {
	padding-bottom: 5rem;
}

.experiences .intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 7rem 1rem 0;
	text-align: center;
	max-width: 700px;
	margin: auto;
}

.experiences .intro strong {
	display: block;
	color: var(--c-main);
	text-transform: uppercase;
	font-size: 1.1rem;
	margin-bottom: .5rem;
}

.experiences .intro h4 {
	font-size: clamp(2rem, 5vw, 4rem);
	line-height: 100%;
}

.experiences .intro h4 b {
	font-weight: 400;
	display: block;
	color: var(--c-main);
}

.experiences .intro p {}

.experience {
	width: 445px;
	max-width: 90%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: auto;
}

.experience img {
	margin-bottom: 3rem;
	border-radius: 10px;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	max-width: 100%;
	transition: margin .3s, box-shadow .3s, opacity .3s;
	opacity: .8;
}

.splide__slide.is-active .experience img {
	margin-top: 6rem;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .2);
	opacity: 1;
}

.splide__slide.is-prev .experience img,
.splide__slide.is-next .experience img {
	margin-top: 3rem;
	opacity: .9;
}

.experience strong {
	font-family: 'webfontregular';
	font-size: clamp(1.5rem, 3vw, 1.6rem);
	font-weight: 400;
}

.experience p {
	opacity: .7;
	transition: margin .3s;
	margin-bottom: 6rem;
}

.splide__slide.is-active .experience p {
	margin-bottom: 0;
}

.splide__slide.is-prev .experience p,
.splide__slide.is-next .experience p {
	margin-bottom: 3rem;
}

.splide__arrow {
	bottom: 0;
	top: auto;
	width: 2rem;
	height: 3rem;
}

.splide__arrow svg {
	display: none;
}

.splide__arrow--prev {
	background: url(../images/icons/prev.svg) no-repeat center;
}

.splide__arrow--next {
	background: url(../images/icons/next.svg) no-repeat center;
}

/* concierge */

.concierge {
	width: 100%;
	/* height: 100vh; */
	background: url(../images/bg.webp) center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 6rem 1rem 0;
}

.concierge strong {
	color: var(--c-main);
	text-transform: uppercase;
	font-size: 1.2rem;
}

.concierge h5 {
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 100%;
	color: #FFF;
	text-align: center;
}

.concierge h5 b {
	display: block;
	color: var(--c-main);
	font-weight: 400;
}

.concierge p {
	color: #FFF;
	max-width: 700px;
	margin: auto;
	text-align: center;
}

.customizable {
	background: var(--c-main);
	padding: 2rem;
	display: flex;
	margin-top: 2rem;
	margin-bottom: 7rem;
	align-items: flex-start;
	border-radius: 4px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}

.customizable img {
	width: 78px;
	margin-right: 1rem;
}

.customizable span {
	position: relative;
}

.customizable span em {
	text-transform: uppercase;
	color: #FFF;
	font-style: normal;
	font-weight: 600;
}

.customizable span p {
	text-align: left;
}

.concierge-services {
	margin-top: -3rem;
}

.concierge-service {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 2rem;
}

.concierge-services img {
	max-width: 70%;
	border-radius: 300px;
	box-shadow: 0 15px 30px rgba(0, 0, 0, .2);
	margin-bottom: 2rem;
}

.concierge-services strong {
	font-family: 'webfontregular';
	font-size: clamp(1.5rem, 3vw, 1.6rem);
	font-weight: 400;
	line-height: 110%;
	margin-bottom: 1rem;
}

.concierge-services p {
	opacity: .6;
}

/* request */

.request {
	background: url(../images/amalfi-coast-view.webp) center top;
	background-size: cover;
	display: flex;
	flex-direction: column;
	padding: 6rem 2rem;
	text-align: center;
}

@media (max-width: 575.98px) {
	.request {
		padding: 3rem 1rem;
	}
}

.request h6 {
	font-family: 'webfontregular';
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 400;
	line-height: 110%;
	margin-bottom: 1rem;
	color: #FFF;
}

.request h6+div p {
	font-size: 1.2rem;
	color: #FFF;
	max-width: 860px;
	display: block;
	margin: 0 auto 1rem;
}

.request-message {
	width: 90%;
	max-width: 700px;
	background: rgba(0, 29, 47, .6);
	backdrop-filter: blur(10px);
	margin: 2rem auto 9rem;
	border-radius: 10px;
	padding: 4rem 2rem 2rem;
	text-align: left;
}

@media (max-width: 575.98px) {
	.request-message {
		width: 100%;
		padding: 3rem 1.5rem 1.5rem;
	}
}

.request-message strong {
	font-family: 'webfontregular';
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 110%;
	margin-bottom: 0;
	color: #FFF;
	text-align: center;
	display: block;
}

.request-message strong+p {
	color: #FFF;
	font-size: 1.2rem;
	text-align: center;
	margin-bottom: 1.5rem;
}

.request-message .form-label {
	color: #FFF;
	display: block;
	margin: 0;
	font-size: .9rem;
}

.request-message .form-control {
	border-radius: 3px;
	border: none;
	margin-bottom: .8rem;
}

.request-message .form-check-label {
	color: #FFF;
	font-size: .85rem;
	font-style: italic;
	margin-bottom: .8rem;
}

.request-message .btn {
	background: var(--c-main);
	color: #FFF;
	border-radius: 3px;
	text-transform: uppercase;
	padding: 1rem 2rem;
	font-size: .9rem;
	font-weight: 700;
}
























/* Animazioni */

/* .container-fluid {
	overflow: hidden;
	padding: 0;
} */

.animated {
	overflow: hidden;
	/* overflow-x: hidden;
	overflow-y: visible; */
}

.animated *,
.animated *::before {
	animation-play-state: paused !important;
	animation-fill-mode: both !important;
}

.animated.show *,
.animated.show *::before {
	animation-play-state: running !important;
}

.del-1 {
	animation-delay: .2s !important;
}

.del-2 {
	animation-delay: .4s !important;
}

.del-3 {
	animation-delay: .6s !important;
}

.del-4 {
	animation-delay: .8s !important;
}

.del-5 {
	animation-delay: 1s !important;
}

.del-6 {
	animation-delay: 1.2s !important;
}

.del-7 {
	animation-delay: 1.4s !important;
}

.del-8 {
	animation-delay: 1.6s !important;
}

.del-9 {
	animation-delay: 1.8s !important;
}

.del-10 {
	animation-delay: 2s !important;
}

.del-11 {
	animation-delay: 2.2s !important;
}

.fade-in {
	animation: fade-in 2s;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.fade-left {
	animation: fade-left 2s;
}

@keyframes fade-left {
	0% {
		opacity: 0;
		transform: translateX(-500px);
	}

	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

.fade-right {
	animation: fade-right 2s;
}

@keyframes fade-right {
	0% {
		opacity: 0;
		transform: translateX(500px);
	}

	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}

.fade-bottom {
	animation: fade-bottom 2s;
}

@keyframes fade-bottom {
	0% {
		opacity: 0;
		transform: translateY(300px);
	}

	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.fade-top {
	animation: fade-top 2s;
}

@keyframes fade-top {
	0% {
		opacity: 0;
		transform: translateY(-300px);
	}

	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.fade-flip {
	animation: fade-flip 2s;
	transform-style: preserve-3d;
	perspective: 1000px;
}

@keyframes fade-flip {
	0% {
		opacity: 0;
		/* transform: rotateY(90deg); */
	}

	99% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		/* transform: rotateY(0deg); */
	}
}

.fade-zoom-in {
	animation: fade-zoom-in 2s;
}

@keyframes fade-zoom-in {
	0% {
		opacity: 0;
		transform: scale(.1);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.border-in {
	position: relative;
}

.border-in::before {
	position: absolute;
	content: "";
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	animation: border-in 2s;
}

@keyframes border-in {
	0% {
		border: 1000px solid #FFF;
	}

	100% {
		border: 0px solid #FFF;
	}
}