body {
    font-family: 'Muli', sans-serif;
    color: #A7A7A7;
    padding: 0;
    margin: 0;
}
header{height: 8rem;}

hgroup, footer, section:last-child {
    width: 78%;
    padding: 0;
    margin: 0 auto; 
    text-align: center;   
}

header>a{
    font-size: 3rem;
    font-weight: bolder;
    position: absolute;
    top: 1vh;
    right: 3%;
    color: #aaa;
}
header>a:hover{color: #ddd;}

h1{font-size: 1.5rem;}

h2 {
    font-weight: lighter;
    font-size: 1.2rem;
}

section:last-child{
    text-align: justify;
    font-weight: lighter;
}

li{
    list-style-type: circle;
}

strong{color: #555;}

span {
    padding: 0.05rem 0.5rem;
    border-right: 1px solid #A7A7A7;
}

span:last-child{border: none;}

section:first-child, .imagenfondo{
	height: 45vh;
    display: flex;
    justify-content: center;
    overflow-y: hidden;
}

section:first-child p{
    align-self: center;
    padding: 0;
    flex: 1;
	height: 2vh;
    margin-left: 1rem;
}

section:first-child p:first-child{
    text-align: right;
    margin: 0 1rem 0 0;
}

/*img{  
	align-self: center;
    padding: 0;
	flex: 8;
    width: 80%;
    color: rgba(0,0,0,.0);
}*/

.imagenfondo{
    flex: 8;
    align-self: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 45vh;
}

a {
	color: #ddd;
    text-decoration: none;
    font-size: 3rem;
    transition: all 0.3s;
}

a:hover {color: #aaa;}

@media(min-width: 600px){

    hgroup, footer, section:last-child{width: 75%;}

	section:first-child, .imagenfondo{height: 65vh;}

	/*img, */.imagenfondo{flex: 6; width: 60%;}
}

@media(min-width: 800px){

    hgroup, footer, section:last-child{width: 67%;}

    section:first-child, .imagenfondo{height: 85vh;}

    /*img, */.imagenfondo{flex: 4;}
}

@media(min-width: 1000px){

    hgroup, footer, section:last-child{width: 56%;}

    header{height: 5rem;}

    section:first-child, .imagenfondo{height: 100vh;}

    /*img, */.imagenfondo{flex: 4; width: 38%;}
}

@media(min-width: 1200px){

    hgroup, footer, section:last-child{ width: 60%;}

    section:first-child, .imagenfondo{height: 85vh; }

    /*img, */.imagenfondo{flex: 3;}
}

@media(min-width: 1500px){

    hgroup, footer, section:last-child{width: 50%;}
    
    /*img, */.imagenfondo{flex: 2;}
}