/*@media screen and (orientation: portrait)*/
@media screen and ( max-aspect-ratio: 162/100)
{
    :root{
        --width_menu: min( 62vw, 200px );
        --scroll_bar_width_now: calc(100vw - 100%);
    }
    .el_main
    {
        width: calc(100vw - var(--scroll_bar_width_now) );
        /*width: calc( 100vw );*/
    }
    .scroll1_menu {
        position: fixed;
        top: var(--height_header);
        z-index: 104;
    }
    .map_aboutUs iframe
    {
        margin: auto;
        width: min(90vh,90vw);
        height:  min(90vh,90vw);
    }
}
/*@media screen and (orientation: landscape)*/
@media screen and ( min-aspect-ratio: 162/100)
{
    :root{
        --width_menu: min( 200px,62vh );
        --scroll_bar_width_now: calc(100vw - 100%);
    }
    .el_main
    {
        width: calc( calc(100vw - var(--width_menu) ) - var(--scroll_bar_width_now) );
        /*width: calc( calc(100vw - var(--width_menu) ) );*/
    }
    .content_view
    {
        /*overflow-y:hidden;*/
        /*display: grid;*/
        /*grid-template-columns: 1fr 1fr 1fr 1fr ;*/
        /*grid-template-columns: 1fr  1fr;*/
        /*height: 100vh;*/
    }
    .map_aboutUs iframe
    {
        margin: auto;
        width: min(50vh,50vw);
        height:  min(50vh,50vw);
    }
}


/*потом разобраться с css scrollbar в js, не срабатывает при resaize window */
@media (pointer: fine) {
    *,
    html * /* override x.xhtml.ru style */
    {
        scrollbar-width: thin;
        scrollbar-color: var(--color1);
    }
    html *::-webkit-scrollbar {
        /*width: min(20px, 2vw, 5vh );*/
        width: var(--scroll_bar_width);
    }

    html *::-webkit-scrollbar-track{
        background-color: var(--color1);
    }

    html *::-webkit-scrollbar-thumb {
        background-color: var(--color2);
        /*border: calc( min(20px, 2vw, 5vh )/2.1) solid var(--color1);*/
        border: calc( var(--scroll_bar_width) / 2.1) solid var(--color1);
        min-height: min(40px,10vh);
    }


    html *::-webkit-scrollbar:horizontal {
        height:min(20px, 2vw, 5vh );
    }
    html *::-webkit-scrollbar-track:horizontal{
        background-color: var(--color1);
    }
    html *::-webkit-scrollbar-thumb:horizontal{
        background-color: var(--color2);
        /*border: calc( min(20px, 2vw, 5vh )/2.1) solid var(--color1);*/
        border: calc( var(--scroll_bar_width)/2.1) solid var(--color1);
        min-width: min(40px,10vw);
    }


    html *::-webkit-scrollbar-thumb:hover {
        background-color: var(--color2_hover);
        cursor: pointer;
    }


    .noactive_header:hover
    {
        fill: var(--color2_hover);
        color:var(--color2_hover);
        cursor: pointer;
    }
    .noactive_To:hover
    {
        /*fill: var(--color2_hover);*/
        stroke:darkred;
        cursor: pointer;
    }
    .active_To:hover
    {
        stroke:var(--color2_hover);
        cursor: pointer;
    }
    .plus_To:hover
    {
        fill: var(--color2_hover);
    }

    .name_p_menu:hover
    {
        color: var(--color2_hover);
    }
    .h_menu:hover
    {
        opacity: 0.4;
    }
}


@media (pointer: fine) {
    .arrow_left_zooms, .arrow_right_zooms
    {
        display: block;
    }

}

/*@media screen and (orientation: landscape)*/
@media screen and ( min-aspect-ratio: 162/100)
{
    .main_To
    {
        display:flex;
        flex-shrink:0;
    }
    .imgs_To
    {
        display:block;
        width:calc( ( 100vw  - var(--width_menu) )* 3 / 5   );
        max-width: 100vh;
        height:calc(100vh - var(--height_header));
        overflow-y:scroll;
        /*padding: 10px 5px 20px 0;*/
        padding: calc(var(--fontsize_menu) / 1.62 )
        calc(var(--fontsize_menu) / 3.2 )
        calc(var(--fontsize_menu) * 1.28 )
        calc(var(--fontsize_menu) / 1.62 );
    }
    .text_To
    {
        width:calc( ( 100vw  - var(--width_menu)  ) * 2 / 5  );
        min-width:calc( 100vw -  100vh - var(--width_menu) );
        overflow-y:scroll;
        height:calc(100vh - var(--height_header));
        /*padding: 10px 5px 20px 16;*/
        padding: calc(var(--fontsize_menu) / 1.62 )
        calc(var(--fontsize_menu) / 1.62 )
        calc(var(--fontsize_menu) * 1.28 )
        calc(var(--fontsize_menu) * 1 );
    }
    .img_To
    {
        margin:calc(var(--fontsize_menu) * 1 )
        calc(var(--fontsize_menu) / 2 )
        calc(var(--fontsize_menu) * 1 )
        calc(var(--fontsize_menu) / 2 );
    }
}
/*@media screen and (orientation: portrait)*/
@media screen and ( max-aspect-ratio: 162/100)
{
    .imgs_To
    {
        display:flex;
        width:100%;
        overflow-x:scroll;
        overflow-y:hidden;
        /*margin: 10px 0 0 0;*/
        padding-top: calc(var(--fontsize_menu) * 1.32 );
    }
    .text_To
    {
        display:block;
        padding: calc(var(--fontsize_menu) );
    }
    .img_To
    {
        width:85vw;
        margin: 0 0 0 calc(var(--fontsize_menu) / 1.62 );
    }
}
@media screen  and ( min-width: 700px )
{
    :root{
        /*--fontsize_menu: min(20px, 6vw, 5vh );*/
    }
}