/*Formateo general*/
*{
    margin: 0;
    padding: 0;
    font-weight: 20px;
}

body{
    font-size: 1.4em;
    max-width: 2000px;
    margin: auto;
}
main{
    min-height: 89.8vh; 
}
span{
    color: red;
}
/*Afectan al trastero*/

.mapwrap{
    display: flex; 
    justify-content: center;
    margin: 2em;
}
h1{
    text-align: center;
}

div.mapwrap {
    position: relative
}
ul.trasteros li {
    list-style: none;
    position: absolute;
    
    display: block;
    /*background-color: rgba(255, 0, 0, 0.5);*/
}
h2{
    text-align: center;
}
.mapwrap a{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
}
a[estado="ocupado"]{
    background-color: rgba(255, 0, 0, 0.5);
}
a[estado="libre"]{
    background-color: rgba(0, 255, 0, 0.5);
}
ul.trasteros li p {
    margin: 10px 0 0 0;
    padding: .3em;
    display: none;
    opacity: 0.65;
    position: absolute;
    top: 100%;
}
ul.trasteros li:hover p {
    display: block;
    color: black;
}
/* Trasteros ciudad melilla */
ul.ciudadmelilla li#t1 {
    width: 12.5%; height: 16.6%; top: 1.3%; left: 10.8%;
}
ul.ciudadmelilla li#t2 {
    width: 11.6%; height: 14%; top: 1.3%; left: 23.8%;
}
ul.ciudadmelilla li#t3 {
    width: 10.3%; height: 14.3%; top: 1.3%; left: 35.8%;
}
ul.ciudadmelilla li#t4 {
    width: 5.7%; height: 38.8%; top: 1.3%; left: 46.5%;
}
ul.ciudadmelilla li#t5 {
    width: 5.7%; height: 38.8%; top: 1.3%; left: 52.6%;
}
ul.ciudadmelilla li#t6 {
    width: 5.7%; height: 38.8%; top: 1.3%; left: 58.7%;
}
ul.ciudadmelilla li#t7 {
    width: 5.6%; height: 38.8%; top: 1.3%; left: 64.8%;
}
ul.ciudadmelilla li#t8 {
    width: 5.7%; height: 38.8%; top: 1.3%; left: 70.8%;
}
ul.ciudadmelilla li#t9 {
    width: 6.7%; height: 38.8%; top: 1.3%; left: 76.8%;
}
ul.ciudadmelilla li#t10-1 {
    width: 9.7%; height: 14.2%; top: 55.5%; left: 41.3%;
}
ul.ciudadmelilla li#t10-2 {
    width: 5.4%; height: 16.5%; top: 69.7%; left: 45.6%;
}
ul.ciudadmelilla li#t11 {
    width: 6%; height: 30.6%; top: 55.5%; left: 51.6%;
}
ul.ciudadmelilla li#t12 {
    width: 7%; height: 30.6%; top: 55.5%; left: 58%;
}
ul.ciudadmelilla li#t13 {
    width: 5.9%; height: 30.6%; top: 55.5%; left: 65.6%;
}
ul.ciudadmelilla li#t14 {
    width: 6.1%; height: 30.6%; top: 55.5%; left: 72%;
}
ul.ciudadmelilla li#t15-1 {
    width: 4.8%; height: 27.6%; top: 70.8%; left: 78.6%;
}
ul.ciudadmelilla li#t15-2 {
    width: 6.5%; height: 16.5%; top: 81.8%; left: 83.4%;
}
ul.ciudadmelilla li#t16-1 {
    width: 4.1%; height: 23.5%; top: 56.9%; left: 84%;
}
ul.ciudadmelilla li#t16-2 {
    width: 3.5%; height: 20.3%; top: 60.1%; left: 88.1%;
}
ul.ciudadmelilla li#t16-3 {
    width: 3%; height: 19.4%; top: 61%; left: 91.6%;
}
/* Trasteros joaquin navarro */
ul.joaquinnavarro li#t1 {
    width: 13.4%; height: 67%; top: 2.3%; left: 7%;
}
ul.joaquinnavarro li#t2 {
    width: 13.4%; height: 67%; top: 2.3%; left: 21.2%;
}
ul.joaquinnavarro li#t3 {
    width: 13.2%; height: 67%; top: 2.3%; left: 35.8%;
}
ul.joaquinnavarro li#t4 {
    width: 13.4%; height: 67%; top: 2.3%; left: 50%;
}

ul.joaquinnavarro li#t5 {
    width: 13.4%; height: 67%; top: 2.3%; left: 64%;
}
ul.joaquinnavarro li#t6 {
    width: 15.3%; height: 67%; top: 2.3%; left: 78.5%;
}

div .mapatrasteros{
    width: 90%;
    height: auto;
}
.mapa{
    position: relative;
    display: block;
    margin: 2em;
}
@media (max-width: 750px) {
.mapwrap{
    height: 100%;
    width: 100%;
    margin-top: 30%;
    margin-bottom: 30%;
    transform: rotate(90deg);
}

.mapa{
    margin: 0;
    
}
div .mapatrasteros{
    width: 90%;
}
}
/*registrarse*/
.mainregistrarse{
    display: flex;
    align-items: center;
    justify-content: center;
}
.formulario p{
margin: 1em 0 1em;
}
.formulario button{
    width: auto;
    height: auto;
    }
/*acceder*/
.maininiciarsesion{
    display: flex;
    align-items: center;
    justify-content: center;
}
.mainalquilar{
    display: flex;
    align-items: center;
    justify-content: center;
}
.mainlistaespera{
    display: flex;
    align-items: center;
    justify-content: center;
}
.mainclavesflex{
    display: flex;
    align-items: center;
    justify-content: center;
}
.textpinformativo{
    width: 0;
    display: inline;
}
form ul li{
    list-style: none;
}
.marco{
    border: solid 3px;
    text-align: center;
    
}
.formulario{
margin: 3em;
max-width: 393px;
}
button, .formulario label, .formulario input,fieldset  p, .formulario textarea {
    display: block;
    font-family: inherit;
    font-size: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 5px;
    height: 30px;
  }
  .formulario textarea{
      height: 5em;
  }
  button{
      margin-top: 1em;
      width: 30%;
      height: 20%;
  }
fieldset {
    padding: 1em 1em 1em;
    width: auto;
    height: auto;
  }

form{
    background-color: white;
}
/*Trasteros*/
.trasteros{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.imagentrastero img{
    max-width: 13em;
    
    margin: 2em;
}
.infotrasteros > *{
    padding: 1em;
}
.infotrasteros{
    margin: 5em;
}

.alquilar{
    padding: 0.5em 1.5em;
    margin: 1em ;
    background-color: rgb(0, 255, 0);
    border: solid 3px black;
    text-decoration: none;
    color: black;
    width: 8em;
}
.alquilar:focus, .alquilar:hover{
    background-color: rgb(116, 245, 116);
    color: black;
}
/*footer*/
footer{
    bottom: 0;
    position: static;
    background-color: #0f0f0f;
    display: flex;
    height: 3rem;
    width: 100%;
    color: white;
    align-content: center;
    justify-content: center;
}
footer .svg-inline--fa{
width: 1em;
}
footer ul{
    padding-top: 0.5em;
    list-style: none;
}
footer ul li{
    list-style: none;
    
}
/*Afectan al cabecera*/
header {
    background-color: rgb(0, 255, 0);
    
    top: 0;
    height: 4rem;
    /* z-index: 1; */
    font-size: 1.8rem;
    letter-spacing: -0.03em;
  }

  header img {
    width: 10em;
  }
.lilogo{
    margin-right: auto;
}

  header nav ul {
    flex-wrap: wrap;
    padding: 0.5em;
    display: flex;
    justify-content: flex-end;
    list-style: none;
    align-items: center;
  }
  header nav li {
    font-size: 1.3rem;
    margin: 0 0.2rem;
    padding: 0 1.5em;
    position: relative;
  }
header a{
    text-decoration: none;
    color: black;
}
header a:hover{
    color: grey;
}

@media (max-width: 1100px) {
header{
    height: 5rem;
}
}
/*menu */
@media (max-width: 750px) {
.hamburger{
    margin-left: auto;
    background-color:transparent;
	height:30px;
	width:30px;
	padding:20px 20px;
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
	-webkit-transition:-webkit-transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
	transition:transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
	z-index:1002;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
    
}
.hamburger.is-active{
  background-color:none;
}
._layer{
	background:#333333;
	margin-bottom:4px;
	border-radius:2px;
	width:28px;
	height:4px;
	opacity:1;
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
	-webkit-transition:all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
	transition:all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
}
.hamburger:hover .-top{
	-webkit-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	transform:translateY(-100%);
}
.hamburger:hover .-bottom{
	-webkit-transform:translateY(100%);
	-ms-transform:translateY(100%);
	transform:translateY(100%);
	}
.hamburger.is-active .-top{
	-webkit-transform:translateY(200%) rotate(45deg) !important;
	-ms-transform:translateY(200%) rotate(45deg) !important;
	transform:translateY(200%) rotate(45deg) !important;
}
.hamburger.is-active .-mid{
	opacity:0;
}
.hamburger.is-active .-bottom{
	-webkit-transform:translateY(-200%) rotate(135deg) !important;
	-ms-transform:translateY(-200%) rotate(135deg) !important;
	transform:translateY(-200%) rotate(135deg) !important;
}

.menuppal.is_active{
  transform: translate3d(0px, 0px, 0px);
}
.menuppal{
   background-color: rgba(25, 158, 8, 0.95);
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transform: translate3d(0px, -100%, 0px);
    transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98) 0s;
    width: 100%;
    z-index: 1001;
}
.menuppal ul{
  margin:0;padding:0;
  display: block;
}
.menuppal ul li { 
  list-style: none;
	text-align:center;
	font-family: Verdadna, Arial, Helvetica;
	font-size:1.5rem;
	line-height:3em;
	height:3em;
    color:black;
	text-transform:none;
	font-weight:bold;
}
.menuppal ul li a{
  text-decoration:none;
  color:black;
  display: block;
}
.menuppal ul li a:hover{
  text-decoration:none;
  color:#333;
}

fieldset {
    padding: 1em 1em 3em;
    min-width: 270px;
  }

}
/*tablas*/
td, tr, th, table{
border: solid 3px;
}
table{
    border-collapse: collapse;
}
.gestionar select, .gestionar input{
    border: none;
    background-color: transparent;
}
/*contacto*/
.contacto{
    display: flex;
    justify-content: center;
    align-items: center;
}
.contacto div{
    border: 1px solid;
    border-radius: 3px;
    width: 80%;
}
.contacto svg{
    width: 1em;
}
.contacto p{
    padding: 1em;
}
/*index*/
/* .mainindex{

} */
.funcionamiento{
    text-align: center;
    margin: 3em;
}
.lugares .selecione{
    text-align: center;
    margin: 3em;
}
.lugares h2{
    text-align: center;
    margin-bottom: 1.8em;
}
.lugares p{
    text-align: center;
    margin: 0.5em;
}
.lugares div{
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: 1em;
}
.lugares > div > div{
    position: relative;
    overflow: hidden;
    width: 15em;
    height: 15em;
    
}
.lugares > div > div img{
    width: 100%;
}
.lugares > div{
    display: flex;
    flex-wrap: wrap;
    
    
}
/* .lugares figure{
    position: absolute;
    text-align: left;
    padding: 10px 19px 19px 19px;
    width: 100%;
    height: 100%;
    border-top: 1px solid #fff;
    background: rgba(0, 0, 0, 0.90);
    bottom: -83%;
    transition: ease-in-out .4s;
    margin: 0 0 1rem;
    box-sizing: border-box;
    color: white;
    
}
.lugares img:hover {
    bottom: -16px;
}
.lugares figure:hover {
    bottom: -16px;
} */
.container {
    position: relative;
    display: block;
    min-width: 270px;
  }
  
  .direc {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay {
    position: absolute;
    bottom: -23px;
    left: -23px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    width: 100%;
    height: 20%;
    transition: .5s ease;
  }
  
  .container:hover .overlay, .container:focus .overlay {
    height: 100%;
  }
  
  
  .text {
      display: block;
        color: white;
        position: absolute;
        -webkit-transform: translate(0%, 30%);
        -ms-transform: translate(0%, 30%);
        transform: translate(0%, 30%);
        text-align: center;
  }
  .uldirec{
      list-style: none;
  }
.lugares a{
    color: white;
}
/* a[href*="http"]::after{

} */
/*Volver*/
.volver{
    text-align: center;
    margin: 1em;
}
/*Lista espera*/
.btnlistaespera{
    width: auto;
}
.mainespera{
    display: flex;
    justify-content: center;
    align-items: center;
}
.espera{
    display: grid;
    grid-template-columns: 1fr;
    
}
.espera *{
    align-self: center;
    justify-self: center;
}
.gif{
    padding-top: 1em;
    width: 5em;
    
}
.mostrarreservatrastero{
    border: solid 0.1em;
    margin: 0.1em;
}
/* administrar */
#ubicaciones, #trastero{
    overflow-y: auto;
    scrollbar-width: none;
    height: 28em;
    width: auto;
    
}
.muestradatos button{
    width: auto;
    min-width: 7em;
    height: 3em;
}
.muestraopciones button{
    width: auto;
    min-width: 7em;
    height: 3em;
}

.muestradatos{
    padding: 0 1em;
    justify-content: start;
    align-items: flex-start;
    display: inline-flex;
    flex-wrap: wrap;
}
.muestradatos button{
    width: auto;
    min-width: 7em;
    height: 4em;
}
.muestraopciones{
    text-align: center;
}
.muestraopciones button{
    display: inline;
}
.muestradatos div ul{
    list-style-type: none;
}
#visualdatos {
    padding: 1em;
    width: auto;
    word-break: break-all;
    max-width: 18em;
}
#visualdatos img{
    width: 12em;
}
.info{
    text-align: center;
    padding: 1em;
}
input[readonly]{
border: none;
}
.lugares h2{
font-size: 1.3em;
}
.comofunciona{
    display: flex;
    justify-content: center;
    align-items: center;
}
.comofunciona div{
    border: 1px solid;
    border-radius: 3px;
    width: 80%;
}
.comofunciona p{
    padding: 1em;
}
.comofunciona ul{
    list-style: none;
}
.proximamente{
    margin-top: 5em;
    margin-bottom: 5em;
}
.mainadministrar button{
    background-color: rgb(202, 255, 171);
}
/* Trasteros */
.maintrasteros{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}