.clear { zoom : 1 }

#page { width: 100%; height: 100%; }
#topline {     
    line-height: 33px; font-size: 0px; 
    padding-left: 10px;
    padding-right: 0px;
    background: linear-gradient(to bottom, #797 0px, #CEC 1px, #F0F0F0 5px, #FFF 100%);
}            
            
#topline a.item { 
    font-size: 18px; font-family: Font2; 
    height: 30px; line-height: 30px; 
    border-radius: 3px;   
    color: #3A3A3C; margin-right: 10px;
}

#topline a.item.active {
    color: #529311;
    text-decoration: none;
}

#topline .p-left, 
#topline .p-right  { display: inline-block; height: 36px; vertical-align: bottom; }
#topline .p-left   { float: left; }            
#topline .p-right  { float: right; }       

#langset, #areaset { display: inline-block; }

#topline .item.join   {                                            
    color: #FFF; background-color: #62A321; 
    text-decoration: none;
    box-shadow: 0px 2px 0px 0px #428301;                
    padding-left: 10px; 
    padding-right: 10px;   
    margin-left: 10px;
}

#head { width: 960px; margin: 0 auto; height: 110px; }

#pagelogo { 
    float: left;
    width: 357px; height: 99px;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    background-position: 0 13px;   
    text-align: right;
}

#pagecontact {
    margin-top: 20px;
    float: right; font-size: 25px;
    line-height: 30px;
}

#pagecontact a { text-decoration: none; color:  #3A3A3C; font-size: 22px; }

.contact-email { background-image: url("../images/ico-email.png"); padding-left: 40px; }
.contact-phone { background-image: url("../images/ico-phone.png"); padding-left: 30px; }

.contact-email,
.contact-phone {
    display: block;
    height: 30px; line-height: 25px;    
    background-repeat: no-repeat;
}

.mainmenu {   
    line-height: 40px; overflow: hidden;
    top: 0px; left: 0px; right: 0px;
    z-index: 200;
    position: sticky;
    background-color: #3A3A3C;
    font-size: 0;
    text-align: center;
}
        
.mainmenu a {  
    display: inline-block;
    border: 0;
    outline: none;
    text-decoration: none;
    padding: 0 40px;     
    font-size: 19px;
    line-height: 40px;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.mainmenu a.active,
.mainmenu a:hover,
.mainmenu a.active:hover {
    background-color: #DCDCDC;
    color: #000;
}

.mainmenu a:before {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.mainmenu a:hover:before {
    opacity: 1;
    filter: alpha(opacity=100);
}

.submenu {    
    background-color: #DCDCDC;    
    text-align: center; 
    height: 40px; 
    line-height: 40px; 
}

.submenu a {
    font-size: 17px; 
    margin: 0 15px;
    color: #3A3A3C;
    border: 0;
    outline: none;
    text-decoration: none;
}

.submenu a.active {
    font-weight: bold
}

.submenu a:hover {
    border-bottom: 1px solid #3A3A3C;
}

#page .container {
    width: 960px; margin: 0 auto;
    text-align: justify;
}

.bigmap     { position: absolute; left: 0px; top: 185px; right: 0px; bottom: 0px; }
.bigmap-shadow { width: 200px; height: 200px; background-color: #FFF; box-shadow: 1px 1px 2px #555; z-index: 999;}

.header, .footer, .container, .cities  {
    width: 960px;
    position: relative;
    margin: 0 auto;
    text-align: justify
}

.footer {
    margin-top: 30px;
}

.footer .bladeweb {
    font-size: 15px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
}

.footer .bladeweb a:hover{
    color: red;
    border-color: red;
}

span.socket {
    display: inline-block;
    height: 16px; line-height: 16px;
    padding-left: 5px;
    padding-right: 5px; 
    background-color: #004878; color: #FFF;
    border-radius: 3px;
    font-size: 12px;
    margin-right: 3px;
}
        
@media screen and (max-width: 600px) {
    .header, .footer, .container, .cities {
        width: 100%;
    }
    .container {
        padding: 0 5px;
    }
    #head {
        max-width: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        height: auto;
    }
    #pagelogo {
        width: 100%;
        min-height: 90px;
        max-height: 90px;
        height: 90px;
        background-size: 70%;
        background-position: center bottom;
    }
    .slogan {
        text-align: center;
    }
    #pagecontact {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        float: none;
        font-size: 18px;
        line-height: 1;
        grid-gap: 10px;
    }
    .contact-phone {
        padding-left: 25px;
    }
    .contact-email {
        padding-left: 25px;
    }
    .mainmenu {
        position: relative;
        line-height: 1;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }
    .bigmap {
        top: 365px;
    }
    .content .left {
        float: none!important;
    }
    .content h2 {
        padding: 0 10px;
    }
    #page .container {
        width: 100%;
    }
    .content .content-pic {
        margin: 10px 0!important;
    }
}