html,
body {
    direction: ltr;
}

body, html, p, label, h1, h2, h3, h4, h5, span, a {
    font-family: 'Libre Franklin', sans-serif !important;
}

.big-title {
    font-family: 'Special Elite', cursive !important;
}

.bg__parallax {
    margin-right: -15px !important;
}

.float-by-lang {
    float: left;
}

    .float-by-lang:nth-child(2) {
        padding-left: 15px;
    }


@media(max-width:1023px) {
    .slider-text-block {
        width: 100%;
        height: auto;
        transition: opacity 2s ease;
        -webkit-transition: opacity 2s ease;
        -moz-transition: opacity 2s ease;
        -o-transition: opacity 2s ease;
        opacity: 1;
        margin-top: 0 !important;
        top: 0;
    }
}

@media(max-width: 1070px) {
    .navbar-nav > li {
        opacity: 0;
    }

    .navbar-nav {
        display: none;
    }

    .navbar-right {
        opacity: 0;
    }
}

@media(max-device-width: 1070px) {
    .navbar-nav > li {
        opacity: 0;
    }

    .navbar-nav {
        display: none;
    }

    .collapse {
        height: 100vh;
        opacity: 0;
    }

    .navbar-right {
        opacity: 0;
    }
}

@media (max-width:900px) {
    .flex {
        display: flex !important;
    }

    .language {
        width: 100%;
        text-align: center;
    }

    .display {
        display: inline-table !important;
    }

    .no-padding-mobile {
        padding: 0 !important;
    }

    .big {
        font-size: 3em !important;
    }

    [class*="bg__"] {
        background-size: 100% 100% !important;
    }
}

/*@media screen and (max-device-width: 1110px) {
    .slider-text {
        margin-top: 0;
    }

    .slider-text-block {
        position: relative;
        width: 100%;
        transition: opacity 2s ease;
        -webkit-transition: opacity 2s ease;
        -moz-transition: opacity 2s ease;
        -o-transition: opacity 2s ease;
        opacity: 1;
        margin-top: 0 !important;
        top: 0;
    }
}*/

/*@media (max-width:1024px) {
    .slider-text {
        margin-top: 0 !important;
    }

    .slider-text-block {
        position: relative;
    }
}*/

@media (min-device-width:1024px) and (max-device-width:1366px) {
    .slider-text-block {
        position: absolute !important;
        top: 200px;
    }

    .slider-text {
        margin-top: 0 !important;
    }
}

.member {
    margin-top: 30px;
}

@media(max-width: 900px) {
    .language {
        padding-left: 0 !important;
    }
}

@media (min-width: 1024px) and (max-width:1200px) {
    .slider-row {
        margin-left: 15px !important;
    }
}

@media (min-device-width: 1024px) and (max-device-width:1200px) {
    .slider-row {
        margin-left: 15px !important;
    }
}

@media screen and (min-device-width: 1367px) {
    .slider-text {
        padding-right: 40px !important;
        /*font-size: 1.3em !important;*/
    }
}

@media (max-device-width: 1366px) {
    .slider-text {
        padding-right: 40px !important;
        /*font-size: 1.4em !important;*/
    }

    .custom-container {
        width: 100% !important;
        padding: 15px !important;
    }

    .col-lg-3.col-lg-6.col-sm-6.col-xs-12.member {
        margin-bottom: 65px;
    }

    .contact-details.show-mobile {
        height: 60px;
        opacity: 1;
    }
}

@media (max-width: 1366px) {
    .slider-text {
        padding-right: 40px !important;
    }

    .custom-container {
        width: 100% !important;
        padding: 15px !important;
    }

    .col-lg-3.col-lg-6.col-sm-6.col-xs-12.member {
        margin-bottom: 65px;
    }

    .contact-details.show-mobile {
        height: 60px;
        opacity: 1;
    }
}

.delayed {
    padding-top: 25px;
}

@media screen and (min-device-width: 1200px) {
    .vertical-align {
        margin: 0;
        padding: 0;
    }

    .member {
        margin-bottom: 65px;
    }
}

ul.custom-nav {
    max-width: 100%;
    list-style-type: none;
    float: right;
    padding-right: 15px;

    /*float: left;
    padding-left: 0;*/
}

    ul.custom-nav li:last-child {
        padding-right: 0 !important;
    }

@media(max-width:768px) {
    ul.custom-nav {
        float: left !important;
        padding-right: 0;
        padding-left: 0;
    }

    #map-canvas {
        height: 200px !important;
    }

    .footer-items > ul > li {
        margin-left: 0 !important;
    }

    .hide-on-mobile {
        display: none;
    }

    .vertical-align {
        display: block;
        align-items: center;
        height: 100%;
    }

    .custom-container {
        width: 100% !important;
        text-align: left;
        padding-right: 0;
        padding-left: 0;
        padding-top: 25px;
    }

        .custom-container > div > .vertical-align > div:first-child {
            padding: 15px;
        }

    .navbar-right,
    .navbar-left {
        display: none !important;
    }

    .footer-copy {
        text-align: center !important;
        float: none !important;
    }
}

@media screen and (max-device-width:768px) {
    .footer-copy {
        text-align: center !important;
        float: none !important;
    }

    #map-canvas {
        height: 200px !important;
    }

    .footer-items > ul > li {
        margin-left: 0 !important;
    }

    .custom-container {
        width: 100%;
        text-align: left;
        padding-right: 0;
        padding-left: 0;
    }

    .vertical-align {
        display: block;
        align-items: center;
        height: 100%;
    }

    .slider-text {
        margin-top: 0;
    }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1000px) {
    .slider-text {
        padding-right: 60px;
        background-color: rgba(255,255,255, .8);
        font-size: 1.1em;
        color: #000000;
        margin-top: 100px;
    }

    .slider-text {
        margin-top: 0;
    }
}

.custom-container {
    width: 80%;
    float: right;
    direction: ltr;
    text-align: left;
}

.loader {
    position: fixed;
    width: 100%;
    min-height: 100%;
    /*height: auto;
    text-align: center;
    background-color: #373737;
    z-index: 110;
     left: 0;*/
}

.inner-loader {
    background-image: url('../img/loader.gif');
    width: 64px;
    height: 64px;
    margin: 0 auto;
    top: 45%;
    position: absolute;
    left: 0;
    right: 0;
}

.page-wrapper {
    z-index: 100;
    padding-top: 100px;
}


a + span.underline {
    background-color: #aeda00;
    border-radius: 25px;
    min-width: 0;
    height: 2px;
    display: block;
    max-width: 0;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
}

a:hover + span.underline, a:focus + span.underline {
    min-width: 100% !important;
    max-width: 100% !important;
}

.current > span.underline {
    border-radius: 25px;
    min-width: 100%;
    height: 2px;
    background-color: #aeda00;
    display: block;
}

.logo-item {
    width: 26px;
    height: 20px;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-transition: background-position .2s ease-in;
    -moz-transition: background-position .2s ease-in;
    -o-transition: background-position .2s ease-in;
    transition: background-position .2s ease-in;
    animation: fadeIn;
}

    .logo-item:hover {
        background-position: 0 -20px;
    }

.logo-facebook {
    background-image: url(../img/facebook.png);
}

.logo-twitter {
    background-image: url(../img/twitter.png);
}

.logo-vimeo {
    background-image: url(../img/vimeo.png);
}

.logo-instagram {
        background-image: url(../img/instagram.png);
}



.social nav {
}

    .social nav ul {
        line-height: 0;
    }

        .social nav ul li {
            display: inline-block;
            position: relative;
            margin: 0 4px 8px 0;
            /* background-color: #7e7e7e; */
            border-radius: 100%;
            border: 1px solid #c7c7c7;
            overflow: hidden;
        }

            .social nav ul li a {
                display: block;
                width: 40px;
                height: 40px;
                font-size: 1.5em;
                text-align: center;
                color: #373737;
                -webkit-transition: all 0.2s ease-in-out 0s;
                -moz-transition: all 0.2s ease-in-out 0s;
                -ms-transition: all 0.2s ease-in-out 0s;
                transition: all 0.2s ease-in-out 0s;
                padding-top: 9px;
            }

                .social nav ul li a:hover,
                .social nav ul li a:hover li {
                    color: #aeda00;
                    background-color: #373737;
                }

            .social nav ul li.facebook a {
                background-position: left top;
            }

            .social nav ul li.twitter a {
                background-position: left -40px;
            }

            .social nav ul li.linkedin a {
                background-position: left -80px;
            }

            .social nav ul li.google_plus a {
                background-position: left -120px;
            }

            .social nav ul li.pinterest a {
                background-position: left -160px;
            }

            .social nav ul li.instagram a {
                background-position: left -200px;
            }

            .social nav ul li.flickr a {
                background-position: left -240px;
            }

            .social nav ul li.tumblr a {
                background-position: left -280px;
            }

            .social nav ul li.vimeo a {
                background-position: left -320px;
            }

            .social nav ul li.youtube a {
                background-position: left -360px;
            }

            .social nav ul li.dribble a {
                background-position: left -400px;
            }

            .social nav ul li.skype a {
                background-position: left -440px;
            }

            .social nav ul li.rss a {
                background-position: left -480px;
            }

            .social nav ul li.mail a {
                background-position: left -520px;
            }





.footer > .container > .row {
    margin-bottom: 20px;
}

label {
    font-weight: 300 !important;
}

.text a {
    color: #fff;
}

.text-a:hover {
    color: #fff;
}

.green-title {
    color: #aeda00;
}

.footer-items {
    margin-top: 65px;
}

    .footer-items > ul {
        display: inline-block;
        padding: 0;
    }

        .footer-items > ul > li {
            float: left;
            list-style: none;
        }

            .footer-items > ul > li > a {
                color: #ffffff;
                position: relative;
                display: block;
                margin: 10px 0;
            }

            .footer-items > ul > li:first-child {
                margin-left: 0 !important;
            }

            .footer-items > ul > li > a:first-child {
                padding-left: 0;
            }

            .footer-items > ul > li > a:hover {
                color: #aeda00;
                text-decoration: none;
            }


@media (min-width:1366px) {
    .no-padding {
        padding: 0 !important;
    }
}

.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
    cursor: pointer;
}

    .dropdown.news {
        background-color: #aeda00;
        padding: 20px;
    }

    .dropdown.clients {
        background-color: #fff;
        color: #373737;
    }

.dropdown-content {
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 900;
    max-height: 0;
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    transition: max-height 0.8s;
    width: 100%;
    text-align: center;
    left: 0;
    margin-top: 20px;
    overflow: hidden;
}

    /*.dropdown:hover .dropdown-content {
    max-height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}*/

    .dropdown-content.active {
        max-height: 200px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

.news-archive,
.client-option,
.industry-option,
.grid-filter-option {
    padding-top: 25px;
    /*padding-right: 45px;*/
    text-align: center;
}

    .news-archive:last-child,
    .client-option:last-child,
    .industry-option:last-child,
    .grid-filter-option:last-child {
        padding-bottom: 25px;
    }



.archive-container {
    background-color: #fff;
    height: 100px;
    border-bottom: 2px solid #000;
    padding-top: 25px;
}


/*************************** NEWS ***************************************/
.news-item-block {
    background-color: #fff;
    border-bottom: 2px solid #000;
    padding-bottom: 85px;
    padding-top: 40px;
    color: #000;
    z-index: 200;
    -webkit-transition: 0.3s background ease, 0.3s color ease;
    -moz-transition: 0.3s background ease, 0.3s color ease;
    transition: 0.3s background ease, 0.3s color ease;
    cursor: pointer;
}

    .news-item-block.is-active {
        position: relative;
        background-color: #222 !important;
        background-image: url(../img/texture.black.jpg) !important;
        margin-bottom: 0;
        z-index: 400;
        color: #fff;
    }

/*.news-item > .container > .row .col-lg-6.col-xs-12 {
    cursor: pointer;
}*/


.close-item {
    position: absolute;
    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    top: 15px;
    right: 40px;
    background-color: #aeda00;
    border-radius: 100%;
    border: none;
    color: #373737;
    outline: none !important;
    outline-color: transparent;
    outline-style: unset;
    font-size: 14px;
    height: 48px;
    width: 48px;
}


    .close-item .x {
        width: 100%;
        text-align: center;
        vertical-align: middle;
        margin-top: 14px;
        font-weight: 900 !important;
    }


    .close-item:hover {
        background-color: #373737;
        color: #aeda00;
    }

        .close-item:hover .close.hairline::before,
        .close-item:hover .close.hairline::after {
            background-color: #aeda00;
        }

#progressbar {
    width: 0;
    height: 2px;
    -webkit-transition: width 2s;
    -moz-transition: width 2s;
    -o-transition: width 2s;
    transition: width 2s;
}

    #progressbar.complete {
        width: 100%;
        background-color: #aeda00;
        height: 3px;
        position: fixed !important;
        top: 0;
        background-color: #aeda00;
        z-index: 9999;
    }

.load-next-news {
    width: 100%;
    min-height: 0;
    overflow: hidden;
    -webkit-transition: min-height 0.8s;
    -moz-transition: min-height 0.8s;
    transition: min-height 0.8s;
}

    .load-next-news .loader-icon {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    .load-next-news.active {
        display: table;
        min-height: 64px;
        position: relative;
    }

.loader-icon.inner-loader {
    display: none;
}


/************************************ Home page featured projects *********************************************/

.project-container {
    cursor: pointer;
    height: 100%;
    display: table;
    min-height: 485px;
    width: 100%;
    margin-top: 24px;
    position: relative;
}

    .project-container:hover > .project-content > .project-bottom-container:first-child {
        padding-bottom: 40px;
    }

    .project-container:hover > .project-content > .project-bottom-container > .project-bottom-wrapper > .project-intro-text > .project-intro-url {
        color: #a0a0a0;
    }

.project-items {
    margin-left: -15px;
    margin-right: -15px;
}

.project-thumb-container {
    height: 80%;
}

.project-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #fff;
}

.project-bottom-wrapper {
    width: 100%;
    display: table;
}

.item-name {
    display: table-row;
    float: none;
    color: #373737;
    font-size: 1.3em;
}

.project-bottom-container {
    background-color: #fff;
    display: table;
    width: 100%;
    transition: padding .3s ease-in-out;
    -moz-transition: padding .3s ease-in-out;
    -webkit-transition: padding .3s ease-in-out;
    -o-transition: padding .3s ease-in-out;
}

    .project-bottom-container:first-child {
        padding: 25px 0px 0px 25px;
    }

    .project-bottom-container:last-child {
        padding: 0 25px 25px 25px;
    }


.ipad-nav {
    opacity: 1;
    display: inline-block;
}

.project-thumb-container,
.project-bottom-container {
    display: block;
}

.project-intro-text {
    color: #373737;
    display: table-cell;
    width: 90%;
}

.project-intro-url {
    margin-top: 20px;
    color: #373737;
}

    .project-intro-url a {
        color: #373737;
        /*font-size: 2em;*/
    }

.read-more-arrow {
    display: table-cell;
    width: 10%;
    color: #000;
    vertical-align: bottom;
    text-align: right;
}

section.homepage {
    background-color: #373737;
    height: 800px;
    display: table;
    padding-top: 80px;
    padding-bottom: 24px;
}

/************************************ ABOUT PAGE *********************************************/
.background-image {
    width: 100%;
    min-height: 395px !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.faza-members-container {
    min-height: 0 !important;
    padding-top: 120px;
    padding-bottom: 120px;
}


/*********************************** Project Item page **************************************/
/*#parallax {
    overflow: hidden;
    width: 100%;
    height: 50vh;
    position: relative;
    clear: both;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100%;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/image/1.jpg',sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/image/1.jpg',sizingMethod='scale')";
}*/

/*.parallax [class*="bg__"] {
    position: relative;
    height: 50vh;
    text-indent: -9999px;
    background-attachment: fixed;
    background-position: top center;
    background-size: cover;
}*/


/******************************** WORK PAGE *************************************************/
.filter-container {
    display: none;
    background-color: #fff;
    width: 100%;
}

.text-box {
    -webkit-appearance: none;
    color: #373737;
    width: 100%;
    border: 0;
    outline: none;
    height: 50px;
}

    .text-box:first-child {
        padding-left: 15px;
        padding-right: 15px;
    }

.project-filter {
    -webkit-transition: height 0.4s;
    -moz-transition: height 0.4s;
    transition: height 0.4s;
}

/*.project-filter.active {
        display: none;
    }*/

@media(min-width: 768px) and (min-device-width: 768px) {
    .project-filter.active {
        height: 100px !important;
        display: block !important;
    }
}

/*a {
    font-size: .8vw;
}*/

.archive-projects {
    display: none;
}

.project-type-selector {
    padding: 0;
    margin-bottom: 0;
    width: 100%;
}

    .project-type-selector li {
        float: left;
        padding-left: 15px;
        padding-right: 15px;
    }

        .project-type-selector li a,
        .project-type-selector div a {
            text-decoration: none;
            color: #373737;
        }

#container {
    list-style: none;
}

#placeHolder {
    display: none;
}

/********************************* CLIENT PAGE **********************************************/
.relativeToWidth {
    position: static;
}

img.relativeToWidth {
    width: 100%;
    height: 100%;
}

h2 {
    color: #fff;
    font-size: 3em;
}

.big {
    font-size: 5em;
}

.video-container {
    position: absolute;
    background-color: #fff;
    height: 100px;
    left: 20px;
    z-index: 900;
    bottom: -40px;
    border: none;
    padding: 0;
    min-width: 300px;
}

.video-cell {
    display: table-cell;
    height: 100%;
    color: #000;
}

    .video-cell div {
        vertical-align: middle;
    }

    .video-cell:last-child {
        text-align: right;
    }

.vcenter {
    vertical-align: middle;
    float: none !important;
}


/************************************ Contact ****************************************/
.map-container {
    position: relative;
    overflow: hidden;
}

#map-canvas {
    width: 100%;
    height: 400px;
    background-color: #CCC;
}



.navbar-toggle .icon-bar:nth-of-type(2) {
    top: 0;
}

.navbar-toggle .icon-bar:nth-of-type(3) {
    top: 0;
}

.navbar-toggle .icon-bar {
    position: relative;
    transition: all 500ms ease-in-out;
}

.navbar-toggle.active .icon-bar:nth-of-type(1) {
    top: 6px;
    transform: rotate(45deg);
    opacity: 0;
}

.navbar-toggle.active .icon-bar:nth-of-type(2) {
    background-color: transparent;
    transform: rotate(45deg);
    top: 1px;
}

.navbar-toggle.active .icon-bar:nth-of-type(3) {
    top: -6px;
    transform: rotate(-45deg);
}

.navbar-toggle.active .icon-bar:nth-child(4) {
    opacity: 0;
}

@media(max-width:768px) {
    .dropdown.clients > .view-by-cell:first-child {
        text-align: left;
    }

    .dropdown.clients > .view-by-cell:nth-child(2) {
        text-align: right;
    }
}

@media(min-width:1366px) {
    .client-text {
        padding: 10vh;
    }

    .big-title {
        font-size: 4.5em;
        line-height: 1em;
    }
}

@media (min-device-width:1366px) {
    .big-title {
        font-size: 4.5em;
        line-height: 1em;
        font-weight: 100;
    }
}
