/*
Theme Name: MJZ 2013
Theme URI: http://www.mjz.com/
Description: A theme for WordPress.
Author: Dave Funkhouser, Drew Baker, Rick Baker, Funkhaus
Author URI: http://www.funkhaus.us
Version: 1.0

Colors:

    Black: 			#000000;
    Text:			#333333;
    Dark Grey:		#666666;
    Light Grey: 	#999999;
    Lighter Grey: 	#CCCCCC;

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

	@import url("fonts/fonts.css");

/*
 * Globals
 */
 	html {
 		height: 100%;
 	}
	body {
		height: 100%;
		background-color: white;
	    font-family: "Univers-CondensedLight", Helvetica, Arial, sans-serif;
	    font-size: 14px;
	    text-transform: uppercase;
	    text-align: justify;
	    color: #333333;
	    margin: 0;
	    padding: 0;
	}
    h1,h2,h3,h4,h5,h6 {
        margin: 0;
        padding: 0;
        line-height: 1;
        font-weight: normal;
    }
    h2 {
    	font-size: 50px;
    }
    ::selection {
        color: white;
        background: #333333;
    }
    ::-moz-selection {
        color: white;
        background: #333333;
    }

/*
 * Links
 */
	a {
	    color: #333333;
	    text-decoration: none;
	    outline: none;
	}
	a:hover {
	    color: #CCCCCC;
	}
	a img {
	   border: none;
	}

/*
 * Page Structure
 */

 	#header {
 		background-color: black;
 		height: 60px;
 		color: #FFFFFF;
 		padding: 0 20px;
 	}
 	#container {
 		height: 600px;
 		min-height: 100%;
		min-width: 1200px;
		position: relative;
 	}
 	#content {
 		padding-bottom: 60px;
 		position: relative;
 		overflow: hidden;
 	}
	#footer {
		background-color: black;
		position: relative;
		margin-top: -60px; /* negative value of footer height */
		height: 60px;
		clear: both;
		text-align: right;
		min-width: 1200px;
	}
	.entry {
		margin-bottom: 60px;
	}


/*
 * Header
 */

	.menu-return {
		float: left;
		margin: 35px 0 0 0;
		color: #FFFFFF;
		letter-spacing: 0.5px;
	}
	.menu-return:hover {
		color: #999999 !important;
	}
	.page-menu {
		margin: 35px 0 0 0;
		padding: 0;
		float: right;
	}
	.page-menu li {
		float: left;
		list-style: none;
		margin: 0 0 0 20px;
	}
 	.page-menu a {
		color: #999999;
		letter-spacing: 0.5px;
	}
	.page-menu:hover a {
		color: #999999;
	}
	.page-menu a:hover {
		color: #FFFFFF;
	}
	.page-menu .current_page_item a {
		color: #FFFFFF;
	}
	.page-menu:hover .current_page_item a {
		color: #999999;
	}

		/*
		 * Front Page
		 */
			#logo {
				float: left;
				height: 78px;
				width: 122px;
			}
			.home #logo {
				display: none;
			}
			#logo:hover path {
				fill: #000000;
			}
			#logo:hover rect {
				fill: #eaeaea;
			}
			.home #top-nav {
				display: none;
			}
			.menu {
				float: left;
				margin: 3px 0 0 20px;
				padding: 0;
				font-size: 22px;
				line-height: 24px;
			}
			.menu li {
				list-style: none;
				margin: 0;
				padding: 0;
			}


		/*
		 * Director List & Menus
		 */
			.menu:hover a {
				color: #999999;
			}
			.menu a {
				color: #999999;
			}
			.menu a:hover {
				color: #333333;
			}
			.current-page-ancestor a,
			.current_page_item a {
				color: #333333;
			}
			.sub-menu {
				float: left;
				margin: 3px 0 0 40px;
				padding: 0;
				font-size: 22px;
				line-height: 24px;
			}
			.sub-menu li.column {
				float: left;
			}
			.sub-menu li {
				list-style: none;
				width: 280px;
				white-space: nowrap;
			}
			.sub-menu li ul {
				margin: 0;
				padding: 0;
			}
			.contact .sub-menu li {
				width: auto;
			}
			.contact .sub-menu a {
				color: #333333;
			}
			.sales-detail .sub-menu a,
			.contact-detail .sub-menu a {
				color: #999999;
			}
			.sales-detail .sub-menu:hover a,
			.contact-detail .sub-menu:hover a {
				color: #999999;
			}
			.sales-detail .sub-menu a:hover,
			.contact-detail .sub-menu a:hover {
				color: #333333;
			}
			.sub-menu a {
				color: #333333;
				display: block;
			}
			.sub-menu:hover a {
				color: #999999;
			}
			.sub-menu a:hover {
				color: #333333;
			}
			.sub-menu span {
				font-size: 16px;
				margin: 0 0 0 4px;
			}
			.sub-menu .current_page_item a {
				color: #333333;
			}

		/*
		 * Directors Grid
		 */
		 	#content.director-grid {

		 	}
			.title-wrapper {
				margin: 0 0 0 20px;
				float: left;
				text-align: right;
			}
			a.site-url {
				color: #999999;
			}
			a.site-url:hover {
				color: #333333;
			}
			.grid-wrapper {
				float: right;
				margin: 95px 48px 0 0;
				clear: left;
			}
			.grid-block {
				margin: 0 0 0 1px;
				float: left;
				opacity: 0;
				width: 184px;
				text-align: left;
			}
			.grid-block img {
				border: 2px solid #FFFFFF;
				transition: 0.4s;
				-moz-transition: 0.4s;
				-webkit-transition: 0.4s;
				-o-transition: 0.4s;
			}
			.grid-block:hover img {
				border: 2px solid #222222;
			}
			.grid-block .meta {
				opacity: 0;
				transition: 0.4s;
				-moz-transition: 0.4s;
				-webkit-transition: 0.4s;
				-o-transition: 0.4s;
			}
			.grid-block:hover .meta {
				opacity: 1;
			}
			.grid-block .meta .title {
			    font-family: "Univers-Condensed", Helvetica, Arial, sans-serif;
				overflow: hidden;
				line-height: 12px;
				padding: 0 5px;
				font-size: 12px;
			}
			.director-grid .meta .title .line-1 {
				display: block;
				color: #333333;
			}
			.director-grid .meta .title .line-2 {
				display: block;
				color: #999999;
			}

			.sales-reps {
				position: absolute;
				top: 0;
				right: 50px;
				margin-top: -40px;
				text-transform: none;
				color: #555;
				font-size: 1.1em;
			}
			.sales-reps a {
				color: #000;
				text-decoration: underline;
			}

		/*
		 * Video Detail
		 */

			body.video-detail {
				background-color: black;
			}
			.video-detail #header {
				display: none;
			}
			.video-detail #footer {
				display: none;
			}
			.video-detail #content {
				margin: 0;
				padding-bottom: 0;
				position: static;
				top: auto;
			}
			.video-detail .close {
				position: absolute;
				top: 50px;
				left: 50px;
			}
			.video-detail .close:hover polygon {
				fill: #FFFFFF;
			}
			.video-detail .title {
				position: absolute;
				top: 50px;
				right: 50px;
				text-align: right;
				line-height: 14px;
			}
			.video-detail .title .line-1 {
				color: #FFFFFF;
				display: block;
			}
			.video-detail .title .line-2 {
				color: #666666;
				display: block;
			}
			.video-detail .arrow-left {
				position: absolute;
				top: 50%;
				left: 50px;
			}
			.video-detail .arrow-left:hover polygon {
				fill: #FFFFFF;
			}
			.video-detail .arrow-right {
				position: absolute;
				top: 50%;
				right: 50px;
			}
			.video-detail .arrow-right:hover polygon {
				fill: #FFFFFF;
			}
			.video-detail .media {
				position: absolute;
				width: 960px;
				height: 540px;
				top: 50%;
				left: 50%;
				margin: -270px 0 0 -480px;
			}
			.media .vvqbox {
				margin: 0 auto;
			}
			.media .post-edit-link {
				position: absolute;
				bottom: -30px;
				left: 48%;
			}
			.video-poster {
				height: 540px;
				width: 960px;
				background-size: cover;
				background-position: center center;
			}
			.video-poster .svg {
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -37px 0 0 -37px;
			}

            .video-detail #container {
                min-width: initial;
            }
            .video-detail .media-wrapper.has-video {
                position: absolute;
                margin: auto;
                max-width: 1280px;
                bottom: 120px;
                right: 120px;
                left: 120px;
                top: 120px;

                display: -webkit-flex;
                display: flex;
            }
            .video-detail .has-video .media {
                position: static;
                margin: auto;
                height: auto;
                width: auto;
            }
            .video-detail .edit-link {
                position: absolute;
                bottom: -50px;
                left: 0;
            }

		/*
		 * Video Show Reel
		 */
			body.video-show-reel-detail {
				background-color: black;
			}
			.video-show-reel-detail #header {
				display: none;
			}
			.video-show-reel-detail #footer {
				display: none;
			}
			.video-show-reel-detail #content {
				margin: 0;
				padding-bottom: 0;
				position: relative;
				top: auto;
				min-height: 760px;
			}
			.video-show-reel .close {
				position: absolute;
				top: 50px;
				left: 50px;
				z-index: 20;
			}
			.video-show-reel .close:hover polygon {
				fill: #FFFFFF;
			}
			.video-show-reel .title {
				position: absolute;
				top: 50px;
				right: 50px;
				text-align: right;
				line-height: 14px;
			}
			.video-show-reel .title .line-1 {
				color: #FFFFFF;
				display: block;
			}
			.video-show-reel .title .line-2 {
				color: #666666;
				display: block;
			}
			.video-show-reel .arrow-left {
				position: absolute;
				top: 50%;
				left: 50px;
				z-index: 20;
			}
			.video-show-reel .arrow-left:hover polygon {
				fill: #FFFFFF;
			}
			.video-show-reel .arrow-right {
				position: absolute;
				top: 50%;
				right: 50px;
				z-index: 20;
			}
			.video-show-reel .arrow-right:hover polygon {
				fill: #FFFFFF;
			}
			.video-show-reel .media-wrapper {
				position: absolute;
				top: 0;
				bottom: 120px;
				width: 100%;
				min-height: 700px;
			}
			.video-show-reel .media {
				position: absolute;
				width: 960px;
				height: 540px;
				top: 50%;
				left: 50%;
				margin: -270px 0 0 -480px;
			}


		/*
		 * Awards
		 */
		 	.awards #container {
			 	height: auto;
		 	}
		 	.awards .entry {
		 		width: 325px;
		 		float: right;
		 		margin: 40px 250px 60px 0;
		 		text-transform: none;
		 		clear: left;
		 		text-align: left;
		 	}
		 	.awards .entry span {
		 		color: #999999;
		 		text-transform: uppercase;
		 	}

		/*
		 * Bio
		 */
		 	.bio #container {
			 	height: auto;
		 	}
		 	.bio .entry {
		 		width: 620px;
		 		float: right;
		 		margin: 40px 60px 60px 0;
		 		text-transform: none;
		 		clear: left;
		 	}

		/*
		 * Contact
		 */
		 	.contact-detail #container {
			 	height: auto;
		 	}
		 	.contact-detail .entry {
			 	display: none;
		 	}
		 	.contact .entry {
		 		width: 310px;
		 		margin: 4px 110px 60px 0;
		 		float: right;
		 		font-size: 12px;
		 	}
		 	.contact .entry p {
		 		margin: 0;
		 	}
		 	.contact h3 {
		 		font-size: 18px;
		 	}
		 	.contact .gray {
		 		color: #999999;
		 	}
		 	.contact .map {
		 		font-size: 11px;
		 		color: #999999;
		 	}
		 	.contact .map:hover {
		 		color: #333333;
		 	}
		 	.contact .phone {
		 		margin: 1em 0;
		 		text-transform: none;
		 	}
		 	.contact .phone h3 {
		 		line-height: 21px;
		 	}
		 	.contact .fax {
		 		margin: 0 4px 0 0;
		 		color: #999999;
		 	}
		 	.contact .personnel {
		 		line-height: 15px;
		 		margin: 4px 0 15px 0;
		 	}
		 	.contact .personnel .gray {
		 		margin: 0 0 0 3px;
		 	}
		 	.contact .dropdown {
		 		background: url(images/divider-contact.svg) 0 18px no-repeat;
		 		overflow: hidden;
		 		color: #999999;
		 	}
		 	.contact .dropdown .names {
		 		margin: 1em 0 1em 0;
		 		display: none;
		 	}
		 	.contact .dropdown:hover .email {
		 		display: block;
		 	}
		 	.contact .dropdown:hover .email:hover {
		 		color: #999999;
		 	}
		 	.contact .divider {
		 		width: 239px;
		 		height: 13px;
		 		display: block;
		 	}
		 	.contact .directors {
		 		line-height: 15px;
				margin: 4px 0 0 0;
		 		color: #999999;
		 		overflow: hidden;
		 	}
		 	.contact .directors .col-1 {
		 		float: left;
		 		width: 130px;
		 	}
		 	.contact .directors .col-2 {
		 		float: left;
		 		width: auto;
		 	}

		/*
		 * Sales
		 */
		 	.sales-detail #container {
			 	height: auto;
		 	}
		 	.sales-detail .entry {
			 	display: none;
		 	}
		 	.sales #content .sub-menu {
			 	display: none;
		 	}
		 	.sales .entry {
		 		width: 310px;
		 		margin: 4px 110px 60px 0;
		 		float: right;
		 		font-size: 12px;
		 	}
		 	.sales .entry p {
		 		margin: 0;
		 	}
		 	.sales h3 {
		 		font-size: 18px;
		 	}
		 	.sales .gray {
		 		color: #999999;
		 	}
		 	.sales .map {
		 		font-size: 11px;
		 		color: #999999;
		 	}
		 	.sales .map:hover {
		 		color: #CCCCCC;
		 	}
		 	.sales .phone {
		 		margin: 1em 0;
		 		text-transform: none;
		 	}
		 	.sales .phone h3 {
		 		line-height: 21px;
		 	}
		 	.sales .fax {
		 		margin: 0 4px 0 0;
		 		color: #999999;
		 	}
		 	.sales .personnel {
		 		line-height: 13px;
		 		margin: 4px 0 15px 0;
		 	}
		 	.sales .personnel .gray {
		 		margin: 0 0 0 3px;
		 	}
		 	.sales .dropdown {
		 		background: url(images/divider-contact.svg) 0 18px no-repeat;
		 		height: 1em;
		 		overflow: hidden;
		 		color: #999999;
		 	}
		 	.sales .dropdown:hover {
		 		height: auto;
		 		margin: 0 0 1em 0;
		 	}
		 	.sales .dropdown:hover .email {
		 		display: block;
		 	}
		 	.sales .divider {
		 		width: 239px;
		 		height: 13px;
		 		display: block;
		 	}
		 	.sales .directors {
		 		line-height: 13px;
				margin: 4px 0 0 0;
		 		color: #999999;
		 	}
		 	.sales .directors .col-1 {
		 		float: left;
		 		width: 130px;
		 	}
		 	.sales .directors .col-2 {
		 		float: left;
		 		width: auto;
		 	}


/*
 * Footer
 */

 	.facebook {
		margin: 23px 6px 0 0;
		display: inline-block;
 	}
 	.twitter {
		margin: 23px 20px 0 0;
		display: inline-block;
 	}
	.facebook:hover path,
	.twitter:hover path {
		fill: #5096F2;
	}


/*
 * Tools
 */
    #tagline {
        display: none;
    }
    .post-edit-link {
	    display: block;
	    margin: 1em 0;
    }


/*
 * Animations
 */
    /* Color */
    a {
    	transition: color 0.4s;
    }

    /* Opacity */
    .video-thumb .title,
    .overlay,
    .browse {
		transition: opacity 0.4s;
    }

    /* Everything */
    .contact .dropdown,
    svg rect,
    svg polygon,
    svg path {
		transition: 0.4s;
    }

    /* Background Color */
    body {
	    transition: background-color 1s;
    }

/*
 * 404 Error
 */
    .error-404 {
        text-align: center;
        font-size: 32px;
    }


/*
 * 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;
	}