/*	00. Font Face	01. Key Frames fade in	02. Media Queries MAX WIDTH 1024px	03. Media Queries MAX WIDTH 960px	04. Media Queries MAX WIDTH 720px	05. Media Queries MAX WIDTH 520px	06. Media Queries for landscapes	07. Media Queries for Portraits	08. Media Queries for Works Grid
*/
/* 00. FONT FACE ================================================== */

/**
 * @license
 * MyFonts Webfont Build ID 3336491, 2017-01-25T15:37:28-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: SuburbanOT-Light by Emigre
 * URL: http://www.myfonts.com/fonts/emigre/suburban/light/
 * Copyright: Copyright (c) Emigre Inc, 1993. Designed by Rudy VanderLans. All rights reserved.
 * Licensed pageviews: 10,000
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3336491
 * 
 * © 2017 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/32e92b");

  
@font-face {font-family: 'SuburbanOT-Light';src: url('../webfonts/32E92B_0_0.eot');src: url('../webfonts/32E92B_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/32E92B_0_0.woff2') format('woff2'),url('../webfonts/32E92B_0_0.woff') format('woff'),url('../webfonts/32E92B_0_0.ttf') format('truetype');}


/* 01. KEY FRAMES FADE IN ================================================== */

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.fade-in {
    -webkit-animation: fadeIn ease-in 1;
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    opacity: 0.7;
    filter: alpha(opacity=70);
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}
.fade-in.one {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.fade-in.two {
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-delay:0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

/* ISOTOP IS THERE FOR SOFT TRANSITIONS BETWEEN WORKS */

.isotope .isotope-item {
    /* change duration value to whatever you like */
    
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}
/* 03. MAX WIDTH 1024px ================================================== */

@media screen and (max-width: 1024px) {
    nav #logo {
        float: left;
        display: inline-block;
        margin-left: 0px;
        padding: 15px 20px 20px 10px;
        line-height: 20px;
        vertical-align: middle;
    }
}
/* 04. MAX WIDTH 960px ================================================== */

@media screen and (max-width: 960px) {
    .roles {
        font-size: 14pt;
    }
    #twitterwrap {
        padding: 30px 50px 30px;
    }
    #ticker ul.tweet_list {
        height: 19px;
        font: 12px 'Josephin Sans';
    }
    ticker .tweet_list li {
        overflow: hidden;
        vertical-align: middle;
        font: 12px 'Josephin Sans';
        color: #666;
        height: 30px;
    }
    .lead {
        padding: 20px 30px 10px 30px;
        font-size: 14pt;
    }
}
/* 05. MAX WIDTH 720px ================================================== */

@media screen and (max-width: 720px) {
    .roles {
        font-size: 12pt;
		line-height:25px;
		margin-top:10px;
    }
    nav {
        width: 100%;
        height: 90px;
        background-color: #FFF;
        margin: 0px;
        z-index: 100;
        text-align: center;
    }
    nav #logo {
        padding: 15px 0px 10px 0px;
        width: 227px;
		height:40px;
		float:none;
        text-align: center;
    }
    .nav {
        padding: 0px;
        text-align: center;
        margin: 0px auto;
    }
    nav ul {
        width: 100%;
        text-align: center;
        margin-top: 0px;
    }
    nav ul li a {
        margin: 5px 8px 0px 8px;
        padding: 5px 0px;
    }
}
/* 06. MAX WIDTH 520px ================================================== */

@media screen and (max-width: 520px) {
    header {
		width: 100%;
    height: 100%;
	min-height:100%;
        background: url(../img/background_header3.jpg) no-repeat top;
		    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    nav {
        height: 70px;
    }
    nav ul {
        display: none;
    }
    .lead {
        padding: 10px 30px 10px 30px;
        font-size: 13px;
		line-height:20px;
    }
	.hero {
	  position: absolute;
	  text-align: center;
	  min-width: 250px;
	  left: 50%;
	  top: 50%;
	  padding: 15px;
	}
	.logo {
    margin: 5% auto 10px auto;
	width:100px;
	height:105px;
	}
	header h2 {
	font-size: 35px;
	}
	
	#tab a {
    width: 150px;
    padding: 20px 10px;
	}
	
    .loadmore {
        display: none;
    }
    #contact .row .col1 {
        width: 90%;
    }
    #contact .row .col2 {
        width: 90%;
        margin-top: 30px;
        text-align: center;
    }
    #contact .inner blockquote p {
        color: #fff;
        text-transform: uppercase;
        font-size:14pt;
    }
    #contact .inner form input[type="text"],
    #contact .inner form input[type="email"],
    #contact .inner form textarea {
        width: 95%;
    }
    #contact .inner form .submit {
        width: 100%;
    }
    footer {
        font-size: 9px;
    }
}
/* 07. Smartphones (landscape) ================================================== */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
  /**  header {
        height: 180px;
    }**/
    header h1 {
        margin-top: 50%;
        font-size: 30pt;
    }
    #wrapper {
        position: absolute;
        width: 100%;
    }
    #about .inner h2,
    #contact .inner h2,
    #portfolio h2 {
        font-size: 20pt/1.5;
    }
    nav ul li a {
        margin: 5px 5px 0px 5px;
        padding: 5px 0px;
    }
    nav ul li:last-child {
        display: none;
    }
    nav #logo {
        margin-left: 0px;
        padding: 5px;
		width:227px;
		height:40px;
    }
    nav ul li a {
        font-size: 5pt;
    }
    nav {
        height: 60px;
    }
}
/* 07. Smartphones (portraits) ================================================== */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
 /**   header {
        height: 417px;
    }**/
    #wrapper {
        position: absolute;
        width: 100%;
    }
    header h1 {
        margin-top: 50%;
        font-size: 30pt;
    }
    #about .inner h2,
    #contact .inner h2,
    
    nav ul li a {
        margin: 5px 5px 0px 5px;
        padding: 5px 0px;
    }
    nav ul li:last-child {
        display: none;
    }
}
/* 07. iPads (landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}
/* 07. iPads (portrait) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    header h1 {
        margin-top: 50%;
    }
}
/* 07. iPhone 4 ----------- */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    header h1 {
        margin-top: 50%;
    }
}
/* 08. PORTRAITS Media Queries ================================================== */
/* 3 COL */

@media (max-width: 800px) {
    #portraits li {
        width: 31%;
        padding-top: 0%;
        margin-bottom: 3%;
    }
}
/* 2 COL */

@media (max-width: 600px) {
    #portraits li {
        width: 46%;
        padding-top: 0%;
        margin-bottom: 4%;
    }
}
/* SINGLE COL */

@media (max-width: 400px) {
    #portraits li {
        width: 75%;
        padding-top: 0%;
        margin-bottom: 5%;
    }
}
/* 08. WORKS GRID Media Queries ================================================== */

@-webkit-keyframes loader {
    0% {
        background: #ddd;
    }
    33% {
        background: #ccc;
        box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd;
    }
    66% {
        background: #ccc;
        box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc;
    }
}
@-moz-keyframes loader {
    0% {
        background: #ddd;
    }
    33% {
        background: #ccc;
        box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd;
    }
    66% {
        background: #ccc;
        box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc;
    }
}
@keyframes loader {
    0% {
        background: #ddd;
    }
    33% {
        background: #ccc;
        box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd;
    }
    66% {
        background: #ccc;
        box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc;
    }
}
@media screen and (max-width: 830px) {
    .og-expander h3 {
        font-size: 32px;
    }
    .og-expander p {
        font-size: 13px;
    }
    .og-expander a {
        font-size: 12px;
    }
    .og-fullimg {
        margin-top: 5%;
    }
}
@media screen and (max-width: 650px) {
    .og-fullimg {
        display: none;
    }
    .og-details {
        float: none;
        width: 100%;
    }

	.hide-on-mobile {
		display:none;
	}