@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700');
body{
    font-family: 'Montserrat', sans-serif;
    min-width:340px;
    min-height:640px;
    background-color:white;
    
}
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}



/*
.contenedor {
    width:100%;
    height: 100%; 
*/

/*
    display:flex;
    flex-direction:column;
    align-items:center;
*/

}


a {
    text-decoration:none;
}


/* HEADER */

header {
    
    background: linear-gradient(to right, rgba(176,71,221,1) 0%, rgba(0,255,255,1) 100%);
    width:100%;
    height:50px;
    padding:auto;
    
}

#header {
    
    height:50px;
    width:90%;
    margin:auto;
    
    /*Flex*/
    
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    align-items:center;
    align-content:center;
        
}

.logo{
    
    margin:auto;      
}


/* TIPOGRAFIA */

h1 {
    
    color:rgba(176,71,221,1);
    font-size:14px;
    padding:10px;
    text-align: center;
    margin-top:20px;
    margin-bottom:10px;
}

h2 {
    
    color:white;
    font-size:12px;
    text-align: center;
    text-decoration:none;
    
}


/* GALERIA */


.galeria {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width:100%;
    margin-bottom:30px;
    
/*    transition: all 1s ease;*/
}

.galeria figcaption span {
    display: block;
    font-size: 12px;
    color: black;
    text-align:center;
    margin:10px;
}

.galeria img { display: block; }

/*
.fondodestacado {
    background-color: lightcoral;
}
*/
/*
.galeria h3 {
    width: 100%;
    padding: 1em;
}
*/
/*
.galeria figure {
    position:relative;
    overflow: hidden;
    flex-grow: 1;
}
*/
/*.galeria figcaption {

    background-color: rgba(0,0,0,.5);
    border: solid 2px rgba(0,0,0,0);
    border-radius: 0 0 0 0;
*/
/*
    padding: .5em;
    line-height: 1.25em;
    position: absolute;
    height: 100%;
    top: calc(100% - 2em);
    left: 0;
    right: 0;
    transition: all .5s ease;
*/
/*
.galeria figure:hover figcaption {
    background-color: rgba(2, 2, 2, 0.63);
    
    border-radius: 5em 5em 0 0;
    padding: 1em;
    text-align: center;
    top: .5em;
    left: .5em;
    right: .5em;
    transition: all .3s ease-out;
}
*/


/* MENU */

#llamamenu {
    background-color: rgba(0, 0, 0, 0.26);
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    height: 2em;
    width: 2em;
    position: relative;
    z-index: 9999;
    
*/

    /* caja flexible */
    display: flex;
    /* centrado en la horizontal */
    justify-content: center;
    /* centrado en la vertical */
    align-items: center;
}


/* menu desplegable */


header nav {
    background-color: rgba(160, 80, 145, 0.63);
    color: white;    
    position: fixed;
    right:-110vw;    
    top: 0;
    height: 50vh;
    min-width: 50vw;
    transition: all .3s ease;
    z-index: 9;
    
}

header nav.menuvisible {
    right: 0;
    transition: all .6s ease;
    left:50vw;
    height:50vh;
    display:flex;
    flex-direction:column;
    justify-content: space-around;
}


header nav a {
    color: white;
    font-weight: 600;
    font-size:12px;
    display: block;
    padding: .5em 1em;
    text-align: center;
    text-decoration: none;
    list-style: none;
}

header nav a:hover {
    color: white;
}

li {
    
    list-style:none;
    background-color:rgba(0, 0, 0, 0.17);
    padding: 10px;
    margin-top:5px;
    margin-bottom:5px;
}

header nav a {
    
    color:white;
    margin-left:10px;
    font-size:12px;
    font-weight: 600;
}

/*BOTONES*/

.items {
    
    height: 40px;
    
    margin:auto;
    margin-top:25px;
    width:90%;
    
    text-decoration:none;
    border-radius:50px;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align: center;
    justify-content: center;
    
    box-shadow: 5px 5px 10px -5px rgba(160,80,146,0.87);
    
    background-color: #b046dd;
    
}

a{
    
    text-decoration: none;
}

.items:hover{
    
    background-color:rgba(142,200,236,1);
}


/* PANTALLA 0 */

#fondo {
    
    background: linear-gradient(to bottom, rgba(176,71,221,1) 0%, rgba(0,255,255,1) 100%);
    width:100%;
    height:100%;
    
    
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content:space-around;
}


.img {
        
    padding-top:200px;
}

#ingresar {
    
    width:40%;
    color:white;
    font-weight:600;
    font-size:12px;
    text-align: center;

    
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
  
}
.loader {
  color: #ffffff;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

/*FORMULARIO*/

form {
    
    align-items:center;
}

form div label {
    color:#57acea;
     font-size:14px;
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    max-width: 90%;
}

input { width: 320px;
height: 30px}

select { width: 320px;
height: 30px}

.formulario {
    
    display:flex;
    flex-direction:column;
    
    align-content: center;
    align-items:center;
    padding:20px;
    
}

 input[type="submit"]{ background:#57acea; text-align: left; padding-left: 10px;}

  input[value="Seleccionar archivo"]{color: white;font-size:12px;
    font-family: "Montserrat", sans-serif;}
input[value="Listado de escuelas técnicas"]{color: white;font-size:12px;
    font-family: "Montserrat", sans-serif;}
input[value="Listado de hospitales"]{color: white;font-size:12px;
    font-family: "Montserrat", sans-serif;}
p{
    text-align: center; 
     font-size: 13px;
    margin: 10px;
}

.listado{
    
height: 24px;
background:#57acea; 
text-align: left; 
padding-left: 10px;
color: white;
font-size:12px; 
text-decoration: none;
padding-top:4px;
box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.75);

    
    
}

.ok{
    
    
    text-align: center;
}


/*fin form*/



/*direcciones*/

.zona { margin:10px;
    color:#57acea;
    font-size:16px;
    font-family: "Montserrat", sans-serif;
    font-weight: bold; }

h4 { color:#57acea;
     font-size:13px;
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    text-decoration: none;
    }
    
h5 {
     font-size:13px;
    font-family: "Montserrat", sans-serif;
    font-weight: lighter;
    text-decoration: none;
    color:black;
    }

.direcciones {margin:10px;
    text-align:center;
    color:black;
    font-size:14px;
    text-decoration:none;
     }

.direcciones {

    
    width:90%;
    border: 1px;
    padding: 5px;
    background-color:white;
    border-radius:5px;
    margin-bottom:10px;
    border: 1px solid rgba(0, 0, 0, 0.13);

    
    display:flex;
    flex-direction:column;
    align-content:center;
    align-items:center;
    margin:auto;
    
    box-shadow: 5px 5px 10px -5px rgba(160,80,146,0.87);
    
}

    
    .direcciones:focus-within{
        
        background-color:rgba(87, 172, 234, 0.6);
    
}

.direcciones:enabled :checked{
        
        background-color:rgba(87, 172, 234, 0.6);
    
}

/*tic*/

aside{ display: flex;
align-content: center;
justify-content: center;
    
}

#body{
    
    
    display:flex;
    flex-direction:row; 
    flex-wrap: wrap;
    align-content:center;
    align-items:center;
    width:220px;
}
    
.sub{
    
    width:100px;
    min-height: 100px;
    margin:5px;
     
}

.titulo{
    
    width:100;
    height: 100px;
    overflow:hidden;
    border-bottom:1px solid white;
    border-radius:20px;
    color:rgb(255, 255, 255);
    background-color:rgba(176,71,221,1);
    display:flex;
    align-items:center;
    text-align: center;
    justify-content: center;
    text-decoration: none;
    
    box-shadow: 5px 5px 10px -5px rgba(160,80,146,0.87);
}

.titulo:hover{
    
    background-color:rgba(160,80,146,0.87);
}

/*CAJAS*/

.caja {

    
    width:90%;
    border: 1px solid rgba(0, 0, 0, 0.13);
    padding: 5px;
    background-color:white;
    border-radius:5px;
    margin-bottom:10px;
    padding-bottom:10px;

    
    display:flex;
    flex-direction:column;
    align-content:center;
    align-items:center;
    margin:auto;
    
    box-shadow: 5px 5px 10px -5px rgba(160,80,146,0.87);
    
}

.recomendaciones {
    
    background-color:white;
    list-style: circle;
    text-align:left; 
    font-size: 13px;
    margin: 10px;
    max-width: 250px;
}

.main{
    
    max-width: 220px;
    margin:auto;
}


}
/*
.formulario {
    
    display:flex;
    flex-direction:column;
    
    align-content: center;
    align-items:center;
    
    padding:20px;
    max-width: 320px;
    
}
*/
    

/*
main{
    max-width: 90%;
}
*/






/*





.main article {
    
    text-align: center;
    padding:10px;
    display:flex;
    flex-direction: column;
    align-content: center;
    
}

iframe{
   margin:auto;
   align-content:center;
   
   
}


h4{
    text-align: center;
    padding:20px;
    font-weight: 300;
}

h5 {
    
    text-align:center;
}

input[type=text] {
border: 1px solid black;
  border-radius: 2px;
    align-content:center;

  -webkit-appearance: none;
}

input[type=submit]{
    width:20px;
border: 1px solid black;
  border-radius: 2px;
 
 background color:black;

  -webkit-appearance: none;
}


    
}
.main a{
    
    margin:30px;
    
    display:flex;
    flex-direction:column;
    align-items:center;
    
    
    text-decoration:none;
    text-align: center;
    color:crimson;
    padding:10px;

}







.items:hover{
    
    background-color:rgba(142,200,236,1);
}




.imagen {
    
max-width:95%;
*/
/*
display:flex;
align-content: center;
    padding:10px;
*/
    
/*
    
        
    }
}






/* reglas que se aplicarán cuando la ventana del navegador mida igual o más de 800px */
/*
@media (min-width: 50em) {
    
    .galeria {
        margin-top: 1em;
    }
    
    .galeria.fondodestacado {
        border-radius: 1em;
        padding: 1em;
    }
}
.bx-wrapper {max-height: 210px;}



div.items{z-index:1000}*/