html, body {
  background:black;
}

body {
  background:black;
  color:snow;
  font-family: 'Fjalla One', sans-serif;
  font-weight: 100;
  max-width:1140px;
  margin:0 auto;
}

a {
color:snow;
  text-decoration: none;
}

a img {
  border:0;
}

a:hover {
  color:gray;
}

ul, li {
  list-style: none;
  margin:0;
  padding:0;
}

#content {
  max-width:1250px;
  margin:0 auto;
  text-align: center;
}

#header {
  overflow:hidden;
  padding:0px 2%;
  margin:0 auto;
  margin-bottom:10px;
}

#header .name {
  font-size:50px;
  float:left;
}

#header .tagline {
  font-size:20px;
  letter-spacing: 17px;
  margin-left:8px;
}

.nav {
  float:right;
  padding-top:8px;
  margin-left:10px;
}

.nav li:last-child {
  padding-right: 0px;
}


.pc .nav li  {
  padding:0px 9px;
  font-size: 36px;
  padding-top:0;
}

@media only screen and (max-width:880px) {

.pc #header .name {
  font-size:35px;
}

.pc #header .tagline {
    font-size: 15px;
    letter-spacing: 11px;
}

.pc .nav li  {
  padding:0px 9px;
  font-size: 22px;
  padding-top:0;
}
}

.nav li{
padding:0px 15px;
float:left;
font-size: 32px;
padding-top:20px;
}

.nav+h2 {
text-align:right;
padding-top:60px;
margin:0;
color:gray;
}

.nav .active a,
.nav .active a:hover {
color:gray;
}

#home {
display: block;
}

#home:hover{
color: #eee;
}

.grid {
margin:0 auto;
}

.grid-item {
  float: left;
  width:350px;
  margin-bottom:21px;
}

/*    .grid-item.tall img{
  width:auto;
  height:100%;
}*/

.grid img {
  width:100%;
  display: block;
}

.grid-item img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -o-transition: all 1s ease; /* IE 9 */
    -ms-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
        max-width: 100%;
    display:block;
}
.grid-item:hover .captionwrap img,
.grid-item:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);

     filter: brightness(1.2);
     -webkit-filter: brightness(1.2);
     -moz-filter: brightness(1.2);
     -o-filter: brightness(1.2);
     -ms-filter: brightness(1.2);
}

.grid-item {
  overflow:hidden;
}


#fullscreen {
  position: fixed;
  top:0;left:0;right:0;bottom:0;
  background: rgba(0,0,0,.8);
  z-index:20;
  text-align:center;
  cursor:zoom-out;
  /*overflow:auto;*/
}

#fullscreen img {
 cursor:zoom-out;
}
/*    #fullscreen .fscontent {
  display:table-cell;
  vertical-align: middle;
}*/

#fullscreen img:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

#fullscreen img {
    vertical-align: middle;
    display: inline-block;
}

.vcenter {
  display:table;
  height:100%;
  width:100%;
  text-align:center;
}

.vcenter > div{
  display:table-cell;
  vertical-align: middle;
  height:100%;
}

audio {min-height: 100px;}
.pc audio {min-height:auto;}

.cat {
  width:100%;
  overflow:hidden;
  margin:0 auto;
}

.cat:first-child a img{
  padding-left:0;
}

.cat a:last-child img{
  padding-right:0;
}

.cat a.active img{
  opacity: 1;
}

.cat a.active:hover{
  cursor: default;
}

.cat a img {
    float:left;
    width:18%;
    padding-right:2.5%;
    opacity: .8;
    padding-bottom:2%;
}

.cat a img:hover {
  opacity: 1;
}

#footer {
  text-align:center;
  margin-top:100px;
}

#footer .nav {
  float:none;
  overflow:hidden;
  display: inline-block;
  /*padding-top:35px;*/
  /*background: url('/pics/hudclub.png') no-repeat top center;*/
  background-size:40px;
}

#footer .copy {
    font-size: 9px;
    margin: 10px;
    text-align: center;
}

.caption {
    background: rgba(1, 1, 1, 0.4);
    bottom: 0;
    display: block;
    position: absolute;
    text-align: center;
    visibility: visible;
    width: 100%;
    visibility: hidden;
    transition:visibility 0s linear 0.5s,opacity 0.5s linear;
    opacity: 0;
    font-size:22px;
    cursor: pointer;
}

.grid-item .caption {
  font-size:12px;
  bottom:-5px;
}

.caption h3,
.caption h5 {
  margin:2px;
}

#fullscreen .caption {
  cursor:zoom-out;
  visibility: visible;
  opacity: 1;
}

.pc #fullscreen .caption {
  visibility: hidden;
  opacity: 0;
}

.captionwrap {
  display: inline-block;
  position: relative;
}

.pc #fullscreen .captionwrap:hover .caption,
.pc .captionwrap:hover .caption {
  visibility: visible;
  transition-delay:0s;
  opacity: 1;
}

#hudsym {
  display: block;
  margin:0 auto;
}

.vidwrap {
  display: inline-block;
  background:#121111;
  text-align: center;
  border-radius: 0px 0px 15px 15px;
  margin-top:20px;
  position:relative;
}

.vidwrap a {
  clear:left;
}

.vidtitle {
  font-size:30px;
  position: absolute; top:16px;
  left: 50%;
  transform: translate(-50%, 0%);
  color:#0487cb;
}

#content .grid{
  height:2000px; /* overwritten in js, looks better */
}

.pc #hudsym img{
  width:40px;
}
/* older styles from site2.css below */

.cols {
  display: table;
  table-layout: fixed;
  width:100%;
}
.col {
  display: table-cell;
  vertical-align: top;
  padding:10px;
}

.pc .pg_evnt {
  display: table;
}

.pc .pg_evnt .col {
  display: table-cell;
}

.pg_evnt {
  display: block;
}

.pg_evnt .col {
  display: block;
}

.pg_evnt .col2 {
    text-align: center;
}

.pg_evnt .col h3,
.pg_evnt .col p.indented,
.pg_evnt .col iframe {
  display: block;
  margin:0 auto;
  text-align: center;
}

.pc .pg_evnt .col iframe {
  height: 300px;
  width:  300px;
}

.pg_evnt .col iframe {
  height: 400px;
  width: 500px;
}

.pg_evnt .layout {
  font-family: 'Fjalla One', arial;
}

.col {
  padding-left:30px;
}

.hoverCaption {
  position:relative;
  display:inline-block;
}

.pc .hoverCaption:hover a {
  color:#FFFAFA;
}

.pc .hoverCaption:hover .caption {
  visibility: visible;
  transition-delay:0s;
  opacity:1;
}

.pc .hoverCaption img {
  display:block;
  width:100%;
}

.hoverCaption .caption {
  visibility: hidden;
  opacity:0;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;
  position:absolute;
  bottom:0px;
  right:0;
  left:0px;
  padding:4px 0px;
  background:rgba(0,0,0,.4);
}

.hoverCaption .caption * {
  text-align:center;
}

.hoverCaption h3 {
  font-size:25px;
  margin:0;
}

.hoverCaption h5 {
  font-style:italic;
  font-size:14px;
  margin:0;
}

.hoverCaption .msg {
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;
  position: absolute;
  top:50%;
  left:50%;
}

.pc .hoverCaption:hover .msg {
  visibility:visible;
  transition-delay:0s;
  opacity:1;
}

.hoverCaption .msg span {
  display: block;
  background:#000;
  padding:10px;
  border-radius: 10px;
  opacity:.6;
  position: relative;
  left:-50%;
}

.pg_evnt {
  text-align:left;
}

.pg_evnt .col2 {
  text-align:right;
  padding-right:40px;
  background: url('/pics/eventbg.jpg') top center no-repeat;
  backgroud-size:auto;
  color:black;
  height:900px;
}

.pg_evnt .col2 iframe {
  border:4px solid black !important;
}

@media only screen and (max-width: 700px)  {

  .squares li:nth-child(2n+1) {
    clear:left;
  }

  .squares li {
    width:48%;
  }

  .pg_evnt .cols {
    display:block;
  }

  .pg_evnt .col {
    display: block;
  }

  .pg_evnt .col2 {
    text-align: left;
  }
}

/* iphone 5 landscape */

/*@media only screen and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {

  .pg_about .about_squares .square .title {
    font-size: 30px;
  }

  .pg_about .about_squares .square {
    width:900px;
    font-size:22px;
    background-size:100%;
  }
}

@media only screen and (max-width: 742px)  {
  .hudSlider .cat {
    font-size:16px;
  }
}*/

/* nudge when sub header slides under logo */
@media only screen and (max-width: 542px)  {
  #nav+h2 {
    position: relative;
    top:6px;
    float: right;
    padding:0;
  }

  .hudSlider .cat {
    padding-top:15%;
    font-size:12px;
  }
}

/* page specific rules */


.event {
  overflow:hidden;
  position: relative;
}

.event img{
  float:left;
  width:80px;
  padding:2px;
  border:1px solid #ddd;
  margin:10px;
}

.event p {
  padding-left:110px;
}

.event .title{
  display:block;
  margin-top:10px;
}

.ehead {
  overflow: hidden;
}

.ehead span {
  display: block;
}

.event .datetime{
  /*color: #E0232C;*/
  color: #FFA778;
}

.event {
  padding:8px 0px;
  border-top:1px solid #aaa;
}

.event p {
  font-size: 14px;
  padding: 0px;
}



/* about page */

.about_squares {
  overflow: hidden;
  font-family: 'Fjalla One', arial;
  margin-left:30px;
  text-align: center;
}

.about_squares .square {
  font-size:30px;
  text-align: justify;
  margin-right:20px;
  margin-top:20px;
}

.pc .about_squares .square {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  text-align:justify;
  font-size:14px;
  height:560px;
  width:330px;
  margin:8px;
}

.about_squares .square .content, .about_squares .square .title {
  padding:10px;
}

.about_squares .square .title {
  margin:0;
  font-size:16px;
  background:rgba(0,0,0, .2);
  text-align: center;
}

.about_squares .square .title p {
  margin:0;
  font-weight: bold;
}

.about_squares .square form {
  margin-top:40px;
  text-align: center;
}

.statement {
  background: url("/pics/bg3.jpg") repeat scroll 0 0 black;
  background-size:100% 100%;
}

.history {
  background: url("/pics/bg2.jpg") repeat scroll 0 0 black;
  background-size:100% 100%;
}

.bio {
  background: url("/pics/bg1.jpg") repeat scroll 0 0 black;
  background-size:100% 100%;
}

.send {
  cursor: pointer;
  border:0;
  text-indent:-9999px;
  background: url("/pics/send.png") no-repeat scroll 0px 0px black;
  background-size:100% 100%;
  height: 80px;
  font-size:18px;
  width: 100px;
  margin-top:25px;
}

.pc .send {
  cursor: pointer;
  border:0;
  text-indent:-9999px;
  background: url("/pics/send.png") repeat scroll 0px 0px black;
  height: 25px;
  width: 100px;
  margin-top:25px;
}

.newSend {
  background: #716E67;
  background-image: -webkit-linear-gradient(top, #716E67, #201D17);
  background-image: -moz-linear-gradient(top, #716E67, #201D17);
  background-image: -ms-linear-gradient(top, #716E67, #201D17);
  background-image: -o-linear-gradient(top, #716E67, #201D17);
  background-image: linear-gradient(to bottom, #716E67, #201D17);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 40px 10px 40px;
  text-decoration: none;
}

.newSend:hover {
  cursor: pointer;
  background: #716E67;
  background-image: -webkit-linear-gradient(top, #716E67, #3498db);
  background-image: -moz-linear-gradient(top, #716E67, #3498db);
  background-image: -ms-linear-gradient(top, #716E67, #3498db);
  background-image: -o-linear-gradient(top, #716E67, #3498db);
  background-image: linear-gradient(to bottom, #716E67, #3498db);
  text-decoration: none;
}

strong {
  font-size:15px;
}

.indented {
  padding-left: 20px;
  margin-top:0;
}

.pc #contactform {

}

/*#contactform {
  height:800px;
}

#contactform input{
  width:100%;
  font-size:50px;
}

#contactform textarea {
  height:
}*/