@import "../../vendor/css/reset.min.css";
@import "framework.less";

@blue: #055995;

@blue-dark: #044878;

@blue-very-dark: #2f3a54;

@gray: #b3b3b3;
@gray-light: @gray + #222222;
@gray-dark: @gray - #222222;

@container-max-width: 1280px;
@container-min-width: 780px;

@opacity-hover: 0.75;

@icon-size: 142px;

@header-height : 85px;

body {
    color: @blue-very-dark;
    font-family: Verdana;
    font-size: 0.9em;
    line-height: 1.6em;
    transition: opacity 0.5s;
    min-width: 900px;
}

a {
    color: @blue-very-dark;
    text-decoration: none;
}

a:hover {
    color: @blue-very-dark + #333333;
}

h1, h2, h3, h4, h5, h6 {

}

h2 {
    font-weight: normal;
    color: @blue-very-dark;
    font-size: 2.4em;
    line-height: 1.4em;
    margin: 30px 0;
    .upper();
}

h3 {
    font-size: 1.4em;
    margin: 10px 0;
}

p {
    margin-bottom: 1.5em;
}

ul {

}

article ul {
    margin-left: 25px;
}

ol {

}

li {

}

.wezoom {
    position: absolute;
    right: 10px;
    top: 33px;
    font-size: 10px;
    color: white;
}

.img-container {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.none {
    display: none;
}

.input {
    padding: 7px 10px;
    font-size: 0.8em;
    color: @blue-very-dark;
    border: 1px solid @blue-very-dark;
    font-family: Verdana, sans-serif;
}

input, textarea, button {
    .input();
}

input[type="submit"] {
    height: 29px;
    line-height: 29px;
}

.table {
    th {
        background: @gray-light;
        font-weight: bold;
        text-align: center;
    }
    td, th {
        border: 1px solid @gray;
        padding: 2px 4px;
    }
}

::-webkit-input-placeholder {
    color: @blue-very-dark;
}

:-moz-placeholder {
    color: @blue-very-dark;
    opacity: 1;
}

::-moz-placeholder {
    color: @blue-very-dark;
    opacity: 1;
}

:-ms-input-placeholder {
    color: @blue-very-dark;
}

.rotation {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.h1 {
    font-size: 2.2em;
    line-height: 1.4em;
    margin-bottom: 1em;
    letter-spacing: 1px;
    .upper();
}

.container {
    max-width: @container-max-width;
    min-width: @container-min-width;
    .margin-auto();
    .padding-lr();
    .relative();
}

.padding-lr {
    padding-left: 10px;
    padding-right: 10px;
}

.bg {
    background-color: white;
}

.btn {
    .inline-block();
    .border-rounded();
    .upper();
    .center();
    .pointer();
    font-size: 2em;
    line-height: 1.8em;
    padding: 0 20px;
    border: 2px solid @blue-very-dark;
}

.icon {
    width: @icon-size;
    height: @icon-size;
    background-image: url('/static/images/icon.png');
    background-repeat: no-repeat;
    background-position: center top;
}

.icon.inverted {
    background-position: center middle;
}

.icon.active, .icon:hover {
    background-position: center bottom;
}

header {
    background: @blue;
    z-index: 3;
    .relative();

    > .container {
        height: @header-height;
    }

    .logo {
        .absolute();
        .block();
        top: 20px;
        left: 10px;
    }

    .menu {
        width: 49px;
        height: 49px;
        left: 50%;
        margin-left: -24.5px;
        top: 20px;
        background: @blue url('/static/images/menu-button.png') 0 0 no-repeat;
        .absolute();
        .pointer();
    }
    .menu:hover {
        background-color: @blue-dark;
    }

    .contacts {
        top: 20px;
        right: 10px;
        text-align: right;
        .white();
        .absolute();

        > .phone {
            .bold();
            font-size: 1.5em;
            line-height: 1.5em;
        }

        > .email {
            font-size: 0.8em;
            line-height: 0.8em;
        }
    }

    @icon-size: 60px;

    .socials {
        position: absolute;
        top: 15px;
        right: 230px;
        z-index: 4;

        > .like {
            cursor: pointer;
            width: 57px;
            height: 57px;
            background: url('/static/images/socials.png') 100% 0 no-repeat;

            > .panel {
                position: absolute;
                left: -@icon-size*2;
                background-color: @blue;
                width: @icon-size*2;
                height: 57px;
                opacity: 0;
                transition: 0.5s opacity;

                > * {
                    display: block;
                    float: left;
                    width: @icon-size;
                    height: 57px;
                    background-image: url('/static/images/socials.png');
                    background-repeat: no-repeat;

                }
                > .facebook {
                    background-position: 0 0;
                    &:hover {
                        background-position: -@icon-size 0;
                    }
                }
                > .youtube {
                    background-position: -@icon-size*3 0;
                    &:hover {
                        background-position: -@icon-size*2 0;
                    }
                }
                > .schuco {
                    background-position: -@icon-size*7 0;
                    &:hover {
                        background-position: -@icon-size*6 0;
                    }
                }
                > .vitoris {
                    background-position: -@icon-size*4 0;
                    &:hover {
                        background-position: -@icon-size*5 0;
                    }
                }
            }

            &:hover {
                > .panel {
                    opacity: 1;
                }
            }

        }

    }
}

.bg-slide {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    > img {
        min-width: 100%;
    }
}

.home {

    .bg-slide {
        top: -225px;
    }

    #navigation {
        background-color: white;
    }
}

footer {
    height: @header-height;
    margin-top: -@header-height;
    background-color: @gray;
    .padding-lr();
    .center();
    .relative();

    .vitoris {
        .inline-block();
        margin-top: 15px;
    }
}

.promo {
    height: 375px;

    > .content {
        padding-top: 105px;
        .white();
        .center();

        > h1 {
            .h1();
        }

        > .brand {
            font-size: 0.7em;
            margin-bottom: 1em;
        }

        > .large {
            font-size: 1.6em;
            line-height: 1.6em;
        }

    }

    &.inner {

        > .content {
            padding-top: 145px;
        }

    }
}

.projects.list {
    .margin-auto();
    margin-bottom: -10px;
    padding-top: 30px;
    width: 950px;

    > .item {
        .inline-block();
        .relative();
        width: 425px;
        height: 255px;
        margin: 0 20px 40px;
        background-color: none;
        transition: background-color 0.3s;

        > img {
            position: absolute;
            opacity: 1;
            transition: opacity 0.5s;
        }

        &:hover {
            background-color: @blue;
            > img {
                opacity: 0;
            }
        }

        > .border {

            width: 385px;
            height: 215px;
            margin: 20px;
            border: 1px solid white;

            > .description {
                width: 385px;
                height: 215px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                color: white;
                font-size: 1.5em;
                line-height: 1.5em;

                > .title {
                    /*margin-bottom: 5px;*/
                    .upper();
                }

                > .location {
                    /*margin-bottom: 5px;*/
                }

                > .zoom {
                    width: 51px;
                    height: 50px;
                    background: url('/static/images/zoom.png') 50% 50% no-repeat;
                    margin: 15px auto 0;
                }
            }
        }

    }
}

.delimiter {
    width: 2px;
    /*background: url('/static/images/nav-line.jpg') 50% 50% no-repeat;*/
    background-color: @blue-very-dark;

    &.last {
        background: none;
    }
}

#project {
    margin-top: 30px;

    > .wrapper {
        /*margin: 0 10px;*/
        display: table-row;

        > .sidebar {

            @padding: 10px 30px;

            width: 310px;
            /*float: left;*/
            display: table-cell;
            vertical-align: top;
            background-color: @blue;
            color: white;
            font-size: 0.9em;
            line-height: 1.2em;

            a {
                color: white;

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

            .ico {
                float: left;
                width: 50px;
                height: 50px;
                background: url('/static/images/project-sidebar.png') 0 0;
            }

            .c {
                line-height: 1.35em;
                margin-left: 73px;
            }

            > .back {
                padding: @padding;
                background-color: @blue-dark;

                .ico {
                    background: url('/static/images/arrows.png') 0 -50px;
                }

                .c {
                    margin-top: 13px;
                    font-size: 1.3em;
                    line-height: 0.8em;

                    small {
                        font-size: 0.65em;
                    }
                }
            }
            .info {
                padding: @padding;

                @margin-top: 5px;

                > div {
                    margin-bottom: 20px;
                }
                > .reynaers {
                    .c {
                        font-size: 1.1em;
                        line-height: 1.2em;
                    }
                }
                > .location {
                    > .ico {
                        background-position: -50px 0;
                    }
                    .c {
                        margin-top: @margin-top;
                    }
                }
                > .description {
                    > .ico {
                        background-position: -100px 0;
                    }
                    .c {
                        margin-top: @margin-top;
                    }
                }
            }
        }
        > .image {
            /*margin-left: 310px;*/
            display: table-cell;

            img {
                display: block;
                margin: auto;
                /*max-width: 100%;*/
            }
        }

    }

    > .images {
        margin-top: 50px;
        margin-bottom: 50px;
        display: box;
        display: -webkit-box;
        display: flex;
        -webkit-display: flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        justify-content: space-between;
        -webkit-justify-content: space-between;

        > a {
            width: 20%;
            display: block;
            border: 2px solid white;

            > img {
                max-width: 100%;
            }

            &.active {
                border-color: @blue;
            }

            &:hover {
                border-color: @gray;
            }
        }
    }

    .arrow-left, .arrow-right {
        position: absolute;
        top: 300px;
    }
    .arrow-left {
        left: -50px;
    }
    .arrow-right {
        right: -50px;
    }

}

.limit {
    height: 36px;
    margin-bottom: 30px;
    text-align: right;

    > section {
        .inline-block();
        color: @gray;
    }
}

ul.numbers {
    .inline-block();

    > li {
        .inline-block();
        margin-left: 5px;

        > a {
            .block();
            .center();
            width: 34px;
            height: 34px;
            font-size: 20px;
            line-height: 34px;
            border: 2px solid @gray;
            color: @gray;

            &:hover, &.active {
                color: @blue;
                border-color: @blue;
            }

            &.infinity {
                background: url('/static/images/infinity.png') 0 0 no-repeat;
                &.active, &:hover {
                    background-position: 0 100%;
                }
            }

            &.prev, &.next {
                border: 1px solid white;
                background: url('/static/images/pagination_arrows.png') 0 0 no-repeat;
            }
            &.prev {
                background-position: 0 0;

                &.active, &:hover {
                    background-position: 0 100%;
                }
            }
            &.next {
                background-position: 100% 0;

                &.active, &:hover {
                    background-position: 100% 100%;
                }
            }

        }
    }
}

.pagination {
    text-align: center;
    padding-bottom: 30px;
}

ul.nav {
    height: 240px;
    display: box;
    display: -webkit-box;
    display: flex;
    -webkit-display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: space-around;
    -webkit-justify-content: space-around;

    > li {
        list-style: none;
        height: 190px;
        padding-top: 50px;

        > a {
            width: @icon-size;
            height: 190px;
            color: @blue-dark;
            font-size: 1em;
            .block();
            .center();
            .upper();

            > .icon {
                width: @icon-size;
                height: @icon-size;
                background-repeat: no-repeat;
                margin-bottom: 20px;
                background: url('/static/images/menu.png') 0 0 no-repeat;
                .block();
                .margin-auto();

                &.window {
                    background-position: 0 0;
                }
                &.rolled-door {
                    background-position: -@icon-size*1 0;
                }
                &.facade {
                    background-position: -@icon-size*2 0;
                }
                &.door {
                    background-position: -@icon-size*3 0;
                }
                &.winter-garden {
                    background-position: -@icon-size*4 0;
                }
                &.mosquito {
                    background-position: -@icon-size*5 0;
                }
                &.glass-roof {
                    background-position: -@icon-size*6 0;
                }
                &.services {
                    background-position: -@icon-size*7 0;
                }
                &.contacts {
                    background-position: -@icon-size*8 0;
                }
                &.gallery {
                    background-position: -@icon-size*9 0;
                }
                &.reynaers {
                    background-position: -@icon-size*10 0;
                }
                &.press {
                    background-position: -@icon-size*11 0;
                }
                &.events {
                    background-position: -@icon-size*12 0;
                }
                &.video {
                    background-position: -@icon-size*13 0;
                }
                &.tour {
                    background-position: -@icon-size*14 0;
                }
                &.materials {
                    background-position: -@icon-size*15 0;
                }
                &.calc {
                    background-position: -@icon-size*16 0;
                }
                &.help {
                    background-position: -@icon-size*17 0;
                }
            }
            &:hover {
                color: @blue-very-dark;
                > .icon {
                    /*background-position-y: -@icon-size;
                    -webkit-background-position-y: -@icon-size;
                    -moz-background-position-y: -@icon-size;*/

                    &.window {
                        background-position: 0 -@icon-size;
                    }
                    &.rolled-door {
                        background-position: -@icon-size*1 -@icon-size;
                    }
                    &.facade {
                        background-position: -@icon-size*2 -@icon-size;
                    }
                    &.door {
                        background-position: -@icon-size*3 -@icon-size;
                    }
                    &.winter-garden {
                        background-position: -@icon-size*4 -@icon-size;
                    }
                    &.mosquito {
                        background-position: -@icon-size*5 -@icon-size;
                    }
                    &.glass-roof {
                        background-position: -@icon-size*6 -@icon-size;
                    }
                    &.services {
                        background-position: -@icon-size*7 -@icon-size;
                    }
                    &.contacts {
                        background-position: -@icon-size*8 -@icon-size;
                    }
                    &.gallery {
                        background-position: -@icon-size*9 -@icon-size;
                    }
                    &.reynaers {
                        background-position: -@icon-size*10 -@icon-size;
                    }
                    &.press {
                        background-position: -@icon-size*11 -@icon-size;
                    }
                    &.events {
                        background-position: -@icon-size*12 -@icon-size;
                    }
                    &.video {
                        background-position: -@icon-size*13 -@icon-size;
                    }
                    &.tour {
                        background-position: -@icon-size*14 -@icon-size;
                    }
                    &.materials {
                        background-position: -@icon-size*15 -@icon-size;
                    }
                    &.calc {
                        background-position: -@icon-size*16 -@icon-size;
                    }
                    &.help {
                        background-position: -@icon-size*17 -@icon-size;
                    }

                }
            }
        }
        &.delimiter {
            width: 2px;
            background: url('/static/images/nav-line.jpg') 100% 50% no-repeat;
        }
        &.last {
            background: none;
        }
    }

}

#navigation {
    height: 295px;
    background-color: @blue;
    margin-bottom: @header-height;

    > .container {

        > ul {

            > li {

                > a {
                    color: white;

                    > .icon {
                        background-image: url('/static/images/menu-icons.png');
                    }
                    > .icon.calc {
                        background-position: 0 -@icon-size;
                    }
                    > .icon.calc:hover {
                        background-position: 0 -@icon-size*2;
                    }
                    > .icon.projects {
                        background-position: -@icon-size -@icon-size;
                    }
                    > .icon.projects:hover {
                        background-position: -@icon-size -@icon-size*2;
                    }
                    > .icon.systems {
                        background-position: -@icon-size*2 -@icon-size;
                    }
                    > .icon.systems:hover {
                        background-position: -@icon-size*2 -@icon-size*2;
                    }
                    > .icon.contacts {
                        background-position: -@icon-size*3 -@icon-size;
                    }
                    > .icon.contacts:hover {
                        background-position: -@icon-size*3 -@icon-size*2;
                    }
                }
                > a.active {
                    > .icon.calc {
                        background-position: 0 -@icon-size*2;
                    }
                    > .icon.projects {
                        background-position: -@icon-size -@icon-size*2;
                    }
                    > .icon.systems {
                        background-position: -@icon-size*2 -@icon-size*2;
                    }
                    > .icon.contacts {
                        background-position: -@icon-size*3 -@icon-size*2;
                    }
                }
            }
        }
    }
}

.home #navigation {
    > .container > ul > li > a {
        color: @blue;

        > .icon.calc {
            background-position: 0 0;
        }
        > .icon.calc:hover {
            background-position: 0 -@icon-size;
        }
        > .icon.projects {
            background-position: -@icon-size 0;
        }
        > .icon.projects:hover {
            background-position: -@icon-size -@icon-size;
        }
        > .icon.systems {
            background-position: -@icon-size*2 0;
        }
        > .icon.systems:hover {
            background-position: -@icon-size*2 -@icon-size;
        }
        > .icon.contacts {
            background-position: -@icon-size*3 0;
        }
        > .icon.contacts:hover {
            background-position: -@icon-size*3 -@icon-size;
        }
    }
}

#menu {
    width: 100%;
    position: absolute;
    z-index: 2;
    top: -1060px;
    transition: top 1s ease;
    -webkit-transition: top 0.75s ease;

    .top, .bot {
        padding: 0 0 50px;
        background-color: white;
    }
    .bot {
        background-color: #F5EFEF;
    }
}

#menu.show {
    top: @header-height;
}

.systems-menu {
    margin-bottom: 50px;
}

.arrow-left, .arrow-right {
    width: 50px;
    height: 50px;
    background: url('/static/images/arrows.png') no-repeat 0 0;
    .pointer();

    &:hover {
        opacity: 0.5;
    }
}

.arrow-right {
    background-position: -50px 0;
}

.systems-list {
    padding: 50px 55px;

    > .wrapper {
        padding: 0;
        .relative();

        > .cluster {
            display: none;

            &.active {
                display: box;
                display: -webkit-box;
                display: flex;
                -webkit-display: flex;
                flex-direction: row;
                -webkit-flex-direction: row;
                justify-content: space-around;
                -webkit-justify-content: space-around;
                margin: auto;
            }

            > .item {
                width: @icon-size;
                color: @blue;
                font-size: 1.3em;
                line-height: @icon-size;
                .center();
                .block();
                .pointer();

                &:hover, &.active {
                    color: white;
                }
            }
            > .delimiter {
                background: url('/static/images/nav-line.jpg') 50% 50% no-repeat;
            }
            > .delimiter.hide {
                visibility: hidden;
            }
        }

        > .arrow-right, > .arrow-left {
            position: absolute;
            top: 50%;
            margin-top: -25px;
        }
        > .arrow-left {
            left: -50px;
        }
        > .arrow-right {
            right: -50px;
        }

    }
}

#video {
    background-color: #333333;
    padding: 30px 0;
    text-align: center;
}

.videos-list {
    padding: 50px 0;

    > .wrapper {
        .relative();

        > .cluster {
            display: none;

            &.active {
                display: box;
                display: -webkit-box;
                display: flex;
                -webkit-display: flex;
                flex-direction: row;
                -webkit-flex-direction: row;
                justify-content: space-around;
                -webkit-justify-content: space-around;
            }

            > .item {
                width: 200px;
                height: 120px;
                color: white;
                font-size: 1em;
                line-height: 1.3em;
                background-color: @blue;
                overflow: hidden;
                .center();
                .pointer();
                .relative();

                > img {
                    top: -15px;
                    left: 0;
                    .absolute();
                }

                > section {
                    width: 180px;
                    padding: 10px;
                    height: 100px;
                    vertical-align: middle;
                    display: table-cell;
                }

                &:hover, &.active {
                    img {
                        display: none;
                    }
                }
            }
            > div.item {
                background-color: white;
            }
            > .delimiter.hide {
                visibility: hidden;
            }
        }

        > .arrow-right, > .arrow-left {
            position: absolute;
            top: 50%;
            margin-top: -25px;
        }
        > .arrow-left {
            left: -50px;
        }
        > .arrow-right {
            right: -50px;
        }

    }
}

#system {
    padding-top: 75px;
    padding-bottom: 50px;
    border-bottom: 2px solid @gray;

    > .sidebar {
        width: 210px;
        float: left;

        > img {
            margin-bottom: 20px;
        }
    }
    > .content {
        margin-left: 240px;
        @left-space: 70px;
        .table();

        .h {
            font-weight: bold;
            height: 50px;
            padding-left: @left-space;
            line-height: 50px;
        }
        .c {
            margin-left: @left-space;
            margin-bottom: 25px;

            ul {
                list-style: none;
                margin-left: 0;
            }
        }

        > h2 {
            .h1();
        }
        > .description {
            margin-bottom: 35px;
        }
        > .tech {
            > .h {
                background: url('/static/images/tech.png') no-repeat 0 0;
            }
        }
        > .use {
            > .h {
                background: url('/static/images/use.png') no-repeat 0 0;
            }
        }
        > .order {
            margin-left: @left-space;
            margin-top: 55px;
            width: 340px;

            &:hover {
                border-color: @gray;
                color: @gray;
            }
        }
    }
}

.form {

    > .close {
        position: absolute;
        right: 32px;
        top: 16px;
        cursor: pointer;
        width: 15px;
        height: 16px;
        background: url("/static/images/close.png") 0 0 no-repeat;
    }

    .desc {
        font-size: 0.7em;
        margin-top: 5px;
    }

    input, textarea {
        background-color: @gray-light;
        display: block;
        margin-bottom: 15px;
        width: 300px;

    }

    textarea {
        resize: none;
        height: 75px;
    }

    input[type="submit"] {
        color: white;
        background-color: @blue-very-dark;
        text-transform: uppercase;
        width: 322px;
        font-size: 1em;
        line-height: 1em;
        cursor: pointer;
    }
    input[type="submit"]:hover {
        background-color: @blue-very-dark + #333333;
        border-color: @blue-very-dark + #333333;
    }
}

@callback-speed : 0.75s;
#callback {
    position: fixed;
    top: 40%;
    right: -450px;
    width: 450px;
    transition: right @callback-speed ease;
    -webkit-transition: right @callback-speed ease;
    z-index: 3;

    > .icon {
        position: absolute;
        left: -60px;
        width: 60px;
        height: 87px;
        background: url('/static/images/callback.png') 0 0 no-repeat;
        cursor: pointer;
    }
    > .form {
        position: absolute;
        width: 350px;
        background-color: @gray-light;
        padding: 40px 50px;
        top: -130px;

        /*> .close {
            position: absolute;
            right: 32px;
            top: 16px;
            cursor: pointer;
            width: 15px;
            height: 16px;
            background: url("/static/images/close.png") 0 0 no-repeat;
        }*/

        /*.desc {
            font-size: 0.7em;
        }

        input, textarea {
            background-color: @gray-light;
            display: block;
            margin-bottom: 15px;
            width: 300px;

        }

        textarea {
            resize: none;
            height: 75px;
        }

        input[type="submit"] {
            color: white;
            background-color: @blue-very-dark;
            text-transform: uppercase;
            width: 322px;
            font-size: 1em;
            line-height: 1em;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: @blue-very-dark + #333333;
            border-color: @blue-very-dark + #333333;
        }*/
    }
}

#callback.show {
    right: 0;
}

#tour {
    background-color: #333333;
    padding-top: 20px;

    > h1 {
        .h1();
        .center();
        .white();
        margin: 0 0 10px;
    }
}

#content {

    padding-top: 75px;
    padding-bottom: 50px;

    &.publication {
        width: 765px;
        margin: 0 auto;
    }

    h1 {
        .h1();
        .center();
    }

    .title {
        font-size: 1.5em;
        margin-bottom: 10px;
    }

    .date {
        margin-bottom: 10px;
        color: @gray-dark;
    }

    .image.inner {
        float: left;
        margin: 10px 20px 10px 0;
    }
}

.certificates {
    display: box;
    display: -webkit-box;
    display: flex;
    -webkit-display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: space-between;
    -webkit-justify-content: space-between;

    list-style: none;
    height: 295px;

    margin: 60px 0;

    li {
        width: 220px;
    }

    li.d {
        width: 2px;
        background-color: @blue;
        height: 100%;
    }
}

.materials-list {
    display: box;
    display: -webkit-box;
    display: flex;
    -webkit-display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: space-between;
    -webkit-justify-content: space-between;

    list-style: none;
    height: 300px;

    margin: 40px 0;

    li {

        width: 220px;

        > a {
            .block();
            width: 220px;
            height: 300px;

            > img {
                min-width: 100%;
            }

        }

    }
}

.publications {
    .margin-auto();
    padding-bottom: 30px;
    padding-top: 30px;

    > .item {
        margin-bottom: 30px;

        .row {
            display: table-row;

            > .image {
                display: table-cell;
                width: 205px;
                padding-right: 45px;
                border-right: 2px solid @blue;
            }

            > .text {
                display: table-cell;
                vertical-align: top;
                padding-left: 45px;

                > .title {
                    display: inline-block;
                    margin-bottom: 30px;
                    font-size: 1.4em;
                    line-height: 1.4em;
                    .upper();
                }
            }
        }

    }

}

.nonav {
    margin-bottom: @header-height;
}

#contacts {
    > #map {
        width: 100%;
        position: relative;

        > #calc-form {
            position: absolute;
            top: 25px;
            left: 50%;
            margin-left: -350px;
            z-index: 1;

            > .wrapper {
                width: 500px;
                padding-right: 23px;
                background: url('/static/images/form-ar.png') 100% 50% no-repeat;

                > .form {
                    color: white;
                    padding: 35px 50px;
                    background-color: @blue-very-dark;

                    > .close {
                        right: 42px;
                        background: url("/static/images/close_w.png") 0 0 no-repeat;
                    }

                    > .title {
                        text-align: center;
                        font-weight: bold;
                        font-size: 1.4em;
                        .upper();
                    }
                    > .subtitle {
                        text-align: center;
                        .upper();
                        margin-bottom: 10px;
                    }

                    ::-webkit-input-placeholder {
                        color: white;
                    }
                    :-moz-placeholder {
                        color: white;
                        opacity: 1;
                    }
                    ::-moz-placeholder {
                        color: white;
                        opacity: 1;
                    }
                    :-ms-input-placeholder {
                        color: white;
                    }

                    input {
                        width: 378px;
                    }

                    input[type="submit"] {
                        height: 36px;
                        width: 400px;
                        background-color: @blue;
                        border-color: @blue @blue-dark @blue-dark - #222222 @blue-dark;

                        &:hover {
                            background-color: #1e72ae;
                        }
                    }

                    input, textarea, button {
                        color: white;
                        background-color: @blue-very-dark;
                        border-color: white;
                        margin-bottom: 20px;
                        padding: 10px 10px;
                    }
                }
            }

        }

        > #map_canvas {
            height: 440px;
        }
    }

    > .info {
        background-color: @blue;
        padding: 90px 0;
        color: white;

        > .container {

            > .row {
                display: table;
                width: 100%;

                > .col {
                    width: 33.3333%;
                    display: table-cell;
                    vertical-align: middle;
                    text-align: center;
                    font-size: 1.2em;
                    line-height: 1.45em;

                    &.bordered {
                        border-color: #82acca;
                        border-width: 0 2px;
                        border-style: solid;
                    }
                }
            }
        }
    }
}

#up {
    position: fixed;
    top: 60%;
    right: 5px;
    background: url('/static/images/up.png') no-repeat 50% 0;
    width: 48px;
    height: 80px;
    cursor: pointer;

    section {
        margin-top: 60px;
        text-align: center;
        font-size: 0.9em;
        .upper();
    }
}