@charset 'UTF-8';


/* PORTFOLIO LIST ITEMS */
/* Portfolio items have an absolutely positioned element that shows on hover */

#portfolio-list
{
    /*    placeholder*/
}

#portfolio-list .col-md-6
{
    padding-bottom: 26px;
}

#portfolio-list .portfolio-item
{
    position: relative;

    background-position: center center !important;
    background-size: cover !important;
}

#portfolio-list .portfolio-item .bg
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    width: 100%;

    -webkit-transition: all 1s;
       -moz-transition: all 1s;
         -o-transition: all 1s;
            transition: all 1s;

    opacity: 0;
}

#portfolio-list .portfolio-item:hover .bg
{
    opacity: 100;
}

#portfolio-list .portfolio-item a
{
    position: relative;
    z-index: 2;

    display: block;

    height: 360px;

    text-decoration: none;

    background: transparent;
}

#portfolio-list .portfolio-item a h3
{
    font-size: 1.6em;
    font-weight: 300;

    padding: 0 15px;

    -webkit-transition: all 1s;
       -moz-transition: all 1s;
         -o-transition: all 1s;
            transition: all 1s;
    text-align: center;
    text-transform: uppercase;

    opacity: 0;
    color: #585858;
}

#portfolio-list .portfolio-item a:hover h3
{
    opacity: 100;
}




/* PORTFOLIO LANDING PAGE */

/* Intro Hero */

#intro_hero
{
    position: fixed;
    z-index: 0;
    top: 0;

    width: 100%;
    min-height: 600px;

    background-position: center center;
    background-size: cover;
}

/* Overlay - keep neutral for use elsewhere */
.overlay
{
    position: absolute;
    z-index: 3;
    top: 0;

    width: 100%;

    opacity: 0;
}

.overlay.black
{
    background: #000;
}

.overlay.white
{
    background: #fff;
}


/* Intro Content */

#portfolio-landing #intro
{
    position: relative;
    z-index: 1;

    margin-top: 50%;

    background: transparent;
}

#portfolio-landing #intro #intro-content
{
    padding: 30px;

    background: #fff;
}

#portfolio-landing #intro h1,
#portfolio-landing #intro h2,
#gallery h2
{
    font-size: 24px !important;
    font-weight: 400;

    margin: 0 0 8px;

    text-transform: uppercase;

    color: #888b8d;
}

#portfolio-landing #intro h1
{
    margin-bottom: 20px;
}

/* H2 Headers */
#portfolio-landing #intro h2.reversed,
#portfolio-landing #outro h2.reversed
{
    font-size: 1.1em !important;

    height: 50px;
    margin: 0 0 15px;
    padding: 15px 30px;

    text-transform: none;
    text-transform: uppercase !important;

    color: #fff;
    background: #343434 !important;
}

#portfolio-landing #intro h3
{
    font-size: 1em;
    font-weight: 300;

    margin: 0 0 10px;

    text-transform: uppercase;

    color: #888b8d;
}

#portfolio-landing #intro p
{
    font-size: .75em;
}

#portfolio-landing #intro #credits
{
    margin: 30px 0;
    padding: 15px 30px;

    background: #e6e6e6;
}

#portfolio-landing #intro #credits p
{
    /* font-size: .75em; */

    margin: 0 0 5px;

    color: #424242;
}

#portfolio-landing #intro #credits p strong
{
    font-weight: 600;
}


#portfolio-landing #intro .post-img
{
    position: relative;

    padding: 3%;
}

#portfolio-landing #intro .vimeo-thumb
{
    position: absolute;
    bottom: 2%;

    width: 94%;
    height: 40% !important;
    padding: 3% 5% 0;

    background: #fff;
}

#portfolio-landing #intro .vimeo-thumb a
{
    position: relative;

    display: block;

    height: 77%;

    background-size: cover;
}

#portfolio-landing #intro .vimeo-thumb a i
{
    font-size: 3.5em;

    -webkit-transition: all 1s;
       -moz-transition: all 1s;
         -o-transition: all 1s;
            transition: all 1s;

    color: #fff;
}

#portfolio-landing #intro .vimeo-thumb a:hover i
{
    text-decoration: none;

    color: #666;
}

#portfolio-landing #intro .vimeo-thumb h3
{
    font-size: .9em;
    font-weight: 500;

    margin: 0 0 12px;

    text-transform: none;

    color: #424242;
}


/* Portfolio Gallery */

#portfolio-landing #gallery
{
    position: relative;
    z-index: 2;

    margin-top: 120px;
    padding: 30px 15px 60px;

    background: #fff;
}

#portfolio-landing #gallery a
{
    display: block;
}

#portfolio-landing #gallery a:hover
{
    text-decoration: none;
}


/* Outro */

#portfolio-landing #outro
{
    position: relative;

    background-position: center center;
    background-size: cover;
}

#portfolio-landing #outro .parallax-window
{
    min-height: 700px !important;
}

#portfolio-landing #outro h2
{
    font-size: 1.2em;

    display: inline-block;

    margin: 90px 0 15px 90px;
    padding: 15px 30px;

    color: #989b95;
    background: url(/core/structure/alpha_tiles/FFFFFF_90.png);
}

#portfolio-landing #outro .content
{
    margin: 0 0 240px 90px;
    padding: 30px;

    background: url(/core/structure/alpha_tiles/FFFFFF_80.png);
}

#portfolio-landing #outro .content p
{
    margin: 0;
}




/* Parallax Effect */

section.parallax
{
    margin: 0;
    padding: 0;

    background: transparent;
}

.parallax-window
{
    position: relative;

    width: 100% !important;
    min-height: 800px;
    margin: 0 !important;

    background: transparent;
}


/* Background Image Zoom Effect */

#portfolio-landing #gallery a,
.parent
{
    height: 400px;
    margin-bottom: 30px;
}

.parent
{
    position: relative;

    display: inline-block;
    float: left;
    overflow: hidden;

    width: 100%;

    cursor: pointer;
}

.child
{
    width: 100%;
    height: 100%;

    -webkit-transition: all 1s;
       -moz-transition: all 1s;
         -o-transition: all 1s;
            transition: all 1s;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.parent:hover .child,
.parent:focus .child
{
    -webkit-transform: scale(1.15);
       -moz-transform: scale(1.15);
        -ms-transform: scale(1.15);
         -o-transform: scale(1.15);
            transform: scale(1.15);
}



@media (max-width: 767px)
{
    section#layout
    {
        padding: 0 !important;
    }


    /* Portfolio List */

    #portfolio-list
    {
        margin-top: 60px;
    }

    #portfolio-list .portfolio-item .bg
    {
        opacity: 100;
    }

    #portfolio-list .portfolio-item a
    {
        height: 260px;
    }

    #portfolio-list .portfolio-item a h3
    {
        font-size: 1.6em;

        opacity: 1;
        color: #000;
        text-shadow: none;
    }

    /* Intro Hero */

    #portfolio-landing #intro_hero
    {
        top: 80px !important;
    }


    /* Intro */

    #portfolio-landing #intro .container
    {
        padding: 10px !important;
    }

    #portfolio-landing #intro #intro-content
    {
        margin-bottom: 45px;
        padding: 15px;
    }

    /*    #portfolio-landing #intro .content
    {
        margin-bottom: 30px;
    }*/

    #portfolio-landing #intro h2.reversed,
    #portfolio-landing #outro h2.reversed
    {
        font-size: 1em !important;
    }


    /* Vimeo Thumb */

    #portfolio-landing #intro .vimeo-thumb
    {
        position: relative;
        bottom: auto;

        width: 100%;
        height: auto;
        margin: 30px 0 45px;
        padding: 0;
    }

    #portfolio-landing #intro .vimeo-thumb a
    {
        height: 160px;
    }

    #portfolio-landing #intro .vimeo-thumb h3
    {
        font-size: 1.1em;
    }


    /* Credits */

    #portfolio-landing #intro #credits
    {
        margin-bottom: 0 !important;
    }

    #portfolio-landing #intro #credits p
    {
        font-size: .95em;
        line-height: 1.3em;

        margin: 0 0 10px;
    }


    /* Outro */

    #portfolio-landing #outro
    {
        margin-top: 60px;
    }


    /* Gallery */

    #portfolio-landing #gallery
    {
        margin-top: 0;
    }

    #portfolio-landing #gallery a,
    .parent
    {
        /*        height: 550px;*/
    }

    #portfolio-landing #gallery .row .col
    {
        position: relative;
        /*        height: 550px;*/

        margin-bottom: 25px !important;

        border-right: none !important;
        border-left: none !important;
    }

    #portfolio-landing #gallery .content p
    {
        font-size: 1.2em;
    }
}