:root {
    --default-color-1: #000000;
    --default-color-2: #cccccc;
    --default-color-3: #e2e2e2;
    --default-color-4: #658fa6;
    --default-color-5: #eef8ff;
    --default-color-6: #65a692;
    --default-color-7: #ffffff;
    --default-color-8: #a69465;
    --default-color-9: #6a6a6a;
    --default-color-10: #a81000;

    --default-font-1: 'Dosis', sans-serif;
    --default-font-2: 'Exo', sans-serif;

    --default-radius-1: 6px;
    --default-radius-2: 12px;
    --default-radius-3: 35px;

    --default-filter-1: invert(0%) sepia(96%) saturate(27%) hue-rotate(235deg) brightness(107%) contrast(103%);
    --default-filter-6: invert(63%) sepia(40%) saturate(331%) hue-rotate(111deg) brightness(88%) contrast(86%);
    --default-filter-7: invert(100%) sepia(0%) saturate(7487%) hue-rotate(337deg) brightness(109%) contrast(107%);
    --default-filter-9: invert(46%) sepia(0%) saturate(0%) hue-rotate(218deg) brightness(87%) contrast(87%);

    --default-transition-1: all 0.5s cubic-bezier(0.4,0,0.2,1);
    --default-transition-2: all 0.3s;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; font-family: inherit; font-size: 100%; font-weight: inherit; outline: 0; vertical-align: baseline
}
html {font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%}
body {line-height: 1}
article, aside, details, figcaption, figure, footer, header, nav, section {display: block}
ol, ul {list-style: none}
table {border-collapse: separate; border-spacing: 0}
caption, th, td {font-weight: 400; text-align: left}
blockquote::before, blockquote::after, q::before, q::after {content: ''}
blockquote, q {quotes: '' ''}
a:focus {outline: 0}
a:active {outline: 0}
a img {border: 0}
em {font-style: italic}
u {text-decoration: underline}
strong {font-family: inherit; font-weight: 700}
.clear {display: block; clear: both}
.pointer {cursor: pointer}

/* General */
* {margin: 0; padding: 0}
*, *::after, *::before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}

html {height: 100%!important; min-height: 100%!important; font-size: 16px}
html.mac {height: auto!important}
body {background-color: var(--default-color-7); width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0; color: var(--default-color-1); font-family: var(--default-font-1); font-size: 1rem; line-height: 22px; font-weight: 400; overflow-x: hidden; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding: 0; color: var(--default-color-1); font-family: var(--default-font-2); font-weight: 700; line-height: 1.2; text-align: left; text-transform: var(--tt, uppercase)}
h1, .h1 {font-size: 2.875rem} h2, .h2 {font-size: 2.375rem} h3, .h3 {font-size: 2.25rem} h4, .h4 {font-size: 1.875rem} h5, .h5 {font-size: 1.5rem} h6, .h6 {font-size: 1.125rem}

a {color: var(--default-color-6); text-decoration: underline; -webkit-transition: var(--default-transition-1); transition: var(--default-transition-1)}

/* header elements */
header {background-color: rgba(226,226,226,0.9); display: block; width: 100%; padding: 0 18px; position: fixed; top: 0; left: 0; z-index: 11; transition: all 0.3s}
header.hide {transform:translateY(-100%)}
    header > .wrapper {min-height: 120px}
        .header-left {width: 345px; position: relative}
        .header-left::before {content: ''; background-color: rgba(255,255,255,0.5); display: block; width: calc(50vw - 50% + 345px); height: 100%; position: absolute; top: 0; left: calc(-1 * (50vw - 50%)); z-index: -1}
        .header-left::after {content: ''; background: rgba(255,255,255,0.5); width: 30px; height: 100%; position: absolute; top: 0; right: -30px; clip-path: polygon(0 0, 30px 0, 1px 100%, 0 100%)}
            .header-left .logo {display: block; width: 288px; margin: 0; line-height: 0}
                .header-left .logo img {width: 100%; max-width: 100%; height: auto}
        .header-right {width: calc(100% - 375px); margin: 0 0 0 auto; padding-left: 30px}
            .header-right .nav {margin: 0; padding: 0; color: var(--default-color-1); font-size: 1.063rem; line-height: 1.2}
                .header-right .nav li {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap}
                .header-right .nav li:not(:last-child)::after {content: '|'; display: block; margin: 0 18px}
                    .header-right .nav li a {color: inherit; font-weight: 500; text-decoration: none}
            .header-right .social {background-color: rgba(101,143,166,0.4); margin: 0 0 0 27px; padding: 0}
                .header-right .social li {width: 40px; margin: 0}
                    .header-right .social li a {background-color: transparent; display: block; width: 40px; height: 40px; font-size: 0; line-height: 0; text-decoration: none}
                    .header-right .social li a::before {content: ''; background: transparent no-repeat center center; background-size: 20px; display: block; width: 40px; height: 40px; -webkit-filter: var(--default-filter-1); filter: var(--default-filter-1)}
                    .header-right .social li.facebook a::before {background-image: url('../art/svg/social-facebook.svg')}
                    .header-right .social li.x-twitter a::before {background-image: url('../art/svg/social-x-twitter.svg')}
                    .header-right .social li.instagram a::before {background-image: url('../art/svg/social-instagram.svg')}
                    .header-right .social li.youtube a::before {background-image: url('../art/svg/social-youtube.svg')}
                    .header-right .social li.tiktok a::before {background-image: url('../art/svg/social-tiktok.svg')}

    nav {background-color: var(--default-color-6); display: block; width: 100vw; margin: 0 -18px}
        nav .nav {height: 60px; color: var(--default-color-7); font-size: 1.25rem; line-height: 1.2; font-weight: 500}
            nav .nav > li {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 1px; position: relative}
            nav .nav > li::before, nav .nav > li::after {
                content: ''; background-color: var(--default-color-4); width: 100%; height: 40px; opacity: 0; position: absolute; top: calc(50% - 19px); left: 0; z-index: 0; border-radius: var(--default-radius-1); -webkit-transition: var(--default-transition-1); transition: var(--default-transition-1)
            }
            nav .nav > li.active::after {opacity: 1}
                nav .nav > li > a {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 17px; color: inherit; text-decoration: none; cursor: pointer; position: relative; z-index: 1}
/*                nav .nav > li.withToggle > a::after {content: ''; background: transparent url('../art/svg/icon-chevron-down.svg') no-repeat center center; background-size: 12px; display: inline-block; width: 10px; height: 6px; margin-left: 6px; position: relative; top: 3px; vertical-align: middle; -webkit-filter: var(--default-filter-7); filter: var(--default-filter-7)}*/
                nav .nav > li.active > a {}
                nav .nav .subMenu {
                    background-color: var(--default-color-7); min-width: 230px; color: var(--default-color-1); font-size: 1.1rem; font-weight: 500; line-height: 1.2; text-transform: none; opacity: 0; position: absolute; top: 100%; z-index: -99999; visibility: hidden;
                    -webkit-box-shadow: 0 15px 15px 0 rgba(0,0,0,0.09); -moz-box-shadow: 0 15px 15px 0 rgba(0,0,0,0.09); box-shadow: 0 15px 15px 0 rgba(0,0,0,0.09); -webkit-transition: all 0.3s ease; transition: all 0.3s ease
                }
                nav .nav .subMenu {left: 0}
                nav .nav .subMenu.align-left {right: 0; left: auto}
                nav .nav .subMenu .subMenu {top: 9px; left: 100%}
                nav .nav .subMenu .subMenu.align-left {right: 100%; left: auto}
                nav .nav .subMenu li {position: relative}
                    nav .nav .subMenu li a {display: block; margin: 0; padding: 9px 20px 9px 20px; color: inherit; font-weight: 500; text-decoration: none; position: relative}
                    nav .nav .subMenu li.withToggle a {padding-right: 40px}
                    nav .nav .subMenu li a::before {content: ''; background-color: var(--default-color-4); width: 10px; height: 2px; opacity: 0; position: absolute; top: calc(50% - 1px); left: 0; transition: all 0.3s ease-in-out}
                    nav .nav .subMenu li.withToggle > a::after {content: ''; background: transparent url('../art/svg/icon-chevron-right.svg') no-repeat center center; background-size: 12px; width: 7px; height: 11px; position: absolute; top: calc(50% - 5.5px); right: 24px; transition: all 0.3s ease-in-out}

                    nav .nav .subMenu li.active > a {padding-left: 40px; color: var(--default-color-1)}
                    nav .nav .subMenu li.active > a::before {background-color: var(--default-color-1); opacity: 1; left: 20px}
        .header-mobile-btn {display: none}

/* slider elements */
#top-slider {background-color: transparent; margin-bottom: 0; padding: 0; height: 100vh; /*max-height: 860px*/; position: relative}
    #top-slider .slider-for {width: 100vw; max-width: 100vw; margin: 0 auto; line-height: 0; overflow: visible}
    #top-slider .slider-for:not(.slick-initialized) .slider-box {display: none; opacity: 0}
        #top-slider .slider-for:not(.slick-initialized) .slider-box:first-child {display: block; opacity: 1}
        #top-slider .slider-for .slick-list {overflow: visible}
            #top-slider .slider-for .slick-list .slick-slide {padding: 0 0; opacity: 0.6; -webkit-transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1); transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1)}
            #top-slider .slider-for .slick-list .slick-slide.slick-active {opacity: 1}
        #top-slider .slider-for .slider-box picture {display: block; line-height: 0; position: relative}
        #top-slider .slider-for .slider-box picture::after {content: ''; background-color: #dfd7a9; display: block; width: 100vw; height: 100%; opacity: 43%; position: absolute; top: 0; left: 0; z-index: 0; mix-blend-mode: darken}
            #top-slider .slider-for .slider-box picture img {width: 100%; height: 100vh; max-height: 100vh; position: relative; top: 0; left: 0; -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; -moz-object-position: center center; -o-object-position: center center; object-position: center center; -webkit-filter: saturate(0.4); filter: saturate(0.4)}
    .top-slider-slogen {
        background-color: var(--default-color-6); max-width: 870px; padding: 60px 140px; color: var(--default-color-7); font-family: var(--default-font-2); font-size: 3.5rem; font-weight: 700; line-height: 1.2; text-align: center; text-transform: uppercase;
        position: absolute; bottom: 40px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);
        clip-path: polygon(60px 0, 100% 0, calc(100% - 60px) 100%, 0px 100%)
    }
#top-slider.content-site {background-color: #eef8ff; height: auto; max-height: inherit}
    #top-slider.content-site .slider-for .slider-box picture img {max-height: 460px}
    #top-slider.content-site .top-slider-slogen {bottom: 0}
        #top-slider .top-slider-slogen .btnLink {margin-top: 8px; padding-top: 18px}
.slick-dots {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center}
    .slick-dots li {width: 15px; height: 15px; margin: 0 3px}
        .slick-dots li button {background-color: var(--default-color-7); border: 1px solid var(--default-color-7)}
        .slick-dots li.slick-active button {background-color: var(--default-color-4); border-width: 3px}

/* main elements */
main {background-color: transparent; display: block; width: 100%; padding-right: 18px; padding-left: 18px; position: relative}
main::before {content: ''; background: linear-gradient(to bottom,#eef8ff 40%,rgba(238,248,255,0) 80%); display: block; width: 100vw; height: 100%; position: absolute; top: 0; left: 0; z-index: -2}
    main > .wrapper {padding-top: var(--pt, 100px); padding-right: var(--pr, 0); padding-bottom: var(--pb, 105px); padding-left: var(--pl, 0)}
    main #curve-svg {position: absolute; top: 50%; left: 0; z-index: -1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%)}
    main #curve-svg.article-page {top: auto; bottom: 105px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none}
    #services-category {margin: 0; padding: 0}
        #services-category h1 {width: 100%; margin-bottom: 0; padding: 0 15px 13px; text-align: center}
        #services-category .col-sm-6 {margin: 15px 0; position: relative}
            #services-category picture {display: block; width: 100%; overflow: hidden; position: relative; z-index: 0; border-radius: var(--default-radius-2)}
            #services-category picture::before {content: ''; background-color: rgba(0,0,0,0.2); display: block; width: 100%; padding-top: 46.38%}
            #services-category picture::after {content: ''; background-color: var(--default-color-6); display: block; width: 0; height: 0; opacity: 0; position: absolute; bottom: 0; left: 0; z-index: 1; border-top-right-radius: 50% 100%; transition: var(--default-transition-1)}
                #services-category picture img {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; -moz-object-position: center center; -o-object-position: center center; object-position: center center}
            #services-category .content {display: block; width: 100%; padding: 0 125px 0 35px; color: var(--default-color-7); line-height: 1.2; text-decoration: none; position: absolute; bottom: 26px; left: 0; z-index: 1}
            #services-category .content::after {content: ''; background: transparent var(--bgimg) no-repeat center center; background-size: 60px; width: 60px; height: 60px; position: absolute; bottom: 0; right: 35px; -webkit-filter: var(--default-filter-7); filter: var(--default-filter-7)}
                #services-category .content span {display: block; font-size: 1.125rem}
                #services-category .content span.title {margin-bottom: 2px; font-family: var(--default-font-2); font-size: 1.375rem; font-weight: 700}
    #breadcrumb-nav {margin-bottom: 38px; color: var(--default-color-9); font-size: 1.125rem; line-height: 1.2}
        #breadcrumb-nav a {color: inherit; text-decoration: none}
        #breadcrumb-nav a::after {content: ''; background: transparent url('../art/svg/icon-chevron-right.svg') no-repeat center center; background-size: 9px; display: inline-block; width: 6px; height: 8px; margin: 0 6px 0 6px; position: relative; top: -1px; -webkit-filter: var(--default-filter-9); filter: var(--default-filter-9)}
        #breadcrumb-nav a:not(.home) {padding-top: 2px}
        #breadcrumb-nav a.home {font-size: 0; line-height: 0}
        #breadcrumb-nav a.home::before {content: ''; background: transparent url('../art/svg/icon-house-fill.svg') no-repeat left center; background-size: 26px; display: inline-block; width: 24px; height: 24px; -webkit-filter: var(--default-filter-9); filter: var(--default-filter-9)}
        #breadcrumb-nav a.home::after {top: -5px}
        #breadcrumb-nav span {padding-top: 2px; color: var(--default-color-1)}
    .article {}
        .article h1, .article .h1, .article h2, .article .h2, .article h3, .article .h3, .article h4, .article .h4, .article h5, .article .h5, .article h6, .article .h6 {margin-bottom: var(--ah-mb, 30px); text-align: var(--ah-ta, left)}
        .article p, .article ul, .article ol {margin: 0 0 30px; padding: 0; font-size: var(--ah-fs, 1.25rem); line-height: 1.625rem; text-align: var(--ah-ta, inherit)}
        .article ul {padding: 0 0 0 30px}
            .article ul li {position: relative}
            .article ul li::before {content: ''; background: transparent url('../art/svg/icon-check2.svg') no-repeat center center; background-size: 23px; display: block; width: 23px; height: 16px; margin: 0; position: absolute; top: 6px; left: -30px; -webkit-filter: var(--default-filter-7); filter: var(--default-filter-7)}
            .article ul.filter-black li::before {-webkit-filter: var(--default-filter-1); filter: var(--default-filter-1)}
            .article ul.filter-green li::before {-webkit-filter: var(--default-filter-6); filter: var(--default-filter-6)}
        .article picture {display: block; width: 100%; height: 100%; line-height: 0}
            .article picture img {width: 100%; height: 100%; border-radius: var(--default-radius-2); -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; -moz-object-position: center center; -o-object-position: center center; object-position: center center}
        .article-grid-content {display: grid; grid-template-columns: var(--gtc, 4fr 5fr 3fr); width: 100%; column-gap: var(--cg, 30px); row-gap: var(--rw, 0); margin-bottom: var(--ag-mb, 0)}
            .article-grid-content .left-side {}
                .article-grid-content .left-side h5 {margin-bottom: 37px; font-size: 1.625rem; font-weight: 500}
            .article-grid-content .right-side {background-color: var(--default-color-4); padding: 50px 20px; color: var(--default-color-7); position: relative; border-radius: var(--default-radius-2)}
            .article-grid-content .right-side::before {content: ''; background: transparent var(--bgimg) no-repeat center center; background-size: 52px; width: 52px; height: 52px; position: absolute; top: 22px; right: 27px; -webkit-filter: var(--default-filter-7); filter: var(--default-filter-7)}
                .article-grid-content .right-side h6 {margin-bottom: 32px; padding-right: 80px; color: inherit; font-size: 1.625rem; font-weight: 500}
                .article-grid-content .right-side a {color: inherit; text-decoration: none}
                .article-grid-content .right-side .btnLink {width: 100%; max-width: 305px; margin: 30px auto 0}
                .article-grid-content .right-side ul {margin-bottom: 0}
            .article.contact .article-grid-content .right-side {line-height: 0; overflow: hidden}
                #mapIframe {width: calc(100% + 40px); margin: 20px -20px -50px; line-height: 0}
        .article-grid-content.table {margin-bottom: 30px; font-size: var(--ah-fs, 1.25rem); line-height: 1.625rem; text-align: var(--ah-ta, inherit)}
            .article-grid-content.table .title, .article-grid-content.table .content {padding: 15px; border-color: var(--default-color-2); border-style: solid; border-width: 0 0 1px 1px; font-weight: 500}
            .article-grid-content.table .content {border-right-width: 1px}
            .article-grid-content.table .title:nth-child(1), .article-grid-content.table .content:nth-child(2) {border-top-width: 1px}
/*        .article .menu-category {display: grid; grid-template-columns: var(--gtc, repeat(4, 1fr)); width: 100%; column-gap: var(--cg, 30px); row-gap: var(--rw, 30px); margin: 0; padding: 0}*/
        .article .menu-category {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 -15px; padding: 0}
            .article .menu-category li {
                background-color: var(--default-color-6); -webkit-box-flex: 0; -ms-flex: 0 0 calc(25% - 30px); flex: 0 0 calc(25% - 30px); max-width: calc(25% - 30px);
                min-height: 100px; margin: 0 15px 15px; padding: 0; color: var(--default-color-7); position: relative; border-radius: var(--default-radius-2);
                -webkit-transition: var(--default-transition-1); -moz-transition: var(--default-transition-1); transition: var(--default-transition-1)
            }
            .article .menu-category li::before {display: none}
                .article .menu-category li a {
                    display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
                    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; padding: 15px; color: inherit; font-size: 1.5rem; font-weight: 600; line-height: 1; text-align: center; text-decoration: none;
                }

.category-group-title:first-child {padding-top: 0}
.category-group-title {padding-top: 30px; padding-bottom: 15px; font-size: 1.5rem; font-weight: 500}

.category-title {
    display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--default-color-6);
    width: 100%; margin-top: 10px; padding: 16px 50px 14px 15px; color: var(--default-color-7); font-size: 1.25rem; font-weight: 600; line-height: 1.2; position: relative; cursor: pointer; border-radius: 2px
}
.category-title::before {content: ''; background: transparent url('../art/svg/icon-plus.svg') no-repeat center center; background-size: auto; background-size: 10px; width: 10px; height: 10px; position: absolute; top: 22px; right: 18px; -webkit-filter: var(--default-filter-7); filter: var(--default-filter-7)}
.category-title.active::before {background-image: url('../art/svg/icon-minus.svg')}
.category-desc {display: none; padding: 10px}
    .category-desc > *:not(script) {margin-bottom: 0; padding-bottom: 0}

/* team-section */
#team-section {background-color: var(--default-color-4); margin-top: var(--mt, 0)}
    #team-section .wrapper {background-color: var(--default-color-4); background-image: url('../art/bg-team-section.jpg'); background-position: right top; background-repeat: no-repeat; width: calc(50% + 135px); max-width: inherit; padding: 0 80px 0 18px}
        #team-section .wrapper .content {max-width: 775px; margin-left: auto; padding: 60px 0 68px; color: var(--default-color-7)}
            #team-section .wrapper p:not(.title) {margin: 0 0 23px; padding: 0; font-size: 1.25rem; line-height: 1.625rem}
            #team-section .wrapper .title {margin: 0 0 19px; padding: 0; color: inherit}
            #team-section .wrapper .btnLink {margin-top: 22px}
    #team-section picture {display: block; width: calc(50% - 135px); line-height: 0}
        #team-section picture img {width: 100%; height: 100%; -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; -moz-object-position: center center; -o-object-position: center center; object-position: center center}

/* call-section-1, call-section-2 */
#call-section-1 {background-color: var(--default-color-6); background-image: url('../art/bg-call-banner-1.png'); background-position: center bottom; background-repeat: no-repeat; width: 100%; margin-top: var(--mt, 0); padding: 0 48px; position: relative}
    #call-section-1::after {content: ''; width: calc(100% - 40px); height: calc(100% - 40px); border: 1px dashed rgba(255,255,255,0.5); position: absolute; top: 20px; left: 20px; z-index: 1}
    #call-section-1 .wrapper {-ms-flex-wrap: nowrap; flex-wrap: nowrap; max-width: 1680px; height: 210px}
        #call-section-1 .wrapper .left-side {-ms-flex-item-align: center; align-self: center; max-width: 630px; position: relative; z-index: 1}
            #call-section-1 .wrapper .left-side p {margin: 0; padding: 0; color: var(--default-color-7); font-size: 1.625rem; font-weight: 500; letter-spacing: 0.05em; line-height: 2.125rem}
        #call-section-1 .wrapper picture {display: block; min-width: 380px; width: 630px; margin: 0 20px 0 30px; line-height: 0; overflow: hidden; position: relative; z-index: 0; clip-path: polygon(60px 100%, 100% 100%, calc(100% - 60px) 0, 0px 0)}
            #call-section-1 .wrapper picture img {width: 100%; height: 100%; -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; -moz-object-position: center bottom; -o-object-position: center bottom; object-position: center bottom}
        #call-section-1 .wrapper .right-side {-ms-flex-item-align: center; align-self: center; width: 275px}
            #call-section-1 .wrapper .right-side a {
                background-color: var(--default-color-4); display: block; width: 70px; height: 70px; padding: 13px 0 13px 70px; color: var(--default-color-7);
                font-size: 1.125rem; line-height: 1.2; text-decoration: none; opacity: 0; overflow: hidden; position: relative; z-index: 2; white-space: nowrap; border-radius: 70px;
                -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px);
                -webkit-transition: -webkit-transform 1s ease, opacity 1s ease, width 0.6s ease 1.8s, border-radius 0.6s ease 1.8s;
                -moz-transition: -moz-transform 1s ease, opacity 1s ease, width 0.6s ease 1.8s, border-radius 0.6s ease 1.8s;
                transition: transform 1s ease, opacity 1s ease, width 0.6s ease 1.8s, border-radius 0.6s ease 1.8s;
            }
            #call-section-1 .wrapper .right-side a::before {
                content: ''; background: transparent url('../art/svg/icon-headset-solid-full.svg') no-repeat center center; background-size: 27px; display: block; width: 46px; height: 46px;
                border: 1px solid var(--default-color-1); opacity: 0; position: absolute; top: calc(50% - 22.5px); left: 12px; border-radius: var(--default-radius-3); -webkit-filter: var(--default-filter-7); filter: var(--default-filter-7);
                transition: opacity 0.8s ease 1.2s;
            }
                #call-section-1 .wrapper .right-side a strong {display: block; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.11em; opacity: 0; -webkit-transition: opacity 0.4s ease 2.4s; -moz-transition: opacity 0.4s ease 2.4s; transition: opacity 0.4s ease 2.4s}
                #call-section-1 .wrapper .right-side a span {display: block; opacity: 0; -webkit-transition: opacity 0.4s ease 2.6s; -moz-transition: opacity 0.4s ease 2.6s; transition: opacity 0.4s ease 2.6s}

            #call-section-1.animated .wrapper .right-side a {width: 275px; opacity: 1; border-radius: var(--default-radius-3); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0)}
            #call-section-1.animated .wrapper .right-side a::before {opacity: 1}
                #call-section-1.animated .wrapper .right-side a strong, #call-section-1.animated .wrapper .right-side a span {opacity: 1}
#call-section-2 {margin-top: var(--mt, 0); position: relative; z-index: 0}
    #call-section-2 .content {color: var(--default-color-7); line-height: 1.2; text-align: center; position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%)}
        #call-section-2 .title {margin-bottom: 18px; font-family: var(--default-font-2); font-size: 2.25rem; font-weight: 600}
        #call-section-2 .text {margin-bottom: 36px; font-size: 1.25rem; font-weight: 600}
        #call-section-2 .btnLink {background-color: var(--default-color-6); width: 280px; min-height: 70px; padding-top: 21px; padding-right: 40px; padding-left: 40px; font-size: 1.5rem; font-weight: 600}
        #call-section-2 .btnLink::after {content: ''; background: transparent url('../art/svg/icon-envelope-at.svg') no-repeat center center; background-size: 26px; display: inline-block; width: 30px; height: 26px; margin-left: 20px; position: relative; top: -3px; vertical-align: middle; -webkit-filter: var(--default-filter-7); filter: var(--default-filter-7)}
    #call-section-2 picture {display: block; width: 100vw; height: 400px; line-height: 0; position: relative; z-index: 0}
    #call-section-2 picture::after {content: ''; background-color: rgba(0,0,0,0.6); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1}
        #call-section-2 picture img {width: 100%; height: 400px; -moz-object-fit: cover; -o-object-fit: cover; object-fit: cover; -moz-object-position: center center; -o-object-position: center center; object-position: center center}

/* footer elements */
footer {background-color: var(--default-color-1); display: block; width: 100%; padding-right: 18px; padding-left: 18px}
    #fbefore {}
        #fbefore .wrapper {border-bottom: 1px solid rgba(255,255,255,0.1)}
            #fbefore .nav {margin: 0; padding: 20px 0; color: var(--default-color-7); font-size: 1rem; font-weight: 500; line-height: 1.2}
                #fbefore .nav li {margin: 0 2px}
                    #fbefore .nav li a {display: block; padding: 12px 10px; color: inherit; text-decoration: none}
                    #fbefore .nav li:not(.active) a:hover {color: var(--default-color-6)}
                    #fbefore .nav li.active a {color: var(--default-color-6)}
    #fafter {}
        #fafter .wrapper {padding: 32px 0 37px; color: var(--default-color-7); font-size: 1rem; line-height: 1.2; opacity: 0.8}
            #fafter .wrapper .left-side {margin-right: auto}
                #fafter .wrapper .left-side .sep {margin: 0 10px}
                #fafter .wrapper .left-side .copyright {}
                #fafter .wrapper .left-side a {color: inherit; text-decoration: none}
            #fafter .wrapper .right-side {}
                #fafter .wrapper .right-side a {color: inherit; text-decoration: none}
    #backToTop {background-color: var(--default-color-8); width: 44px; height: 44px; color: inherit; line-height: 0; opacity: 0; position: fixed; z-index: 10; top: calc(100% - 80px); right: -20px; cursor: pointer; border-radius: var(--default-radius-3)}
    #backToTop::before {content: ''; background: transparent url('../art/svg/icon-chevron-up.svg') center center no-repeat; background-size: 20px; display: block; width: 44px; height: 44px; -webkit-filter: var(--default-filter-7); filter: var(--default-filter-7);}
    .show-backtotop #backToTop {opacity: 1; right: 20px}

/* animation */
@-webkit-keyframes fadeIn {from {opacity: 0} to {opacity: 1}}
@keyframes fadeIn {from {opacity: 0} to {opacity: 1}}
@-webkit-keyframes fadeInUp {from {opacity: 0; -webkit-transform: translate3d(0, 100%, 0)} to {opacity: 1; -webkit-transform: translate3d(0, 0, 0)}}
@keyframes fadeInUp {from {opacity: 0; transform: translate3d(0, 100%, 0)} to {opacity: 1; transform: translate3d(0, 0, 0)}}
@-webkit-keyframes fadeInRightHalf {from {opacity: 0; -webkit-transform: translate3d(40%, 0, 0)} to {opacity: 1; -webkit-transform: translate3d(0, 0, 0)}}
@keyframes fadeInRightHalf {from {opacity: 0; transform: translate3d(40%, 0, 0)} to {opacity: 1; transform: translate3d(0, 0, 0)}}
@media (min-width: 993px){
    @-webkit-keyframes picture {0% {clip-path: polygon(100% 100%, 100% 100%, calc(100% - 60px) 0, calc(100% - 60px) 0)} 100% {clip-path: polygon(60px 100%, 100% 100%, calc(100% - 60px) 0, 0px 0)}}
    @keyframes picture {0% {clip-path: polygon(100% 100%, 100% 100%, calc(100% - 60px) 0, calc(100% - 60px) 0)} 100% {clip-path: polygon(60px 100%, 100% 100%, calc(100% - 60px) 0, 0px 0)}}
}
@-webkit-keyframes slideInRight {from {opacity: 0; visibility: visible; -webkit-transform: translate3d(100%, 0, 0)} to {opacity: 1; -webkit-transform: translate3d(0, 0, 0)}}
@keyframes slideInRight {from {opacity: 0; visibility: visible; transform: translate3d(100%, 0, 0)} to {opacity: 1; transform: translate3d(0, 0, 0)}}
@-webkit-keyframes slideInLeft {from {opacity: 0; visibility: visible; -webkit-transform: translate3d(-100%, 0, 0)} to {opacity: 1;  -webkit-transform: translate3d(0, 0, 0)}}
@keyframes slideInLeft {from {opacity: 0; visibility: visible; transform: translate3d(-100%, 0, 0)} to {opacity: 1;  transform: translate3d(0, 0, 0)}}
@-webkit-keyframes slideInDown {from {opacity: 0; visibility: visible; -webkit-transform: translate3d(0, -100%, 0)} to {opacity: 1; -webkit-transform: translate3d(0, 0, 0)}}
@keyframes slideInDown {from {opacity: 0; visibility: visible; transform: translate3d(0, -100%, 0)} to {opacity: 1; transform: translate3d(0, 0, 0)}}

.animated {-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both}
.animated span, .animated p, .animated picture, .animated .btnLink, .animated .left-side, .animated .middle-side, .animated .right-side {
    -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: var(--anim-name, none); animation-name: var(--anim-name, none);
    -webkit-animation-duration: var(--anim-duration, unset); animation-duration: var(--anim-duration, unset); -webkit-animation-delay: var(--anim-delay, unset); animation-delay: var(--anim-delay, unset);
}

/* global */
.none {display: none} .block {display: block} .inline {display: inline-block} .bTable {display: table} .bTableRow {display: table-row} .bTableCell {display: table-cell} .floatLeft {float: left} .floatRight {float: right} .hidden {overflow: hidden}
.flex {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap}

.align-items-start {-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start}
.align-items-end {-webkit-box-align: end; -ms-flex-align: end; align-items: flex-end}
.align-items-center {-webkit-box-align: center; -ms-flex-align: center; align-items: center}
.align-items-stretch {-webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch}

.align-self-start {-ms-flex-item-align: start; align-self: flex-start}
.align-self-end {-ms-flex-item-align: end; align-self: flex-end}
.align-self-center {-ms-flex-item-align: center; align-self: center}

.align-content-start {-ms-flex-line-pack: start; align-content: flex-start}
.align-content-end {-ms-flex-line-pack: end; align-content: flex-end}
.align-content-center {-ms-flex-line-pack: center; align-content: center}

.justify-content-start {-webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start}
.justify-content-end {-webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end}
.justify-content-center {-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center}
.justify-content-between {-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between}
.justify-content-around {-ms-flex-pack: distribute; justify-content: space-around}

.flex-column {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column}

.flex-wrap {-ms-flex-wrap: wrap; flex-wrap: wrap}
.flex-nowrap {-ms-flex-wrap: nowrap; flex-wrap: nowrap}

.wrapper {width: 100%; max-width: 1440px; margin: 0 auto}
.row {margin-right: -15px; margin-left: -15px}
.boxBeforeAfter::before, .boxBeforeAfter::after {content: ''; display: block; clear: both}

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {width: 100%; padding-right: 15px; padding-left: 15px}

.col-sm-1 {-webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%}
.col-sm-2 {-webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%}
.col-sm-3 {-webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%}
.col-sm-4 {-webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%}
.col-sm-5 {-webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%}
.col-sm-6 {-webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%}
.col-sm-7 {-webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%}
.col-sm-8 {-webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%}
.col-sm-9 {-webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%}
.col-sm-10 {-webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%}
.col-sm-11 {-webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%}
.col-sm-12 {-webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%}

/* form element */
.form {background-color: var(--default-color-3); margin: 0; padding: 30px; border-radius: var(--default-radius-2)}
    .form .descBlock {margin-bottom: 30px; font-size: 1.125rem; font-weight: 500}

form .input, form select, form textarea, form .capcsa_input, form .input-text {
	background-color: var(--default-color-7); width: 100%; height: 50px; margin: 0; padding: 2px 15px 0; border: 1px solid var(--default-color-2); color: var(--default-color-1); font-family: inherit; font-size: 1.125rem; font-weight: 400; line-height: 1.2;
	outline: none; resize: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: var(--default-radius-1); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s
}
form .input-text {background-color: var(--xlightgray); padding-top: 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none}
form textarea {height: 100px; padding: 15px}
form select {background-color: var(--white); background-image: url('../art/svg/icon-chevron-down.svg'); background-position: right 15px top 18px; background-repeat: no-repeat; background-size: 12px; padding-right: 35px; -webkit-appearance: none; -moz-appearance: none; appearance: none}
    form select option {background-color: var(--white); font-size: 0.875rem}

.btn, .btnLink {
	background-color: var(--default-color-1); display: inline-block; min-width: inherit; min-height: 60px; padding: 1px 30px 0; border: 1px solid transparent; color: var(--default-color-7); font-family: inherit; font-size: 1.375rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
	text-transform: uppercase; outline: none; cursor: pointer; position: relative; z-index: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: var(--default-radius-2); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
    -webkit-transition: all 0.5s cubic-bezier(0.4,0,0.2,1); -moz-transition: all 0.5s cubic-bezier(0.4,0,0.2,1); transition: all 0.5s cubic-bezier(0.4,0,0.2,1)
}
.btnLink {padding-top: 16px; padding-bottom: 8px}

a.link {padding: 0 3px; text-decoration: none; position: relative; z-index: 0; -webkit-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
a.link::after {content: ''; background-color: var(--black); width: 100%; height: 1px; position: absolute; bottom: -2px; left: 0; z-index: -1; -webkit-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)}

.graphDesign {text-align: center; position: relative}
    .graphDesign input {display: none; width: 0; height: 0; opacity: 0; visibility: hidden}
    .graphDesign label {display: inline-block; min-height: 22px; padding-left: 32px; color: var(--default-color-1); font-size: 1rem; cursor: pointer; position: relative}
    .graphDesign label::before {content: ''; background-color: var(--default-color-7); width: 22px; height: 22px; border: 1px solid var(--default-color-3); position: absolute; top: 0; left: 0; border-radius: 3px}
    .graphDesign label::after {content: ''; background-color: var(--default-color-1); width: 12px; height: 12px; opacity: 0; position: absolute; top: 5px; left: 5px; border-radius: 3px}
    .graphDesign input[type="radio"] + label::before, .graphDesign input[type="radio"] + label::after {border-radius: 50%}
    .graphDesign input[type="checkbox"]:checked + label::after, .graphDesign input[type="radio"]:checked + label::after {opacity: 1}
    .graphDesign label a {color: var(--black); font-weight: 500; text-decoration: underline}

.form-group {margin-bottom: 15px}
.form-group:not(.graphDesign) label {}
    .form-group label {padding-bottom: 2px; font-size: 1.125rem; text-align: left}
        .form-group label .required {color: var(--default-color-10)}
    .form-group .warning {width: 100%; padding-top: 2px; color: var(--default-color-10); font-size: 1.125rem; font-weight: 500; line-height: 1.2}
.form-group.captcha {-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 20px}
    .form-group.captcha label {width: 100%; text-align: center}
    .form-group.captcha .input {width: 120px; margin-right: 15px}
    .form-group.captcha img {margin: 7px 0}
    .form-group.captcha .warning {text-align: center}
.form-group.btnBlock {padding-top: 20px; text-align: center}

.form-group input.alapterulet{width: 85%; margin-right: 10px}

.form .warning.information {margin-bottom: 30px; font-size: 1.125rem; font-weight: 600}

.alertBox.success {font-size: 24px; text-align: center}
    .alertBox.success strong {display: block; font-size: 2rem; font-weight: 700}

/* hover */
@media (-moz-touch-enabled: 0), (hover: hover){

    nav .nav > li:not(.active):hover::before {opacity: 0.7}
    nav li:hover > .subMenu {opacity: 1; top: 100%; z-index: 99999; visibility: visible}
    nav .nav .subMenu li:not(.active):hover > a {padding-left: 40px; color: var(--default-color-4)}
    nav .nav .subMenu li:not(.active):hover > a::before {opacity: 1; left: 20px}
    nav .nav .subMenu li.withToggle:hover > a::after {right: 14px}

    #breadcrumb-nav a:hover {color: var(--default-color-1)}
    #breadcrumb-nav a.home:hover::before {-webkit-filter: var(--default-filter-1); filter: var(--default-filter-1)}

    .article .menu-category li:hover {background-color: var(--default-color-4); box-shadow: 0 5px 12px 1px rgba(0,0,0,0.2)}
    .article-grid-content .right-side a:hover {color: var(--default-color-1)}

    #services-category .col-sm-6:hover picture::after {width: 79.7%; height: 100%; opacity: 0.45}
    #call-section-1 .wrapper .right-side a:hover {background-color: var(--default-color-1)}
    #call-section-2 .btnLink:hover {background-color: var(--default-color-4)}

    #fafter .wrapper .left-side a:hover, #fafter .wrapper .right-side a:hover {color: var(--default-color-6)}
    #backToTop:hover {background-color: var(--default-color-6)}

    #contact-line .wrapper .btnLink:hover {background-color: var(--white); color: var(--black)}

    .btn:hover, .btnLink:hover {background-color: var(--default-color-6); color: var(--default-color-7)}
    .graphDesign label a:hover {color: var(--default-color-6); text-decoration: none}
    a.link:hover {color: var(--default-color-6)}

    .top-slider-slogen a:hover{background: #658fa6}

    .header-right .nav li a:hover {color: var(--default-color-4)}
    .header-right .social li a:hover {background-color: var(--default-color-6)}
    .header-right .social li a:hover::before {-webkit-filter: var(--default-filter-7); filter: var(--default-filter-7)}
}

/* media */
@media (min-width: 993px){
    .pcNone {display: none!important}
    .mobileNone {display: block!important}
}
@media (max-width: 2560px){
    .top-slider-slogen {max-width: 1080px; padding: 2.734vw 6.641vw; font-size: 2.188vw; clip-path: polygon(2.344vw 0, 100% 0, calc(100% - 2.344vw) 100%, 0px 100%);

padding: 1.734vw 6.641vw; white-space: nowrap;

}
    .no-fp .top-slider-slogen {padding-top: 2vw; padding-bottom: 2vw}
}

@media (max-width: 2048px){
    #top-slider .top-slider-slogen .btnLink {min-height: 2.93vw; margin-top: 8px; padding-top: 0.879vw; font-size: 1.074vw}
}
@media (max-width: 1680px){
    #top-slider .top-slider-slogen .btnLink {min-height: 3.571vw; margin-top: 8px; padding-top: 1.071vw; font-size: 1.31vw}
}
@media (max-width: 1280px){
    #call-section-1 .wrapper .left-side p {font-size: 1.375rem; line-height: 1.2}
}
@media (max-width: 1080px){
    header > .wrapper {min-height: 90px}
        .header-left {width: 215px}
        .header-left::before {width: calc(50vw - 50% + 215px)}
            .header-left .logo {width: 188px}
        .header-right {width: calc(100% - 215px)}
            .header-right .nav {font-size: 1rem}
    nav .nav {font-size: 1.125rem}
    #call-section-1 .wrapper .left-side p {font-size: 1.25rem}
}
@media (max-width: 992px){
    .pcNone {display: block!important}
    .mobileNone {display: none!important}
    html {font-size: 14px}
    .header-right .nav {display: none}
    .header-mobile-btn {background-color: var(--default-color-1); display: block; width: 40px; height: 40px; margin: 0 0 0 25px; padding: 0; border: none; font-size: 0; line-height: 0; position: relative; cursor: pointer; -webkit-transition: var(--default-transition-1); -moz-transition: var(--default-transition-1); transition: var(--default-transition-1)}
        .openedNav .header-mobile-btn:after {content: ''; display: block; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 98}
            .header-mobile-btn span {
                background-color: var(--default-color-7); display: block; width: calc(100% - 24px); height: 2px; font-size: 0; line-height: 0; overflow: inherit;
                position: absolute; top: 50%; left: 12px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%)
            }
                .header-mobile-btn span:before, .header-mobile-btn span:after {
                    content: ''; background-color: var(--default-color-7); width: 100%; height: 100%; position: absolute; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;
                    -webkit-transform: translateZ(0); transform: translateZ(0); transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s
                }
                .header-mobile-btn span:before {top: -7px; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0)}
                .header-mobile-btn span:after {bottom: -7px; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0)}
            .openedNav .header-mobile-btn span {background-color: var(--default-color-1)}
                .openedNav .header-mobile-btn span:before, .openedNav .header-mobile-btn span:after {background-color: var(--default-color-7)}
                .openedNav .header-mobile-btn span:before {top: 0; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg)}
                .openedNav .header-mobile-btn span:after {bottom: 0; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg)}
    nav {background-color: transparent; width: auto; height: 100vh; padding: 0; text-align: left; position: fixed; top: 0; left: 0; z-index: 99; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none}
    	nav > .wrapper {
            background-color: var(--default-color-1); width: 100%; max-width: 414px; height: 100vh; height: calc(var(--vh, 1vh) * 100); margin: 0; padding: 0; opacity: 0; overflow: hidden; position: fixed; top: 0; left: -105%; z-index: 999; -webkit-box-shadow: 0 0 70px 10px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 70px 10px rgba(0,0,0,0.3); box-shadow: 0 0 70px 10px rgba(0,0,0,0.3);
            -webkit-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; -webkit-overflow-scrolling: touch; -webkit-backface-visibility: hidden; backface-visibility: hidden;
            overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        }
    	.openedNav nav > .wrapper {opacity: 1; left: 0}
        nav .nav {display: block; width: 100%; height: auto; font-size: 1.25rem}
            nav .nav > li {margin: 0; border-bottom: 1px solid rgba(255,255,255,0.1)}
            nav .nav > li::before, nav .nav > li::after {height: 100%; top: 0; border-radius: 0}
                nav .nav > li > a {width: 100%; min-height: 50px; padding-top: 16px; padding-right: 80px; padding-bottom: 18px}
                nav .nav > li.withToggle > a::after {display: none!important}
                    nav .nav .subMenu {background-color: var(--default-color-3); width: 100%; opacity: 1; position: relative; top: auto!important; left: auto!important; z-index: 1; visibility: visible; -webkit-transition: none!important; -moz-transition: none!important; transition: none!important}
                        nav .nav .subMenu li a {padding-top: 16px; padding-right: 80px; padding-bottom: 18px; border-bottom: 1px solid rgba(0,0,0,0.15); box-shadow: none}
                nav .nav .toggle {background-color: var(--default-color-7); width: 40px; height: 40px; cursor: pointer; position: absolute; top: 5px; right: 15px; z-index: 2; border-radius: var(--default-radius-1)}
                nav .nav .toggle::after {content: ''; background: transparent url('../art/svg/icon-chevron-down.svg') no-repeat center center; background-size: 17px; display: block; width: 100%; height: 100%; -webkit-filter: var(--default-filter-1); filter: var(--default-filter-1)}
    #top-slider, #top-slider .slider-for .slider-box picture img {height: 600px; max-height: 600px}
    #top-slider.content-site {height: auto; max-height: inherit}
        #top-slider.content-site .slider-for .slider-box picture img {height: 300px; max-height: 300px}
        .top-slider-slogen, .no-fp .top-slider-slogen {padding: 4.032vw 6.048vw; font-size: 3.831vw; white-space: nowrap}
        #top-slider .top-slider-slogen .btnLink {min-height: 5.444vw; margin-top: 8px; padding-top: 1.411vw; font-size: 2.218vw}
    #call-section-1 {padding-right: 0; padding-left: 0}
        #call-section-1 .wrapper picture {min-width: inherit; width: 55%; margin: 0; clip-path: polygon(60px 100%, 100% 100%, 100% 0, 0px 0)}
        #call-section-1 .wrapper .left-side {max-width: 45%; padding-right: 30px; padding-left: 48px}
            #call-section-1 .wrapper .left-side p {font-size: 1.429rem}
        #call-section-1 .wrapper .right-side {position: absolute; right: 50px}
    #call-section-2 .title {white-space: nowrap}
    #team-section .wrapper {width: 100%; padding: 0 18px}
        #team-section .wrapper .content {max-width: 100%; margin: 0 auto; padding: 60px 60px 68px; text-align: center}
            #team-section .wrapper .title {text-align: center}
    #team-section picture {width: 100%; height: 300px}
    main > .wrapper {padding: 5.04vw 0 55px}
        #breadcrumb-nav a:not(.home) {padding-top: 4px}
        #breadcrumb-nav span {padding-top: 4px}
    .article-grid-content.three-column, .article-grid-content.four-column {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start}
        .article-grid-content.three-column .left-side, .article-grid-content.three-column .middle-side {width: calc(50% - 15px)}
        .article-grid-content.three-column .right-side, .article-grid-content.four-column .left-side, .article-grid-content.four-column .right-side {width: 100%}
    .article.contact .article-grid-content {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start}
        .article.contact .article-grid-content .right-side {width: 100%; margin-bottom: 30px}
        .article.contact .article-grid-content .left-side {width: 100%}
    .article .menu-category {margin-right: -9px; margin-left: -9px}
        .article .menu-category li {-ms-flex: 0 0 calc(33.33334% - 18px); flex: 0 0 calc(33.33334% - 18px); max-width: calc(33.33334% - 18px); margin: 0 9px 9px}
    .alertBox.success strong {font-size: 3.226vw}
}
@media (max-width: 768px){
    #services-category .col-sm-6 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 690px; padding-right: 0; padding-left: 0}
        #services-category .content {padding: 0 85px 0 15px; bottom: 16px}
        #services-category .content::after {background-size: 40px; width: 40px; height: 40px; right: 15px}
        #services-category .content span.title {font-size: 1.429rem}
        #services-category .content span {font-size: 1.143rem}
    .article .menu-category li {-ms-flex: 0 0 calc(50% - 18px); flex: 0 0 calc(50% - 18px); max-width: calc(50% - 18px)}
    #curve-svg {display: none}
    .form-group.col-sm-4 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%}
    #fbefore .wrapper {border: none}
        #fbefore .nav {max-width: 592px; margin: 0 auto; padding-bottom: 0}
            #fbefore .nav li {width: 100%; margin: 0; border-bottom: 1px solid rgba(255,255,255,0.1)}
                #fbefore .nav li a {width: 100%; text-align: center; font-size: 1.125rem}
    #fafter .wrapper {max-width: 592px; margin: 0 auto; padding: 0; font-size: 1.125rem}
        #fafter .wrapper .left-side {width: 100%; margin: 0}
            #fafter .wrapper .left-side > *:not(script) {width: 100%; padding: 12px 10px; text-align: center}
            #fafter .wrapper .left-side .sep {background-color: rgba(255,255,255,0.1); height: 1px; margin: 0; padding: 0; line-height: 0; font-size: 0}
        #fafter .wrapper .right-side {width: 100%; padding: 12px 10px; border-top: 1px solid rgba(255,255,255,0.1); text-align: center}
    .show-backtotop #backToTop {opacity: 1; top: calc(100% - 60px); right: 15px}
}
@media (max-width: 640px){
    #call-section-1 .wrapper {-ms-flex-wrap: wrap; flex-wrap: wrap; height: auto}
        #call-section-1 .wrapper .left-side {max-width: 100%; padding: 38px 48px 20px; text-align: center}
        #call-section-1 .wrapper picture {width: 100%; clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 60px); order: 3}
        #call-section-1 .wrapper .right-side {margin-bottom: -60px; position: relative; right: auto}
    .article-grid-content .right-side::before {background-size: 32px; width: 32px; height: 32px; top: 20px; right: 20px}
        .article-grid-content .right-side h6 {padding-right: 50px}

    .article-grid-content.two-column {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start}
        .article-grid-content.two-column .left-side, .article-grid-content.two-column .middle-side {width: 100%}
        .article-grid-content.three-column .left-side, .article-grid-content.three-column .middle-side {width: 100%}
        .article-grid-content.three-column .middle-side {margin-bottom: 30px}

#top-slider:not(.content-site) {background-color: #eef8ff; height: auto; max-height: inherit}
#top-slider:not(.content-site) .top-slider-slogen {bottom: 0}
.slick-dots {display: none!important}


}
@media (max-width: 592px){
   h1, .h1 {font-size: 2rem} h2, .h2 {font-size: 1.6rem} h3
    nav > .wrapper {max-width: 360px}
    .header-right .social {display: none}
    .top-slider-slogen, .no-fp .top-slider-slogen {padding: 5.068vw 8.446vw; font-size: 5.068vw}
    #top-slider .top-slider-slogen .btnLink {min-height: 8.108vw; margin-top: 8px; padding-top: 2.365vw; font-size: 3.041vw}

    .alertBox.success strong {font-size: 26px}

}
@media (max-width: 434px){
    #top-slider .slider-for .slider-box picture img {height: 420px; max-height: 420px}
    #services-category .content span.title {font-size: 1.286rem}
    #call-section-2 .title {white-space: normal}
    #team-section .wrapper .content {padding-right: 20px; padding-left: 20px}
    .article-grid-content.table {grid-template-columns: 1fr}
    .article-grid-content.table .title, .article-grid-content.table .content {border-width: 0 1px 1px 1px}
    .article-grid-content.table .title {font-weight: 600}
    .article-grid-content.table .content:nth-child(2) {border-top-width: 0}
    .article-grid-content .right-side .btnLink {display: block}
}
@media (max-width: 433px){
	h1, .h1 {font-size: 1.875rem} h2, .h2 {font-size: 1.375rem} h3, .h3 {font-size: 1.25rem} h4
    nav > .wrapper {max-width: calc(100% - 78px)}
    .article .menu-category li {-ms-flex: 0 0 calc(100% - 18px); flex: 0 0 calc(100% - 18px); max-width: calc(100% - 18px)}
/*   .top-slider-slogen .btnLink:hover {display: block; width: auto; margin: 0 auto; min-height: 50px; xpadding: 1px 20px 0; font-size: 1.2rem}*/
}
@media (max-width: 592px){
	.top-slider-slogen{font-size: 4.068vw!important;}
}