/*
Theme Name: Cosmo Street 2016
Theme URI: http://www.cosmostreet.com/
Description: A theme for WordPress.
Author: Dave Funkhouser, Drew Baker, John Robson, Sander Moolin, Funkhaus
Author URI: http://www.funkhaus.us
Version: 1.0

Fonts:
    font-family: Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-weight: 500;

    font-family: 'franklin-gothic-cond', sans-serif;
        font-weight: 500;
        font-weight: 700;

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

/*
 * Globals
 */
    body {
        font-family: 'Apercu', Helvetica, Arial, sans-serif;
        font-size: 11px;
        color: #333333;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        margin: 0;
    }
    h1,h2,h3,h4,h5,h6 {
        margin: 0;
        padding: 0;
        line-height: 1;
        font-weight: normal;
    }
    ::selection {
        color: #ebebe3;
        background: #222;
    }
    ::-moz-selection {
        color: #ebebe3;
        background: #222;
    }


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


/*
 * Page Structure
 */
    #header {
        position: absolute;
        height: 70px;
        left: 70px;
        right: 47px;
        top: 0;
        z-index: 105;

        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }


/*
 * Header
 */
    #tagline {
        display: none;
    }
    #logo .svg * {
        fill: #000000;
    }
    #logo .svg .figure {
        fill: #b3010c;
    }
    .light-header #logo .svg * {
        fill: #ffffff;
    }
    #logo:hover .svg *:not(.figure),
    .light-header #logo:hover .svg .figure {
        fill: #666666;
    }
    #main-menu {
        list-style-type: none;
        padding: 0;
        font-size: 0;
    }
    #main-menu .menu-item-type-custom {
        display: none; /* Hide social links on desktop main menu */
    }
    #main-menu li {
        display: inline;
        padding: 0 8px;
        font-size: 16px;
    }
    body:not(.menu-opened) #main-menu li:first-child {
        padding-left: 0;
    }
    #main-menu li a {
        color: #cccccc;
    }
    .light-header #main-menu li a {
        color: #ffffff;
    }
    #main-menu .current_page_item a,
    #main-menu .current-page-ancestor a {
        text-decoration: underline;
        color: #000000;
    }
    #main-menu li a:hover {
        color: #000000;
    }
    .light-header #main-menu li a:hover {
        color: #666666;
    }
    .breadcrumb {
        display: none;
        width: 200px;
        left: 0;
        right: 0;
        position: absolute;
        margin: auto;
        text-align: center;
        font-size: 14px;
        top: 30px;
        font-weight: 800;
        z-index: 110;
    }
    .work .breadcrumb {
        display: inline-block;
    }
    .breadcrumb-wrap .editors-link,
    #hamburger {
        display: none;
    }



/*
 * Front Page
 */
    body.home {
        overflow: hidden;
    }
    .home .bg-slideshow {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 0;
        background-color: #000;
    }
    .bg-slideshow .unprocessed-image {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-size: cover;
        background-position: center;
        display: none;
    }
    .home .main-slideshow {
        position: absolute;
        left: 75px;
        right: 75px;
        top: 75px;
        bottom: 75px;
        z-index: 100;
    }
    .home .main-slideshow .slide {
        background-color: #000000;
    }
    .home .border {
        position: absolute;
        background-color: #ffffff;
        height: 0;
        width: 0;
    }
    .home .border.top.left {
        top: 70px;
        left: 70px;
    }
    .home .border.bottom.right {
        bottom: 70px;
        right: 70px;
    }
    .home .main-slideshow.resting ~ .border {
        width: calc(100% - 140px);
        height: calc(100% - 140px);
    }
    .home .text-slideshow {
        position: absolute;
        right: 70px;
        left: 70px;
        top: 70px;
        bottom: 70px;
        white-space: nowrap;
        z-index: 110;
    }
    .home .slide {
        background-position: center;
        background-size: cover;
        height: 100%;
        width: 100%;
    }
    .text-slideshow .slide {
        height: 60%;
        width: 60%;
        bottom: 0;
        right: 0;
        margin: auto;

        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex-direction: column;
        flex-direction: column;

        -webkit-clip-path: inset(100%);
        clip-path: inset(100%);
    }
    .text-slideshow .cycle-slide-active.slide {
        -webkit-clip-path: inset(0);
        clip-path: inset(0);
    }
    .text-slideshow .line {
        display: block;
        color: #ffffff;
        font-size: 48px;
        position: relative;
        margin-bottom: 0;
    }
    .text-slideshow .cycle-slide-active:hover .line,
    .is-mobile .text-slideshow .line {
        margin-bottom: 25px;
    }
    .home .play-button {
        position: absolute;
        opacity: 0;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .text-slideshow .cycle-slide-active:hover .play-button,
    .is-mobile .text-slideshow .play-button {
        opacity: 1;
    }
    .text-slideshow .line-2 {
        font-size: 20px;
        margin-top: 0;
    }
    .text-slideshow .cycle-slide-active:hover .line-2,
    .is-mobile .text-slideshow .line-2 {
        margin-top: 30px;
    }
    .home .nav-wrap {
        display: none;
    }

/*
 * Editor Grid
 */
    #content.editor-grid {
        min-height: 100vh;
        position: relative;

        display: -webkit-flex;
        display: flex;
    }
    .editor-grid #editor-menu {
        font-weight: 800;
        list-style-type: none;
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        max-width: 800px;
        margin: auto;
        padding: 70px;
        z-index: 105;

        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .editor-grid .sub-menu {
        padding: 0;
        margin: 0 0 70px;
        font-size: 0;
    }
    .editor-menu > .menu-item:last-of-type .sub-menu {
        margin-bottom: 0;
    }
    #editor-menu > li:first-child > div {
        display: none; /* Hide the main "Cosmo Street" link */
    }
    #editor-menu > li > div {
        font-size: 14px;
    }
    #editor-menu .sub-menu li {
        font-size: 24px;
        margin: 8px 15px;
        display: inline-block;
    }
    #editor-menu .sub-menu a:hover {
        color: #ffffff;
    }
    .editor-grid .background-slideshow {
        position: absolute;
        left: 70px;
        right: 70px;
        top: 70px;
        bottom: 70px;
    }
    .editor-grid .slide {
        height: 100%;
        width: 100%;
        background-size: cover;
        background-position: center;
    }


/*
 * Work Detail
 */
    body.work {
        overflow: hidden;
    }
    .work .nav-wrap .svg * {
        stroke: #cccccc;
    }
    .video-slideshow {
        position: absolute;
        top: 190px;
        bottom: 200px;
        left: 0;
        right: 0;
    }
    .video-slideshow .slide {
        width: 100%;
        height: 100%;
    }
    .work .video-wrap {
        height: 100%;
        margin: 0 110px;
    }
    .work .slide-video img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        cursor: pointer;
        opacity: 0;
    }
    .work .cycle-slide.slide-video:not(.video-started) img:not(.svg) {
        opacity: 1;
    }
    .is-mobile.work .slide-video img {
        display: none;
    }
    .video-wrap img.svg {
      opacity: 0;
    }
    .video-wrap .svg {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        cursor: pointer;
        opacity: 0;

        -webkit-transform: scale(1);
        transform: scale(1);
    }
    .video-wrap:hover .svg {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    .cycle-slide .video-wrap svg.svg {
      opacity: 1;
    }
    .video-started img {
        opacity: 0;
    }
    .video-wrap iframe {
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0;
    }
    .work .slide-meta > div {
        position: fixed;
        left: 0;
        right: 0;
        text-align: center;
    }
    .work .slide-meta .title {
        font-size: 30px;
        top: 90px;
        font-weight: 800;
    }
    .work .slide-meta .title .line-2 {
        display: block;
        font-size: 20px;
    }
    .work .slide-meta .credits {
        font-size: 18px;
        bottom: 80px;
        top: calc(100vh - 200px);
        padding: 0 70px;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .work.thumb-opened .slide-meta .credits,
    .work.force-open .slide-meta .credits {
        opacity: 0;
    }
    .work .grid-reel {
        position: absolute;
        bottom: 40px;
        font-size: 16px;
        z-index: 110;
        left: 0;
        right: 0;
        text-align: center;
        padding: 10px 0 20px;
    }
    .thumb-opened .grid-reel,
    .force-open .grid-reel {
        bottom: 150px;
    }
    .work .block-reel {
        margin: 0 13px;
        color: #999999;
    }
    .work .block-reel:hover {
        color: #333333;
    }
    .block-reel.current-reel {
        text-decoration: underline;
    }
    .thumb-opened .block-reel.current-reel,
    .force-open .block-reel.current-reel {
        color: #333333;
    }
    .block-reel.current-reel:hover {
        color: #999999;
    }
    .thumb-opened .grid-reel {
        z-index: 100;
    }
    .work .teaser-wrap {
        display: none;
    }
    .thumb-tray {
        position: absolute;
        bottom: 0;
        z-index: 105;
        padding-top: 10px;
        -webkit-transform: translateX(75px);
        transform: translateX(75px);

        display: -webkit-flex;
        display: flex;
    }
    .block-thumb {
        -webkit-transform: translateY(70%);
        transform: translateY(70%);
    }
    .block-thumb.opened,
    .force-open .block-thumb {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    .block-thumb.opened:hover {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    .block-thumb .overlay {
        position: absolute;
        background-color: #ffffff;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0.7;
    }
    .block-thumb.activated .overlay,
    .thumb-opened .overlay {
        opacity: 0;
    }
    .block-thumb.opened:hover .overlay {
        opacity: 0.2;
    }
    .thumb-title {
        display: block;
        text-align: center;
        font-size: 14px;
        padding: 10px 0;
    }
    .thumb-title .line-2 {
        display: none;
    }


/*
 * About
 */
    .about .attachment-post-thumbnail {
        display: none;
    }
    .about .entry {
        position: absolute;
        top: 70px;
        bottom: 70px;
        left: 70px;
        right: 70px;
        background-size: cover;
        background-position: center;
        font-size: 20px;
        color: #ffffff;
        text-align: center;
        padding: 0 150px;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: center;
        justify-content: center;
    }
    .about .content-wrap {
        max-width: 900px;
        margin: 50px auto 20px;
        position: relative;
    }
    /* Video */
    .video-wrap {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }
    .video-wrap video {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: auto;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }

/*
 * Contact
 */
    /* links */
    .contact a:hover {
        color: #333333;
        text-decoration: underline;
    }
    /* sticky footer */
    #content.contact {
        min-height: calc(100vh - 200px);
        font-weight: 700;
    }
    .contact .page {
        min-height: calc(100vh - 300px);
        margin-bottom: -100px;
        padding-bottom: 100px;
    }
    .contact .entry {
        margin-top: 200px;
        left: 0;
        right: 0;
    }
    .contact .entry ul {
        list-style-type: none;
        padding: 0;
        overflow: hidden;
    }
    .contact .entry li {
        padding: 0 70px;
        position: relative;
        min-height: 80px;
        overflow: hidden;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-align-items: center;
        align-items: center;
    }
    .contact .entry li:nth-child(even) {
        background-color: #f2f2f2;
    }
    .contact .label {
        width: 25%;
        font-size: 24px;
    }
    .contact .address-wrap {
        width: 50%;
        font-size: 14px;
        min-height: 80px;

        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: center;
        align-items: center;
    }
    .address-wrap p,
    .address-wrap span {
        width: 25%;
        white-space: nowrap;
    }
    .contact .expand-wrap {
        position: absolute;
        right: 50px;
        padding: 20px;
        top: 14px;
        cursor: pointer;
    }
    .expand-wrap .vertical {
        transform-origin: center;
    }
    .expanded .expand-wrap .vertical {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    .contact .people-wrap {
        order: 1;
        margin-left: 25%;
        width: 100%;
        opacity: 0;
        max-height: 0;
        font-size: 14px;

        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .expanded .people-wrap {
        opacity: 1;
        padding: 30px 0 50px;
        max-height: 400px;
    }
    .people-wrap strong {
        color: #b3b3b3;
        margin-bottom: 1em;
        display: block;
    }
    .people-wrap span {
        display: block;
    }
    .people-wrap br {
        display: none;
    }
    .person {
        margin: 0 0 20px;
        width: 50%;
    }
    .person p {
        margin: 0;
    }
    .contact address {
        font-style: normal;
    }
    .contact-footer {
        padding: 0 70px;
        font-size: 14px;
        height: calc(70px + 1em);

        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: center;
        align-items: center;
    }
    .social-links span {
        padding-right: 5px;
    }
    .social-links a {
        text-transform: lowercase;
        padding-right: 10px;
    }
    .newsletter-signup input {
        position: absolute;
        opacity: 0;
        -webkit-appearance: none;
    }
    .newsletter-signup label {
        position: relative;
        bottom: 0;
    }
    .newsletter-signup input[type="submit"] {
        display: none;
        -webkit-appearance: none;
    }
    .newsletter-signup:hover input[type="email"],
    .newsletter-signup input:focus {
        opacity: 1;
        font-weight: 800;
        outline: none;
        border: 2px solid #e2e2e2;
        -webkit-text-size-adjust: none;
        -webkit-appearance: none;
    }
    .newsletter-signup:hover label,
    .newsletter-signup input:focus ~ label {
        bottom: 1.5em;
    }


/*
 * Nav buttons
 */
    .nav-wrap div {
        padding: 35px;
        cursor: pointer;
        position: absolute;
        left: 0;
        top: 50%;
        z-index: 110;

        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .nav-wrap .right {
        right: 0;
        left: initial;
    }
    .nav-wrap div:hover .svg {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }



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

    /* Opacity */
    .browse,
    .video-wrap img,
    .credits {
        transition: opacity 0.4s;
    }

    /* Everything */
    svg *,
    .svg *,
    .nav-wrap .svg,
    .block-thumb,
    .overlay,
    .people-wrap,
    #hamburger span,
    .newsletter-signup label,
    .newsletter-signup input,
    .grid-reel,
    .svg .vertical,
    .video-wrap .svg,
    .person,
    .teaser-wrap,
    .text-slideshow .slide span,
    .text-slideshow .slide .svg {
        transition: 0.4s;
    }

    /* Front-page border (only animate when resting - ie, when lines are animating in) */
    .main-slideshow.resting ~ .border {
        transition: 2s;
    }
    .text-slideshow .slide {
        transition: -webkit-clip-path 2s, clip-path 2s;
    }



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