html,body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-y: hidden;
}

body {
    position: relative;
}
#container {
    background: url('../img/background01.jpg')no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: auto !important;
    min-height: 100%;
    /*background-size: 100% auto;
    width: 100%;*/
    
}
@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    div.box {
        background: rgba(255,255,255,0.7);
        height: 200px;
        width: 40%;
        min-width: 300px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        text-align: center;
    }
    h1 {
        margin-top: 80px;
        font-size: 80px;
    }
}

@media only screen and (min-width: 769px) {
    /* For mobile phones: */
    div.box {
        background: rgba(255,255,255,0.7);
        height: 400px;
        width: 40%;
        min-width: 400px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        text-align: center;
    }
    h1 {
        margin-top: 110px;
        font-size: 110px;
    }
}

h1 {    
    font-family: 'Amiko';
    width: 100%;
    position: fixed;
    top:30%;
    height: auto !important;
    min-height: 100%;
    text-align: center;
    -webkit-text-fill-color: transparent;
    background: url('../img/background01.jpg')no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
}
.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
  }