/*
Theme Name: Mothersbaugh 2014
Theme URI: http://www.mothersbaugheyewear.com
Description: A theme for WordPress.
Author: Rick Baker, Drew Baker, Funkhaus
Author URI: http://www.funkhaus.us
Version: 1.1


Fonts:
    font-family: "gt_walsheim_regular", sans-serif;
    font-family: "gt_walsheim_medium", sans-serif;
    font-family: "sanchezregular", serif;

Colors:
    Black: black;
    Grey: #939393;
    Red: #d23a3a;
    Blue: #86c2d7;


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

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

/*
 * Globals
 */
 	html {
	 	height: 100%;
 	}
	body {
	 	height: 100%;
		margin: 0;
		padding: 0;
		font-family: "gt_walsheim_regular", sans-serif;
	    font-size: 16px;
	    color: black;
	    -webkit-font-smoothing: antialiased;
	    letter-spacing: 1px;
	}
    h1,h2,h3,h4,h5,h6 {
        margin: 0;
        padding: 0;
        line-height: 1;
        font-weight: normal;
		font-family: "gt_walsheim_medium", sans-serif;
    }
    .fullbleed {
    	height: 100%;
    	width: 100%;
	    background-size: cover;
	    background-position: center center;
    }
    ::selection {
        color: white;
        background: #86c2d7;
    }
    ::-moz-selection {
        color: white;
        background: #86c2d7;
    }
    .entry {
	    font-family: "sanchezregular", serif;
    }
    strong {
	    font-weight: normal;
	    font-family: "gt_walsheim_medium", sans-serif;
    }
    blockquote,
    em {
		font-style: normal;
	    font-family: "sanchezitalic", serif;
    }


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


/*
 * Page Structure
 */
 	#container {
	 	min-height: 100%;
	 	min-width: 1040px;
 	}
 	#content {
	 	padding: 130px 0 40px 0;
 	}
 	#footer {
	 	margin-top: -40px;
	 	height: 40px;
	 	line-height: 40px;
	 	clear: both;
	 	position: relative;
	 	background-color: #eeeded;
	 	font-size: 12px;
	 	font-family: "gt_walsheim_medium", sans-serif;
	    text-align: center;
	    text-transform: uppercase;
	 	min-width: 1040px;
 	}


/*
 * Menus
 */
 	#menu-wrap {
	 	position: fixed;
	 	top: 0;
	 	right: 0;
	 	overflow: hidden;
	 	height: 100%;
	 	min-height: 580px;
	 	z-index: 200;
	 	width: 0;
 	}
 	#menu {
	 	position: absolute;
	 	top: 0;
	 	right: -150px;
	 	overflow: hidden;
	 	width: 150px;
	 	background-color: white;
	 	height: 100%;
	 	z-index: 500;
 	}
 	#glasses {
		position: fixed;
		top: 50%;
		right: 30px;
		margin: -16px 0 0 0;
		z-index: 500;
		cursor: pointer;
 	}
 	ul.menu {
 		position: relative;
 		top: 80px;
	 	margin: 0 20px;
	 	padding: 0;
	 	list-style: none;
	 	font-size: 14px;
	 	text-transform: uppercase;
	 	text-align: center;
	 	letter-spacing: 1.5px;
	 	line-height: 1;
 	}
 	.menu li {
	 	padding: 0;
	 	margin: 0;
 	}
 	.menu a {
	 	color: #939393;
	 	display: block;
 		padding: 10px 0;
 	}
 	.menu .current-menu-item a,
 	.menu a:hover {
	 	color: black;
 	}
	/* Custom Chrome Colors */
 	.grey-chrome #glasses path.frame {
		fill: #ccc;
 	}
 	.grey-chrome #glasses path.lens {
		stroke: #ccc;
 	}
 	/* Black chrome overides */
	.black-chrome #logo polygon,
	.black-chrome #logo path {
		fill: black;
	}
 	.black-chrome #glasses path.frame {
	 	fill: black;
 	}
 	.black-chrome #glasses path.lens {
	 	stroke: black;
 	}
 	.black-chrome #glasses:hover path.frame {
	 	fill: white;
 	}
 	.black-chrome #glasses:hover path.lens {
	 	stroke: white;
 	}
	.black-chrome #logo:hover polygon,
	.black-chrome #logo:hover path {
		fill: white;
	}
 	/* Grey Hover */
 	.grey-hover #glasses:hover path.frame {
	 	fill: #ccc;
 	}
 	.grey-hover #glasses:hover path.lens {
	 	stroke: #ccc;
 	}
	.grey-hover #logo:hover polygon,
	.grey-hover #logo:hover path {
		fill: #ccc;
	}
 	/* Fallback states */
 	.menu-open #glasses:hover path.frame,
 	#glasses:hover path.frame {
	 	fill: black;
 	}
 	.menu-open #glasses:hover path.lens,
 	#glasses:hover path.lens {
	 	stroke: black;
 	}
 	/* Open State */
 	.menu-open #glasses path.frame {
	 	fill: black;
 	}
 	.menu-open #glasses path.lens {
	 	stroke: black;
 	}

/*
 * Header
 */
 	#logo {
	 	position: absolute;
	 	top: 50px;
	 	left: 50%;
	 	margin-left: -140px;
	 	z-index: 200;
	 	cursor: pointer;
 	}
 	#logo .svg {
	 	height: 52.574px;
	 	width: 280px;
 	}
 	#logo:hover polygon,
 	#logo:hover path {
	 	fill: black;
 	}





/*
 * Home
 */
 	#content.home {
	 	padding: 0;
 	}
 	.home #logo {
	 	position: absolute;
	 	top: 50%;
	 	margin-top: -37.5px;
	 	margin-left: -201px;
 	}
 	.home #logo .svg {
	 	height: 75.6px;
	 	width: 402.4px;
 	}
 	.home .menu a {
	 	color: black;
 	}
 	.home .menu a:hover {
	 	color: #939393;
 	}
 	#content.home {
	 	padding-bottom: 0;
 	}
 	.slide > img {
		display: none;
	}
	.home .credit {
		position: absolute;
		bottom: 20px;
		left: 20px;
		text-transform: uppercase;
		font-size: 14px;
		color: white;
		z-index: 110;
		line-height: 15px;
		height: 15px;
		font-family: "gt_walsheim_medium", sans-serif;
	}
	.home .credit .svg {
		position: relative;
		top: 2px;
		margin: 0 3px;
	}



/*
 * Case Studys
 */
	#content.case-study {
		padding-top: 0;
	}
	.case-study .credit {
		position: absolute;
		bottom: 20px;
		left: 20px;
		text-transform: uppercase;
		font-size: 14px;
		color: white;
		z-index: 110;
		line-height: 15px;
		height: 15px;
		font-family: "gt_walsheim_medium", sans-serif;
	}
	.case-study .credit .svg {
		position: relative;
		top: 2px;
		margin: 0 3px;
	}
	.text-section {
		padding: 0 50px;
		overflow: hidden;
	}
	.text-section .entry {
		margin: 100px auto;
		text-align: center;
		width: 800px;
	}
	.entry h2 {
		font-size: 60px;
		text-transform: uppercase;
		margin-bottom: 40px;
	}
	.case-study .entry h3 {
		text-transform: uppercase;
	}
	.view-collection {
		display: block;
		color: inherit;
		margin: 50px auto;
		width: 280px;
		font-family: "gt_walsheim_regular", sans-serif;
	}
	.view-collection span {
		display: block;
		text-transform: uppercase;
		margin-top: 20px;
		font-size: 14px;
	}
	.view-collection:hover path.lens,
	.view-collection:hover path.frame {
	 	stroke: black;
 	}
	/* Custom Sections */
	#whats-your-vision {
		background-color: #d23a3a;
		color: white;
		font-size: 22px;
	}
	#mark-mothersbaugh {
		background-color: #86c2d7;
		color: white;
		font-size: 22px;
	}



/*
 * Media Player (used on Reels, and Case Study pages)
 */
	.video-player {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: black;
		display: none;
		overflow: hidden;
	}
	.video-player iframe {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 0;
	}
	.video-player .controls {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		cursor: pointer;
	}
	.video-player.video-paused .controls {
		background-image: url(images/icon-play-large.svg);
		background-position: center center;
		background-repeat: no-repeat;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.1);
	}
	.play-button {
		height: 30px;
		line-height: 30px;
		display: block;
		text-transform: uppercase;
		font-family: "gt_walsheim_regular", sans-serif;
		margin: 40px auto;
		width: 230px;
		cursor: pointer;
	}
	.play-button:hover {
		opacity: 0.5;
	}
	.play-button .icon {
		display: inline-block;
		vertical-align: top;
		margin: 0 5px;
	}


/*
 * Gallery Sections
 */
	.gallery-section {
		position: relative;
		overflow: hidden;
		text-align: center;
		padding-bottom: 100px;
	}
	.gallery-item {
		min-height: 50vh;
		width: 100%;
		overflow: hidden;
	}
	.gallery-image {
		position: relative;
	}
	.gallery-image img {
		width: 100%;
		height: auto;
		display: block;
	}
	.gallery-entry {
		width: 600px;
		margin: 50px auto;
		font-size: 16px;
		text-align: center;
	}
	.gallery-entry .title {
		font-size: 24px;
		letter-spacing: 5px;
		margin-bottom: 40px;
	}
	.gallery-section .browse {
		line-height: 0;
		padding: 20px;
		cursor: pointer;
		z-index: 110;
		position: absolute;
		left: 50%;
		margin-top: 29px;
		margin-left: 350px;
		bottom: 20px;
	}
	.gallery-section .browse.prev {
		margin-left: -408px;
	}
	.gallery-section .browse.disabled {
		opacity: 0.2;
		cursor: default;
		display: block;
	}
	.browse {
		opacity: 0.5;
	}
	.browse:hover {
		opacity: 1;
	}
	.browse.disabled {
		display: none;
	}


/*
 * Video Section
 */
	.video-section {
		position: relative;
		overflow: hidden;
		display: block;
		background-color: black;
	}
	.video-section iframe {
		position: absolute;
		top: 50%;
		left: 50%;
	}
	.down-arrow {
		position: absolute;
		bottom: 0;
		left: 50%;
		margin: 0 0 0 -35px;
		padding: 20px;
	}
	.down-arrow:hover {
		cursor: pointer;
		opacity: 0.5;
	}

/*
 * Product Grid
 */
	.product-block {
		text-align: center;
		margin: 75px auto;
	}
	.product-block.inactive {
		opacity: 0.3;
	}
	.product-block.active {
		opacity: 1;
	}
	.product-block .title {
		font-size: 21px;
		text-transform: uppercase;
		margin: 15px 0;
		font-family: "gt_walsheim_regular", sans-serif;
		letter-spacing: 3px;
	}
	.product-block .price {
		font-size: 14px;
	}
	.product-slider {
		height: 380px;
		margin: 20px auto 0 auto;
		position: relative;
	}
	.product-slider .items {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.product-slider .sun-items {
		display: none;
		z-index: 110;
	}
	.product-slider .slide {
		height: 380px;
		width: 100%;
		text-align: center;
		background-position: center center;
		background-repeat: no-repeat;
	}
	.product-slider .slide img {
		display: block;
		margin: 0 auto;
		visibility: hidden;
		opacity: 0;
	}
	.product-slider .browse {
		position: absolute;
		padding: 20px;
		cursor: pointer;
		z-index: 110;
		top: 50%;
		left: 50%;
		margin-top: -45px;
	}
	.product-slider .browse.prev {
		-webkit-transform: translateX(-440px);
		-moz-transform:    translateX(-440px);
		-ms-transform:     translateX(-440px);
		-o-transform:      translateX(-440px);
		transform:         translateX(-440px);
		margin-left: -66px;
	}
	.product-slider .browse.next {
		-webkit-transform: translateX(440px);
		-moz-transform:    translateX(440px);
		-ms-transform:     translateX(440px);
		-o-transform:      translateX(440px);
		transform:         translateX(440px);
	}
	.product-block.overlay-open .browse,
	.product-slider .browse.disabled {
		display: none;
	}
	.sub-pages {
		position: relative;
		z-index: 115;
	}
	.sub-page {
		display: inline-block;
		margin: 0 60px;
		font-size: 11px;
		text-transform: uppercase;
		cursor: pointer;
	}
	.sub-page span {
		border-bottom: 2px solid transparent;
		letter-spacing: 2px;
	}
	.sub-page:hover span,
	.sub-page.active span {
		border-bottom: 2px solid black;
	}
	.sub-page .product-info {
		display: none;
	}
	/* Product Overlay */
	.product-block .overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255, 255, 255, 0.8);
		z-index: 115;
		height: 380px;
		width: 955px;
		margin: auto;
		display: none;
	}
	.product-block .overlay .entry {
		padding: 0 90px;
		margin: auto;
		text-align: justify;
		color: black;
		line-height: 1.4;
		letter-spacing: 1px;
		display: table-cell;
		height: 380px;
		width: 955px;
		vertical-align: middle;
	}
	.product-block .image-overlay {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		height: 380px;
		width: 955px;
		margin: auto;
		background-size: contain;
		background-position: center center;
		background-color: white;
	}
	.product-block .image-overlay img {
		visibility: hidden;
	}
	/* Specifc Overlays Styles */
	.product-info h3 {
		font-size: 21px;
		text-transform: uppercase;
		margin: 3px 0;
		letter-spacing: 2px;
		font-family: "gt_walsheim_regular", sans-serif;
	}
	.product-info h4 {
		font-size: 14px;
		text-transform: uppercase;
		margin: 3px 0;
		letter-spacing: 2px;
		font-family: "gt_walsheim_regular", sans-serif;
	}
	.product-block .entry.features {
		text-align: center;
	}
	.product-block .entry.features h3 {
		margin-bottom: 25px;
	}


/*
 * Retailers
 */
	.retailers #content {
		text-align: center;
		color: #989898;
		padding-top: 200px;
	}
	.retailers .fallback .entry {
		width: auto;
	}
	.retailers .entry .col1,
	.retailers .entry .col2 {
		width: 400px;
		display: inline-block;
		vertical-align: top;
		margin: 0 20px;
	}
	.retailers .entry h3 {
		font-size: 21px;
		letter-spacing: 3px;
		text-transform: uppercase;
		color: #86c2d7;
	}
	.retailers .entry p	{
		margin: 25px 0 50px 0;
	}
	.retailers .entry strong {
	    font-family: "gt_walsheim_medium", sans-serif;
	    text-transform: uppercase;
	    font-size: 14px;
	    color: black;
	    margin: 5px 0;
	    display: inline-block;
	}
	.retailers .entry .phone {
	    color: black;
	    display: inline-block;
	    height: 16px;
	    line-height: 16px;
	    margin: 8px 0;
		font-family: "gt_walsheim_regular", sans-serif;
	}
	.retailers .entry .phone .svg {
		display: inline-block;
		vertical-align: bottom;
	}



/*
 * Fallback
 */
 	#content.fallback {
		text-align: center;
		padding-top: 200px;
	}
	.fallback .entry {
		width: 860px;
		margin: 0 auto;
	}
	.fallback .entry .col1,
	.fallback .entry .col2 {
		width: 400px;
		display: inline-block;
		vertical-align: top;
		margin: 0 20px;
	}
	.fallback .entry h3 {
		font-size: 21px;
		letter-spacing: 3px;
		text-transform: uppercase;
		color: #86c2d7;
	}
	.fallback .entry p	{
		margin: 25px 0 50px 0;
	}
	.fallback .entry strong {
	    font-family: "gt_walsheim_medium", sans-serif;
	    text-transform: uppercase;
	    font-size: 14px;
	    color: black;
	    margin: 5px 0;
	    display: inline-block;
	}



/*
 * Contact
 */
	.contact .slideshow {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}
	.contact .table {
		height: 100%;
		width: 100%;
		display: table;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 110;
	}
	.contact .cell {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		padding: 130px 50px 50px 50px;
	}
	.contact .entry {
	    font-family: "gt_walsheim_medium", sans-serif;
		font-size: 28px;
		text-transform: uppercase;
		background-color: rgba(255, 255, 255, 0.3);
		line-height: 1.3;
	}
	.contact .entry p {
		margin: 0.8em 0;
	}
	.contact .glasses path.frame {
		fill: black;
	}
	.contact .glasses path.lens {
		stroke: black;
	}
	.contact .entry .mail {
		border-bottom: 2px solid transparent;
	}
	.contact .entry .mail:hover {
		border-bottom: 2px solid black;
	}
	.contact .entry .social-link {
		display: inline-block;
		margin: 0 10px;
	}
	.contact .twitter:hover path {
		fill: #0084b4;
	}
	.contact .pinterest:hover path {
		fill: #ab171e;
	}
	.contact .instagram:hover path {
		fill: #ad8569;
	}


/*
 * Footer
 */
	.no-footer #content {
		padding-bottom: 0;
	}
	.no-footer #footer {
		display: none;
	}


/*
 * Mobile Overrides
 */
	.is-mobile .sub-page span {
		font-size: 18px;
	}



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

    /* Opacity */
    .down-arrow,
    .play-button,
    #logo,
	.product-block,
    .browse {
		transition: opacity 0.4s;
    }

    /* Backgorund-color */
	.controls {
		transition: background-color 0.4s;
	}

    /* Everything */
    .sub-page span,
    .mail,
    svg polygon,
    svg path {
		transition: 0.4s;
    }



/*
 * Tools
 */
    #tagline {
        display: none;
    }
    #infscr-loading {
	    display: none !important;
    }
    .post-edit-link {
	    font-size: 10px;
	    text-transform: uppercase;
    }



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