@font-face {
    font-family: OpenSans-Reg;
    src: url(type/Open_Sans/OpenSans-Regular.ttf);
}


@font-face {
    font-family: OpenSans-Bold;
    src: url(type/Open_Sans/OpenSans-Bold.ttf);
}

@font-face {
    font-family: OpenSans-Semibold;
    src: url(type/Open_Sans/OpenSans-Semibold.ttf);
}


@font-face {
    font-family: Arvo-Reg;
    src: url(type/Arvo/Arvo-Regular.ttf);
}

@font-face {
    font-family: Arvo-Bold;
    src: url(type/Arvo/Arvo-Bold.ttf);
}

@font-face {
    font-family: OpenSans-Light;
    src: url(type/Open_Sans/OpenSans-Light.ttf);
}





*{
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: #02ce89;
    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;}

.primero a {
    position: relative;
    color: white;
    font-size: 2.3em;
    padding-top:0.3em;
}

.hamb{
    position: relative;
    margin-right: .7em;
    top: 1.5px;
}
    
    
    
    
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: #4e3748;
    opacity: 0.9;
    font-size: .5em;
    position: retalive;
    margin-top: 19.5%;
    padding: 1em;
    text-align: center;
    
}

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

.conocenos p{
   color:#36c1b6;
}

.segundo{
    color: white;
    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: #609f8a;
font-family: Arvo-Reg;
font-size: 2em;
font-weight:300;
max-width: 80%;
margin: auto;    
text-align: center;
border-bottom: .05em solid;
padding-top: 20%; 
padding-bottom: 15%;

}


h1 span {font-weight: bold}



ul{

display: flex;
flex-direction: column;
align-content: center;
list-style: none;
text-align: center;
padding: 0;
margin-right: 10px;

}



li{
    font-family: OpenSans-Light;
    box-sizing: content-box;
    border-color: gray;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    margin: auto;
    margin-top: 2.8em;
    padding: 1em;
    width: 300px;
    box-shadow: 3px 4px 3px 0px rgba(0, 0, 0, 0.3);
}

a{
    font-weight:bold;
    color:#434242;
    text-decoration: none;
    font-size: 1.8em;
}

li:hover{background-color: #609f8a;}

a:hover {color: white;}