@charset "utf-8";

BODY { display:flex; flex-direction:column; }
HEADER { flex: 0 0 auto; }
MAIN { flex: 1 0 auto; }
FOOTER { flex: 0 0 auto; }

HEADER { height: 220px/*15vw*/; background: linear-gradient(-30deg, rgba(210,210,210,1), rgba(210,210,210,0), rgba(210,210,210,0));}

BODY.about { background: url(/img/about_fon.jpg) no-repeat top center fixed; background-size: cover;}
 
.logo { display: block; position: absolute; left: 0; top: 0; width: 45vw; height: 12.9vw; max-width: 700px; max-height: 200px; background: url(/img/logo.png) no-repeat top left; background-size: 100%;}

/*------------*/
.nav_comp { position: absolute; height: 100%; left: 50vw; top: 0; width: 30vw; padding: 0.5vw 0 1vw 7vw; box-sizing: border-box; z-index: 10;  }

.nav_comp UL { margin: 0; padding: 0; height: 100%; list-style: none; text-align: left; display: flex; flex-direction: column; justify-content: space-between;}
.nav_comp UL LI { margin: 3px 0;}
.nav_comp UL LI:nth-of-type(1) { margin-top: 0;}
.nav_comp UL, .nav_comp UL LI A {font: 300 max(1.5vw, 22px) 'TT Interfaces'; color: #000; letter-spacing: 1px; }
.nav_comp UL LI A:hover, .nav_comp UL LI A.sel {color: var(--color_purple);}
/*.nav_comp UL LI A.sel {text-transform: uppercase; font: 400 max(1.7vw, 24px) 'TT Interfaces'}*/

.nav_comp UL LI UL { display: block; position: absolute; max-height: 0; padding: 0 5px; overflow: hidden; background: rgba(255, 255, 255, 0.7 ); box-sizing: border-box; }
.nav_comp UL LI UL LI { margin: 3px 0; }
.nav_comp UL LI UL LI DIV, .nav_comp UL LI UL LI A { font-size: 0.8em;}

/*------------*/

.login { position: absolute; right: 3vw; top: 1vw;}
.login A { margin: 0 0 15px 0; max-width: 40px; }

TABLE.standard { width: 1000px; margin: 0 auto; }

/*----------------*/
.sg_h1_dg, .sg_h1_db { color: var(--color_purple); font-size: 30px; font-weight: normal; margin: 0 0 40px 0; padding: 0;}
.sg_h1_dg SPAN, .sg_h1_db SPAN { color: #aaa; font-size: 0.8em;}
.sg_h1_db {color: var(--color_link);}

.outer1 { padding: 3vw 0; }
.sg_outer {display: flex; text-align: left; max-width: var(--max_width); margin: 0 auto; background: rgba(255, 255, 255, 0.4 ); border-radius: 0 0 50% 50%; padding: 1% 5% 2% 2%;}
.sg_imgs { width: 45%; margin: 0 40px 0 0; }
.sg_txt { width: 55%; font-size: 18px; line-height: 28px;  }
.txt_in { padding: 0 0 20px 0;}
.h0 { display: block; width: 100%; height: auto; background-size: auto; margin: 0 0 20px 0; }
.h0 IMG { width: 100%;}
.h125 { width: 125px; height: 125px; border-right:1px #fff solid; border-bottom:1px #fff solid; border-left:1px #999 solid; border-top:1px #999 solid;}
.imgs_small { display: flex; flex-wrap: wrap;}

.no_photo_img { max-width: 585px;}
/*----------------*/

.login_form { margin: 0 auto; padding: 0; width: 30%; max-width: 500px; background: rgba(232, 235, 235, 0.4); box-shadow:0px 0px 9px #999; text-align: left; border-radius: 0 0 50% 50%; padding: 2%; }
.login_form H2 { margin: 0 0 30px 0; padding: 0; font-weight: normal; font-size: 20px;}
.login_form DIV { display: flex; justify-content: space-between; align-items: center; margin: 8px 0;}
.login_form DIV P, .login_form DIV INPUT { display: block; margin: 0; padding: 0; height: 30px; font-size: 18px; }
.login_form DIV P { width: 25%; }
.login_form DIV INPUT {width: 71%; }
.login_form INPUT { display: block; margin: 20px auto 0 auto; font-size: 20px; padding: 5px;} 

/*----------------*/

@media all and (max-width: 1580px)  {
    HEADER { height: 13vw;}
}

@media all and (max-width: 1200px)  {
    .nav_comp { padding: 0.5vw 0 0.5vw 7vw; }
    .nav_comp UL LI { margin: 0;}
    .login_form { width: 40%; padding: 2% 3%;}
}

@media all and (max-width: 900px)  {
    .nav_comp { padding: 5px 0 5px 7vw; }
    .nav_comp UL, .nav_comp UL LI A { font: 400 max(1.5vw, 18px) 'TT Interfaces'; }
    .login_form { width: 80%; padding: 2% 4%; }
}

@media all and (max-width: 800px)  {
    .nav_comp { padding: 0px 0 0px 7vw; }
    .nav_comp UL, .nav_comp UL LI A { font: 400 max(1.5vw, 18px) 'TT Interfaces'; line-height: 20px; }
}

@media all and (max-width: 600px)  {
    .logo {display: none;}
}

@media all and (max-width: 400px)  {
    .login_form { padding: 6% 7%; }
    .login_form DIV { display: block; }
    .login_form DIV P, .login_form DIV INPUT { width: 100%;}
}