body {background-color: #fff; margin: 0px}

/*Variables*/
:root{--textbox-color: rgba(255,216,0,0.0);--frame-color:#ccc;}

@media screen and (max-width: 550px) {
    .subheader .r550 {display: block;} .subheader .r751 {display: none;} .subheader .r1151 {display: none;}
    .subheader{padding-top: 5px; background-color: #fff; text-align:center; font-family: 'Adobe Garamond Pro', Garamond, serif; font-size: 5.5vw; font-weight: 300; color: #666; font-stretch: condensed; line-height:1em;}
}
@media screen and (min-width: 551px) and (max-width: 1150px){
    .subheader .r550 {display: none;} .subheader .r751 {display: block;} .subheader .r1151 {display: none;}
    .subheader{padding-top: 5px; background-color: #fff; text-align:center; font-family: 'Adobe Garamond Pro', Garamond, serif; font-size: 2.4vw; font-weight: 300; color: #666; font-stretch: condensed; line-height:1em;}
}
@media screen and (min-width: 1151px){
    .subheader .r550 {display: none;} .subheader .r751 {display: none;} .subheader .r1151 {display: block;}
    .subheader{padding-top: 10px;background-color: #fff; text-align:center; font-family: 'Adobe Garamond Pro', Garamond, serif; font-size: 1.3vw; font-weight: 300; color: #666; font-stretch: condensed; line-height:1em;}
}

.footer{width: 100%; text-align:center; margin-top: 30px; padding-top: 10px; border-top: 2px solid var(--frame-color); background-color: var(--textbox-color); font-family: 'Adobe Garamond Pro', Garamond; font-size: 1.0em; font-stretch: condensed;}

ul {list-style-type: none; margin-left: 10px;  margin-top: 0px;margin-right: 10px; margin-bottom: 10px; padding: 0; overflow: hidden; border-top: 2px solid #ccc;  background-color: var(--textbox-color); color: #ccc; font-family: 'Arial Narrow', Arial; font-size: 1.0em; font-weight:600; font-stretch: condensed;}

li {float: left; border-right: 0px solid #ccc;}
li a, .dropbtn {display: inline-block;color: #666; text-align: center; padding: 5px 10px; text-decoration: none;}
li a:hover, .dropdown:hover .dropbtn {color: #fff; background-color: rgba(180,68,32,0.7); }
li.dropdown {display: inline-block;}

.dropdown-content {display:none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 2px 2px 12px 0px rgba(0,0,0,0.5);}
.dropdown-content a {color: #666; padding: 7px 12px; text-decoration: none; display: block; text-align: left;}
.dropdown-content a:hover {background-color: rgba(180,68,32,0.6)}
.dropdown:hover .dropdown-content {z-index: 1; display: block;}

.img {position: relative; border: 2px solid #ccc; box-shadow: 3px 3px 9px #ddd}
.img:hover {border: 2px solid #be0000;}
.img img {margin-bottom: 0px; width: 100%; height: auto;}

.aus {position: absolute; top: 0px; left: 0px; width: 100%; background-color: #be0000;color: #fff;padding:5px;text-align: center;}

* {box-sizing: border-box;}

.ok-button {width: 100%; padding: 2px 2px;background-color: var(--frame-color); font-size: 1.1em; color: black; border: 2px solid #888;}
.ok-button:hover {background-color: #e7e7e7;}


$duration: 30s;

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.ticker-wrap {
  
  position: fixed;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  height: 4rem;
  background-color: rgba(#000, 0.9); 
  padding-left: 100%;  // offset items to begin 
  
}

.ticker {
    
  display: inline-block;
  height: 4rem;
  line-height: 4rem;  
  white-space: nowrap; // display items in a line
  padding-right: 100%; // ensure items go before animations repeat (taken from parent due to inline-block)
  
  -webkit-animation-iteration-count: infinite; 
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
 -webkit-animation-name: ticker;
         animation-name: ticker;
  -webkit-animation-duration: $duration;
          animation-duration: $duration;
  
  &__item {
    
    display: inline-block;
    
    padding: 0 2rem;
    font-size: 2rem;
    color: white;   
    
  }
  
}

body { padding-bottom: 5rem; }
h1,h2,p {padding: 0 5%;}