/************************** 
Fondos 
**************************/
.balneari { 
  background-image: url('../pix/balneari.jpg'); 
  background-position: center center; 
  background-size: cover;
  background-repeat: no-repeat;

  height: 30em;
}

.productes { 
  background-image: url('../pix/productes.jpg'); 
  background-position: center center; 
  background-size: cover;
  background-repeat: no-repeat;

  height: 30em;
}

.instala { 
  background-image: url('../pix/instala.jpg'); 
  background-position: center center; 
  background-size: cover;
  background-repeat: no-repeat;

  height: 30em;
}

.serveis { 
  background-image: url('../pix/serveis.jpg'); 
  background-position: center center; 
  background-size: cover;
  background-repeat: no-repeat;

  height: 30em;
}

.habitacion { 
  background: url('../pix/hab.jpg'); 
  background-position: center center; 
  background-size: cover;
  background-repeat: no-repeat;

  width: 100%;
  height: 280px;
  margin-top: 80px; 
}

.contacte { 
  /* background-color: #284c79; */

  background-image: url('../pix/contacte.jpg'); 
  background-position: center center; 
  background-size: cover;
  background-repeat: no-repeat;

  height: 30em;
}

.avis { 
  background-image: url('../pix/avis.jpg'); 
  background-position: center center; 
  background-size: cover;
  background-repeat: no-repeat;

  height: 30em;
}

.listado { 
  background-image: url('../pix/listado.jpg'); 
  background-position: center center; 
  background-size: cover;
  background-repeat: no-repeat;

  height: 30em;
}

#mapid { 
  width: 100%;
  height: 25em;
  padding: 0;
  margin: 0;
  position: relative;
  display: block;
  border-top: 1px solid #284c79;
}


@media (max-width: 640px) {

  .balneari, 
  .instala,
  .serveis,
  .habitacion,
  .contacte,
  .listado,
  .avis { 
    background-size: auto; 
    background-position: center center;
  }
    
}

/************************** 
Base 
**************************/

/* 5 columnas */
.col-xs-5to,
.col-sm-5to,
.col-md-5to,
.col-lg-5to {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-5to {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5to {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5to {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5to {
        width: 20%;
        float: left;
    }
}



h3.titulo { 
  font-family: 'Open Sans', serif; 
  font-size: 24pt;
  font-weight: 700;
  line-height: 2em; 
  color: #8ea2b5;
}
p { font-family: 'Open Sans', serif; font-size: 12pt;}

section {
  height: auto;
  padding: 2em;
}

hr.clasic {
  background-image: url('../pix/separador.png');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
  border: 0;
  width: 30%;
  height: 30px;
}

hr.corta {
  width: 40%;
  color: white;
}


section.blue {
  background-color: #284c79;
  color: #fff;
}

.carousel-caption {
  background-color: rgba(0,0,0,.5);
  padding-left: 5px;
  padding-right: 5px;
}

/* Validate error */
input.error, 
input.error:focus {
  border-color: #a94442;
}
.error {
  color: #a94442;
}

.alert-blanco {
  color: #888;
  background-color: white;
  border-color: #555;
}
.alert-blanco hr {
  border-top-color: #555;
}
.alert-blanco .alert-link {
  color: #555;
}

.alert-dismissable .close,
.alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: black;
}

#mute {
  position: absolute;
  bottom: 1em;
  right: 1em;
  color: white;
  z-index: 1000;
}

/************************** 
Header
**************************/
header { margin: 0; padding: 0; }

.post-head {
  width: 100%;
  min-height: 1em;
  background-color: #284c79;
  color: #fff;
  padding: .5em;
  margin-bottom: 1em;
  font-family: 'Rajdhani', sans-serif;
  font-size: 40px;
}


/************************** 
HOME 
**************************/

.home {
  max-width: 100%;
  min-height: 100%;
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0, 0.3);
}

#background { width: 100%; height: 100%; position: absolute; z-index: -100; top: 0; left: 0; overflow: hidden;  }
#background video { position:absolute;  }
#background video.fillWidth { min-width: 100%; min-height: 100%; width: auto; height: auto; }


#home-content {
  position: relative;
  height: 100%;
}

.vcenter {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.vcenter h2, .vcenter h2 a { 
  color: white; 
  text-decoration: none; 
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 40px;
} 

.vcenter p { 
  color: white; 
  text-decoration: none; 
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
} 

@media (max-width: 640px) {
    .home {
      background-color: #1e2d4a;
      max-width: 100%;
      min-height: 100%;
      position: relative;

      background-image: url('../pix/home.jpg'); 
      background-position: center center; 
      background-size: cover;
      background-repeat: no-repeat;
    }
    #background video { font-weight: normal; display: none; }
}

@media only screen and (max-width : 768px) {
  #home-content { height: 100%; }
}

/**************************
Products
**************************/
.row.es-flex {
    display: flex;
    flex-wrap: wrap;
}
.row.es-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

.section-pro {
  width: 100%;
}

.pro-container {
  background: #fff;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .pro-container {
    padding: 4em 0;
  }
}
.pro-container .pro {
  width: 100%;
  background: Ivory;
  position: relative;
  float: left;
  margin-bottom: 30px;
  -webkit-box-shadow: 0px 0px 20px #DFDFDF;
  -moz-box-shadow: 0px 0px 20px #DFDFDF;
  -ms-box-shadow: 0px 0px 20px #DFDFDF;
  -o-box-shadow: 0px 0px 20px #DFDFDF;
  box-shadow: 0px 0px 20px #DFDFDF;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.pro-container .pro img {
  width: 100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.pro-container .pro img.sin-efecto {
  width: 100%;
}
.pro-container .pro:hover img, 
.pro-container .pro:focus img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.pro-container .pro:hover img.sin-efecto, 
.pro-container .pro:focus img.sin-efecto {
  transform: none;
}
.pro-container .pro .pro-image {
  position: relative;
  overflow: hidden;
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;
}
.pro-container .pro .pro-text {
  padding: 10px;
}
.pro-container .pro .pro-text h3 {
  font-size: 17px;
  margin-bottom: 15px;
  font-weight: 700;
}
.pro-container .pro .pro-text h3 a {
  color: #000;
}
.pro-container .pro .pro-text h3 a:hover {
  color: #1784fb;
}
.pro-container .pro .pro-text h3 a:hover, 
.pro-container .pro .pro-text h3 a:active, 
.pro-container .pro .pro-text h3 a:focus {
  text-decoration: none;
}
.pro-container .pro .pro-text p {
  font-size: 14px;
}
.pro-container .pro .pro-text p:last-child {
  margin-bottom: 0 !important;
}

.pro-container .pro .pro-preu {
  margin: 10px 10px 10px 15px;
  float: left;
  z-index: 2;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 25px;
}

.pro-container .pro .pro-reserva {
  margin: 0 10px;
  float: right;
}
 .pro-container .pro .pro-reserva i {
  margin-right: 1em;
 }

#servicios {
  clear: all;
  margin-top: 1em;
}

/**************************
banners
**************************/

.showcase {
  position: relative;
  overflow: hidden;
  margin-bottom: 2em;
}

.showcase img {
  width: 100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.showcase img:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.showcase .info {
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: #000; 
  filter:alpha(opacity=70); 
  opacity:0.7;
  text-align: center;
}

.showcase .info h4 {
  font-size: 1.3em; 
  letter-spacing: .1em;
  color: #fff;
  padding: .5em;
  text-transform: uppercase;
}


.showcase .info p {
  font-size : .7em; 
  color: #fff;
  padding: .5em;
}


/************************** 
serveis 
**************************/
#serveis-text dt { color: #284c79; }

.aloja {
  position: relative;
  border: 1px solid #CCC;
  border-radius: 8px;
  text-align: center;
  padding: 0;
  background-color: #284c79;
  color: rgb(136, 172, 217);
}
.aloja-img {
  background-position: center center; 
  background-size: cover;
  background-repeat: no-repeat;
  height: 270px;
}
.aloja-img img { width: 100%; z-index: -100; }
.aloja-text { height: 20px; }
.aloja a { color: #fff; }
.aloja a:hover { text-decoration: none; color: #fff; }


/************************** 
Peu 
**************************/
footer {
  padding-top: 1em;
  background-color: #262626;
  color: white;
  clear: both;
}

footer p {
  color: white; 
  text-decoration: none; 
  font-family: 'Monsterrat', sans-serif;
  font-size: 14px;
}

img { max-width: 100%; }


/************************** 
Botones 
**************************/

/************************** 
Spinner 
**************************/

div.loader {
   width: 100px;
   height: 100px;
   border-radius: 100%;
   position: absolute;
   border: 1px solid blue;
   animation: up 1s;
   animation-iteration-count: infinite;
   transition: 2s;
   border-bottom: none;
   border-right: none;
   animation-timing-function: linear;
   margin-left: -70px;
   margin-top: -70px;
   left: 50%;
   top: 50%;
}

@keyframes up {
   from {
      transform: rotate(0deg);
   }
   50% {
      transform: rotate(180deg);
   }
   100% {
      transform: rotate(360deg);
   }
}
#img2 {
   width: 90px;
   height: 90px;
   left: 50.35%;
   top: 50.7%;
   animation-delay: 0.2s;
}
#img3 {
   width: 80px;
   height: 80px;
   left: 50.7%;
   top: 51.4%;
   animation-delay: 0.4s;
}
#img4 {
   width: 70px;
   height: 70px;
   left: 51.05%;
   top: 52.1%;
   animation-delay: 0.6s;
}
#img5 {
   width: 60px;
   height: 60px;
   left: 51.4%;
   top: 52.8%;
   animation-delay: 0.8s;
}



/**************************
CSS para las cookies
**************************/
#barraaceptacion {
    display:none;
    position:fixed;
    left:0px;
    right:0px;
    bottom:0px;
    padding-bottom:20px;
    width:100%;
    text-align:center;
    min-height: 4em;
    background-color: rgba(0, 0, 0, 0.8);
    color:#fff;
    z-index:999999;
}
 
.inner {
    width:100%;
    position:absolute;
    padding-left:5px;
    font-family:verdana;
    font-size:12px;
    top:30%;
}
 
.inner a.ok {
    padding:4px;
    color:#00ff2e;
    text-decoration:none;
}
 
.inner a.info {
    padding-left:5px;
    text-decoration:none;
    color:#faff00;
}

@media (max-width: 768px) {

  #barraaceptacion {
    min-height: 6em;
  }
           
}