.animated,
.beforeHeightUp:before {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite
}

.animated.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp
}
    
.fadeInDown {
	-webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}
    
.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
	-webkit-animation-duration: .5s;
	animation-duration: .5s
}

.downFull {
	-webkit-animation-name: downFull;
	animation-name: downFull
}

.upFull {
	-webkit-animation-name: upFull;
	animation-name: upFull
}

.fadeInRight {
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight
}

.fade {
	-webkit-animation-name: fade;
	animation-name: fade
}

.beforeHeightUp:before {
	-webkit-animation-name: heightUp;
	animation-name: heightUp
}

.widthGrowth {
	-webkit-animation-name: widthGrowth;
	animation-name: widthGrowth
}

.a-delay-1 {
	animation-delay: .2s
}

.a-delay-2 {
	animation-delay: .4s
}

.a-delay-3 {
	animation-delay: .6s
}

.a-delay-4 {
	animation-delay: .8s
}

.a-delay-5 {
	animation-delay: 1s
}

.a-delay-6 {
	animation-delay: 1.2s
}

.a-delay-7 {
	animation-delay: 1.4s
}

@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -50px, 0);
		transform: translate3d(0, -50px, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -50px, 0);
		transform: translate3d(0, -50px, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(50px, 0, 0);
		transform: translate3d(50px, 0, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(50px, 0, 0);
		transform: translate3d(50px, 0, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@-webkit-keyframes downFull {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}

	to {
		-webkit-transform: none;
		transform: none
	}
}

@keyframes downFull {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}

	to {
		-webkit-transform: none;
		transform: none
	}
}

@-webkit-keyframes upFull {
	0% {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0)
	}

	to {
		-webkit-transform: none;
		transform: none
	}
}

@keyframes upFull {
	0% {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0)
	}

	to {
		-webkit-transform: none;
		transform: none
	}
}

@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-50px, 0, 0);
		transform: translate3d(-50px, 0, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-50px, 0, 0);
		transform: translate3d(-50px, 0, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@-webkit-keyframes fade {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes fade {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@-webkit-keyframes heightUp {
	0% {
		height: 0%
	}

	to {
		height: 100%
	}
}

@keyframes heightUp {
	0% {
		height: 0%
	}

	to {
		height: 100%
	}
}

@-webkit-keyframes widthGrowth {
	0% {
		width: 0%
	}

	to {
		width: 100%
	}
}

@keyframes widthGrowth {
	0% {
		width: 0%
	}

	to {
		width: 100%
	}
}

@-webkit-keyframes BgUp {
	to {
		background-position: 50% 0
	}
}

@keyframes BgUp {
	to {
		background-position: 50% 0
	}
}

@-webkit-keyframes BgDown {
	0% {
		background-size: 100% 0
	}

	to {
		background-size: 100% var(--block-height)
	}
}

@keyframes BgDown {
	0% {
		background-size: 100% 0
	}

	to {
		background-size: 100% var(--block-height)
	}
}

@-webkit-keyframes swiper-preloader-spin {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@keyframes swiper-preloader-spin {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}




.resort__map--bg {
	position: relative
}

.resort__map--bg .resort__map--bg--desktop {
	display: block;
	width: 100%;
	height: 607px;
	object-fit: cover
}

.resort__map--content--inner {
	margin: auto;
	text-align: center
}

.resort__map--content--inner--heading {
	margin-bottom: 20px;
	color: #060606;
	font-size: 54px;
	font-family: Canela, sans-serif;
	font-weight: 400;
	line-height: 48.6px;
}

@media only screen and (min-width:1440px) {
	.resort-map__text p {
		font-size: 14px;
		line-height: 21px
	}
}

@media only screen and (max-width:768px) {
	.resort-map .resort-points {
		/*display: none*/
	}
}

.resort__map--bg--desktop,
.resort__map--bg--mobile {
	mix-blend-mode: multiply;
} 

.resort-map .resort-point {
	position: absolute;
	opacity: 0;
	/*animation: fade .5s linear 1s 1 forwards;*/
	z-index: 2
}

.resort-map .resort-point:nth-child(24) .resort-popup {
	top: 40px;
	transform: translateX(-50%);
	left: 11px
}

.resort-map .resort-point:nth-child(24) .resort-popup__inner::after {
	top: -25px
}

.resort-map .resort-point__mark {
	position: relative;
	border-radius: 50%;
	/*transition: .3s ease-in-out;
	transition-delay: 30ms*/
}

@media only screen and (min-width:769px) {
	.resort-map .resort-point__mark {
		/*
		padding:.20833vw;
		width:1.52778vw;
		height:1.52778vw
		*/
  }
}

.resort-map .resort-point__mark--inner {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%
}

.resort-map .resort-point.active {
	z-index: 3
}

.resort-map .resort-point.active .resort-popup {
	opacity: 1;
	visibility: visible;
	pointer-events: all
}

.resort-map .resort-point .resort-popup__inner {
	position: relative;
	background-color: #f1eade;
}

.resort-map .resort-point .resort-popup__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 250px;
	aspect-ratio: 16/11;
}

/*sass*/
.resort-map {
	margin-top: 160px;
}

.resort__map--bg {
	position: relative;
	margin-bottom: 50px;
}

.resort__map--bg .resort__map--bg--desktop {
	display: block;
	width: 100%;
	height: 835px;
	object-fit: contain;
}

@media (max-width: 470px) {
	.resort__map--bg img.desktop {
		/*display: none;*/
	}
}

@media (min-width: 470px) {
	.resort__map--bg img.mobile {
		display: none;
	}
}

.resort__map--content {
	padding: 0 30px;
	margin: 90px 0;
}

.resort-map .resort-point {
	position: absolute;
	opacity: 0;
	animation: fade 0.5s linear 0s 1 forwards;
	z-index: 2;
	background: transparent;
	border: none;
}

.resort-map .resort-point__mark {
	position: relative;
	border-radius: 50%;
	transition: 0.3s ease-in-out;
	transition-delay: 0.03s;
}

.resort-map .resort-point__mark--inner {
	border-radius: 50%;
	background-color: #f1eade;
	width: 33px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: rgb(0 0 0 / 40%) 0 0 12px 0px;
}

.resort-map .resort-point.active {
	z-index: 3;
}

.resort-map .resort-point.active .resort-popup {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

.resort-map .resort-point .resort-popup {
	position: absolute !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 460px;
	height: auto;
	box-shadow: 0px 9px 42px rgba(0, 0, 0, 0.2);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease-in-out;
	z-index: 6;
}

.resort-map .resort-point .resort-popup__inner {
	position: relative;
	height: 100%;
}

.resort-popup__img {
	width: 100%;
	/*max-height: 250px;*/
	min-height: 250px;
	aspect-ratio: 16/11;
}

.resort-popup__text {
	display: flex;
	padding: 15px 20px 30px 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	text-align: left;
	width: 100%;
	background-color: #f1eade;
	font-family : var(--primary-font);
	font-size: .875rem;
}
.resort-popup-link {
	padding: 5px 0 0 0;
}

.popup-close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	border: none;
	width: 35px;
	height: 35px;
	cursor: pointer;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f1eade;
	border-radius: 50%;
}

.popup__close--button--img {
	transition: transform .7s ease-in-out;
	max-width: 15px;
	object-fit: cover;
	max-height: 15px;
}

.popup__close--button--img:hover {
	transform: rotate(360deg);
}

.resort-point {
	cursor: pointer;
}

.resort__map--bg--desktop.desktop {
	height: 55.55556vw;
}

.resort-popup__text-name {
    font-family     : var(--primary-font);
    text-decoration : none !important;
    text-transform  : none;
    font-size       : 32px;
	line-height: 32px;
    margin-bottom   : 0px;
}

.resort__map--legend {
	position: absolute;
	bottom: 0;
	right: 150px;
}

@media only screen and (max-width:1900px) {
	.resort__map--legend {
		right: 150px;
	}
}

.resort__map--legend--row {
    
	display: grid;
	grid-template-rows: repeat(6, 1fr);
    grid-auto-flow: column;
	column-gap: 30px;

}

.resort__map--legend--row--item--num {
	border-radius: 50%;
	background-color: #f1eade;
	width: 25px;
	height: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-style: italic;
}

.resort__map--legend--row--item--title{
	cursor: pointer;
}

.resort__map--legend--row--item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.resort-map .resort-point.active .resort-popup {
	position: fixed !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.resort-popup {
	max-height: fit-content;
}

@media only screen and (max-width:999px) {
	.resort__map--bg--mobile {
		max-height: 50vh;
		width: 100%;
		object-fit: cover;
	}

	.resort-points,
	.resort__map--legend {
		/*display: none;*/
	}
}