*{font-family: 'Open+Sans', sans-serif;
margin: 0;
box-sizing: border-box
}

html{background-color: black}

body{background-color: #EDEDED;
background-size: cover;
/*
width: 420px;
height: 780px;
*/
margin: auto;}


/*Header*/

header{height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #02CE8A;
    opacity: 0.9;}


.menu{width: 30px; height: 25px;
margin-right: .5em}

.lupa{width: 140px; height: 24px;}

.campana{width: 20px; height: 25px;
margin-right: .6em}

.flecha{width: 10px; height:5px;
margin-left: -.6em; margin-bottom: .1em}

.primero{
margin-left: .7em;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    left: auto;
    width: 16%;
    height: 35%;
    background-size: cover;
    background-color: transparent;}

.primero a {
    color: white;
    font-size: 2.3em;
}

footer{
    color: white;
    height: 55px;
	display: flex;
	flex-direction: column-reverse;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: stretch;
    background-color: #02CE8A;
    opacity: 0.9;
    font-size: .5em;
    
    
    position:absolute;
    bottom:0;
    width:100%;
    padding: 1em;
    text-align: center;
    
}

.conocenos{
    text-align: center;
    margin-top: 15%;
    height: 400px;
}

.conocenos p{
   color:#623F33;
   margin-top: 10px;
 

}

.segundo{
    color: #EDEDED;
    display: flex;
 flex-direction: row;
justify-content: space-between;
align-items: flex-end;
margin-right: .7em;}

p {color: #ffffff;
font-weight: 400;
margin-right: .4em}

p span{color: #d1a384;
font-weight: 100;}

/*Fin header*/

/*Main*/

main{max-width: 425px;
margin: auto;
margin-top: 1.5em;}

h3{
color: #5FA08A;
font-weight:300;
max-width: 56%;
margin: auto;    
text-align: center;
border-bottom-color: #3A3A3A;
border-color: #3A3A3A;
border-bottom: .05em solid #3A3A3A ;
padding-bottom: 4%;}

h2{
    color: #3A3A3A;
font-weight:100;
max-width: 60%;
margin: auto;    
text-align: center;
border:.05em solid; 
border-radius: 7%;
    font-size: 92% ;

padding-bottom: 1%;}


h1 span {font-weight: bold}



ul{display: flex;
flex-direction: column;
align-content: center;
list-style: none;
text-align: center;
padding: 0;}



li{
        background-color: transparent;
    margin: auto;
    border-radius: 100%;
    margin-top: 1.8em;
    padding: 1em;
    width: 213px;
    width: 120px;
    height: 58px;
}

a{
    font-weight: bold;
    color: white;
    text-decoration: none;
    font-size: 1.3em;
}


li:hover{background-color: transparent;}

a:hover {color: lightgray;}

.generom {
    margin-left: -3.8em;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    left: auto;
 
    background-color: transparent;
    background-image: url(img/fot1.png);
    
          width: 86%;
    height: 300%;
    background-size: cover;
    }

 .generof {
  
   margin-left:  -5em;
         margin-top: 1em;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    left: auto;
 
    background-color: transparent;
    background-image: url(img/fot2.png);
    width: 117%;
    height: 303%;
    background-size: cover;
}

.generoz {
    margin-left: 0.2em;
        margin-top: -4.9em;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    left: auto;
 
    background-color: transparent;
    background-image: url(img/fot3.png);
    
/*          width: 86%;*/
    height: 300%;
    background-size: cover;
    }


.generoy {
      margin-left: -0.3em;
    margin-top: -3.7em;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    left: auto;
 
    background-color: transparent;
    background-image: url(img/fot4.png);
    
/*          width: 86%;*/
    height: 300%;
    background-size: cover;
    }

 .flecha2{
  
margin-left: 1.4em;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    left: auto;
    background-color: transparent;
    background-image: url(http://www.pngmart.com/files/3/Right-Arrow-PNG-Image.png);
       width: 78px;
    height: 73px;
    background-size: cover;
justify-content: center; 
align-items: center; 
     display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

}