/*
Mosiah 4:28
Book of Mormon

28 And I would that ye should remember, that whosoever among you borroweth of his neighbor should return the thing that he borroweth, according as he doth agree, or else thou shalt commit sin; and perhaps thou shalt cause thy neighbor to commit sin also.

I invite you to read  the Book of Mormon. You´ll be able to know my friend, Christ.

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

@import url('https://fonts.googleapis.com/css?family=Raleway|Roboto:400,500,700&display=swap');

h1, h2, h3, h4 {
    font-family: 'Roboto', sans-serif;
    

}

h1{
    font-size: 2em;
    color: steelblue;
    margin-bottom: 5px;
    letter-spacing: .15em;
    font-weight: 700;
}

h2{
    font-size: 1em;
    color: steelblue;
    font-style: italic;
    letter-spacing: .15em;
    font-weight: 40;
    margin-top: 5px;
}

ul{
    list-style-type: none;
}

p, a, ul, ol{
    
    font-family: 'Raleway', sans-serif;
}

header {
    display:flex;
    width: 100%;
    background-color: whitesmoke;
    height: 100px;
    position: absolute;
    box-sizing: border-box;
    margin: 0px;
    padding: 5px;
    overflow: hidden;
}

.logo {
    
    width: 50px;
    height: 50px;
    padding: 0px;
    float: left;
    color: black;
       background-color: white;

    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    
}

nav {
    display: flex;
    width: 90%;
    height: 100%;
    box-sizing: border-box;
    padding:  10px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    background-color: black;
    box-sizing: border-box;
    list-style-type: none;
      margin: 0;
      padding: 0;
    height: 50px;
    width: 100px;
    display: flex;
    
   
    
    
    
}

nav ul li{
    width: 100%;
    height: 100%;
    display: flex;
    border: 1px lightgrey dotted ;
    background-color: #981B30;
    padding: 5px;
    box-sizing: border-box;
    align-items: center;
    
}

.white {
    color: white;
    z-index: 1000000000;
}

nav ul li a{
    align-content: center;
    font-size: 1.6em;
    text-align: center;
    margin: 0 auto;
    height: auto;
    
    
    
}

.mainsection {
    display: flex;
    position: absolute;
    flex-direction:row;
    top:100px;
    box-sizing: border-box;
    
    
    width: 100%;
    height: auto;
    padding: 10px 50px 50px 50px ;
    
    
   
   
}

article {
    width: 80%;
    margin: 0 auto;
    
}

.alturapdf {
    width: 100%;
    height: 800px;
}

.pianito {
    display: inline-block;
    justify-content: center;
    width: 100%;
    height: auto;
}

.piecito {
    max-height: 300px;
    position: relative;
    display: flex;
    max-width: 100%;
    background-color: black;
}