/*==-- reset --==*/
body,header,main,article,section,aside,footer,nav,h1,h2,h3,h4,h5,h6,div,p,dl,dt,dd,ul,li,a,strong,i,u,em,b,figure,figcaption,img,object,video,embed,span,button
{
margin:0;
padding:0;
border:0;
outline:0;
line-height:1;
box-sizing:border-box;

font-size:100%;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-family:'Arial Narrow';
vertical-align:baseline;
text-overflow:ellipsis;
/* overflow-wrap: break-word; */
text-shadow:0px 0px 1px hsla(0,0%,0%,.4);

color:hsla(0,0%,0%,1);
background:transparent;
} 
/*==-- preliminaries --==*/
body
{
width:calc(100%);
height:calc(100vh); 
background:hsla(0,0%,100%,1);
}
header,main,footer{display:block;max-width:1600px;margin:0 auto;}
h1,h2,h3,h4,h5,h6{text-align:center;}
footer{clear:both;}										
a{text-decoration:none;color:hsla(0,0%,0%,1);}
ol,ul,li{list-style:none;}
u{text-decoration:none;}
:focus{outline:0;}
img,object,video,embed{max-width:100%;}
/*==-- end preliminaries --==*/

/*==-- header --==*/
.header
{
min-height:calc(80px);
padding-bottom:20px;
border-bottom:1px solid hsla(0,0%,30%,0);

background:url("img/fon_header1.jpg") no-repeat 80px center,url("img/fon_header3.jpg") no-repeat calc(100vw - 260px) center hsla(0,0%,100%,1);
background-size:220px 80px, 160px 70px;
}
.h1
{
width:calc(200px);
height:calc(80px);
margin:0 auto;
padding-top:40px;

background:url("img/fon_header2.jpg") no-repeat center center hsla(0,0%,100%,1);
background-size:200px 80px;
}
.h1-a
{
display:block;
width:calc(100%);
height:calc(100%);   
}
/*___ correction[ header ] ___*/
@media screen and (max-width:1200px) {
.header
{
background:url("img/fon_header1.jpg") no-repeat 0px center,url("img/fon_header3.jpg") no-repeat calc(100vw - 220px) center hsla(0,0%,100%,1);
background-size:220px 80px, 160px 70px;
}
}
@media screen and (max-width:590px) {
.header
{
background:url("img/fon_header1.jpg") no-repeat 0px center,url("img/fon_header3.jpg") no-repeat calc(100vw - 110px) center hsla(0,0%,100%,1);
background-size:140px 60px, 100px 50px;
}
.h1
{
width:calc(120px);
background-size:120px 80px;
}
}
@media screen and (max-width:390px) {
.header
{
background:hsla(0,0%,100%,1);
padding:0;
}
.h1
{
width:calc(180px);
height:calc(100px);
background-size:180px 100px;
}
}
/*___ end correction[ header ] ___*/


/*==-- main --==*/ 
.main
{
padding:10px;
overflow:hidden;

background:hsla(0,0%,100%,1);

display:flex;
flex-direction:row;
flex-wrap:nowrap;
}

/*==-- section --==*/

/*--- rubric --> menu ---*/
.section_rubric
{
min-width:calc((100vw - (100vw - 1600px)) / 5);

background:hsla(0,0%,100%,1);

order:1;
}
.h2_rubric
{
font:100 1.4rem/1.4 'Arial Narrow',sans-serif;
letter-spacing:1px;
color:hsla(240,80%,50%,1);
text-shadow:0px 0px 1px hsla(0,0%,0%,1);
}
/*=-- menu --=*/
.nav_rubric
{
position:fixed;
width:calc((100vw - (100vw - 1600px)) / 5);
}
.dl_rubric
{
width:calc(80%);
padding-left:3vw;
}
.dt_rubric
{
padding:3px;
}
.dt_a_rubric
{
font:italic 600 1em/1.1 Verdana,sans-serif;
color:hsla(0,0%,0%,1);
}
.dt_a_rubric:hover
{
color:hsla(0,100%,40%,1);
}
.dd_rubric
{ 
padding-bottom:3px;
text-indent:10px;
}
.b_rubric
{
font:700 1em/1.2 'Times New Roman',serif;
color:hsla(240,100%,30%,1);
}
.b_rubric:hover
{
text-decoration:hsla(0,100%,50%,1) solid underline;
cursor:pointer;
color:hsla(0,100%,40%,1);
}
/*-- close_menu --*/
.close_menu
{
position:absolute;
top:-16px;
left:calc(100% - 16px);
width:calc(32px);
height:calc(32px);
padding:.5%;
border-radius:50%;
background:hsla(0,100%,60%,1);
box-shadow: inset -2px -2px 20px hsla(0,0%,0%,1), 2px 2px 5px hsla(0,0%,0%,1), inset 0px 0px 2px hsla(0,0%,0%,1);
cursor:pointer;
}
.close_menu:after 
{ 
background:hsla(0,0%,90%,.6);
content:'';
height:45%;
width:8%;
position:absolute;
top:4%;
left:15%;
border-radius:50%;
transform:rotate(40deg);
}
/*-- menu --> close_b --*/
.close_b
{
display:block;
margin:0;
padding:0;

font:700 1.2rem/1 'Arial Narrow',sans-serif;
color:hsla(0,0%,100%,1);
text-shadow:1px 1px 1px hsla(0,0%,0%,.6),-1px -1px 1px hsla(0,0%,0%,.6);
transition:all .4s linear 0s;
}
.close_b:hover
{
color:hsla(0,0%,0%,1);
text-shadow:-1px -1px 1px hsla(0,0%,100%,.6),1px 1px 1px hsla(0,0%,100%,.6);
}
.ul_rubric
{
position:relative;
margin-left:20px;
margin-top:3px;
padding:4px;
box-shadow:hsla(0,0%,0%,.8) 2px 2px 3px;

background:url("img/fon_time_zt.png") repeat top left hsla(120,100%,30%,1);
display:none;
}
.li_rubric
{
padding:3px;
text-indent:3px;

}
.li_a_rubric
{
display:block;
color:hsla(0,0%,100%,1);
text-decoration:underline;
}
.li_a_rubric:hover
{
color:hsla(0,100%,50%,1);
}

/*--- content ---*/
.section_content
{
order:2;
flex-grow:1;
flex-shrink:1;
flex-basis:auto;
margin-left:15px;
margin-right:15px;
overflow-y:auto;

background:hsla(0,0%,100%,1);
}
.h2_content
{
font:100 1.4em/1.4 'Arial Narrow',sans-serif;
letter-spacing:1px;
color:hsla(240,80%,50%,1);
text-shadow:0px 0px 1px hsla(0,0%,0%,1);
}
/*--- aside_widget ---*/
.aside_widget
{
order:3;
min-width:calc((100vw - (100vw - 1600px)) / 5);

background:hsla(0,0%,100%,1);
}
.h3_widget
{
font:100 1.4rem/1.4 'Arial Narrow',sans-serif;
letter-spacing:1px;
color:hsla(240,80%,50%,1);
text-shadow:0px 0px 1px hsla(0,0%,0%,1);
}
.div_widget
{
border-left:1px solid hsla(0,0%,80%,1);
width:calc(100% - 20px);
margin:0 auto;
margin-bottom:4px;
padding:5px;
}
/*-- div_aside-widget --*/
.d_time
{
font:italic 100 1rem/1 'Arial Narrow', sans-serif;
background:url("img/fon_time_zt.png") repeat top left hsla(120,100%,30%,1);
}
.d_meteo
{
background:url("img/fon_time_zt.png") repeat top left hsla(240,100%,40%,1);
}
.widget_map_twin
{
width:calc(100%);
height:calc(120px);

background:url("img/grem_m.png") no-repeat center center hsla(0,0%,0%,0);
background-size:contain;
}
.widget_map_twin:hover
{
cursor:pointer;
} 
.d_map
{
background:url("img/fon_time_zt.png") repeat top left hsla(240,100%,40%,1);
}
.d_money
{
background:url("img/fon_time_zt.png") repeat top left hsla(240,100%,40%,1);
}
.strong_widget
{
display:block;
width:calc(100%);

letter-spacing:2px;
text-align:center;

font:100 1em/1 'Arial Narrow', sans-serif;
color:hsla(0,0%,30%,1);
}
/*-- strong_div-aside-widget --*/
.s_time
{
color:hsla(60,100%,50%,1);
}
.s_meteo
{
color:hsla(60,100%,50%,1);
}
.s_map
{
color:hsla(60,100%,50%,1);
}
.s_money
{
color:hsla(60,100%,50%,1);
}
/*___ correction[ main|section|aside ] ___*/
/*--- media-1500 ---*/
@media screen and (max-width:1500px) {
.main
{
padding:8px;
}
.section_rubric
{ 
min-width:calc((100vw - (100vw - 1300px)) / 5);
}
.nav_rubric
{
width:calc((100vw - (100vw - 1300px)) / 5);
}
.section_content
{ 
margin-left:10px;
margin-right:10px;
}
.aside_widget
{
min-width:calc((100vw - (100vw - 1300px)) / 5);
}
}
/*--- media-1200 ---*/
@media screen and (max-width:1200px) {
.main
{
padding:5px;
}
.section_rubric
{
min-width:calc(100vw / 5);
}
.nav_rubric
{
width:calc(100vw / 5);
}
.b_rubric
{
font-size:.9em;
}
.section_content
{ 
margin-left:5px;
margin-right:5px;
}
.aside_widget
{
min-width:calc(100vw / 5);
}
.widget_map_twin
{
height:calc(100px);
}
}
/*--- media-890 ---*/
@media screen and (max-width:890px) {
.main
{
padding:0px;
flex-wrap:wrap;
justify-content:flex-start;
}
.section_rubric
{
width:calc(100vw / 4);

box-shadow:none;
}
.nav_rubric
{
width:calc(100vw / 4);
}
.section_content
{ 
width:calc((100% - (100vw / 4)) - 5px);
margin-right:0px;

box-shadow:none;
}
.aside_widget
{
width:calc(100%);
margin-top:4px;

box-shadow:none;

display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-evenly;

background:url("img/fon_time_zt.png") repeat top left hsla(120,100%,30%,1);
}
.h3_widget
{
width:calc(100%);
background:hsla(0,0%,100%,1);
}
.div_widget
{
width:calc((100% / 4) - 2px);
margin-bottom:0px;

}
.d_time
{
order:1;
border-bottom:1px solid hsla(0,0%,80%,1);
}
.d_meteo
{
order:3;
}
.d_map
{
order:4;
}
.d_money
{
order:2;
border-bottom:1px solid hsla(0,0%,80%,1);
}
.widget_map_twin
{
height:calc(90px);
}
}
/*--- media-690 ---*/
@media screen and (max-width:690px) {
.main
{
display:block;
}
.section_rubric
{ 
width:calc(100%);
margin-bottom:5px;
}
.nav_rubric
{
position:static;
width:calc(100%);
}
.section_content
{ 
width:calc(100%);
margin:0 auto;
}
.aside_widget
{

}
.h3_widget
{

}
.div_widget
{
width:calc(100% / 2);
}

/*--- buttom mobile_menu ---*/
.mobile_menu
{
position:fixed;
top:26px;
left:5px;
width:calc(0px);
height:calc(0px);
opacity:0;
border-radius:5px;
box-shadow: inset -2px -2px 20px hsla(0,0%,0%,1), 2px 2px 5px hsla(0,0%,0%,1), inset 0px 0px 2px hsla(0,0%,0%,1);
cursor:pointer;
overflow:hidden;

background:hsla(120,100%,40%,1);
z-index:9;
}
.mobile_b
{
display:block;
margin:0;
padding:0;
opacity:0;

font:100 30px/1.6 'Arial Black',sans-serif;
color:hsla(0,0%,100%,1);
text-shadow:1px 1px 1px hsla(0,0%,0%,.6),-1px -1px 1px hsla(0,0%,0%,.6);
}
/*--- buttom close_mobile_menu ---*/
.close_m_menu
{
position:absolute;
top:5px;
left:calc(100% - 47px);
width:calc(0px);
height:calc(0px);
opacity:0;
padding:.5%;
border-radius:50%;
box-shadow: inset -2px -2px 20px hsla(0,0%,0%,1), 2px 2px 5px hsla(0,0%,0%,1), inset 0px 0px 2px hsla(0,0%,0%,1);
cursor:pointer;

background:hsla(0,100%,60%,1);
transition:all 2s linear 2s;
}
.close_m_menu:after 
{ 
background:hsla(0,0%,90%,.6);
content:'';
height:45%;
width:8%;
position:absolute;
top:4%;
left:15%;
border-radius:50%;
transform:rotate(40deg);
}
.close_m_b
{
display:block;
margin:0;
padding:0;

font:700 1.8em/1.4 'Arial Narrow',sans-serif;
color:hsla(0,0%,100%,1);
text-shadow:1px 1px 1px hsla(0,0%,0%,.6),-1px -1px 1px hsla(0,0%,0%,.6);
transition:all .4s linear 0s;
}
.close_m_b:hover
{ 
color:hsla(0,0%,0%,1);
text-shadow:-1px -1px 1px hsla(0,0%,100%,.6),1px 1px 1px hsla(0,0%,100%,.6);
}
/*--- mobile rubric ---*/
.nav_mobile_rubric
{
position:fixed;
top:calc(26px);
left:calc(5px);
width:calc(0px);
min-height:calc(0px);
padding:5px;
opacity:0;
box-shadow:hsla(0,0%,0%,1) 3px 3px 10px;
border:1px solid hsla(0,0%,40%,.8);

background:hsla(0,0%,100%,1);
z-index:10;
}
}
/*___ end correction[ main|section|aside ] ___*/

/*==-- footer --==*/
.footer
{
/*min-height:calc(150px);*/
padding:5px;
background:hsla(0,0%,100%,1);
}
.h4
{
width:calc(100%);

font:100 1.4rem/1.4 'Arial Narrow',sans-serif;
letter-spacing:1px;
color:hsla(240,80%,50%,1);
text-shadow:0px 0px 1px hsla(0,0%,0%,1);
}
.contacts
{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-evenly;
}
.contact_item
{
width:calc((100% / 2) - 4px);
margin-bottom:20px;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:space-evenly;
}
.social_a
{
display:block;
width:calc((100% / 2) - 20px);
}
/*--- footer image  ---*/
.contact_vk,.contact_ok,.contact_m,.contact_k
{
width:calc(100px);
height:calc(50px);

filter:drop-shadow(5px 5px 2px hsla(0,0%,0%,1));
transition:filter .2s linear 0s;
}
.contact_m:hover,.contact_k:hover,.contact_vk:hover,.contact_ok:hover
{
filter:none;
cursor:pointer;
}
.contact_k
{

}
.contact_vk
{

}
.contact_ok
{

}
.attention
{

}
.cite_contact
{
font:100 1em/1.2 'Arial Narrow',sans-serif;
color:hsla(0,0%,30%,1);
text-shadow:0px 0px 1px hsla(0,0%,0%,1); 
}
.img_contact
{
display:block;
width:calc(80px);
height:calc(50px);

filter:drop-shadow(5px 5px 2px hsla(240,100%,60%,1));
}
/*___ correction[ footer ] ___*/
/*--- media-1500 ---*/
@media screen and (max-width:1500px) {
.footer
{

}
}
/*--- media-1200 ---*/
@media screen and (max-width:1200px) {
.footer
{

}
}
/*--- media-890 ---*/
@media screen and (max-width:890px) {
.footer
{

}
.contact_vk,.contact_ok,.contact_m,.contact_k
{
/* width:calc(80px);
height:calc(40px); */
}
}
/*--- media-690 ---*/
@media screen and (max-width:690px) {
.footer
{

}
.message, .social
{
width:calc((100% / 2) - 4px);
margin-bottom:5px;
}
.attention
{
width:calc(100%);
}
}
/*--- media-420 ---*/
@media screen and (max-width:420px) {
.footer
{

}
.contact_item
{
width:calc(100%);
margin-bottom:20px;
}
.contact_m, .contact_k
{
width:calc((100% / 2) - 20px);
height:calc(60px);
}
.contact_vk, .contact_ok
{
width:calc(100% - 10px);
height:calc(60px);
}
}
/*___ end correction[ footer ] ___*/