@font-face {
  font-family: OstrichSans-Heavy;
  src: url(fonts/OstrichSans-Heavy.otf);
}

@font-face {
  font-family: AtlasTypewriterDetail-Regular;
  src: url(fonts/atlas-typewriter-detail-regular.ttf);
}

@font-face {
  font-family: AtlasGrotestkDetail-Light;
  src: url(fonts/atlas-grotesk-detail-light.ttf);
}

@font-face {
  font-family: AtlasGrotestkDetail-Medium;
  src: url(fonts/atlas-grotesk-detail-medium.ttf);
}

@font-face {
  font-family: AtlasGrotestkDetail-Bold;
  src: url(fonts/atlas-grotesk-detail-bold.ttf);
}

body * {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.mvauto {
  margin-left: auto;
  margin-right: auto;
}

.font-bold {
  font-family: OstrichSans-Heavy
}

.font-text {
  font-family: AtlasGrotestkDetail-Light;
  font-weight: normal;
}

.font-text-light {
  font-family: AtlasGrotestkDetail-Light;
  font-weight: normal;
}

.font-text-medium {
  font-family: AtlasGrotestkDetail-Medium;
  font-weight: normal;
}

.font-text-bold {
  font-family: AtlasGrotestkDetail-Bold;
  font-weight: normal;
}

.font-header {
  font-family: "Times New Roman", serif;
  font-weight: 700;
}

.font-strong {
  font-family: AtlasGrotestkDetail-Medium;
  font-weight: normal;
}

.scratch-bottom {
  background-image: url(../img/scratch-line.png);
  background-repeat: no-repeat;
  background-position: bottom center;
}

.scratch-bottom-wide {
  background-image: url(../img/scratch-line.png);
  background-repeat: repeat-x;
  background-position: bottom center;
}

.link.revealed {
  color: #0d4545;
}

.link:hover {
  opacity: .5;
  transition: opacity .15s ease-in;
}

.color-white { color: #FFF; }
.color-black { color: #543004; }
.color-primary { color: #DB5F0B; }
.color-black-hover:hover { color: #543004; }

.bg-light { background-color: #f0caa7; }
.bg-grey-light { background-color: #FCF9E3; }
.bg-grey-darker { background-color: #F3F2EE; }
.bg-primary { background-color: #DB5F0B; }
.bg-secondary { background-color: #F4C70B; }
.bg-orange { background-color: #FF964E; }
.bg-grey { background-color: #FCF9E3; }
.bg-article { background-color: #DB5F0B; }
.bg-video { background-color: #FF9A4D; }
.bg-secondary-hover:hover { background-color: #F4C70B; }

.bg-primary .ui-state-default {
  color: red !important;
}

.mt-1 {
  margin-top: -0.75em;
}

.f7 {
  font-size: .8rem
}

.f7-ns {
  font-size: .8rem
}

.f8 {
  font-size: .65rem
}

.f8-ns {
  font-size: .65rem
}

.f9 {
  font-size: .5rem
}

.h6 {
  height: 20rem;
}

.h7 {
  height: 23rem;
}

.flex-50-5 {
  flex: 0 0 calc(50% - 5px)
}

.min-h-4 {
  min-height: 4rem;
}

.min-h-2 {
  min-height: 3rem;
}

/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */
.list {
  display:none;
  clear: left;
}
.show {
  display: none;
}
.answer:target + .show {
  display: inline;
}
.answer:target {
  display: none;
}
.answer:target ~ .list {
  display: block;
}

.answer, .show {
  text-decoration: none;
  color: black;
  float: left;
}

.w-300 {
  width: 300%;
}

.h8 {
  height: 30rem;
}

.h9 {
  height: 40rem;
}

.ba-2 {
  border-style: solid;
  border-width: 2px;
}

.bw-1 {
  border-width: 1px;
}

.bw-2 {
  border-width: 2px;
}

.b--grey {
  border-color: #EDECE8;
}

.b--primary {
  border-color: #1C8C8C;
}

.b--secondary {
  border-color: #E1FF00;
}

.b--secondary-hover:hover {
  border-color: #E1FF00;
}

.b--primary-hover:hover {
  border-color: #1C8C8C;
}

.gallery-thumb {
  width: 100px;
  float: left;
  font-size: 0;
}

.gallery-thumb .child {
  opacity: 0;
  width: 100px;
  height: 65px;
  padding: 7px 25px; 
  font-size: 16px;
}

.gallery-thumb img {
  width: 100px;
  height: 65px;
}

.gallery-thumb .selected {
  opacity: 1 !important;
  transition: opacity .15s ease-in;
}

.gallery-thumb .child span {
}

@media screen and (min-width: 30em) {
  .flex-25-10-ns {
    flex: 0 0 calc(25% - 10px)
  }

  .flex-50-10-ns {
    flex: 0 0 calc(50% - 10px)
  }

  .f7-ns {
    font-size: 0.8rem;
  }

  .h7-ns {
    height: 23rem;
  }

  .h8-ns {
    height: 30rem;
  }
}