html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

@media (min-width: 1001px) {

html, body {
	margin: 0;
	height: 100%;

    color: #222;
    font-family: "Roboto",sans-serif;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5em;
	  background-image: 
    url("hero-1080.jpg");
  background-color: #f1d77f;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-attachment: fixed;
}

.container {
padding-left: 30px;
padding-right: 30px;
max-width: 50%;
}

}

@media (max-width: 1000px) {

html, body {
	margin: 0;
	height: 100%;

    color: #ccc;
    font-family: "Roboto",sans-serif;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5em;
	  background-image: 
	   linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url("hero-1000.jpg");
  background-color: #f1d77f;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-attachment: fixed;
}

.container {
padding-left: 20px;
padding-right: 30px;
max-width: 80%;
}

}

a {
  color: #222;
}




.logo {
  z-index: 10;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  margin-left: 20%;

}