/* ==========================================================================
 	# Refugi de l'Illa
	========================================================================== */	
h2, h3{line-height:1.3em;}
h1{font-size:30px; line-height:1.8em; font-family: 'Oswald', sans-serif; font-weight: normal; }
h2{font-size:25px;}

.clear-float{clear:both;}

.colorazul{color: #0099cc !important;}
.colornegro{color: #000 !important;}


.margintop20{margin-top:20px !important;}
.margintop30{margin-top:30px !important;}
.margintop50{margin-top:50px !important;}
.margintop60{margin-top:60px !important;}

.marginbottom30{margin-bottom:30px !important;}
.marginbottom60{margin-bottom:60px !important;}

.padding0{padding:0 !important;}

.inlineblock{display:inline-block;}

.txtpeq{font-size:0.8em;}

.txtleft{text-align:left;}
.txtright{text-align:right;}
.txtcenter{text-align:center;}

.process-builder ul li.sinflecha:before{content:"" !important;}
.process-builder ul li.sinlinea:after{border:0 !important;}

.mastercard{display:inline-block; background-image: url(../../_layout/images/ico-mastercard.png); width:98px; height:40px;}
.visa{display:inline-block; background-image: url(../../_layout/images/ico-visa.png); width:70px; height:40px;}

.listaindentada li{text-indent: -1em; margin-left:1em;}

.alerta{color:#e52d3e; text-align:center;}

.oculto{
	display:none;
}

/* Header
   ========================================================================== */	
#header-top {z-index:99; position:relative; background-color: rgba(0, 0, 0, 0.3);}
#header-top a:link, #header-top a:visited{color:#fff;}
#header-top a:hover, #header-top a:active{color:#0099cc; background-color:#fff; text-decoration:none;}

#header {z-index:90; position:relative; background-color: #fff;}

.bgheader1{background-image: url(../../_content/header/header-iglu-hotel-01.jpg);}
.bgheader2{background-image: url(../../_content/header/header-iglu-hotel-02.jpg);}
.bgheader3{background-image: url(../../_content/header/header-iglu-hotel-03.jpg);}
.bgheader15{background-image: url(../../_content/header/header-15.jpg);}

.bgheaderTravessa{background-image: url(../../_content/header/travesa.jpg);}

.icotripadvisor{background: url(../../_layout/images/ico-tripadvisor.png) no-repeat left; padding-left:25px; font-size:0.9em;}

.logo-peq{margin-top:-5px; margin-bottom:-30px;}

/* Buscador y Reservas
   ========================================================================== */	
	
.buscador{margin-top:-125px; z-index:999;  background-color: rgba(255, 255, 255, 0.8); position:relative; padding:5px 15px 10px 15px; border: 1px solid #fff;
-webkit-box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 1px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 1px 5px 0px rgba(50, 50, 50, 0.75);}

.buscadorcentrar{margin:auto; width:auto; text-align:left; display:inline-block;}
.buscador .buscadorinput{float:left; margin-right:25px; }
.buscador input[type="text"], .buscador select{background-color: rgba(255, 255, 255, 0.5); border:1px solid #fff;}
.buscador input.hasDatepicker{background-image: url(../../_layout/images/ico-calendar.png); background-repeat:  no-repeat; background-position:  right; }
.buscador .edadnens {color: #474d5d; font-size:0.8em; clear:both; display:block; padding:0; line-height:1em;}
.buscador input, .buscador textarea, .buscador select{margin-bottom:4px;}
.buscador .btn{font-weight:bold;}

.datos-reserva{padding:20px 10px; border:1px solid #dbdde3;  }
.pasospago{background-color:#f4f4f4;}

/* Reservas Form */
  
#reservas-form { 
	overflow: hidden; 
	margin-bottom: 30px; 
}	
#reservas-form fieldset { margin: 0; }	
#reservas-form input[type="text"], #reservas-form select {
	width: 100%;
	font: 12px 'Open Sans', Arial, sans-serif;
}	
#reservas-form textarea {
	font: 12px 'Open Sans', Arial, sans-serif; 
	resize: none; 
}
#reservas-form  .condiciones .validation-error{display:inline-block;}

.formcontacto input[type="text"], .formcontacto textarea{background-color:#fff;}

/* Contenido
   ========================================================================== */	
.fullwidthbanner-container{height:700px; background-color: #e2e2e2;}
#fondoheader{margin-top:-150px;}

.plazasdisponibles{margin-top:20px; color:#999;}
.proximosdias a{display:inline-block; padding:4px; background-color: #0099cc; margin-right:2px; color:#fff; margin-top:2px;}
.proximosdias a.completo{background-color:#e52d3e;}
.disponibilidadproximosdias{margin:5px 0 0 0; font-size:0.85em;}
.nohaydisponibilidad{margin:0; color:#e52d3e;}

.proximosdias-submit{display:inline-block; padding:4px; background-color: #0099cc; margin-right:2px; color:#fff; margin-top:2px;}

.box 	a.accordion-item-toggle {border: 1px solid #fff; color: #fff;}

/* Footer
   ========================================================================== */	

#footer-top{color:#525252;}	
#footer-top a:link, #footer-top a:visited{color:#fff; text-transform:uppercase; padding:0 15px;}
#footer-top a:hover, #footer-top a:active{color:#0099cc;}

#footer-middle a.social-icon{margin-left:10px; margin-right:10px;}
#footer-middle a:link, #footer-middle a:visited{color: #d1d1d1;}
#footer-middle a:hover, #footer-middle a:active{color: #0099cc;}

#footer-bottom{color:#666;}
#footer-bottom a:link, #footer-bottom a:visited{color: #666; font-size:0.85em;}
#footer-bottom a:hover, #footer-bottom a:active{color: #0099cc;}

 /*	#Tooltip
	   ======================================================================== */	

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
	position: relative;
	z-index: 2;
	cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-bottom: 5px;
	margin-left: -80px;
	padding: 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius:    3px;
	border-radius:         3px;
	background-color: #000;
	background-color: hsla(0, 0%, 20%, 0.9);
	color: #fff;
	content: attr(data-tooltip);
	text-align: center;
	font-size: 12px;
	line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	width: 0;
	border-top: 5px solid #000;
	border-top: 5px solid hsla(0, 0%, 20%, 0.9);
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	content: " ";
	font-size: 0;
	line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
	visibility: visible;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
	  transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;}




 /*	#Smartbox
	   ======================================================================== */	

/* Styles for dialog window */
#smartbox {
	background: white;
	padding: 20px 30px;
	text-align: left;
	max-width: 90%;
	margin: 40px auto;
	position: relative;
}

/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
	opacity: 0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;

	-webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );

}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
	opacity: 0;

	-webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
}

/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
	opacity: 0.01;

	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
	opacity: 0;
}




/* ==========================================================================
 	#Responsive Media Querys
	========================================================================== */	
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	#fondoheader, .buscador {margin-top: 0;}
	.buscadorinput{display:block; width:40%;}
	.buscador input[type="text"], .buscador select{border:1px solid #ccc; background-color: #fff;}
	.buscador{background-color: #f4f4f4; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
}	 
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}
/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
	#logo img{max-width:90% !important;}
	#footer-top a{display:block; clear:both;	}
}