//	PAGE Style
//==================================================
body{
    // custom scroll-bar
    //.scroll-bar();
    overflow-x : hidden;
}

main{
}

#page{
    margin-bottom : 2em;
}
//	HEADER Style
//==================================================
header{
    z-index          : 15;
    color            : @header-color;
    background-color : @brand-primary;

    &.index{
        position : absolute;
        left     : 0;
        right    : 0;
        top      : 0;
        .rgba(#000, 50%);

        .logo{
            position : inherit;
            top      : 100%;
            left     : 0;
            right    : 0;
        }
    }
    h1 {
        padding:0;
    }
    // -- LOGO Style
    .logo{
        //text-align : center;
        margin-top: 30px;
        a{
            .inline-block();
            text-decoration : none;
        }

        img{
        }
    }
    a{
        text-decoration : none;
        color           : @header-color;
    }
    .contact-block{
        padding     : 1.55em 0;
        white-space : nowrap;
        b{
            display     : block;
            font-family : @font-family-headings;
        }
        a{
            .inline-block();
            overflow    : hidden;
            font-family : @font-family-headings;
            font-size   : 1.15em;
            font-weight : 800;
        }
        &:before{
            float     : left;
            padding   : 0.15em 0.25em 0.15em 0;
            font-size : 3em;
        }
    }
}

.top-line{
    background-color : #161618;
}

.language-switcher{
    padding          : 0;
    margin           : 0;
    list-style       : none;
    .inline-block-wrap(@font-size: 14px);
    background-color : #161618;
    font-family      : @font-family-headings;
    font-weight      : 700;
    li{
        margin : 0;
        &.current, &:hover{
            background-color : @brand-primary;
            a{
                color : @header-color;
            }
        }
        .btn{
            background-color : transparent;
        }
    }
    a{
        display : block;
        padding : 0.7em 1.35em;
    }
}

.social-block{
    text-align : right;
}

// -- NAV Style
nav{
}

.quote-btn{
    position    : relative;
    z-index     : 11;
    margin      : 0 1.25em;
    font-weight : 700;
    box-shadow  : none;
}

//	CONTENT Style
//==================================================
article{
}

section{
}

.tab_nav{
    position    : relative;
    padding     : 0;
    margin      : 0 0 2em 0;
    text-align  : center;
    font-size   : 1.75em;
    font-family : @font-family-headings;
    font-weight : 700;
    color       : #fff;
    &::before{
        content          : '';
        position         : absolute;
        top              : 0.25em;
        bottom           : 0.25em;
        width            : 100vw;
        left             : 50%;
        right            : 50%;
        margin-left      : -50vw;
        margin-right     : -50vw;

        background-color : @nav-bg;
    }
    li{
        cursor   : pointer;
        position : relative;
        padding  : .5em 2.675em;
        margin   : 0 1rem;
        .inline-block();
        .border-radius(3px);
        background-color : @brand-primary;
        .box-shadow(0 6px 6px -3px #ecd4d4);
    }
}

.services-list{
    list-style : none;
    .inline-block-wrap(top);
    li{
        .grid-elements(2; @grid-margin-width*3; true; 2; 1);
        margin-bottom : 1em;
        &::before{
            margin    : 0 0.25em 0 -0.25em;
            font-size : 3em;
            color     : @brand-primary;
        }
        span{
            //padding-bottom : 0;
            .inline-block();
            font-weight : 700;
        }

    }
}

.grey-bg{
    position         : relative;
    overflow         : hidden;
    background-color : #ebeded;
    &::before{
        z-index      : 1;
        content      : '';
        position     : absolute;
        top          : 0;
        left         : 50%;
        width        : 0;
        height       : 0;
        border-style : solid;
        border-width : 36px 960px 0 960px;
        border-color : #fff transparent transparent transparent;
        .translate(-50%, 0);
    }
    figure{
        position   : relative;
        margin     : 0 0 2em 0;
        text-align : center;
        &::before, &::after{
            z-index      : 2;
            content      : '';
            position     : absolute;
            bottom       : 0;
            border-style : solid;
            border-width : 36px 960px;
        }
        &::before{
            right        : 50%;
            border-color : transparent transparent #ebeded #ebeded;
        }
        &::after{
            left         : 50%;
            border-color : transparent #ebeded #ebeded transparent;
        }
        .tpopup {
            position: absolute;
            margin-top: 20px;
        }

    }
    figcaption{
        position    : absolute;
        left        : 0;
        right       : 0;
        top         : 50%;
        font-size   : 4em;
        font-weight : 800;
        color       : #fff;
        text-shadow : 0 3px 3px rgba(0, 0, 0, 0.2);
        .translate(0, -50%);
    }
}

.spacer{
    padding : 2em;
}

.first{
    font-size : 17em;
    font-size : 17vmax;
    @media only screen and (max-width : @responsive-size-mobile){
        font-size: 10em;
    }
}

//	SIDEBAR Style
//==================================================
aside{
    .aside-box{
        margin-bottom : 30px;
    }
}

.aside-tab{
    overflow : hidden;
}

.tab-block{
    position         : relative;
    padding          : 0.75em 0.5em;
    margin           : 0 0 2em 0;
    text-align       : center;
    font-size        : 1.75em;
    font-family      : @font-family-headings;
    font-weight      : 300;
    color            : #fff;
    background-color : #ebeded;
    span{
        cursor           : pointer;
        position         : relative;
        display          : block;
        padding          : .5em 0;
        text-align       : center;
        font-size        : 1.375em;
        .border-radius(3px);
        .box-shadow(0 6px 6px -3px #ecd4d4);
        background-color : #161618;
        &::before{
            content      : '';
            position     : absolute;
            top          : 100%;
            left         : 50%;
            width        : 0;
            height       : 0;
            border-style : solid;
            border-width : 18px 172px 0 172px;
            border-color : #161618 transparent transparent transparent;
            .translate(-50%, 0);
        }
    }
}

//	FOOTER Style
//==================================================
footer{
    color      : @footer-color;
    background : @footer-bg;
    &::before{
        content          : '';
        position         : absolute;
        top              : 0;
        bottom           : 0;
        width            : 100vw;
        left             : 50%;
        right            : 50%;
        margin-left      : -50vw;
        margin-right     : -50vw;

        background-color : @nav-bg;
    }
    .contact-box{
        a{
            .inline-block();
            text-decoration : none;
            color           : #fff;
        }
    }
}

.under-footer{
    position         : relative;
    color            : #808080;
    background-color : #212124;
    &::before{
        content          : '';
        position         : absolute;
        top              : 0;
        bottom           : 0;
        width            : 100vw;
        left             : 50%;
        right            : 50%;
        margin-left      : -50vw;
        margin-right     : -50vw;

        background-color : #212124;
    }
    p{
        padding       : 0.25em;
        margin-bottom : 0;
        font-size     : 0.85em;
    }
}
.olark{
    width    : 250px;
    position : fixed;
    left     : 20px;
    bottom   : -14px;
    z-index  : 110;
    .box-shadow(1px 1px 5px fade(#000, 50%));
    .border-radius(5px 5px 0 0);
    .transition();
    a.title{
        .border-radius(5px 5px 0 0);
        padding     : 10px;
        font-weight : bold;
        font-size   : 1.2em;
        display     : block;
        line-height : 1;
        background  : @primary-bg;
        color       : @primary-color;
    }

    div{
        height     : 0;
        padding    : 7px 10px;
        background : @content-bg;
        color      : @content-color;
        .transition();
    }

    &:hover{
        bottom : 0;

        a.title{
            background : darken(@primary-bg, 10%);
        }

        div{
            height : auto;
        }
    }
}
//	Button to scroll top
//==================================================
#go-top{
    .button-color(#ffffff; fade(#000000, 50%); fade(#000000, 50%); @primary-color; @primary-bg; @primary-bg);
}