html{
    position: relative;
    top: 100vh;
    opacity: 0;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out; 
    transition: all 2s ease-in-out;
    
}
body {
    background: url(../img/background.jpg)0 0 no-repeat;
    background-attachment: fixed;
    background-size: cover;
    padding: 5em 0 0;
    font-family: Georgia, serif;
    color: #fff;
    font-size: 22px;
    margin: 0;
}
section.creditos_content div {
    font-size: 14px;
    padding-bottom: 40px;
}
figure{
    display: table;
    margin: 0 auto
}
figcaption {
    text-align: center;
    font-family: Arial, sans-serif;
    font-style: italic;
    font-size: 29px;
}
section.text-ppal {
    width: 60%;
    margin: 1em auto;
}
a.down {
    border: 6px solid rgba(241, 106, 0, 0.26);
    background-color: #FBB03B;
    border-radius: 50%;
    display: table;
    padding: 25px 11px 14px 11px;
    margin: 3em auto;
    -webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}
a.down:hover{
    background-color: #F16A00;
}
#buttons{
    width: 75%;
    margin: 0 auto;
}
.btn_left{
    width: 50%;
    float: left;
}
.btn_right{
    width: 50%;
    float: right;
}
img{
    max-width: 100%
}
#buttons > div > a{
    display: table;
    -webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}
#buttons > div > a:hover{
    opacity: 0.5
}
section.creditos_content {
    width: 60%;
    margin: 0 auto;
    padding: 1em;
}
.creditos {
    width: 100%;
    display: table;
    background: rgba(0, 0, 0, 0.13);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/*Mediaquery*/

@media only screen and (max-width: 768px) {
    body {
        font-size: 14px
    }
    section.text-ppal {
        width: 95%;
        font-size: 1.2em;
    }
    a.down{
        padding: 17px 0px 11px 0px;
        text-align: center;
        margin: 0 auto;
    }
    .down >img {
        width: 60%;
        text-align: center;
    }
    #buttons {
        width: 100%;
    }
    
}
@media only screen and (max-width: 640px) {

    section.creditos_content p {
        padding: 0 .5em;
    }
}
@media only screen and (max-width: 480px) {
    .btn_right, .btn_left{
        width: 100%
    }
}