body{
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    font-size: 1em;
}
h1 {
    font-family: 'Monoton', cursive;
    font-size: 5em;
}
h2 {
    font-family: 'Anton', sans-serif;
    font-size: 2em
}
h3 {
    font-family: 'Anton', sans-serif;
    font-size: 2em;
}
p {
    font-size: 2em;
}
fieldset { 
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px groove (internal value);
}
button {
    border: 5px;
    color: white;
    background-color: #f68e56;
}
button:hover {
    border: 5px;
    color: white;
    background-color: #f5502f;
}
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #f68e56;
    color: white;
}
/*main {
}*/
header{
    color: white;
    background-color: rgba(40,40,40,1)
}
footer {
    color: white;
    height: 90px;
    background-color: rgba(40,40,40,1);
}
.header-hero {
    background-image: url('../img/test-header.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    
}
#lightbox {
    text-align: center;
}
#social{
    text-align: right;
    padding: 0px 30px;
    margin: 0px 0px;
}
#social img{margin-left: 20px;}
.row{
    text-align: center;
    max-width: 1000px;
    min-height: 100px;
    margin: 0 auto;
    padding: 0px 0px;
}
.row2{
    text-align: center;
    max-width: 1000px;
    min-height: 0px;
    overflow: hidden;
    margin: 0 auto;
    padding: 0px 0px;
}
.col-50{
    width: 50%;
    max-width: 50%;
    padding: 0px 0px;
    margin: 0 auto;
    float: left;
}
.clearfix{clear:both;}
.test{
    text-align: left;
    background-color: none;
    padding: 50px 30px;
}
iframe {
    width: 300px;
    height: 250px;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f68e56;
    text-align: center;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f68e56;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {background-color: #f68e56;}

ul.topnav li.icon {display: none;}

li {
    font-family: 'Monoton', cursive;
    font-size: 1.em;
}

li a {
    font-size: 1.5em;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #f5502f;
}
nav{
    width: 100%;
    max-width: none; 
    margin: 0 auto;
    background-color: none;
    text-align: center
}
nav ul{
    max-width: 100%;
}
nav li{
    list-style: none;
    display: inline-block;
    margin: 0px 30px;
}
*{
  animation-iteration-count: 1;
      animation-fill-mode: forwards;
}
#hero-holder{
    background-color: black;
}
#hero{
    overflow:hidden;
    width: 800px;
    height:400px;
    margin: 0 auto;
    background-color:none;
}
#hero__caption{
    font-family: 'Monoton', cursive;
    overflow: hidden;
    float: right;
    color: #fff;
    width:200px;
    height:400px;
    right:1200px;
    top:0;
    background-color:rgba(50,50,50,0.9);
    text-align: center;
    padding: 20px;
    opacity: 50%;

    animation-name: moveCaption;
    animation-duration: 0.7s;
    
}
#bgd{
    background-image: url('../img/hero-1.jpg');
    overflow: hidden;
    width: 800px;
    height: 400px;
    opacity: 0;
    animation-name: fadeBgd;
    animation-duration: 2s;
    animation-delay: 0.7s;
    transition-timing-function: ease-out;
    
}
#hero__title{
    opacity: 0;
    font-size: 2em;
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-delay: 2.4s;
}
#hero__meta{
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-delay: 3s;
    transition-timing-function: ease-in;
}
#hero__type {
    color: white;
    font-family: ;
}
#hero__cta{
opacity: 0;
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: 4s;
display: inline-block;
border: 2px solid #fff;
padding:5px 10px;
}
@keyframes moveCaption {
from {right:1200px;opacity: 0;}
to {right:0;opacity: 1;}
}

@keyframes fadeIn {
from {opacity:0;right: 1200px;}
to {opacity:1;right: 0px}
}
@keyframes fadeBgd {
from {opacity:0; filter:blur(0px); background-size: 100%; right: -1200px;}
to {opacity:1; filter:blur(0); background-size: 100%; right: 0px}
}
#mobile-hero{display: none;}
@media (max-width: 600px) {
    .row {
        display: none;
    }
    .col-50 {
        float: none;
        width: none;
    }
    iframe {
        padding: 0 0;
        margin: 0 0;
    }
    #hero{
      display: none;
    }
    #mobile-hero{
      display: block;
        margin: auto;
        text-align: center;
        background-color:rgba(50,50,50,0.9);
        color: white;
    }
     ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}
    @keyframes mobilehero {
        
  }
  }
}