@charset "utf-8";

* { 
    padding: 0;
    margin:0;
    border:0;
    box-sizing:0;
    outline: 0;
    text-decoration: none;
    }





Head{
  font-family: 'Nunito', sans-serif;  
font color: white;
}

header {
    background-color: #EC683F;
    align-content: center;
    height: 3em;
    margin: 0;
}

form input {
    display: block;
    margin: auto;
    margin-bottom: 1em;
    align-content: center;
    padding: .3em;
    background-color: #EC683F;
    color: white;
     width: 16em;
    text-align: center;
    border-bottom-color: white;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

form placeholder {color:white;}

form button{ display: block;
    margin: auto;
    align-content: center;
    padding: .3em;
    background-color: white;
    color:#EC683F;
    width: 13.5em; 
}
.nuevo{display: block;
    margin: auto;
    align-content: center;
    text-align: center;
    padding: 2em; 
 font-size: .8em;
    width: 16em;

}
.logogrande img {
    height: 50%;
    display: block;
    margin:auto;
    width: 50%;
    justify-content: center;
    margin-top: 4em;
}

.inforeducir{
    font-size: .7em;
    list-style:square;
    margin-left:3em;
    padding: .3em;
  
}
.logochico img {
    display: block;
    padding: 1em;
    margin: auto;
    margin-top: 3em;
     }
.logo img {
    height: 2em;
    padding: .5em;
    width: auto;
    display: block;
    justify-content: center;
    margin: auto;
    vertical-align: middle;
}
.logochicosolo img {
    display: block;
    margin: auto;
    height: 6em;
    margin-top: 3em;
    margin-bottom: 3em;
    }
.logobienvenido { margin-top: 3em;
margin-bottom: 3em;}
.principal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #EC683F;
    }

.opacidad {
     position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #efefee;
    z-index: 977;
    opacity: 0.6;
    }
    

.logochico { 
height: 35%;
    display: block;
    margin:auto;
    width: 35%;
    justify-content: center;
    align-content: center;
    
}


.popupinfo { display: block;
margin: auto;
margin-top: 50%;
margin-right: 3em;
margin-left: 3em;
    background-color: #d8d8d8;
    padding: .5em; 
    padding-left: 1em;
    padding-right: 1em;
}


.popuptitulo { color: #EC683F;
    text-align: center;
justify-content: center;
margin-top:0;
z-index: 999;}

.cerrar { color: #efefee;
    font-size: 10px;
    text-align: center;
    padding-bottom: 0;
    margin-bottom: 0;
    z-index: 998;
}
body {background-color: #D8D8D8;
     font-family: 'Nunito', sans-serif;
    
}  



.menuabajo {
  display: flex;
  justify-content: center;
     position: fixed;
    bottom: 0;
    right: 0;
    left:0;
    z-index: 9999;
    background-color: #efefee;
    
    }

.menuabajo img { height: 30px;
    width: 30px;
}


  .nav {
    display: flex;
 align-items: flex-start;
background-color: #efefee;

}





  .nav li {
       padding: .7em;
    height:.5em;
    color: darkgrey;
    list-style-type: none;
      margin-bottom: 1.2em;
   
}


h1 {font-size: .8em ; 
    margin: 0;
    margin-top:1em;
    border-bottom-color: #EC683F;
    border-top-style: solid;
    
}
 

.tituloprimero {margin: 0.3em;
padding: .3em;
font-weight: 600;
    font-size: .7em;
    text-underline-position: below; text-decoration: underline; text-decoration-color: #EC683F;
}





figure img {
    height: 3em;
    width: auto;
    
}

.tituloform {margin-left: .4em;
font-weight: 600;
    font-size: .7em;
    text-underline-position: below; text-decoration: underline; text-decoration-color: #EC683F;}

.buttonintegrante {display: flex;
align-content: flex-start;}
    
.naranja {color: #EC683F;
    font-size: 23px;
}

.formgrupo {
    display: inline;
    color: white;
     width: 16em;
    margin-left: 0;
}

.formgrupo input {
    background-color:#d8d8d8;
}
.invitarmiembro {text-align: center;
margin-bottom: 1em;}

button {background-color:#efefee;
    display: block;
padding: .75em;
margin-left: .5em;
border-radius: .3em;
 
     margin-top: 1em;
}

.botones {
    list-style: none;
    display:inline; 
    margin: .1em;
}



.botones > li {
    width: 85vw;
    background-color: #efefee;
    border-radius: .3em;
     display: block;
margin-left: .5em;
    
}

.buttonform {
   display: inline;
    width: auto;
    list-style: none;
    margin: .4em; 
    text-align: left;
    color: black;
}




.cerrar {color: black;
margin: .7em;}

.contenedorbotones{
  top:0;
  padding: 0;  
    margin-top:-1em;
}

.contenedorbotonesform {
  margin-top: 1em; 
}


iframe { display: block;
margin: auto;
width: 85vw;}

.accesodirecto {
    margin-left:.5em;
    margin-right: .5em;
    margin-bottom: 0;
    justify-content: space-between;
    margin-top: .6em;
    flex-wrap: wrap;
    align-items: flex-end;
    
}

@media only screen and (max-width: 600px) {
    .accesodirecto {
        column-count: 2;
        margin-left: 3.5em;
 }
    
    
    
}
.masusados { border-radius: .3em;
justify-content: space-around;
height: 60px;
width: 60px;
 font-size: .7em; 
 font-weight: 400;}

figure {
   
    margin: .3em;
    padding: .5em;
    width: 4em;
    height: 4em;
    display: inline-block;
text-align: center;
   
}

.parrafopop {
    color: black;
    font-size: .7em;
    text-align: justify;
    text-align: left;
    margin: .5em;
    padding: .5em;
    margin-top: 1em;
}

.aceptar {
    
    font-size: .7em;
    background-color: aliceblue;
    display: inline;
    padding: .3em;
    border-radius: .3em;
    margin: .4em;
}
.prendido {
    font-size: .7em; 
    background-color: #efefee; 
     font-weight: 600;
}

figure:hover { 
    background-color: #efefee;
      cursor: pointer;
}

button:hover {
    cursor: pointer
}



.bienvenido {display: block;
    margin: auto;
    align-content: center;
    text-align: center;
 font-size: 1em;
    color: white;
    padding-bottom: 1em;
}

.tucasa {
    background-color: #efefee;
    display: flex;
    align-content: flex-start;
    padding: .1em;
    margin: auto;
}
.titulotucasa {font-size: 20px;
font-style: normal;
    width: 120px;
    font-weight: 600;
    color: #EC683F;
margin: .3em;
    margin left: 2em;
    padding: .3em;
    text-align: center;
     white-space: nowrap;
}

.textotucasa { font-size: 9px;
font-weight: 300;
 padding: .5em;
margin: auto;
    
}

.contenedorsolapas {
    
    border-bottom: 1px;
    border-bottom-color:#efefee;
    border-bottom-style: solid;
    margin-bottom: .5em;
}

.solapas {  position: relative;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;}

.solapa { display: block;
            padding-left: 1em;
            padding-right: 1em;
            padding: .4em;
            text-align: center;
          ;}


.textosolapa {  display: inline-block;
                vertical-align: middle;
                cursor: pointer;
                font-weight: 600;
                font-size: 10px;
color:gray;}

.consumo {display: flex;
margin: auto;
    padding-left: .4EM;
    align-content: space-around;
    font-size: .7em;
    
}

.consumodiario {font-size: .7em;
font-weight: 550;
    padding: .2em;
    padding-left: 3em;
    margin: 0;
    
}

.bloqueconsumo {
    display: flex;
    margin: auto;
    padding: .5em;
 
}

.kw {font-size: .5em;
color: #EC683F;
    padding: .1em;
     padding-left: 4em;
    margin: 0;
    }
 
.bateria {
    display: inline-block;
 font-size: 60px;
    color:gray;
}
    
.primerpiso { background-color: #efefee;
    display: flex;
    align-content: flex-start;
    padding: .1em;
    margin: auto;
    }

.integrante {background-color: #efefee;
    display: flex;
    align-content: flex-start;
    margin: auto;
    }


.flecha
{color: #EC683F;
align-self: center;
    padding:.5em;
text-align: center;
vertical-align: middle;
margin-top: .6em;}


.mapa{
    margin: 1em;
    width: 85%;
    padding: auto; 
    align-content: center;
    text-align: center;
}

footer { font-size: .5em;
    text-align: center;
    margin: 2em;
    display: block;
    position:fixed;
    bottom: 0;
    z-index: -1;
}

.mas {
    position: fixed;
    right: 2em;
    bottom: 5em;
width: 50px;
    height: 50px;}


.solapacolor {color:black;}

.ingresar { text-decoration: none;

}

.contenedorswitch{
    
    font-size: .5em;
    margin: 1em;
    padding: .5em;
    
 
    
}

.listaswitch {
    list-style: none;
}

.switch {
       font-weight: 400;
    padding: .3em;  
}

.encender {
    background-color: #efefee;
}

.botonswitch {
      width: 85%;
    border-radius: .3em;
    margin-bottom: .6em;
   
}

.botonswitch :hover {
        cursor: pointer;
    }

.textoinfo {
    margin: .3em;
    padding: .3em;
    z-index: 996;
}

.indextexto {display: block;
margin: auto;
margin-left: 3em;
margin-right: 3em;}

.textoindex {
    font-size: .5em;
    text-align: center;
    font-weight: 200;
    margin: .4em;
    padding: .4em; 
    color: #efefee;
    margin-top: 1em;
  
}

.index {
   display: flex;
   justify-content: center;
   align-items: center;
}

.item{
    margin-left: 2em;
}