﻿.contact-form--wrapper {
    &:extend(.content);
    display: flex;
    margin-bottom: 30px;
    flex-wrap:wrap;

    .formee {
        .flex(12);
        padding: 0;
        margin: 20px 0 -10px;
    }

    @media screen{
        @media (min-width:960px){
            margin-bottom: 260px;

            .formee {
                .flex(8);
                order: 1;
                margin-top: -10px;
            }
        }
    }
}

.contact-form--intro {
    .flex(12);
    padding: 0 15px;
    text-align:center;

    .big-title {
        margin-bottom: 20px;
    }

    .default-title {
        margin-top: 30px;
    }

    @media screen{
        @media (min-width:960px){
            .flex(4);
            order: 2;
            text-align: right;

            .big-title {
                margin-bottom: 40px;
            }

            .default-title {
                margin-top: 60px;
            }
        }
    }
}

.contact-form--phone,
.contact-form--address {
    display: table;
    position: relative;
    margin: 30px auto 0;

    @media screen{
        @media (min-width:470px){
            &:before {
                content: '';
                background-repeat: no-repeat;
                background-position: center;
                width: 26px;
                height: 26px;
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto;
            }
        }

        @media (min-width:960px){
            margin-right:0;
        }
    }
}

.contact-form--phone {
    color: @color-graygreen;
    font-size: 30px;
    font-weight: 700;
    line-height: .8em;

    @media screen{
        @media (min-width:470px){
            &:before {
                background-image: url(/images/icons/cellphone.min.svg);
                left: -31px;
            }
        }
    }
}

.contact-form--address {
    line-height: 1.5em;

    @media screen{
        @media (min-width:470px){
            &:before {
                background-image: url(/images/icons/world.min.svg);
                left: -33px;
            }
        }
    }
}