/*******************************************************************************
  ADAPTIVE LAYOUT
*******************************************************************************/
@media (min-width: 220px) {
    #admin-panel span,
    header .fixed-col,
    .banners,
    .row-fluid [class*="span"].address {
        display: none;
    }

    #admin-panel .nav-pills > li > a [class^="icon-"] {
        margin-left: -6px;
    }

    h1 {
        font-size: 2.4rem;
        line-height: 1.25;
    }

    ul ul, ul ol, ol ol, ol ul {
        margin-bottom: 0;
        margin-left: 25px;
    }

    #admin-panel {
        width: 5rem;
        overflow-y: auto;
    }

    .authorized,
    .authorized + footer {
        margin-left: 36px;
    }

    #admin-panel [class^="admin-icon-"] {
        padding-bottom: 5px;
        background-position: center;
    }

    #admin-panel + #body .navbar-fixed-bottom .navbar-inner {
        padding-left: 70px;
        padding-right: 0;
    }

    #admin-panel + #body .navbar-fixed-bottom {
        position: fixed;
    }

    #admin-panel + #body .navbar.navbar-fixed-bottom .btn {
        margin-right: 0;
        padding: 4px 10px;
    }

    #admin-panel + #body .navbar.navbar-fixed-bottom .btn.pull-right {
        float: none;
        margin-left: 4px;
    }

    .sortable li {
        line-height: 15px;
    }

    header, #body, footer {
        padding-right: 25px;
        padding-left: 25px;
    }

    #admin-panel + #body {
        padding-left: 5rem;
    }

    header .row-fluid [class*="span"].last ul,
    footer .row-fluid [class*="span"].last ul {
        margin-left: -5px;
    }

    header .describe {
        max-height: 22px;
        margin-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fixed-col {
        float: none;
        width: 100%;
        position: relative;
    }

    .fixed-col + [class*="row"] {
        margin-left: 0;
        width: 100%;
    }

    .promo .img-container {
        display: block;
        text-align: center;
        position: relative;
        width: 100%;
    }

    .promo img.invisible {
        display: none;
    }

    .promo .content {
        padding: 0 20px 10px;
    }

    .promo h1 {
        margin-top: 16px;
    }

    .audio .progress-bar {
        margin-right: 0;
    }

    .audio .volume {
        display: none;
    }

    .audio .info .timer {
        width: 60px;
    }

    .audio .info .text {
        margin-right: 60px;
    }

    .block-add .thumbnails {
        margin-left: 30px;
        margin-right: -5px;
    }

    .block-add .thumbnails > li {
        float: left;
        margin-left: 0;
    }

    .file-list a {
        max-width: 67%;
        width: 67%;
    }

    #body {
        padding-bottom: 280px;
    }

    footer {
        height: 250px;
        margin-top: -250px;
    }

    .content .share-bar > div {
        display: block !important;
        width: auto !important;
        text-align: left !important;
    }

    .content .share-bar > div + div {
        margin-top: 10px;
    }

    #admin-panel + #body .banners {
        display: block;
    }
}

@media (min-width: 480px) {
    ul ul, ul ol, ol ol, ol ul {
        margin-bottom: 0;
        margin-left: 33px;
    }

    #body {
        padding-bottom: 250px;
    }

    footer {
        height: 210px;
        margin-top: -210px;
    }

    #admin-panel + #body .navbar-fixed-bottom .navbar-inner {
        padding-right: 32px;
    }

    #admin-panel + #body .navbar.navbar-fixed-bottom .btn {
        padding: 4px 12px;
    }

    #admin-panel + #body .navbar.navbar-fixed-bottom .btn.pull-right {
        float: right;
        margin-left: 0;
    }

    .block-add .thumbnails {
        margin-left: 20px;
        margin-right: 0;
    }

    .block-add .thumbnails > li {
        margin-left: 10px;
    }

    .file-list a {
        max-width: 81%;
        width: 81%;
    }
}

@media (min-width: 600px) {
    h1 {
        font-size: 2.8rem;
    }

    ul ul, ul ol, ol ol, ol ul {
        margin-bottom: 0;
        margin-left: 50px;
    }

    header, #body, footer {
        padding-right: 50px;
        padding-left: 50px;
    }
}

@media (min-width: 768px) {
    .authorized,
    .authorized + footer {
        margin-left: 9rem;
    }

    .row-fluid [class*="span"].address {
        display: block;
    }

    #admin-panel {
        width: 9rem;
    }

    #admin-panel [class^="admin-icon-"] {
        background-position: center 15px;
        background-size: auto 20px;
        padding-bottom: 10px;
    }

    #admin-panel .nav-pills > li > a {
        padding: 0.8rem 2px;
    }

    #admin-panel .nav-pills > li > a [class^="icon-"] {
        margin-left: 0;
    }

    #admin-panel span {
        display: inline;
    }

    #admin-panel + #body .navbar-fixed-bottom .navbar-inner {
        padding-left: 50px;
        padding-right: 50px;
    }

    header .fixed-col {
        display: block;
        float: left;
        width: 241px;
        min-height: 174px;
    }

    header .fixed-col + [class*="row"] {
        margin-left: 280px;
        width: auto;
    }

    header [class*="row"] .span5,
    header [class*="row"] .span7 {
        width: 100%;
    }

    header .describe {
        max-height: none;
        margin-bottom: 5px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    header .row-fluid [class*="span"].last,
    footer .row-fluid [class*="span"].last {
        margin-left: 0;
    }

    header .row-fluid .last[class*="span"] ul,
    footer .row-fluid .last[class*="span"] ul {
        margin-left: 0;
        margin-right: -50px;
    }

    .promo .img-container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 57.265%;
    }

    .promo img.invisible {
        display: block;
    }

    .promo .content {
        padding: 20px 25px 20px 0;
    }

    .promo h1 {
        margin-top: 0;
    }

    .span4.how-to-block {
        width: 476px;
    }

    .file-list a {
        max-width: 77%;
        width: 77%;
    }

    #body {
        padding-bottom: 200px;
    }

    footer {
        height: 150px;
        margin-top: -150px;
    }
}

@media (min-width: 800px) {
    h1 {
        line-height: 40px;
    }
}

@media (min-width: 940px) {
    header {
        min-height: 95px;
    }

    header .fixed-col {
        min-height: auto;
    }

    .fixed-col {
        float: left;
        width: 241px;
    }

    .fixed-col + [class*="row"] {
        margin-left: 280px;
        width: auto;
    }

    header [class*="row"] .span7 {
        width: 57.26495726495726%;
        *width: 57.21176577559556%;
    }

    header [class*="row"] .span5 {
        width: 40.17094017094017%;
        *width: 40.11774868157847%;
    }

    header .row-fluid [class*="span"].last,
    footer .row-fluid [class*="span"].last {
        margin-left: 2.12766%;
    }

    header .row-fluid [class*="span"].last ul,
    footer .row-fluid [class*="span"].last ul {
        margin-left: 40px;
    }

    .audio .progress-bar,
    .audio .info .text {
        margin-right: 120px;
    }

    .audio .volume {
        display: block;
    }

    .audio .info .timer {
        width: 100px;
    }

    .file-list a {
        max-width: 84%;
        width: 84%;
    }

    .banners {
        display: block;
    }
}

@media (min-width: 1024px) {
    .span4.how-to-block {
        width: 620px;
    }
}

@media (min-width: 1280px) {
    .content .share-bar div {
        display: inline-block !important;
    }

    .share-bar div:nth-child(2) a {
        text-align: center !important;
        margin-left: 10px;
    }

    .content .share-bar div:nth-child(1) {
        width: 33% !important;
    }

    .content .share-bar div:nth-child(2) {
        margin-top: 2px !important;
        text-align: center !important;
        width: 43% !important;
    }

    .content .share-bar div:nth-child(3) {
        margin-top: 2px !important;
        text-align: right !important;
        width: 22% !important;
    }
}

@media (min-width: 1440px) {
    .how-to {
        display: none;
    }

    .span4.how-to-block {
        width: 320px;
    }
}

@media (min-width: 1600px) {
    .span4.how-to-block {
        width: 370px;
    }
}

@media (min-width: 768px) and (max-width: 799px) {
    header h1 {
        margin-top: 4px;
    }
}

@media (max-width: 767px) {
    .promo-slider .column {
        padding: 0;
        margin: 0;
    }

    .promo-slider .span5 {
        min-height: 200px;
        position: relative;
    }

    .promo-slider .content {
        padding: 0 10px 0 0;
        left: 20px;
        right: 20px;
        top: 20px;
        bottom: 20px;
    }

    .promo-slider .switcher-wrapper {
        width: 100%;
    }
}

/*MENU*/
@media (min-width: 220px) {
    .menu-btn {
        background: url("../img/icon-menu.832a5df559e1.svg") 50px center no-repeat;
        color: #fff;
        display: block;
        width: 200px;
        overflow: hidden;
        margin-top: -64px;
        margin-bottom: 30px;
        padding: 15px 0;
        text-align: center;
    }

    #menu-btn {
        display: none;
    }

    #menu-btn:checked + #left-menu {
        display: block;
        margin-top: -30px;
    }

    #left-menu .item-li a,
    #left-menu .item-2-li > a,
    #left-menu .item-3-li a, #right-menu li a {
        display: block;
        text-decoration: none;
        padding: 12px 0 11px;
    }

    #right-menu {
        max-width: 350px;
    }

    #right-menu li {
        list-style: none;
    }

    #right-menu li a {
        display: block;
        text-decoration: none;
        padding: 12px 20px 11px;
    }

    #left-menu {
        font-size: 1.6rem;
        margin-bottom: 40px;
        width: 100%;
        box-sizing: border-box;
    }

    #left-menu .parent {
        position: relative;
    }

    #left-menu .item-2-ul {
        margin: 0 0 24px 12px;
        display: none;
    }

    #left-menu .item-3-ul {
        display: none;
        margin: 0 0 10px 12px;
        font-size: 1.4rem;
    }

    #left-menu .item-3-li a {
        padding: 5px 0;
        opacity: 0.4;
    }

    #left-menu .item-3-li a:hover {
        opacity: 1;
    }
}

@media (min-width: 220px) and (max-width: 939px) {
    #right-menu,
    #left-menu,
    #left-menu .item-separator {
        display: none;
    }

    #left-menu {
        padding: 0 20px 20px;
    }

    #left-menu .parent > a {
        padding-right: 40px;
    }

    #left-menu .open .item-2-ul,
    #left-menu .open > .item-3-ul {
        display: block;
    }

    #left-menu .parent .sub-menu-icon {
        display: inline-block;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background-color: #6D8AAA;
        position: absolute;
        right: 0;
        top: 5px;
        z-index: 5;
        text-align: center;
        cursor: pointer;
    }

    #left-menu .parent .sub-menu-icon:hover::before {
        opacity: 0.7;
    }

    #left-menu .parent .sub-menu-icon::before {
        display: inline-block;
        content: '';
        width: 14px;
        height: 14px;
        margin-top: 1px;
        line-height: 14px;
        vertical-align: text-top;
        background-image: url("../img/glyphicons-halflings-white.9bbc6e960299.png");
        background-position: -313px -119px;
        background-repeat: no-repeat;
        transition: opacity 0.2s;
    }

    #left-menu .parent.open > .sub-menu-icon::before {
        background-position: -456px -72px;
    }

    .item-2-ul-scroll {
        max-height: none !important;
    }
}

@media (min-width: 768px) {
    #left-menu {
        position: absolute;
        z-index: 12;
    }
}

@media (min-width: 940px) {
    .menu-btn,
    #left-menu .parent .sub-menu-icon {
        display: none;
    }

    #menu-btn:checked + #left-menu {
        display: block;
        margin-top: 3px;
        margin-left: -20px;
        margin-right: -20px;
        position: relative;
    }

    #right-menu {
        margin-right: -25px;
    }

    #left-menu {
        position: relative;
    }

    #left-menu .item-li {
        margin-right: -20px;
        margin-left: -20px;
        padding-right: 20px;
        padding-left: 20px;
    }

    #left-menu .item-li:hover .item-2-ul-scroll {
        display: block;
    }

    #left-menu .item-3-ul {
        margin: -5px 0 2px;
        display: inline-block;
    }

    #left-menu .item-2-ul-scroll {
        display: none;
        position: absolute;
        top: 0;
        z-index: 12;
        left: 100%;
        overflow-y: auto;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    #left-menu .item-2-ul {
        margin: 0;
        column-gap: 0;
        display: block;
        padding-bottom: 12px;
    }

    #left-menu .item-2-li > a {
        padding: 22px 0 8px;
    }

    #left-menu .item-2-li > a:hover {
        text-decoration: underline;
    }

    #left-menu .item-2-li {
        display: inline-block;
        width: 100%;
    }

    #left-menu .item-2-li > a,
    #left-menu .item-3-li a {
        margin: 0 20px;
    }

    #left-menu .item-separator span {
        padding: 5px 20px;
        cursor: pointer;
        display: inline-block;
    }

    #left-menu .item-separator ~ .item-3-li {
        display: none;
    }
}

@media (min-width: 940px) {
    #left-menu .item-2-ul {
        width: 420px;
        column-count: 1;
    }
}

@media (min-width: 1024px) {
    #left-menu .item-2-ul {
        width: 600px;
        column-count: 2;
    }

    #left-menu .item-2-ul-column {
        width: 50%;
    }
}

@media (min-width: 1280px) {
    #left-menu .item-2-ul {
        width: 850px;
        column-count: 3;
    }

    #left-menu .item-2-ul-column {
        width: 33.3333%;
    }
}

@media (min-width: 1440px) {
    #left-menu .item-2-ul {
        width: 1024px;
        column-count: 4;
    }

    #left-menu .item-2-ul-column {
        width: 25%;
    }
}

@media (min-width: 1600px) {
    #left-menu .item-2-ul {
        width: 1180px;
        column-count: 4;
    }
}

#left-menu .item-2-ul--columns > .item-2-li {
    display: none;
}

#left-menu .item-2-ul--columns {
    /*column-count: 1;*/
    width: 100%;
    display: flex;
}

#left-menu .item-2-ul-column {
    flex-grow: 1;
}

/*MENU-colors*/
@media (min-width: 220px) {
    .menu-btn,
    #right-menu a:hover,
    #right-menu li.active a {
        background-color: #566E87;
        color: #fff;
    }
}

@media (min-width: 220px) and (max-width: 939px) {
    #left-menu > .item-li > a,
    #left-menu > .parent.open {
        border-bottom: 1px solid #6D8AAA;
    }

    #left-menu {
        background-color: #566E87;
    }

    #left-menu a {
        color: #fff;
    }
}

@media (min-width: 940px) {
    #left-menu .item-li > a {
        border-top: 1px solid #D7D7D7;
    }

    #left-menu .item-li:first-child > a {
        border-top: 1px solid transparent;
    }

    #left-menu .item-li.active {
        background-color: #6D8AAA;
    }

    #left-menu .item-li:hover,
    #left-menu .item-2-ul {
        background-color: #566E87;
    }

    #left-menu .item-separator,
    #left-menu .item-li.active > a,
    #left-menu .item-li:hover > a,
    #left-menu .item-2-li > a,
    #left-menu .item-3-li a {
        color: #fff;
    }

    #left-menu .item-li:hover > a,
    #left-menu .item-li.active > a,
    #left-menu .item-li:hover + .item-li > a,
    #left-menu .item-li.active + .item-li > a {
        border-color: transparent;
    }
}