@import 'functions.less';
@import 'icons.less';

@colorSemiGray: #868585;
@colorDarkGray: #262626;
@colorWhite: #ffffff;

@defaultPadding: 3px;
@defaultPaddingLeft: 8.23%;
@defaultMaxWidth: 1300px;

@rwd960: ~'only screen and (max-width: 960px)';
@rwd767: ~'only screen and (max-width: 767px)';
@rwd480: ~'only screen and (max-width: 480px)';

@rwd767landscape: ~'only screen and (max-width: 767px) and (orientation: landscape)';

body {
    margin: 0px;
    padding-top: 0 !important;
    max-width: 100%;
    font: 100%/100% HLR, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
    overflow-y: scroll;

    &.project-body {
        background: @colorDarkGray;
    }

    &.no-transition * {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -ms-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
    }
}

.mobile {
    display: none !important;
}

.more {
    color: #cfcfcf;
    display: inline-block;
    font: 100% EHR;
    margin: 1em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;

    span {
        background: #f0f0f0;
        display: block;
        padding: .7em 1.4em;
    }

    &:hover {
        text-decoration: none;
    }
}

img {
    display: block;
    height: auto;
    width: 100%;
}

header {
    background-color: @colorWhite;
    left: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    position: fixed !important;
    right: 0;
    top: 15px;
    z-index: 10000;

    &.section, 
    &.section.indent {        
        .section-content {
            & > * {
                padding-top: 5px;
                padding-bottom: 5px;
                vertical-align: middle;

                &:last-child {
                    text-align: right;            
                }

                & * {                
                    display: inline-block;
                    vertical-align: middle;
                }

                &.logo:first-child:not(:last-child) {
                    padding-left: 5px;
                    width: 15.00%;

                    * {
                        max-width: 200px;
                    }
                }

                &.navigation {
                    .nav {
                        &-mobile {
                            cursor: pointer;
                            display: none;
                            height: 30px;
                            position: absolute;
                            width: 30px;
                            z-index: 100;

                            &-checkbox {
                                display: none;
                            }

                            & > span {
                                background-color: @colorDarkGray;
                                display: inline-block;
                                height: 3px;
                                left: 0;
                                position: absolute;
                                right: 0;
                                top: 14px;
                                .transition();

                                &:before, 
                                    &:after {
                                    background-color: @colorDarkGray;
                                    content: '';
                                    height: 100%;
                                    left: 0;
                                    position: absolute;
                                    right: 0;
                                    .transition();
                                }

                                &:before {
                                    bottom: 300%;
                                }

                                &:after {
                                    top: 300%;
                                }
                            }
                        }
                    }
                }

                nav {
                    ul {
                        white-space: nowrap;

                        li {
                            .transition();

                            a {
                                color: #000000;
                                font: 110% EHR;
                                margin: 0 15px;
                                padding: 2px 6px 1px 6px;
                                text-decoration: none;
                                text-transform: uppercase;
                                .transition();

                                &:hover, 
                                    &.active,
                                    &.active:hover {
                                    background: #000;
                                    color: #fff;
                                    text-decoration: none;
                                }
                            }

                            &.work {
                                margin-right: 60px;
                            }
                        }
                    }
                }
            }
        }
    }

    .peaceicon,
    .peaceicon:hover {        
        background: transparent url('../images/peace.png') no-repeat center center !important;
        background-size: 100% !important;
        color: transparent !important;
        height: 30px;
        padding: 0 !important;
        text-indent: -9999em;
        transition: .3s;
        width: 30px;
    }
}

footer {
    background-color: @colorWhite;
    font-size: 13px;
    margin-bottom: 2em;
    margin-top: 2em;
    padding-bottom: 20px;
    padding-top: 20px;

    .section-content {
        & > * {
            color: @colorSemiGray;
            vertical-align: middle;

            &:last-child:not(:first-child) {
                text-align: right;       
            }

            * {
                display: inline-block;
                vertical-align: middle;
                white-space: nowrap;
            }

            a {
                color: @colorSemiGray;
            }
        }
    }

    .copy {
        img {
            margin-top: 4px;
            margin-left: 5px;
            margin-right: 5px;
            width: auto;
        }
    }

    .rest {
        .email {
            &-label {
                color: #00b6f1;
                margin-right: 5px;
            }
        }

        .socials {
            margin-left: 60px;

            &-label {
                color: #00b6f1;
                margin-right: 5px;
            }

            &-icons {
                a {
                    background-color: white;
                    height: 20px;
                    margin-left: 5px;
                    position: relative;
                    width: 20px;
                    .transition();

                    &:before {
                        color: #868485;
                        display: block;
                        font-size: 18px;
                        height: 100%;
                        line-height: 19px;
                        font-family: 'icons';
                        text-align: center;
                        width: 100%;
                    }

                    span {
                        display: none;
                    }
                }
            }
        }
    }
}

.section {
    display: block;
    max-width: @defaultMaxWidth;
    position: relative;

    *, *:before, *:after {
        box-sizing: border-box;
        zoom: 1;
    }

    &-wrapper {        
        max-width: @defaultMaxWidth;
    }

    &-content {
        display: table;
        table-layout: fixed;
        width: 100%;

        & > * {
            display: table-cell;
            vertical-align: top;

            &:first-child {
                padding-left: 0;
            }

            &:first-child:not(:last-child) {
                /*width: 54.2%;*/

                &.text {
                    padding-right: 3%;
                }
            }

            &:last-child:not(:first-child) {
                /*width: 45.8%;*/

                &.text {
                    padding-left: 3%;
                }
            }

            .gmap {
                display: block;
                height: 300px;
                width: 100%;
            }

            &.images {
                padding: @defaultPadding;

                &:first-child {
                    padding-left: 0;

                    @media @rwd960 {
                        padding-left: @defaultPadding;
                    }
                }
            }

            &.text {
                font-size: 1em;
                line-height: 1.3em;
                padding: @defaultPadding;

                h2 {
                    color: #000000;
                    font: 125% 'EHR';
                    margin-bottom: 1em;
                    margin-top: 1em;
                    text-transform: uppercase;
                }

                h3 {
                    font-size: 2.2em;
                    font-weight: bold;
                    line-height: 1em;
                }

                p {
                    display: block;
                    margin-bottom: .5em;

                    &.occupation {
                        color: #969696;
                        margin: .8em 0 2em 0;
                    }
                }
            }

            &.contact {
                font-size: 1.1em;
                padding-top: 3em;

                ul {
                    li {
                        margin-bottom: 1em;

                        > * {
                            display: block;
                        }

                        h3 {
                            font-size: 1em;
                            font-weight: bold;
                        }
                    }
                }

                b {
                    font-weight: bold;
                    text-transform: uppercase;
                }

                .buttons {
                    margin: 25px 0 40px;
                    padding-right: 25px;
                    text-align: right;

                    .adressbook {
                        background: url(../images/ico-localization.png) left center no-repeat;
                        display: inline-block;
                        font: 13px EHR;
                        height: 32px;
                        padding-left: 40px;
                        padding-top: 18px;
                        text-decoration: none;
                        text-transform: uppercase;
                    }
                }
            }
        }
    }

    .box {
        &-list,
        &-slider {
            &-content {
                overflow: hidden;
                position: relative;
                text-align: center;

                &:before,
                    &:after {
                    background-color: @colorWhite;
                    bottom: 0;
                    content: '';
                    position: absolute;
                    top: 0;
                    width: calc(@defaultPadding + 1px);
                    z-index: 5;
                }

                &:before {
                    left: 0;
                }

                &:after {
                    right: 0;
                }

                ul {
                    overflow: hidden;
                    text-align: left;

                    li {
                        background: transparent url(../images/layout-work-thumb-loader.gif) no-repeat center center;
                        float: left;
                        padding: @defaultPadding;
                        position: relative;
                        width: 33.3333%;

                        > * {
                            display: block;
                            overflow: hidden;
                            position: relative;

                            .overlay {
                                background-color: rgba(0, 0, 0, .8);
                                bottom: 0;
                                color: white;
                                display: block;
                                position: absolute;
                                right: 100%;
                                top: 0;
                                width: 100%;
                                .transition();

                                h3 {
                                    color: white;
                                    font: 170% EHR;
                                    left: -100%;
                                    line-height: 90%;
                                    position: absolute;
                                    text-transform: uppercase;
                                    top: 12%;
                                    width: 80%;
                                    .transition();
                                }
                            }

                            &:hover, &.hover {
                                .overlay {
                                    right: 0;

                                    h3 {
                                        left: @defaultPaddingLeft;
                                    }
                                }
                            }
                        }

                        iframe {
                            background-color: @colorDarkGray;
                            height: 100%;
                            left: 0;
                            position: absolute;
                            top: 0;
                            width: 100%;
                        }

                        &.video {
                            cursor: pointer;
                        }

                        .play {
                            background: transparent url(../images/layout-play.png) no-repeat center top;
                            cursor: pointer;
                            height: 282px;
                            left: 50%;
                            position: absolute;
                            top: 50%;
                            width: 283px;
                            z-index: 3;
                            .transform(translate(-50%, -50%));

                            &:hover {
                                background-position: center bottom;
                            }
                        }

                        @media @rwd767 {
                            width: 50%;
                        }

                        @media @rwd480 {
                            width: 100%;
                        }
                    }
                }
            }
        }

        &-slider {
            &-content {
                .prev,
                .next {
                    background-color: transparent;
                    background-image: url(../images/layout-slider-navi.png);
                    background-repeat: no-repeat;
                    display: none;
                    cursor: pointer;
                    height: 30px;
                    margin-top: -15px;
                    position: absolute;
                    top: 50%;
                    width: 30px;
                    z-index: 2;
                }

                .prev {
                    background-position: right top;
                    left: @defaultPadding;
                }

                .next {
                    background-position: left top;
                    right: @defaultPadding;
                }

                ul {
                    .transition();

                    li {
                        clear: none;
                        width: 25%;

                        @media @rwd767 {
                            width: 50%;
                        }

                        @media @rwd480 {
                            width: 100%;
                        }
                    }
                }
            }

            &.full {
                .box-slider-content {
                    &:before,
                        &:after {
                        display: none;
                    }

                    ul {
                        li {
                            max-width: @defaultMaxWidth;
                            opacity: .3;
                            padding: 0;
                            padding-right: @defaultPadding;
                            width: 75%;
                            .transition();

                            @media @rwd767 {
                                width: 100%;
                            }

                            &.active {
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }

        &-slideshow {
            &-content {
                overflow: hidden;
                position: relative;

                img {
                    bottom: 0;
                    display: block;
                    height: auto;
                    width: 100%;

                    &:not(:first-child) {
                        display: none;
                        left: 0;
                        position: absolute;
                        top: 0;
                    }
                }
            }
        }
    }

    &.indent {
        .section-wrapper {
            padding-left: @defaultPaddingLeft;
        }

        .section-content {
            & > * {
                /*
                &:first-child:not(:last-child),
                    &:last-child:not(:first-child) {
                    width: 50%;                    
                }
                */

                &.images, 
                &.text {
                    &:first-child {
                        padding-left: @defaultPadding;
                    }
                }
            }
        }
    }

    &#box {
        &-lead {
            color: #868585;
            line-height: 120%;
            margin-bottom: 40px;
            margin-top: 10px;
        }

        &-work {
            &-header {
                .section-content {
                    display: table !important;
                    table-layout: unset;
                    width: 100% !important;

                    & > * {
                        display: table-cell !important;
                        padding-bottom: 20px;
                        padding-top: 20px;
                        vertical-align: middle !important;

                        &:last-child {
                            text-align: right;
                        }
                    }
                }

                h3 {
                    color: @colorWhite;
                    font: 150% EHR;
                    text-transform: uppercase;
                }

                h1 {
                    display: inline-block;

                    img {
                        height: 100%;
                        max-height: 40px;
                        max-width: 190px;
                        width: auto;

                        @media @rwd767 {
                            max-height: 30px;
                        }
                    }
                }
            }

            &-slider {
                max-width: none;

                .section-wrapper {
                    max-width: none;
                }

                .box-slider-content {
                    .prev,
                    .next {
                        background-position: center center;
                        height: 80%;
                        width: 100px;
                        top: 10%;
                    }

                    .prev {
                        background-image: url(../images/prev.png);
                        left: 0;
                    }

                    .next {
                        background-image: url(../images/next.png);
                        right: 0;
                    }
                }
            }

            &-info {
                background-color: @colorDarkGray;
                color: #868585;
                font: 80% HLR;
                padding: 30px 0;

                .section-content {
                    &:first-child {
                        display: table !important;
                        table-layout: unset;
                        width: 100% !important;

                        & > * {
                            display: table-cell !important;
                            vertical-align: middle !important;

                            &:last-child {
                                text-align: right;
                            }

                            * {
                                display: inline-block;
                                vertical-align: middle;
                            }
                        }
                    }

                    &:not(:first-child) {
                        margin-top: 30px;
                    }
                }

                .text {
                    line-height: 150%;
                    padding-left: @defaultPadding;
                    padding-right: 3%;
                }

                h4 {
                    color: @colorWhite;
                    font: 120% EHR;
                    margin-bottom: 15px;
                    text-transform: uppercase;
                }

                p {
                    margin-top: 10px;

                    b {
                        color: @colorWhite;
                        font-weight: normal;
                    }
                }

                .socials-label {
                    color: #00b6f1;
                    font-size: 13px;
                    margin: 0;
                    padding-right: 5px;
                    white-space: nowrap;
                }

                ul.socials {
                    margin-right: 30px;
                    text-align: right;

                    li {
                        cursor: pointer;
                        height: 20px;
                        margin-right: 5px;
                        width: 20px;
                        position: relative;
                        .transition();

                        &:before {
                            color: @colorSemiGray;
                            display: block;
                            font-family: 'icons';
                            font-size: 18px;
                            height: 20px;
                            text-align: center;
                            width: 20px;
                        }

                        span {
                            display: none !important;
                        }
                    }
                }

                .counters {
                    font-family: HLR;
                    text-transform: none;

                    .count {
                        color: @colorWhite;
                        display: none;
                        font-size: 90%;
                        margin-right: 2px;
                        padding: 0 10px;

                        .current {
                            display: none;
                        }
                    }

                    .icon {
                        background: transparent url(../images/layout-icons.png) no-repeat;
                        cursor: pointer;
                        display: none;
                        height: 16px;
                        margin-right: 2px;
                        width: 20px;

                        &.photo {
                            background-position: 0 bottom;
                        }

                        &.video {
                            background-position: -23px bottom;
                            margin-left: 2px;
                        }

                        div[data-rel="type-image"] {
                            display: none;
                        }

                        div[data-rel="type-video"] {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}

body {
    #main {
        padding-top: 110px;
    }

    &.in-dani {
        #main {
            padding-top: 150px;
        }
    }

    &.in-work,
    &.project-body {
        footer {
            bottom: 0;
            left: 0;
            margin: 0;
            position: fixed;
            right: auto;
            z-index: 10;

            @media @rwd767 {
                right: 0;
            }
        }
    }

    &.in-work {
        #main {
            padding-bottom: 100px;
            padding-top: 200px;

            @media @rwd767 {
                padding-top: 110px;
            }
        }

        .section#box-lead {
            background-color: #ffffff;
            left: 0;
            margin: 0;
            padding-top: 20px;
            padding-bottom: 20px;
            position: fixed;
            right: 0;
            top: 95px;
            z-index: 2;

            @media @rwd767 {
                position: static;
            }
        }
    } 

    &.project-body {
        @media @rwd767 {
            #main {
                padding-top: 90px;
            }
        }

        #extras {
            background-color: @colorWhite;
            padding-bottom: 100px;
            padding-top: @defaultPadding;
        }

        footer {
            right: 0;
        }

        header.section, 
        footer.section {
            max-width: none;

            .section-wrapper {
                padding-left: 5.6%;
            }
        }
    }
}

@media @rwd960 {
    header.section, 
    header.section.indent {
        .section-content {
            nav ul li a {
                margin: 0 3px;
            }

            nav ul li.work {
                margin-right: 0;
            }
        }
    }

    .section,
    .section.indent {
        .section-wrapper {
            padding-left: 20px;
            padding-right: 20px;
        }
    }
}

@media @rwd767 {
    header.section, 
    header.section.indent {
        padding-bottom: 10px;
        padding-top: 10px;
        top: 0;

        .section-content {
            .logo:first-child:not(:last-child) * {
                max-width: 160px;
            }

            .navigation {
                padding: 0;

                .nav {
                    &-mobile {
                        display: block;
                        position: absolute;
                        right: 30px;
                        top: 23px;

                        &-checkbox:checked + label {
                            & > span {
                                background-color: transparent;

                                &:before, 
                                    &:after {
                                    background-color: @colorWhite;
                                    .transform-origin(center center);
                                }

                                &:before {
                                    bottom: 0;
                                    .transform(rotate(45deg));
                                }

                                &:after {
                                    top: 0;
                                    .transform(rotate(-45deg));
                                }
                            }

                            & + nav {
                                opacity: 1;
                                visibility: visible;
                                z-index: 10;
                            }
                        }
                    }
                }

                nav {
                    background-color: rgba(0, 0, 0, .85);
                    bottom: 0;
                    display: block;
                    left: 0;
                    opacity: 0;
                    position: fixed;
                    right: 0;
                    top: 0;
                    visibility: hidden;
                    z-index: 0;
                    .transition();

                    ul {
                        left: 50%;
                        position: absolute;
                        top: 50%;
                        white-space: normal;
                        .transform(translate(-50%, -50%));

                        li {
                            display: block;
                            text-align: center;

                            &:not(:first-child) {
                                border-top: 1px solid rgba(255, 255, 255, .1);
                            }

                            a {
                                color: #ffffff;
                                display: block;
                                font-size: 2em;
                                margin: 0;
                                padding: 10px 20px;
                            }

                            &.work {
                                margin: 0;
                            }

                            &.dani {
                                border: 0;
                                padding-top: 50px;

                                a {
                                    display: inline-block;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    #main {
        padding-bottom: 0  !important;
    }

    footer.section {
        position: static !important;

        .section-content {
            & > * {
                text-align: center !important;

                &:first-child {
                    margin-bottom: 10px;
                }

                .socials,
                .emails {
                    margin: 0 10px;
                }
            }
        }
    }

    .section,
    .section.indent {
        .section-wrapper {
            padding-left: 10px;
            padding-right: 10px;
        }

        .section-content {
            display: block;
            width: auto;

            & > * {
                display: block;
                width: auto !important;
            }
        }
    }

    .box-list-content ul li,
    .box-slider-content ul li {
        width: 50%;
    }
}

@media @rwd767landscape {
    header.section .section-content .navigation nav ul li a, 
    header.section.indent .section-content .navigation nav ul li a {
        font-size: 1em;
    }

    body.in-work, 
    body.project-body {
        header {
            position: absolute !important;
        }
    }
}

@media @rwd480 {
    .box-list-content ul li,
    .box-slider-content ul li {
        width: 100%;
    }
}




















@c_light_gray: #999a9a;
@c_lightsemi_gray: #5f5f5f;

#main {
    #box-spotlight {
        cursor: pointer;
        overflow: hidden;
        position: relative;

        a:hover {
            text-decoration: none;
        }

        .inner-wrap,
        .inner-box {
            width: 100%;
            //height: 100%;
            position: relative;
        }

        .volume {
            display: none;
            width: 18px;
            height: 17px;
            position: absolute;
            bottom: 10px; right: 10px;
            z-index: 5;
            background: url(../images/ico-volume.png) no-repeat;
            background-size: 100% auto;
            background-position: 0 100%;
        }

        &.has-audio .volume {
            display: block;
        }

        &.is-muted .volume {
            background-position: 0 0;
        }

        .note {
            background: transparent url(../images/layout-spotlight-bg.png);
            position: absolute;
            display: block;
            top: @defaultPadding;
            left: auto;
            right: 100%;
            bottom: @defaultPadding;
            width: 100%;

            h3 {
                color: #FFF;
                font: 240%/110% EHR, Helvetica, Arial, sans-serif;
                text-transform: uppercase;
                position: absolute;
                left: -100%;
                top: 14.23%;

                -webkit-transition: left 0.4s ease-out;
                -moz-transition: left 0.4s ease-out;
                transition: left 0.4s ease-out;
                -webkit-transition-delay: 0.1s;

                a {
                    color: #FFF;
                }
            }

            ul {
                position: absolute;
                bottom: 15%;
                left: 26.5%;
                color: @c_light_gray;
                font: 85%/120% HLR, Helvetica, Arial, sans-serif;
                right: 5%;

                .plus {
                    color: @c_lightsemi_gray;
                    padding: 0% 1%;
                }
            }

            -webkit-transition: right 0.35s ease-in-out;
            -moz-transition: right 0.35s ease-in-out;
            transition: right 0.35s ease-in-out;
        }

        &:hover .note {
            right: @defaultPadding;

            h3 {
                left: @defaultPaddingLeft;
            }
        }
    }
}