@page_width: 1000px;
@page_padding: 0px;
@internal_width: @page_width - @page_padding;

@c_bg: #cc0066;
@c_text: #cd349b;
@c_text_pink: #ff40c1;

@cwl: 190px;
@cwm: 610px;
@cwr: 140px;

a
{
    color: @c_text;
    text-decoration: none;
}

.rounded(@radius: 3px)
{
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}
.shadow
{
    box-shadow: 0 0 10px #aaa;
    -moz-box-shadow: 0 0 10px #aaa;
    -webkit-box-shadow: 0 0 10px #aaa;
}
.inset(@radius: 3px)
{
    -moz-box-shadow:inset 0 0 @radius #aaa;
    -webkit-box-shadow:inset 0 0 @radius #aaa;
    box-shadow:inset 0 0 @radius #aaa;
}

.image
{
    border: 1px solid @c_text;
    background: #fff url(../img/loader.gif) no-repeat 50% 50%;
    padding: 1px;
}

.outline
{
    outline: 1px solid #ff0;
}

.ctext 
{
    color: @c_text;
}

.intro
{    
    float: left;
    width: @cwm - 80px;
    max-width: calc(100vw - 80px);
    margin: 0 0 20px 20px;
    line-height: 1.5em;
    border: 1px dotted @c_bg;
    border-left: none;
    border-right: none;
    padding: 10px 20px;
}

body
{
    background: @c_bg url(../img/body-bg.png) repeat-y 50% 50%;
    padding: 0;
    margin: 0;
    font: 11px 'Tahoma';
}
.fleft { float: left; }
.fright { float: right; }
.tcenter { text-align: center; }

.page-wrapper
{
    width: @page_width;
    max-width: 100vw;    
    margin: auto;
}

.page
{
    float: left;
    width: @internal_width;
    max-width: 100vw;
    background: #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

.page > .header
{
    float: left;
    width: 100%;
    height: 150px;
    background: #fff url(../img/sex-oferty-top.jpg) no-repeat;
    border-top: 5px solid #fff;
    border-bottom: 1px solid #fff;
    .umenu
    {
        float: right;
        width: 190px;
        height: 20px;
        line-height: 15px;
        text-align: center;
        a
        {
            color: @c_text;
            text-decoration: none;
            font-size: 10px;
            font-weight: bold;
            display: inline-block;
            padding: 0 6px;
            @media screen and (max-width: 768px) {
                display: none;
            }
        }       
    }
}

.textSlider
{
    @h: 30px;
    @hw: 90px;
    float: left;
    height: @h;
    width: @page_width;
    max-width: 100vw;
    background: #fff;
    border-bottom: 1px solid #fff;
    h3
    {
        float: left;
        width: @hw;
        height: @h;
        line-height: @h;
        text-align: center;
        color: @c_text;
        font-weight: bold;
        font-size: 10px;
        padding: 0;
        margin: 0;
        background: #ffb9dc;
    }
    ul, .simply-scroll-container
    {
        height: @h;
        line-height: @h;
        float: left;
        width: @page_width - @hw - 20px;
        max-width: calc(100vw - @hw - 20px);
        padding: 0 10px;
        margin: 0;
        color: @c_text;
        list-style: none;
        overflow: hidden;
        li
        {
            float: left;
            padding: 0 5px;
            margin: 0;
            a
            {
                color: @c_text;
                text-decoration: none;
                &:hover
                {
                    border-bottom: 1px dotted @c_text;
                    color: @c_text_pink;
                }
            }
        }
        .simply-scroll-clip
        {
            float: left;
            width: 100%;
            overflow: hidden;
        }
    }
}

.menu
{
    @h: 50px;
    @bw: 375px;

    float: left;
    height: @h;
    width: @page_width;
    max-width: 100vw;
    background: @c_text url(../img/menu-sprite.png) repeat-x 0 0;
    @media only screen and (max-width: 768px) {
        display: none;
    }
    > ul
    {
        float: left;
        padding: 0 0 0 20px;
        margin: 0;
        height: @h;
        list-style: none;
        width: @page_width - @bw - 25px;
        max-width: calc(100vw - @bw - 25px); 
        overflow: hidden;
        > li
        {
            float: left;
            height: @h;
            &.light
            {
                background: url(../img/menu-sprite.png) no-repeat 50% -50px;
            }
            &.more-space
            {
                padding: 0 40px;
            }
            a
            {
                float: left;
                height: @h - 28px;
                padding: 11px 15px;
                line-height: @h;
                display: inline-block;
                font: 18px 'Oswald'; 
                color: #fff;
                text-decoration: none;
                &:hover
                {
                    text-decoration: underline;
                }
            }
        }
    }
    .ban
    {
        @h1: @h - 7px;
        height: @h1;
        line-height: @h1;
        float: right;
        background: #fff url(../img/menu-sprite.png) no-repeat 0 -100px;
        width: @bw;
        padding: 0 5px 0 0;
        .ban-wrapper
        {
            float: right;
            width: 250px;
            ul
            {
                float: right;
                width: 250px;
                padding: 0;
                margin: 0;
                list-style: none;
                text-align: center;
                overflow: hidden;
                li
                {
                    height: @h1;
                    width: 100%;
                    text-align: center;
                }
            }
        }
    }
}

.cols
{
    @h2_h: 23px;
    float: left;
    width: @page_width;
    max-width: 100vw;
    @media screen and (min-width: 1020px) {
        background: #fff url(../img/cols.png) repeat-y top left;
    }    
    padding: 10px 0 10px 0;
    h2
    {
        float: left;
        width: 100%;
        height: @h2_h;
        margin: 0 0 10px 0;
        padding: 2px 0 0 0;
        font: 13px 'Oswald';
        color: #fff;
        background: @c_text url(../img/headers-sprite.png) repeat-x;
        text-indent: 5px;
    }
    .cl
    {
        float: left;
        width: 100%;
        max-width: @cwl;
        margin: 0 0 0 5px;
        .small-screen {
            display: none;
        }
        @media screen and (max-width: 1019px) {
            max-width: calc(100vw - 5px);
            margin: 0 0 0 5px;
            .ad-holder {
                display: none;
            }
            .big-screen {
                display: none;
            }
            .small-screen {
                display: initial;
            }
        }   
        .big-font {            
            height: 22px;
            padding: 5px 10px;
            line-height: 26px;
            display: inline-block;
            font: 18px 'Oswald';
            color: #cd349b;
            text-decoration: none;
        }
        .search
        {
            float: left;
            width: 100%;
            max-width: @cwl - 10px;
            margin: 0 5px 10px 5px;
            @media screen and (max-width: 1019px) {
                max-width: calc(100vw - 15px);
            }
            ul
            {
                float: left;
                list-style: none;
                padding: 0 0 10px 20px;
                margin: 0;
                line-height: 1.5em;
                li
                {
                    color: @c_text;
                    a
                    {
                        color: #000;
                        text-decoration: none;
                        &:hover
                        {
                            border-bottom: 1px dotted @c_text;
                            color: @c_text;
                        }
                    }                    
                }
            }
            .map
            {
                width: 176px;
                height: 168px;
                margin: 10px auto;
            }
            select
            {
                width: 100%;
            }
            .sbtn
            {
                display: block;
                width: 122px;
                height: 43px;
                margin: 10px auto 0 auto;
                background: url(../img/search-btn.png) no-repeat top left;
                &:hover
                {
                    background-position: bottom left;
                }
                span
                {
                    display: none;
                }
            }
            p
            {
                float: left;
                width: 100%;
            }
        }
    }
    .cm
    {
        float: left;
        width: @cwm;
        max-width: calc(100vw - 25px);
        margin: 0 0 0 25px; 
        @media screen and (max-width: 1019px) {
            max-width: calc(100vw - 40px);
            margin: 0 0 0 5px;                 
        }
        padding: 15px 0 0 0;
        h2
        {
            background-position: 0 -25px;
            width: @cwm - 10px;
            max-width: calc(100vw - 10px - 50px);
            padding-left: 5px;
            padding-right: 5px;
            span
            {
                font: 11px 'Tahoma', sans-serif;
                display: inline-block;
                margin: 3px 0 0 0;
                a
                {
                    color: #fff;
                    border-bottom: 1px dotted #fff;
                    text-decoration: none;
                }
            }
        }
        h3
        {
            color: @c_text;
            font: 18px 'Oswald';
            margin: 20px 0 10px 0;
            padding: 0;
            float: left;
            width: 100%;
        }
        .img-offer
        {
            margin: 10px 12px;
        }
    }
    .cr
    {
        float: right;
        width: @cwr;
        margin: 0 5px 0 0;
        @media screen and (max-width: 1019px) {
            display: none;
        }    
        h2
        {
            background-position: -190px 0;
        }
    }
}
.offer
{
    float: left;
    padding: 10px 0 0 0;
    @media screen and (max-width: 479px) {
        font-size: 12px;
    }
    .profile
    {
        .row
        {
            width: 100%;
            float: left;
            margin: 0 0 10px 0;
            clear: both;
        }
        
        .profile-image
        {
            float: left;
            width: 254px;
            height: 204px;
            position: relative;
            img
            {
                .shadow;
                .image;
                float: left;
                width: 250px;
                height: 200px;
                position: relative;
            }
            span
            {
                float: left;
                width: 245px;
                position: relative;
                top: -22px;
                text-align: center;
                height: 20px;
                line-height: 20px;
                display: block;
                background: url(../img/alpha-bg.png) repeat-x 0 0;
                color: #fff;
                margin: 0 0 0 2px;
                padding: 0 5px 0 0;
            }
            
        }
        .info
        {
            width: 350px;
            max-width: calc(100vw - 25px);
            float: right;
            @media screen and (max-width: 1019px) {
                float: left;
            }
            padding: 10px 0 0 0;
            p strong a {
                font-size: 18px;
            }
        }
        .readable
        {
            line-height: 1.5em;
            overflow: auto;
        }
        .preferences
        {
            float: left;
            p 
            { 
                span { width: 120px; }
            }
            .pcl, .pcr
            {
                float: left;
                padding: 0 10px;
            }
            .pcl
            {
                width: 295px;
                @media screen and (max-width: 620px) {
                    width: 100%;
                }
                max-width: calc(100vw - 45px);
            }
            div.pcl.new-offer {
                width: 100%;
                max-width: calc(100vw - 45px);
                p.education {
                    display: none;
                }    
            }         
            .pcr
            {                
                @media screen and (min-width: 1020px) {
                    float: right;
                }
                width: 285px;
                max-width: calc(100vw - 25px);
                padding: 0 10px 0 0;
            }
            div.pcr.new-offer {
                float: left;
            }
            p.yn, p.price
            {
                float: left;
                width: 100%;
                clear: both;
                b
                {
                    color: #aaa;
                    display: inline-block;
                    font-size: 12px;
                    text-align: center;
                    padding: 3px;
                    margin: 0 6px 0 0;
                    .rounded;
                    background: #ccc;
                    color: #fff;
                    width: 30px;
                }
                .y
                {
                    background: #5a5;
                    color: #fff;
                }
                .amount
                {
                    background: @c_text;
                    color: #fff;
                    width: 60px;
                }
            }
        }
        .gallery
        {
            img
            {
                width: 80px;
                height: 100px;
            }
        }
    }
    p
    {
        float: left;
        width: 100%;
        font-size: 14px;
        span
        {
            display: inline-block;
            width: 150px;
            text-align: right;
        }
        strong
        {
            color: @c_text;
        }
    }
}

.top-offers
{
    float: left;
    margin: 12px 0 0 410px;
    @media screen and (max-width: 919px){
        display: none;
    }
    .img-offer
    {   
        padding-bottom: 2px;
        position: relative;
        text-align: center;
        .img-wrapper
        {
            margin: auto;
            text-align: center;
            img 
            {
                margin: 0 0 0 5px;
            }
        }
    }
}

.bottom-offers
{
    float: left;
    margin: 12px 0;
    .img-offer
    {   
        padding-bottom: 2px;
        position: relative;
        text-align: center;
        margin: 10px !important;
        .img-wrapper
        {
            margin: auto;
            text-align: center;
            img 
            {
                margin: 0 0 0 5px;
            }
        }
    }
}

.img-offer
{
    float: left;
    background: #fff;
    border: 1px solid @c_text;
    padding: 1px 1px 10px 1px;
    text-align: center;
    font-size: 9px;
    overflow: hidden;
    margin: 0 10px 0 0;
    width: 90px;
    position: relative;
    .shadow;
    .img-wrapper
    {
        width: 90px;
        height: 100px;
        overflow: hidden;
        float: left;
        margin: 5px 0 10px 0;
        img
        {
            border: none;
            float: left;
            width: 80px;
            height: 100px;
            margin: 0 5px;
            background: #fff url(../img/loader.gif) no-repeat 50% 50%;
        }
    }
    span 
    {
        margin: 2px 0 0 0;
        display: inline-block;
        white-space: nowrap;
    }
    a
    {
        white-space: nowrap;
        text-decoration: none;
        color: @c_text;
        border-bottom: 1px dotted @c_text;
    }
}

.footer
{
    width: calc(100vw - 20px);;
    max-width: @page_width - 20px;
    float: left;
    padding: 10px;
    background: url(../img/menu-sprite.png) repeat-x top left;
    color: #fff;
}


h2
{
    font-size: 18px;
    margin: 0 0 3px 0;
    padding: 0;
}
p
{
    padding: 0;
    margin: 0 0 7px 0;
}

.links 
{
    width: 100%;
    max-width: 100vw;
    float: left;
    text-align: center;
    padding: 5px 0 10px 0;
}
.links a 
{
    color: #000;
    display: inline-block;
    padding: 0 5px;
}
.ad-holder
{
    text-align: center;
    img
    {
        border: 1px solid @c_text;
        background: #fff;
        padding: 1px;    
    }
    .ban
    {
        width: 120px;
        height: 60px;
        margin: 0 0 10px 0;
        border: none;
        padding: 0;
    }
}

.pager
{
    float: left;
    width: 100%;
    height: 25px;
    line-height: 25px;
    background: url(../img/headers-sprite.png) repeat-x 0 -25px;
    margin: 10px 0 0 0;
    text-align: left;
    div
    {
        float: right;
        color: #fff;
        margin: 0 5px 0 0;
        span 
        {
            float: left;
            margin: 0 5px;
        }
        a
        {
            display: block;
            float: left;
            width: 15px;
            height: 25px;
            line-height: 25px;
            background: url(../img/headers-sprite.png) no-repeat -25px -50px;
            text-align: center;
            margin: 0 5px;
            text-decoration: none;
            color: #fff;
            &:hover
            {
                background: url(../img/headers-sprite.png) no-repeat -5px -50px;
            }
        }
    }
    >a
    {
        color: #fff;
        text-decoration: none;
        border-bottom: 1px dotted #fff;
        margin: 0 0 0 10px;
        &:hover
        {
            border-bottom: 1px solid #fff;
        }
    }
}

.cr
{
    .img-offer
    {
        margin: 0 0 20px 25px ;
    }        
}
.frontpage-offers
{
    float: left;
    margin: 0 0 0 10px;
}


.search-form
{
    @lh: 28px;
    float: left;
    width: 100%;
    margin: 0 0 10px 0;
    p
    {
        padding: 2px;
        label
        {
            float: left;
            width: 120px;
            max-width: 27vw;
            text-align: right;
            margin: 0 10px 0 0;
            padding: 3px 0 0 0;
            &.range
            {
                color: #aaa;
            }
            &.normal-label
            {
                width: auto;
                float: none;
                padding: 0;
            }
        }
        input[type=text]
        ,input[type=password]
        ,select
        ,.text
        {
            .rounded;
            .inset;
            border: 1px solid @c_text;
        }        
    }
    p.from-to
    {
        input, select
        {
            width: 60px;
            text-align: center;
        }
    }
    input.submit
    {
        display: block;
        border: none;
        width: 122px;
        height: 43px;
        margin: 10px auto 0 auto;
        background: url(../img/search-btn.png) no-repeat top left;
        cursor: pointer;
        &:hover
        {
            background-position: bottom left;
        }           
    }
    .other-search
    {
        text-align: center;
        margin: 10px 0 0 0;
        a
        {
            color: @c_text;
            text-decoration: none;
            border-bottom: 1px dotted @c_text;
        }
    }
}

.condition
{
    background: #eee;
    padding: 5px 10px 3px 3px;
    float: left;
    .rounded(5px);
    span
    {
        background: url(../img/arrow-up.png) no-repeat 5px 0;
        margin: 0;
        padding: 0 0 0 18px;
        height: 15px;
        line-height: 15px;
        display: block;
        float: left;
        cursor: help;
    }
    input
    {
        float: left;
        height: 15px;
        padding-top: 0;
        margin-top: 0;
    }
    em
    {
        height: 15px;
        line-height: 15px;
        display: block;
        float: left;
        padding: 0 5px 0 0;
    }
    &.dropdown
    {
        margin-left: 132px
    }
}

.upload
{
    float: left;
    img 
    {
        margin: 0 0 0 3px;
    }
}

#files 
{
    float: left;
}

.add-photo
{
    margin: 0 0 0 3px;
}

.add-offer-submit
{
    float: left;
    margin:30px auto;
    padding:15px;
    font-weight:bold; font-size:1.3em;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    background:#f2f2f2;
    color:black;
    border:1px solid #ccc;
    width:150px;
    cursor:pointer !important;
    -moz-border-radius:5px; -webkit-border-radius:5px;
}

b.required
{
    color: #f00;
    font-size: 14px;
}

.error-field
{
    background: #fee;
    border: 2px solid #f00 !important;
}

.tales
{
    a
    {
        color: @c_text;
        text-decoration: none;
        font-size: 11px;
        &:hover 
        {
            color: @c_text_pink;
            border-bottom: 1px dotted @c_text_pink;
        }
    }
    td
    {
        border: 1px solid @c_text;
        width: 33%;
        text-align: center;
    }
}

table.list
{    
    border-collapse: separate;
    border-spacing: 1px;
    border: 1px solid @c_text;
    background: #eee;
    clear: both;
    th
    {
        padding: 10px;        
        background: @c_text;
        border-bottom: 3px solid @c_text + #888;
        color: #fff;
    }
    h3
    {
        padding: 0 0 10px 0;
        margin: 0;
        font-size: 11px;
    }
    p
    {
        padding: 0;
        margin: 0;
    }
    > tbody
    {
        > tr
        {
            > td
            {
                background: #fff;
                padding: 10px;
                &.title
                {
                    text-align: right;
                    .required
                    {
                        color: #f00;
                    }                    
                }
                small
                {
                    color: #aaa;
                }
            }
            &.header > td
            {
                border-bottom: 1px solid #ccc;
                background: #fafafa;
                font-weight: bold;
                text-align: center;
            }
            &.odd > td
            {
                background: #f1f1f1;
            }
        }
    }
    &.full
    {
        width: 100%;
    }
    &.forum
    {
        a
        {
            color: @c_text;
            text-decoration: none;
            &:hover
            {
                border-bottom: 1px dotted @c_text;
            }
        }
    }
}
div.success 
{
    background-image: url("../img/s_success.png");
    background-position: 5px 50%;
    background-repeat: no-repeat;
    border: 1px solid #A2D246;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 1px #FFFFFF inset;
    margin: 0.5em 0 1.3em;
    padding: 10px 10px 10px 25px;
    background-color: #EBF8A4;
    color: #000000;
}

div.error
{
    background-image: url("../img/s_error.png");
    background-position: 5px 50%;
    background-repeat: no-repeat;
    border: 1px solid #E94245;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 1px #FFFFFF inset;
    margin: 0.5em 0 1.3em;
    padding: 10px 10px 10px 25px;
    background-color: #E18AA3;
    color: #fff;
}

.no-photo
{
    .image;
    width: 80px;
    height: 80px;
    background: #eee;
}

.agency-list
{
    a
    {
        color: @c_text_pink;
        text-decoration: none;
        border-bottom: 1px dotted @c_text_pink;
    }
}

.agency
{
    h3
    {
        margin-top: 0 !important;
    }
}

#map
{
    width: 176px;
    height: 168px;
}

.type-highlight
{
    background: #ffb9dc;
}
.type-highlight
{
    span.recommended
    {
        background: #f00;
        text-align: center;
        float: left;
        width: 100%;
        padding: 5px 0;
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        text-weight: bold;
    }
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em 1em;
    color: #cd349b;  
    @media only screen and (min-width: 769px) {
        display: none;
    }
    button.menu-toggle {
        background-color: white;
        border: 1px solid #cd349b;
        z-index: 9;
        min-width: 51px;
        min-height: 51px;       
    }
    .svg-menu-toggle {
        .line {
            opacity: 1;
            -webkit-transform: rotate(0) translateY(0) translateX(0);
            -ms-transform: rotate(0) translateY(0) translateX(0);
            transform: rotate(0) translateY(0) translateX(0);
            -webkit-transform-origin: 1rem 1em;
            -ms-transform-origin: 1rem 1em;
            transform-origin: 1rem 1em;
            -webkit-transition: opacity 0.2s ease-in-out, -webkit-transform 0.3s ease-in-out;
            transition: opacity 0.2s ease-in-out, -webkit-transform 0.3s ease-in-out;
            -o-transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
            transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
            transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out, -webkit-transform 0.3s ease-in-out;
        }
        .line-1 {
            -webkit-transform-origin: 1rem 2.5rem;
            -ms-transform-origin: 1rem 2.5rem;
            transform-origin: 1rem 2.5rem;
        }
        .line-3 {
            -webkit-transform-origin: 1rem 4rem;
            -ms-transform-origin: 1rem 4rem;
            transform-origin: 1rem 4rem;
        }
    }
    .menu-toggle.opened .svg-menu-toggle {
        .line-1 {
            -webkit-transform: rotate(45deg) translateY(0) translateX(0);
            -ms-transform: rotate(45deg) translateY(0) translateX(0);
            transform: rotate(45deg) translateY(0) translateX(0);
        }
        .line-2 {
            opacity: 0;
        }
        .line-3 {
            -webkit-transform: rotate(-45deg) translateY(0) translateX(0);
            -ms-transform: rotate(-45deg) translateY(0) translateX(0);
            transform: rotate(-45deg) translateY(0) translateX(0);
        }
    }    
    .screen-reader-text {
        color: #cd349b;
        clip: rect(1px, 1px, 1px, 1px);
        position: absolute;
        height: 1px;
        width: 1px;
        overflow: hidden;
    }     
    .nav-menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        @media only screen and (max-width: 768px) {
            position: fixed;
            left: -100%;
            top: 0px;
            flex-direction: column;
            background-color: #fff;
            width: 100%;
            border-radius: 10px;
            text-align: center;
            transition: 0.3s;
            box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
            padding-inline-start: initial;
            max-width: 100vw;            
        }
        li.nav-item {
            margin-left: 5rem;
            list-style: none;
            @media only screen and (max-width: 768px) {
                margin: 1em 0;
                a {
                    text-transform: uppercase;
                    font-size: 2em;
                }
            }
        }
    }
    ul.nav-menu.active {
        left: 0;
    }   
}