/* 
Prewarning to anyone venturing through this:
I am not a professional. That being said, I'm not a complete amatuer either. I have dabbled in and out of HTML/CSS (jQuery not at all before this) for over a decade.
The site was in a rush to go up with content first. I am now in the action of rebuilding the site again pretty much, 
this time properly and mobile first, and with proper testing on all screen sizes.
I had to translate dimensions from print based (pt, CMYK, etc) design as well, not responsive sizing units.

-Brian
*/


/*
 * Globals
 */

html { font-size: 62.5%; 
width: 100%;
height: 100%;
} 





body{
    background-color: white !important;
  height: 100% !important;
  width: 100% !important; 
  margin: 0; 
  font-size: 1.338em;
  font-size: 12px; 
  font-size: 1.2rem;
  text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    overflow: none;
}





/*FIXME: Temporary fix so things don't overflow into other elements on browsers. Need to find a responsive scaling method */;
body h1{
transform:scale(1,1) !important; 
-webkit-transform:scale(1,1) !important;
-moz-transform:scale(1,1) !important;
-ms-transform:scale(1,1) !important;
-o-transform:scale(1,1) !important;
}

body h2{
transform:scale(1,1) !important; 
-webkit-transform:scale(1,1) !important;
-moz-transform:scale(1,1) !important;
-ms-transform:scale(1,1) !important;
-o-transform:scale(1,1) !important;
}

/* Some fancy elements to give the site a little more depth and "design" */

/*Used to animate the line under all links... May need to make this a class of it's own later on, so that things don't get out of hand */



.navbar {
    margin-bottom: 0;
    background: rgba(255,255,255,1);
    transition: all 0.75s ease-out;
-moz-transition: all 0.75s ease-out;
-ms-transition: all 0.75s ease-out;
-o-transition: all 0.75s ease-out;
-webkit-transition: all 0.75s ease-out;
}

.navbar-default{
    border: none;
}

.navbar-toggle{
    border: rgba(0,0,0,0.4);
}

.navbar-default .navbar-nav > li > a{
    color: rgba(10,10,10,0.6);
    font-family: kuroregular;
    font-size: 2.0rem;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: rgba(0,0,0,1);
}

.navbar-nav li{
  transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
}

.navbar-nav li:hover, .navbar-nav li:focus{
background-color: rgba(0,0,0,0.1);
}



.dropdown .dropdown-menu li a{
font-family: kuroregular;
font-size: 1.6rem;
}


/* Used for hiding and showing things, in a magical sort of way */
/* More of just placeholder classes, the actual style of hiding and showing will be handled in ./js/scripts.js */

.hideable{

  transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
-webkit-transition: all 0.25s ease-out;
}

.notShowing{
 
}



#const_warning{
  margin-left: 0%;
  margin-right: 0%;
  text-align: center;
  background-color: #F3E2A9;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  -webkit-border-radius: 20px;
  margin-bottom: 2%;
}

#const_warning h2{
  font-family: kuroregular;
  font-size: 1.6rem;
  margin: 0%;
  padding: 2%;
  padding-bottom: 0%;
  margin-bottom: 0%;

}

#const_warning.notShowing{
  display: none !important;
}

#const_warning a{
  padding: 0%;
  padding-bottom: 1%;

}

.img-responsive{
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
}

.round-corners{

-webkit-border-radius: 25px 25px 25px 25px; 
-moz-border-radius: 25px 25px 25px 25px;
-o-border-radius: 25px 25px 25px 25px;
border-radius: 25px 25px 25px 25px;



}

.drop-shadow{
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.75);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.75);
box-shadow: 0px 0px 10px rgba(0,0,0,.75);
}

.inverted-drop-shadow{
-moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,.75);
-webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,.75);
box-shadow: inset 0px 0px 10px rgba(0,0,0,.75);
}






#mobile-nav-logo{
      transition: all 0.75s ease-out;
-moz-transition: all 0.75s ease-out;
-ms-transition: all 0.75s ease-out;
-o-transition: all 0.75s ease-out;
-webkit-transition: all 0.75s ease-out;
}




/* For positioning exactly and in effect creating "layers" which can be adjusted by z-index */
.fixed-content {
    top: 0;
    bottom:0;
    left:0;
    right:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}




  

/*For the background of the site, although not at the image background, but rather the large white area behind all the text */
.bg {
position: fixed;
top: 25%;
width: 100%;
height: 60%;
z-index: 81;
  background: rgb(240,240,240); /* for IE */
  background: rgba(240,240,240,0.75); 
left: 0;



}

/*  Fonts */

@font-face {
    font-family: 'chalkduster';
    src: url('../fonts/Chalkduster.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    
}

@font-face {
    font-family: 'koratakiregular';
    src: url('../fonts/korataki_regular_macroman/korataki_rg-webfont.eot');
    src: url('../fonts/korataki_regular_macroman/korataki_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/korataki_regular_macroman/korataki_rg-webfont.woff2') format('woff2'),
         url('../fonts/korataki_regular_macroman/korataki_rg-webfont.woff') format('woff'),
         url('../fonts/korataki_regular_macroman/korataki_rg-webfont.ttf') format('truetype'),
         url('../fonts/korataki_regular_macroman/korataki_rg-webfont.svg#koratakiregular') format('svg');
    font-weight: normal;
    font-style: normal;
    
}

@font-face {
    font-family: 'kuroregular';
    src: url('../fonts/kuro_regular_macroman/Kuro-Regular-webfont.eot');
    src: url('../fonts/kuro_regular_macroman/Kuro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/kuro_regular_macroman/Kuro-Regular-webfont.woff2') format('woff2'),
         url('../fonts/kuro_regular_macroman/Kuro-Regular-webfont.woff') format('woff'),
         url('../fonts/kuro_regular_macroman/Kuro-Regular-webfont.ttf') format('truetype'),
         url('../fonts/kuro_regular_macroman/Kuro-Regular-webfont.svg#kuroregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: verminVibes;
    src: url(../fonts/VV2Nightclub.otf);
}

@font-face {
    font-family: 'franklin_gothic_fsbook';
    src: url('../fonts/franklingothicfs_book_macroman/FranklinGothic-Book-webfont.eot');
    src: url('../fonts/franklingothicfs_book_macroman/FranklinGothic-Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/franklingothicfs_book_macroman/FranklinGothic-Book-webfont.woff2') format('woff2'),
         url('../fonts/franklingothicfs_book_macroman/FranklinGothic-Book-webfont.woff') format('woff'),
         url('../fonts/franklingothicfs_book_macroman/FranklinGothic-Book-webfont.ttf') format('truetype'),
         url('../fonts/franklingothicfs_book_macroman/FranklinGothic-Book-webfont.svg#franklin_gothic_fsbook') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'banker_squareregular';
    src: url('../fonts/bankersquare_regular_macroman/BankerSquare-Regular-webfont.eot');
    src: url('../fonts/bankersquare_regular_macroman/BankerSquare-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bankersquare_regular_macroman/BankerSquare-Regular-webfont.woff2') format('woff2'),
         url('../fonts/bankersquare_regular_macroman/BankerSquare-Regular-webfont.woff') format('woff'),
         url('../fonts/bankersquare_regular_macroman/BankerSquare-Regular-webfont.ttf') format('truetype'),
         url('../fonts/bankersquare_regular_macroman/BankerSquare-Regular-webfont.svg#banker_squareregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*  Page tabs content */

#tabContainer{
  height: 100%;
  width: 100%;
  margin: 0%;
  padding: 0%;
  padding-left: 0%;
  padding-right: 0%;
  padding-top: 9vh;
  overflow: hidden;
}

.topImageAndDesc{
  padding: 0%;
  margin: 0%;
}

.tabSection{
  min-height: 80vh; /*Ensures the section is entirely the height of the screen, minus the navigation bar */
}


.noMinHeight{
  min-height: 0vh !important;
}

#tab{
  height: 100%;
}

.miniTabHolder{
  /*min-height: 100vh;*/
  min-height: 0vh;
  position: relative;
   transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
}

.miniTab{
  height: auto;
  position: absolute;
   transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
}

.miniTab.active{
  position: relative;
}

.tabChangerTab{
  position: relative;
}

.tabChangerTab h1{
  display: none;
}

.tabChangerTab br{
  display: none;
}


/*For when vertical positioning is needed. Blatent copy/paste from an example online pretty much. */

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

.vertical-bottom {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}


.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}


.multiLevelDotSection{
  min-height: 60vh;
  margin-top: 0%;
  padding-top: 10%;

}

.dotAlignBottom{
  margin-top: 0vh;
}

/*  Animation classes. Add/remove as needed to animate show/hide */



.blur-out {
    -webkit-filter: blur(10px);

    opacity: 0.25;
    -webkit-transition: all 0.30s ease-out;
    transition: all 0.30s ease-out;
    visibility: hidden;
}

.blur-in {
    -webkit-filter: blur(0px);

    opacity: 1;
    -webkit-transition: all 0.30s ease-out;
    transition: all 0.30s ease-out;
    visibility: visible;
}


.fade-out {
 
   
    opacity: 0.0;
    -webkit-transition: opacity 0.30s ease-out;
    transition: opacity 0.30s ease-out;
    visibility: hidden;
}

.fade-in {

   
    opacity: 1;
    -webkit-transition: opacity 0.30s ease-out;
    transition: opacity 0.30s ease-out;
    visibility: visible;
}

.slideLeft-out {
 
   
    padding-left: 100%;
    -webkit-transition: all 0.30s ease-out;
    transition: all 0.30s ease-out;
    visibility: hidden;
}

.slideLeft-in {

   
    padding-left: 0%;
    -webkit-transition: all 0.30s ease-out;
    transition: all 0.30s ease-out;
    visibility: visible;
}

.slideLeft-pre{
   padding-left: -100%;
}


.hideFade{
 transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;

 visibility: visible;
  opacity: 0; 
}

/*More used on the news page, but still nice. */

.well{
  background-color: rgba(200,200,200,0.90);
}



.circle_holder{
  text-align: center;
}

.circle {
    -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width:  2vw;
  height: 3vh; 
  background-color: #700205;
  margin-left: 10%;
  margin-right: 10%;

}

.clear-padding{
  width: 2vw;
  height: 8vh; 
  margin-left: 2%;
  margin-right: 2%;
}




/*So it doesn't crop and go outside the viewport*/
img.lazy{
  max-width: 100%;
}

/* So all the news page images are no larger than a certain size, to give some sort of order to it*/
#page_news img.lazy{
width: auto !important;
height: auto !important;
max-height: 250pt !important; /* 150? */
max-width: 100% !important;
min-width: 200pt !important;

}


#footer{
  position: relative;
  bottom: 0;
  overflow: auto;
  max-height: 10%;
  z-index: 5;
  margin-top: 5%;
    height: auto;
  width: 100%;
  background-color: black;
  margin: 0%;
  padding: 0%;
  z-index: 5;
}


#footer h1{
  font-size: 1.6em;
  font-family: banker_squareregular;
  color: white;
  text-decoration: underline;
  display: inline-block;
 padding-top: 0%;
}

#footer h2{
  font-family: banker_squareregular;
  font-size: 1rem;
  color: white;
  display: inline-block;
  text-transform: uppercase;
  padding-top: 0%;
}


#footer img{
  padding: 0%;
  margin-left: 0;
  width: auto;
  height: 15vh;
}



.textCell{
  padding-left: 5%;
  padding-right: 5%;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
body {
  background-color: #0A0562;

}

body{
 font-size: 1.17em;
}


/*Mini footer? Small screen to begin with, don't want to take up lots of space*/

.gradient{
top: 11%;

}


.pageTab{
visibility: hidden;
top:-1000px;
bottom: 0px;
height: 100%;
width: 100%;
z-index:100 !important;
padding: 0%;
overflow-y: scroll ;

/* This helps so much with the scrolling inside divs on mobile, makes it feel native */
-webkit-overflow-scrolling: touch;

}



#tabContainer{
padding-left: 0%;
padding-right: 0%;
}



}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */


img.lazy{
width: auto;
height: auto;
max-height: 150pt;
}

}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */



.circle_holder{
  display: none;
}

.circle{
  display: none;
}

.clear-padding{
  display: none;
}

img.lazy{
width: auto;
height: auto;
max-height: 250pt;
}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */

body{
  font-size: 1.17em;
}



#tabContainer{
padding-left: 0%;
padding-right: 0%;
}

#footer{
  width: 100%;
}

}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */

#footer{
  position: relative;
  bottom: 0;
  height: auto;
  width: 98%;
  background-color: black;
  z-index: 5;
  padding-left: 1%;
}

#footer h1{
  font-size: 3.01em;
  font-family: banker_squareregular;
  color: white;
  text-decoration: underline;

 padding-top: 8%
}

#footer h2{
  font-family: banker_squareregular;
  font-size: 1.6rem;
  color: white;
  text-transform: uppercase;
  padding-top: 20%;
}


#footer img{
  padding: 0%;
  margin-left: -50px;
  width: auto;
  height: 15vh;
}

img.lazy{
width: auto;
height: auto;
max-height: 250pt;
}

/*Landscape mode can handle these on a tablet  (circle related displays)*/
.circle_holder{
  display: block !important;
}

.circle{
  display: block !important;
}

.clear-padding{
  display: block !important;
}
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */

.circle_holder{
  display: none;
}

.circle{
  display: none;
}

.clear-padding{
  display: none;
}

img.lazy{
width: auto;
height: auto;
max-height: 350pt;
}




.gradient{
top: 11%;

}


.tab-container{
z-index: 105;

top: 11%;
height: 84%;
width: 100%;
  transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
overflow: hidden ;

}

.alpha {

position: relative;
z-index: 106 !important;

padding-top: 0;
padding-bottom: 0;

margin-left: 5%;
margin-right: 5%;
overflow: hidden;

}



.blur_bg{
  top: 11%;
  position: fixed;
}

.bg{
  top: 11%;
  position: fixed;
  color: black;
  height: 85%;
}

}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */


}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */

body{
  font-size: 1.17em;
}

.circle_holder{
  display: none;
}

.circle{
  display: none;
}

.clear-padding{
  display: none;
}




.gradient{
top: 11%;

}

#tabContainer{
padding-left: 0%;
padding-right: 0%;
}

/* 
This should make images display properly on mobile, at least that is the idea. Force the size with percentage rather than pixels/points. 
However, only do it for the lazyload images, just for some control over which ones resize and don't.
It also does not look so decent for low-resolution images.
 */

img.lazy{
width: auto;
height: auto;
max-height: 250pt;
}



}

body h1{
transform:scale(1,1) !important; 
-webkit-transform:scale(1,1) !important;
-moz-transform:scale(1,1) !important;
-ms-transform:scale(1,1) !important;
-o-transform:scale(1,1) !important;
}

body h2{
transform:scale(1,1) !important; 
-webkit-transform:scale(1,1) !important;
-moz-transform:scale(1,1) !important;
-ms-transform:scale(1,1) !important;
-o-transform:scale(1,1) !important;
}