/* d21 */
/* 006633 */


@font-face { 
    font-family: 'bold'; 
    src: local('../fonts/UbuntuMono-B.ttf'), url('../fonts/UbuntuMono-B.ttf');
}
@font-face { 
    font-family: 'text'; 
    src: local('../fonts/UbuntuMono-R.ttf'), url('../fonts/UbuntuMono-R.ttf');
}

h1, h2, h3, h4, h5, h6 {
    width: 100%;  
    padding: 0; 
    margin: 0; 
    font-weight: 400;
    font-family: 'bold'; }
    
a { text-decoration: none; color: #fff; font-size: 100%; }

p { margin: 10px 0; }

.bt1, .bt2, .bt3, .bt4 { display: block; width: 100%; font-weight: 400; }
.bt1 { font-size: 175%; padding: 0 0 20px 0; }
.bt2 { font-size: 150%; padding: 0 0 10px 0; }
.bt3 { font-size: 125%; padding: 0 0 10px 0; }
.bt4 { font-size: 110%; padding: 0 0 10px 0; }

.dt1, .dt2, .dt3 { display: block; width: 100%; font-weight: 400; }
.dt1 { font-size: 150%; }
.dt2 { font-size: 125%; }
.dt3 { font-size: 110%; }

.lt1, .lt2 { color: #555; }
.lt1 { font-size: 90%; }
.lt2 { font-size: 80%; }

.img { width: 100%; }




.btn { display: block; width: max-content; padding: 10px 20px; background-color: #006633; color: #fff; border: solid 1px #006633; border-radius: 30px; }
/* .more { color: #006633; text-decoration: underline; transition: 0.3s; } */
/* .more:hover { color: #d21; } */

/*--- up ---*/
.up {
    display: block;
    position: fixed;
    opacity: 0;
    padding: 0px 10px;
    border-radius: 0;
    bottom: 20px;
    right: 20px; 
    z-index: 100; 
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s; }
.up img { width: 30px; }

/* --- messages --- */
.messages {
    padding: 10px;
    margin: 5px 0;
    display: block;
    border: solid 1px #ddd;
    border-radius: 5px; }
/* --- successmessage --- */
.successmessage {
    font-size: 70%;
    color: #fff;
    padding: 7px;
    border-radius: 5px;
    font-style: italic;
    background-color: #55cc99; 
    margin: 0 0 15px 0; }
/* --- errormessage --- */
.errormessage {
    font-size: 70%;
    color: #fff;
    padding: 7px;
    border-radius: 5px;
    font-style: italic;
    background-color: #d21; 
    margin: 0 0 15px 0; }
/* --- /message --- */

/*--- bread ---*/
.bread { padding: 0 0 20px 0; }
.bread a { width: max-content; }
.bread a img { width: 20px; margin: 0 10px 0 0 ; }
.bread a span { font-size: 80%; color: #006633; text-decoration: underline; }
/*--- /bread ---*/

/* .no { padding: 0 0 20px 0; } */
.noitem { padding: 20px 0; }

/* --- sign --- */
.sign { padding: 10px 0; margin: 0 0 10px 0; border-top: solid 1px #eee; border-bottom: solid 1px #eee; }
.sign .pic { padding: 0 10px 0 0; }
.sign .pic .userpic { width: 30px; background-size: cover; padding: 50%; border-radius: 100px; }
.sign .txt div { font-size: 80%; color: #333; padding: 0 0 3px 0; }
/* --- /sign --- */

/* --- upda from deta --- */
.updafromdeta {
    display: block;
    width: min-content;
    margin: 0 0 5px 0;
    border-radius: 3px;
    font-size: 70%;
    color: #999;
}

/* --- pagination --- */
.pagination .step-links .current { font-size: 80%; padding: 5px 10px; background-color: #eee; }
.pagination .step-links a { display: block; width: 30px; height: 30px; padding: 5px; margin: 0 3px 0 0; border-radius: 50px; background-color: #006633; } 
.pagination .step-links a img { display: block; width: 100%; filter: brightness(100); }
.pagination .step-links a.edge { background: unset; }
.pagination .step-links a.edge img { filter: unset; }
/* --- /pagination --- */



/* --- boxshadow --- */
#boxshadow {
    width: 0;
    height: 0;
    display: block;
    position: fixed;
    background: #000;
    opacity: 0.3; 
    z-index: 9; }
/* --- /boxshadow --- */



/* --- menubar --- */
.menubar { position: fixed; top: 0; right: -301px; width: 300px; height: 100%; background-color: #333; z-index: 10; transition: 0.25s; border-left: solid 2px #999; }
.menubar .butt a { padding: 20px; background-color: #444; cursor: pointer; }
.menubar .butt a img { width: 25px; }
.menubar .butt a .txt { padding: 0 10px; color: #fff; }
.menubar ul { margin: 0; padding: 0; }
.menubar ul li { width: 100%; padding: 10px; }
.menubar ul li:hover { background-color: #444; }
.menubar ul li a { width: 100%; padding: 10px; }
.menubar ul li a img { width: 25px; }
.menubar ul li a .txt { padding: 0 10px; color: #fff; }
/* --- /menubar --- */



/* --- header --- */
header { height: 60px; background-color: #063; }

header nav { 
    height: 100%;
    flex-wrap: nowrap !important;
    
    /* padding: 20px; */
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

header nav > .logo { height: 100%; width: 90%; flex-shrink: 1; }
header nav > .logo a { height: 100%; color: #fff; font-family: 'bold'; }
header nav > .logo a img { height: 35px; }

header nav > .pers { height: 100%; width: 100px; flex-shrink: 0; }
header nav > .pers a { color: #fff; font-size: 80%; margin: 0 0 0 10px; }
header nav > .pers a.lgn { 
    padding: 10px 20px; 
    border: solid 1px #fff; 
    border-radius: 100px; 
    color: #fff; 
    transition: 0.3s; 
}
header nav > .pers a.lgn:hover { background-color: #fff; color: #063; }
header nav > .pers form.lgt button { color: #063; font-size: 80%; background-color: unset; border: 0; cursor: pointer; }
header nav > .pers a .useris {
    padding: 50%;
    width: 35px;
    background-size: cover;
    background-position: center;
    border-radius: 100%; 
}
header nav > .pers a .userno {
    padding: 50%;
    width: 35px;
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
    border: solid 1px #ddd;
    border-radius: 100%; 
}

header nav > .menu { height: 100%; width: 50px; flex-shrink: 0; }
header nav > .menu a { display: flex; }
header nav > .menu a img { height: 35px; } 
/*--- /header ---*/



/*--- content ---*/
.content { padding: 20px 0; }
.content .body { padding: 0 25px 0 0; }
.content .body li { padding: 0 0 5px 0; }
.content .body .cont img { margin: 10px 0; width: 100% !important; height: auto !important; }
.content .aside {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: flex-start;
    flex-wrap: wrap; 
    padding: 0 0 0 20px; }
.content .aside a { margin: 0 0 20px 0; }
.content .aside a img { width: 100%; border-radius: 5px; }
/*--- /content ---*/



/*--- footer ---*/
footer { padding: 30px 0; background-color: #333; }
footer > div { border-radius: 10px; }
footer > div .logo a { width: max-content; }
footer > div .logo a img { height: 30px; filter: grayscale(1); }
footer > div .cont { text-align: right; }
footer > div .cont a { font-size: 90%; }
/*--- /footer ---*/










/* --- cooky --- */
.cooky { position: fixed; bottom: 0; left: 0; padding: 10px; z-index: 10000; width: 200px; } 
.cooky div { background-color: #d21; padding: 15px; border-radius: 5px; }
.cooky div span { color: #fff; font-size: 80%; }
.cooky div a { 
    display: block; 
    width: 50px; 
    border: solid 1px #fff; 
    padding: 5px 10px; 
    margin: 5px 0; 
    font-size: 75%; 
    color: #d21; 
    border-radius: 5px; 
    text-align: center;
    background-color: #fff;
    cursor: pointer; 
}
/* --- /cooky --- */


.socialbar { position: fixed; right: 0; top: 40%; width: 40px; background-color: #006633; border-radius: 5px 0 0 5px; opacity: 0.4; transition: 0.5s; }
.socialbar:hover { width: 60px; opacity: 1; background-color: #d21; }
.socialbar .soci { width: 40px; }
.socialbar .soci a { display: block; padding: 10px; }
.socialbar .soci a img { width: 100%; filter: invert(1); }



.contacts_block { padding: 10px 0 0 0; }
.contacts_block .wrap { padding: 0 0 15px 0; }
.contacts_block .wrap img { width: 20px; margin: 0 10px 0 0; }
.contacts_block .wrap a { color: #333; text-decoration: underline; }













@media only screen and (max-width: 1200px) {}


@media only screen and (max-width: 1000px) {

    /*--- header ---*/
    header nav > .logo { width: 80%; flex-shrink: 1; }

    /* --- content --- */
    .content .body { padding: 0; }
    .content .aside { padding: 20px 0 0 0; }
    .content .aside a { width: 50%; padding: 0 15px 0 0; }
    .content .aside a img { width: 100%; }

}

@media only screen and (max-width: 500px) {

    .menubar { width: 200px; }
    
    /* --- content --- */
    .content .body { padding: 0; }
    .content .aside { padding: 20px 0 10px 0; }
    .content .aside a { width: 100%; padding: 0; }
    .content .aside a img { width: 100%; }

    /* --- footer --- */
    footer > div > div { padding-bottom: 15px; } 
    footer > div .cont { text-align: left; } 
}