/* BASE STYLES
============================================================================= */
html {
	overflow-x:hidden;
    max-width: 100%;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    margin: 0;
    padding: 0;
}


body {
	margin: 0;
	padding: 0;
    overflow-x:hidden;
    max-width: 100%;
}

.page {
	bottom:0; 
    position:absolute;
    top:0;  
    width:100%;
    margin-top: 40px;
}

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    behavior: url(../htc/boxsizing.htc);
}

/* PAGES
============================================================================= */
.page-books {
	background: none;
}

.page-poster {
	background: yellow;
}

.page-home {
    overflow: auto;
}

.page-motion {
    background: pink;
}

.page-installation {
    background: grey;
}

.page-object {
    background: green;
}

.page-branding {
    background: orange;
}

.page-digital {
    background: cyan;
}

.page-sketchbook {
    background: maroon;
}

.page-misc {
    background: red;
}

/* ANIMATIONS
============================================================================= */

.page.ng-enter {
	z-index: 6666;
    -webkit-animation: fadeIn 0.25s; /* Safari 4+ */
    -moz-animation:    fadeIn 0.25s; /* Fx 5+ */
    -o-animation:      fadeIn 0.25s; /* Opera 12+ */
    animation:         fadeIn 0.25s;  
}

.page.ng-leave {
	z-index: 7777; 
    -webkit-animation: fadeOut 0.25s; /* Safari 4+ */
    -moz-animation:    fadeOut 0.25s; /* Fx 5+ */
    -o-animation:      fadeOut 0.25s; /* Opera 12+ */
    animation:         fadeOut 0.25s; 
}

/* Fade In*/
@-webkit-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Fade In*/
@-webkit-keyframes fadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes fadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@-o-keyframes fadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* Lightbox
============================================================================= */

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8888;
    background: white;
    opacity: 1;
}

    .lightbox-hidden {
        display: none;
    }

    .lightbox-show {
        display: block;
    }

.lightbox-view {
    width: 50%;
    position: relative;
    margin: 0 auto;
}

    .lightbox-view img {
        width: 100%;
    }

    .lightbox-view img.landscape {
       
    }

    .lightbox-view img.portrait {
        
    }
/* Navigation Styles
============================================================================= */

.nav {
    position: relative;
    z-index: 9999;
    width:  90%;
    height: 40px;
    margin: 0 auto;   
}

.nav .nav-link {
    width: 9.5%;
    min-width: 80px;
    text-align: center;
    padding: 10px 0px 10px 0px;
    float: left;
    color: black;
    -webkit-transition: .25s ease-in-out;
}

.nav .nav-link:hover {
    color: #E83434;
}

/* Layout Info
============================================================================= */

.special {
    width: 130%;
    background: yellow;
}

.header {
    height:200px;
    background: none;
    padding-top: 50px;
    margin-bottom: 100px;
}

.span_12, .fullWidth, .home-label {
    width: 100%;
}

.span_11 {
    width: 91.6666666667%;
}

.span_10, .main-column {
    width:83.3333333333%;
}

.span_9 {
    width:75.0%;
}

.span_8, .double-sub-column, .grid-spacer {
    width:66.6666666667%;
}

.span_7 {
    width:58.3333333333%;
}

.span_6 {
    width:50.0%;
}

.span_5 {
    width:41.6666666667%;
}

.span_4, .sub-column {
    width:33.3333333333%;
}

.span_3 {
    width:25.0%;
}

.span_2, .mini-column {
    width:16.6666666667%;
}

.span_1 {
    width:8.33333333333%;
}

.vertical-center {
    margin: 0 auto;
}

/* Style Information
============================================================================= */

.callout {
    padding-bottom: 100px;
    background: none;
    margin-top: 0px;
    height: 1700px;
}

    .callout .poster-line {
        width: 100%;
        height: 183px;
        min-width: 1010px;
        background: none;
        position: relative;
        float: left;
        
    }

        .poster-line .poster-line-text {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .poster-line img {
            position: absolute;
            z-index: 0;
        }

            .poster-line .hw-wordmark {
                left: -94px;
                top: 0px;
            }

            .hw-one {
                top: 145px;
                left: 110px;
            }

            .hw-two {
                top: 20px;
                left: 140px;
            }

            .hw-three {
                top: 20px;
                left: 40px;
            }

            .hw-four {
                top: -90px;
                left: 550px;
            }

            .hw-five {
                top: 0px;
                left: 520px;
            }

            .hw-six {
                top: 20px;
                left: 160px;
            }

.content {
    height: 1000px;
}

.content div {
    float: left;
}

.item {
    padding: 10px;
}

.item img {
    width: 100%;
    height: auto;
    float: left;
    margin: 0px;
}

.home-label {
    background: none;
    padding: 5px 5px 5px 0px;
}

    .home-label .title {
        padding: 5px 0px 5px 0px;
        width: auto;
    }

    .home-label .title:hover {
        border-bottom: 1px solid black;
    }

.event-details {
    height: 250px;
}


/* Typography
============================================================================= */

.large-callout {
    font-family: "Times New Roman",serif;
    font-style: normal;
    font-weight: 400;
    font-size: 10em;
    text-align: left;
    color: #373737;
    letter-spacing: -0.03em;
}

.large-section-header {
    font-family: "Times New Roman",serif;
    font-style: normal;
    font-weight: 400;
    font-size: 10em;
    text-align: center;
    color: #373737;
    letter-spacing: -0.03em;
}

.link-text {
    font-family: "franklin-gothic-urw",sans-serif;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.6em;
}

.caption {
    font-family: "leitura-news",serif;
    font-style: normal;
    font-weight: 600;
    font-size: 3em;
    line-height: 1.3em;
}

.small-franklin {
    font-family: "franklin-gothic-urw",sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.caption .small-franklin {
    font-size: 0.5em;
}

.edgeCase .subtitle {
    font-family: 'Times New Roman',"leitura-news",serif;
    font-style: normal;
    font-weight: 700;
    font-size: 2em;
    text-align: right;
    padding-top: 70px;
    color: red;
}

/* edge cases and hacks
============================================================================= */

.grid-spacer {
    height: 80px;
    background: none;
}

.special-pull {
    margin-top: -220px;
}


.edgeCase {
    overflow-x:hidden;
    min-width: 100%;
}

.kern-better {
    letter-spacing: -18px;
}

.kern-better span {
    width: 10px;
    height: 10px;
    background: red;
    margin-right: 10px
}

.hashtag {
    font-size: 20px;
    letter-spacing: 0px;
    font-family: "Times New Roman",serif;
    font-style: normal;
    font-weight: 400;
}