/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
========================================================================== */

    html {
        color: #222;
        font-size: 1em;
        line-height: 0;
        height: 100%;
    }
    body {
        width:100%;
    }

    *, *:after, *:before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

    /*
     * Remove text-shadow in selection highlight:
     * https://twitter.com/miketaylr/status/12228805301
     *
     * These selection rule sets have to be separate.
     * Customize the background color to match your design.
     */

    ::-moz-selection {
        background: #1c1c1c;
        color: #ffffff;
        text-shadow: none;
    }

    ::selection {
        background: #1c1c1c;
        color: #ffffff;
        text-shadow: none;
    }

    /*
     * A better looking default horizontal rule
     */

    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc;
        margin: 1em 0;
        padding: 0;
    }

    /*
     * Remove the gap between audio, canvas, iframes,
     * images, videos and the bottom of their containers:
     * https://github.com/h5bp/html5-boilerplate/issues/440
     */

    audio,
    canvas,
    iframe,
    img,
    svg,
    video {
        vertical-align: middle;
    }

    /*
     * Remove default fieldset styles.
     */

    fieldset {
        border: 0;
        margin: 0;
        padding: 0;
    }

    /*
     * Allow only vertical resizing of textareas.
     */

    textarea {
        resize: vertical;
    }

    /* ==========================================================================
       Browser Upgrade Prompt
       ========================================================================== */

    .browserupgrade {
        margin: 0.2em 0;
        background: #ccc;
        color: #000;
        padding: 0.2em 0;
    }

    @font-face {
        font-family: 'latobold';
        src: url('../css/fonts/lato-bold-webfont.eot');
        src: url('../css/fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
             url('../css/fonts/lato-bold-webfont.woff2') format('woff2'),
             url('../css/fonts/lato-bold-webfont.woff') format('woff'),
             url('../css/fonts/lato-bold-webfont.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

/* ==========================================================================
   MORBO
========================================================================== */
    body {font-family: 'latobold';}
    h1,h2,h3,h4,h5,h6,
    ul, li, p {margin:0; padding:0;}
    .img-responsive {max-width: 100%; height: auto;}
    .max-wrap {max-width: 100%; position: relative; overflow:hidden;}


/* ==========================================================================
   BANNER
========================================================================== */
    a:-webkit-any-link {text-decoration: none;} 
    header {position:relative; }  
    header .banner {width: 100%; height:100%; top:0; left:0; right:0; bottom: 0; position: absolute; display:block; text-decoration: none;}

    .banner-01 {background: url('../img/banner/hero-01.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
    .banner-02 {background: url('../img/banner/hero-02.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
    .banner-03 {background: url('../img/banner/hero-03.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
    .banner-04 {background: url('../img/banner/hero-04.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
    .banner-05 {background: url('../img/banner/hero-05.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
    .banner-06 {background: url('../img/banner/hero-06.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
    .banner-07 {background: url('../img/banner/hero-07.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
    .banner-08 {background: url('../img/banner/hero-08.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
    .banner-09 {background: url('../img/banner/hero-09.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
    .banner-10 {background: url('../img/banner/hero-10.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
    .banner-11 {background: url('../img/banner/hero-11.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
    .banner-12 {background: url('../img/banner/hero-12.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
    .banner-13 {background: url('../img/banner/hero-13.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
    .banner-14 {background: url('../img/banner/hero-14.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

    .arrow-prev,
    .arrow-next {width:25px; height:46px; padding:10px; display: inline-block; position: absolute; z-index: 102; top:50%; margin-top: -24px; 
        -webkit-transition: all .2s ease-out;
        -moz-transition: all .2s ease-out;
        -o-transition: all .2s ease-out;
        transition: all .2s ease-out;
        opacity: 0; -khtml-opacity: 0; -moz-opacity: 0;
    }
    .arrow-prev {background: url('../img/icon-arrows.png') 0 0; background-size: 200% auto; display: inline-block; left:-40px;}
    .arrow-next {background: url('../img/icon-arrows.png') -25px 0; background-size: 200% auto; display: inline-block; right:-40px;}

    .arrow-prev.move {left:5%; opacity: .5; -khtml-opacity: .5; -moz-opacity: .5;}
    .arrow-next.move {right: 5%; opacity: .5; -khtml-opacity: .5; -moz-opacity: .5;}

    .arrow-prev:hover {opacity: 1; -khtml-opacity: 1; -moz-opacity: 1;}
    .arrow-next:hover {opacity: 1; -khtml-opacity: 1; -moz-opacity: 1;}


/* ==========================================================================
   LOGO
========================================================================== */
    .logo {width: 200px; top: -152px; left:50%; margin-left: -100px; position: absolute; z-index:102;
        -webkit-transition: all .4s ease-out;
        -moz-transition: all .4s ease-out;
        -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
    }
    .logo {text-decoration: none;font-size:18px; line-height: 18px; letter-spacing:7.4px; color: #ffffff; display: block;}
    .logo img {margin-bottom: 9px;}
    // .logo:after {content: 'Morbophoto'; text-decoration: none; font-size:18px; line-height: 18px; margin-top: 9px; letter-spacing:7px; color: #ffffff; display: none; }

    /*@media (min-width: 768px) { .logo {width: 296px; top: -181px; margin-left: -148px;} }*/
    @media (min-width: 768px) { .logo {width: 196px; top: -146px; margin-left: -98px;} }


/* ==========================================================================
   CONTENT
========================================================================== */
    .content {width: 100%; position: absolute; bottom:0; background: #ffffff; text-transform: uppercase;}
    .bottom {position: relative;}
    .social-bar {width: 100%; height:86px; text-align: center;}
    // h1 {font-size:18px; line-height: 86px; text-transform: uppercase; color: #0099e5; display: inline-block; margin-right:12px;}


/* ==========================================================================
   SOCIAL FEED
========================================================================== */
    .feed {width:100%; height:170px; overflow: hidden;}
    #instafeed {width: 100%;} 
    /*.item {width:170px;}  */
    .item a {    
        width: 170px;
        height: 170px;
        display: block;
        background-size: cover;
    }


/* ==========================================================================
   SOCIAL ICONS
========================================================================== */
    .interact-icons {height:86px; display: inline-block; line-height: 86px;}
    .interact-icons a {width: 41px; height: 41px; border: 2px solid #0099e5; margin-left:-4px; margin-right:14px; background: transparent; display: inline-block; text-align: center; position: relative; top:13px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
        -webkit-transition: all .4s ease-out;
        -moz-transition: all .4s ease-out;
        -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
    }
    @media (min-width: 480px) { .interact-icons a {margin-right:17px;} }
    .interact-icons a:last-child {margin-right:0;}
    .interact-icons a i {width: 41px; height: 41px; line-height: 46px; text-align: center; position: absolute; top:-1px; left:-2px; }
    .interact-icons a i,
    .interact-icons a i:after {
        -webkit-transition: all .4s ease-out;
        -moz-transition: all .4s ease-out;
        -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
        opacity: 1; -khtml-opacity: 1; -moz-opacity: 1;
    }
    .interact-icons a i + i:after {
        -webkit-transition: all .4s ease-out;
        -moz-transition: all .4s ease-out;
        -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
        opacity: 0; -khtml-opacity: 0; -moz-opacity: 0;
    }

    /*facebook*/
    .facebook i:after {content:''; width: 9px; height:19px; background: url('../img/icon-facebook.png') 0 0; background-size: 200% auto; display: inline-block;}
    .facebook i + i:after {content:''; width: 9px; height:19px; background: url('../img/icon-facebook.png') -9px 0; background-size: 200% auto; display: inline-block; }

    /*instagram*/
    .instagram i:after {content:''; width: 21px; height:20px; background: url('../img/icon-instagram.png') 0 0; background-size: 200% auto; display: inline-block;}
    .instagram i + i:after {content:''; width: 21px; height:20px; background: url('../img/icon-instagram.png') -21px 0; background-size: 200% auto; display: inline-block;}

    /*email*/
    .email i:after {content:''; width: 23px; height:20px; background: url('../img/icon-email.png') 0 0; background-size: 200% auto; display: inline-block;}
    .email i + i:after {content:''; width: 23px; height:20px; background: url('../img/icon-email.png') -23px 0; background-size: 200% auto; display: inline-block;}

    .interact-icons a:hover {background: #0099e5;}
    .interact-icons a:hover i:after {opacity: 0; -khtml-opacity: 0; -moz-opacity: 0;}
    .interact-icons a:hover i + i:after {opacity: 1; -khtml-opacity: 1; -moz-opacity: 1;}


/* ==========================================================================
   FOOTER
========================================================================== */
    footer {width:100%; height:auto; background: #ffffff; color: #1c1c1c; text-align: center; padding: 0;}
    @media (min-width: 550px) { footer {text-align: right; height:100px; padding: 0 30px} }

    footer small {width:100%; font-size:11px; line-height: 12px; margin-bottom:15px; display: block; font-weight: normal;}
    @media (min-width: 550px) { footer small {width: auto; line-height: 100px;  margin-bottom:0; float:left;} }

    footer a {font-size:18px; line-height: 66px; padding-bottom:20px; color: #1c1c1c; background: transparent; text-transform: uppercase; text-decoration: none; display: inline-block;
        -webkit-transition: all .4s ease-out;
        -moz-transition: all .4s ease-out;
        -o-transition: all .4s ease-out;
        transition: all .4s ease-out;
    }
    footer a img {width: 146px; height:auto; float:none; position: relative; margin-top: 20px}
    // footer a img.light,
    // footer a img.dark {width: 31px; height:53px; position: absolute; top:0; left:0; display: block;
    //     -webkit-transition: all .4s ease-out;
    //     -moz-transition: all .4s ease-out;
    //     -o-transition: all .4s ease-out;
    //     transition: all .4s ease-out;
    }
    // footer a strong img.dark {opacity: 0; -khtml-opacity: 0; -moz-opacity: 0;}

    @media (min-width: 550px) { 
        // footer a {height: 100px; float:right; padding: 0 30px; line-height: 100px;}
        footer a img {float:right; top: 20px; margin-top: 0}
        // footer a:hover {background: #1c1c1c; color: #ffffff;} 
        // footer a:hover img.dark {opacity: 1; -khtml-opacity: 1; -moz-opacity: 1;} 
    }













/* ==========================================================================
   Helper classes
========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}