@charset 'UTF-8';

@import 'base/vars';
@import 'base/placeholder-selectors';
@import 'base/mixins';

*           { padding: 0; margin: 0; outline: none; }
img,
fieldset    { border: 0; }
ul          { list-style: none; }
table       { border-spacing: 0; }

html        {
    body        { overflow: visible; }
}

body        { color: $color; font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; line-height: 1.2; }

.input, select, textarea, input.text {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}

#main   { margin: 0 auto; padding: 0 20px; visibility: visible;
    @include min-breakpoint(small) {
        max-width: 956px;
    }
    @include min-breakpoint(medium) {
        padding: 0;
    }
    @include min-breakpoint(large) {
        max-width: 976px;
    }
}

#top    { @extend %clearfix; padding: 20px 0 0;
    #logo       { float: none; width: 133px; margin: 0 auto 20px;
        @include min-breakpoint(x-small) {
            margin: 0; float: left;
        }
        @include min-breakpoint(small) {
            margin: 21px 0 21px 15px;
        }
    }
    .country    { display: none;
        @include min-breakpoint(small) {
            display: block;
        }
    }
    #country    { margin: 20px 0 0; float: right; }
    #lang       { display: none;
        @include min-breakpoint(small) {
            display: block; font-size: 13px; color: #a1a1a1; margin: 10px 0 0; clear: right; float: right;
        }
    }
}

#top #country li, #top #lang li {
    float: left;
}
#top #country li a, #top #lang li a {
    color: #c3c3c3;
    font-size: 13px;
    text-decoration: none;
    padding: 0 6px;
    float: left;
}
#top #country li a.act, #top #lang li a.act {
    color: #939393;
    background: #ebebeb;
}
#top #country li a:hover, #top #lang li a:hover {
    text-decoration: underline;
}

#top    {
    .country    { margin: 40px 0 0 0; float: right;
        li          { float: left;
            a           { color: #C3C3C3; font-size: 13px; text-decoration: none; padding: 0 6px; float: left; }
        }
    }
}

#sidebar    { padding: 20px 0 15px 15px; overflow: hidden;
    @include min-breakpoint(small) {
        float: left; width: 195px;
    }
    @include min-breakpoint(medium) {
        width: 215px;
    }
    @include min-breakpoint(large) {
        width: 235px;
    }
    #menu       { width: 100%; margin: 0 0 20px -15px;
        @include min-breakpoint(small) {
            float: left;
        }
        > li        { float: left; width: 100%; padding: 0 0 13px; font-size: 21px; line-height: 22px;
            @include min-breakpoint(medium) {
                font-family: 'Bebas Neue', 'PT Sans Narrow', sans-serif; font-size: 24px;
            }
            > a         { width: 100%; padding: 0 0 1px 15px;color: $color; text-decoration: none; font-size: 21px; line-height: 22px;
                @include min-breakpoint(medium) {
                    font-family: 'Bebas Neue', 'PT Sans Narrow', sans-serif; font-size: 24px;
                }
            }
            ul      { display: block;
                li      { width: 100%; padding: 6px 0 0 15px; float: left;
                    a       { display: block; color: $color; font: 16px/1.1 'PT Sans Narrow', 'PT Sans Narrow', sans-serif; text-decoration: none; }
                }
            }
        }
    }

    // .banner     { display: none;
    //     @include min-breakpoint(small) {
    //         display: block;
    //     }
    // }
    // .share      { display: none;
    //     @include min-breakpoint(small) {
    //         display: block; margin: 0 0 15px;
    //     }
    //     a           { display: inline-block; height: 24px; margin: 0 10px 0 0;
    //         &.facebook,
    //         &.linkedin,
    //         &.share_all     { background: url(../img/share_icons.png) no-repeat; }
    //         &.facebook      { width: 24px; background-position: 0 0; }
    //         &.linkedin      { width: 24px; background-position: 0 -50px; }
    //         &.share_all     { width: 49px; background-position: 0 -100px; }
    //     }
    // }
    // .copy       { display: none;
    //     @include min-breakpoint(small) {
    //         display: block; padding: 15px 0;
    //     }
    // }
}


        #topsearch { width: 230px; margin: 0 auto 20px;
            @include min-breakpoint(x-small) {
                margin: 7px 0 0; float: right; clear: none;
            }
            @include min-breakpoint(small) {
                float: left; margin: 27px 0 0 62px;
            }
            @include min-breakpoint(medium) {
                float: left; margin: 47px 0 10px 114px; width: 550px;
            }
            #top-search-form    {
                label               { display: block; height: 27px; font-size: 21px; line-height: 1.2; text-transform: uppercase; text-align: center;
                    @include min-breakpoint(small) {
                        text-align: left;
                    }
                    @include min-breakpoint(medium) {
                        float: left; padding: 2px 10px 0 0; font-size: 23px; font-family: 'Bebas Neue', 'PT Sans Narrow', sans-serif;
                    }
                }
                #search-input-block { display: inline-block; border: 1px solid #dfe1e4; }
                .input              { float: left; width: 183px; margin-right: 15px; padding: 5px 8px; color: $color; border: none; }
                .submit             { float: left; width: 30px; height: 30px; padding: 0; cursor: pointer; background: url(mysite/img/top_search_box_icon.png) no-repeat 50% 50%; border: 0; vertical-align: middle; }
            }
        }

#content { padding: 17px 0 15px; overflow: hidden;
    img     { max-width: 100%; height: auto; }
    @include min-breakpoint(medium) {
        width: 714px; float: right;
    }
    h1 { padding: 0 0 10px; font-size: 22px; font-weight: normal;
        @include min-breakpoint(small) {
            text-align: justify;
        }
        @include min-breakpoint(medium) {
            padding: 0 0 15px; font-family: 'Bebas Neue', 'PT Sans Narrow', sans-serif; font-size: 24px;
        }

        .icon   {
            @include max-breakpoint(small) {
                display: block; margin-top: 10px;
            }
        }

    }
    h2      { padding: 0 0 13px; font-size: 19px; font-weight: bold;
        @include min-breakpoint(medium) {
            text-align: justify;
        }
        small   { display: block; font-size: 16px; }
    }
    h3      { padding: 0 0 10px; font-size: 17px; font-weight: bold;
        @include min-breakpoint(medium) {
            text-align: justify;
        }
    }
}


