body {
    font-family: "Roboto";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    align-content: center;
}

.block{
    width: 100%;
}

.btn-md{
    width: 200px;
}

nav {
    color: #000;
    background-color: #f5f5f5;
}
nav .brand-logo {
    color: #000;
    font-size: 20px;
}
nav ul a {
    color: #000;
}
nav .nav-wrapper {
    padding-left: 40px;
}
.demo-content.card-panel {
    padding: 60px;
}
@media only screen and (max-width: 480px) {
    .demo-content.card-panel {
        padding: 20px;
    }
}
@media (max-width: 767px) {    
    .demo-content {
        border-radius: 2px !important;
        padding: 80px 56px !important;
        margin-bottom: 80px !important;
        background-color: #fff !important;
        position: inherit !important;
        top: 0px !important;
    }
}
.demo-ribbon {
    width: 100%;
    height: 40vh;
    background-color: #2e7d32;
    flex-shrink: 0;
}
.demo-main {
    margin-top: -35vh;
    flex-shrink: 0;
}
.demo-header .mdl-layout__header-row {
    padding-left: 40px;
}
.demo-container {
    max-width: 1600px;
    width: calc(100% - 16px);
    margin: 0 auto;
}
.demo-content {
    border-radius: 2px;
    padding: 80px 56px;
    margin-bottom: 80px;
    background-color: #fff;
}
.demo-layout.is-small-screen .demo-content {
    padding: 40px 28px;
}
.demo-content h3 {
    margin-top: 48px;
}