@font-face {
    font-family: 'popi';
    src: url('css/Poppins-Regular.eot');
    src: url('css/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
        url('css/Poppins-Regular.woff2') format('woff2'),
        url('css/Poppins-Regular.woff') format('woff'),
        url('css/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'more';
    src: url('css/Montserrat-Regular.eot');
    src: url('css/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
        url('css/Montserrat-Regular.woff2') format('woff2'),
        url('css/Montserrat-Regular.woff') format('woff'),
        url('css/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'mobo';
    src: url('css/Montserrat-Bold.eot');
    src: url('css/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
        url('css/Montserrat-Bold.woff2') format('woff2'),
        url('css/Montserrat-Bold.woff') format('woff'),
        url('css/Montserrat-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

	
	
html,body
	{background-color: #E6E6E6;}
	
	*{margin: 0; padding: 0; font-family: arial; text-decoration: none;}	
header{height: 10vh; width: 100%; position: fixed; left: 0; top: 0; display: flex; align-items: center; z-index: 2; }
header .logoMain{width: 16vh; height: 8vh; background-image: url(img/dark.png); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; left: 3.5%;  }	
header menu{ position: absolute; bottom: 40%; right: 2.5%;}
menu a{color: #29ABE2; margin: 0 2vh; font-size: 1.15em; letter-spacing: 2px; font-family: "popi"; }
	
	
header.dark{background-image: url(img/grad.png); background-repeat: repeat-x; background-size: contain;}
header.dark .logoMain{background-image: url(img/white.png);}	

.presentacion strong
	{color: #9c27b0; font-weight: normal; font-family: "mobo";}
.presentacion
	{position: fixed; left: 25%; right: 25%; top: 15%; bottom: 15%; font-size: 1.15em; font-size: 3.5vh; line-height: 4.5vh; letter-spacing: 1px; font-family: "more";}
	
footer menu a{ float: left; margin-left: 5vh; }
footer menu{ float: left; margin-left: 5vh; }
footer{height: 5vh; width: 100%; position: fixed; left: 0; bottom: 0; background-color: #1F1F1F; color: #FFF; display: flex; align-items: center; }
footer .presa{margin-left: 2.5%;}
.direccion h2
	{font-size: 5vh; font-weight: normal; font-family: more; position: absolute; top: 16.5vh;}
.direccion h1
	{font-size: 6vh;
    font-weight: normal;
    font-family: more;
    position: absolute;
    top: 2vh;
    color: #192345;
    width: 80%;
    text-align: center;}
.direccion
	{width: 100%; height: 19vh; display: flex; justify-content: center; position: relative;}

.office a.right{left: auto; right: 0; border-radius: 5vh 0 0 0;}
.office a:hover{background-color: #9c27b0; color: #FFF;}
.office a{position: absolute; bottom: 0; left: 0;background-color: #192345;height: 10vh; width: 20%;  border-radius: 0 5vh 0 0 ; color: #7fb3ca; display: flex; justify-content: center; align-items: center; font-family: "popi"; font-size: 1.35em; transition: background-color 0.25s,color 0.25s;}
.office .horario span{display: block; font-family: "more"; font-size: 1.05em; text-align: center;}
.office .horario{position: absolute;left: 35%;right: 35%;background-color: #006482;height: 10vh;bottom: 2vh; color: #FFF; align-items: center; display: flex; justify-content: center;}
.office
	{background-image:url(img/office.jpg); background-size: cover; height:77vh; width:100%; background-position: center; position:relative;}
.enlaFB
	{width: 55px; height: 55px; background-image: url(img/icose.png); background-position: center; background-size: 6vh; background-repeat: no-repeat; display:block; margin: auto; background-color: #3b5998; border-radius: 100%;}

#home .curte h1 strong
	{font-family: "mobo"; display: block; color: #75c7c7;}

#home .curte h2
	{
	font-size: 6vh;
		background-color: #75c7c7;
		color: #1f1f1f;
		position: absolute;
		bottom: 50%;
		font-family: "more";
		text-align: center;
		/*width: 100%;*/
		line-height: 4vh;
		padding: 2vh;
		width: 30%;
		left: 35%;
	}
#home .curte h1
{font-size: 16vh; color: #FFF; position: absolute; top: 50%; font-family: "more"; text-align: center; width: 100%; line-height: 15vh; text-shadow: 0 0 10px #000;}




#single .galeria .photo .porta .fondol
	{width: 100%; height: 100%; -webkit-transform: skew(-20deg);
     -moz-transform: skew(-20deg);
     -ms-transform: skew(-20deg);
     -o-transform: skew(-20deg);
     transform: skew(-20deg);
	position: absolute; background-color: #0097cb;
	}
#single .galeria .photo .porta
	{ position: absolute; bottom: 5%; right: 10%;}


#single .galeria .photo h4
	{font-family: "popi";  color: #FFF; font-size: 2.05em; font-weight: normal; text-align: center;  padding: 2vh 5vh; position: relative; }

#single .galeria .photo h3
	{font-family: "more";  color: #FFF; font-size: 2.25em; font-weight: normal; position: absolute; bottom: 20%; right: 10%; text-align: center; text-shadow: 0 0 5px #000;}






#single .galeria .reserva span
	{font-family: "mobo"; font-size: 1em; font-weight: normal; float: left;}
#single .galeria .reserva h5
	{font-family: "popi"; font-size: 1em; font-weight: normal; float: left; margin-right: 2.5vh;}
#single .galeria .reserva
	{position: absolute; top: 0; right: 0; padding: 2vh; background-color: #ff5722; color: #FFF; border-radius: 0 0 0 2vh; z-index: 2; }
#single .galeria .photo
	{border-right: 0.25vh solid #1F1F1F; width: 99%; height: 80vh; margin: auto; background-size: cover; background-position: center; position: relative;}
#single .contenido dd .icon
	{width: 4vh; height: 4vh; display: block; float: left; margin: 1vh 2vh 0 0;  background-size: contain; background-repeat: no-repeat;}
#single .contenido dd img
	{height: 4vh; margin-right: 2vh; float: left;}
#single .contenido dd
	{font-family: "popi"; font-size: 1.25em; position: relative;}
#single .contenido dd li .icon
	{position: absolute; left: 0;}
#single .contenido dd li
	{list-style: none; padding-left: 5vh; font-family: "popi"; font-size: 1em;}
#single .contenido h2
	{color:#0097cb;}
#single .contenido dt
	{font-family: "mobo"; font-size: 1.15em; margin-top: 1vh; clear: both;}
#single .contenido dl
	{width: 80%; margin: auto; padding: 5vh 0; display: block;}
#single .contenido
	{width: 40%; height: 85%; background-color: #FFF; float: left; overflow: auto;}
#single .galeria
	{width: 60%; height: 100%; background-color: #FFF; float: left; position: relative;}
#single .precio span
	{color: #FFF; font-family: "popi";}
#single .precio h3
	{color: #FFF; font-family: "more"; font-size: 5vh; font-weight: normal;}
#single .precio .quiero a
	{padding: 1vh 5vh; border-radius: 1vh; background-color: #ff5722; color: #FFF; font-family: "mobo";}
#single .precio .quiero
	{position: absolute; right: 15%;}
#single .precio .price
	{position: absolute; left: 15%;}
#single .precio
	{position: absolute; right: 0; bottom: 0; width: 40%; height: 15%; background-color: #1f1f1f; display: flex; align-items: center;}
#single
	{width: 95%; height: 80vh; position: absolute; bottom: 10vh; left: 2.5%;}




.curte
	{width: 100%; height: 100%; background-color: rgba(0,0,0,0.25);}
#home
	{background-image: url(img/beach.webp); height: 100vh!important; background-position: center; background-size: cover; margin-bottom: 15vh;}

#contacto .margin
	{width: 75%; margin: auto; height: 100%; }


	
#viajes .margin
	{width: 150vh; margin: auto; height: 100%; overflow: hidden; }

#contacto h2,#viajes h2
	{font-family: "more"; font-size: 10vh; font-weight: normal; text-align: left; margin-top: 15vh; color: #5f5f5f;}
#contacto .cute .modulo iframe
	{width: 100%; height: 100%;}
#contacto .cute .modulo 
	{width: 30%; height: 100%; background-color: #FFF; margin: 0 1.5%;}
#contacto .cute
	{width: 100%; height: 50vh; display: flex; justify-content: center; margin-top: 5vh;}
#contacto .brin h4
	{font-family: "popi";  color: #999; font-size: 1.95em; font-weight: normal;}
#contacto .brin h3
	{font-family: "mobo"; margin-top: 3vh; color: #192345;}
#contacto .brin
	{align-items: center; justify-content: center; display: flex;}
#contacto .brin span
	{font-family: "more";}
#contacto,#home
	{width: 100%; height: 85vh;}

#viajes .square .curte:hover
	{ background-color: rgba(0,0,0,0.55);}
#viajes .square  .curte
	{transition: background-color 0.25s;}




#viajes .square .capsule.upper
	{bottom: auto;
    top: 3vh;
    width: 50%;
    background-color: #ff991b;}
#viajes .square .capsule
	{position: absolute; bottom: 10.5vh; display: flex; align-items: center; justify-content: center; width:9.5vh; height: 3.5vh; border-radius: 3vh; background-color: #ff5722; color:#FFF; left: 25%; font-family: 'more'; font-size: 2.2vh; }
#viajes .square h4
	{position: absolute; bottom: 2.5vh; font-size: 6.5vh; right: 20%; font-family: more; font-weight: normal; color: #FFF; text-shadow: 0 0 5px #000;}
#viajes .square h3
	{font-family: "mobo"; text-align: center; color: #FFF; font-size: 2.25em; padding-top: 7.5vh; font-weight: normal;}
#viajes .square a:hover
	{border: 2.5vh #ff5722 solid;}

#viajes .square a
	{width: 45vh; height: 45vh; border: 2.5vh #FFF solid; background-position: center; background-size: cover; transition: border 0.25s; display: block; position: relative;}

#viajes .square
	{width: 50vh; min-height: 45vh;  float: left; }
#viajes h2
{margin-bottom: 10vh; clear: both;}
#viajes.extended .marco h3
	{padding-top: 3.5vh;}
#viajes.extended .square h5
	{position: absolute; bottom: 0.5vh; width: 50%; font-size: 3vh; text-align: center; left: 25%; color:#1F1F1F; font-family: 'popi';  }
#viajes.extended .square li .icon
	{width: 4vh; height: 4vh; display: block; position: absolute; left: 5%;  background-size: contain; background-repeat: no-repeat;}
#viajes.extended .square li
	{width: 90%; margin: 1.5vh auto; list-style: none; color: #333; padding-left: 7.5vh; position: relative;     font-family: 'more';}
#viajes.extended .square
	{min-height: 50vh;}
#viajes.extended .marco h4
	{background-color: #ff5722; color:#FFF; font-size: 4vh; height: 6vh; padding: 0 3vh; bottom: 0; right: 0; display: flex; align-items: center; border-radius: 1.5vh 0 0 0; }
#viajes.extended .marco .capsule.upper
	{border-radius: 2vh; top: 50%; left: 5%;}

#viajes.extended .marco .capsule
	{right: 0; left: auto; border-radius: 3vh 0 0 0; bottom: 6vh;}
#viajes.extended .portada .botonear a:hover
	{background-color: #ff5722;}
#viajes.extended .portada .botonear a
	{width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; float: left; color: #FFF; font-family: "mobo"; background-color: transparent; transition: background-color 0.25s;}
#viajes.extended .portada .botonear
	{position: absolute; bottom: 2.5vh; width: 50%; height: 5vh; left: 25%; border-radius: 5vh; background-color: rgba(31,31,31,0.85); overflow: hidden; }
#viajes.extended .portada .porta .fondol
	{width: 100%; height: 100%; -webkit-transform: skew(-20deg);
     -moz-transform: skew(-20deg);
     -ms-transform: skew(-20deg);
     -o-transform: skew(-20deg);
     transform: skew(-20deg);
	position: absolute; background-color: #4f9f9f;
	}
#viajes.extended .portada .porta
	{ position: absolute; top: 50%; right: 20%;}


#viajes.extended .portada h4
	{font-family: "popi";  color: #FFF; font-size: 2.55em; font-weight: normal; text-align: center;  padding: 2vh 5vh; position: relative; }
#viajes.extended h2
	{margin-top: 7.5vh;}
#viajes.extended .portada h3
	{font-family: "mobo";  color: #FFF; font-size: 3.25em; font-weight: normal; position: absolute; bottom: 50%; width: 50%; left: 25%; text-align: center; text-shadow: 0 0 5px #000;}
#viajes.extended .portada
	{width: 100%; height: 75vh; background-image: url(img/beach.webp); background-position: center; background-size: cover; position: relative;}
#viajes.extended .marco
	{width: 100%; height: 70%; background-position: center; background-size: cover; position: relative;}
#viajes
	{width: 100%; min-height: 100vh; margin: 0 0 10vh 0; overflow: auto;}
.dira h5
	{background-color: #1F1F1F; color: #FFF; padding: 1vh 0; font-weight: normal; text-align: center; font-family: "popi"; font-size: 0.75;}

.botonStandar:hover
	{background-color: #0E2EB3;}
.botonStandar
	{width: 45vh; height: 7.5vh; display: flex; justify-content: center; align-items: center; background-color: #ff5722; color: #FFF; margin: 2vh auto; clear: both; font-family: "more"; font-size: 1.45em; transition: background-color 0.25s; border-radius: 3px;}

#contactE .cute .modulo
	{width: 40%; height: 40vh; margin: 0 2.5%; float: left;}
#contactE .enlaFB
	{
	left: 50%!important;
    margin-left: -10%!important;	
	border-radius: 5vh 5vh 0 0!important;	
		
	}
#contactE .cute
	{
	width: 90%; margin: 2.5vh auto; height: 40vh; 
	}
#contactE .brin h3
	{
	font-family: "mobo";	
	}
#contactE .brin span
	{
	font-family: "more";	
	}
#contactE h4
	{font-family: "popi";
    color: #999;
    font-size: 1.95em;
    font-weight: normal;}
#contactE h2
	{width: 100%; height: 5vh; background-color:#192345; color: #FFF; display: flex; justify-content: center; text-align: center; align-items: center; font-family: "more"; }
.galeria #contactE.desplegado h2
	{height: 10%;}

.galeria #contactE.desplegado .brin h3
	{margin: 5% 0;}
.galeria #contactE.desplegado .enlaFB
	{
	position: absolute;
    bottom: 0;
    width: 20%;	
	}
.galeria #contactE.desplegado .cute .modulo
	{height: 90%;}
.galeria #contactE.desplegado .cute
	{
	margin: 5% auto; height: 80%;	
	}
.galeria #contactE.desplegado
	{
	left: 0%;
    right: 0%;
    top: 0vh;
    bottom: auto;
	height: 100%;
    z-index: 3;	
		border-radius: 0;     background-color: rgba(255,255,255,0.9);
	}
#contactE.desplegado
	{
	position: absolute;
    left: 25%;
    right: 25%;
    top: 10vh;
    height: 50vh;
    background-color: rgba(255,255,255,0.75); border-radius: 5vh; overflow: hidden; box-shadow: 0 0 15px #fff;
	}

.office .buttonClose
	{border-radius: 0 0 0 5vh!important;  right: 0!important;
    top: 0!important;}

.buttonClose
	{position: absolute!important;
    right: 5%!important;
    top: 10px!important;
    width: 30px!important;
    height: 30px!important;
    background-color: #F00!important;
    border-radius: 100%!important;
    color: #FFF!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
	left: auto!important;
		bottom: auto!important;
		font-size: 1em!important;
	}