/* EDITABLE CSS */

body { font-family: 'Open Sans', sans-serif;}
h1, h2, h3 { font-family: 'Martel', serif;}



@media (min-width: 769px) {
  /* image size 2048 x 1070 bzw. 1366 */
  #ranch > figure { z-index: 0 !important; background-image: url(images/ranch.jpg); }
  #welcome > figure { background-image: url(images/welcome.jpg); }
  #horses > figure { background-image: url(images/horses.jpg); }
  #guests > figure { background-image: url(images/guests2.jpg); }
  #client > figure { background-image: url(images/client.jpg); }
  #dog > figure { background-image: url(images/dog.jpg); }
  #cats > figure { background-image: url(images/cats.jpg); }
  #chicken > figure { background-image: url(images/chicken.jpg); }
  #x-mas > figure { background-image: url(images/x-mas.jpg); }
  #cordi > figure { background-image: url(images/cordi.jpg); }
  #courses > figure { background-image: url(images/courses.jpg); }
  #courses2 > figure { background-image: url(images/courses2.jpg); }
  #kleinow > figure { background-image: url(images/kleinow.jpg); }
}

@media (max-width: 768px) {
  /* image size 748 x 401 */
  #ranch > figure { z-index: 0 !important; background-image: url(images/ranch-mob.jpg); }
  #welcome > figure { background-image: url(images/welcome-mob.jpg); }
  #horses > figure { background-image: url(images/horses-mob.jpg); }
  #guests > figure { background-image: url(images/guests2-mob.jpg); }
  #client > figure { background-image: url(images/client-mob.jpg); }
  #dog > figure { background-image: url(images/dog-mob.jpg); }
  #cats > figure { background-image: url(images/cats-mob.jpg); }
  #chicken > figure { background-image: url(images/chicken-mob.jpg); }
  #x-mas > figure { background-image: url(images/x-mas-mob.jpg);}
  #cordi > figure { background-image: url(images/cordi-mob.jpg); }
  #courses > figure { background-image: url(images/courses-mob.jpg); }
  #courses2 > figure { background-image: url(images/courses2-mob.jpg); }
  #kleinow > figure { background-image: url(images/kleinow-mob.jpg); }
}
/* END EDITABLE CSS */

section, header, footer, menu, aside, article, nav, figure {display: block;}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 1.2em;
  line-height: 1.5em;
  color: #b77707;
  background: #4d1b1b;
}

header {
  z-index: 1;
  position: absolute;
  bottom:10%;
  left: 10%
}

nav {
  position: fixed;
  z-index: 100;
  background-color: #4d1b1b;
  width: 100%;
}

nav ul li {
  display: inline;
  padding: 0 1em 0 0;
}

footer h3 {
  font-size: 1em;
}

footer p a {
  font-size: 0.6em;
  color: #4d1b1b;
}

h1 {
  font-size: 3em;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.5em;
  margin: 0;
  padding: 0;
}

h1 span {
  display: block;
  font-weight: 900;
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1em;
}

h4 {
  color: #e2a02c;
}

p {
  margin-bottom: 2em;
}

a {
  color: #e2a02c;
  text-decoration: none;
}

a:hover {
  color: #841f1f;
}
figure h2 {
  z-index: 10;
  font-size: 2em;
  color: #fff;
  text-shadow: 1px 1px 2px black;
  position: relative;
  margin: 0% 0% 0% 10%;
  padding: 10% 0 0 0;
}

article {
  z-index: 10;
  position: relative;
  margin: 2% 10% 10% 10%;
  min-height: 350px;
  background: #4d1b1b;
}

article > img {
  float: right;
  margin: 0 0 10% 15%;
  width: 33%;
}

figure {
  width: 100%;
  height: 1066px;
  z-index: 2;
  margin: 0;
  padding: 0;
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

footer {
  clear: both;
  text-align: center;
  padding: 1em 3em 2em 3em;
  background-color: #1f1f1f;
  color: #808080;
}

@media (max-width: 960px) {
  h1 {
    font-size: 2.5em;
    line-height: 1.5em;
  }

  h1 span {
    font-size: 2em;
  }
}

@media (max-width: 768px) {
  header {
    position: relative;
    bottom: -150px;
    width: 0px;
    height: 0px;
  }

  h1 {
    font-size: 2em;
    line-height: 1.5em;
  }

  h1 span {
    font-size: 1.8em;
  }

  h2 {
    line-height: 1.2em;
  }

  figure {
    height: 401px;
  }
}

@media (max-width: 480px) {
  header {
    bottom: -200px;
  }

  nav {
    position: relative;
  }

  h1 {
    font-size: 1.2em;
    line-height: 1.2em;
  }

  h1 span {
    font-size: 1.5em;
  }

  figure {
    height: 360px;
  }

  figure h2 {
    font-size: 0.75em;
  }
  h2, h3 {
    font-size: 0.75em;
  }
  p, li {
    font-size: 0.75em;
    line-height: 1.25em;
  }
}