@font-face {
    font-family: 'Open Sans';
    font-weight: 700;
    font-display: swap;
    font-style: normal;
    src: url('fonts/OpenSans/OpenSansBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 400;
    font-display: swap;
    font-style: normal;
    src: url('fonts/OpenSans/OpenSansRegular.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    font-display: swap;
    font-style: normal;
    src: url('fonts/Roboto/RobotoBold.woff2') format('woff2');
}

/*CONTRAST*/

body {
    --color--primary: #009fe3;
    --color--content: #515151;
    --color--secondary: #fff;
    --bg-color--primary: #009fe3;
    --bg-color--content: #515151;
    --bg-color--container: #fff;
    --bg-color--box: #f2f2f2;
    --bg-color--contact: #515151;

    --font-size--12: 0.75rem;
    --font-size--14: 0.875rem;
    --font-size--15: 0.9375rem;
    --font-size--16: 1rem;
    --font-size--18: 1.125rem;
    --font-size--20: 1.25rem;
    --font-size--22: 1.375rem;
    --font-size--24: 1.5rem;
    --font-size--25: 1.5625rem;
    --font-size--28: 1.75rem;
    --font-size--30: 1.875rem;
    --font-size--38: 2.375rem;
    --font-size--40: 2.5rem;
    --font-size--50: 3.125rem;
    --font-size--60: 3.75rem;
    --line-height--42: 2.625rem;
    --line-height--54: 3.375rem;
    --line-height--68: 4.25rem;
    --line-height--82: 5.125rem;
}

body.contrast {
    /*--color--primary: #009fe3;*/
    --color--primary: #009fe3;
    --color--content: #ff0;
    --color--secondary: #ff0;
    --bg-color--primary: #009fe3;
    --bg-color--content: #ff0;
    --bg-color--container: #000;
    --bg-color--box: #000;
    --bg-color--contact: #000;
}

body { color: var(--color--content); font-family: "Open Sans", sans-serif; }
body.contrast { background-color: #000; }
html[lang="en"] .menu__link[data-drupal-link-system-path="node/11"],
html[lang="de"] .menu__link[data-drupal-link-system-path="node/11"] { display: none;}

svg.social__img path { transition: .3s; }
svg.social__img:hover path { fill: #009fe3; transition: .3s; }
.contrast .social__img path { fill: #ff0; }

.wcag-controls { position: absolute; right: -30px; top: -34px; display: flex; height: 30px; font-size: 16px; line-height: 24px;}
.contrast-toggle { width: 30px; height: 25px; cursor: pointer; margin: 0 5px; }
.contrast .contrast-toggle path { fill: #ff0; }
.font-size-changer { display: flex; }
.font-size__button { height: 30px; cursor: pointer; display: flex; margin: 0 5px; justify-content: center; align-items: center; }
.font-size-regular { width: 20px; font-size: 14px; line-height: 18px; }
.font-size-medium { width: 30px; font-size: 16px; line-height: 18px; }
.font-size-large { width: 40px; font-size: 18px; line-height: 18px; }

.font-size--medium .wcag-controls { top: -32px; }
.font-size--large .wcag-controls { top: -29px; }

/*CONTRAST*/

/*FONT SIZE*/

html { font-size: 100%; }
.font-size--regular { font-size: 100%; }
.font-size--medium { font-size: 120%; }
.font-size--large { font-size: 140%; }

/*FONT SIZE*/

/*OTHER*/

.contact a { transition: .3s; }
.contact a:hover { color: var(--color--primary); transition: .3s; }
.arrow { position: absolute; bottom: 15px; right: 15px; transition: .3s; opacity: 0; }

/*END OTHER*/

/*HEADER*/

.header { background: var(--bg-color--container); height: 100px; width: 100%; box-shadow: 0 0 2px 0 rgba(0,0,0,0.35); }
.header__container { display: flex; justify-content: space-between; align-items: center; height: 100%;
    padding: 0 50px; margin: 0 auto; }
.header.scroll { position: fixed; top: 0; left: 0; z-index: 1; /*height: 70px;*/ }

main.scroll { padding-top: 100px; }

@media(max-width: 768px) {
    .header__container { max-width: 100%; /*padding: 0 16px;*/ }
}

@media(max-width: 575px) {
    .header__container { padding: 0 20px; }
}


@media(max-width: 490px) {
    .header__container { padding: 0 5px; }
}

/*@media(max-width: 490px) {*/
    /*.header__container { max-width: 100%; padding: 0; }*/
/*}*/

/*@media(min-width: 768px) {*/
    /*.header__container { max-width: 720px; !*padding: 0 34px;*! }*/
/*}*/

/*@media(min-width: 992px) {*/
    /*.header__container { max-width: 960px; }*/
/*}*/

/*@media(min-width: 1200px) {*/
    /*.header__container { max-width: 1140px; }*/
/*}*/

/*@media(min-width: 1400px) {*/
    /*.header__container { max-width: 100%; }*/
/*}*/

/*.header .branding__img { width: 244px; height: auto; }*/
.header .branding__img { width: auto; height: 80px; }
.contrast .branding--trade { fill: #fff; }

.header .dotacja { display: none; margin-right: 10px; }
.header .dotacja img { width: 100px; height: auto; }

.menu__container { position: relative; }
.menu__lvl-0 { padding: 0; margin: 0; }
.menu__item { display: inline-block; }
.menu__link { font-size: var(--font-size--14); font-weight: 700; text-transform: uppercase; transition: color .3s; margin: 0 8px;
    padding: 35px 0; border-bottom: 5px solid transparent; }
.font-size--medium .menu__link { padding: 31px 0; }
.font-size--large .menu__link { padding: 29px 0; }
.menu--active-trail .menu__link,
.menu__link.is-active,
.menu__link:hover { color: var(--color--primary); transition: color .3s; }

.menu--ue img { width: 100px; height: auto; }

.menu__container .menu--active-trail .menu__link,
.menu__container .menu__link.is-active,
.menu__container .menu__link:hover { border-bottom-color: var(--color--primary); }

#block-kompozyty-main-menu { position: relative; }
#block-kompozyty-main-menu .social { position: absolute; right: 172px; top: -35px; }
#block-kompozyty-main-menu .social svg,
#block-kompozyty-main-menu .social img { width: 15px; height: auto; }
#block-kompozyty-main-menu .social--instagram { right: 200px; }
/*#block-kompozyty-main-menu .social--instagram img {  width: 18px;}*/

#block-language-switcher { position: absolute; right: 240px; top: -33px; }
#block-language-switcher ul { margin: 0; padding: 0; }
#block-language-switcher li { display: inline; }
#block-language-switcher a { display: inline-block; padding: 0 5px; font-weight: 700; transition: .3s; font-size: var(--font-size--14); }
#block-language-switcher a:hover,
#block-language-switcher a.is-active { color: var(--color--primary); transition: .3s; }

#block-kompozyty-main-menu .nav-icon { display: none; }

.branding { display: flex; align-items: center; }

.cert { margin-left: 20px; cursor: pointer; }
.cert__logo { height: 80px; width: 100%; }
.cert__wrapper { display: none; }
.cert__back { display: flex; position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, .3); z-index: 1;
    top: 0; left: 0; justify-content: center; align-items: center; }
.cert__container { background: #fff; border-radius: 5px; position: relative; display: flex;
    max-width: 95%; max-height: 95%; justify-content: space-around; padding: 20px; }
.cert__close { position: absolute; top: 5px; right: 5px; width: 60px; font-size: 40px; text-align: center; }
.cert__container img { width: 100%; height: auto; object-fit: contain; }

@media(max-width: 1050px) {
    .header { justify-content: space-between; }


    .cert__back { overflow: scroll; align-items: flex-start; padding: 20px 0;}
    .cert__container { flex-direction: column; max-height: initial; }
}

/*@media(max-width: 992px) {*/
    /*.header { padding: 0 20px; }*/
/*}*/

@media(max-width: 1160px) {

    #nav-icon { width: 35px; height: 27px; position: relative; cursor: pointer; display: block; transform: rotate(0deg);
        transition: .5s ease-in-out; }
    .font-size--medium #nav-icon { margin-top: 4px; }
    .font-size--large #nav-icon { margin-top: 7px; }
    #nav-icon span { display: block; position: absolute; height: 5px; width: 100%; background: var(--bg-color--content);
        opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; }
    #nav-icon span:nth-child(1) { top: 0; }
    #nav-icon span:nth-child(2),
    #nav-icon span:nth-child(3) { top: 10px; }
    #nav-icon span:nth-child(4) { top: 20px; }
    #nav-icon.open span:nth-child(1) { top: 18px; width: 0; left: 50%; }
    #nav-icon.open span:nth-child(2) { transform: rotate(45deg); }
    #nav-icon.open span:nth-child(3) { transform: rotate(-45deg); }
    #nav-icon.open span:nth-child(4) { top: 18px; width: 0; left: 50%; }

    .header .menu__container { display: none; position: fixed; top: 100px; right: 0; height: calc(100vh - 100px);
        background: var(--bg-color--container); z-index: 1; width: 300px; box-shadow: -1px 1px 2px 0 rgba(0,0,0,0.35);
        padding-top: 20px; }
    .header .menu__item { display: block; }
    .menu__lvl-0 .menu__item.menu--ue { display: none; }
    .header .menu__link { padding: 5px 40px 5px 20px; display: block; font-size: var(--font-size--20); border: none; }

    #block-kompozyty-main-menu { display: flex; flex-direction: column; justify-content: space-evenly; height: 100%; }
    #block-kompozyty-main-menu .social { margin: 0 15px 0 5px; }
    #block-kompozyty-main-menu .social--instagram { margin: 0 5px 0 30px; }
    #block-kompozyty-main-menu .social svg,
    #block-kompozyty-main-menu .social img { width: 20px; }
    #block-kompozyty-main-menu .social,
    #block-language-switcher { position: static; }
    #block-language-switcher { padding: 50px 25px; }
    #block-language-switcher a { font-size: var(--font-size--16); }
    .lang-social { display: flex; justify-content: space-between; align-items: center; }
    .socials { margin-right: 15px; }

    .header .dotacja { display: block; }

    .wcag--desktop { display: none; }
    .wcag--mobile { display: flex; right: -10px; position: static; padding-right: 10px; }

    .nav_dotacja { display: flex; justify-content: center; }
}

@media(max-width: 650px) {
    .header { height: 70px; }
    .header .menu__container { top: 70px; height: calc(100vh - 70px); }
    main.scroll { padding-top: 70px; }
    .header .branding__img { width: 200px; }

    .cert__logo { height: 68px; }
}

@media(max-width: 490px) {
    .header .branding__img { width: 100px; }
    .header { padding: 0 20px 0 15px; }
    .cert__logo { height: 50px; }
}

@media(max-width: 440px) {
    /*.header .branding__img { width: 150px; }*/
}

@media(max-width: 400px) {
    .header .branding__img { width: 80px; }
    .cert { margin-left: 5px; }
}

@media(max-width: 350px) {
    /*.header .branding__img { width: 100px; }*/
}

/*END HEADER*/

/*SLIDER*/

.slider { position: relative; }
.slider__text { position: absolute; top: 50%; left: 100px; transform: translateY(-50%); color: var(--color--secondary);
    font-size: var(--font-size--18); text-transform: uppercase; }
.slider__text h1 { font-size: var(--font-size--60); margin-bottom: 16px; }
.slider__text strong { font-size: var(--font-size--60); }
.slider__text span { padding: 0 20px; display: inline-block; background: rgba(0, 0, 0, .6);
    line-height: var(--line-height--82); }
.slider__text p { background: rgba(0, 0, 0, .6); padding: 5px 10px; display: inline-block; }
.slider__slides { max-height: 650px; overflow: hidden; }
.slider__slides img { filter: grayscale(1); object-fit: cover; width: 100%; height: 100%; }
.slider,
.slick-track,
.slick-list { height: 650px; }
.slick-dots li button::before { font-size: var(--font-size--14); }
.slick-dots li.slick-active button::before,
.slick-dots li button:hover::before,
.slick-dots li button:focus::before { color: var(--color--primary); }
.slick-dots { bottom: 30px; }
.slick-slide[aria-hidden=true] {
    visibility: hidden;
}

@media (max-width: 768px) {
    .slider,
    .slick-track,
    .slick-list { height: 500px; }
    .slider__slides { max-height: 500px; }
    .slider__text { left: 50px }
}

@media (max-width: 580px) {
    .slider__text h1 { font-size: var(--font-size--50); }
    .slider__text strong { font-size: var(--font-size--50); }
    .slider__text span { line-height: var(--line-height--68); }
}

@media (max-width: 490px) {
    .slider,
    .slick-track,
    .slick-list { height: 400px; }
    .slider__slides { max-height: 400px; }
    .slider__text { left: 20px }
    .slider__text h1 { font-size: var(--font-size--40); }
    .slider__text strong { font-size: var(--font-size--40); }
    .slider__text span { line-height: var(--line-height--54); }
}

@media (max-width: 360px) {
    .slider__text { font-size: var(--font-size--14); }
    .slider__text h1 { font-size: var(--font-size--30); }
    .slider__text strong { font-size: var(--font-size--30); }
    .slider__text span { line-height: var(--line-height--42); }
}

/*END SLIDER*/

/*ABOUT*/

.about { margin: 40px auto; overflow: hidden; }
.services { display: flex; }
.service { flex: 0 0 50%; padding: 20px; }
.service__container { background: var(--bg-color--box); height: 100%; transition: .3s; position: relative; }
.service__container:hover { background: rgba(0, 159, 227, 0.1); transition: .3s; }
.service__content { padding: 25px 30px; border: 1px solid transparent; }
.contrast .service__container:hover { background: #000; transition: .3s; }
.contrast .service__container:hover .service__content { border-color: #ff0; transition: .3s; }
.service__container:hover .arrow { opacity: 1; transition: .3s; }
.service__image-container { overflow: hidden; }
.service__image-container img { width: 100%; height: auto; transition: .3s; }
.service__container:hover img { transform: scale(1.1); transition: .3s; }
.service__category { font-size: var(--font-size--12); }
.service__name { font-size: var(--font-size--28); font-weight: 700; font-family: Roboto, 'sans-serif'; text-transform: uppercase;
    margin-bottom: 0; }
.service__name:before { content: ''; background: var(--bg-color--primary); width: 8px; height: 21px; margin: 0 10px -1px 0;
    display: inline-block; }
.font-size--medium .service__name:before { height: 25px; }
.font-size--large .service__name:before { height: 29px; }
.service__description { font-size: var(--font-size--14); }

.about__block { padding: 20px; display: flex; }
.about__block:hover .arrow { opacity: 1; transition: .3s; }
.about--side { flex: 0 0 50%; }
.about__image-container { overflow: hidden; }
.about__image-container img { width: 100%; height: 100%; object-fit: cover; transition: .3s; }
.about__block:hover img { transform: scale(1.1); transition: .3s; }

.about__text { background: var(--bg-color--box); padding: 30px 50px; font-size: var(--font-size--14); transition: .3s;
    position: relative; border: 1px solid transparent; }
.about__block:hover .about__text { background: rgba(0, 159, 227, 0.1); transition: .3s; }
.contrast .about__block:hover .about__text { background: #000; border-color: #ff0; transition: .3s; }
.about__text strong { font-size: var(--font-size--28); font-weight: 700; font-family: Roboto, 'sans-serif'; text-transform: uppercase; }
.about__text strong:before { content: ''; background: var(--bg-color--primary); width: 8px; height: 21px;
    margin: 0 10px -1px 0; display: inline-block; }
.font-size--medium .about__text strong:before { height: 25px; }
.font-size--large .about__text strong:before { height: 29px; }

.image img { width: 100%; height: auto; }

@media(max-width: 1200px) {
    .about__image-container { overflow: hidden; }
    .about__image-container img { object-fit: cover; height: 100%; }
}

@media(max-width: 1080px) {
    .about__text { padding: 20px 40px; }
    .about__text p:last-child { margin-bottom: 0; }
}

@media(max-width: 768px) {
    .about.container { width: 100%; max-width: 100%; }
}

@media(max-width: 750px) {
    .service__name { font-size: var(--font-size--22); }
    .service__name:before { margin: 0 5px -1px 0; }
}

@media(max-width: 640px) {
    .about__block,
    .services { flex-wrap: wrap; }

    .about--side,
    .service { flex: 0 0 100%; }
}

@media(max-width: 490px) {
    .services { flex-wrap: wrap; }
    .about__block,
    .service { padding: 20px 5px; }
}

/*END ABOUT*/

/*LOCATION */

.localisation iframe { display: block; border: none; width: 100%; height: 400px; }

/*END LOCATION*/

/*FOOTER */

.footer { display: flex; height: 100px; align-items: center; padding: 0 50px;  }
.footer--menu { margin-left: 50px; }
.footer--social { margin-left: auto; }
.footer--social { margin-left: auto; }
.footer__policy { font-size: var(--font-size--12); margin: 15px 0 0 8px; }
.footer--branding img { width: 185px; height: auto; }
.footer--social .social__img { width: 22px; height: auto; }

.dotacja--stopka { padding: 15px 20px; }
.dotacja--stopka img { max-width: 100%; height: auto; }

@media (max-width: 950px) {
    .footer { height: 150px; }
    .footer .menu__lvl-0 { display: grid; grid-template-columns: repeat(3, 1fr); }
    .footer .menu__item { margin: 3px 0; }
    .footer .menu__link { padding: 0 12px; }
    .footer .footer__policy { margin: 15px 0 0 12px; }
}

@media (max-width: 768px) {
    .footer { height: auto; padding: 50px; align-items: flex-start; }
    .footer .menu__lvl-0,
    .footer .menu__item { display: block; }
    .footer--branding { margin: 10px 0 0 0; }
    .footer--social { margin: 10px 0 0 auto; }
}

@media (max-width: 575px) {
    .footer { padding: 50px 20px; }
}

@media (max-width: 540px) {
    .footer { flex-wrap: wrap; }
    .footer .menu__lvl-0,
    .footer .menu__item { display: inline-block; }
    .footer .menu__link { margin: 0; }
    .footer--branding { flex: 0 0 initial; }
    .footer--social { flex: 0 0 initial; text-align: right; }
    .footer--menu { flex: 0 0 100%; order: 5; margin: 20px 0 0 -10px; }
}

/*END FOOTER*/

/*PARALLAX*/

.image { width: 100%; height: 500px; }
.front .image.ios { background-attachment: scroll; }

@media (max-width: 800px) {
    .image { height: 338px; }
}

/*END PARALLAX*/

/*CONTACT*/

#block-contact { overflow: hidden; }
.contact { background: var(--bg-color--contact); color: var(--color--secondary); padding: 50px 0; }
.contact__container { padding: 0 35px; }
.contact__label { font-size: var(--font-size--60); text-transform: uppercase; margin-left: -4px; font-weight: 700; }
.contact__text { display: flex; justify-content: space-between; flex-wrap: wrap; }

@media (max-width: 768px) {
    .contact { padding: 50px 20px; }
    .contact__container { max-width: 100%; padding: 0 15px; }
}

@media (max-width: 575px) {
    .contact { padding: 50px 5px; }
}

.form { margin-bottom: 50px; }
.form label { display: none; }
.form select,
.form textarea,
.form input:not(.webform-button--submit) { margin: 10px 0; width: 400px; border-radius: 3px; padding: 5px 10px;
    border: 1px solid #575757; }
.form select { padding: 6px 10px; }

.form select:focus-visible,
.form textarea:focus-visible,
.form input:focus-visible { outline: none; }

.form select:focus,
.form textarea:focus,
.form input:focus { border-color: var(--color--primary); }

.form input.webform-button--submit { border-radius: 3px; padding: 5px 20px; background: #009fe3; color: #fff;
    border: none; margin-top: 10px; text-transform: uppercase; font-weight: 700; }
.contrast .form input.webform-button--submit { background: #ff0; color: #000; }

@media (max-width: 500px) {
    .form select,
    .form textarea,
    .form input:not(.webform-button--submit) { width: 100%; max-width: 350px; }
}

/*END CONTACT*/

/*LOCALISATION*/

.localisation__map { height: 400px; }

/*END LOCALISATION*/

/*BANNER*/

.banner { position: relative; height: 500px; }
.banner__image-container { height: 500px; overflow: hidden; }
.banner__image-container img { filter: grayscale(1) brightness(.7); object-fit: cover; width: 100%; height: 100%; }
.node--11 .banner__image-container img { filter: initial; }
.banner__header { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff;
    font-size: var(--font-size--60); text-transform: uppercase; }
.contrast .banner__header { padding: 10px; background: rgba(0, 0, 0, .6); color: #ff0;}
.contrast .banner__header svg path { fill: #ff0; }
.basic-page .banner--without-image { height: initial; }
.banner--without-image .banner__header { color: var(--color--content); position: static; transform: initial; text-align: center; }

@media (max-width: 1200px) {
    .banner,
    .banner__image-container { height: 550px; }
}

@media (max-width: 1000px) {
    .banner,
    .banner__image-container { height: 450px; }
}

@media (max-width: 800px) {
    .banner,
    .banner__image-container { height: 350px; }
}

@media (max-width: 650px) {
    .banner__header { font-size: var(--font-size--50); }
}

@media (max-width: 600px) {
    .banner,
    .banner__image-container { height: 250px; }
}

@media (max-width: 450px) {
    .banner__header { font-size: var(--font-size--38); }
    .node--11 .banner__header img { max-width: 300px; height: auto; padding: 0 20px; }
}

/*END BANNER*/

/*SECTION*/

.sections { overflow: hidden; }
.node--11 .section { position: relative; }
.section__container { margin: 40px auto 60px; }
.section__label { font-size: var(--font-size--60); font-weight: 700; font-family: Roboto, 'sans-serif'; text-transform: uppercase;
    margin-bottom: 30px; }
.section__label:before { content: ''; background: var(--bg-color--primary); width: 8px; height: 42px;
    margin: 0 10px -1px 0; display: inline-block; }
.font-size--medium .section__label:before { height: 52px; }
.font-size--large .section__label:before { height: 62px; }
.section p { margin-bottom: 30px; }
.section__content img { max-width: 100%; height: auto; }

.ask-quote { text-align: center; margin-bottom: 50px; }
.ask-quote a { border-radius: 3px; background: #009fe3; font-size: var(--font-size--18); color: #fff; font-weight: 700;
    text-transform: uppercase; padding: 20px 50px; margin-top: 50px; display: inline-block; }
.contrast .ask-quote a { background: #ff0; color: #000; }
.ask-quote a:hover { animation: moveIn 1s; }

.section--single img { width: 100%; height: auto; }
.section--multi { display: flex; }
.section--multi img { flex: 0 0 33.33%; width: 33.33%; height: auto; }
.section--double { display: flex; }
.section--double img { flex: 0 0 50%; width: 50%; height: auto; }
.section--gallery { display: flex; flex-wrap: wrap; }
.section--gallery a { flex: 0 0 16.66%; overflow: hidden; }
.section--gallery a:hover img { transform: scale(1.1); transition: .3s; }
.section--gallery img { width: 100%; height: auto; transition: .3s; }

.section__contact { display: flex; justify-content: space-between; flex-wrap: wrap; }

.node--2 .section__content div { display: flex; justify-content: space-between; }
.node--2 .section__content div p { flex: 0 0 calc(50% - 10px); }
.node--2 .section--0 .section__content > p:last-child { text-align: center; }

.node--5 .section__label { font-size: var(--font-size--28); }
.node--5 .section__label:before { height: 21px; }
.font-size--medium .node--5 .section__label:before { height: 25px; }
.font-size--large .node--5 .section__label:before { height: 29px; }

.node--8 a { transition: .3s; }
.node--8 a:hover { color: #009fe3; transition: .3s; }

.section--pattern { position: absolute; opacity: .3; z-index: -1; }
.section--0 .section--pattern { width: 400px; left: -250px; }
.section--1 .section--pattern { width: 400px; right: -250px; }
.section--2 .section--pattern { width: 400px; left: -200px; top: 50px; transform: rotate(160deg); }
.section--2 .section--pattern-2 { width: 400px; left: initial; right: -200px; top: 100px; }

@media (max-width: 650px) {
    .section__label { font-size: var(--font-size--50); }
    .section__label:before { height: 36px; }

    .section--0 .section__content div { flex-wrap: wrap; }
    .section--0 .section__content div p { flex: 0 0 100%; }

    .section--gallery a { flex: 0 0 33.33%; overflow: hidden; }

    .node--7 .section--double { flex-wrap: wrap; }
    .node--7 .section--double img { flex: 0 0 100%; }
}

@media (max-width: 450px) {
    .section__label { font-size: var(--font-size--38); }
    .section__label:before { height: 27px; }
}

@media (max-width: 350px) {
    .section--gallery a { flex: 0 0 50%; overflow: hidden; }
}

/*END SECTION*/

/*CASE STUDIES*/

.case-studies { margin: 50px auto; }
.case-studies__label { font-size: var(--font-size--60); font-weight: 700; font-family: Roboto, 'sans-serif'; text-transform: uppercase;
    margin-bottom: 30px; }
.case-studies__label:before { content: ''; background: #009fe3; width: 8px; height: 42px; margin: 0 10px -1px 0;
    display: inline-block; }

.case-studies__container { display: flex; justify-content: space-between; }
.case-study { flex: 0 0 calc(50% - 20px); }
.case-study:hover .arrow { opacity: 1; transition: .3s; }
.case-study__container { background: #f2f2f2; transition: .3s; height: 100%; position: relative; display: block; }
.case-study__container:hover { background: rgba(0, 159, 227, 0.1); transition: .3s; }
.case-study__image-container img { width: 100%; height: auto; }
.case-study__content { padding: 10px 30px 20px; font-size: var(--font-size--14); }
.case-study__title { font-size: var(--font-size--28); font-weight: 700; font-family: Roboto, 'sans-serif';
    text-transform: uppercase; margin-bottom: 10px; }
.case-study__title:before { content: ''; background: #009fe3; width: 8px; height: 21px; margin: 0 10px -1px 0;
    display: inline-block; }

@media (max-width: 768px) {
    .case-studies { max-width: 100%; }
    .case-studies__label { max-width: 540px; margin: 0 auto 30px; }
}

@media (max-width: 650px) {
    .case-studies__label { font-size: var(--font-size--50); }
    .case-studies__label:before { height: 36px; }
}

@media (max-width: 640px) {
    .case-studies__container { flex-wrap: wrap; }
    .case-study { flex: 0 0 100%; padding: 0 20px; }
}

@media (max-width: 450px) {
    .case-studies__label { font-size: var(--font-size--38); }
    .case-studies__label:before { height: 27px; }
}

.article__title { font-size: var(--font-size--28); font-weight: 700; font-family: Roboto, 'sans-serif'; text-transform: uppercase;
    margin: 30px 0 20px; }
.article__title:before { content: ''; background: #009fe3; width: 8px; height: 21px; margin: 0 10px -1px 0;
    display: inline-block; }
.article__text { margin-bottom: 50px; }
.article__gallery { display: flex; flex-wrap: wrap; }
.article__gallery a { flex: 0 0 25%; overflow: hidden; }
.article__gallery img { width: 100%; height: auto; transition: .3s; }
.article__gallery a:hover img { transform: scale(1.1); transition: .3s; }

.back { text-align: center; margin-bottom: 50px; }
.back__button { border-radius: 10px; background: #009fe3; font-size: var(--font-size--18); color: #fff; font-weight: 700;
    text-transform: uppercase; padding: 20px 50px; margin-top: 50px; display: inline-block; }
.back__button:hover { animation: moveIn 1s; }

@media(max-width: 550px) {
    .article__gallery a { flex: 0 0 50%; overflow: hidden; }
}

/*END CASE STUDIES*/

/*PRODUCT CARD*/

.product-card { padding: 50px 0; margin-top: 75px; text-align: center; background: #026666; color: #fff; }
.product-card a { font-size: var(--font-size--30); font-weight: 700; }
.product-card span { margin-right: 20px; }

.contrast .product-card { background: #ff0; color: #000; }
.contrast .product-card svg .cls-2 { fill: #000; }

@media (max-width: 450px) {
    .product-card a { font-size: var(--font-size--20); }
}

/*PRODUCT CARD*/

/*INSTAGRAM*/

#block-instagramliteblock { padding: 50px; }

.instagram__container { display: flex; flex-wrap: wrap; }
.instagram__item { width: calc(100% / 6); padding: 10px; }
.instagram__item video { position: absolute; left: 0; top: 0; object-fit: cover; width: 100%; height: 100%; }

.more { text-align: center; font-weight: 700; font-size: var(--font-size--18); margin-bottom: 50px; }
.more__text { margin-bottom: 20px; }
.more__links a { margin: 0 10px; transition: .3s; }
.more__links a:hover { opacity: .7; transition: .3s; }

@media (max-width: 1200px) {
    .instagram__item { width: 25%; }
}

@media (max-width: 800px) {
    .instagram__item { width: calc(100% / 3); }
}

@media (max-width: 550px) {
    #block-instagramliteblock { padding: 50px 20px; }
    .instagram__item { width: 50%; }
}

@media (max-width: 380px) {
    .more__links { display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .more__links a { margin: 10px; }
}

/*INSTAGRAM*/

/*POPUP*/

#popup-img { position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, .5); width: 100%; height: 100vh; display: flex;
    justify-content: center; align-items: center; z-index: 1000; }
#popup-img .content { background: #fff; border-radius: 15px; position: relative; padding: 30px 0; font-size: var(--font-size--24);
    font-weight: 700; display: flex; justify-content: center; align-items: center; min-height: 200px; width: 560px;
    text-align: center; }
#popup-img .content img { width: 100%; height: auto; max-height: 95vh; display: block; margin: 0 auto; padding: 0 30px;}
#popup-img .content .close { font-size: var(--font-size--25); position: absolute; right: 10px; top: -2px; display: block; width: 20px;
    text-align: center; opacity: .7; transition: opacity .3s; }
#popup-img .content .close:hover { opacity: .4; transition: opacity .3s; cursor: pointer; }

@media (max-width: 580px) {
    #popup-img .content { max-width: calc(100% - 20px); font-size: var(--font-size--20); padding: 20px 0; }
    #popup-img .content img { padding: 0 20px; }
}

/*POPUP*/

/*LOGIN FORM*/

#user-login-form .login-form { margin-top: 50px; padding: 0 30px; }
#user-login-form .logo { text-align: center; }
#user-login-form .logo img { width: 320px; height: auto; margin-bottom: 50px; }
#user-login-form .logo h2 { color: #666666; font-family: 'Montserrat', sans-serif; font-size: var(--font-size--16); margin-bottom: 50px; }

#user-login-form #edit-name--description,
#user-login-form #edit-pass--description { display: none; }

#user-login-form .login-fields label { display: none; }
#user-login-form .login-fields .form-text { width: 500px; margin-bottom: 30px; height: 25px; border-radius: 5px; border: 2px solid #6666; background-color: #F3F4EE; padding-left: 5px; font-size: var(--font-size--14); }
#user-login-form .login-fields .form-text:focus { border: 2px solid #0085D0; }
#user-login-form .login-fields .field { display: flex; margin: 0 auto; }
#user-login-form .login-fields { max-width: max-content; margin: 0 auto; }
#user-login-form .login-fields p { line-height: 20px; width: 150px; color: #666666; font-family: 'Montserrat', sans-serif; font-size: var(--font-size--16); font-weight: normal; }
#user-login-form .login-submit { max-width: max-content; margin: 0 0 0 auto; }
#user-login-form #edit-submit { padding: 10px 50px; border-radius: 5px; border: 0; background-color: #0085D0; color: white; font-family: 'Montserrat', sans-serif; font-size: var(--font-size--15); font-weight: normal; }
#user-login-form #edit-submit:hover { opacity: 0.85; }


@media (max-width: 700px) {
    #user-login-form .login-fields .form-text { width: 100%; }
}

@media (max-width: 450px) {
    #user-login-form .login-fields .field { display: block; }
    #user-login-form .login-fields p { margin: 0; }
    #user-login-form .login-submit { margin: 0 auto; }

    #user-login-form .logo img { width: 100%; }
}

/*END LOGIN FORM*/

@keyframes moveIn {
    0%, 100% { padding: 20px 50px; }
    50% { padding: 25px 60px; margin: 45px 0 -5px; }
}