/*
Theme Name: The Directors Bureau
Theme URI:
Description: A theme for WordPress.
Author: Dave Funkhouser, Drew Baker, Funkhaus
Author URI: http://www.funkhaus.us
Version: 1.0


Colors:
    Black: #222222;

Fonts:
    font-family: "Lucida Console", Monaco, monospace;

/*-------------------------------------------------------------- */


/*
 * Globals
 */
 	html {
	 	height: 100%;
 	}
	body {
	 	height: 100%;
	    font-family: "Lucida Console", Monaco, monospace;
	    font-size: 13px;
	    color: #222222;
	    margin: 0;
	    padding: 0;
	}
    h1,h2,h3,h4,h5,h6 {
        margin: 0;
        padding: 0;
        line-height: 1;
        font-weight: normal;
    }
    ::selection {
        color: white;
        background: #222;
    }
    ::-moz-selection {
        color: white;
        background: #222;
    }



/*
 * Links
 */
 	.terminal a,
	a {
	    color: #222222;
	    text-decoration: none;
	    outline: none;
	    text-transform: uppercase;
	}
	a img {
	   border: none;
	}
 	.terminal-output > div > div > a,
 	#menu a {
	 	color: #222222;
	 	padding: 1px 3px;
	 	display: inline-block;
 	}
 	.terminal-output > div > div > a:hover,
 	#menu .active a,
 	#menu a:hover {
	 	background-color: #222222;
	 	color: white;
 	}
 	a.map,
 	#photo-takeover .entry a,
	.search .title a,
 	a.post-edit-link,
	.single .entry a,
 	.more-posts a,
 	.post-block .title span:first-child,
	.page-menu a {
	    color: white;
	    background-color: #222222;
	 	padding: 1px 3px;
	 	display: inline-block;
	}
 	a.map:hover,
 	#photo-takeover .entry a:hover,
 	a.post-edit-link:hover,
	.single .entry a:hover,
 	.more-posts a:hover,
 	.post-block:hover .title span:first-child,
	.page-menu a:hover {
		color: #222222;
	}
	.page-menu a {
		color: #222222;
		background-color: transparent;
	}
	.page-menu .active a,
	.page-menu a:hover {
		background-color: #222222;
		color: white;
	}

/*
 * Page Structure
 */
 	#container {
	 	min-height: 100%;
 		padding: 0 30px;
 		position: relative;
 		min-width: 1160px;
 	}
 	#header {

 	}
 	#content {
 		padding-bottom: 100px;
 		display: none;
 	}
 	.section {
	 	padding: 15px 0;
	 	margin: 15px 0;
	 	border-bottom: 1px solid #eaeaea;
	 	overflow: hidden;
 	}
 	#footer {
	 	position: fixed;
	 	bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		z-index: 50;
		padding: 0 30px;
 		min-width: 1160px;
 	}



/*
 * Header
 */
 	#logo {
	 	position: fixed;
	 	top: 30px;
	 	right: 30px;
	 	z-index: 110;
 	}
 	.greeting {
 		padding: 30px 0;
	 	white-space: pre;
	 	line-height: 1.2;
 	}
 	.greeting span {
	 	display: none;
 	}
 	.greeting b,
 	.greeting em,
 	.greeting i {
	 	font-style: normal;
	 	font-weight: normal;
 	}
 	.greeting .loading {
	 	display: none;
 	}
 	.greeting .loading i {
	 	display: none;
	 	margin: 0 1px;
	 	letter-spacing: 5.4px;
 	}
 	.greeting .loading b {
	 	display: none;
 	}
 	.greeting .message {
	 	display: none;
 	}



/*
 * Takeovers
 */
 	.front-page-takeover #content {
	 	display: block;
 	}
 	.fullscreen-open .section {
	 	margin: 0;
 	}
	.fullscreen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		background: black;
	}
	#actions {
		position: absolute;
		top: 35px;
		left: 35px;
		text-transform: uppercase;
		color: #333333;
		height: 22px;
		line-height: 22px;
		z-index: 20;
	}
	#actions a,
	#actions span {
		display: inline-block;
		background-color: white;
		padding: 0 5px;
		margin-right: 5px;
		cursor: pointer;
		color: #222222;
	}
	#actions a:hover,
	#actions span:hover {
		background-color: #222222;
		color: white;
	}
	/* Video Takeover */
	#video-takeover iframe {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	#video-takeover iframe .controls-wrapper {
		display: none;
		visibility: hidden;
	}
	/* Photo Takeover */
	#photo-takeover .background-image {
		height: 100%;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-size: cover;
		background-position: center center;
	}
	#photo-takeover .entry {
		position: absolute;
		bottom: 35px;
		left: 35px;
		margin-right: 35px;
	}
	#photo-takeover .entry div {
		background-color: white;
		color: #222222;
		display: inline-block;
		margin: 5px 0;
		padding: 5px;
	}
	/* Text Takeover */
	#text-takeover {
		background-color: white;
		color: #222222;
	}
	#text-takeover .entry {
		width: 780px;
		position: absolute;
		left: 35px;
		top: 50%;
		margin-top: -100px;
	}
	#text-takeover .entry h2 {
		font-size: 14px;
		color: white;
		background-color: #222222;
		padding: 1px 3px;
		margin: 0;
		display: inline-block;
	}
	#text-takeover .entry a {
		background-color: #222222;
		color: white;
	}
	#text-takeover .entry a:hover {
		background-color: white;
		color: #222222;
	}
	#text-takeover #actions a,
	#text-takeover #actions span {
		background-color: #222222;
		color: white;
	}
	#text-takeover #actions a:hover,
	#text-takeover #actions span:hover {
		background-color: white;
		color: #222222;
	}


/*
 * Work Grid
 */
	h2.title {
		font-size: 20px;
		text-transform: uppercase;
	}
	.page-menu {
		margin: 1em 0;
		padding: 0;
		list-style: none;
		text-transform: uppercase;
		overflow: hidden;
	}
	.page-menu li {
		margin-right: 20px;
		float: left;
	}
	.work-grid {
		overflow: hidden;
	}
	.grid-wrapper {
		overflow: hidden;
	}
	.grid-wrapper .grid {
		font-size: 0;
		letter-spacing: 0;
	}
	.grid-wrapper .grid > * {
    	letter-spacing: normal;
	}
	.grid-wrapper h2,title {
		margin-bottom: 1em;
	}
	h3.title {
		margin: 0.5em 0;
		font-size: 13px;
	}
	.grid-wrapper .page-menu {
		display: none;
	}
	.work-block {
		position: relative;
		padding-right: 10px;
		color: #222222;
		display: inline-block;
		vertical-align: top;
		width: 300px;
		height: 250px;
	}
	.work-block.hide {
		opacity: 0;
	}
	.work-block h3.title {
		line-height: 0.8;
	}
	.work-block h3.title span {
		display: block;
	 	text-transform: none;
		line-height: 1.1;
	}
	.work-block h3.title .line-1 {
		text-transform: uppercase;
	}
	.work-block.inactive {
		opacity: 0.65;
	}
	.work-block.inactive .overlay {
		opacity: 1;
	}
	/* When video is loaded */
	.active .work-block {
		opacity: 0.3;
	}
	.active .work-block .overlay {
		opacity: 1;
	}
	.active .work-block.active {
		opacity: 1;
	}
	.active .work-block.active .overlay {
		opacity: 0;
	}
	/* Hover on work-block */
	.work-block:hover {
		opacity: 1;
		color: #222222;
	}
	.work-block:hover .overlay {
		opacity: 0;
	}


/*
 * Work Detail
 */
 	.gallery-text h3 {
	 	font-size: 14px;
	 	text-transform: uppercase;
	 	text-align: center;
	 	margin-bottom: 1.5em;
 	}
 	.gallery-text .entry {
	 	line-height: 1.5;
 	}
 	.media-row {
	 	text-align: center;
	 	width: 100%;
	 	display: block;
 	}
 	.media-player {
	 	text-align: center;
	 	margin: 0 auto 20px auto;
	 	padding: 20px 0;
	 	clear: both;
	 	background-color: #000;
	 	color: white;
	 	position: relative;
	 	min-height: 478px;
 	}
 	.media-player iframe {
	 	margin: 0 auto;
 	}
 	.video-player h3.title {
	 	line-height: 1;
	 	margin: 1.5em 50px 0 50px;
	 	font-size: 13px;
 	}
 	.video-player h3.title span {
	 	display: inline;
 	}
 	.video-player h3.title span a {
	 	background-color: white;
	 	display: inline-block;
	 	padding: 1px 3px;
 	}
 	.video-player h3.title span a:hover {
	 	color: white;
 	}
 	.media-player .close {
	 	position: absolute;
	 	top: 30px;
	 	left: 30px;
	    height: 50px;
	    line-height: 50px;
	    margin-top: -25px;
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	    cursor: pointer;
	    font-size: 14px;
 	}
 	.video-player .browse {
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	    cursor: pointer;
	    font-size: 18px;
	    height: 50px;
	    line-height: 50px;
	    margin-top: -25px;
	    position: absolute;
	    text-align: center;
	    top: 50%;
	    width: 50px;
 	}
 	.video-player .prev {
	 	left: 5%;
 	}
 	.video-player .next {
	 	right: 5%;
 	}
 	.video-player .browse.disabled {
	 	display: none;
 	}


/*
 * Front Page Grid
 */
 	.home-block {
	 	width: 370px;
	 	height: auto;
	 	display: inline-block;
	 	margin: 0 10px 50px 0;
	 	vertical-align: top;
 	}
 	.home-block.size-large-thumb {
	 	width: 560px;
	 	height: auto;
 	}
	.home-block .thumb {
		display: block;
		padding: 0;
		line-height: 0;
		margin-bottom: 1em;
		position: relative;
	}
	.home-block .thumb .overlay {
		width: 100%;
		height: 100%;
	}
	.home-block .thumb img {
		width: auto;
	}
	.home-block .entry a {
		padding: 1px 3px;
		background-color: #222222;
		color: white;
	}
	.home-block .entry a:hover {
		color: #222222;
	}
	/* When video is loaded */
	.active .home-block {
		opacity: 0.3;
	}
	.active .home-block .overlay {
		opacity: 1;
	}
	.active .home-block.active {
		opacity: 1;
	}
	.active .home-block.active .overlay {
		opacity: 0;
	}
	/* Hover on work-block */
	.home-block:hover,
	.home-block .thumb:hover {
		opacity: 1;
		color: #222222;
	}
	.home-block .thumb:hover .overlay {
		opacity: 0;
	}

/*
 * Home Video Detail
 */
	.home-detail .browse {
		display: none;
	}


/*
 * Games/Easter Eggs
 */
 	.game {
	 	text-align: center;
	 	padding: 1em 0;
	 	background-color: black;
	 	color: white;
	 	position: relative;

 	}
 	.game .close {
	    cursor: pointer;
	    font-size: 14px;
	    height: 50px;
	    left: 30px;
	    line-height: 50px;
	    margin-top: -25px;
	    position: absolute;
	    top: 30px;
 	}
	embed {
		margin: 0 auto 1em auto;
		display: block;
		outline: none;
	}
	.code {
		white-space: pre;
		margin: 20px 0;
	}


/*
 * Category
 */
 	.post-block {
	 	margin-bottom: 5px;
	 	display: block;
	 	overflow: hidden;
 	}
 	.post-block .title {
	 	margin: 4px 0;
 	}
 	.post-block .entry {
	 	text-transform: none;
 	}
 	.post-block .entry p {
	 	margin: 0 0 1em 0;
	 	float: left;
	 	clear: both;
 	}
 	.category .post-block .title .text {
 		background-color: #222222;
 		color: #222222;
 	}
 	.category .post-block:hover .title .text {
 		color: white;
 	}


/*
 * Single
 */
 	.single.inline-post {
		border-bottom: 1px solid #eaeaea;
		margin: 15px 0;
		overflow: hidden;
		padding: 15px 0;
 	}
	.single .post-wrapper {
		width: 850px;
		margin: 0 auto;
	}
	.single .title {
		font-size: 22px;
		text-transform: none;
		text-align: center;
	}
	.single .title .border {
		font-size: 16px;
		overflow: hidden;
		line-height: 1;
		word-wrap: none;
		text-align: left;
	}
 	.single .title span {
	 	margin: 5px 0;
	 	display: block;
	 	line-height: 1.5;
 	}
	.single .date {
		margin: 1.5em 0;
		font-size: 14px;
	}
	.single .entry {
		line-height: 1.5em;
	}
	.single .entry p {
		margin: 1.5em 0;
	}
	.single .media-player {
		padding: 0;
		background-color: transparent;
		min-height: 0;
		margin: 2em 0;
		color: #222222;
	}
	.single .video-player h3.title span	{
		line-height: 1;
	}
	.single .video-player .title a {
		background-color: #222222;
	}
	.single .video-player .title a:hover {
		color: #222222;
	}

/*
 * Fallback
 */
	.fallback .entry {
		line-height: 1.5;
	}


/*
 * Surveillance
 */
 	.page-surveillance #container {
        padding: 0;
        min-height: 100%
 	}
 	.section.surveillance {
        margin: 0;
        padding: 0;
        background-color: black;
        position: relative;
    }
 	.surveillance video {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: contain;
 	}


/*
 * Footer
 */
 	.border {
		word-break: none;
		height: 1em;
		line-height: 0.5em;
		overflow: hidden;
		width: 100%;
	}
	#command-line {
		overflow: hidden;
		margin: 10px 0 25px 0;
	}
	.help-prompt {
		position: absolute;
		right: 30px;
		bottom: 24px;
		cursor: pointer;
	}



/*
 * Contact Page
 */
 	.section.contact {
	 	overflow: hidden;
	 	line-height: 1.3;
 	}
 	.contact .column {
	 	float: left;
	 	margin-right: 80px;
 	}
	.contact .title {
		font-size: 20px;
		text-transform: uppercase;
	}
	.contact h4 {
		text-transform: uppercase;
		display: inline-block;
	 	padding: 2px 3px;
	 	background-color: #222222;
	 	color: white;
	 	text-transform: uppercase;
	 	margin: 0.6em 0;
	 	line-height: 1;
	}
	.contact .block {
		white-space: pre;
		margin: 1em 0;
		line-height: 1.8;
	}
	.contact .right-column .block {
		margin: 0 0 1em 0;
	}
	.contact .mailing-list {
		float: left;
		clear: left;margin-top: 100px;
	}
	.contact .download {
		text-decoration: underline;
	 	padding: 1px 3px;
		display: inline-block;
	}
	.contact .download:hover {
		color: white;
		background-color: #222222;
		text-decoration: none;
	}
	.contact form {
		margin: 0 0 2em 0;
	}
	.contact input {
		border: none;
		background: #222222;
		color: white;
		text-transform: uppercase;
	 	padding: 2px 3px;
	}
	.contact .button {
		text-transform: none;
		cursor: pointer;
		color: #222222;
		background: transparent;
	}
	.contact .button:hover {
		text-decoration: underline;
	}


/*
 * Search
 */
	.search .search-term {
		font-size: 20px;
		text-transform: uppercase;
		margin-bottom: 1em;
	}
	.search .result {
		display: block;
		margin: 2em 0;
	}
	.search .result a {
		font-size: 13px;
		text-transform: none;
		text-decoration: underline;
		background-color: transparent;
		color: #222222;
	}
	.search .result a:hover {
		background-color: #222222;
		color: #222222;
	}
	.search .result .line-1 {
		text-transform: uppercase;
	}


/*
 * Menus
 */
 	#menu {
		margin: 0;
		padding: 0;
		list-style: none;
		-moz-user-select: none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
		position: relative;
 	}
 	.menu {
		margin: 0;
		padding: 0;
		list-style: none;
		text-transform: uppercase;
		overflow: hidden;
	}
 	.sub-menu li.menu-item,
 	.menu li.menu-item {
		margin: 2px 25px 2px 0;
		padding: 0;
		list-style: none;
		float: left;
		line-height: 1;
		text-transform: uppercase;
 	}
 	.menu .border {
	 	margin-bottom: 0;
 	}
 	.sub-menu {
	 	list-style: none;
	 	padding: 0;
	 	margin: 0;
	 	overflow: hidden;
	 	display: none;
 	}
 	.sub-menu > li.director-name {
	 	width: auto;
	 	padding: 1px 0;
	 	margin-right: 8px;
 	}
 	.cross-link {
	 	float: right;
	 	margin-left: 5px;
 	}
 	/* Directors Menu */
 	.first-level-sub.menu-item-25 li.menu-item {
		width: 150px;
 	}


/*
 * Tools
 */
    #tagline {
        display: none;
    }


/*
 * Terminal Overrides
 */
 	#terminal {
	 	padding-bottom: 0;
	 	overflow: hidden;
 	}
 	#terminal, .cmd {
	 	background: transparent;
	 	color: #222222;
	 	padding-left: 0;
	 	padding-right: 0;
	 	padding-top: 0;
 	}
 	#terminal > div:last-child .section {
	 	border-bottom: none;
	 	margin-bottom: 0;
	 	padding-bottom: 0;
 	}

/*
 * Animations
 */
    /* Opacity */
    .overlay,
    .browse {
		transition: opacity 0.4s;
    }
    .work-block {
		transition: opacity 0.2s;
    }

    /* Everything */
    svg path {
		transition: 0.4s;
    }

    /* Loading Spinner */
	@-webkit-keyframes rotate {
	    from {-webkit-transform: rotate(0deg);}
	    to {-webkit-transform: rotate(359deg);}
	}

	@-moz-keyframes rotate {
		from {-moz-transform: rotate(0deg);}
		to {-moz-transform: rotate(359deg);}
	}
	.loading #logo {
		-webkit-animation-name: rotate;
		-webkit-animation-duration: 5s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-moz-animation-name: rotate;
		-moz-animation-duration: 5s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-timing-function: linear;
	}


/*
 * 404 Error
 */
    .error404 {
        text-align: center;
        color: white;
        background-color: #0a34af;
    }
    .error404 #logo-wrap {
	    position: relative;
	    height: 120px;
	    width: 120px;
	    margin: 0 auto;
    }
    .error404 #logo {
	    position: absolute;
	    top: 0px;
	    right: 0px;
    }
	.error404 #logo polygon {
		fill: transparent;
	}
	.error404 #logo path {
		fill: white;
	}
    .error-section {
	    height: 450px;
	    width: 600px;
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    margin: auto;
    }
    .error404 .code {
	    background-color: white;
        color: #0a34af;
        width: 540px;
        margin: 50px auto;
        padding: 20px;
    }
	.error404 .cursor.blink {
	    -webkit-animation: blinking 1s infinite steps(1, start);
	       -moz-animation: blinking 1s infinite steps(1, start);
	        -ms-animation: blinking 1s infinite steps(1, start);
	            animation: blinking 1s infinite steps(1, start);
	}
	@keyframes blinking {
	  0%, 100% {
	        background-color: white;
	        color: #aaa;
	  }
	  50% {
	        background-color: #0a34af; /* not #aaa because it's seem there is Google Chrome bug */
	        color: #000;
	  }
	}
	@-webkit-keyframes blinking {
	  0%, 100% {
	        background-color: white;
	        color: #aaa;
	  }
	  50% {
	        background-color: #0a34af;
	        color: #000;
	  }
	}
	@-ms-keyframes blinking {
	  0%, 100% {
	        background-color: white;
	        color: #aaa;
	  }
	  50% {
	        background-color: #0a34af;
	        color: #000;
	  }
	}
	@-moz-keyframes blinking {
	  0%, 100% {
	        background-color: white;
	        color: #aaa;
	  }
	  50% {
	        background-color: #0a34af;
	        color: #000;
	  }
	}



/*
 * Wordpress Required
 */
	.alignleft {
	    display: inline;
	    float: left;
	}
	.aligncenter {
	    clear: both;
	    display: block;
	    margin: 0 auto 10px auto;
	}
	.alignright {
	    display: inline;
	    float: right;
	}
	img.alignleft {
	    margin: 0 10px 10px 0;
	}
	img.alignright {
	    margin: 0 0 10px 10px;
	}
	img.aligncenter {
	    margin: 0 auto 10px auto;
	}

	.wp-caption {
	    background: #f1f1f1;
	    color: #888;
	    text-align: center;
	    margin-bottom: 15px;
	    width: auto !important;
	    -moz-border-radius: 0 0 4px 4px;
	    border-radius: 0 0 4px 4px;
	}
	.wp-caption img {
	    margin: 0px;
	}
	.wp-caption p.wp-caption-text {
	    margin: 0 0 5px;
	    padding: 4px;
	    font-style: italic;
	}

/*
 * New Class 9-9-16
 */
        .imgwrap.post {
          float: left;
         }