/*
Theme Name: Resource LA 2017
Theme URI: http://funkhaus.us
Description: Custom theme for Resource LA.
Author: 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;

Colors:
    Pink: #f3ac90

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

/*
 * Fonts
 */
	 @import url('fonts/fonts.css');


/*
 * Globals
 */
    body {
        font-family: 'MaisonNeue', Helvetica, Arial, sans-serif;
        font-size: 11px;
        color: #333;
        margin: 0;
		overflow: hidden;
    }
    h1,h2,h3,h4,h5,h6 {
        margin: 0;
        padding: 0;
        line-height: 1;
        font-weight: normal;
    }
    #tagline {
        display: none;
    }
    ::selection {
        color: #ebebe3;
        background: #222;
    }
    ::-moz-selection {
        color: #ebebe3;
        background: #222;
    }


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


/*
 * Page Structure
 */
    #container {

    }
    #content {
		position: relative;
		min-height: 100vh;
		z-index: 10;
    }
    #footer {

    }


/*
 * Utilities
 */
    /* Responsive image containers */
    .fluid-width-image-wrapper img {
        height: auto;
        width: 100%;
    }


/*
 * Header
 */
	#header {
		position: absolute;
		top: 45px;
		left: 25px;
		z-index: 50;
		opacity: 0;
	}
	.opening-slideshow-completed #header {
		opacity: 1;
	}


/*
 * Opening slideshow
 */
    .opening-slideshow {
		position: absolute;
		top: 0;
		right: 50%;
		bottom: 0;
		left: 0;
		z-index: 55;
    }
	.opening-slideshow .slide {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-position: center;
		background-size: cover;
	}

	/* Opening slideshow logo */
	.opening-slideshow .logo {
		position: absolute;
		top: 0;
		right: 40px;
		bottom: 0;
		left: 40px;
		z-index: 50;

		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
	.opening-slideshow img.svg {
		opacity: 0;
	}
	.opening-slideshow .logo .svg {
		width: 100%;
		height: 100%;
	}
	.opening-slideshow .logo * {
		fill: #ffffff;
	}



/*
 * Roster
 */
    .roster {
        position: absolute;
        top: 0;
        right: 50%;
        bottom: 0;
        left: 0;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 50;
		font-weight: 500;
		background-color: #ffffff;
		padding: 45px 25px 0;

    }
	.roster .scroll-wrap {
		padding: 45px 25px 0;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-justify-content: space-between;
        justify-content: space-between;
	}
	.roster #logo {
		padding: 20px 20px 20px 0;
	}
    .roster #logo .svg {
        width: 100px;
        height: 15px;
    }
    .roster .label {
        font-size: 12px;
		font-weight: 500;
    }
    .list-grid {
        margin-top: 40px;

        -webkit-flex: 1 0 auto;
        flex: 1 0 auto;
    }
	.roster ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
    .roster ul:not(.child-list) {
        margin: 0 40px 25px 120px;
        position: relative;
        bottom: 13px;
        padding: 0;
    }

	.roster ul.child-list {
		margin-left: 0px;
		display: none;
	}

    .roster li {
        margin-bottom: 7px;
    }
    .roster li span {
        font-size: 16px;
        cursor: pointer;
        display: block;
    }
	.roster li.child-link {
		margin-left: 20px;
	}

/*
 * Contact
 */
    .contact {
		margin-right: 60px;
		padding-bottom: 45px;
		min-height: 130px;

        display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: flex-end;
		align-items: flex-end;
    }
	.contact > div {
		padding: 0 5px;
		line-height: 1.9;
	}
	.contact a {
		display: block;
	}
	.not-mobile .contact a:hover {
		text-decoration: none;
	}
	.contact address {
		font-style: normal;
	}



/*
 * Client detail
 */
    .client-detail-wrap {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 50%;
    }
	.client-detail {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden;
		color: #ffffff;
		font-weight: 700;
		z-index: 10;
	}
	.client-detail.peeking:not(.opened) {
		-webkit-transform: translateX(60px);
		transform: translateX(60px);
	}
	.client-detail.opened {
		z-index: 5;

		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	.client-detail.closing {
		z-index: 0;
	}
	.client-detail.closing:not(.opened) {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	.scroll-wrap {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin-right: -15px;
		overflow-y: auto;
	}
	.client-detail .close-button {
		cursor: pointer;
		position: absolute;
		top: 15px;
		left: 10px;
		padding: 20px;

		-webkit-transform: scale(1);
		transform: scale(1);
	}
	.not-mobile .client-detail .close-button:hover {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
	}

	/* Entry */
	.client-detail .title {
		margin: 100px 80px 0 30px;
		font-size: 48px;
		font-weight: 700;

		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
	.client-detail .entry {
		margin: 90px 80px 45px 30px;
		font-size: 30px;
		line-height: 1.3;
	}
	.client-detail .entry a:not(.external-link) {
		text-decoration: underline;
	}
	.client-detail a.external-link {
		display: inline-block;
		margin-top: 65px;
		margin-left: 30px;
		padding-bottom: 30px;
		font-size: 16px;
	}
	.not-mobile .client-detail .external-link:hover {
		text-decoration: none;
	}
	.client-detail .external-link .svg {
		margin-left: 20px;
	}
	.client-detail .external-link.animating .svg {
		-webkit-animation: arrow-bounce 1.4s infinite;
		animation: arrow-bounce 1.4s infinite;
	}

	/* Rotated category label */
	.category-wrap {
		font-size: 16px;
		position: absolute;
		top: 30px;
		right: 60px;
		height: 60px;
		color: #ffffff;
		font-weight: 700;
        letter-spacing: 0.25px;

		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;

		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
		-webkit-transform-origin: top right;
		transform-origin: top right;
	}

/*
 * Feed
 */
    .feed-wrap {
        background-color: #000000;
        color: #ffffff;
        font-size: 49px;
        font-weight: 700;
        padding: 45px 60px 45px 40px;
		margin-right: -15px;
		overflow-x: hidden;
        overflow-y: auto;
        position: absolute;
        top: 0;
		right: 0;
        bottom: 0;
        left: 50%;
        line-height: 1.2;
    }
	.single-feed:not(.displayed),
	.single-feed .blast:not(.revealed) {
		display: none;
	}
	a.single-feed {
		color: #ffffff;
	}
	.not-mobile .single-feed:hover em,
    .not-mobile .single-feed:hover a {
		color: #ffffff !important;
	}
	a.single-feed:hover {
		text-decoration: none;
	}
    .single-feed p {
        margin: 0;
		display: inline;
    }
    .single-feed em,
	.single-feed a,
    .not-mobile .single-feed:hover {
        font-style: normal;
    }
	.single-feed a:hover {
		text-decoration: none;
		color: #ffffff !important;
	}

	/* Cursor area */
	.cursor-area {
		height: 78px;
		width: 21px;
		background-color: #ffffff;
		height: 4px;
        bottom: 10px;
		display: inline-block;

		-webkit-animation: cursor-blink 1s step-end infinite;
		animation: cursor-blink 1s step-end infinite;
	}
	@-webkit-keyframes cursor-blink {
		0% {
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
	}
	keyframes cursor-blink {
		0% {
			opacity: 0;
		}
		50% {
			opacity: 1;
		}
	}


/*
 * Color Cycling
 */
	 .not-mobile .cycle-color:hover > * {
		 -webkit-animation: cycle-color 2.4s step-end infinite;
		 animation: cycle-color 2.4s step-end infinite;
	 }
	 .not-mobile .cycle-color:hover > *:nth-of-type(5n+1) {
		 -webkit-animation-delay: -2s;
		 animation-delay: -2s;
	 }
	 .not-mobile .cycle-color:hover > *:nth-of-type(5n+2) {
		 -webkit-animation-delay: -1.6s;
		 animation-delay: -1.6s;
	 }
	 .not-mobile .cycle-color:hover > *:nth-of-type(5n+3) {
		 -webkit-animation-delay: -1.2s;
		 animation-delay: -1.2s;
	 }
	 .not-mobile .cycle-color:hover > *:nth-of-type(5n+4) {
		 -webkit-animation-delay: -.8s;
		 animation-delay: -.8s;
	 }
	 .not-mobile .cycle-color:hover > *:nth-of-type(5n+5) {
		 -webkit-animation-delay: -.4s;
		 animation-delay: -.4s;
	 }

	 @-webkit-keyframes cycle-color {
 		0% {
 			fill: #f29fb7;
			color: #f29fb7;
 		}
 		20% {
 			fill: #dd4850;
			color: #dd4850;
 		}
 		40% {
 			fill: #0e6147;
			color: #0e6147;
 		}
 		60% {
 			fill: #faa900;
			color: #faa900;
 		}
 		80% {
 			fill: #8bc7cc;
			color: #8bc7cc;
 		}
 		100% {
 			fill: #f29fb7;
			color: #f29fb7;
 		}
 	}
	@keyframes cycle-color {
		0% {
			fill: #f29fb7;
			color: #f29fb7;
		}
		20% {
			fill: #dd4850;
			color: #dd4850;
		}
		40% {
			fill: #0e6147;
			color: #0e6147;
		}
		60% {
			fill: #faa900;
			color: #faa900;
		}
		80% {
			fill: #8bc7cc;
			color: #8bc7cc;
		}
		100% {
			fill: #f29fb7;
			color: #f29fb7;
		}
	}


/*
 * Screensaver
 */
    .screensaver {
        position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #000000;
		z-index: 20;
		padding: 60px 70px;
		display: none;
		line-height: 0;
    }
	.screensaver .line {
		width: 100%;
		height: auto;
		padding: 20px 0;
		position: relative;
	}
	.screensaver .line path:not(.revealed) {
		display: none;
	}

/*
 * Animations
 */
    /* Color */
    a,
    .single-feed,
    .single-feed em,
	.client-link span {
        transition: color 0.4s;
    }

    /* Opacity */
    .browse {
        transition: opacity 0.4s;
    }

	/* Transform */
	.client-detail,
	.close-button {
		transition: -webkit-transform 0.4s;
		transition: transform 0.4s;
	}

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

    /* Delay */
    .client-detail.peeking:not(.opened) {
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

	/* Keyframes */
	@-webkit-keyframes arrow-bounce {
		0% {
			margin-left: 20px;
		}
		45% {
			margin-left: 60px;
		}
		55% {
			margin-left: 60px;
		}
		90% {
			margin-left: 20px;
		}
		100% {
			margin-left: 20px;
		}
	}
	@keyframes arrow-bounce {
		0% {
			margin-left: 20px;
		}
		45% {
			margin-left: 60px;
		}
		55% {
			margin-left: 60px;
		}
		90% {
			margin-left: 20px;
		}
		100% {
			margin-left: 20px;
		}
	}



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