/*inicio*/

/* hoja de estilos app */

/* Header */

body {
    width: 320px;
    height: 800px;
    margin: 0;
    font-family: sans-serif;
    
}


header {
    width: 100%;
    background: #3b8686;
}

#btn-menu {
    display: none;
}

header label {
    display: none;
    width: 30px;
    height: 30px;
    padding: 10px;
    border-right: 1px solid #fff;    
}

.menu ul {
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: flex-end;
}

.menu li {
    border-right: 1px solid #fff; 
}


.menu li:hover {
    background: rgba(0,0,0,0.3);
    
}
.menu li a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    
}


header label:hover {
    cursor: pointer;
    background: rgba(0,0,0,0.3);
}




@media (max-width:1600px) {
    
header label  {
        display: block;
    }
.menu {
    position: absolute;
    background: #3b8686;
    width: 15%;
    margin-left: -70%;
    transition: all 0.5s;
}

.menu ul {
    flex-direction: column;
}
    
    .menu li {
        border-top: 1px solid #fff;
        
    }
    
    #btn-menu:checked ~ .menu {
        margin: 0;
 
}
    
/* Slider */

.slider {
    width: 95%;
    margin: auto;
    overflow: hidden;
}

.slider ul {
    display: flex;
    padding: 0;
    width: 400%;
    animation: cambio 20s infinite;
    animation-direction: alternate;
}


.slider li {
    width: 100%
    list-style: none;
}


.slider img {
    width: 100%
}

@keyframes cambio {
    0% {margin-left: 0%;}
    20% {margin-left: 0%;}
    
    25% {margin-left: -100%;}
    45% {margin-left: -100%;}
    
    50% {margin-left: -200%;}
    70% {margin-left: -200%;}
    
    75% {margin-left: -300%;}
    100% {margin-left: -300%;}
    
}

/* Botones */

article {
    text-align: center;
    font-size: 20px;
    margin: 10px;
}


.contenedor {
    width: 320px;
    height: 480px;
    border: 2px solid #fff;
    color: #fff;
    
    line-height: 100px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    
}

.item {
    
}

.uno {
    background: #ff9c5b;
    width: 140px;
    height: 140px;
}

.dos {
    background: #fad089;
    width: 140px;
    height: 140px;
    
}

.tres {
    background: #f5bb4a;
    width: 140px;
    height: 140px;
    
    
}

.cuatro {
    background: #f5634a;
    width: 140px;
    height: 140px;
}

.cinco {
    background: #ff9c5b;
    width: 100%;
    height: 90px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 30px;
    text-align: center
}

.entorno {
    background: #0B486B;
    width: 100%;
    height: 90px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 30px;
    text-align: center

}

.seis {
    background: #0B486B;
    width: 100%;
    height: 60px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 30px;
    text-align: center
}


.siete {
    background: #fad089;
    width: 100%;
    height: 90px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 30px;
    text-align: center;
}

.siete a {
    text-decoration: none;
    
}

.ocho {
    background: #ed303c;
    width: 100%;
    height: 90px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 30px;
    text-align: center;
}


.texto {
    margin: 20px;
    text-align: center
                
    }
.texto h3 {
    color: #86bcac;
    font-size: 15px;
}

.texto p {
    color: dimgrey;
    font-size: 15px;
    font-family: ;
}

.mapa img {
      width: 100%;
    height: 500px;
    
}
#video, video{
    margin: 2px;
    width: 100%;
    height: auto;
}


.testimonio {
    margin: 20px;
    text-align: left;
                
    }
.testimonio h2 {
    color: #86bcac;
    text-align: center;
    font-size: 15px;
}

.testimonio p {
    color: dimgrey;
    font-size: 15px;
    font-family: ;
}
#main-container {
    width: 100%;
    height:50px;
    text-align: center;
}

.btn {
    border-radius: 3px;
    flex-direction: row;
    padding: 10px 15px;
    text-decoration: none;
}

.btn-testimonio {
    color: white;
    background-color: #86bcac;
        
}

/* Denuncia */

form {
    width: 300px;
    margin: auto;
    background: rgba(0,0,0,0.4);
    padding: 15px; 20px;
    box-sizing: border-box;
    margin-top: 20px;
    border-radius: 7px;
}


.formulario {
    width: 310px;
    height: 570px;
    background-image: url(fondo.jpg);
    background-size:35vw 80vh ;
    background-attachment: fixed;
    margin: 0;
    
    
}

form h2 {
    color: #fff;
    text-align: center;
    margin: 0;
    font-size: 30px;
    margin-bottom: 20px;
    font-family: 'Roboto Condensed', sans-serif;
    }

    form p {
        color: #fff;
        font-family: 'Roboto Condensed', sans-serif;
    }    
    
    
input, textarea {
    
    width: 100%;
    margin-bottom: 20px;
    padding: 7px;
    box-sizing: border-box;
    font-size: 17px;
    border: none;
}

textarea {
    min-height: 100px;
    max-height: 200px;
    max-width: 100%
    
}



#boton {
    background: #0B486B;
    color: #fff;
    padding: 15px;
    
}

#boton:hover {
    cursor: pointer;
}

/* Footer */
footer{background-color:#dadada; 
    width: 290px;
    margin:0.5rem; 
    padding: 0.5rem;
    font-family: 'Pavanam', sans-serif;
    font-size: 0.8rem}

.contenedor-pie{
    width: 250px;
    height: 60px;
    background-color:#dadada;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;  
    
    
}

.elemento {
    color: #fff;
    margin: 5px;
    background: #ed303c;
    text-align: center;
    width: 30px;
    height: 30px;
    
}

.elemento3 {
    width: 100px;
   
    
    }
    
     /* Test */

.test 
{margin: 2em 1em .2em 1em; 
display: flex; 
flex-direction: column; }


.test h1 
{font-size: 1em; 
padding: 0 1em; 
color: #F5634A;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-size: 1.18em;}


.listapreguntas 
{font-size: 1.1em; 
color:dimgrey;
font-family: 'Roboto Condensed', sans-serif;}


.pregunta 
{margin-top: 1.5em;}


.pregunta ul 
{margin-top: .8em}


.resultado 
{display: flex; 
justify-content: center; 
align-items: center; 
margin-top: 2em; 
margin-bottom: 2em; 
align-self: center; 
width: 150px; 
height: 50px;
background: #ED303C;}


.resultado a 
{align-content: center; 
color:aliceblue;
text-decoration: none;
font-family: 'Roboto Condensed', sans-serif;}

.siguiente 
{display: flex; 
justify-content: center; 
align-items: center; 
margin-top: 2em; 
margin-bottom: 2em; 
align-self: center; 
width: 150px; 
height: 50px;
background: #FF9C5B;}


.siguiente a 
{align-content: center; 
color:aliceblue; 
text-decoration: none;
font-family: 'Roboto Condensed', sans-serif;}


.resultadosi 
{display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
margin-top: 2em; 
margin-left: 1em; 
margin-right: 1em; 
color: dimgray;
font-family: 'Roboto Condensed', sans-serif;}


.resultadosi img 
{width: 250px;}


.resultadosi h1 
{text-align: center; 
font-size: 1.6em; 
color: #ED303C;
font-family: 'Roboto Condensed', sans-serif;}


.buscarayudaboton 
{display: flex; 
justify-content: center; 
align-items: center; 
margin-top: 2em; 
margin-bottom: 2em; 
align-self: center; 
width: 150px; 
height: 40px;
background: #FF9C5B;}


.buscarayudaboton a 
{align-content: center; 
color:aliceblue;
text-decoration: none;
font-family: 'Roboto Condensed', sans-serif;}



/* Campañas */

.campanas 
{text-align: center; 
    font-family: 'Roboto Condensed', sans-serif;}

.campanas img 
{width: 80%; margin: auto;}

.campanas p 
{padding: 1em; font-size: 20px}

.campanas h1
{color: #0B486B;}

.campanas h2
{color: #3B8686;}

#compartir 
{width: 6.4em;
height: 2em;
background-color: #CFF09E;
align-self: center;
margin: 0 auto; 
display: flex; 
justify-content: center; 
align-items: center;}

#compartir a 
{align-self: center; 
text-decoration: none; 
color: #3B8686;}


.detectar h1 
{text-align: center;
font-family: 'Roboto Condensed', sans-serif;
color: #79BD9A;
padding: 1em;
font-weight: 100;}

.detectar 
{display: flex; 
flex-direction: column;
align-items: center;}

.detectar img 
{width: 80%;}

.detectar p
{text-align: left; padding: 1em;
font-family: 'Roboto Condensed', sans-serif;
font-size: 17px;}

/* Menú de Entorno */

article {
    text-align: center;
    font-size: 20px;
    margin: 10px;
}


.contenedor2 {
    width: 320px;
    height: 480px;
    border: 2px solid #fff;
    color: #fff;
    
    line-height: 100px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.item {
    
}

.uno2 {
    background: #CFF09E;
    width: 140px;
    height: 140px;
}

.dos2 {
    background: #79BD9A;
    width: 140px;
    height: 140px;
    
}

.tres2 {
    background: #358786;
    width: 140px;
    height: 140px;
    
    
}

.cuatro2 {
    background: #A8DBA8;
    width: 140px;
    height: 140px;
}

#columna1 {display: flex;}
#columna2 {display: flex;}