/*.test {*/
/*    font-family: 'Helvetica Neue', sans-serif;*/
/*    font-family: 'Helvetica 25 UltraLight', sans-serif;*/
/*    font-family: 'Helvetica 35 Thin', sans-serif;*/
/*    font-family: 'Helvetica 45 Light', sans-serif;*/
/*    font-family: 'Helvetica 55 Roman', sans-serif;*/
/*    font-family: 'Helvetica 65 Medium', sans-serif;*/
/*}*/
html,
body {
    background: #f2f2f2!important;
}
strong {
    font-family: 'Helvetica 65 Medium', sans-serif!important;
}
header,
footer,
section {
    background: #f2f2f2;
    color: #1a1a1a;
    font-family: 'Helvetica 55 Roman', sans-serif;
    display: flex!important;
    flex-direction: column;
    align-items: center;
}
section h2,
section.home_title_section .g-description h1 {
    font-size: 50px;
    line-height: 55px;
    margin-bottom: 0;
}
.g-container {
    max-width: 1440px;
    width: 100%;
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
header {
    padding-bottom: 30px;
}
.row {
    width: 100%;
}
.row.row-foot {
    max-width: 1220px;
    margin: 0 25px 0 auto;
}


/* Footer settings */

.footer-copyright {
    font-size: 14px;
    color: #b2b2b2;
}
a.to-top {
    font-size: 16px;
    color: #1B1B1B;
    font-family: 'Helvetica 65 Medium', sans-serif;
    display: flex;
    justify-content: flex-end;
}
a.to-top:hover {
    color: #1B1B1B;
    text-decoration: none;
}
div.g-arrow {
    width: 15px;
    height: 15px;
    box-sizing: border-box;
    transform: rotate(-45deg);
    margin: 10px 0 0 10px;
}
.g-arrow:before {
     content: '';
     width: 100%;
     height: 100%;
     border-width: 4px 4px 0 0;
     border-style: solid;
     border-color: #1B1B1B;
     transition: .2s ease;
     display: block;
     transform-origin: 100% 0;
 }
.g-arrow:after {
    content: '';
    float: left;
    position: relative;
    top: -100%;
    width: 100%;
    height: 100%;
    border-width: 0 3px 0 0;
    border-style: solid;
    border-color: #1B1B1B;
    transform-origin: 56% 0;
    transition: .2s ease;
 }
a.to-top:hover .g-arrow:after {
     transform: rotate(45deg);
     border-color: #000;
     height: 90%;
 }
a.to-top:hover .g-arrow:before {
     border-color: #000;
     transform: scale(.8);

 }
footer {
    padding-bottom: 50px;
}
footer p {
    margin-bottom: 0;
}
.footer-social {
    display: flex;
    justify-content: flex-end;
}
.footer-social .one-social {
    margin-left: 25px;
}
.footer-social img {
    min-width: 18px;
    opacity: 0.95;
}
.footer-social img:hover {
    opacity: 0.8;
}
.g-foot-wysivig {
    line-height: 18px;
}
.top-foot-g {
    margin-bottom: 50px;
}
.address-foot a,
.address-foot p,
.foot-phone,
.menu-foot .menu li a {
    color: #1a1a1a;
    line-height: 18px;
    display: block;
}
.foot-phone {
    padding-top: 20px;
    display: inline-block;
}
.address-foot a:hover,
.foot-phone:hover,
.menu-foot .menu li a:hover {
    color: #1a1a1a;
    text-decoration: none;
}
.menu-foot .menu {
    list-style: none;
    padding-inline-start: 0;
    margin-bottom: 0;
}
.menu-foot .menu li a,
.under-btn {
    position: relative;
}
.menu-foot .menu li a:after,
.under-btn:after,
header .menu li a:after{
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 50%;
    position: absolute;
    background: #1a1a1a;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}
.menu-foot .menu li:hover a:after,
.under-btn:hover:after,
header .menu li:hover a:after {
    width: 100%;
    left: 0;
}


/* Footer settings */

.g-link-to-home {
    margin-bottom: 20px;
}
.g-link-to-home a {
    color: #fff;
    background-color: transparent;
    display: flex;
    min-height: 49px;
    align-items: center;
    padding: 0 20px;
    margin-left: 40px;
    letter-spacing: 2px;
}
.g-link-to-home a img {
    max-height: 50px;
    margin: 10px 0;
}
.g-link-to-home a:hover {
    text-decoration: none;
    color: #fff;
}
.g-link-to-home {
    display: flex;
}
.header_menu_block {
    justify-content: flex-end;
}
header .menu {
    list-style: none;
    padding-inline-start: 0;
    margin-bottom: 0;
    display: flex;
}
header .menu li a {
    color: #1a1a1a;
    line-height: 18px;
    display: block;
    position: relative;
    padding: 0px;
    margin-left: 32px;
}
header .menu li:hover a {
    color: #1a1a1a;
    text-decoration: none;
}


/* Divider section */

.divider_section {
    padding: 50px 30px;
}
.divider_section .row {
    border-bottom: 1.34px solid #c7c7c7;
    justify-content: space-between;
}
.g-arr img {
    width: 52px;
    height: 70px;
    display: block;
    margin-bottom: -3px;
}
.g-arr {
    position: relative;
}
.g-sumbol {
    position: absolute;
    font-family: 'GOST type A', sans-serif;
    font-style: italic;
    font-size: 28px;
    top: -7px;
}
.g-left-arr .g-sumbol {
    left: -5px;
}
.g-right-arr .g-sumbol {
    right: -5px;
}
.vd_section.divider_section .g-container {
    max-width: 1400px;
}


/* Our service section */

.our_services_section .row,
.partners_section .row,
.contact_section .row {
    max-width: 1400px;
}
.our_services_section .title,
.partners_section .title,
.contact_section .title {
    padding-bottom: 80px;
}
.our_services_section li {
    max-width: 100%;
    width: 100%;
}
.our_services_section ul {
    display: flex;
    flex-wrap: wrap;
    padding-inline-start: 50px;
    max-width: 50%;
}
.our_services_section li a {
    font-size: 24px;
    line-height: 1.2;
    color: #1a1a1a;
}
.our_services_section .g-service-col {
    display: flex;
    align-items: flex-start;
}
.our_services_section li a:hover {
    text-decoration: none;
    color: #1a1a1a;
}

.our_services_section ul li::marker {
    color: #1a1a1a;
    font-size: 26px;
}
.g-service-btn.under-btn:after {
    height: 3px;
    bottom: 0px;
}


/* Home title section */

.home_title_section .row {
    max-width: 1402px;
    padding: 55px 20px 15px;
}
section.home_title_section h2,
section.home_title_section .g-description h1 {
    font-size: 35px;
    letter-spacing: -1px;
    line-height: 45px;
}
.home_title_section {
    padding-top: 20px;
}
.vd-top-align {
    display: flex;
    align-items: center;
}
.home_title_section .g-main-title,
.number_with_three_projects .g-main-title,
.number_2_with_three_projects .g-main-title,
.number_3_section .g-main-title {
    font-size: 280px;
    line-height: 250px;
    letter-spacing: -10px;
}
.home_title_section .g-main-subtitle {
    padding-bottom: 30px;
}
.g-project img {
    max-width: 100%;
    width: 100%;
    height: 540px;
    max-height: 540px;
    background-position: center center;
    object-fit: cover;
    transition: transform .3s;
}
.g-wrap-img {
    overflow: hidden!important;
    max-height: 540px;
    max-width: 100%;
}
section .g-small-wrap-pr {
    max-height: 360px;
}
.g-project img:hover {
    transform: scale(1.05);
}
.home_title_section .g-left-project a {
    max-width: 910px;
    display: block;
    margin: 0 auto 0 0;
}
.home_title_section .g-right-project a {
    display: block;
}
.g-pr-descript {
    padding: 15px 0 30px;
}
.g-pr-descript .g-title-pr,
.g-pr-descript .g-title-pr-new {
    font-family: 'Helvetica 65 Medium', sans-serif;
    font-weight: bold;
}
.g-pr-descript .g-title-pr,
.g-pr-descript .g-sub-pr,
.g-pr-descript .g-title-pr-new {
    color: #1a1a1a;
    line-height: 20px;
}
.g-project a:hover .g-title-pr,
.g-project a:hover .g-sub-pr,
.g-project a:hover {
    text-decoration: none!important;
    color: #1a1a1a;
}


/* Home two projects section */

.home_two_projects_section .row {
    max-width: 1402px;
    padding: 15px 20px 15px;
}
.g-equals .g-project {
    max-width: 610px;
}
.g-equals .g-left-project {
    margin: 0 auto 0 0;
}
.g-equals .g-right-project {
    margin: 0 0 0 auto;
}
.g-equals {
    margin-top: -5px;
}


/* Number with three projects section */

.number_with_three_projects .row,
.number_2_with_three_projects .row,
.number_3_section .row,
.service_item_section .row {
    max-width: 1402px;
    padding: 15px 20px 15px;
}
.g-align-number {
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 540px;
}
.g-equals .g-disable-equals .g-project {
    max-width: 910px;
}
.bott-row {
    margin-top: -5px;
}


/* Partners section */

/* Every tile is the same box. `height`, not `min-height`: a minimum lets the
   tallest logo in a row decide how deep that row is - the square ATS mark made
   its band 200px against everyone else's 70 - whereas a fixed box keeps all
   five rows identical whatever gets added later. The box is also deliberately
   shallower than the old 70px: this is a credibility strip, not a gallery, and
   at 20 marks it was taking most of a screen. */
.g-partners-col {
    display: flex;
    margin-bottom: 26px;
    height: 52px;
}
.g-partners-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.g-partners-btn:hover {
    cursor: pointer;
    opacity: 0.8;
}
/* Both dimensions are capped. Height alone is not enough: the marks run from
   2.6:1 to 9.6:1, so a wide one would draw nearly three times the width of a
   narrow one in an identically sized cell and the columns would read as
   uneven. Capping width too gives every logo the same bounding box, with
   .g-partners-btn centring it in both axes. Nothing is upscaled - the
   smallest file here is 114px wide - so no mark gets blurred. */
.g-partners-btn img {
    max-width: 150px;
    max-height: 44px;
}


/* Contact Form main */

form.wpcf7-form{
    padding: 0;
}
.g-50 {
    max-width: 48%;
    width: 100%;
}
.wrap-g-50 {
    display: flex;
    justify-content: space-between;
}
form.wpcf7-form * {
    transition: 225ms;
}
form.wpcf7-form label {
    display: block;
    width: 100%;
    cursor: pointer;
}
form.wpcf7-form input,
form.wpcf7-form select,
form.wpcf7-form textarea {
    display: block;
    width: 100%;
    padding: .5em 0;
    margin-bottom: 1.5em;
    border: 0;
    border-bottom: 1px solid #1a1a1a;
    background: transparent;
    font-size: 1.2em;
}
form.wpcf7-form input:hover,
form.wpcf7-form select:hover,
form.wpcf7-form textarea:hover {
    cursor: pointer;
    border-bottom: 1px solid #1a1a1a;
}
form.wpcf7-form input:focus,
form.wpcf7-form select:focus,
form.wpcf7-form textarea:focus {
    border-bottom: 1px solid #333;
    box-shadow: inset 0 -2px 0 #333;
    outline: none;
}
form.wpcf7-form input,
form.wpcf7-form textarea{
    background: rgba(0,0,0,.03));
}
form.wpcf7-form input[type="submit"] {
    padding: 1em;
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 110%;
    border: 2px solid #1a1a1a;
    box-shadow: none;
    background: transparent;
    color: #1a1a1a;
    line-height: 1.2em;
    width: 250px;
    display: inline-block;
    margin-right: 1em;
}
form.wpcf7-form input[type="submit"]:hover {
    background-color: #fff;
    font-weight: 700;
}
span.wpcf7-not-valid-tip {
    position: relative;
    top: -1em;
    color: #e87676;
}
div.wpcf7-response-output {
    padding: 1em !important;
    margin: 0 !important;
}
div.wpcf7 .ajax-loader {
    display:none;
    background: none;
    -webkit-animation: spin 1s ease-in-out infinite;
    animation: spin 1s cubic-bezier(0.36, 0.09, 0.27, 0.97) infinite;
    border: 3px solid #dedede;
    border-top: 3px solid #000000;
    border-radius: 50%;
    height: 1em;
    width: 1em;
    margin: 0;
    vertical-align: middle;
}
@-webkit-keyframes spin {
    50% {
        border-top-color: #a7005d;
    }
    100% {
        border-top-color: #000000;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    50% {
        border-top-color: #a7005d;
    }
    100% {
        border-top-color: #000000;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha {
    opacity: .75;
}


/* Service item section */

.service_item_section .g-wrap-img img {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    background-position: center center;
    margin-top: 15px;
}
.service_item_section .g-title-pr {
    font-size: 50px;
    line-height: 55px;
    font-weight: bold;
    text-align: center;
    padding: 40px 0 40px;
}
.service_item_section .g-sub-pr h2.artkb-lead {
    font-size: 40px;
    line-height: 48px;
    margin-bottom: 8px;
}
.service_item_section .g-sub-pr h2 {
    font-size: 28px;
    line-height: 35px;
    margin-bottom: 15px;
}
.service_item_section .g-sub-pr img {
    width: 100%;
    min-height: 400px;
    object-fit: cover;
    max-height: 500px;
    margin-bottom: 25px;
}


/* Project template CSS */

/* Present for assistive tech and for crawlers, absent visually. Not
   `display: none` and not `visibility: hidden` - both of those remove the text
   from the accessibility tree as well, which is the opposite of the point. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* These two titles became <h1> so that every page has one. Bootstrap's reboot
   gives any heading `margin-bottom: .5rem` and `font-weight: 500`, neither of
   which the <div> had - undone here so the change is purely structural and
   nothing moves on screen. `.service_item_section .g-title-pr` is the more
   specific selector, so its `font-weight: bold` still wins where it applies. */
h1.g-title-pr,
h1.g-project-title {
    margin: 0;
    font-weight: inherit;
}
.g-project-title {
    font-size: 95px;
    line-height: 100px;
    letter-spacing: -3px;
    padding-bottom: 75px;
}
.owl-carousel {
    overflow: hidden;
    width: 100%;
    height: 500px;
}
.owl-carousel:hover {
    cursor: grab;
}
.portfolio-item {
    position: relative;
    overflow: hidden;
    height: 500px;
}
.portfolio-item img.portfolio-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carrousel {
    width: 100%;
    height: 550px;
    max-width: 1440px;
    margin: auto;
}
.slick-arrow{
    position: absolute;
    top: calc(50% - 10px);
    height: 40px;
    width: 40px;
    cursor: pointer;
    color: transparent;
    border: none;
    z-index: 10;
}
.slick-prev {
    left: 20px;
    height: 17px;
    background: url('../image/left-arr-slide.png') no-repeat;
    background-size: contain;
}
.slick-next {
    right: 20px;
    height: 17px;
    background: url('../image/right-arr-slide.png') no-repeat;
    background-size: contain;
}
.g-project-gallery {
    padding-bottom: 75px;
}
.g-description-col {
    padding-bottom: 25px;
}
/* Subheadings inside a project description. Without this they inherit
   `section h2` at 50px, which is the size of a section title - on a page this
   long the reader needs a level between the section title and body text, not a
   second one competing with it. */
.g-description-col .g-description h2 {
    font-size: 24px;
    line-height: 30px;
    font-weight: bold;
    margin: 40px 0 12px;
}
.g-description-col .g-description h2:first-child {
    margin-top: 0;
}
.g-description-col .g-description ul {
    padding-inline-start: 20px;
    margin-bottom: 16px;
}
/* The press strip: the outlets that covered this product, as their own logos.
   Same 70px/150px envelope as the client wall, so a tall logo cannot set the
   row height and a wide one cannot claim more space than a narrow one. */
.g-media-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Tuned so all eight fit one line in the description column: at 130px and
       a 40px gap the last logo wrapped on its own, which reads as an
       afterthought rather than a press strip. */
    gap: 22px 28px;
    margin: 24px 0 36px;
}
.g-media-row a {
    display: flex;
    align-items: center;
    height: 44px;
    text-decoration: none;
}
.g-media-row img {
    max-height: 30px;
    max-width: 110px;
    width: auto;
    opacity: 0.85;
}
.g-media-row a:hover img {
    opacity: 1;
}
.g-description-col a {
    text-decoration: underline;
    color: #000;
}
.g-description-col a:hover {
    color: #000;
    opacity: 0.8;
}


/* Portfoloi archive CSS */

.portfolio-item-project img {
    max-width: 100%;
    max-height: 300px;
    object-fit: cover;
    transition: transform .3s;
}
/* These photos now come from wp_get_attachment_image(), which writes width and
   height attributes. Where a slot's CSS fixes the width but not the height,
   the height attribute would take over and stretch the box to the file's own
   pixel height; `auto` keeps the aspect ratio instead. `.g-project img` needs
   nothing - it sets an explicit height and cover-crops. */
.portfolio-item-project img,
.service_item_section .g-wrap-img img {
    height: auto;
}
.home_title_section.portfolio_section .col-12 a {
    display: flex;
    width: 100%;
    max-width: 30%;
}
.home_title_section.portfolio_section .col-12 a:hover img {
    transition: transform .3s;
    transform: scale(1.05);
}
.home_title_section.portfolio_section .col-12 a:hover {
    text-decoration: none;
}
.home_title_section.portfolio_section .col-12 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.home_title_section.portfolio_section .row {
    padding: 55px 20px 30px;
}


/* Stiky header */

header {
    z-index: 99;
    width: 100%;
    position: fixed;
}
header.sticky {
    padding-bottom: 0;
    box-shadow: 0 2px 2px -2px grey;
}
header.sticky .row {
    max-width: 50%;
}
header.sticky .g-container {
    flex-direction: row;
    justify-content: space-between;
}
header.sticky .g-link-to-home {
    margin-bottom: 0;
}
header.sticky .header_menu_block {
    padding-right: 20px;
}
.home_title_section,
.service_item_section {
    padding-top: 125px;
}
.slick-slide {
    max-height: 558px;
    object-fit: cover;
}
.animated-icon1, .animated-icon2, .animated-icon3 {
    width: 30px;
    height: 20px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}
.animated-icon1 span, .animated-icon2 span, .animated-icon3 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
.animated-icon1 span {
    background: #1a1a1a;
}
.animated-icon2 span {
    background: #e3f2fd;
}
.animated-icon3 span {
    background: #f3e5f5;
}
.animated-icon1 span:nth-child(1) {
    top: 0px;
}
.animated-icon1 span:nth-child(2) {
    top: 10px;
}
.animated-icon1 span:nth-child(3) {
    top: 20px;
}
.animated-icon1.open span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}
.animated-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
}
.animated-icon1.open span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
form.wpcf7-form input::placeholder,
form.wpcf7-form select::placeholder,
form.wpcf7-form textarea::placeholder {
    color: lightgrey;
}
.service_item_section .g-title-col {
    padding: 50px 0 50px;
}
.g-deff-project-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.g-deff-project-wrap .item-p-a {
    display: flex;
    width: 100%;
    max-width: 30%;
}
.g-deff-project-wrap .item-p-a:hover {
    text-decoration: none;
}
.g-deff-project-wrap a.item-p-a:hover img {
    transition: transform .3s;
    transform: scale(1.05);
}
/* No menu currently has a submenu - the language switcher stopped being one.
   Kept correct rather than as it was: without `position: relative` on the
   parent the absolute box falls back to its static position, 32px left of the
   link, and the browser's default 40px list padding pushes it right again, so
   entries appear diagonally from the item that opened them. */
.menu-item.menu-item-has-children {
    position: relative;
}
.menu-item .sub-menu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0 0 12px 0;
    min-width: 100%;
    background: #fff;
    box-shadow: 0 2px 2px -2px grey;
    z-index: 10;
    display: none;
}
.menu-item:hover .sub-menu {
    display: block;
}
.menu-item .sub-menu li {
    display: block;
}
.menu-item .sub-menu li a {
    margin-top: 12px;
    white-space: nowrap;
}
.menu-item:hover .sub-menu li a:after {
    display: none!important;
}
.sub-menu.active {
    padding: 5px;
    background: #f2f2f2;
}
/* Small muted heading above each footer column. It is the first paragraph of
   the field's own content rather than template markup, so the wording stays
   editable and translatable. */
.foot-label {
    font-size: 12px;
    line-height: 16px;
    color: #6b6b6b;
    margin-bottom: 6px;
}
.footer-social-top {
    display: flex;
    align-items: center;
    /* .footer-social is right-aligned for the old bottom strip; in the
       three-column row the icons sit under their label, like every other
       column, so the inherited flex-end has to be undone here. */
    justify-content: flex-start;
}
.footer-social-top .one-social {
    margin-left: 0;
    margin-right: 18px;
}
.footer-social-top .one-social img {
    max-height: 22px;
    width: auto;
}
.footer-copyright,
.g-foot-wysivig,
.address-foot-main {
    display: none;
}
html.ua .footer-copyright.open_ua,
html.ru .footer-copyright.open_ru,
html.en .footer-copyright.open_en,
html.ua .g-foot-wysivig.open_ua,
html.ru .g-foot-wysivig.open_ru,
html.en .g-foot-wysivig.open_en,
html.ua .address-foot-main.open_ua,
html.ru .address-foot-main.open_ru,
html.en .address-foot-main.open_en,
html.cz .footer-copyright.open_cz,
html.cz .g-foot-wysivig.open_cz,
html.cz .address-foot-main.open_cz {
    display: block;
}
.lang-wrap ul {
    list-style: none;
    margin-bottom: 0;
    padding: 0;
    display: flex;
}
.lang-wrap ul li {
    display: flex;
}
.lang-wrap ul li a {
    margin: 0;
    padding: 0;
    color: #1a1a1a;
    font-family: 'Helvetica 55 Roman', sans-serif;
    /* font-size is set once for both states further down */
    margin-left: 15px;
    letter-spacing: 0;
}
.lang-wrap ul li:hover a {
    text-decoration: none;
    color: #1a1a1a;
    opacity: 0.8;
}
/* The active language used to be dimmed here, which pulled against the point
   of marking it. Emphasis is the weight rule below; this only keeps the link
   from looking like an ordinary underlined one. */
.lang-wrap ul li.current-lang a {
    text-decoration: none;
    color: #1a1a1a;
}
.lang-wrap {
    display: flex;
    margin: 0 0 0 auto;
}
header.sticky .lang-wrap {
    display: none;
}
/* Languages in the menu row are the SCROLLED state of the switcher. At the top
   of the page the same two links already sit on the logo line (.lang-wrap), so
   showing both at once would duplicate them. */
header .menu .lang-item {
    display: none;
}
.grecaptcha-logo,
.grecaptcha-badge {
    display: none!important;
}
header.sticky .menu .lang-item {
    display: block;
}
/* The switcher is the same control in two places - on the logo line at the top
   of the page, and in the menu row once the header sticks. Its size is declared
   once, for both, so the two states cannot drift apart again: they were 12px
   and 13px and the difference was visible when scrolling.
   Must stay after `.lang-wrap ul li a`: equal specificity, so order decides. */
.lang-wrap ul li a,
header.sticky .menu .lang-item a {
    font-size: 13px;
    line-height: 18px;
}
/* A utility control, not navigation: smaller than the 16px menu, and the
   active language carries the weight instead of a separate marker. */
header.sticky .menu .lang-item a {
    margin-left: 16px;
}
/* Same marker in both states, declared once alongside the shared size above.
   Must stay after `.lang-wrap ul li.current-lang a`: equal specificity there,
   so source order decides. */
.lang-wrap ul li.current-lang a,
header.sticky .menu .lang-item.current-lang a {
    font-weight: 700;
}
/* Separate the language group from the menu, keep the languages themselves
   tight. Written against the boundary rather than a count, so UA/EN/CZ - or
   any further language - needs no change here. */
header.sticky .menu li:not(.lang-item) + .lang-item a {
    margin-left: 40px;
}

/* FAQ block above the contact form (Part 48) */
.faq_section { padding: 0 0 30px; }   /* a section cut sits right above it, like the contact form (0 top) */
.faq_section .row { max-width: 1400px; }
.faq_section .title { padding-bottom: 40px; }
.faq_section .faq-list { max-width: 900px; }
.faq_section .faq-item { padding: 22px 0; border-top: 1px solid #e3e3e3; }
.faq_section .faq-item:last-child { border-bottom: 1px solid #e3e3e3; }
.faq_section h3.faq-q { font-size: 22px; line-height: 1.3; font-weight: bold; margin: 0 0 8px; }
.faq_section .faq-a { font-size: 18px; line-height: 1.5; margin: 0; }
.faq_section .faq-a a { text-decoration: underline; }
@media (max-width: 767px) {
    .faq_section h3.faq-q { font-size: 19px; }
    .faq_section .faq-a { font-size: 16px; }
}

/* Anchor jumps (menu "Послуги"/"Контакти", #faq) land below the fixed header (61px mobile, 70px desktop) instead of under it */
html { scroll-padding-top: 80px; }

/* Long Czech words in big titles ("zabezpečovacího" at 52px) overflowed a phone screen. Hyphenate by the page language, break as a last resort (Part 62). */
h1.g-project-title, h1.g-title-pr, .g-title-pr-new { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* Part 68 (visual pass): on phones the lead subheading (h2.artkb-lead, 40px) came out bigger than the page H1 (38px / 26px in media.css), which only shrinks plain h2. Keep it one step below the H1. */
@media (max-width: 768px) { .service_item_section .g-sub-pr h2.artkb-lead { font-size: 30px; line-height: 36px; } }
@media (max-width: 576px) { .service_item_section .g-sub-pr h2.artkb-lead { font-size: 22px; line-height: 28px; } }
/* Same on "About us": its lead line is an h3, which Bootstrap leaves at 28px - above the 26px H1 on a phone. */
@media (max-width: 768px) { .service_item_section .g-sub-pr h3 { font-size: 24px; line-height: 30px; } }
@media (max-width: 576px) { .service_item_section .g-sub-pr h3 { font-size: 20px; line-height: 26px; } }

/* Part 68: the black slider arrows disappeared on dark photos (Pecker, Cinq, Ceramo One, AA6000). A white halo keeps them visible on any image and changes nothing on light ones. */
.slick-arrow { filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95)) drop-shadow(0 0 1px #fff); }

/* 2026-09-26: touch screens have no hover, so in-text links were indistinguishable from plain text (the underline only appeared on mouse-over). On devices without hover, underline them from the start: article / About text (the class sits on the p/h3 itself) and the home services list. Project descriptions and FAQ answers already underline their links. */
@media (hover: none) {
    .text-align-left a,
    .g-service-col li a { text-decoration: underline; text-underline-offset: 2px; }
}

/* artkb.cz (2026-10-05): a service hero image can link to a project page */
.service_item_section .g-hero-link { display: block; }

/* artkb.cz (2026-10-05): "↗ artkb.net" on pictures that open another site (project tiles, hero) */
/* the badge sits in the bottom-right corner of the visible picture: the hero box (.g-wrap-img) clips the image
   at 540 px, so it is the positioning box there; a project tile gets a wrapper around the image only */
.service_item_section .g-wrap-img,
.g-deff-project-wrap .g-ext-img { position: relative; }
.g-deff-project-wrap .g-ext-img img { display: block; }
.g-ext-badge { position: absolute; bottom: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: baseline; gap: 6px;
    padding: 4px 10px; background: rgba(255, 255, 255, .92); color: #1a1a1a; font-size: 14px; line-height: 1.3; pointer-events: none; }
.service_item_section .g-hero-link .g-ext-badge { bottom: 16px; right: 16px; font-size: 16px; }

/* artkb.cz (2026-10-05): home text section - same typography as the service page text */
.text_section .top-row { max-width: 1402px; padding: 30px 20px; margin: 0; }   /* same edges as the services grid above */
.text_section .g-sub-pr h2.artkb-lead { font-size: 40px; line-height: 48px; margin-bottom: 8px; }
.text_section .g-sub-pr p { margin-bottom: 12px; }
@media (max-width: 768px) { .text_section .g-sub-pr h2.artkb-lead { font-size: 30px; line-height: 36px; } }
@media (max-width: 576px) { .text_section .g-sub-pr h2.artkb-lead { font-size: 22px; line-height: 28px; } }

/* artkb.cz (2026-10-05): footer legal links and the text page (privacy policy) */
.artkb-foot-legal { margin-top: 6px; font-size: 14px; color: #9a9a9a; }
.artkb-foot-legal a { color: #9a9a9a; text-decoration: underline; }
.artkb-foot-legal a:hover { color: #1a1a1a; }
.artkb-foot-legal span { margin: 0 6px; }
.text_section h1.text-section-title { font-size: 50px; line-height: 55px; font-weight: bold; text-align: center; padding: 20px 0 30px; }
.text_section .g-sub-pr h2 { font-size: 28px; line-height: 35px; margin: 24px 0 10px; }
.text_section .g-sub-pr ol, .text_section .g-sub-pr ul { margin-bottom: 12px; }
.text_section .g-sub-pr li { margin-bottom: 6px; }
@media (max-width: 768px) { .text_section h1.text-section-title { font-size: 34px; line-height: 40px; } .text_section .g-sub-pr h2 { font-size: 22px; line-height: 28px; } }
/* a text page (privacy policy) starts with the text section - clear the fixed header like the other first sections */
header + .text_section { padding-top: 125px; }
@media screen and (max-width: 768px) { header + .text_section { padding-top: 80px; } }
/* artkb.cz (2026-10-05): privacy link under the contact form submit button */
.wpcf7 .artkb-form-privacy { margin: 12px 0 0; font-size: 13px; }
.wpcf7 .artkb-form-privacy a { color: #9a9a9a; text-decoration: underline; }
.wpcf7 .artkb-form-privacy a:hover { color: #1a1a1a; }