/* File to keep all responsive features in one place */

/* Mobile */

.menu-button {
    display: none;
}

@media screen and (max-width: 767px) {
    .menu-button {
        position: absolute;
        right: 15px;
        top: 35px;
        display: flex;
        z-index: 1200;
    }

    .menu-button .icon {
        width: 25px;
        height: 25px;
        display: none;
    }

    .menu-button .icon svg {
        width: 100%;
        height: 100%;
    }

    .menu-button .icon-menu {
        display: block;
    }

    .menu-button.active .icon-menu {
        display: none;
    }

    .menu-button.active .icon-close {
        display: block;
    }

    body {
        min-width: 320px;
    }

    .container {
        max-width: 100%;
        width: 100% !important;
    }

    .main-content .container>.row {
        display: flex;
        flex-direction: column-reverse;
    }

    .navigation {
        width: 100%;
    }

    .navigation+div {
        width: 100%;
    }

    ul.navigation>li {
        width: 100%;
    }

    .logo {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        padding-right: 45px;
        padding-bottom: 25px;
        position: relative;
    }

    .navbar-wrapper {
        position: static;
    }

    .navbar-wrapper .navbar {
        position: absolute;
        top: 90px;
        left: 0;
        right: 0;
        z-index: 1200;
        display: none;
    }

    #navbar {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-wrapper .navbar .nav {
        display: flex;
        flex-direction: column;
        padding: 0;
        width: 100%;
    }

    .nav-justified>li {
        width: 100%;
        display: block;
    }

    .nav-justified>li+li {
        margin-top: 1px;
    }

    .nav-justified>li>a {
        font-size: 14px;
        padding: 10px 15px;
        line-height: 1em;
        text-align: left;
    }

    .logo>div {
        flex: 0 0 auto;
    }

    .logo .logoimg {
        flex: 0 0 auto;
    }

    .logo .logoimg img {
        margin-left: auto;
        margin-right: auto;
        max-width: 100px;
    }

    .logo .phones-block {
        flex: 1;
    }

    .logo .phones {
        display: flex;
        flex-direction: column;
        text-align: left;
        margin-right: 0;
        padding-top: 0;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .logo .phones a {
        flex: 1;
        font-size: 18px;
        line-height: 1.2em;
    }

    .logo .phones span.call {
        display: none;
        text-align: left;
        float: none;
        margin-left: 0;
    }

    .logo .callback {
        position: absolute;
        right: 60px;
        top: 100%;
        margin-top: -35px;
        width: auto;
        padding: 0;
    }


    .logo .callback a {
        float: none;
        text-align: left;
        margin: 0;
        width: 140px;
        background-size: 100% auto;
        height: 25px;
    }

    .logo .phones a .code {
        font-size: 14px;
    }

    .features {
        position: static;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        height: auto;
        width: 100%;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .features .item {
        flex: 0 0 calc(50% - 14px);
        width: 50%;
        margin: 7px;
        height: auto !important;
    }

    .features .item .inner img {
        flex: 0 0 36px;
    }

    .features .item .title {
        font-size: 15px;
        flex: 1;
    }

    .features .item .desc {
        line-height: 1.3em;
        font-size: 12px;
        display: block;
        flex: 0 0 100%;
    }

    .features .item .inner {
        padding: 10px;
        height: 85px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .features .item .more {
        display: block;
        padding-left: 15px;
    }

    .carousel.index {
        height: auto;
    }

    .carousel.index .carousel-inner {
        height: auto;
    }

    .carousel.index .item {
        height: auto;
    }

    .carousel.index .item .container {
        height: auto;
    }

    .container-inner {
        margin: 0;
    }

    .container-inner .slide {
        height: auto;
        padding: 15px;
    }

    .container-inner .slide .pull-left {
        float: none !important;
        display: block;
    }

    .container-inner .slide img {
        width: 100%;
        margin: 0 0 15px;
        max-height: none;
    }

    .gallery {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .gallery .cf {
        display: flex;
        flex-wrap: wrap;
        margin-left: -7px;
        margin-right: -7px;
    }

    .gallery .cf>div {
        margin: 7px;
        flex: 0 0 calc(50% - 14px);
        padding: 0 !important;
    }

    .gallery .cf>div>a {
        display: block;
    }

    .gallery .cf>div>a>img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .gallery.line .thumbnail {
        margin: 0;
        height: 100%;
    }

    .gallery .thumbnail .caption {
        height: auto;
    }

    .gallery .thumbnail .caption h3 {
        margin: 0 0 5px;
        line-height: .9em;
    }

    .gallery .thumbnail .caption h3 a {
        font-size: 15px;
    }

    .thumbnail p {
        margin-left: 0;
        margin-right: 0;
    }

    .pagination {
        display: block;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }

    .gallery.pager li>a,
    .gallery.pager li>span,
    a.back {
        float: none !important;
    }

    footer {
        height: auto;
    }

    footer .row {
        display: flex;
        flex-direction: column;
    }

    footer .row>div {
        width: 100%;
    }

    footer p {
        margin: 0 0 10px;
    }

    footer .phones {
        text-align: left;
        margin: 0;
    }

    footer .phones span.call {
        margin: 0 0 10px;
        display: block;
    }

    footer .phones a {
        text-align: left;
        margin: 0;
    }

    footer .phones a+a {
        margin-top: 10px
    }

    footer .footer__copyright,
    footer .footer__call,
    footer .footer__about {
        float: none;
        width: 100%;
        margin: 10px 0 0;
        padding: 0;
    }

    footer .social {
        width: 100%;
        display: flex;
        margin-top: 15px;
        margin-bottom: 15px
    }

    footer .social a+a {
        margin-left: 15px;
    }

    footer .copyright-block {
        order: 3;
        display: flex;
        flex-direction: column-reverse;
    }

    footer .phones-block {
        order: 1;
    }

    footer .socials-block {
        order: 2;
    }

    .lastnews .h3 {
        font-size: 15px;
    }

    .thumbnail {
        height: 100%;
    }

    .articels .preview img {
        width: 120px;
        height: 120px;
        object-fit: cover;
        margin: 0 10px 10px 0;
    }

    .articels .preview h3 {
        margin: 0 0 10px;
        font-size: 15px;
    }

    .articels .preview a.back {
        position: static;
    }

    div#popupCallAction {
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        position: fixed;
        right: 0px;
        margin: 0px;
        z-index: 1500;
        padding: 0;
    }

    div#popupCallAction * {
        box-sizing: border-box;
    }

    div#popupCallAction .m-body {
        margin: auto;
        height: 100%;
        width: 100%;
        position: relative;
        display: flex;
        z-index: 1200;
        padding: 20px;
    }

    #frm-recall {
        background-color: #fff;
        padding: 20px;
        margin: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    #frm-recall>div {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding: 0;
        float: none;
    }

    #frm-recall>div+div {
        margin-top: 20px;
    }

    #popupCallAction .field-recallme-name,
    #popupCallAction .field-recallme-phone,
    #popupCallAction .field-recallme-btn {
      width: 100%;
      margin-right: 0;
    }

    div#popupCallAction .send {
        width: 100%;
        margin: 0;
    }

    div#popupCallAction .modal-backdrop.in {
        display: block;
    }

    div#popupCallAction .close {
        right: auto;
        left: 0;
    }

    #TitleDescBlockHamburgerIcon {
        top: auto !important;
        bottom: 0;
        border-bottom-left-radius: 0 !important;
        border-top-left-radius: 6px;
    }

    .carousel {
        display: none;
    }
}


/* Tablet */