@import url('https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet');

* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
font-family: 'Dosis', sans-serif;
list-style: none;
}

body {
background-color: #1C90B0;
min-height: 100vh;
display: flex;
flex-direction: column;
margin-bottom: 10em;
}


h2 {
color: #6EA9A9;
text-align: center;
font-size: 200%;
margin: 0;
margin-top: 4em;
letter-spacing: 0.05em}

/* logo principal */
.tope1 {
display: flex;
flex-direction: column;
align-items: center;
}
.tope1 img {
max-width: 20em;
height: auto;
margin: 3em 1em 0em 1em;
}
.tope1 p {
color: white;
font-size: 1em;
}

.centrado {
flex-grow: ;
display: flex;
margin: auto;
flex-direction: column;
justify-content: center;
}


/* botones */
.boton1 {
    background-color: #002D47;
    color: #ffffff;
    padding: 1em 2em;
    margin: 0.5em;
    display: inline-block;
    align-self: center;
    width: 12em;
    border-radius: 1em;
    box-shadow: 0 0 0.5em grey;
    text-align: center;
}
.boton1 a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1em;
}
.boton2 {
    text-align: center;
    margin: 0.5em
}
.boton2 a {
    color: white;
    text-decoration: none;
    font-size: 1em;
}

.boton3 {
    background-color: #002D47;
    color: #ffffff;
    padding: 1em 2em;
    margin: 1em 0 0 6.5em;
    align-self: center;
    width: 12em;
    border-radius: 1em;
    box-shadow: 0 0 0.5em grey;
    text-align: center;
}
.boton3 a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1em;
}


/* panel superior */
.material-icons {
    color: white;
    margin: 0.5em;
    align-items: baseline;
    
}


/* barra navegacion */
.barra ul {
display: flex;
justify-content: space-evenly;
background-color: #3A3A3A;
position: fixed;
bottom: 0;
right: 0;
left: 0;
width: 100%;
opacity: 0.95;
}



/* inicio */
.whitebody {
    background-color: white;}

 
header {
background: linear-gradient(to right, #04678E, #6EA9A9);
display: flex;
justify-content:space-between;
padding: 0.5em}
    
#logo {
width: 70%;
margin:0;
padding: 0;
align-items: right;}

#menudesplegado {
background-color: #3A3A3A;
opacity: .95;
height: 100vh;
min-width: 40vw;
width: 10em;
display: flex;
position: fixed;
right: -50vw;
top: 0;
transition: all .6s ease;
z-index: 999;}

.iconos {
width: 2.5em;
height: 2.5em;
margin:0;
padding: 0;
}

#x {
position: absolute;
right: .5em;
top: 0.5em;}

header #menudesplegado:target {
right: 0;}

header {
display: flex; 
justify-content: space-between; 
align-items: center;
position: fixed;
top: 0;
width: 100%;
height: auto;
color: white;
text-transform: uppercase;
font-size: 1em;
}


nav ul li {  

color: white;
margin-left: 1.5em;
padding: 0.4em;
align-items: baseline;
letter-spacing: 0.05em;}

nav ul li a:hover {
color: #6EA9A9;}

nav ul li a {
color: white;
text-decoration: none;}

nav ul {
list-style-type: none;
text-decoration: none;
padding-top: 6em;
}

li {
display: flex;
flex-direction: column;
align-content: space-between;
}




.hora {
width: 100%;
display: flex;
flex-direction:row;
margin-right:1em;
margin-top: -2em;
padding-left: 1em;

}


#ubicacion {
color: black;
margin-left:-2em;
margin-top: -0.1em;
}


.ubicacion {
width: 100%;
display: flex;
flex-direction:row;
margin-right:1em;
margin-top: em;
padding-left: 1em;

padding-top: 5em;
}

.foto {
width: 100%;
display: flex;
flex-direction:row;
padding-left: -10em;
margin-top: 5em;
}





#denunciareloj{
    width: 55%;
    margin-top: -0.3em;}

#denunciaubicacion{
    width: 60%;
    margin-top: -0.3em;}

#denunciafoto{
    width: 40%;
    margin-top: -0.3em;
margin-left: 1em}
    

#denunciacomentario {
    width: 40%;
margin-left:1em;
margin-top: -0.1em;
}


.comentario {
width: 100%;
display: flex;
flex-direction:row;
padding-left: -10em;
margin-top: 5em;

    
}


h3 {
color: black;
text-align: center;
font-size: 110%;
font-weight: 100;
letter-spacing: 0.03em;
margin-left: -0.5em;
margin-top: 0em;}

h4 {
padding-left: -10em;
margin-left: -0.1em;
color: black;
font-size: 110%;
font-weight: 100;
letter-spacing: 0.03em;


    
    
}


p {
    display: flex;
    flex-direction:column;
    font-size: 400%;
    font-weight: bold;
}



#iconoubicacion {
    margin-top: 8.3em;
    width: 75%;
}



#iconocomentario {
    margin-top: 4.5em;
    width: 68%;
}


textarea {
display: flex;
margin-top: 2em;
font-size: 70%;
background-color: ghostwhite;
width: 212%;
height: 10vh;
display: flex;
letter-spacing: 0.05em;
}






.barrasuperior {
    margin-left: -0.5em;
    margin-top: -0.8em;
    width: 100%;
    height: 0%;
    background-color: #1C90B0;
    flex-direction:row;
    align-content: center;
    justify-content:space-around;
    padding: 1em; 
    display: flex;
    box-shadow: 1px 1px 5px #000;
    align-items: center;
    }

header {
    max-width: 100%;
    position: fixed;
    bottom: 100;
    width: 100%;
}


a {
 color: white;
    text-decoration: none
}






input #calendario {
display: flex;
font-size: 50%;
width: 40%;
margin-top: 0.5em;
}

#cargarfoto {
display: flex;
font-size: 90%;
letter-spacing: 0.1em;
width: 100%;
height: 50%;
padding-top: 2em;
margin-left: -0.2em;

}



#calendario {
display: flex;
font-size: 100%;
background-color: #3A3A3A;
color: white;
letter-spacing: 0.11em;
margin-top: 1.3em;
margin-left: -0.5em;
padding-left: 0.8em;
padding-top: 0.4em;
padding-bottom: 0.4em;   
}




li i {
    display: flex;
    flex-direction: row;
}

iframe {
    display: block;
    margin: auto;
    margin-top: 1.5em;
    width: 100%;
    height: 35vh;
}

button {
    margin:auto;
    margin-top: 2.5em;
    width: 40% ;
    height: 30px;
    display: flex;
    text-align: center;
    margin-bottom: -5em;
    font-size: 100%;
    justify-content: center;
    background-color:#3A3A3A;
    border-bottom-color: none;
    border-radius: 0.89em;
}

.contenedor1 {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 5em;
}