@import url('https://fonts.googleapis.com/css2?family=Lobster+Two&family=Style+Script&display=swap');
body{
   background-color:rgba(0,0,0,0.9);
   text-align: center;
}
main{
   padding: 0 20px;
}
h1 {
   font-family: 'Style Script', cursive;
   font-size: 400%;
}

h2 {
   font-family: 'Style Script', cursive;
   font-size: 250%;
}

p {
   font-family: 'Lobster Two', cursive;
   font-size: 125%;
   font-weight:lighter;
   margin-bottom: 0;
}
p+img{
   margin-top: 1em;
}

/* Barra de navegación */

.navbar-brand {
   font-family: 'Style Script', cursive;
}

.nav-item {
   font-family: 'Lobster Two', cursive;
   font-size: large;
}
.texto-claro{color:white}


.border-info { 
   box-shadow: 0.5px 2px 4px 0.2px rgba(255,255,255,0.8);
}
.navbar-dark .navbar-nav .texto-blanco, a.texto-blanco{color:white;}
.navbar-dark .navbar-nav .texto-blanco:hover, a.texto-blanco:hover {

   color:white;
   text-shadow: 0 0 2px rgb(175, 231, 238);
   
}
/* Eslogan */

#eslogan {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 1;
   font-family: 'Style Script', cursive;
   text-shadow: 0.2em 0.2em 0.4em black;
}

@media screen and (min-width: 1400px) {
   #eslogan > h1 {
      font-size: 600%;
   }
   #eslogan > h3 {
      font-size: 400%;
   }
}   

@media screen and (max-width: 1399px) {
   #eslogan > h1 {
      font-size: 500%;
   }
   #eslogan > h3 {
      font-size: 333%;
   }
}

@media screen and (max-width: 1200px) {
   #eslogan > h1 {
      font-size: 400%;
   }
   #eslogan > h3 {
      font-size: 266%;
   }

}

@media screen and (max-width: 1000px) {
   #eslogan > h1 {
      font-size: 300%;
   }
   #eslogan > h3 {
      font-size: 200%;
   }
} 

@media screen and (max-width: 770px) {
   #eslogan > h1 {
      font-size: 200%;
   }
   #eslogan > h3 {
      font-size: 133%;
   }
}

.copyright {
   font-size: .7em;
   padding: 1em;
}

.pt-0{
   padding-top:0 !important; 
}
.pb-0{
   padding-bottom: 0 !important; 
   margin-bottom: 0 !important;
}

/*******************   PÁGINAS APARTAMENTOS BORRAR SI SLIDER **********************/
.rejilla{
   display:grid;
   gap:20px;
   grid-template-columns: repeat(2, 1fr);
   justify-items: center;
   align-items: stretch;
}
.ocupa2{
   grid-row-end: span 2;
}
.alignstart{
   align-self: start;
}
.alignend{
   align-self: end;
}

.lista-item{
   position: relative;
   display: block;
   text-decoration: none;
}

/******************* slider vertical tipo zara ***********/
#galeria{
   min-height: 560px;;
}
.miniaturas button{
   background-color: transparent;
   border:none;
   margin:1px;
}
.marco{
  border: 5px solid white;
}
.marco-sm{
   outline:1.5px solid white;
}
.junto{
   white-space: nowrap;
}