* {
  box-sizing: border-box;
}

@font-face {
  font-family: "Adventure Strike Free";
  src: url("../webfonts/Adventure Strike Free.otf") format('opentype'),
  url("../webfonts/Adventure Strike Free.ttf") format('truetype');
}

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);
  background-image: url(../img/denim.webp);
  background-attachment: fixed;
}

main {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

header {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: sticky;
  margin-bottom: 1em;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  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;
  line-height: 1;
  color: #74b807;
  font-family: 'Adventure Strike Free', sans-serif;
}

header h1 small {
  display: block;
  font-size: .65em;
}
 
a {
  color: #74b807;
  text-decoration: none;
  transition: color 200ms ease;
}
a:hover {
  color: #1CB807;
  text-decoration: underline;
}
a:visited {
  color: #07B84B;
}
a:visited:hover {
  color: #07B8A3;
}

ul {

}

ul li {

}

ul li + li {
  margin-top: .45em;
}

.container {
  padding: 0 1em;
  max-width: 85rem;
  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 {
  vertical-align: middle;
  text-align: center;
  padding: .25em 0;
}
.button-group > button {
  color: #FEFEFE;
  font-weight: 200;
/*  text-shadow: 1px 1px rgba(0, 0, 0, 1.0);*/
  cursor: pointer;
  border-radius: 3px;
  padding: .25em .5em;
  margin-top: .25em;
  border: 0 none transparent;
/*  background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);*/
  background-color:#89c403;
  transition: all 250ms ease;
}
.button-group > button:hover {
/*  background:linear-gradient(to bottom, #89c403 5%, #77a809 100%);*/
  background-color:#89c403;
  color: #000;
/*  text-shadow: 0 1px 1px rgba(255, 255, 255, 1.0);*/
  transition: all 250ms ease;
}
.button-group > button.active {
  cursor: default;
  color: #000;
/*  text-shadow: 0 1px 1px rgba(0, 0, 0, 1.0);*/
/*  background-color:red;
  background: linear-gradient(to bottom, red 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: 1em;
/*  background-image: url(../img/loader.gif);
  background-position: 50% 50%;*/
  display: block;
}   

.element-item > img {
  display: block;
}
.element-item video,
.element-item iframe {
  max-width: 100%;
}
/*.element-item > img.lazy {
  width: 150px;
  height: 150px;
  display: block;
}*/

a.card { 
  border-radius: 2px;
  color: #FFF;
  text-decoration: none;
  text-align: center; 
  background-color: #1CB807;
  width: 100%;
  padding:0.25rem;
  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;
  transition: background 250ms ease, box-shadow 250ms ease, border-radius 250ms ease;
}

a.card:hover {
    color: #FFF;
    border-radius: 2px;
    background-color: #89c403;
}

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 {
  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;
}

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

.tools h4 {
  letter-spacing: 2px;
  font-family: 'Adventure Strike Free', sans-serif;
  margin: .5em 0 1em 0;
}
.tools {
  border-radius: 3px;
  background: rgba(255,255,255,0.2);
  padding: .3em;
}
.tools ul {list-style-type: disc;
list-style-position: outside;
}
.tools ul li + li {
  padding-top: .45em;
  border-top: 1px solid rgba(0,0,0,0.6);
}
.tools ul li a {
  color: rgba(255,255,255,0.95);
  font-size: .75em;
  line-height: 1.1;
}

.tools ul li a:hover {
  text-decoration: none;
}

footer {
  font-size: .8em;
  text-align: center;
  margin-bottom: 3em !important;
}

.padding-xs {
  padding: .15em 0;
}
.padding-sm {
  padding: .25em 0;
}
.padding-md {
  padding: .5em 0;
}
.padding-lg {
  padding: 1em 0;
}