/*
Theme Name: Significant Others 2016
Theme URI: http://www.significantothers.com/
Description: A theme for WordPress.
Author: Dave Funkhouser, Drew Baker, John Robson, Funkhaus
Author URI: http://www.funkhaus.us
Version: 1.0

Fonts:
    font-family: 'Apercu', sans-serif;
        font-weight: 300;
        font-weight: 400;

Colors:
    Black: #000000;
    Blue: #7aabde;

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

/*
 * Fonts
 */

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


/*
 * Globals
 */

 	body, html {
	 	height: 100%;
 	}
    body {
        font-family: 'Apercu', sans-serif;
        font-size: 16px;
        color: #333;
        margin: 0;
    }
    #container {
	    min-height: 100%;
	    position: relative;
    }
    h1,h2,h3,h4,h5,h6 {
        margin: 0;
        padding: 0;
        line-height: 1;
        font-weight: normal;
    }
    .title {
        font-size: 31px;
        color: white;
        display: inline-block;
        font-weight: 300;
        letter-spacing: 1px;
    }
    .title .line-1 {
        font-size: 64px;
    }
    ::-moz-selection {
        color: #ebebe3;
        background: #222;
    }
    ::selection {
        color: #ebebe3;
        background: #222;
    }
    ::-moz-selection {
        color: #ebebe3;
        background: #222;
    }
    .post-edit-link {
        font-size: 10px;
        color: inherit;
        text-transform: uppercase;
    }
	.svg {
		max-width: 100%;
	}
	#tagline {
		display: none;
	}
	#content {
		overflow: hidden;
	}
	.tint-overlay {
	 	position: absolute;
	 	width: 100%;
	 	height: 100%;
	 	background-color: rgba( 0, 0, 0, 0.10);
	 	top: 0;
	 	left: 0;
	 	bottom: 0;
	 	right: 0;
 	}

/*
 * Links
 */

    a {
        text-decoration: none;
        outline: none;
    }
    a:hover {
        text-decoration: none;
    }
    a img {
       border: none;
    }

/*
 * Page Structure
 */

    #container {

    }
    #content {
		margin: 0;
		padding: 0;
    }
    #footer {

    }

/*
 * Menus
 */

    body.menu-open {
        overflow: hidden;
    }
    #menu-overlay {
        display: none;
        position: fixed;
        background-color: rgba(122, 171, 222, 1);
        width: 100%;
        z-index: 40;
 	}
 	.menu-wrapper {
	 	height: 100%;
	 	width: 100%;
	 	display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
 	}
 	#main-menu {
	 	padding: 0;
	 	margin: auto;
		display: block;
 	}

 	#main-menu li {
	 	list-style-type: none;
	 	display: inline-block;
 	}
 	.not-mobile #main-menu:hover li {
	 	opacity: 0.4;
	 	filter: alpha(opacity=40);
 	}
 	.not-mobile #main-menu li:hover {
	 	opacity: 1;
	 	filter: alpha(opacity=100);
 	}
 	#main-menu li a {
	 	color: #ffffff;
	 	font-size: 35pt;
	 	font-weight: 300;
	 	padding: 0 34px;
 	}

    /* Grid menu */
    .work-categories-menu {
        font-size: 32px;
        text-align: center;
        list-style: none;
        margin: 0 auto;
        padding: 7px;
    }
    .work-categories-menu li {
        padding: 0;
        margin: 0;
        display: inline-block;
    }
    .work-categories-menu a {
        display: inline-block;
        padding: 13px 15px;
        color: #7aabde;
    }
    .work-categories-menu .active a {
        color: #ffffff;
    }
    #fixed-header .work-categories-menu {
        font-size: 20px;
        padding: 0;
        -webkit-transform: translateY(-90px);
        transform: translateY(-90px);
    }
    .over-grid #fixed-header .work-categories-menu {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

/*
 * Header
 */

 	#logo {
	 	height: 151px;
	 	padding: 50px 50px 0 50px;
	 	position: absolute;
	    top: 0;
	    right: 0;
 	}
 	#logo-small {
	 	width: 83px;
	 	position: absolute;
	 	bottom: 95px;
	 	right: 50px;
	 	z-index: 10;
 	}
 	#logo-small .svg {
     	height: 32px;
     	width: 75px;
 	}
 	.scroll-stop #logo-small {
	 	-ms-transform: translateY(90px);
	 	    transform: translateY(90px);
	 	-webkit-transform: translateY(90px);
 	}
 	.work-detail #logo-small {
	 	-webkit-transform: none;
	 	    -ms-transform: none;
	 	        transform: none;
	 	bottom: 5px;
 	}
 	.home #logo-small {
	 	display: none;
 	}
 	#header {
		position: absolute;
		width: 100%;
	    z-index: 20;
    }
    #fixed-header {
	    position: absolute;
	    width: 100%;
	    z-index: 20;
	    height: 80px;
    }
    .hamburger-stop #fixed-header {
	    position: fixed;
	    height: 50px;
    }
    #header .svg *,
    #fixed-header .svg * {
	    fill: #ffffff;
    }
    .work-detail #fixed-header,
    .work.scroll-stop #fixed-header {
	    background-color: rgba( 0, 0, 0, 0.75);
    }
	#header-title {
		display: none;
	}

 /*
 * Hamburger menu
 */

 	.hamburger-container {
	 	position: absolute;
	    bottom: 0;
	    left: 0;
	    width: 22px;
	    height: 16px;
	    padding: 47px 5px 17px 50px;
	    cursor: pointer;
	    z-index: 10;
 	}
 	.hamburger {
	    bottom: 0;
	    left: 0;
	    width: 22px;
	    height: 16px;
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		    transform: rotate(0deg);
	}

	.hamburger span {
		display: block;
		position: absolute;
		height: 2px;
		width: 100%;
		background: #FFFFFF;
		border-radius: 2px;
		opacity: 1;
		filter: alpha(opacity=100);
		left: 0;
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		    transform: rotate(0deg);
	}
	.work .hamburger span,
	.work-detail .hamburger span {
		background: #7aabde;
	}
	.not-mobile .work .hamburger-container:hover span,
	.work-detail .hamburger-container:hover span {
		background: #ffffff;
	}
	.hamburger span:nth-child(1) {
		top: 0px;
	}

	.hamburger span:nth-child(2),.hamburger span:nth-child(3) {
		top: 7px;
	}

	.hamburger span:nth-child(4) {
		top: 14px;
	}

	.menu-open .hamburger span:nth-child(1) {
		top: 7px;
		width: 0%;
		left: 50%;
	}

	.menu-open .hamburger span:nth-child(2) {
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		    transform: rotate(45deg);
	}

	.menu-open .hamburger span:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		    transform: rotate(-45deg);
	}

	.menu-open .hamburger span:nth-child(4) {
		top: 7px;
		width: 0%;
		left: 50%;
	}
	.menu-wrapper .hamburger-container {
		top: 0px;
		padding-top: 47px;
	}
	.menu-wrapper .hamburger span {
		background-color: #ffffff !important;
	}
	.hamburger-stop .menu-wrapper .hamburger-container {
		padding-top: 17px;
	}

 /*
 * Work Grid
 */

    body.work {
        background-color: #000000;
    }
    #content.work-grid {
		padding: 250px 0 0 0;
		text-align: center;
    }
    #content.work-grid .grid {
		line-height: 0;
		font-size: 0;
		position: relative;
    }
    .work-block {
        float: left;
		width: 33.33333%;
    }
    .work-block a {
	    overflow: hidden;
	    font-size: 24px;
	    font-weight: 300;
	    color: #ffffff;
	    text-align: right;
	    position: relative;
	    display: block;
		height: 0;
		width: 100%;
		padding-bottom: 56.25%;
 	}
 	.work-grid .entry {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: center center;
	    background-size: cover;
	    line-height: 32px;
 	}
 	.entry .background-image {
	 	opacity: 1;
	 	filter: alpha(opacity=100);
	 	position: absolute;
	 	z-index: inherit;
 	}
 	.not-mobile .work-grid .entry:hover .background-image {
	 	-webkit-transform: scale(1.2);
	 	    -ms-transform: scale(1.2);
	 	        transform: scale(1.2);
 	}
 	.not-mobile .work-grid .entry:hover .tint-overlay {
	 	background-color: rgba( 0, 0, 0, 0.5);
 	}
 	.not-mobile .work-grid .entry:hover .play-icon {
	 	opacity: 1;
	 	filter: alpha(opacity=100);
 	}
 	.not-mobile .work-grid .entry:hover .play-icon .svg {
	 	width: 40px;
 	}
 	.work-grid .play-icon {
	 	margin: 0;
	 	top: 0;
	 	left: 0;
	 	right: 0;
	 	bottom: 0;
	 	width: 100%;
	 	vertical-align: middle;
	 	display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
 	}
 	.work-grid .play-icon .svg {
	 	margin: auto;
	 	display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
	 	width: 1px;
 	}
 	.work-title {
	 	padding: 28px 30px;
	 	position: relative;
 	}
 	.entry-credits {
	 	padding: 28px 30px;
	 	position: absolute;
	 	bottom: 0;
	 	right: 0;
	 	font-size: 12px;
	 	line-height: 16px;
	 	opacity: 0;
	 	filter: alpha(opacity=0);
	 	max-height: 50%;
 	}
 	.entry-credits p {
     	margin: 15px 0 0 0;
     	padding: 0;
     	display: none;
 	}
	.entry-credits p:nth-child(1),
	.entry-credits p:nth-child(2),
	.entry-credits p:nth-child(3) {
    	display: block;
	}
	.entry-credits p:first-child {
    	margin-top: 0;
	}
	.entry-credits p::first-line {
    	text-transform: uppercase;
	}
 	.not-mobile .work-grid .entry:hover .entry-credits {
	 	opacity: 1;
	 	filter: alpha(opacity=100);
 	}
 	.work-block .line {
	 	width: 510%;
 	}
 	.work #header .svg *,
 	.work #fixed-header .svg * {
	 	fill: #7aabde;
 	}

 /*
 * Work Detail
 */

 	.work-detail #logo {
	 	display: none;
 	}
 	.work-detail {
	 	background-color: #000000;
	 	color: #7aabde;
 	}
 	.work-detail .video {
	 	margin: 0;
	 	position: relative;
        min-height: 450px;
        overflow: hidden;
        width: 100%;
        height: 100%;
        height: 100vh;
 	}
 	.work-detail .video .video-stage {
        position: absolute;
        bottom: 80px;
        right: 50px;
        left: 50px;
        top: 80px;
        max-width: 1100px;
        margin: auto;
 	}
 	.video-stage iframe {
        position: absolute;
        margin: auto;
        bottom: 0px;
        right: 0px;
        left: 0px;
        top: 0px;
 	}
 	.work-detail .sections {
	 	padding: 0 50px 22px 50px;
	 	margin: auto;
	 	max-width: 1100px;
	 	font-size: 14px;
	 	font-weight: 300;
	 	overflow: hidden;
 	}
 	.sections .work-icons {
     	text-align: center;
        margin: 50px auto;
 	}
 	.sections .work-icons .work-icon {
     	display: inline-block;
     	margin: 0 20px;
 	}
 	.work-detail h3 {
	 	color: #ffffff;
	 	font-size: 18px;
	 	margin: 50px auto;
	 	padding: 0;
	 	width: auto;
	 	text-align: center;
	 	font-weight: 400;
 	}
 	.work-detail p {
	 	max-width: 700px;
	 	line-height: 20px;
	 	margin: 22px auto;
	 	text-align: justify;
	 	text-justify: distribute;
 	}
 	.work-detail .sections a {
	 	color: #ffffff;
 	}
 	.not-mobile .work-detail .sections a:hover {
	 	text-decoration: none;
	 	border-bottom: solid 1px #ffffff;
	 	padding-bottom: 3px;
 	}
    .work-detail .sections h4 {
        text-align: center;
        font-size: 18px;
    }
 	.work-detail .credits {
	    position: relative;
	    list-style: none;
        display: block;
	    margin: 50px;
        font-size: 0;
	    padding: 0;
	    font-size: 0;
        text-align: left;
    }
	.work-detail .credits p {
        display: inline-block;
        vertical-align: top;
 	    width: 25%;
	    color: #7aabde;
	    font-size: 14px;
	    font-weight: 300;
	    line-height: 20px;
	    padding: 0 15px 15px 0;
	    margin: 0;
	    box-sizing: border-box;
        text-align: left;
    }
	.work-detail .credits p::first-line {
    	text-transform: uppercase;
	}
	.work-detail h3 + .credits {
    	margin-top: -20px;
	}
    .work-icons {
	    max-width: 700px;
	    margin: 0 auto;
    }
    .icon {
	    display: inline-block;
	    margin: 0 20px;
    }
    .work-detail .sections li .title {
	    font-size: 11px;
	    text-transform: uppercase;
	    color: #7aabde;
	    width: 100%;
    }
    .work-detail img {
	    width: 100%;
	    margin: 50px 0;
	    height: auto;
	    display: block;
    }
    .work-detail .sections .fluid-width-video-wrapper {
	    width: 100%;
	    margin: 22px 0;
    }
    .work-detail .divider {
	    width: 100%;
	    height: 1px;
	    background-color: #7aabde;

    }
    #project-info {
	    margin: auto;
	    text-align: center;
	    color: #7aabde;
	    font-size: 12px;
	    line-height: 18px;
	    position: absolute;
	    bottom: 0;
	    right: 0;
	    left: 0;
    }
    #project-info-button {
	    display: inline-block;
	    margin: auto;
	    padding: 20px 40px;
	    cursor: pointer;
    }
    #project-info-button span {
	 	padding-bottom: 10px;
 	}
    .not-mobile #project-info-button:hover span,
    .not-mobile #project-info-button:hover svg * {
	    color: #ffffff;
	    fill: #ffffff;
	    cursor: pointer;
    }
    #project-info-button.active svg {
	    -webkit-transform: rotateZ(180deg);
	    transform: rotateZ(180deg);
	    -webkit-transform-origin: center;
	    -ms-transform-origin: center;
	        transform-origin: center;
    }
    #project-info-button.active .project-info-text,
    #project-info-button .less-info-text {
	    display: none;
    }
    #project-info-button.active .less-info-text {
	    display: block;
    }
    #project-info span {
	    display: block;
    }
    #project-info img {
	    width: 16px;
	    height: auto;
	    margin: auto;
    }
    .work-detail .svg * {
	    fill: #7aabde;
    }
    .work-detail #fixed-header .svg * {
	    fill: #7aabde;
    }
    .not-mobile .work-detail #fixed-header .hamburger-container:hover .svg * {
	    fill: #ffffff;
    }
    .work-detail #header-title {
	    position: absolute;
	    height: 50px;
	    bottom: 0;
	    left: 72px;
	    vertical-align: middle;
	    display: -ms-flexbox;
	    display: -webkit-flex;
	    display: flex;
    }
    #header-title .svg {
	    padding: 10px 12px;
	    margin-top: 3px;
	    width: 23px;
    }
    .header-title-text {
	    margin-top: -5px;
    }
    #header-title a, #header-title p {
	    -webkit-align-self: center;
	    -ms-flex-item-align: center;
	    align-self: center;
    }
    #header-title a {
	    color: #7aabde;
    }
    .not-mobile #header-title a:hover {
	    color: #ffffff;
    }
    .not-mobile #header-title a:hover .svg * {
	    fill: #ffffff;
    }
    #next-project {
        display: none;
    }

/*
 * Compare Box
 */
    .compare-box {
        position: relative;
        overflow: hidden;
        max-width: 960px;
        margin: 2em auto;
        text-align: center;
        color: #575757;
    }
    .compare-box .shutter {
        border-right: 4px solid #7aabde;
        position: absolute;
        z-index: 3;
        bottom: 0;
        left: 0;
        top: 0;
    }
    .is-mobile .compare-box .shutter {
        display: none;
    }
    .compare-box .before img {
        height: auto;
        width: 100%;
    }
    .compare-box .after {
        background-position: left top;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        top: 0;
    }
    .compare-box .before {
        z-index: 2;
    }
    .compare-box .after {
        z-index: 1;
    }
    .compare-box .ui-resizable-handle {
        display: none;
    }
    .compare-box .before .ui-resizable-e {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: auto;
        width: 4px;
        background-color: white;
        cursor: col-resize;
    }
    .sections p.compare {
        text-align: center;
        color: #fff;
    }
    .compare-box img {
        opacity: 0;
        margin: 0;
    }
    .compare-box .before img {
        opacity: 1;
    }

/*
 * About
 */

    body.about {
        background-color: #7aabde;
    }
    .about #container {
        height: 550px;
    }
    #content.about {
        display: -webkit-flex;
        display: flex;

        position: absolute;
        overflow: hidden;
        color: #ffffff;
        height: 100%;
        width: 100%;
    }
    #content.about {
        font-size: 16px;
    }
    .about .svg * {
        fill: #ffffff;
    }
    .about-text {
        position: absolute;
        margin: auto;
        padding: 43px 50px;
        bottom: 0;
        left: 0;
    }
	.about video {
        -webkit-transform: translateX(50%) translateY(50%);
        transform: translateX(50%) translateY(50%);

        position: absolute;
        height: auto;
        width: auto;
        min-height: 100%;
        min-width: 100%;
        bottom: 50%;
        right: 50%;

        /* Not supported yet */
        object-fit: cover;
    }
    .about .vid-wrap {
        overflow: hidden;
    }
    .about h3 {
    	line-height: 1.5em;
    	font-size: 1.5em;
	}
    .about h4 {
        font-style: italic;
        font-weight: 300;
    }
    .about ul {
        padding-left: 17px;
    }
    .about p {
        font-weight: 300;
        margin: 24px 0 0 0;
    }
    .background-image {
        background-position: center center;
        background-size: cover;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
 	}

/*
 * Slideshow Component
 */

    .slideshow {
        z-index: 10;
        overflow: hidden;
    }
    .slide {
        background-position: center center;
        background-size: cover;
        background-color: #000000;
        position: relative;
        overflow: hidden;
        width: 100%;
    }
    .slide .cell {
	    position: absolute;
	    right: 0px;
	    bottom: 156px;
    }
	.slide .title {
        padding: 0 50px;
        position: relative;
        opacity: 0;
        filter: alpha(opacity=0);
        text-align: right;
        line-height: 50px;
        line-height: 1.3;
    }
    .slide.cycle-slide-active .title {
	    opacity: 1;
	    filter: alpha(opacity=100);
    }
    .slide .title span {
        position: relative;
        top: 0;
    }
    .play-icon {
	    position: absolute;
        opacity: 0;
        filter: alpha(opacity=0);
	    margin-top: 8px;
	    top: 0;
	    left: 0;
    }
    .play-icon .svg {
	    height: 35px;
	    fill: #ffffff;
    }
    .not-mobile .title:hover .play-icon {
        -webkit-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
            transform: translateX(-50px);
        opacity: 1;
        filter: alpha(opacity=100);
    }
    .pagination {
	    position: absolute;
	    bottom: 214px;
	    left: 46px;
	    color: #ffffff;
	    z-index: 110;
	    list-style: none;
	    padding: 0;
	    margin: 0;
    }
    .pagination span {
	    display: block;
	    width: 5px;
	    height: 5px;
	    border: solid #ffffff 1px;
	    border-radius: 50%;
	    background-color: #ffffff;
    }
    .slideshow ul {
	    list-style: none;
    }
    .pagination li {
	    padding: 4px;
    }
    .not-mobile .pagination li:hover {
	    cursor: pointer;
    }
    .cycle-pager-active span {
	    background-color: rgba( 0, 0, 0, 0) !important;
    }

/*
 * Contact
 */

 	body.contact {
	 	background-color: #7aabde;
	 	color: #ffffff;
	 	font-weight: 300;
	 	min-height: 675px;
 	}
 	.contact #logo-small {
	 	display: none;
 	}
 	.contact .background-image {
	 	opacity: 1;
	 	filter: alpha(opacity=100);
	 	background-attachment: fixed;
 	}
 	.contact .tint-overlay {
     	display: none;
 	}
 	.contact .tint-overlay.has-image {
     	display: block;
 	}

 	#content.contact {
	 	position: absolute;
	 	width: 100%;
		right: 150px;
		top: 0;
	 	min-height: 500px;
 	}
 	.contact .entry {
	    display: -webkit-flex;
	    display: flex;
	    -webkit-flex-wrap: wrap;
	    flex-wrap: wrap;

	    padding: 0 50px 80px 36%;
	    text-align: right;
    }

	.contact-item {
	    -webkit-flex: 0 1 50%;
	    -ms-flex: 0 1 50%;
	    -webkit-box-flex: 0;
	            flex: 0 1 50%;
	    padding: 50px 0 15px 0;
    }
    .contact h3 {
	    font-size: 28px;
	    line-height: 50px;
    }
    .contact address {
	    font-size: 16px;
	    font-style: normal;
	    line-height: 22px;
	    margin: 0 0 22px 0;
	    padding: 0;
    }
    .contact-item p {
	    margin: 0;
    }
    .contact .entry a {
	    color: #ffffff;
	    line-height: 22px;
    }
    .not-mobile .contact .entry a:hover {
	    padding-bottom: 3px;
	    border-bottom: solid 1px #ffffff;
    }

    #final-cut-tag {
	    position: absolute;
	    bottom: 44px;
	    right: 49px;
	    line-height: 20px;
    }
    #final-cut-tag span {
        display: block;
        margin-bottom: 5px;
    }
    #final-cut-tag a {
        display: inline-block;
        vertical-align: bottom;
        margin-left: 15px;
    }
    #final-cut-tag .logo-machine {
	    height: 25px;
	    position: relative;
	    top: 5px;
    }
    #final-cut-tag a:hover {
        text-decoration: none;
        border: none;
        padding: 0;
    }
    #final-cut-tag a img {
        width: auto;
        height: 20px;
    }
    #final-cut-tag span {
	    font-size: 12px;
	    vertical-align: top;
	    line-height: 24px;
	    padding-right: 4px;
    }
    #final-cut-tag .cc-logo {
        margin-left: 10px;
        position: relative;
        top: -1px;
    }    
    #final-cut-tag .cc-logo img {
	    height: 16px;
    }

/*
 * Animations
 */

    /* Color */
    a {
	    -webkit-transition: color 0.4s;
        transition: color 0.4s;
    }
    #header-title, #project-info-button span {
	    -webkit-transition: color 0.4s;
	    transition: color 0.4s;
    }

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

    /* Custom opacity  */
    .slide .title {
        -webkit-transition: opacity 0.8s ease-out 0.4s;
        transition: opacity 0.8s ease-out 0.4s;
    }

    /* Custom opacity and transform */
    .play-icon {
        -webkit-transition: opacity 0.15s ease-out 0s, -webkit-transform 0.35s ease-out 0s;
        transition: opacity 0.15s ease-out 0s, transform 0.35s ease-out 0s;
    }
    .tint-overlay {
	    -webkit-transition: 0.4s;
	    transition: 0.4s;
    }

    /* Everything */
    .svg path {
	    -webkit-transition: 0.4s;
	    transition: 0.4s;
    }
    .home .svg * {
        transition: none;
        -webkit-transition: none;
    }
    .hamburger {
	    -webkit-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
    }
    .hamburger span {
	    -webkit-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
    }
    #fixed-header {
	    -webkit-transition: background 0.6s;
	    transition: background 0.6s;
    }
    .menu-open #fixed-header {
	    -webkit-transition: background 0.3s;
	    transition: background 0.3s;
    }
    .menu-open li {
	    -webkit-transition: opacity 0.4s;
	    transition: opacity 0.4s;
    }
    .slideshow span {
	    -webkit-transition: background-color 0.4s;
	    transition: background-color 0.4s;
    }
    .work-categories-menu,
    #logo-small {
	    -webkit-transition: 0.4s ease-in-out;
	    transition: 0.4s ease-in-out;
    }
    .work-grid .play-icon .svg {
	    -webkit-transition: all 0.4s ease;
	 	transition: all 0.4s ease;
 	}
 	.work-grid .entry {
	 	-webkit-transition: all 4s ease;
	    transition: all 4s ease;
 	}
 	.entry .background-image {
	 	-webkit-transition: all 2.5s;
	 	transition: all 2.5s;
 	}
 	.entry-credits {
	 	-webkit-transition: .4s ease-in-out;
	 	transition: .4s ease-in-out;
 	}
 	.not-mobile .work-grid .entry:hover .background-image {
	 	-webkit-transition: all 5s linear;
	 	transition: all 5s linear;
 	}
 	.pagination span {
	 	transition: all 0s;
 	}

	@-webkit-keyframes bounce {
	    0% { transform: translateY(0); -webkit-transform: translateY(0); }
	    25% { transform: translateY(6px); -webkit-transform: translateY(6px); }
	    50% { transform: translateY(0px); -webkit-transform: translateY(0); }
	    75% { transform: translateY(6px); -webkit-transform: translateY(6px); }
	    100% { transform: translateY(0px); -webkit-transform: translateY(0); }
	}

	@keyframes bounce {
	    0% { transform: translateY(0); -webkit-transform: translateY(0); }
	    25% { transform: translateY(6px); -webkit-transform: translateY(6px); }
	    50% { transform: translateY(0px); -webkit-transform: translateY(0); }
	    75% { transform: translateY(6px); -webkit-transform: translateY(6px); }
	    100% { transform: translateY(0px); -webkit-transform: translateY(0); }
	}

	#project-info-button.bounce svg {
		-webkit-animation-name: bounce;
		        animation-name: bounce;
	    -webkit-animation-duration: 800ms;
	            animation-duration: 800ms;
	    -webkit-animation-delay: 2s;
	            animation-delay: 2s;
	    -webkit-animation-iteration-count: 2;
	            animation-iteration-count: 2;
	    -webkit-animation-timing-function: ease-in-out;
	            animation-timing-function: ease-in-out;
	}


/*
 * Wordpress Required
 */
    #tagline {
        display: none;
    }
	.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;
	    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;
	}