/* trancoso-beach_responsive.css */



/*
* estilos particularizados para el proyecto Trancoso Beach
*/

/* all-rent-resp.css #1197 */
.hotspot > .content {
  position: relative;
  overflow: hidden;
  width: 225px;
  height: 225px;
  margin-top: -175px;
  text-align: center;
  padding-top: 94px;
  -webkit-transition: all 30ms ease-in-out;
  -moz-transition: all 30ms ease-in-out;
  -o-transition: all 30ms ease-in-out;
  transition: all 30ms ease-in-out;
  -webkit-transition-delay: 20ms;
  -moz-transition-delay: 20ms;
  -o-transition-delay: 20ms;
  transition-delay: 20ms;
  /* The hotspot point */

}


.hotspot > .content h2 {
  font-size: 30px;
  text-transform: uppercase;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms;
}
.hotspot > .content > .description, .hotspot > .content > .links {
  padding-left: 50px;
  padding-right: 50px;
  margin-left: auto;
  margin-right: auto;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  -webkit-opacity: 0;
  opacity: 0;
  filter: alpha(opacity = 0);
  *display: none;
  -webkit-transform: translate(0px, 50px);
  -moz-transform: translate(0px, 50px);
  -ms-transform: translate(0px, 50px);
  transform: translate(0px, 50px);
  -webkit-transition: all 30ms ease-in-out;
  -moz-transition: all 30ms ease-in-out;
  -o-transition: all 30ms ease-in-out;
  transition: all 30ms ease-in-out;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
.hotspot:hover h2, .hotspot.active h2 {
  padding: 0 20px;
  -webkit-transition: all 30ms ease-in-out;
  -moz-transition: all 30ms ease-in-out;
  -o-transition: all 30ms ease-in-out;
  transition: all 30ms ease-in-out;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
.hotspot:hover > .content, .hotspot.active > .content {
  width: 290px;
  height: 290px;
  padding-top: 70px;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
.hotspot:hover > .content > .description,
.hotspot.active > .content > .description,
.hotspot:hover > .content > .links,
.hotspot.active > .content > .links {
  -moz-opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
  filter: alpha(opacity = 100);
  *display: block;
  -webkit-transition-delay: 10ms;
  -moz-transition-delay: 10ms;
  -o-transition-delay: 10ms;
  transition-delay: 10ms;
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}





.hotspot .content .links li, .hotspot .content .links li span {
    word-break: normal; /* break-all; */
	color: #333;
}
.hotspot .content .links ul {line-height: 0.5em;}
.hotspot > .content > .links > li, .hotspot > .content > .links > li > a, .hotspot .content .links li span {
	text-transform: none;
	font-size: 24px;
	line-height: 1em;
  font-weight: bold;
  color: #000;
}
.hotspot > .content > .links > li > a {
	color: #000;
  text-decoration: underline;
}
.pastille span {
    background: url(../img3m/social_4.png) no-repeat;    
}
.pastille.fr span {
    background-position: -750px 0;
}
.pastille.fr span.roll {
    background-position: -750px -50px;
}
.pastille.fr.active span {
    background-position: -750px -50px;
}
.hotspot > .content > .links {
    height: 200px;  /* .content = 200px, (igual que bubble), h2 top 20 + size 24 + line-h 1.8 (26.4), links 120 (empieza en 20+26), y despues tenemos aún replies... (40px: de 166px a  200px, con margin-botton: 20px. Tengo 14px para replies) */
}
.hotspot .content .links li {overflow-y: hidden;}



.hotspot.right.bombolla-black {
  float: left !important;
  text-align: left !important;
  left: 200px !important;
}
.hotspot.bombolla-black .content .links li span {
  color: white !important;
  font-size: 18px !important;
  font-weight: normal !important;
}



.touch #agence {
  height: 100%;
}

#main {
  height: 40000px;
}
.touch #main {
  height: 360px;
}



/* ajuste de all-rent-resp.css para Trancoso _responsive_, en iPad.*/
/* era:
.touch .pastille span.roll,.no-csstransforms .pastille span.roll{display:none}
.touch .pastille:hover span,.no-csstransforms .pastille:hover span{background-position-y:-50px}
*/
.touch .pastille span.roll,.no-csstransforms .pastille span.roll{display:block;}
.touch .pastille:hover span,.no-csstransforms .pastille:hover span{background-position-y:-50px;}

/* ajuste altura menu navegacion */
.navigation {padding-bottom: 0;}
iframe .navigation {padding-bottom: 34px;}
/* ajuste loading-container para que no se superponga a .navigation. */
#loading-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  opacity: 1;
  text-align: center;
  background-color: rgba(0,0,0,0.7);
}
iframe #loading-container {bottom: 34px; height: 100px;}

#loading-bar {
  position: absolute; 
  bottom: 0; 
  left: 0; 
  background-color: #1565C0; 
  background-color: rgba(21,101,192,0.5); 
  height: 100%;
}
iframe #loading-bar {bottom: 34px;}

#loading-text {
  position: absolute;
  top: 5px; /* 5px || calc(50% - 16px) */
  width: 40%;
  left: 30%;
  height: auto;
  opacity: 1;
  text-align: center;
}
iframe #loading-text {top: calc(50% - 16px);}

.loading_active {height: 50px !important;}
.loading_inactive {height: 0 !important;}
iframe .loading_active {height: 50px !important;}