html, body {

  font-family: 'Roboto', 'Helvetica', sans-serif;
  margin: 0;
  padding: 0;
}

.demo-layout-transparent {

background: url('/assets/header.jpg') center / cover;

}

.demo-layout-transparent .mdl-layout__header, .demo-layout-transparent .mdl-layout__drawer-button {

color: white;

}

@media screen and (min-width: 800px) {

.demo-card-wide.mdl-card {
    width: 800px;
}
.mdl-cell--4-col {
    width:800px;
}

}

/* Card CSS */

@media screen and (max-width: 512px) {

   .demo-card-wide.mdl-card {
       max-width: 100%;
   }

   .remove-mdl-navigation-link {
       display: none;
   }

   .demo-card-wide.mdl-card {
       width: 512px;
   }
}

.demo-card-wide>.mdl-card__title {

color: #fff;
height: 512px;
background: url('/assets/transparent.jpg') center / cover;

}

.demo-card-wide>.mdl-card__post {

color: #fff;
height: 60px;
padding:15px;
background: url('/assets/transparent.jpg') top / cover;

}

.demo-card-wide>.mdl-card__menu {

color: #fff;

}

.mdl-arrowup-button-right {

position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;

}

.nav-button {

  width: 40px;
  height: 40px;
  min-width: initial;
}
.mdl-demo .mdl-layout__content section:not(:last-of-type) {
  position: relative;
  margin-bottom: 48px;

}