* { 
   box-sizing: border-box;
}


html {
   font-size: 16px;
}


/* Add 1em of whitespace on each side of image tiles */
.pure-g .pad-box {
   padding: .5rem;
}
.pure-g.pad-box {
   margin: .5rem;
}

.pure-g .big-pad-box {
   padding: .9rem;
}
.pure-g.big-pad-box {
   margin: .9rem;
}

#twoCol {
   padding-right: 2.2rem;
}

.content {
   margin-left: 1.4rem;   
   margin-right: 1.4rem;
}

/* Header */

.navbar {
   min-height: 150px;
   padding-top: 50px;
   margin-bottom: 10px;
   padding-left: 1.4rem;
   padding-right: 1.4rem;

}

.navbar-plain {
   background: white;
   box-shadow: none;
   border: 0;
}

.navbar-plain .container-fluid {
   padding-bottom: 28px;
   border-bottom: 1px solid #e7e7e7;
}

.navbar-plain .navbar-nav > li > a {
   padding-left: 18px;
   padding-right: 18px;
}

.navbar-plain .navbar-nav > li > a:hover, .navbar-plain .navbar-nav > li > a:focus {
   color: rgba(219,188,43,1.0);
}

nav ul li {
   font-family: "EngraversGothicBT-Regular";
   font-size: 0.8rem;
   letter-spacing: .3rem;
}

/* Some CSS hacks to get borders working how we want */
@media (max-width:899px ) {   
   .navbar-plain .navbar-collapse {
      border-bottom:   1px solid #E7E7E7;
   }
   
   .navbar-collapse.collapse.in, .navbar-collapse.collapsing {
      margin-top: 20px;
      margin-bottom: -20px;
      border-bottom: 0;
   }
}


.title {
   display: table-cell;
   vertical-align: middle;
   padding-left: 25px;
}

.title > img {
   display: inline-block;
   vertical-align: middle;
}

.logo-img {
   max-width: 333px;
   margin-top: -8px;
}

@media (max-width:899px ) {
   .logo-img {
      width: 73%;
      margin-left: 15px;
      margin-top: 0px;
   }
}


/* Project Tiles on Homepage */

.project-tile {
   cursor: pointer;
}

.project-tile:hover {
   text-decoration: none;
   color: black;
}

.hover-div {
   position: relative;
}

.color-hover + img {
   opacity: 0;
   position: absolute;
   top: 0px;
   left: 0px;
   
/*
   Don't fade in for now...
   -webkit-transition: opacity 0.8s ease-in-out;
   -moz-transition: opacity 0.8s  ease-in-out;
   -o-transition: opacity 0.8s  ease-in-out;
   -ms-transition: opacity 0.8s  ease-in-out;
   transition: opacity 0.8s  ease-in-out;
*/
}

.hover-div:hover > .color-hover + img {
   opacity: 1;
}

.hover-div:hover > .yellow-banner {
   opacity: 1;
}

.yellow-banner {
   width: 100%;
   position: absolute;
   bottom: 20px;
   background-color: rgba(219,188,43,0.78);
   opacity: 0;
   text-align: center;
   text-transform: uppercase;
   padding: .1em;
   
/*
   Don't fade in for now...
   -webkit-transition: opacity 0.8s ease-in-out;
   -moz-transition: opacity 0.8s  ease-in-out;
   -o-transition: opacity 0.8s  ease-in-out;
   -ms-transition: opacity 0.8s  ease-in-out;
   transition: opacity 0.8s  ease-in-out;
*/
}

.yellow-banner h4 {
   font-family: "EngraversGothicBT-Regular";
/*   font-weight: bold;*/
   margin-top: 15px;
   margin-bottom: 10px;
   letter-spacing: .15rem;
   word-spacing: .35rem;
   font-size: 1.35rem;
   color: black;
   padding-left: 4px;
   padding-right: 4px;
}

.yellow-banner h6 {
/*   font-weight: bold;*/
   font-size: 0.65rem;
   letter-spacing: .35rem;
   word-spacing: .4rem;   
   margin-top: 0px;
   margin-bottom: 15px;
   color: black;
}

/* Project Pages */

.cycle {
   position: relative;
/*   border: 2px dotted red;*/
}

.cycle img.junk {
   position: static;
   opacity: 0;
}

.cycle img.real {
   position:absolute;
   z-index:1;
   top: 0;
   left: 0;
}
.cycle img.active{
   z-index:3;
   top: 0;
   left: 0;
}

.text-content h3 {
   font-family: "EngraversGothicBT-Regular";
   font-size: 1.45rem;
   font-weight: bold;
   letter-spacing: .25rem;
   margin-bottom: 1.5rem;
   text-transform: uppercase;
}

.text-content h4 {
   font-family: "EngraversGothicBT-Regular";
   font-size: 1.15rem;
   letter-spacing: .2rem;
   margin: 0;
   text-transform: uppercase;
   color: black;
}

.text-content h5 {
   font-family: "EngraversGothicBT-Regular";
   font-size: .95rem;
   letter-spacing: .17rem;
   margin: 2rem 0 1rem 0;
   text-transform: uppercase;
   color: #dbbc2b;
}

.text-content h6 {
   font-family: "EngraversGothicBT-Regular";
   font-size: .95rem;
   letter-spacing: .18rem;
   margin: .1rem;
   font-weight: bold;
   text-transform: uppercase;
}

.text-content p {
   font-family: 'EB Garamond', serif;
   line-height: 1.6;
}

.text-content .main p {
   font-size: 1.01rem;
   letter-spacing: .11rem;
   margin-top: .5rem;
   margin-bottom: 1.5rem;
}

.text-content .secondary p {
   font-size: .89rem;
   letter-spacing: .07rem;
   margin-top: .5rem;
   margin-bottom: 1.5rem;
}

.text-content a {
   color: #333
}
.text-content a:hover, .text-content a:focus{
   color: rgba(219,188,43,1.0);
   text-decoration: none;
}

.text-content .main .columns p {
   margin-bottom: .5rem;
}

#more-info-dropdown {
   cursor: pointer;
   display: inline-block;
}

#more-info-dropdown:after {
   font-family: sans-serif;
   font-size: .6rem;
}

#more-info-dropdown.closed:after {
   content: "\0020\0020►";
}

#more-info-dropdown.open:after {
   content: "\0020\0020▼";
}

#more-info-div {
   display:none;
}

.columns {
   -moz-column-count: 2;
   -webkit-column-count: 2;
   column-count: 2;
}

/* Utilities */

.pull-right {
   float: right;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.strong {
   font-weight: bold;
}


/* Font faces */

/*
@font-face {
   font-family: "Engravers' Gothic";
   src: url(../fonts/eg.ttf) format("truetype");
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: "Big Caslon";
   src: url(../fonts/bc.ttf) format("truetype");
   font-weight: normal;
   font-style: normal;
}
*/