/* ----------------------------RESET---------------------------- */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
    
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
    font-family: 'Montserrat', sans-serif;
}
header {
    width: 100%;
    background-color: #033A20;
}

.boton {
    font-family:'Montserrat', sans-serif;
}








/*----------------------HEADER------------------------*/


  /* ---------------------------- LOGO ---------------------------- */

.logoacumar img {
    width: 5em;
    padding: .5em;
    margin-bottom: 0em;
    margin-inline-end: 2em;
}


/*---------MENU DESPLEGABLE-----------------*/
.cabeza {margin-bottom: 3em;}

header .arriba a {display: flex ;
                 
                text-decoration: none;
                justify-content: center;
                align-items: center;
                font-size: .7em;
               }


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

header .arriba a i {font-size: .7em;
    padding: .3em;
    color: white;
   }
   header .arriba a:hover {background-color:#007745;
    color: #007745;
   }

.header .menuheader .menu ul li a {font-size: .6em;}
/*

#llamamenu{background-color: rgb(78, 143, 83);
            color: #033A20;
            border: none;
            border-radius: .3em;
            cursor: pointer;
            width: 2.5em;
            height: 2.5em;
            display: flex;
            position: relative;
            z-index: 9999;}

#llamamenu:hover {background-color: white;}

#llamamenu i {padding: 0;
             margin: auto;}*/

/*header .arriba {background-color: #517f55;}

header .arriba a {
                  color: rgb(33, 255, 181);
                  padding: .5em 1em;
                  text-decoration: none;
                  display: flex;
                  justify-content: center;
                  align-items: center;
}

header .arriba a:hover {
                        background-color: rgb(45, 100, 68);
                        color: #007745;
}

/*header .arriba ul {background-color: rgba(0, 0, 0, .5);
                   position: fixed;
                   top: 0;
                   bottom: 0;
                   left: 100%;
                   width: 50%;
                   padding-top:5em ;
                   transition: all .5s ease;
}*//*

.visible {left: 50%;
    transition: all .5s ease;}




/*---------NOSOTROS INICIAR SESION Y PERFIL------------------*/
header {display: block;
    flex-direction: column;
    }

header .logoacumar {display: block;
                    
                    
                   }
.logoacumar a {display: flex;
    box-sizing: border-box;
                }

.logoacumar .perfilusuario {display: block;
                            justify-content: flex-end;
                            margin: auto;
                            padding: 1em;
                            
                    
                            }
.arriba {display: flex;}

.arriba li a p {font-weight: 100;
                font-stretch: expanded;}

.perfilusuario li {list-style: none;
          margin-left: 0;
          margin-inline-end: .5em;
}

.perfilusuario p {
                text-decoration: none;
                color: white;
                font-size: .2em;}


.relleno {width: 20%;}
/* ---------------------------- MENU CON LOS LINKS ---------------------------- */

header .header .arriba {
    font-size: 7vw;
}

header .header {display: flex;
    justify-content: center;
    text-align: center;
    margin: auto;
  }


.menu ul {
    margin: auto;
    padding-bottom: .5em;
}

.menu ul li {
    display: inline;
    padding: 6vw;
}

.menu a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 3vw;
}

h2 {
        text-align: center;
        
        text-transform: uppercase;
        font-weight: 700;
        font-size: 3vw;
        margin-bottom: 1.5vw;
        }
h2 {
            display: block;
            font-size: 3vw;
            margin-block-start: 0.83em;
            margin-block-end: 0.83em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
            align-items: center;
        }

h3 {
    text-align: center;
        
        text-transform: uppercase;
        font-weight: 700;
        font-size: 4vw;
        margin-bottom: 1.5vw;
        display: block;
            font-size: 1em;
            margin-block-start: 0.83em;
            margin-block-end: 0.83em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
            align-items: center;
}
h4 {
    text-align: center;
        
    text-transform: uppercase;
    font-weight: 800;
    font-size: 2vw;
}

/*-------------BOTONES-----------------------*/

.boton {        display: inline-block;
                background-color: rgb(85, 158, 221);
                font-size: 3vw;
                text-decoration: none;
                text-transform: uppercase;
                padding: .5em;
                margin: auto;
                margin-top: .5em;
                box-shadow:0px 3px 5px rgba(15, 15 , 15, .5) ;
               
            }

        


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

main {width: 60%;
    height: 100vw;
    
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    font-size: 2vw;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
   margin: auto;
   text-align: center;
    margin-bottom: .5em;
    border-radius: .5em;
   }

   .iniciarsesion {
    
    
    width: 100%;
                    margin: auto;
                    
                border-radius: .5em;
                box-shadow: 0px 3px 5px rgba(15, 15 , 15, .5) ;}
    .iniciarsesion div {padding: 1em;}
   /*--------LLENAR EL FORMULARIO-----------------*/

   .iniciar {margin-top: 1em;
            margin-bottom: .5em;}

    .iniciarsesion h3 {margin-bottom: .5em;}
    .iniciarsesion p {margin-bottom: 2em;
                            padding: .5em;
                            border-bottom: #033A20 solid 2px;
                            color: #284135;
                            text-decoration: none;}  
     

    /*------------------FORMULARIOS-------------------------------*/

    .celda {width: 80%;
        height: 4vw;
        border-radius: .5em;
        box-shadow: 0px 1px 5px rgba(15, 15 , 15, .5) ;}
    .dos {margin-bottom: 1em;}


    /*---------------------BOTON INGRESAR-------------------------*/

  .ingresar {display: block;
            margin: auto;
       
            width: 10em;
            text-decoration: none;
            color: #ffffff;
            border-radius: .5em;
            padding: 1em 1em;
            background-color: rgb(40, 71, 56);}

a:hover { background-color:#4f896a ;
                    color: rgb(255, 255, 255);}



/*-------------------NO TENES CUENTA---------------*/

.registrarse {margin-bottom: 2em;}


/*----------------FOOTER----------------*/


footer {
    margin: auto;
    margin-top: 2em;
    padding: 1em;
    border-radius: .2em;
    margin-bottom: .5em;}
    
.footer {
width: 100%;
color: white;
background-color:#033A20 ;
display: flex;
flex-direction: column;
font-size: 10px;
margin-top: 3em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
margin: auto;
text-align: center;


}

.obligatoria  { font-weight: 100;
    width: 80%;
    text-align: center;
    margin: auto;
    
    

}


@media (min-width: 600px) {

    /*----------------------HEADER------------------------*/
header {width: 100%;
    margin: auto;
    
    padding: 1em;
    border-radius: .2em;}
    
.header {
width: 100%;
color: white;
background-color:#033A20 ;
display: flex;
flex-direction: column;
font-size: 2vw;
margin-top: 3em;
margin-block-start: 0.83em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
margin: auto;
text-align: center;;
 

}

header h1 {font-size: 2em;}

header .header {
    display: flex;
    flex-direction: row;
}



h1 {align-items: center;}
    


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

main {width: 30vw;
    height: 40vw;

background-color: rgb(255, 255, 255);
display: flex;
flex-direction: column;
font-size: 1vw;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
margin: auto;
text-align: center;
margin-bottom: .5em;
border-radius: .5em;
}

.iniciarsesion {


width: 100;
                margin: auto;
                
            border-radius: .5em;
            box-shadow: 0px 3px 5px rgba(15, 15 , 15, .5) ;}
/*--------LLENAR EL FORMULARIO-----------------*/

.iniciar {margin-top: 1em;
        margin-bottom: .5em;}

.iniciarsesion h3 {margin-bottom: .5em;}
.iniciarsesion p {margin-bottom: 2em;
                        padding: .5em;
                        border-bottom: #033A20 solid 2px;
                        color: #284135;
                        text-decoration: none;}  
 

/*------------------FORMULARIOS-------------------------------*/

.celda {width: 50%;
    height: 2vw;
    border-radius: .5em;
    box-shadow: 0px 1px 5px rgba(15, 15 , 15, .5) ;}
.dos {margin-bottom: .5em;}


/*---------------------BOTON INGRESAR-------------------------*/

.ingresar {display: block;
        margin: auto;
   
        width: 10em;
        text-decoration: none;
        color: #ffffff;
        border-radius: .5em;
        padding: 1em 1em;
        background-color: rgb(40, 71, 56);}

a:hover { background-color:#4f896a ;
                color: rgb(255, 255, 255);}



/*-------------------NO TENES CUENTA---------------*/

.registrarse {margin-bottom: 2em;}


/*----------------FOOTER----------------*/


footer {width: 30%;
margin: auto;
margin-top: 2em;
padding: 1em;
border-radius: .2em;
margin-bottom: .5em;}

.footer {
width: 100%;
color: white;
background-color:#033A20 ;
display: flex;
flex-direction: column;
font-size: 10px;
margin-top: 3em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
margin: auto;
text-align: center;


}

.obligatoria  { font-weight: 100;
width: 80%;
text-align: center;
margin: auto;



}
}