/*
This file describes styles that are 1200px width and smaller
 */
@media  all and (max-width: 1200px) {
    h1 {
        font-size: 3.776rem;
        line-height: 6rem
    }

    h1:before {
        width: 100px;
        height: 6px
    }

    .thin-btn {
        padding: 8px 30px;
        font-size: 1.6rem
    }

    .top-banner, #header {
        display: none
    }

    .header .logo img {
        height: 50px;
        max-width: 300px;
    }

    /* header mobile styles */
    .header {
        padding-top: 15px;
        padding-bottom: 15px
    }

    .header .btn {
        margin: 0 15px 0 auto;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    #header-mobile {
        display: block
    }

    #header-mobile .container {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .menu-btn-open {
        width: 35px;
        height: 25px;
        display: flex;
        flex-direction: column;
        justify-content: space-between
    }

    .menu-btn-open > div {
        width: 100%;
        height: 2px;
        background-color: var(--white);
        border-radius: 5px
    }

    .menu-btn-close {
        width: 35px;
        height: 25px;
        position: relative
    }

    .menu-btn-close > div {
        right: -5px;
        width: 34px;
        height: 2px;
        background-color: var(--white);
        position: absolute;
        top: calc(50% - 1px);
        border-radius: 5px
    }

    .menu-btn-close > div:first-child {
        transform: rotate(45deg)
    }

    .menu-btn-close > div:last-child {
        transform: rotate(-45deg)
    }

    .menu-btns {
        z-index: 3
    }

    .menu-btns.open .menu-btn-open {
        display: flex
    }

    .menu-btns.open .menu-btn-close {
        display: none
    }

    .menu-btns:not(.open) .menu-btn-open {
        display: none
    }

    .menu-btns:not(.open) .menu-btn-close {
        display: block
    }

    .header-mobile-wrap {
        position: fixed;
        top: 0;
        left: 0;
        background-color: #347cbe;
        width: calc(100vw - 55px);
        height: 100vh;
        z-index: 2;
        padding: 15px;
        transition: 0.3s
    }

    .header-mobile-wrap .main-menu {
        padding: 105px 0 0
    }

    .header-mobile-wrap .main-menu ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px
    }

    .header-mobile-wrap .main-menu ul li a {
        line-height: 1;
        display: flex
    }

    .sub-menu {
        display: flex
    }

    .menu-item-has-children.hover > a {
        color: var(--accent-color);
        transition: 0.3s
    }
    .menu-item-has-children > a:after{
        top: 0
    }
    .menu-item-has-children.hover > a:after {
        content: url(../img/icons/arrow-down-menu-orange.svg);
        transform: rotate(-180deg);
        transition: 0.3s;
        top: 2px
    }
    .menu-item-has-children .sub-menu{
        padding-left: 10px
    }
    .header-mobile-wrap address a, .header-mobile-wrap address span{
        font-size: 1.8rem;
        color: var(--white);
        line-height: 2.6rem;
        width: fit-content;
        word-break: break-word
    }
    .header-mobile-wrap address{
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 45px
    }
    .header-mobile-wrap address .address{
        padding-left: 32px;
        position: relative
    }
    .header-mobile-wrap address .address:before{
        content: url("../img/icons/location-white-small.svg");
        position: absolute;
        top: 0;
        left: 0
    }
    .header-mobile-wrap address .email{
        padding-left: 32px;
        position: relative
    }
    .header-mobile-wrap address .email:before{
        content: url("../img/icons/msg-white.svg");
        width: 17px;
        height: 14px;
        position: absolute;
        top: 4px;
        left: 0
    }
    .header-mobile-wrap address .tel{
        padding-left: 32px;
        position: relative
    }
    .header-mobile-wrap address .tel:before{
        content: url("../img/icons/call-white-small.svg");
        width: 17px;
        height: 14px;
        position: absolute;
        top: 2px;
        left: 0
    }
    .header.menu-translate .header-mobile-wrap{
        transform: translateX(-100%);
        transition: 0.3s
    }
    .header:not(.menu-translate) .overlay{
        position: fixed;
        top: 0;
        right: 0;
        background: rgba(52, 124, 190, 0.6);
        backdrop-filter: blur(5px);
        width: 100vw;
        height: 100vh;
        transition: 0.1s
    }
    .header-mobile-wrap .main-menu nav >ul >li{
        flex-direction: column;
        gap: 20px
    }

    /* end of header mobile styles */

    .location-block address span:first-child {
        font-size: 2.6rem;
        line-height: 3.8rem
    }
    .location-block .inner-container, .ready-block .inner-container{
        flex-direction: column;
        align-items: flex-start;
        gap: 30px
    }
    .content-with-img-block .grid-2{
        grid-template-columns: 1fr
    }
    .page-title{
        height: 300px
    }
    .large-img-container{
        height: 400px
    }
    .contact-block .map-container{
        height: 450px
    }
    .preview-articles__items {
        gap: 40px 50px
    }
    .preview-articles .btn{
        margin: 75px auto 0
    }
    .size-slider-container {
        margin-top: 0
    }
    .size-slider-container .size-slider{
        margin-top: 60px
    }
    .size-slider-navigation .prev, .size-slider-navigation .next{
        width: 20px;
        height: 50px
    }
    .size-slider-item:not(.about-us-slider-block .size-slider-item) {
        margin: 0 40px
    }
    .size-slider-container .selection-items{
        gap: 15px
    }
    .size-slider-container .selection-items{
        padding-bottom: 5px
    }
    .size-slider-navigation{
        top: calc(25% - 25px)
    }
    .size-slider-item .media .img-container img{
        width: 100%
    }
    .size-slider-item .media .img-container{
        justify-content: center
    }
    .size-slider-item .media .img-container img {
        width: 95%;
        height: 100%
    }
    .size-slider-item .media .img-container{
        height: 400px
    }
    .size-slider-item .media .img-container:not(.about-us-slider-block .media .img-container){
        justify-content: center
    }
    .size-slider-item .media .img-container img,
    .size-slider-item:not(.about-us-slider-block .size-slider-item) .media .img-container img
    {
        width: auto;
        height: 400px;
    }
    .size-slider-container .selection-item{
        font-size: 1.6rem
    }
    .size-slider-block .size-slider-item .content{
        margin: 0 -40px
    }
    .size-slider-item.grid-2, .size-slider-block .grid-2{
        grid-template-columns: 1fr
    }
    .about-us-slider-block .slider-media-wrap{
        flex-direction: column
    }
    .about-us-slider-block .slider-media-wrap .img-container:not(.about-us-slider-block.history .slider-media-wrap .img-container):before {
        content: '';
        width: 110%;
        height: 55px;
        position: absolute;
        left: -5%;
        filter: blur(10px);
        background: linear-gradient(0deg, rgba(245, 245, 245, 0.5) 0%, rgba(245, 245, 245, 1) 25%, rgba(245, 245, 245, 1) 75%, rgba(245, 245, 245, 0.5) 100%);
        top: -27.5px;
    }
    .about-us-slider-block .slider-media-wrap .img-container:last-child:not(.about-us-slider-block.history .slider-media-wrap .img-container):after{
        content: '';
        width: 110%;
        height: 55px;
        position: absolute;
        left: -5%;
        filter: blur(10px);
        background: linear-gradient(0deg, rgba(245, 245, 245, 0.5) 0%, rgba(245, 245, 245, 1) 25%, rgba(245, 245, 245, 1) 75%, rgba(245, 245, 245, 0.5) 100%);
        bottom: -27.5px
    }
    .about-us-slider-block.history .slider-media-wrap .img-container:before {
        content: '';
        width: 110%;
        height: 55px;
        position: absolute;
        left: -5%;
        filter: blur(10px);
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0.5) 100%);
        top: -27.5px;
    }
    .about-us-slider-block.history .slider-media-wrap .img-container:after{
        content: '';
        width: 110%;
        height: 55px;
        position: absolute;
        left: -5%;
        filter: blur(10px);
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0.5) 100%);
        bottom: -27.5px
    }
    .about-us-slider-block .size-slider-item{
        margin: 0;
        min-width: calc(100vw - 30px) !important
    }
    .about-us-slider-block .size-slider-item .content{
        margin: 50px 0
    }
    .header-mobile-wrap address .arto-social{
        padding-left: 0
    }
    header .arto-social img{
        height: 17px
    }
    header .arto-social img:not(.arto-socail__in img){
        filter: invert(1)
    }


    /* footer */
    .footer .logo img{
        height: 50px;
        max-width: 100%;
    }

    .footer .short-info {
        margin-top: 50px
    }
    .footer .email{
        margin-top: 30px
    }
    .footer-top >div:not(:first-child) {
        padding-top: 0
    }
    .footer-bottom{
        flex-direction: column;
        padding: 15px 0 30px
    }
    /* end of footer */

    .header-mobile-wrap .arto-social {
        background: var(--brown);
        padding: 8px 5px 1px;
        margin-top: 10px;
    }
}