/* VARIABLES */
:root {
  --black: black;
  --black-75: rgba(0,0,0,0.75);
  
  --white: white;
  
  --red: #800;
  --red-75: rgba(136,0,0,0.75);
  
  --gray: #888;
  --gray-75: rgba(136,136,136,0.75);
  
  --menubg: #404040;
  
  --water: #c7e0eb;
  --water-75: rgba(199,224,235,0.75);
  --water-0: rgba(199,224,235,0.0);
}

/* MODIFIERS */
button, .button {
  display:inline-block;
  margin:4px;
  margin-top:14px;
  padding:8px;
  border-width:0px;
  border-radius:4px;
  background:var(--red);
  color:var(--white);
  font: 100% "Jockey One", sans-serif;
  font-size:14pt;
  text-decoration:none;
  text-indent:0px;
}
button:hover, button:focus, .button:hover {
  background:var(--white);
  color:var(--red);
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
button:hover::after, button:focus::after, .button:hover::after {
    content: " >>";
}



* {
  transition-timing-function: ease;
  transition-duration: 0.75s
}

[target=_blank] {
  color:var(--gray);
  text-decoration-style:wavy;
  cursor:alias;
}

html {
  overflow-y: scroll;
}

body {
  background:var(--black);
  font: 100% "Jockey One", sans-serif;
  margin:0px;
}

p {
  font-size: 14pt;
  margin: 0px;
  margin-bottom: 4pt;
  text-align: justify;
  text-indent: 20px;
}

a {
  color:var(--black);
}
a:hover {
  color:var(--red);
}

li {
  font-size: 14pt;
}

form, div.form {
  display: grid;
  grid-template-columns: 1fr auto;
  direction: rtl;
  align-content:center;
  grid-gap:5px;
  margin: 0px;
}
form > *, div.form > *{
  direction: ltr;
}
form span, div.form span, form .label, div.form .label {
  box-sizing: border-box;
  font-size: 14pt;
  transition-property:color;
}
form .label, div.form .label {
  font-weight: bold;
  padding-right: 5px;
  text-align: right;
}
form input, div.form input, form textarea, div.form textarea {
  font-family: monospace;
  box-sizing: border-box;
  border:1px solid var(--gray);
  transition-property:border-width, border-color, font-weight, padding;
  padding:5px;
}
form textarea {
  height: 80px;
  resize: vertical;
  overflow-y: scroll;
}
input:focus, textarea:focus {
  border-width: 3px;
  padding:3px;
  border-color: var(--red);
  font-weight: bold;
  outline-style: none !important;
}
input:optional + span, input:optional + .label, textarea:optional + span, textarea:optional + .label {
  color: var(--gray);
}
input:focus + span, input:focus + .label, textarea:focus + span, textarea:focus + .label {
  color: var(--red);
}
.checkbox {
  display:inline-block;
  background:var(--gray-75);
  cursor:pointer;
  border-radius:3px;
}
.checkbox div {
  transition-property:margin-left, margin-right, background-color;
  background-color:var(--black-75);
  display:block;
  width:21px;
  height:21px;
  margin-top:3px;
  margin-bottom:3px;
  margin-left:3px;
  margin-right:30px;
}
.checkbox.checked div {
  background-color:var(--red);
  margin-left:30px;
  margin-right:3px;
}
.checkbox.inactive {
  opacity:0.4;
}



#HEADER{
  background-color:var(--black);
  background-image:url('i/H_L02_1920x360.png'), url('i/H_L01_1920x135.png');
  background-repeat:no-repeat, repeat-x;
  background-position:right top, right top;
  background-size:1920px 360px, 1920px 135px;
  padding-top:122px;
  padding-left:20px;
  height:57px;
  width:100%;
  position:fixed;
  top:0px;
  left:0px;
  transition-property:background-size, height, background-position, background-color, padding-top, padding-left;
  transition-delay:0s, 0s, 0s, 0s;
  z-index: 100;
}

#HEADER a, #miniMenu a {
  display: inline-block;
  line-height: 58px;
  font-size: 18pt;
  color: var(--white);
  text-decoration: none;
  padding-right: 20px;
  padding-left: 20px;
}
#HEADER a:hover, #miniMenu a:hover {
	background: var(--white);
  color:var(--red);
}
#HEADER a.mini {
  display:none;
}

#HEADER div.full {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: auto auto auto 1fr 720px;
}

#HEADER div.full span.fill {
  justify-self: right;
}

#miniMenu {
  display:none;
  position: absolute;
  top: 0px;
  left:0px;
  width:100%;
  padding-top: 100px;
  z-index:90;
  background: var(--black-75);
}
#miniMenu a {
  display:block;
  color:var(--white);
  padding:8px;
}

#griddy {
  background:var(--white);
  box-sizing: border-box;
  display:grid;
  transition-property:padding-top;
  padding-top:250px;
  padding-left:180px;
  padding-right:180px;
  padding-bottom: 60px;
  grid-gap: 60px;
  grid-template-columns: 1fr 300px;
}

#griddy h1, #griddy h2, #griddy h3, #griddy h4, #griddy h5, #griddy h6 {
  margin-top: 0px;
  padding-top: 0px;
}

#FOOTER {
  display:grid;
  grid-template-columns:1fr;
  grid-gap:30px;
  background: var(--black);
  border-top:2px solid var(--gray);
  padding:20px;
  padding-bottom:30px;
}
#FOOTER * {
  color:var(--white);
  font-size:11pt;
  text-align:center;
}
#FOOTER a {
  color:var(--white);
}
#FOOTER .copyright {
  padding-top:20px;
  text-align:left;
}
#FOOTER .copyright img {
  float:left;
  margin-right:10px;
  margin-bottom:10px;
}
#FOOTER .copyright p {
  text-indent:0px;
  text-align:left;
  margin:2px;
}
#FOOTER #sitemap {
  box-sizing: border-box;
  display:grid;
  grid-gap: 20px;
  grid-template-columns: 1fr auto auto auto 1fr;
}
#FOOTER #sitemap a {
  font-size:10pt;
  display:block;
  text-align:left;
  padding:2px;
  min-width:100px;
}
#FOOTER #sitemap a:hover {
  background:var(--white);
  color:var(--red);
}
#FOOTER #sitemap a.lvl2{ padding-left:30px; }
#FOOTER #sitemap a.lvl3{ padding-left:60px; }
#FOOTER #sitemap a.lvl4{ padding-left:90px; }

body.collapse #griddy {
  padding-top:119px;
}
body.collapse #HEADER {
  background-size:640px 120px, 640px 45px;
  padding-top:41px;
}

body.slide #HEADER {
  background-position:-397px 0px, -397px 0px;
  padding-left:175px;
}

@media (max-width: 1400px) {
  #griddy {
    padding-left:100px;
    padding-right:100px;
  }
}

@media (max-width: 1165px) {
  #HEADER {
    background-size: 640px 120px, 640px 45px;
    padding-top: 41px;
  }
  #HEADER a.mini {
    display: inline-block;
  }
  #HEADER div.full {
    display: none;
  }

  #griddy {
    padding-top: 119px;
    padding-left: 40px;
    padding-right: 40px;
    grid-gap: 40px;
  }
  
  
  body.collapse #HEADER a.mini{
    border-radius: 4px;
    background-color: var(--red);
  }
  body.collapse #HEADER a.mini:hover{
    background-color: var(--white);
    color: var(--red);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4), 0 6px 20px 0 rgba(0,0,0,0.38);
  }
  body.collapse #HEADER{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  
  body.slide #HEADER{
    padding-left: 200px;
  }
  
  
  body.menuOpen #HEADER {
    padding-bottom: 0px;
  }
  body.menuOpen #miniMenuButton {
    background-color: var(--menubg);
    color: var(--white);
    border: 0px none var(--menubg);
  }
  body.menuOpen #miniMenu {
    display: block;
  }
  body.collapse.menuOpen #miniMenuButton {
    border-radius: 0px;
  }
}

@media (max-width: 1001px) {
  #FOOTER #sitemap {
    display:none;
  }
}

@media (max-width: 801px) {
  p {
    font-size: 18pt;
    text-align: left;
  }
  
  li { font-size:16pt; }

  #griddy {
    grid-gap: 20px;
    grid-template-columns: 1fr;
  }
}