html, body
{
    
}

/*portada*/
svg text{
	stroke: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 160px;
	font-weight: 200;
	stroke-width: 3px;
	opacity: 0;
  }
  
  svg text#a{
	animation: textAnimate 6s ease forwards 1.6s;
  }
  svg text#f{
	animation: textAnimate 6s ease forwards 1.9s;
  }
  svg text#r{
	animation: textAnimate 6s ease forwards 2.2s;
  }
  svg text#i{
	animation: textAnimate 6s ease forwards 2.6s;
  }
  svg text#c{
	animation: textAnimate 6s ease forwards 2.9s;
  }
  svg text#a2{
	animation: textAnimate 6s ease forwards 3.3s;
  }
  
 .desactiva
  {
	  cursor: not-allowed;
	  pointer-events:none;
  }

  
  
  @keyframes textAnimate{
	0%{
	  stroke-dasharray: 0 50%;
	  opacity: 0;
	}
	50%{
	  stroke-dasharray: 50% 0;
	  opacity: 1;
	}
   10%{
	  opacity: 1;
	}
	100%{
	  stroke-width: 0px;
	  fill: white;
	  opacity: 1;
	}
  }
/*
  .header-image figure {
	  width: 100%;
	  height: 100vh;
	-webkit-mask-image: linear-gradient(to right 50%, transparent, #fff, transparent);
	-webkit-mask-size: 10% 100%;
	mask-image: linear-gradient(to right, transparent 50%, #fff, transparent);
	mask-size: 10% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	animation-delay: 6s;
	-webkit-animation-delay: 6s;
	animation: clip-fade-mk 5s 2 alternate;
  }*/

  .header-image figure {
	width: 100%;
	height: 100vh;
  -webkit-mask-image: linear-gradient(to right, transparent, #fff, transparent);
  -webkit-mask-size: 10% 100%;
  mask-image: linear-gradient(to right, transparent, #fff, transparent);
  mask-size: 10% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-name: clip-fade-mk;
  animation-timing-function: linear;
  animation-iteration-count: 2;

  -webkit-animation-name: clip-fade-mk;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  /*-webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse;*/
}

.header-image2 figure {
	width: 100%;
	height: 100vh;
  -webkit-mask-image: linear-gradient(to right, transparent, #fff, transparent);
  -webkit-mask-size: 10% 100%;
  mask-image: linear-gradient(to right, transparent, #fff, transparent);
  mask-size: 10% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation-delay: 5.5s;
  -webkit-animation-delay: 5.5s;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-name: clip-fade-mk2;
  animation-timing-function: linear;
  animation-iteration-count: 2;

  -webkit-animation-name: clip-fade-mk2;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}


@-webkit-keyframes clip-fade-mk {
	0%{
		-webkit-mask-position: left;
		mask-position: left;
		opacity: 0.7;
	}99%{
		-webkit-mask-position: right;
		mask-position: right;
		opacity: 0.7;
	}100%{
		opacity: 0;
	}
  }

  @-webkit-keyframes clip-fade-mk2 {
	0%{
		opacity: 0;
	}1%{
		-webkit-mask-position: left;
		opacity: 0.7;
	}100%{
		-webkit-mask-position: right;
		opacity: 0.7;
	}
  }

  @keyframes clip-fade-mk {
	0%{
		mask-position: left;
		opacity: 0.7;
	}99%{
		mask-position: right;
		opacity: 0.7;
	}100%{
		opacity: 0;
	}
  }

  @keyframes clip-fade-mk2 {
	0%{
		opacity: 0;
	}1%{
		mask-position: left;
		opacity: 0.7;
	}100%{
		mask-position: right;
		opacity: 0.7;
	}
  }
	

  .sol {
	opacity: 0.9;
	width: 500px;
	height: 500px;
	border-radius: 100%;
	background-color: rgb(254, 211, 255);
	filter: blur(1000px);
	mix-blend-mode: hard-light;
	animation: sol 7s linear infinite;
  }


.sol2 {
	background-color: rgb(151, 222, 255);
	opacity: 0.9;
	width: 900px;
	height: 300px;
	filter: blur(50px);
	mix-blend-mode: overlay;
	animation: sol2 33s linear infinite;
	background-image: 
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 900 900' style='enable-background:new 0 0 900 900;' xml:space='preserve'><path style='fill:rgb(255, 251, 240)' d='M865.7,465.1v-32.2H618.5c-3.4-31.9-16.1-60.9-35.3-84.5L760.6,171l-22.8-22.8l-5,5l-5-5l-173,173c-22.7-17-50.1-28.1-79.8-31v-249h-32.2v249c-34.7,3.5-66.2,18-90.8,40l-176-176L153.2,177l177,177c-16.8,22.5-27.8,49.5-30.9,78.8H50.1v32.2H299c2.8,30.1,14,57.9,31.1,80.8l-179,179l22.8,22.8l5-5l5,5l173.4-173.4c23.8,19.4,53.2,32.2,85.5,35.4v247H475v-247c29.8-3,57.1-14.1,79.8-31l175,175l22.8-22.8l-174-174c22.2-24.9,36.8-56.7,40.1-91.8H865.7z'/></svg>");
}


@keyframes sol2 {
	0% {
	  transform: rotate(0deg); 
	}50%{
	  transform: rotate(30deg) translate(200px,860px); 

	}100% { 
	  transform: rotate(0deg);
	}
  }

  @-webkit-keyframes  sol2 {
	0% {
		-webkit-transform: rotate(0deg); 
	}50%{
		-webkit-transform: rotate(30deg) translate(200px,-360px); 

	}100% { 
		-webkit-transform: rotate(360deg);
	}
  }

  @keyframes sol {
	0% {
		transform:translate(0px,0px) scaleX(1.8) scaleY(1.23);
		opacity: 0.2;
	}50% {
		transform:translate(90px,90px) scaleX(2.3) scaleY(0.3);
		opacity: 1;
	}100% {
		transform:translate(0px,0px) scaleX(1.8) scaleY(1.23);
		opacity: 0.2;
	}
}

@-webkit-keyframes sol {
	0% {
		-webkit-transform:translate(0px,0px) scaleX(1.3) scaleY(1.23);
		opacity: 0.2;
	}50% {
		-webkit-transform:translate(90px,90px) scaleX(2.3) scaleY(0.2);
		opacity: 1;
	}100% {
		-webkit-transform:translate(0px,0px) scaleX(1.3) scaleY(1.23);
		opacity: 0.2;
	}
}


/****************************POPUP 1 itinerario***************************************/
.popover__wrapper {
	position: absolute;
	display: inline-block;
   }
.popover__wrapper a{
	display: inline-flex;
}
.popover__content {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	right: 30px;
	top:-20px;
	transform: translate(0, 10px);
	background-color: #ffffff;
	color: #686868;
	padding: 0.5rem;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	width: auto;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	text-align: center;
}
.popover__wrapper:hover .popover__content {
	z-index: 10;
	opacity: 0.9;
	width: 230px;
	border-radius: 10px;
	visibility: visible;
	transform: translate(0, -50px);
	transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__content a{
	text-decoration: none;
	padding: 5px;
	color: rgb(105, 105, 105);
}
.popover__content a:hover{
	text-decoration: none;
	color: rgb(56, 56, 58);
	font-weight: 500;
}
.popover__content a h1{
	font-weight: 400;
	font-style: normal;
	font-size: 12pt;
	text-align: center; 
}
.popover__content a h1:hover{
	font-weight: 600;
	font-style: normal;
	font-size: 12pt;
	text-align: center; 
}

.popover__content p {
	font-weight: 500;
	font-style: normal;
	font-size: 12pt;
	text-align: center; 
}



/*popup 2 itinerarios*/
.popover__wrapper_2paginas {
	position: absolute;
	margin-top: 1rem;
	display: inline-block;
   }
.popover__wrapper_2paginas a{
	display: inline-flex;
}
.popover__content_2paginas {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	right: 30px;
	bottom:-120px;
	transform: translate(0, 10px);
	background-color: #ffffff;
	color: #686868;
	padding: 0.5rem;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	width: auto;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	text-align: center;
}
.popover__wrapper_2paginas:hover .popover__content_2paginas {
	z-index: 10;
	opacity: 0.9;
	width: 230px;
	border-radius: 10px;
	visibility: visible;
	transform: translate(0, -50px);
	transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__content_2paginas a{
	text-decoration: none;
	padding: 5px;
	color: rgb(105, 105, 105);
}

.popover__content_2paginas a:hover{
	text-decoration: none;
	color: rgb(56, 56, 58);
	font-weight: 500;
}

.popover__content_2paginas p {
	font-weight: 500;
	font-style: normal;
	font-size: 12pt;
	text-align: center; 
}
/********************  Popover home  ************************/

.popover__wrapper_home {
	position: absolute;
	display: inline-block;
   }
.popover__wrapper_home a{
	display: inline-flex;
}
.popover__content_home {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	left: 9px;
	bottom:-30px;
	transform: translate(0, 10px);
	background-color: #ffffff;
	color: #686868;
	padding: 0.5rem;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	width: auto;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	text-align: center;
}
.popover__wrapper_home:hover .popover__content_home {
	z-index: 10;
	opacity: 0.9;
	width: 230px;
	border-radius: 10px;
	visibility: visible;
	transform: translate(0, -50px);
	transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__content_home a{
	text-decoration: none;
	padding: 5px;
	color: rgb(105, 105, 105);
}
.popover__content_home a:hover{
	text-decoration: none;
	color: rgb(56, 56, 58);
	font-weight: 500;
}
.popover__content_home a h1{
	font-weight: 400;
	font-style: normal;
	font-size: 12pt;
	text-align: center; 
}
.popover__content_home a h1:hover{
	font-weight: 600;
	font-style: normal;
	font-size: 12pt;
	text-align: center; 
}
.popover__content_home p {
	font-weight: 500;
	font-style: normal;
	font-size: 12pt;
	text-align: center; 
}

/**************************** FIN POPUP***************************************/


.cataiBoloFoto ellipse:hover{
	fill: rgb(116, 148, 143);
	stroke-width: 0px;
}

.cataiBoloFoto circle:hover{
	fill: rgb(116, 148, 143);
	stroke-width: 0px;
}

.piedefoto{
	transition: 1.5s; 
	opacity: 0;
}
.piedefoto:hover{
	transition: 1.5s; 
	opacity: 1;
}

.upgrade{
	display: inline-flex;
}

.upgradeIcon{
	display: inline-flex;
	transform-origin: 50% 0;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
 }
.upgradeIcon:hover{
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

.upgradeIconmitad{
	display: inline-flex;
	transform-origin: 50% 0;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
 }
.upgradeIconmitad:hover{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}


.lupa{
	display: inline-flex;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
	transform-origin: top left;
 }

.lupa:hover{
	-webkit-transform: scale(1.4);
	transform: scale(1.4) translate(-50px, -50px);
}



.upgradeBox a{
	color: rgb(146, 146, 146);
}
.upgradeBox:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0px;
	left: 0px;
	opacity: 0.15;
	background: #ffffff;
	visibility: hidden;
	border-radius: 5pt;
	transform-origin: bottom;
	transform: scaleY(0);
	margin-left: 0px;
	transition: .25s linear;
}
.upgradeBox:hover:before,
.upgradeBox:focus:before {
visibility: visible;
transform-origin: bottom;
transform: scaleY(1);
}

.upgradeBoxsa:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0px;
	left: 0px;
	opacity: 0.15;
	background: #ffffff;
	visibility: hidden;
	border-radius: 5pt;
	transform-origin: bottom;
	transform: scaleY(0);
	margin-left: 0px;
	transition: .25s linear;
}
.upgradeBoxsa:hover:before {
visibility: visible;
transform-origin: bottom;
transform: scaleY(1);
}

.bolillo{

}
.bolillo:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 20em;
	bottom: 0px;
	left: 0px;
	background: #00aeff;
	visibility: hidden;
	border-radius: 5pt;
	transform: scaleX(0);
	margin-left: 0px;
	transition: .25s linear;
	opacity: 20%;
	transform-origin: 0 0;
}
.bolillo:hover:before,
.bolillo:focus:before {
visibility: visible;
transform: scaleX(1);
}
/*MKcolor*/

@-webkit-keyframes fadeinmk3 {
	from { opacity: 1; }
	to { opacity: 0.4; }
}
@-moz-keyframes fadeinmk3 {
	from { opacity: 1; }
	to { opacity: 0.4; }
}
@keyframes fadeinmk3 {
	from { opacity: 1; }
	to { opacity: 0.4; }
}

@-webkit-keyframes fadeinmk5 {
	from { opacity: 1; }
	to { opacity: 0.7; }
}
@-moz-keyframes fadeinmk5 {
	from { opacity: 1; }
	to { opacity: 0.7; }
}
@keyframes fadeinmk5 {
	from { opacity: 1; }
	to { opacity: 0.7; }
}

.mkcolor1 {
	-webkit-animation: fadeinmk5 0.8s ease-in alternate infinite;
	-moz-animation: fadeinmk5 0.8s ease-in alternate infinite;
	animation: fadeinmk5 0.8s ease-in alternate infinite;
	transition-duration: 0.8s;
  }

  .mkcolor1:hover {
	-webkit-animation: none;
	-moz-animation: none;
	animation: none;
	transition-duration: 0s;
  }


.mkcolor3 {
	-webkit-animation: fadeinmk3 0.45s ease-in alternate infinite;
	-moz-animation: fadeinmk3 0.45s ease-in alternate infinite;
	animation: fadeinmk3 0.4s ease-in alternate infinite;
	transition-duration: 0.4s;
  }

  .galeriahoteles{
	-webkit-animation: fadeinmk3 0.45s ease-in alternate infinite;
	-moz-animation: fadeinmk3 0.45s ease-in alternate infinite;
	animation: fadeinmk3 0.4s ease-in alternate infinite;
	transition-duration: 0.4s;
}

.galeriahoteles:hover{
	border-left: solid 10px rgb(255, 255, 255);
	border-radius: 10px;
}




/*
  @media screen and (max-width: 850px), 
  screen and (max-height: 850px) {
	.cita
	{
		 font-size: 15pt !important;
	}

	.paises
	{
		 font-size: 14pt !important;
	}

}


@media screen and (max-width: 600px), 
       screen and (max-height: 600px) {
	.cita
	{
		 font-size: 14pt !important;
	}

	.paises
	{
		 font-size: 11pt !important;
	}

}
*/
@media screen and (max-width: 400px), 
       screen and (max-height: 400px) {
	.cita
	{
		 font-size: 13pt !important;
	}

	.paises
	{
		 font-size: 10pt !important;
	}

}

@media screen and (max-width: 200px), 
       screen and (max-height: 200px) {
	.cita
	{

		 font-size: 10pt !important;
	}

	.paises
	{
	
		 font-size: 9pt !important;
	}

}