* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a{
	color: azure;
}

body {
    font-family: "source sans pro","lato";
    background-color: #F26F6C;
    min-height: 100vh;

    /* caja flexible*/
    display: flex;

    /* dirección de sus elementos */
    flex-direction: column;
    
    /* organización de los elementos según el eje principal
        (vertical por la propiedad anterior) */
    justify-content: space-between;
}




img {
    /* para que nunca sea mayor que la caja que las contiene */
    max-width: 100%;
    height: auto;
}

ul {
	list-style: none; 
}

header, footer {
    background-color: #276B77;
    padding: .45em;
    position: relative;
    width:100%;
    
}


/*
----------------
encabezado
----------------
*/

header {
    /*height: 3em;*/
    
    /* caja flexible */
    display: flex;
    
    /* elementos colocados en los extremos del eje principal */
    justify-content: space-between;
    
    /* elementos centrados en el eje secundario */
    align-items: center;
    position: absolute;
    
}

#logo {
    display: block;
    width: 5em;
}

header > ul {
    /* caja flexible */
    display: flex;
}

/* ----- */

#menu3lineas{
	display: block;
	height: 1.5em;
	width: 1.5em;
}

#menu3lineas img{
	width: 100%;
}


/* menu desplegable */

header nav {
    font-family: Source Sans Pro 800;
    background-color: #1B2127;
    color: #787B86;
    
    /* para salir del "flujo de información" del fondo 
        y colocase en una capa superior fija */
    position: fixed;
    right: -50vw;
    top: 0;
    height: 100vh;
    min-width: 50vw;
    transition: all .6s ease;
    z-index: 999;
}


/* cuando cliqueamos el boton "menu3lineas"
el "target" es "nav#menu"
*/
header nav#menu:target {
    right: 0;
    
    /* transición suave */
    transition: all .6s ease;
}

.usuario {
    margin: auto;
    text-align: center;
    font-size: 75%;
    padding: 3em 1em 1em 1em;
    border-bottom: solid 1px rgba(255,255,255,.25);
}
.usuario img {
    border-radius: 50%;
    width: 25vmin;
    height: 25vmin;
    max-width: 15em;
    max-height: 15em;
    border: 4px solid gray;
    box-shadow: 0 .35em .5em rgba(0, 0, 0, .25) inset, 0 .35em .5em rgba(0, 0, 0, .25);
}


header nav a {
    color: rgba(255,255,255,.75);
    display: block;
    padding: .5em 1em;
    text-align: center;
    text-decoration: none;
}

header nav a:hover {
    color: #F26F6C;
}

/* boton "X" de cierre del nav */
#x {
    position: absolute;
    right: 0;
    top: 0;
    height: 3em;
	width: 3em;
}

/*COMIENZO INDEX-------------------------------------------------------------------------------------------------*/



.elcontenedordelindex {
    background-color: #276B77;
    padding-bottom: auto;
    padding-bottom: 18.5em;
}

.isologoparaindex{
    position: relative;
    width: 50vmin;
    height: 50vmin;
    max-width: 25em;
    max-height: 25em;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding-top: 8em;
}


.lemadelaapp{
    color: aliceblue;
    font-size: 1.2em;
    font-family: Source Sans Pro Light;
    text-align: center;
    padding-top: 5em;
    padding-left: 2em;
    padding-right: 2em;
}


/*
cuando la ventana del navegador mida
como mínimo 560px de ancho
*/
@media (min-width: 35em) {
    
    .lemadelaapp {
    font-size: 1.2em;
    padding-top: 8em;
    padding-left: 2em;
    padding-right: 2em;
    }
    
}
/*
cuando la ventana del navegador mida
como mínimo 1200px de ancho
*/

@media (min-width: 75em) {
    .lemadelaapp{
    font-size: 2em;
    padding-top: 4em;
    padding-left: 3em;
    padding-right: 3em;
    }
}


.saltearintro{
    color: #32363D;
    font-family: Source Sans Pro Light;
    text-decoration-line: underline;
    text-align: center;
    font-size: 1.2em;
    padding-top: 6em;
}


/*FIN INDEX-------------------------------------------------------------------------------------------------*/


/*COMIENZO HOME-------------------------------------------------------------------------------------------------*/
#container {
    padding-bottom: -30em;
    width:auto;
    height: auto;
   background: rgba(242,111,108,1);
background: -moz-linear-gradient(top, rgba(242,111,108,1) 0%, rgba(50,54,61,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(242,111,108,1)), color-stop(100%, rgba(50,54,61,1)));
background: -webkit-linear-gradient(top, rgba(242,111,108,1) 0%, rgba(50,54,61,1) 100%);
background: -o-linear-gradient(top, rgba(242,111,108,1) 0%, rgba(50,54,61,1) 100%);
background: -ms-linear-gradient(top, rgba(242,111,108,1) 0%, rgba(50,54,61,1) 100%);
background: linear-gradient(to bottom, rgba(242,111,108,1) 0%, rgba(50,54,61,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f26f6c', endColorstr='#32363d', GradientType=0 );
}


.isologotipoentero{
    position: relative;
    width: 50vmin;
    height: 50vmin;
    max-width: 25em;
    max-height: 25em;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding-top: 5em;
}


.homebotonera {
    padding: 6%;
    padding-bottom: 8em;
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
    justify-content:space-around;
    margin:auto;

    
}


.perfilbt {
    text-align:justify;
    background-size: contain;
    background-image: url(img/perfilfb.svg);
    background-repeat: no-repeat;
    align-content: center;
    background-color: #276B77;
  	height: 10em;
	width: 10em;
	margin: auto;
    margin-top: 1em;
    border-radius: 5%;
    text-align: center;
  

}

.pizarrabt {
    background-image: url(img/pizarrafb.svg);
    background-repeat: no-repeat;
    background-color: #276B77;
  	height: 10em;
	width: 10em;
	margin: auto;
    margin-top: 1em;
    border-radius: 5%;
}

.calcusueldobt {
    background-image: url(img/calcusueldofb.svg);
    background-repeat: no-repeat;
    background-color: #276B77;
    height: 10em;
	width: 10em;
	margin: auto;
    margin-top: 1em;
    border-radius: 5%;
    
}

.politicaspb{
    background-image: url(img/politicasfb.svg);
    background-repeat: no-repeat;
    background-color: #276B77;
    height: 10em;
	width: 10em;
	margin: auto;
    margin-top: 1em;
    border-radius: 5%;
    
}


.testpb{
    background-image: url(img/testfb.svg);
    background-repeat: no-repeat;
    background-color: #276B77;
    height: 10em;
	width: 10em;
	margin: auto;
    margin-top: 1em;
    border-radius: 5%;
    
}


.configpb{
    background-image: url(img/configfb.svg);
    background-repeat: no-repeat;
    background-color: #276B77;
    height: 10em;
	width: 10em;
	margin: auto;
    margin-top: 1em;
    border-radius: 5%;
    
}


.perfilbt:hover{
    background-color: #F26F6C;
    max-width: 40em;
    max-height: 40em;
    transition-duration: 0.4s;
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    opacity: 0.6;
}

.pizarrabt:hover{
    background-color: #F26F6C;
    max-width: 40em;
    max-height: 40em;
    transition-duration: 0.4s;
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    opacity: 0.6;
}

.calcusueldobt:hover{
    background-color: #F26F6C;
    max-width: 40em;
    max-height: 40em;
    transition-duration: 0.4s;
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    opacity: 0.6;
}

.politicaspb:hover{
    background-color: #F26F6C;
    max-width: 40em;
    max-height: 40em;
    transition-duration: 0.4s;
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    opacity: 0.6;
}

.testpb:hover{
    background-color: #F26F6C;
    max-width: 40em;
    max-height: 40em;
    transition-duration: 0.4s;
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    opacity: 0.6;
}


.configpb:hover{
    background-color: #F26F6C;
    max-width: 40em;
    max-height: 40em;
    transition-duration: 0.4s;
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    opacity: 0.6;
}

/*FIN HOME-------------------------------------------------------------------------------------------------*/


/*MAIN-------------------------------------------------------------------------------------------------*/

/* acá arranca parte nati------------------------ */
/* usuario: fotito+nombre+26años+C.A.B.A------------------------ */
.usuarionati {
    background-image: url(img/fondopantallaperfil.svg);
    background-attachment:fixed;
    background-size: 100%;
    font-family: Source Sans Pro Black;
    margin: auto;
    text-align: center;
    font-size: 85%;
    color: aliceblue;
    padding: 3em 1em 1em 1em;
}

.botonlapizyfoto{
    position: relative;
}

.fotoperfilbrenda{
    position: relative;
    border-radius: 100%;
    width: 50vmin;
    height: 50vmin;
    max-width: 25em;
    max-height: 25em;
   
}

.lapicitoparaperfilpatri{
    position:absolute;
    border-radius: 100%;
    width: 12vmin;
    height: 12vmin;
    max-width: 40em;
    max-height: 40em;
    transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.lapicitoparaperfilpatri:hover{
    background-color: #32363D; /* EL AZUL MENOS OSCURO */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    opacity: .6;
}

#bajadaedad{
    font-family: Source Sans Pro Medium;
    font-size: 180%;
}

#bajadazonal{
    font-family: Source Sans Pro Light;
    font-size: 150%;
}


/* Fin usuario: fotito+nombre+26años+C.A.B.A------------------------ */


/* Arranca Botonera nati */


.botoneranati {
    padding-top: 2em;
    padding-bottom: 2em;
    max-width: 75em;
    max-height: 0%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
  
.botonesperfil {
    color: #F26F6C;
    background-color:none;
    border-color: aliceblue;
    border-style: solid;
    padding: .3em;
    text-decoration-line: none;
    text-align:center;
    font-family: Source Sans Pro Light;
    font-size: 2em;
    list-style: none;
    border-radius: .5em;
    width: 60vmin;
    margin: .5em;
}

.botonesperfil :hover{
    color: #276B77;
    text-align:center;
    box-shadow: aliceblue;
    font-family: Source Sans Pro Black;
    border-radius: .5em;
    transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;

}

.botondenuncia{
    background-color:crimson;
    padding: .3em;
    text-decoration-line: none;
    text-align:center;
    font-family: Source Sans Pro;
    font-size: 2em;
    list-style: none;
    border-radius: .5em;
    width: 60vmin;
    margin: .5em;

}


.botondenuncia :hover{
    text-align:center;
    font-family: Source Sans Pro Black;
    border-radius: .5em;
    transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;

}


/*
------------------------------------------------
 "mediaqueries" para diseño multipantalla:
 reglas de estilo que SÓLO se aplican
 si se cumplen las condiciones entre paréntesis
 después de la instrucción "@media"
 y se encuentran entre las llaves
------------------------------------------------
*/


/*
cuando la ventana del navegador mida
como mínimo 560px de ancho
*/
@media (min-width: 35em) {
    
    .botoneranati {
    border-color: aliceblue;
    width: 20%;
    }
    
    .botoneranati:hover botoncomun {
        background-color: aliceblue;
        top: 0;
        transition: all .5s ease-in;
    }
}

/*
cuando la ventana del navegador mida
como mínimo 800px de ancho
*/

@media (min-width: 50em) {
    
    .botoneranati {
        margin-bottom: 2em;
    }
    
    .botoncomun {
        background-blend-mode: #32363D;
    }
    
}

/*
cuando la ventana del navegador mida
como mínimo 1200px de ancho
*/

@media (min-width: 75em) {
    .botoneranati{
        display: flex;
        flex-direction: row;
        max-width: 100%;
    }
}


/* Fin Botonera nati */



/* acá termina parte nati---------------------- */

/* acá arranca parte ANALIA------------------------ */

/*  test */



main {
width: 100%;
height: 100%;
margin: auto;
margin-top: -0.1em;    
padding-top: 2em;
padding: auto;

    
}

hr {
    width: 75%;
    margin: auto;
}


.fondotest {
bottom: -2.3em;
width: 100%;
height: 100%;
margin: auto;
padding-bottom: auto;
padding-top: 5em;
padding: auto;
background-image: url(img/bancodefotos/test/testana1salmon-01.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top;
position:fixed;  
}

a{
 text-decoration: none;   
}

.fondoana {
    margin-bottom: 10em;
    margin: auto;
    width: 100%;
    height: auto;

}

 .tituloybajadatest { 
    margin-top: auto;
    text-align: center;
 

}

.h1ana{
    color: white;
    font-family: Source Sans Pro, lato, sans-serif;
    
}

 .ptest {
     font-family: Source Sans Pro, lato, sans-serif;
     text-align: center;
     color:white;
     margin-top: 0.5em;
     margin-bottom: auto;
     margin-left: auto;
     margin-right: auto;
     width: 70%;
     height: auto;

         
}


.imgfondotest {
    width: auto;
    height: auto;
    background-size: 100% ;
        
}

/* ESTE BOTON ES DE LA PANTALLA TEST Y DE LA PANTALLA PREGUNTA*/

.botoncomun {
    border-color: aliceblue;
    border-style: solid;
    width: 15em;
    border-color: aliceblue;
    border-radius: .5em;
    color: aliceblue;
    margin: auto;
    margin-top: -.2em;
    padding-top: 1.3em;
    padding-bottom: 1.2em;
    background-color: #276B77;
    text-align: center;
    
    }

span{
    font-family: Source Sans Pro Light;
    font-size: 2em;
    }

.botoncomun:hover{
    color: #276B77;
    background-color: aliceblue;
    opacity: .6;
}


.iniciatest {
text-align: center;
}







/* fin primera pantalla ana*/


/* pantalla de pregunta 10 ana*/

.fondozigzag{
    width: 100%;
    height: 100%;

}


.padreana {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content:center;
    text-align: center;  
    position: relative;
    padding: 2em;
 
}


.circuloana {
    border-style: aliceblue;
   	height: 5em;
	width:5em;
	border-radius: 100%;
	background-color: none;
    padding-top: auto;
    width: 25vmin;
    height: 25vmin;
    max-width: 10em;
    max-height: 10em;
    position: relative;
   
}

span{
    font-size: 
}


.circuloana:hover {
    font-family: source sans pro Black;
    background-color: #276B77;
    transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}


.circuloana:visited {
    font-family: source sans pro Black;
    color: #276B77;
}

h4 {
text-align: center;
padding-bottom: 1em;

padding-top: 1.5em;}

a:link{
    text-decoration:none;
    
}



/**** INICIO CALCULADORA DE SUELDO PATRICIA ****/

.tituloybajadacalcusueldo{
    width: 6em;
    height: 8em;
    align-items: center;
}


.fondocalculadora {
bottom: -2.3em;
width: 100%;
height: 100%;
margin: auto;
padding-bottom: auto;
padding-top: 6em;
padding: auto;
background-image: url(img/fondocalcusueldo.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top;
    
}


.listadesplegable {
    text-align: center;
}

.barradesplegable{
    font-size: 1em;
    color: #276B77;
    font-weight: 700;
    width: 80%;
    padding: 1em;
    border-radius: .5em;
    align-items: center;
    text-align: center:

    
}

/**** FIN CALCULADORA DE SUELDO PATRICIA ****/


/**** VIDEOS/PIZARRA ****/

.videoresponsive{
    position: relative; /*todos los elementos hijos se posicionarán en relación a él como padre.*/
    margin: 0rem;
    height: 0; /*la altura se la daremos con el aspect ratio, es necesario que esté para el IE*/
    padding-bottom: 56.25%; /*Le da la proporción al video. Este porcentaje significa que el alto es el 56.25% del ancho. Válido para widescreen 16:9 (Dividimos 9 por 16=0.5625 o 56.25%)*/ 
    
}

.videoresponsive iframe{
    position:absolute; /*se posiciona como hijo y así funciona el truco del padding.*/
    height: 100%; /*se ajusta a todo el alto y ancho de la caja que lo contiene*/
    width: 100%;
    top: 0px; /*se posiciona arriba y a la izquierda dentro de la caja que lo contiene*/
    left:0px;
    margin-top: 50%;
    margin-bottom: 2%;
    display: flex;
    padding: 1%;

}

/**** FIN PANTALLA VIDEOS/PIZARRA ****/


/*
----------------
PIEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE
----------------
*/

footer {
    position: fixed;
    bottom: 0;
    width:100%;
}
footer nav ul {
    list-style: none;
    
    /* caja contenedora flexible */
    display: flex;
    
    /* elementos separados */
    justify-content: space-between;
    
}


footer nav ul li {
    /* se les permite crecer para "llenar" toda la caja contenedora flexible "nav ul" */
    flex-grow: 1;
}

footer nav ul li:not(:first-child) {
    /*  todos los "nav ul li" 
        MENOS el que es "primer hijo" */
    margin-left: .25em
}

footer nav ul li a {
    background-color: #276B77;
  

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

    /* centrado en la vertical */
    align-items: center;
}



.boton1 {
    background-image: url(img/perfilblanco.svg);
    background-repeat: no-repeat;
    width: 2em;
    height: 2em;
}

.boton1:hover {
    background-image: url(img/perfilsalmon.svg);
    background-repeat: no-repeat;
    width: 2em;
    height: 2em;
}

.boton2 {
    background-image: url(img/pizarrablanco.svg);
    background-repeat: no-repeat;
    width: 2em;
    height: 1,5em;
}

.boton2:hover {
    background-image: url(img/pizarrasalmon.svg);
    background-repeat: no-repeat;
    width: 2em;
    height: 1,5em;
}


.boton3 {
    background-image: url(img/calcublanco.svg);
    background-repeat: no-repeat;
    width: 1,5em;
    height: 2em;
}

.boton4 {
    background-image: url(img/configblanco.svg);
    width: 2em;
    height: 2em;
}


.boton3 {
    background-image: url(img/calcublanco.svg);
    width: 2em;
    height: 2em;
}

.boton3:hover {
    background-image: url(img/calcusalmon.svg);
    width: 2em;
    height: 2em;
}


.boton4:hover {
    background-image: url(img/configsalmon.svg);
    
}


/*
------------------------------------------------
 "mediaqueries" para diseño multipantalla:
 reglas de estilo que SÓLO se aplican
 si se cumplen las condiciones entre paréntesis
 después de la instrucción "@media"
 y se encuentran entre las llaves
------------------------------------------------
*/


/*
cuando la ventana del navegador mida
como mínimo 560px de ancho
*/
@media (min-width: 35em) {
    
    .galeria figure {
        width: 20%;
    }
    
    .galeria figure:hover figcaption {
        background-color: rgba(60,0,60,.5);
        top: 0;
        transition: all .5s ease-in;
    }
}

/*
cuando la ventana del navegador mida
como mínimo 800px de ancho
*/

@media (min-width: 50em) {
    
       
}

/*
cuando la ventana del navegador mida
como mínimo 1200px de ancho
*/

@media (min-width: 75em) {
    .galeria {
        background-color: rgba(0,60,60,.15);
        
    }
}