/*body { background-color: rgb(63, 63, 63); }*/
@import url('https://fonts.googleapis.com/css?family=Didact+Gothic|Montserrat+Subrayada:700');
@import url('https://fonts.googleapis.com/css?family=Taviraj:200,300,400');

@font-face { font-family: 'poppinsbold'; src: url('fonts/poppins-bold-webfont.woff2') format('woff2'), url('fonts/poppins-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }


h1, .h1 { font-family: 'poppinsbold', sans-serif; font-weight: bold; }
h2, .h2 { color: rgba(0, 0, 0, 1); font: 400 1.75em/1.2 'Taviraj', serif; }
h3, .h3 { font-family: 'Didact Gothic', sans-serif; font-weight: bold; }
h3, .h3 { color: rgb(153, 153, 153) }
p, ul { color: rgb(166, 166, 166); font-size: 0.92em; font-family: 'Didact Gothic', sans-serif; }

header h1 { display: inline; font-size: 3.5em; margin-left: 0.75em; vertical-align: middle;  }
footer { margin-top: 2rem; }

.strip-heading { padding-top: 3rem; text-transform: uppercase; }
.strip-subheading { font: 300 1.25em/1.2 'Taviraj', serif; margin-bottom: 1.5rem; }
.strip-subheading::after { border-bottom: 1px solid rgba(153, 153, 153, 0.2); content: ' '; display: block; margin-top: 1.75rem; }

.media-object-section { font-size: 0.9em; line-height: 1.15; }
.image-strip { display: block; margin-bottom: 2rem; }

.byline { font-size: 1em; font-weight: bold; margin-top: -2em; margin-right: 10rem; text-transform: uppercase; }


.footer { background-color: rgb(242, 242, 242); margin: 0; padding: 2rem 0 4rem; }

.brick { height: 7rem; width: 100%; }
.contrast { color: rgba(255, 255, 255, 1); }
.tab-title { color: rgb(240, 240, 1); }

.black { background-color: rgba(0, 0, 0, 1); }
.gray { background-color: rgba(26, 26, 26, 1); }
.yellow { background-color: rgba(240, 240, 1, 1); }

.drawing-tile { position: relative; }
    .drawing-tile::before { background-image: url(/images/drawing-xsection-1.png); background-repeat: no-repeat; content: ' '; height: 100%; opacity: 0.15; position: absolute; top: 0; left: 0; width: 100%; }
    .drawing-tile.tile1::before { background-position: 60% 100%; }
    .drawing-tile.tile2::before { background-position: 100% 100%; }
    .drawing-tile.tile3::before { background-position: 40% 30%; }

.dividers { position: relative; }
.dividers::before { border-color: rgba(255, 255, 255, 0.5); border-style: solid; border-width: 0 0 0 1px; content: ' '; height: 110%; position: absolute; top: -1em; left: -2em; }
.dividers::after { border-color: rgba(255, 255, 255, 0.5); border-style: solid; border-width: 0 1px 0 0; content: ' '; height: 110%; position: absolute; top: -1em; right: 0; }

.header-content { padding: 1em 0 4em; }
.main-section { margin-bottom: 2em; padding: 4em 0 2em; }

.runner { height: 7rem; }
.video header { align-items: center; position: relative; z-index: 2; }
.video video { transform: translateX(50%) translateY(50%); position: absolute; bottom: 50%; filter: blur(0.3em); right: 50%; width: auto; height: auto; min-width: 100%; min-height: 100%; overflow: hidden; }
.video::after { background-color: rgba(26, 26, 26, 0.45); content: ' '; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; }
section.banner { align-items: center; display: flex; justify-content: center; overflow: hidden; padding: 8em 0 6em; position: relative; }
.banner header { padding: 1vh; }
.cta { background-color: rgba(44, 44, 50, 1); }

.logo {  }
.thumbnail img { width: 100px; }

/*.projector::after { background-color: rgba(26, 26, 26, 0.5); content: ' '; height: 120%; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -1; }
.projector video { transform: translateX(50%) translateY(50%); filter: blur(0.5em); position: absolute; bottom: 50%; right: 50%; width: 100%; height: auto; min-width: 100%; min-height: 100%; overflow: hidden; z-index: -2; }*/

.unfurl ~ .panel { background-color: rgba(255, 255, 255, 0); height: 0; overflow: hidden; transition: height 1.25s, background-color 2s, transform 2s; }
.unfurl:hover ~ .panel { background-color: rgba(255, 255, 255, 1); height: 7rem; display: unset;  }


.reveal { width: 70%; }

@media screen and (max-width: 380px)
{
.byline { font-size: 0.8rem; margin: -1.2rem 0 0 2rem; }
section.banner { padding: 6em 0 0; }
.main-section { padding-left: 1em; padding-right: 1em; }
}