* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@font-face {
  font-family: "JMH Typewriter";
  src: url('../webfonts/JMH Typewriter.eot');
  src: url('../webfonts/JMH Typewriter.eot') format('embedded-opentype'),
       url('../webfonts/JMH Typewriter.woff2') format('woff2'),
       url('../webfonts/JMH Typewriter.woff') format('woff'),
       url('../webfonts/JMH Typewriter.ttf') format('truetype');
}
@font-face {
  font-family: "DOCTORTERROR"; 
  src: url("../webfonts/Doctor Terror.otf");
}
@font-face {
  font-family: "ANOTHERDANGER";
  src: url("../webfonts/AnotherDanger.otf") format("otf");
}

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

body {
  font-family: sans-serif;
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));

  display: flex;
  flex-direction: column; 
  color: #FEFEFE;
  background-color: rgba(0,0,0,.9999);
}

main {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

header {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  padding: .45em 1em;
  z-index: 1;
  background-color: rgba(0,0,0,.9999);
  box-shadow:  0 0 10px -2px rgba(0,0,0,1);
}
header.scroll {
  background-color: rgba(0,0,0,1);
}
header h1 {   
  margin: 0;
  letter-spacing: .25vw;
  font-size: 5vw; 
  background: rgb(51,0,0);
  background: linear-gradient(0deg, rgba(51,0,0,1) 0%, rgba(128,0,0,1) 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'DOCTORTERROR', sans-serif; 
}

header h1 small {
  display: block;
  font-size: .65em;
}
 
a {
  color: #428bca;
  text-decoration: none;
  transition: color 200ms ease;
}
a:hover {
  color: #005eaa;
  text-decoration: underline;
}
a:visited {
  color: #005eaa;
}
a:visited:hover {
  color: #88c3ea;
}

ul {

}

ul li {

} 
dl dd + dt,
ol li + li,
ul li + li {
  margin-top: .45em;
}

.container {
  padding: 0 1em;
  max-width: 75rem;
  margin: auto;
}


.btn-download ul {
  visibility: hidden;
  display: none;
  position: absolute;
  right: -1px;
  top: -10px;
  padding:  0;
  margin:  0;
  list-style: none;
}

.btn-download ul li {
 border:  0 none transparent;
 padding: .2em;
}

.btn-download ul li a {
  font-weight: 300;
  text-decoration: none;
}
.btn-download ul li a:hover {
  text-decoration: underline;
}

.btn-download:hover ul {
  background: white;
  visibility: visible;
  display: block;
}

.btn {
  box-shadow:inset 0px 1px 0px 0px #a4e271;
  background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);
  background-color:#89c403;
  border-radius:6px;
  border:1px solid #74b807; 
  cursor:pointer;
  color:#ffffff; 
  font-size: 1em;
  font-weight:bold;
  padding:.2em 1em;
  text-decoration:none;
  text-shadow:0px 1px 0px #528009;
}
.btn:hover {
  background:linear-gradient(to bottom, #77a809 5%, #89c403 100%);
  background-color:#77a809;
}

.button-group {
  text-align: center;
  padding: 1em 0;
}
.button-group > button {
  font-family: "JMH Typewriter";
  cursor: pointer;
  color: #000;
  border-radius: 3px;
  padding: .25em .5em;
  border: 0 none transparent;
  text-transform: uppercase;
  transition: color 250ms ease, background-color 250ms ease;
  background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);
  background-color:#89c403;
}
.button-group > button:visited {
  color: #000;
}
.button-group > button.active,
.button-group > button:hover {
  color: #FFF;
  background-color: rgb(51,0,0);
  background:linear-gradient(to bottom, rgb(51,0,0) 5%, darkred 100%);
}

.btn-download {
  position: relative;
  cursor: default;
}

#backTop {
  cursor: pointer;
  position: fixed;
  padding:  1em;
  bottom: 1em;
  right: 1em;
  z-index: 9999;
  outline: none;
  visibility: hidden;
  opacity: 0;
  transition: all 250ms ease;
}


#backTop.visible {
  visibility: visible;
  opacity: .85;
  transition: all 250ms ease;
}

.anchor {
  display: block;
  position: relative;
  top: -120px;
  visibility: hidden;
}
 
.element-item {
  width: 100%;
  text-align: center;
  margin-bottom: 2em;
}   

a.card {  
  font-family: "JMH Typewriter";
  border-radius: 10px;
  color: #FFF;
  text-decoration: none;
  text-align: center; 
  background-color: #1CB807;
  width: 100%;
  padding: 2em 1em;
  position: relative; 
  display: block;
  box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
  transition: background 500ms ease, box-shadow 500ms ease;
}
a.external.card { 
  border-radius: 10px;
  color: #FFF;
  text-decoration: none;
  text-align: center; 
  background-color: rgba(51,0,0,1);
  width: 100%;
  padding: 2em 1em;
  position: relative; 
  display: block;
  box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
  transition: background 500ms ease, box-shadow 500ms ease;
}



a.card:hover {
    color: #FFF;
    background-color: #7C0200;
    box-shadow: inset 0 0 5px 1px rgba(0,0,0,1);
}
 
a.card.active {
  background-color: #74b807;
  transition: all 800ms ease; 
  max-width: 80%;
  height: 80%;
  position: fixed;
  top: 5%;
  left: 0;
  cursor: default;
  right: 0;
  bottom: 0;
  z-index: 9999; 
  margin: auto;
} 
 
a.card.active h2 {
  width: 100%;
  height: 100%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
 
.modal {
  color:  black;
  max-width: 80vw !important;
  width: 90%;
  background-color: #FFF;
} 

a.card .content-internal {
  text-align: left;
  max-width: 80%;
  margin: 0 auto;
}

.update-date {
  font-size: .75em;
  margin: .25em 0 0 0;
  padding: 0;
  text-align: center;
  line-height: 1;
}

.video-container {
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  position: relative;
}

.video-container iframe,
.video-container embed,
.video-container video,
.video-container img,
.video-container div {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: black;
  border: 0 none transparent;
}

.video-details {
  font-size:  .55em;
}

img {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

footer {
  text-align: center;
  margin-bottom: 3em !important;
}