/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
  color: black;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: white;
  border: .05rem solid white;
}


/*
 * Base structure
 */

html,
body {
  height:100%;
  background-color: white;
  /*background: url(../images/background.jpg) no-repeat center center fixed;*/
  background-size: 100% 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-overflow-scrolling:touch;
  background-size: cover;
  margin:0;
  opacity:1;
}
html{
  overflow-y:hidden;
}
body {
  color: black;
  text-align: center;
  text-shadow: 0 .05rem .1rem rgba(0,0,0,.5);
  overflow-y: scroll;
}

table-container {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  table-layout: fixed;
}

.col-sm {
  width: 100px;
}

td {
 word-wrap: break-word;
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  position:relative;

  /*
  -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
          box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
  */
}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: top;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
  font-family: Verdana, sans-serif;
}

/* Padding for spacing */
.inner {
  padding: 1rem;
}

.fine-print {
  color: #454545;
  font-size: 12;
  font-weight: 300;
}


/*
 * Header
 */

.masthead {
  margin-bottom: 2rem;
}

.nav-masthead {
  max-width: 400px;
}

.masthead-brand {
  margin-bottom: 0;
  width:100%;
  /*min-width:20rem;*/
}

.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: bold;
  color: black;
  text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white; 
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: black;
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: black;
  border-bottom-color: black;
}

.nav-link {
  color:black;
}

/*
 * Cover
 */

.cover {
  padding: 0 0rem; /*increase this for a minimum padding between gold area and edge of screen (esp. for mobile)*/
  padding-bottom:11rem;
}
.cover .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: bold;
}


/*
 * Footer
 */

.mastfoot {
  color: black;;
  height: 10rem;
  position: absolute;
  bottom:0;
  width: 100%;
}

.social_icons {
  height: 50px;
  width: 50px;
  margin: 0 auto;
}

#FB_logo {
  background-image: url(../images/fb_logo.png);
  float: left;
  height: 50px;
  width: 50px;
}

#FB_logo:hover {
  background-image: url(../images/fb_logo_hover.png);
}

#IG_logo {
  background-image: url(../images/ig_logo.png);
  float: right;
  height: 50px;
  width: 50px;
}

#IG_logo:hover {
  background-image: url(../images/ig_logo_hover.png);
}

/*
 * Affix and center
 */

@media (min-width: 62em) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 70rem; /*This is the one to change for the main width (width of header and max with of gold panels)*/
  }
}

.panel-heading{
  min-height: 50px;
  background-image: url(../images/header_bar.png);
  background-size: cover;
}

.panel-heading h3 {
  color: black;
  line-height: 50px; /* To vertically center text in the header bar*/
}

.panel-body{
    background: rgba(255, 255, 255, 0.75) /*last number is opacity*/;
}

.text-panel {
  text-align: left
}

hr{
  border: none;
  height: 1px;
  /* Set the hr color */
  color: black;
  background-color: black;
  opacity: 1;
}

.card {
  float: left;
  margin: auto;
  /*width: 33.33%; - now handled below on a size basis*/
  min-width: 10rem; /*decrease this if too big to fit on phone screen*/
  padding: .25rem;
  /*min-height: 25rem;*/
  border: 0;
  background: none;
}


.card > img {
  margin-bottom: .75rem;
}

.border {
  width: 100%;
  /*width: 18.7rem;*/
}

.card-text {
  font-size: 100%;
  color: black;
}

/* Stuff for ClearBox*/

.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.clearcard a img {
float:center;
padding:0px;
background-color: white;
/*margin: 5px;*/
border:1px solid #cccccc;
/*
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
box-shadow:0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
filter:alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
*/
}

.clearcard a:hover img, .clearcard a:active img {
padding:0px;
border:1px solid #cccccc;
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
}

.clearfix:after{
clear:both;
}
#inline{
visibility: hidden;
color:#444;
}

.about-container {
  position: relative;
  padding: 0rem 2rem 2rem 2rem;
}

.headshot {
  /*filter: grayscale(100%) contrast(50%) brightness(130%);*/
  max-width: 95%;
  height: auto;
}

.about-text {
  /*padding: 5rem 2rem 2rem 4rem; /*top right bottom left*/
  text-align: justify;
  color: black;
  line-height: 120%;
  font-size: 16px;
}

.photo-credit {
  text-align: left;
  font-size: 10px;
  position: absolute;
  bottom: 20px;
  left: 50px;
  color: black;
}

.borderless td, .borderless th {
    border: none;
    padding: 2px 15px;
}

   /* Changes for different sized screens (mobile first method) */

    /* Extra Small Devices, Phones */
    @media only screen and (min-width : 320px) {
        .nav-link{  font-size: 70%; }
        .navbar {padding: 0 2rem 0 2rem;}
        .card {width: 100%;} /* one column */
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
        .nav-link{  font-size: 100%; }
        .navbar {padding: 0 0 0 0;}
        .card {width: 50%;}/* two column */
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        .nav-link{  font-size: 100%; }
        .navbar {padding: 0 0 0 0;}
        .card {width: 50%;}/* two column */
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        .nav-link{  font-size: 100%; }
        .navbar {padding: 0 0 0 0;}
        .card {width: 33.33%;}/* three column */
    }