@media only screen and (min-width: 963px) {
    .head-container .main-menu > ul > li.menu-has-children ._arrow_wrap,
    .head-container .main-menu > ul > li.menu-has-children ._arrow_wrap > i { pointer-events: none; }
    .head-container .main-menu > ul > li.menu-has-children:hover > ul { top: 100%; opacity: 1; background: #FF6600; padding: 10px 0 7px; }
    .head-container .main-menu > ul > li.menu-has-children:hover > ul:not(.col-2):not(.col-3):not(.col-4) { display: block; }
    .head-container .main-menu > ul > li.menu-has-children:hover > ul.col-2,
    .head-container .main-menu > ul > li.menu-has-children:hover > ul.col-3,
    .head-container .main-menu > ul > li.menu-has-children:hover > ul.col-4 { display: grid; }

    .head-container .main-menu > ul > li.menu-has-children > ul > li:hover { background: var(--first-color); }
    .head-container .main-menu > ul > li.menu-has-children > ul > li.menu-has-children:hover > ul { display: grid; grid-template-columns: 1fr 1fr; background: var(--third-color); padding: 10px 0 7px; }
    .head-container .main-menu > ul > li.menu-has-children > ul > li.menu-has-children:hover > ul > li { height: 35px; line-height: 20px; }
    .head-container .main-menu > ul > li.menu-has-children > ul > li.menu-has-children:hover > ul > li > a { color: #fff; padding: 7px 15px; }
    .head-container .main-menu > ul > li.menu-has-children > ul > li.menu-has-children:hover > ul > li:hover { background: #333; }
    .head-container .main-menu > ul > li.menu-has-children > ul > li.menu-has-children:hover > ul > li:hover a { color: #fff; }
}

@media only screen and (max-width: 1280px) {
    #colophon nav { grid-template-columns: 1fr 1fr; }
    main.site-wth { padding-left: 12px; padding-right: 12px; }
}

@media only screen and (max-width: 1200px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.7rem; }
    h3 { font-size: 1.4rem; }
    h4 { font-size: 1.15rem; }
    h5 { font-size: 1.075rem; }
    h6 { font-size: 1rem; }

    .ms-popup-content.site-wth { max-width: 95vw; }
}

@media only screen and (max-width: 1100px) {
    #teamSlider { padding-bottom: 65%; }
}

@media only screen and (max-width: 1050px) {
    #colophon nav { grid-template-columns: 1fr 1fr; padding: 0 1.45rem; }
}

@media only screen and (max-width: 1024px) {
    .ms-platforms-websites { grid-template-columns: repeat(3, 1fr); }
}

@media only screen and (max-width: 962px) {
    #masthead { height: 86px; position: sticky; left: 0; top: 0; z-index: 100; width: 100%; z-index: 90; }
    #masthead .top-header { position: relative; z-index: 9999999; }
    #masthead .logo { margin-top: 0; padding-top: 2px; }
    #masthead .logo img { width: 145px; height: auto; }
    body.overflow-none #masthead .logo img { height: auto; filter: contrast(0) brightness(3.5); }
    #masthead .head-container .site-description { font-size: 0.7rem; padding: 0; margin-bottom: 0; height: auto; }
    .overflow-none #masthead .head-container .site-description { color: #fff; } /* fixing */
    #masthead .menu-toggle { display: block; position: fixed; right: 16px; top: 16px; width: 56px; height: 56px; z-index: 9999999; outline: none; margin: 0; }
    #masthead .toggled .nav-menu { background: rgb(0 48 81); color: #fff; }
    #masthead nav > ul > li a,
    #masthead nav > ul > li a,
    #masthead nav > ul > li._current a { background: none; }
    body.overflow-none #masthead nav .top-menu .phone-number a { color: #fff; }
    body.overflow-none #masthead nav .top-menu .phone-number a svg { fill: #fff; }

    .head-container { display: block !important; }
    .head-container .main-menu { height: auto; padding: 0 !important; }
    .head-container .main-menu button { display: block; }
    .head-container .main-menu > ul { float: none !important; position: fixed !important; left: -120%; top: 142px; z-index: 49; width: 100% !important;
        height: calc(100% - 102px); background: var(--first-color); opacity: 0; transition: left ease .3s, opacity ease .3s; padding-top: 0;
        overflow-y: auto; } /* fixing */
    .head-container .main-menu > ul::before { content: ''; position: fixed; display: block; top: 0; left: 0; width: 100%; height: 86px; background-color: #001f35;
        z-index: 70; border-bottom: 2px solid #001f35; pointer-events: none; }
    .head-container .main-menu.toggled ul { opacity: 1; left: 0; }

    #masthead nav .top-menu { left: -120%; right: auto; opacity: 0; transition: left ease .3s, opacity ease .3s; height: 56px; }
    #masthead nav.toggled .top-menu { display: block; left: 0; opacity: 1; right: auto; z-index: 99; padding: 10px 0;
        top: 86px; width: 100%; background: #002641; }
    #masthead nav.toggled .top-menu .blogpost-menu { padding-left: 8px; padding-right: 8px; display: flex; }
    #masthead nav.toggled .top-menu .phone-number a { padding: 3px 15px; font-size: 1.5rem; }

    #masthead nav > ul { /*padding-top: 76px;*/ } /* fixing */
    #masthead nav > ul > li { padding: 0; border-color: rgba(255, 255, 255, .15); margin: 0; }
    #masthead nav > ul > li > a { padding: 20px 5px 20px 15px; font-size: 1.3rem; border-radius: 0; }
    #masthead nav > ul > li > a::after { display: none; }

    .head-container .main-menu > ul ul { padding-bottom: 20px !important; }
    .head-container .main-menu > ul > li { display: block !important; height: auto; padding: 0; }
    .head-container .main-menu > ul > li:first-child { margin-top: 10px; }
    .head-container .main-menu > ul > li.focus > ul { display: block !important; position: static; padding: 0 20px; }
    .head-container .main-menu > ul > li.focus > ul.col-3 { display: grid !important; grid-template-columns: repeat(2, 1fr); }
    .head-container .main-menu > ul > li.focus > ul > li { display: block !important; height: auto; }
    .head-container .main-menu > ul > li.focus > ul > li > a { color: #fff; }
    .head-container .main-menu > ul > li.focus > ul > li.focus > ul { position: static !important; display: block !important; padding: 0 20px; }
    .head-container .main-menu > ul > li:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
    .head-container .main-menu > ul > li._current > a { border-left: 4px solid #3b9cef !important; }
    .head-container .main-menu > ul > li.menu-has-children > a > ._arrow_wrap { position: absolute; top: 0; right: 0; width: 56px; height: 56px; background: rgba(255, 255, 255, 0.2); text-align: center; }
    .head-container .main-menu > ul > li.menu-has-children > a > ._arrow_wrap > i { margin: 0; transition: transform .3s; }
    .head-container .main-menu > ul > li.menu-has-children.focus > a > ._arrow_wrap > i { -webkit-transform: rotate(180deg); }
    .head-container .main-menu > ul > li.menu-has-children > ul > li.menu-has-children > a > ._arrow_wrap { position: absolute; top: 0; right: 0; width: 35px; height: 35px; background: rgba(255, 255, 255, 0.2); text-align: center; line-height: 32px; }
    .head-container .main-menu > ul > li.menu-has-children > ul > li.menu-has-children > a > ._arrow_wrap > i { margin: 0; transition: transform .3s; transform: rotate(90deg); -webkit-transform: rotate(90deg); }
    .head-container .main-menu > ul > li.menu-has-children > ul > li.menu-has-children.focus > a > ._arrow_wrap > i { transform: rotate(270deg); -webkit-transform: rotate(270deg); }

    h1, .home-content .header-info-block h1 { font-size: 1.75rem; }
    h2 { font-size: 1.55rem; }
    #colophon h2 { font-size: 1.4rem; color: #fff; }

    #toTop { right: 10px; bottom: 10px; width: 40px; height: 40px; }

    .slider-global-wrap { grid-template-columns: 1fr 110px; }
	.slider-global-wrap .dynamic-content > li > a > svg { width: 60px; }

    .ms-slider-block .swiper-slide .sw-info > a { padding: 7px 14px; font-size: 1.25rem; }
    .ms-slider-block .swiper-slide .sw-info p { font-size: 1.3rem; line-height: 1.35rem; }
    .ms-slider-block .swiper-slide .sw-info p:first-child { font-size: 1.6rem; line-height: 1.6rem; }
    
    .contact--form .wpforms-container .wpforms-field-row.wpforms-field-medium { max-width: 100%; }
    .contact--form .wpforms-container .wpforms-field-row.wpforms-field-medium > div { width: 100%; }
}

@media only screen and (max-width: 910px) {
    .has-popup [itemprop='review'] [itemprop='reviewRating'] svg { width: 16px; height: 16px; }
    #teamSlider { padding-bottom: 80%; }
}

@media only screen and (max-width: 850px) {
    .slider-global-wrap { grid-template-columns: 1fr 90px; }
	.slider-global-wrap .dynamic-content > li > a > svg { width: 50px; }
}

@media only screen and (max-width: 810px) {
    #teamSlider { padding-bottom: 90%; }
}

@media only screen and (max-width: 800px) {}

@media only screen and (max-width: 768px) {
    .ms-platforms-websites { grid-template-columns: repeat(2, 1fr); }

    .slider-global-wrap .dynamic-content > li > a > svg { width: 40px; }
	.slider-global-wrap .dynamic-content { flex-direction: row; max-height: 120px; width: 100%; border-bottom: 1px solid #FF6600; }
	.slider-global-wrap .dynamic-content > li { border: none !important; padding: 5px 0; }
	.slider-global-wrap .dynamic-content > li > a { border: none !important; padding: 0 5px; }
	.slider-global-wrap .dynamic-content > li:not(:last-child) > a { border-right: 1px solid #ccc !important; }
	.slider-global-wrap .dynamic-content > li > a > span { margin-top: 3px; font-size: 1rem; }
    .slider-global-wrap { grid-template-columns: repeat(auto-fill, minmax(100%, max-content)); grid-auto-columns: max-content; grid-auto-flow: row; }

    .ms-slider-block .swiper-button-next,
    .ms-slider-block .swiper-button-prev { width: 13px; height: 22px; }
    .ms-slider-block .swiper-button-next::after,
    .ms-slider-block .swiper-button-prev::after { font-size: 1.3rem; }
    .ms-slider-block .swiper-slide .sw-info > a { padding: 5px 12px; font-size: 1.1rem; }
    .ms-slider-block .autoplay-progress { visibility: hidden; }
    .ms-slider-block .swiper-slide .sw-info p { font-size: 1rem; line-height: 1.1rem; }
    .ms-slider-block .swiper-slide .sw-info p:first-child { font-size: 1.3rem; line-height: 1.3rem; }

    .ms-partners-block { grid-template-columns: repeat(3, 1fr); }

    .ms-reviews-block .ms-review-header__name { display: block }

    .ms-services .service-block { display: block; }
    .ms-services .service-block svg { float: left; margin: 0 10px 15px 0; }
}

@media only screen and (max-width: 720px) {
    #teamSlider { padding-bottom: 55%; }
    .ms-team-block .swiper-slide { height: 100% !important; margin-top: 0 !important; margin-bottom: 0 !important; }
}

@media only screen and (max-width: 640px) {
    #teamSlider { padding-bottom: 70%; }
    .ms-team-block .employee-info > p:first-child { line-height: .9rem; font-size: .85rem; }
    .ms-team-block .employee-info > p:last-child { line-height: .7rem; font-size: .65rem; color: #fff; }
}

@media only screen and (max-width: 600px) {
    #colophon nav { grid-template-columns: 1fr; padding: 10px; }

    .ms-slider-block .swiper-slide .sw-info > a { padding: 3px 9px; font-size: .8rem; margin-top: 5px; }
    .ms-slider-block .swiper-slide .sw-info p { font-size: 0.75rem; line-height: 0.8rem; }
    .ms-slider-block .swiper-slide .sw-info p:first-child { font-size: 1.15rem; line-height: 1.15rem; }

    .ms-blogpost { grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(1, 1fr); }
    #colophon nav > div,
    #colophon nav > section { justify-self: center; text-align: center; }
} 

@media only screen and (max-width: 480px) {
    .ms-whyus-block .acc-item .acc-header h3 { font-size: .8rem; }
	.ms-whyus-block .acc-item .acc-header .acc-toggle-btn::after,
	.ms-whyus-block .acc-item .acc-header .acc-toggle-btn::before { width: 18px; }

    .ms-partners-block { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 440px) {
    .ms-platforms-websites { grid-template-columns: repeat(1, 1fr); }
}

@media only screen and (max-width: 414px) {
    html { font-size: 14px; }
    h1 { font-size: 1.725rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 1rem; }
}

@media only screen and (max-width: 375px) {}

@media only screen and (max-width: 360px) {
    #teamSlider { padding-bottom: 90%; }
    .ms-team-block .employee-info > p:first-child { line-height: .9rem; font-size: .85rem; }
    .ms-team-block .employee-info > p:last-child { line-height: .7rem; font-size: .65rem; }
}
