/*Смартфони*/
@media screen and (max-width: 767px) {

    html,
    body {
        height: 100vh;
        /*overflow: hidden;*/
    }

    header+div {
        display: table;
        height: calc(100vh - 129px);
    }

    header+.newyear {
        height: calc(100vh - 129px - 6rem);
    }

    dialog#noscript {
        width: calc(100% - 20px);
    }

    #header {
        box-shadow: 0 0 3px black;
        background-color: #e0ffe0;
    }

    #header>a:nth-of-type(n+2) {
        width: 24px;
        height: 24px;
        /*transform: translateX(-79px);*/
    }

    #bg-main_menu {
        position: absolute !important;
        width: 16px !important;
        height: 16px !important;
        background: url("/global/images/menu.png") no-repeat !important;
        background-size: contain !important;
        border: none !important;
        top: 79px;
        left: 10px;
        cursor: pointer;
        z-index: 9999;
    }

    #bg-main_menu:before {
        content: '';
        border: none !important;
        height: 100% !important;
    }

    #header.newyear+#bg-main_menu {
        top: calc(79px + 6rem);
    }

    #main_menu {
        display: none;
    }

    #bg-main_menu.open2>#main_menu {
        position: absolute;
        display: block;
        top: 15px;
        width: fit-content;
        max-width: 100vw;
        /*height: calc(100vh - 99px);*/
        height: fit-content;
        z-index: 9000;
        overflow-x: hidden;
        text-overflow: ellipsis;
        overflow-y: auto;
        border-top-left-radius: 0;
        white-space: nowrap;
        background: linear-gradient(90deg, #d3d1d1 0%, #f6f6f6 50%, #d3d1d1 90%) !important;
        padding: 10px 0 20px 20px !important;
        border: 1px solid #d3d1d1 !important;
    }

    #main_menu li {
        padding: revert !important;
        float: none !important;
        text-align: left !important;
        margin: 0 !important;
    }

    #main_menu li>div ul {
        display: none !important;
    }

    #main_menu li:hover {
        background: none !important;
        border-radius: revert !important;
        border: none !important;
    }

    .col_3,
    .col_5 {
        display: none !important;
    }

    #main_menu li>a.open+div,
    #main_menu li>div div.open1>ul,
    #main_menu li>a.open+.dropdown_1column ul {
        display: block !important;
    }

    #main_menu li:hover a:not(.open)+.dropdown_1column,
    #main_menu li:hover a:not(.open)+.dropdown_2columns,
    #main_menu li:hover a:not(.open)+.dropdown_3columns,
    #main_menu li:hover a:not(.open)+.dropdown_4columns,
    #main_menu li:hover a:not(.open)+.dropdown_5columns {
        display: none !important;
    }

    #main_menu li a,
    #main_menu h2,
    #main_menu h3 {
        font-size: 12px !important;
        color: #4af096 !important;
        text-shadow: 0 0 4px #006400, 2px 2px 2px #000 !important;
    }

    #main_menu li a:hover,
    #main_menu li h3:hover {
        color: #EEEEEE !important;
        text-shadow: 2px 2px 2px #000 !important;
    }

    .dropdown_1column,
    .dropdown_2columns,
    .dropdown_3columns,
    .dropdown_4columns,
    .dropdown_5columns {
        position: relative !important;
        display: none;
        float: none !important;
        border: none !important;
        background: none !important;
        border-radius: revert !important;
        left: auto !important;
        width: fit-content !important;
        margin: 0 !important;
        padding: 0 5px !important;
    }

    .drop {
        background: none !important;
    }

    #main_menu li:first-of-type div {
        display: none !important;
    }

    .col_1,
    .col_2,
    .col_4,
    .col_6,
    .col_7,
    .col_8,
    .col_10 {
        display: block !important;
        float: none !important;
        width: fit-content !important;
        white-space: nowrap;
    }

    .col_4 {
        margin-left: 5px !important;
    }

    .col_4~div {
        margin-left: 10px !important;
    }

    .col_4~div>ul {
        margin-left: 5px !important;
    }

    #main_menu h2 {
        /*font-size: 100% !important;*/
        font-weight: revert !important;
        padding: 0 !important;
        margin: 0 !important;
        letter-spacing: normal !important;

    }

    #main_menu h3 {
        /*font-size: 100% !important;*/
        margin: 0 !important;
        padding: 0 !important;
    }

    .leftPanel,
    .rightPanel {
        display: none;
    }

    .centerPanel {
        width: 100%;
        height: 100%;
        border: none;
        box-shadow: none;
        overflow-y: auto;
    }

    footer {
        height: 30px !important;
    }

    #counter {
        transform: scale(0.6) translate(-80%, -80%) !important;
    }

    #scrollBtn {
        display: none;
        position: fixed;
        width: 30px;
        height: 30px;
        bottom: 50px;
        right: calc(15% - 20px);
        border-radius: 15px;
    }

    #scrollBtn>i {
        width: 26px;
        height: 26px;
    }

    .zoomDialog {
        width: 90%;
    }

    .zoomDialog:before {
        content: 'zoom';
    }

    .zoomDialog .magnifier {
        position: absolute;
        /*width: 100px;
        height: 100px;*/
        border: none !important;
        border-radius: 0 !important;
        /*background-repeat: no-repeat;
        background-size: 300% 300%;
        pointer-events: none;
        display: none;
        background-color: white;*/
    }
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    header {
        top: -99px !important;
    }

    header+div {
        display: table;
        height: calc(100vh - 30px);
    }

    header+.newyear {
        height: calc(100vh - 32px - 12rem);
    }

    #header {
        height: 99px;
        background: url("/global/images/Chemical_structure.png") right center no-repeat,
            url("/global/images/left.png") right center repeat-x;
        background-color: #e0ffe0;
        background-size: contain, contain;
    }

    #header.newyear {
        background-position-y: 6rem;
        height: calc(99px + 6rem);
        background-size: auto calc(100% - 6rem);
    }

    #header>a {
        position: relative;
        width: calc(100% - 158px);
        display: block;
        left: calc(50% - 79px);
        font-size: 16pt !important;
    }

    #header>a:nth-of-type(n+2) {
        transform: translateX(-79px);
    }

    footer div {
        font-size: 8pt;
    }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
    #header {
        height: 99px;
        background: url("/global/images/Chemical_structure.png") right center no-repeat,
            url("/global/images/Me.png") left center no-repeat,
            url("/global/images/left.png") right center repeat-x;
        background-color: #e0ffe0;
        background-size: contain, contain, contain;
    }

    #header.newyear {
        background-position-y: 6rem;
        height: calc(99px + 6rem);
        background-size: auto calc(100% - 6rem);
    }

    #header>a {
        position: relative;
        width: calc(100% - 279px);
        display: block;
        /*left: calc(50% - 279px);*/
        /*font-size: 8vmin;18pt;*/
    }

    #bg-main_menu {
        left: 130px;
    }

    #main_menu {
        left: -120px;
    }

    footer div {
        white-space: nowrap;
    }
}

/*Планшети*/
@media screen and (min-width: 768px) and (max-width: 1023px) {

    html,
    body {
        height: 100vh;
        overflow: hidden;
    }

    header+div {
        display: block;
        height: calc(100vh - 129px);
    }

    header+.newyear {
        height: calc(100vh - 129px - 12rem);
    }

    #header {
        box-shadow: 0 0 3px black;
    }

    #header {
        height: 99px;
        background: url("/global/images/Chemical_structure.png") right center no-repeat,
            url("/global/images/Me.png") left center no-repeat,
            url("/global/images/left.png") right center repeat-x;
        background-color: #e0ffe0;
        background-size: contain, contain, contain;
    }

    #header>a {
        position: relative;
        width: calc(100% - 158px);
        display: block;
        left: calc(50% - 79px);
        font-size: 19pt !important;
    }

    #header>a:nth-of-type(n+2) {
        width: 24px;
        height: 24px;
        transform: translateX(-79px);
    }

    #bg-main_menu {
        position: absolute !important;
        width: 32px !important;
        height: 32px !important;
        background: url("/global/images/menu.png") no-repeat !important;
        background-size: contain !important;
        border: none !important;
        top: 79px;
        left: 10px;
        cursor: pointer;
        z-index: 9999;
    }

    #bg-main_menu:before {
        content: '';
        border: none !important;
        height: 100% !important;
    }

    #header.newyear+#bg-main_menu {
        top: calc(79px + 6rem);
    }

    #main_menu {
        display: none;
    }

    #bg-main_menu.open2>#main_menu {
        position: absolute;
        display: block;
        top: 28px;
        left: 2px;
        width: fit-content;
        max-width: 100vw;
        height: fit-content;
        z-index: 9000;
        overflow-x: hidden;
        text-overflow: ellipsis;
        overflow-y: auto;
        border-top-left-radius: 0;
        white-space: nowrap;
        background: linear-gradient(90deg, #d3d1d1 0%, #f6f6f6 50%, #d3d1d1 90%) !important;
        padding: 10px 0 20px 20px !important;
        border: 1px solid #d3d1d1 !important;
    }

    #main_menu li {
        padding: revert !important;
        float: none !important;
        text-align: left !important;
        margin: 0.5rem 0 !important;
    }

    #main_menu li>div ul {
        display: none !important;
    }

    #main_menu li:hover {
        background: none !important;
        border-radius: revert !important;
        border: none !important;
    }

    .col_3,
    .col_5 {
        display: none !important;
    }

    #main_menu li>a.open+div,
    #main_menu li>div div.open1>ul,
    #main_menu li>a.open+.dropdown_1column ul {
        display: block !important;
    }

    #main_menu li a,
    #main_menu h2,
    #main_menu h3 {
        font-size: 14px !important;
        color: #4af096 !important;
        text-shadow: 0 0 4px #006400, 2px 2px 2px #000 !important;
    }

    #main_menu h3+ul {
        margin-left: 1rem !important;
    }

    #main_menu li a:hover,
    #main_menu li h3:hover {
        color: #EEEEEE !important;
        text-shadow: 2px 2px 2px #000 !important;
    }

    .dropdown_1column,
    .dropdown_2columns,
    .dropdown_3columns,
    .dropdown_4columns,
    .dropdown_5columns {
        position: relative !important;
        display: none;
        float: none !important;
        border: none !important;
        background: none !important;
        border-radius: revert !important;
        left: auto !important;
        width: fit-content !important;
        margin: 0 !important;
        padding: 0 5px !important;
    }

    .drop {
        background: none !important;
    }

    #main_menu li:first-of-type div {
        display: none !important;
    }

    .col_1,
    .col_2,
    .col_4,
    .col_6,
    .col_7,
    .col_8,
    .col_10 {
        display: block !important;
        float: none !important;
        width: fit-content !important;
        white-space: nowrap;
    }

    .col_4 {
        margin-left: 5px !important;
    }

    .col_4~div {
        margin-left: 10px !important;
    }

    .col_4~div>ul {
        margin-left: 5px !important;
    }

    #main_menu h2 {
        font-size: 100% !important;
        font-weight: revert !important;
        padding: 0 !important;
        margin: 0 !important;
        letter-spacing: normal !important;

    }

    #main_menu h3 {
        font-size: 100% !important;
        margin: 0.5rem 0 !important;
        padding: 0 !important;
    }

    #bg-main_menu {
        left: 130px;
    }

    #main_menu {
        left: -120px;
    }

    .leftPanel,
    .rightPanel {
        display: none;
    }

    .centerPanel {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
        box-shadow: none;
        overflow-y: auto;
    }

    footer {
        height: 30px !important;
    }

    #counter {
        transform: scale(0.6) translate(-80%, -80%) !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {}

@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {}

/*Нетбуки*/
@media screen and (min-width: 1024px) and (max-width: 1279px) {}

/*Монітори*/
@media screen and (min-width: 1280px) {}