/*
Theme Name: Marjan
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/




/*** FONTS ***/


@font-face {
    font-family: 'pt_sansregular';
    src: url('./assets/fonts/ptsans-regular-webfont.woff2') format('woff2'),
        url('./assets/fonts/ptsans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'pt_sansbold';
    src: url('./assets/fonts/ptsans-bold-webfont.woff2') format('woff2'),
        url('./assets/fonts/ptsans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'pt_sansitalic';
    src: url('./assets/fonts/ptsans-italic-webfont.woff2') format('woff2'),
        url('./assets/fonts/ptsans-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'begummedium';
    src: url('./assets/fonts/begum-medium-webfont.woff2') format('woff2'),
        url('./assets/fonts/begum-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*


@font-face {
    font-family: 'begumregular';
    src: url('./assets/fonts/begum-regular-webfont.woff2') format('woff2'),
        url('./assets/fonts/begum-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'begumsemibold';
    src: url('./assets/fonts/begum-semibold-webfont.woff2') format('woff2'),
        url('./assets/fonts/begum-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'begumbold';
    src: url('./assets/fonts/begum-bold-webfont.woff2') format('woff2'),
        url('./assets/fonts/begum-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

*/

:root {
    /*** BASE COLORS ***/

    --red: #C0225D;

    --purple: #752671;
    --orange: #F16722;
    --green: #44B549;

    --black: #000000;
    --gray: #B8B8B8;
    --white: #FFFFFF;

    --lines: #EEEADB;



    /*** THEME COLORS ***/
    --prim-color: var(--red);
    --prim-color-darker: color-mix(in srgb, var(--prim-color) 95%, black);
    --prim-color-lighter: color-mix(in srgb, var(--prim-color) 90%, white);

    --sec-color: var(--purple);
    --sec-color-darker: color-mix(in srgb, var(--sec-color) 95%, black);
    --sec-color-lighter: color-mix(in srgb, var(--sec-color) 90%, white);

    --focus-color: var(--purple);
    --focus-color-darker: color-mix(in srgb, var(--focus-color) 95%, black);
    --focus-color-lighter: color-mix(in srgb, var(--focus-color) 90%, white);

    --buttons-color: var(--purple);
    --buttons-color-darker: color-mix(in srgb, var(--buttons-color) 95%, black);
    --buttons-color-lighter: color-mix(in srgb, var(--buttons-color) 90%, white);

    --headings-color: var(--purple);
    --subheadings-color: var(--purple);

    --text-color: var(--black);
    --text-color-light: var(--gray);

    --line-color: var(--lines);
    --divider-color: var(--lines);

    --border-color: var(--lines);

    --background-color: #FFFDF1;
    --background-color-light: var(--white);
    --background-color-alternate: var(--prim-color);
    --background-color-focus: var(--focus-color);


    --box-background-color: var(--background-color-light);
    --card-background-color: var(--background-color-light);
    --submenu-background-color: var(--white);

    --form-background-color: #F8F3E4;
    --field-background-color: var(--white);
    --field-line-color: var(--line-color);

    --footer-background-color: var(--white);
    --footer-line-color: var(--lines);

    --border-radius: 5px;
    --border-width: 1px;

    --box-padding: 30px;
    --content-section-padding: 60px;
    --body-padding: 45px;
}

@media screen and (max-width: 767px) {

    /* different sizings for mobile */
    :root {
        --box-padding: 30px;
        --content-section-padding: 30px;
        --body-padding: 20px;
    }
}






/*** TEXT & HEADINGS ***/

body {
    font-family: "pt_sansregular", system-ui;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 1.25rem;
    color: var(--text-color);
    line-height: 150%;
    background-color: var(--background-color);
    padding: 20px var(--body-padding) !important;
}

#main-menu-mobile {
    padding: 20px var(--body-padding);
}


::selection {
    color: white;
    background: var(--purple);
}

.hidden-desktop {
    display: none !important;
}

p {
    margin-bottom: 1.5rem;
}

.elementor-widget-text-editor.elementor-widget:not(:last-child) {
    margin-bottom: 0;
}


p b,
p strong {
    font-family: "pt_sansbold", system-ui;
    font-weight: 400;
}

p u,
.elementor-widget-text-editor span[style*="underline"] {
    text-decoration: none !important;
    background-image: linear-gradient(var(--focus-color), var(--focus-color));
    background-size: 100% 4px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom: 0;
}


hr {
    color: var(--line-color);
    background-color: var(--line-color);
    border-color: var(--line-color);
    border-style: solid;
    border-width: 1px;
    border-bottom: 0;
    margin: 20px 0 20px 0;
}

.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator {
    border-color: var(--line-color) !important;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "pt_sansbold", system-ui;
    /* font-family: "pt_sansregular", system-ui;
    font-family: "begummedium", system-ui;
    letter-spacing: -0.05em; */
    font-family: "begummedium", system-ui;
    letter-spacing: -0.015em;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    color: var(--headings-color);
    line-height: 125%;
    margin-top: 0;
    margin-bottom: 0;
}

.elementor-widget-heading .elementor-heading-title {
    line-height: 125%;
}

h1,
.elementor-widget-heading h1.elementor-heading-title {
    font-size: 5rem;
    margin-bottom: 0;
}

h2,
.elementor-widget-heading h2.elementor-heading-title {
    font-size: 3.75rem;
    margin-bottom: 0;
}

h3,
.elementor-widget-heading h3.elementor-heading-title {
    font-size: 3rem;
    margin-bottom: -10px;
}

h4,
.elementor-widget-heading h4.elementor-heading-title {
    font-size: 2.25rem;
    margin-bottom: -15px;
}

h5,
.elementor-widget-heading h5.elementor-heading-title {
    font-size: 1.75rem;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: -15px;
}

h6,
.elementor-widget-heading h6.elementor-heading-title {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: -15px;
}



.elementor-widget-heading.elementor-widget:not(:last-child) {
    margin-bottom: 0;
}

.elementor-widget-text-editor .elementor-widget-container p:last-child {
    margin-bottom: 10px;
}

.pre-heading {
    margin-bottom: 10px !important;
}

.sub-heading h4.elementor-heading-title {
    margin-top: -20px;
    margin-bottom: 0;
}

.pre-heading h3,
.pre-heading h4,
.pre-heading h5 {
    color: var(--headings-color);
}


.large-text,
.intro {
    font-family: 'pt_sansregular';
    font-size: 1.5rem;
    line-height: 150%;
    font-weight: 400;
    margin-bottom: 0 !important;
}

.tag {
    color: #fff;
    display: inline-block;
    width: auto !important;
    padding: 2px 5px;
    background-color: var(--prim-color);
    border-radius: 3px;
}

.meta {
    color: var(--text-color-light);
    font-size: 1rem;
}

.source {
    font-size: 1.125rem;
    line-height: 150%;
}

.source p,
.source ul {
    margin-bottom: 0 !important;
}

.elementor-widget-text-editor.small p,
.elementor-widget-text-editor.small ul li,
.elementor-widget-text-editor.small ol li {
    font-size: 1.125rem;
    line-height: 150%;
}

.elementor-widget-text-editor.small ul li,
.elementor-widget-text-editor.small ol li {
    background-position: top 6px left 0;
}






/*** LINKS ***/

a {
    color: var(--focus-color);
    transition: all 0.1s ease-in-out !important;
}

a:hover {
    color: var(--focus-color-lighter);
}

.elementor-widget-text-editor p a,
.elementor-widget-text-editor ul li a,
.elementor-widget-text-editor ol li a {
    text-decoration: underline;
}

.jet-listing-dynamic-link {}

.jet-listing-dynamic-link a:hover,
.jet-listing-dynamic-link a:hover .jet-listing-dynamic-link__label {
    color: var(--focus-color);
}

.jet-listing-dynamic-link i,
.elementor-widget-jet-listing-dynamic-link .jet-listing-dynamic-link__icon,
.elementor-widget-jet-listing-dynamic-field .jet-listing-dynamic-field__icon,
.elementor-widget-jet-listing-dynamic-terms .jet-listing-dynamic-terms__icon {
    min-width: 16px;
    text-align: center;
    margin-right: 15px;
    color: var(--focus-color);
}

.jet-listing-dynamic-link .jet-listing-dynamic-link__label {
    color: var(--focus-color);
}

.elementor-widget-jet-listing-dynamic-field .jet-listing-dynamic-field__content a {
    color: var(--focus-color);
}

.elementor-widget-jet-listing-dynamic-field .jet-listing-dynamic-field__content a:hover {
    color: var(--focus-color-lighter);
}












/*** DEFAULT LISTS ***/


.elementor-widget-text-editor ul,
.elementor-widget-jet-listing-dynamic-field ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}


.elementor-widget-text-editor ul li,
.elementor-widget-jet-listing-dynamic-field ul li {
    padding-left: 20px;
    margin: 0;
    position: relative;
    background: url("/wp-content/themes/marjan/assets/images/li.svg") no-repeat top 12px left 0;
}

.content-section.focus .elementor-widget-text-editor ul li,
.content-section.focus .elementor-widget-jet-listing-dynamic-field ul li {
    background-image: url("/wp-content/themes/marjan/assets/images/li-white.svg");
}

@media screen and (max-width: 767px) {

    .elementor-widget-text-editor ul li,
    .elementor-widget-jet-listing-dynamic-field ul li {
        background-position: top 6px left 0;
    }
}

/*
.elementor-widget-text-editor ul li::before,
.elementor-widget-jet-listing-dynamic-field ul li::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 12px;

    background: url("/wp-content/themes/marjan/assets/images/li.svg") no-repeat top 0 left 0;
}
*/





/*** IMAGES ***/

.elementor-widget-image img[src$=".jpg"],
.elementor-widget-image img[src$=".png"] {}

/* .elementor-widget-image.graph img[src$="svg"], */
.elementor-widget-image.graph img,
img[src$="svg"].elementor-lightbox-image {
    background-color: var(--white);
    padding: var(--box-padding);
}

.elementor-widget-image.graph img {
    margin-top: 10px;
}

.elementor-widget-image a {
    display: block !important;
    width: 100% !important;
}

.elementor-widget-image a img[src$=".svg"] {
    width: 100% !important;
    height: auto !important;
    max-width: 1120px !important;
    display: block;
}

figure figcaption {
    font-family: 'pt_sansregular';
    color: var(--text-color);
    font-size: 1rem;
    line-height: 150%;
    margin-top: 10px;
    font-style: italic;
}

.content-section.alternate figure figcaption {
    color: var(--white);
}





/** HEADER **/



/** NAV BAR **/

.navbar {
    margin-bottom: 20px;
}

.nav-bar {
    width: 100vw !important;
    height: 195px;
    transition-duration: 0.01s !important;
    background-color: var(--prim-color);
    display: inline-flex;
    column-gap: 0;
}




.nav-bar .logo-col {
    flex: 0 0 316px;
}

.nav-bar.mobile .logo-col {
    padding-left: 10px;
}

.nav-bar .menu-col {
    min-width: 40px;
    padding-left: 0;
    padding-right: 0;
    flex: 1;
}

.nav-bar .cta-col .elementor-button .elementor-button-text {
    white-space: nowrap;
}

.site-logo {
    display: block;
    width: 316px;
    height: 125px;
}

.site-logo .elementor-image,
.site-logo.elementor-widget-image img[src$=".svg"] {
    width: 316px;
    height: 125px;
}

.site-logo .elementor-image:after {
    content: "";
    height: 0;
    display: none;
}




/** Menu */

.navbar .elementor-widget-nav-menu ul {
    column-gap: 0;
    display: flex;
    justify-content: flex-end;
}

.navbar .elementor-widget-nav-menu ul li {
    margin-left: 40px;
}

.navbar .elementor-widget-nav-menu a {
    font-family: 'pt_sansregular';
    color: var(--text-color);
    font-weight: 400;
    line-height: 100%;
    text-transform: none;
    font-size: 1.5rem;
    padding: 8px 0 !important;
}

.navbar .elementor-nav-menu a:after {
    display: none !important;
}


.navbar .elementor-nav-menu a:hover,
.navbar .elementor-nav-menu--main .elementor-nav-menu a:focus {
    color: var(--focus-color);
    border: 0;
}

.navbar .elementor-nav-menu a.elementor-item-active,
.navbar .menu-item.current-page-ancestor a {
    color: var(--focus-color);
    border: 0;
}

.navbar .elementor-nav-menu a.has-submenu .sub-arrow,
.navbar .elementor-nav-menu a.has-submenu .sub-arrow svg {
    color: var(--focus-color);
    fill: var(--focus-color);
}

#btn-mobile-menu a img {
    width: 48px;
    height: 48px;
}




/* xl desktops */
@media screen and (min-width: 1280px) {}






/*** SUBMENU ***/



.navbar .sub-menu {}

.navbar .elementor-widget-nav-menu ul.sub-menu {
    min-width: 220px !important;
    background-color: var(--background-color);
    box-shadow: 0 0 30 rgba(0, 0, 0, 0.05) !important;
    padding: 30px 30px 40px 30px !important;
    display: none;
}

.navbar .elementor-widget-nav-menu ul.sub-menu li {
    margin-left: 0;
}


.navbar .elementor-nav-menu--dropdown {
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    padding: 30px 30px 30px 20px;
}

.navbar .sub-menu .menu-item a,
.navbar .elementor-nav-menu--dropdown a,
.navbar .sub-menu .menu-item a:focus {
    color: var(--prim-color) !important;
    margin: 0;
    padding: 10px 0 10px 0 !important;
    text-transform: none;
    color: var(--text-color);
    font-size: 1.25rem;
    border: 0;
    font-family: "pt_sansbold", system-ui;
    font-weight: 400;
}

.navbar .elementor-nav-menu--dropdown a:hover {
    text-decoration: none !important;
    color: var(--focus-color) !important;
    background-color: transparent;
}

.navbar .elementor-nav-menu--dropdown a .sub-arrow {
    padding-left: 15px;
    margin-top: -2px;
}

.navbar .elementor-nav-menu--dropdown a.elementor-item-active {
    background-color: transparent;
    color: var(--prim-color);
}

.navbar .sub-menu .menu-item a:hover {
    background-color: transparent;
    text-decoration: underline;
}







/*** MOBILE MENU ***/

.navbar.mobile {}

.navbar.mobile .btn-menu-toggle {}

.navbar.mobile .btn-menu-toggle img[src$=".svg"] {}



#main-menu-mobile {
    /* wrapper (popup)  */
    background-color: var(--background-color);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05) !important;
}

#main-menu-mobile .elementor-nav-menu--dropdown {
    background-color: transparent;
    font-size: 1.25rem;
}

#main-menu-mobile .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
#main-menu-mobile .elementor-nav-menu--dropdown .elementor-item.highlighted,
#main-menu-mobile .elementor-nav-menu--dropdown .elementor-item:focus,
#main-menu-mobile .elementor-nav-menu--dropdown .elementor-item:hover,
#main-menu-mobile .elementor-sub-item.elementor-item-active,
#main-menu-mobile .elementor-sub-item.highlighted,
#main-menu-mobile .elementor-sub-item:focus,
#main-menu-mobile .elementor-sub-item:hover {
    background-color: transparent;
}

#main-menu-mobile .elementor-nav-menu {}

#main-menu-mobile .elementor-nav-menu .menu-item {
    margin-top: 0;
    padding: 0;
    text-align: center;
}

#main-menu-mobile .elementor-nav-menu .menu-item .sub-arrow {
    display: none;
}

#main-menu-mobile .elementor-nav-menu .menu-item .sub-menu .menu-item {
    border: 0;
}

#main-menu-mobile .elementor-nav-menu .menu-item a {
    font-family: 'pt_sansbold';
    font-weight: 400;
    line-height: 100%;
    font-size: 1.75rem;
    text-transform: none;
    padding: 17px 0 20px 0;
    color: var(--headings-color);
    text-align: center;
    justify-content: center;
}

#main-menu-mobile .elementor-nav-menu .menu-item .sub-menu a {
    font-family: 'pt_sansbold';
    font-weight: 400;
    line-height: 150%;
    font-size: 1.5rem;
    text-transform: normal;
    padding: 10px 0 10px 0;
    color: var(--headings-color);
}

#main-menu-mobile .elementor-nav-menu .menu-item a.has-submenu {
    background: url("/wp-content/themes/marjan/assets/images/chevron-red-down.svg") no-repeat center right 4px;
    padding-right: 20px;
}


#main-menu-mobile .elementor-nav-menu .menu-item a.has-submenu.highlighted {
    background: url("/wp-content/themes/marjan/assets/images/chevron-red-up.svg") no-repeat center right 4px;
    padding-right: 20px;
}

#main-menu-mobile .sub-menu {
    padding-bottom: 20px;
    padding-left: 20px;
}

#main-menu-mobile .elementor-nav-menu a {
    color: var(--text-color);
}

#main-menu-mobile .elementor-nav-menu a.elementor-item-active {
    color: var(--focus-color);
}




/*** POPUPS ***/



.dialog-lightbox-widget.elementor-popup-modal {
    width: 100vw;
    overflow-x: hidden;
}







/** lightbox */

.dialog-widget .dialog-widget-content {
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1) !important;
}

.elementor-lightbox .dialog-lightbox-close-button,
.elementor-lightbox .elementor-swiper-button {
    top: 0;
    right: 10px;
    color: #fff;
    font-size: 32px;
}





/** list items */


.elementor-widget-icon-list {
    margin-bottom: 20px;
}

.elementor-widget-icon-list .elementor-icon-list-item {
    padding: 0;
}

.elementor-widget-icon-list .elementor-icon-list-item a .elementor-icon-list-text {
    color: var(--text-color);
}

.elementor-widget-icon-list .elementor-icon-list-item a:hover .elementor-icon-list-text {
    color: var(--prim-color);
}


.elementor-widget-icon-list.contact-info .elementor-icon-list-item {
    border: 0;
    margin: 0;
    padding: 0;
}

.elementor-widget-icon-list.elementor-widget .elementor-icon-list-icon i {
    color: var(--shadow-green);
    display: inline-block;
    width: 20px;
    text-align: center;
    margin-right: 10px;
    font-size: 16px;
    padding-top: 2px;
}














/*** BUTTONS ***/

a.btn,
li.btn a,
.elementor-widget-button .elementor-button,
input[type=submit],
button[type=button],
button[type=submit],
.jet-form button,
button.elementor-button {
    display: inline-block;
    font-family: "pt_sansbold", system-ui;
    text-transform: none;
    font-size: 1.25rem;
    line-height: 150%;
    font-weight: 400;
    border-radius: 5px;
    padding: 18px 30px 22px 30px !important;
    color: #fff;
    background-color: var(--buttons-color);
}

.elementor-widget-button .elementor-button:hover .elementor-button-text,
.elementor-widget-button .elementor-button .elementor-button-text {
    /* color: #fff; */
}



li.btn a:hover,
.elementor-widget-button .elementor-button:hover,
input[type=submit]:hover,
input[type=button]:hover,
button[type=button]:hover,
button[type=submit]:hover,
.jet-form button:hover {
    /* background-color: var(--buttons-color-lighter); */
    transform: scale(1);
    /* filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2)); */
    text-decoration: none !important;
}


.elementor-widget-button .elementor-button:focus,
input[type=submit]:focus,
input[type=button]:focus,
button[type=button]:focus {
    box-shadow: none;
}


.elementor-widget-button.elementor-button-info .elementor-button,
.bn-reset button[type=button] {
    background-color: var(--white);
    color: var(--prim-color);
    box-sizing: border-box;
    border: 1px solid var(--line-color);
}


.elementor-widget-button.elementor-button-info .elementor-button:hover,
.bn-reset button[type=button]:hover {
    color: var(--prim-color-lighter);
    background-color: var(--white);
}


.elementor-widget-button.elementor-button-warning .elementor-button {
    background-color: var(--sec-color);
}

.elementor-widget-button.elementor-button-warning .elementor-button:hover {
    background-color: var(--sec-color-lighter);
}

.elementor-widget-button.elementor-button-success .elementor-button,
li.btn-success a {
    background-color: var(--focus-color);
}

.elementor-widget-button.elementor-button-success .elementor-button:hover,
li.btn-success a:hover {
    background-color: var(--focus-color-lighter);
}

.elementor-widget-button .elementor-button-icon i {
    margin-right: 10px;
}

.mce-widget button[type="button"],
.mce-widget button[type="button"]:hover {
    background-color: transparent;
    box-shadow: none;
    color: var(--text-color);
    margin-bottom: 0;
}












/*** DIVIDERS ***/

.elementor-divider-separator,
.elementor-divider {
    color: var(--line-color);
}





























/*** FOOTER ***/




#footer {
    /* border-top: 4px solid var(--focus-color); */
    color: var(--black);
    background-color: var(--footer-background-color);
    font-size: 1.125rem;
}

#footer h2,
#footer h3,
#footer h4 {
    color: var(--white);
}

#footer a {
    color: var(--white);
}

#footer a:hover {
    color: var(--focus-color);
}


#footer .elementor-nav-menu a {
    color: var(--text-color);
    padding: 0 0 0 40px;
    line-height: 167.5%;
    text-decoration: none;
    background: url("/wp-content/themes/marjan/assets/images/arrow-green-right.svg") no-repeat 0 8px;
    margin-bottom: 0;
}


#footer .elementor-nav-menu a:hover {
    color: var(--sec-color);
}




#footer .elementor-social-icon {
    background-color: var(--sec-color) !important;
}

#footer-top .elementor-social-icon:hover {
    background-color: var(--sec-color-lighter) !important;
}

.elementor-location-footer .elementor-inner-section .elementor-widget-nav-menu {
    border: 0;
}


#footer-top {
    padding: 60px 0 30px 0;
}


#footer-top .menu-item a:after {
    content: "";
    display: none;
}

#footer-bottom {
    padding: 60px 0 60px 0;
}

#footer-bottom p {
    margin-bottom: 0;
}

#footer-bottom a .elementor-icon-list-text {
    color: var(--white);
    text-decoration: none;
}

#footer-bottom a:hover .elementor-icon-list-text {
    text-decoration: underline;
}











/** lightbox */

.elementor-lightbox .dialog-lightbox-close-button,
.elementor-lightbox .elementor-swiper-button {
    /*position: absolute;
    top: 30px;
    right: 30px; */
    color: #fff;
    font-size: 24px;
}



























/*** FORMS ***/

.form-wrapper,
form.elementor-form {
    padding: 30px;
    background-color: var(--form-background-color);
    margin: 10px 0 20px 0;
    transition: all 0.3s ease-in-out !important;
}

input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea,
.elementor-form textarea.elementor-field,
.elementor-field-group input.elementor-field {
    min-height: 50px;
    line-height: 167%;
    border: 1px solid var(--line-color);
    border-radius: 5px;
    color: var(--text-color);
    padding: 5px 10px;
    font-size: 1.125rem;
    background-color: var(--field-background-color);
}

textarea.textarea-field {
    min-height: 180px !important;
}


input[type=date]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus,
select:focus,
textarea:focus,
.elementor-form textarea.elementor-field:focus {
    border: 1px solid var(--sec-color) !important;
}

input:focus-visible,
textarea:focus-visible {
    outline-width: 0;
}

.elementor-field-group .elementor-field-textual {
    border: 0;
    border-image-width: 0;
}

.elementor-field-group.elementor-field-type-submit {
    margin-top: 20px;
}

.elementor-field-group input.elementor-field-textual:focus,
.elementor-form textarea.elementor-field:focus {
    outline: none !important;
    box-shadow: none !important;
    border-bottom-color: var(--sec-color) !important;
}


label,
.field-label,
.jet-form-builder__label {
    font-family: 'pt_sansbold';
    font-weight: 400;
    color: var(--text-color);
    line-height: 167.5%;
    margin-bottom: 5px;
}

.elementor-mark-required .elementor-field-label:after {
    color: var(--sec-color);
}

.form-group {
    margin-bottom: 10px;
}


.form-actions {
    text-align: center;
}

.form-actions input[type=submit] {
    margin: 0 auto;
}


.jet-form__label-text {
    font-family: 'pt_sansbold';
    font-weight: 400;
}

.jet-form__field-label {
    font-weight: 400;
}

.jet-form .field-type-radio {
    margin: 10px 0;
}

.jet-form button {
    margin: 10px auto;
}

.jet-form-builder__field-label {
    color: var(--prim-color);
}


.jet-form-builder__field-label.for-checkbox,
.jet-form-builder__field-label.for-radio {
    display: flex;
}

.jet-form-builder__field-label.for-checkbox input,
.jet-form-builder__field-label.for-radio input {}



.jet-form-builder__field-label.for-checkbox span,
.jet-form-builder__field-label.for-radio span {
    font-family: 'pt_sansregular';
    color: var(--text-color);
    font-weight: normal;
    vertical-align: top;
    align-items: flex-start;
}

.jet-form-builder__field-label.for-checkbox span::before,
.jet-form-builder__field-label.for-radio span::before {
    margin: 5px 10px 0 0;
}

.jet-form-builder__desc,
.jet-form-builder-file-upload__message {
    color: var(--text-color-light);
}

.jet-form-builder__action-button-wrapper {
    text-align: center;
}

.jet-form-builder .wp-block-columns {
    margin-bottom: 0;
}

.jet-form-builder .field-type-submit-field .jet-form-builder__action-button-wrapper {
    justify-content: center;
}

.jet-form-builder .field-type-submit-field .jet-form-builder__action-button-wrapper button.jet-form-builder__submit {
    width: 260px;
    align-items: center;
    justify-content: center;
}


.elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option input[type=radio] {
    margin-right: 5px;
}

.elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option {
    padding-right: 20px;
}

.elementor-form .elementor-field-subgroup label {
    color: var(--prim-color);
}

#edit-member-form .jet-form-builder-message {
    display: none;
}


fieldset.field-type-checkbox-field {
    border: 0 !important;
}











/*** PAGE HEADER ***/



.page-header {
    padding-top: var(--content-section-padding);
    padding-bottom: var(--content-section-padding);
    background-color: var(--prim-color);
    /* padding-bottom: 0; */
}

.page-header .e-con-inner {
    z-index: 1;
}

.page-header.tight,
.page-header.no-gap,
.page-header.no-padding-bottom {
    padding-bottom: 0;
}

.page-header .wrapper {
    padding: 0;
}

.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4,
.page-header h5 {
    color: var(--white);
}

.page-header .intro {
    max-width: 820px !important;
}


.page-header .intro p {
    margin-top: calc(var(--content-section-padding) / 2);
    margin-bottom: 0;
}




@media screen and (max-width: 1024px) {}















/*** CONTENT SECTIONS ***/

.narrow {
    padding: 0 160px;
}



.content-section {
    padding-top: var(--content-section-padding);
    padding-bottom: var(--content-section-padding);
    background-size: cover;
}

@media screen and (min-width: 1024px) {

    .content-section .wrapper.narrow {
        max-width: 760px;
        margin: auto;
    }
}

.content-section .wrapper {
    padding: 0;
}

.content-section.first {
    padding-top: 0;
}


.content-section.no-padding {
    padding-top: 0;
    padding-bottom: 0;
}

.content-section.no-padding-top {
    padding-top: 0;
}

.content-section.no-padding-bottom {
    padding-bottom: 0;
}


.content-section.white {
    background-color: var(--white);
}

.content-section.alternate {
    background-color: var(--background-color-alternate);
    color: #fff;
}

.content-section.focus {
    background-color: var(--focus-color);
    color: #fff;
}

.content-section.alternate a {
    color: var(--white);
}

.content-section.alternate a {
    color: var(--white);
}

.content-section.alternate a:hover {
    color: var(--white);
    text-decoration: underline;
}

.content-section.alternate h1,
.content-section.alternate h2,
.content-section.alternate h3,
.content-section.alternate h4,
.content-section.alternate h5,
.content-section.alternate h6 {
    color: var(--white);
}


.content-section.alternate .inset {
    color: var(--text-color);
}

.content-section.alternate .inset h2,
.content-section.alternate .inset h3,
.content-section.alternate .inset h4,
.content-section.alternate .inset h5,
.content-section.alternate .inset h6 {
    color: var(--headings-color);
}

.content-section.alternate .elementor-widget-text-editor p a {
    color: inherit;
    text-decoration: underline;
}






/** HOMEPAGE HERO SECTION **/

.image-section {
    min-height: 150px;
}

.hero-section {
    padding: 180px var(--content-section-padding) var(--content-section-padding) var(--content-section-padding);
    background-color: var(--prim-color);
    /* background: linear-gradient(to bottom,
            white 0px,
            white 180px,
            var(--prim-color) 180px,
            var(--prim-color) 100%);
            */
    color: var(--white);
}

.hero-section h1.elementor-heading-title,
.hero-section h2.elementor-heading-title,
.hero-section h3.elementor-heading-title,
.hero-section h4.elementor-heading-title,
.hero-section h5.elementor-heading-title,
.hero-section h6.elementor-heading-title {
    color: var(--white);
    font-family: 'begummedium';
}

.image-section .photo img {
    width: 300px;
    height: 300px;
    margin-bottom: 20px;
}

.hero-section .date {
    font-size: 1.25rem;
    line-height: 150%;
}



@media screen and (max-width: 767px) {
    .hero-section {}


    .hero-section .date {
        font-size: 1rem;
        line-height: 150%;
    }

}


@media screen and (min-width: 1024px) {
    .image-section {
        min-height: 240px;
    }

    .image-section .photo img {
        width: 480px;
        height: 480px;
    }

    .hero-section {
        padding-top: 270px;
    }

    .hero-section .intro {
        max-width: 880px !important;
        margin: auto;
    }
}




.blob-bg {
    position: relative;
    overflow: hidden;
    background: var(--prim-color);
}

.blob-bg::before {
    content: "";
    position: absolute;
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 1;
    animation: moveBlob 24s infinite ease-in-out;
    z-index: 0;
}

.blob-bg::after {
    content: "";
    position: absolute;
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 1;
    animation: moveBlob 36s infinite reverse ease-in-out;
    z-index: 0;
}


.blob-bg::before {
    background: radial-gradient(circle, var(--purple) 0%, transparent 100%);
    top: -100px;
    left: -100px;
}

.blob-bg::after {
    background: radial-gradient(circle, var(--orange) 0%, transparent 100%);
    bottom: -100px;
    right: -100px;
}

@keyframes moveBlob {
    0% {
        transform: translate(-20%, -20%) scale(1);
    }

    33% {
        transform: translate(70vw, 10vh) scale(1.2);
    }

    66% {
        transform: translate(30vw, 40vh) scale(0.95);
    }

    100% {
        transform: translate(-20%, -20%) scale(1);
    }
}















/*** SHARE BUTTONS ***/

.elementor-widget-share-buttons {}

.elementor-widget-share-buttons * {
    transition: all 0.1s ease-in-out !important;
}

.elementor-widget-share-buttons .elementor-grid {
    column-gap: 5px;
    word-spacing: 5px;
}

.elementor-widget-share-buttons .elementor-share-btn__icon {
    background-color: var(--sec-color) !important;
}

.elementor-widget-share-buttons .elementor-share-btn__icon:hover {
    background-color: var(--sec-color-lighter) !important;
    filter: none !important;
}

.elementor-widget-share-buttons .elementor-share-btn:hover {
    filter: none !important;
}









/*** BLOCKQUOTE ***/
.elementor-widget.elementor-widget-blockquote {
    margin-bottom: 20px !important;
}

.elementor-widget-blockquote {
    display: table;
}

.elementor-widget-blockquote .elementor-blockquote {
    border-left: 4px solid var(--shadow-green) !important;
    font-family: 'pt_sansbold';
    color: var(--prim-color);
    font-size: 1.5rem;
    padding: 0 0 0 30px;
}


.elementor-widget-blockquote .elementor-blockquote .elementor-blockquote__content {
    xxfont-style: italic !important;
    font-weight: 400;
    line-height: 150%;
}


.elementor-widget-blockquote footer {}

.elementor-widget-blockquote .elementor-blockquote__author {
    color: var(--text-color);
    font-family: 'pt_sansbold';
    font-style: normal;
    line-height: 150%;
    font-weight: 400;
    font-size: 1rem;
}







/*** TABLES ***/

table {}









/*** ICON BOX ***/


..elementor-widget-icon-box {}

.elementor-widget-icon-box .elementor-icon-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon svg {
    width: 90px;
    height: 90px;
}

.elementor-widget-icon-box .elementor-icon-box-title {
    margin-bottom: 20px;
}

.elementor-widget-icon-box .elementor-icon-box-description {
    font-family: 'pt_sansbold';
}














/*** PAGE TEMPLATES ***/






















/*** META ***/

.jet-listing-dynamic-meta {}

.jet-listing-dynamic-meta .jet-listing-dynamic-meta__icon {
    fill: var(--text-color-light);
    width: 30px;
    padding-top: 2px;
}

.jet-listing-dynamic-meta .jet-listing-dynamic-meta__icon svg {
    fill: var(--text-color-light);
}


















/*** ACCORDION ***/

.elementor-widget-n-accordion {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    border-bottom: 1px solid var(--line-color);
}

.elementor-widget-n-accordion .e-n-accordion-item {
    border-top: 1px solid var(--line-color);
}

.elementor-widget-n-accordion .e-n-accordion-item .elementor-element[role="region"] {
    padding-bottom: 40px;
}

.elementor-widget-n-accordion .e-n-accordion-item-title .e-n-accordion-item-title-icon span svg {
    fill: var(--sec-color) !important;
}

.elementor-widget-n-accordion .e-n-accordion-item-title .e-n-accordion-item-title-text {
    font-family: 'pt_sansbold';
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--text-color);
}


.elementor-widget-n-accordion .e-n-accordion-item-title {
    border: 0;
    padding: 30px 0;
    column-gap: 20px;
    flex-direction: row-reverse !important;
    line-height: 200%;
}

.elementor-widget-n-accordion .e-n-accordion-item-title .e-n-accordion-item-title-header {
    width: 100%;
}

.elementor-widget-n-accordion .e-n-accordion-item-title .e-n-accordion-item-title-text {
    font-size: 2rem;
    font-weight: 400;
    color: var(--prim-color);
}


.elementor-widget-n-accordion .e-n-accordion-item>.e-child {
    border: 0;
    padding: 0 0 20px 0;
}

@media screen and (min-width: 1024px) {
    .elementor-widget-n-accordion .e-n-accordion-item>.e-child {
        padding: 0 220px 20px 0;
    }
}

.elementor-widget-n-accordion .e-n-accordion-item>.e-child>.e-child {
    padding-left: 0;
    padding-right: 0;
}


.elementor-widget-n-accordion .e-n-accordion-item-title-icon span i {
    color: var(--sec-color) !important;
    font-size: 1.25rem;
}

@media screen and (max-width: 767px) {
    .elementor-widget-n-accordion .e-n-accordion-item-title .e-n-accordion-item-title-text {
        font-size: 1.25rem;
    }

}





























/*** BOXES **/
.box {
    background-color: var(--form-background-color);
    padding: var(--box-padding);
    border-radius: 0;
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    isolation: isolate;
}

.box.white {
    background-color: var(--white);
    border: 1px solid var(--line-color);
}

.box.focus {
    background-color: var(--focus-color);
}

.box.focus h3.elementor-heading-title,
.box.focus h4.elementor-heading-title,
.box.focus h5.elementor-heading-title,
.box.focus h6.elementor-heading-title {
    color: var(--white);
}

.box .elementor-widget-text-editor p a {
    color: inherit;
    text-decoration: underline;
}

















/*** COMMENTS ***/

#comments {
    border-top: 1px solid #C8E8D0;
    margin-top: 40px;
    padding-top: 0;
}

#comments h2,
#comments h3.title-comments {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    font-size: 1.5rem;
}

#comments .comment .comment-author {
    font-size: 1.125rem;
}

#comments .comment .comment-author b {
    font-family: 'pt_Sansbold';
    font-weight: 400;
    color: var(--sec-color);
}

#comments .comment-content {
    font-size: 1.125rem;
    line-height: 150%;

}

#comments .comment .comment-body {
    border-color: var(--line-color);
    padding: 0;
}

#comments .comment-content .comment-image {
    margin-bottom: 20px;
}

#comments .comment-form-cookies-consent label {
    font-weight: 400;
    padding-left: 10px;
}

#comments form {
    background-color: var(--form-background-color);
    padding: var(--box-padding);
}


#comments .comment-metadata {
    display: none;
}

#comments footer.comment-meta {
    flex-direction: column;
    margin-top: 20px;
}

.elementor-widget-post-comments {}

.elementor-widget-post-comments h2.title-comments {
    margin-top: 20px;
    font-size: 1.5rem;
}

#comments #respond {
    margin-top: 40px;
}

.elementor-widget-post-comments .comment-metadata time {
    font-size: 0.875rem;
    line-height: 150%;
}

@media screen and (max-width: 767px) {

    .elementor-widget-post-comments h2.title-comments {
        font-size: 1.25rem;
    }

}

#comments .comment-navigation:first-of-type {
    display: none;
}

#comments .nav-links {
    margin-top: 40px;
    margin-bottom: 90px;
    display: flex;
    justify-content: space-between;
}

#comments .nav-links a {
    transition: all 0.3s ease-in-out !important;
}

#comments .nav-previous a,
#comments .nav-next a {
    border: 1px solid var(--line-color);
    padding: 18px 30px;
    color: var(--focus-color);
    font-family: 'pt_sansbold';
    border-radius: 5px;
    text-decoration: none;
}

#comments .nav-previous a:hover,
#comments .nav-next a:hover {
    border-color: var(--prim-color);
    background-color: var(--prim-color);
    color: #fff;
}










/*** INSET **/
.inset {
    background-color: var(--white);
    padding: var(--box-padding);
    border: 10px solid var(--black);
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    isolation: isolate;
}

.inset .elementor-widget-text-editor p a {
    text-decoration: underline;
}

@media screen and (min-width: 1024px) {
    .home .inset {
        padding: 90px;
    }
}


.content-section .inset {
    background-color: var(--white);
}


.inset .elementor-widget-button {}

.inset .elementor-widget-button a {
    min-width: 220px;
}

.inset .elementor-widget-button a .elementor-button-content-wrapper {
    align-content: space-around;
}

.inset .elementor-widget-button a .elementor-button-content-wrapper .elementor-button-text {
    flex-grow: 0;
}










/*** LISTINGS ***/


.listing,
.listing>.e-con-inner {
    background-color: var(--white);
    padding: 0;
    align-items: stretch;
}

.listing {
    background-color: var(--white);
    color: var(--text-color);
    margin-bottom: 0;
    padding: var(--box-padding);
    border-radius: 0;
    position: relative;
    box-sizing: border-box;
    border: 1px solid var(--line-color);
}

.listing h2,
.listing h3,
.listing h4,
.listing h5 {
    color: var(--focus-color) !important;
}

.listing .listing-image {
    padding: 0
}

.listing .elementor-widget-image {
    margin-bottom: 0;
}

.listing .listing-content {
    row-gap: 0;
    flex: 1;
}

.listing .listing-content h3,
.listing .listing-content h4 {
    margin-bottom: 5px;
}

.listing .listing-content .title {
    margin-bottom: 10px;
}

.listing .listing-content .description {
    font-size: 1.125rem;
    line-height: 150%;
}

.listing .listing-footer {
    padding: 10px 30px 20px 30px;
}



.listing .meta .jet-listing-dynamic-field__icon {
    padding-top: 6px;
}


.listing .meta i.jet-listing-dynamic-terms__icon::before,
.listing .meta i.jet-listing-dynamic-field__icon::before {
    color: var(--text-color-light);
}











/*** REACTIE LISTING ***/

.reactie-listing {}

.reactie-listing .listing-image {}

.reactie-listing .listing-content {
    row-gap: 10px;
}

.reactie-listing .listing-content .image {
    margin-bottom: 10px;
}

.reactie-listing .listing-content .name strong {
    color: var(--headings-color);
}

.reactie-listing .listing-content .reaction {
    font-size: 1.125rem;
    line-height: 150%;
}


.reactie-listing .listing-footer {}


@media screen and (min-width: 1120px) {}

@media screen and (max-width: 767px) {
    .reactie-listing {
        padding: calc(var(--box-padding) / 2);
    }
}











/*** ANIMATIONS ***/

html.js .fade-in,
html.js .page-header .intro h1,
html.js .page-header .intro .elementor-widget-text-editor,
html.js .page-header-small h1,
html.js .page-header-small .intro .elementor-widget-text-editor {
    opacity: 0;
}

html.js .fade-in-up,
html.js .page-header .image-wrapper {
    opacity: 0;
}



















/*** RESPONSIVE STUFF ***/


/* desktops */
@media screen and (min-width: 1024px) {

    /*
    .home .content-section .left-column {
        padding-right: 40px;
    }

    .home .content-section .right-column {
        padding-left: 40px;
    }

    */

}



/* tablets */
@media screen and (max-width: 1024px) {
    .hidden-mobile {
        display: none;
    }

    .hidden-desktop {
        display: block !important;
    }

    .narrow {
        padding: 0;
    }

    /*
    .content-section {
        padding-top: var(--content-section-padding);
        padding-bottom: var(--content-section-padding);
    }

    .content-section .elementor-widget-wrap>.elementor-section {
        padding-left: 0;
        padding-right: 0;
    }

    #footer-col1 {
        padding-right: 0;
    }

    #footer-col1 .elementor-widget-image {
        text-align: center;
    }

    #footer-col1 img {
        margin-left: auto;
        margin-right: auto;
    }
    */




}




/* mobile */
@media screen and (max-width: 767px) {

    body,
    #footer {
        font-size: 1.125rem;
    }

    .navbar.mobile {
        height: 110px;
    }

    .site-logo {
        width: 177px;
        height: 70px;
    }

    .site-logo .elementor-image,
    .site-logo img {
        width: 177px;
        height: 70px;
    }

    .site-logo .elementor-image,
    .site-logo.elementor-widget-image img[src$=".svg"] {
        width: 177px;
        height: 70px;
    }

    .large-text,
    .intro {
        font-size: 1.25rem;
    }

    a.btn,
    li.btn a,
    .elementor-widget-button .elementor-button,
    input[type=submit],
    button[type=button],
    button[type=submit],
    .jet-form button {
        /* font-size: 1rem; */
    }

    h1,
    .elementor-widget-heading h1.elementor-heading-title {
        font-size: 3rem;
    }

    h2,
    .elementor-widget-heading h2.elementor-heading-title {
        font-size: 2.5rem;
    }

    h3,
    .elementor-widget-heading h3.elementor-heading-title {
        font-size: 2.25rem;
    }

    h4,
    .elementor-widget-heading h4.elementor-heading-title {
        font-size: 2rem;
    }

    h5,
    .elementor-widget-heading h5.elementor-heading-title {
        font-size: 1.5rem;
    }

    h6,
    .elementor-widget-heading h6.elementor-heading-title {
        font-size: 1.125rem;
    }

    .submenu .elementor-widget-nav-menu {
        column-count: 1;
    }


    .elementor-widget-blockquote .elementor-blockquote {
        font-size: 1.25rem;
        padding: 0 0 0 25px;
    }


    .image-overlay-box {
        padding: 30px;
        max-width: 100%;
        margin-top: -150px;
        min-height: auto;
        text-align: center;
    }

    .image-overlay-box .elementor-button {
        min-width: 220px;
    }

    .elementor-widget-icon-list.elementor-widget .elementor-icon-list-icon i {
        margin-right: 0;
        padding-top: 0;
    }

    #footer-top {
        padding: 30px 0 20px 0;
        row-gap: 10px;
    }

    #footer-bottom {
        padding: 30px 0 30px 0;
    }


    #footer .elementor-nav-menu a {
        padding: 0 0 0 40px;
        background-position: 0 6px;
        margin-bottom: 15px;
    }

    #footer-bottom .elementor-icon-list-item {
        display: block;
        width: 100%;
    }

    .single-page .elementor-widget-heading h1.elementor-heading-title {
        font-size: 2rem;
    }

    .single-page .back-link {
        margin-bottom: 0 !important;
    }

    .single-page .back-link a {
        font-size: 1rem !important;
    }
}














/*** ANIMATED BACKGROUND CLOUDS ***/


#page-background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -100;
}

#page-background .background-wrapper {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
}

#page-background .background-cloud {
    position: absolute;
    z-index: -1;
    width: auto;
    height: auto;
}

#page-background .background-cloud svg {
    width: 100% !important;
    height: auto !important;
}

/* layout 1 - default */

#page-background .background-cloud.cloud-1 {
    width: 80vw;
    top: 5%;
    left: -10%;
    --x1: 90%;
    --d: 72s;

    animation: cloud_drift var(--d) linear infinite;
}

#page-background .background-cloud.cloud-2 {
    width: 50vw;
    top: 25%;
    left: 60%;
    --x1: -80%;
    --d: 48s;

    animation: cloud_drift var(--d) linear infinite;
}

#page-background .background-cloud.cloud-3 {
    width: 80vw;
    top: 40%;
    left: 60%;
    --x1: -90%;
    --d: 64s;

    animation: cloud_drift var(--d) linear infinite;
}


#page-background .background-cloud.cloud-4 {
    width: 50vw;
    top: 70%;
    left: -10%;
    --x1: 90%;
    --d: 64s;

    animation: cloud_drift var(--d) linear infinite;
}

/* layout 2 */

#page-background .layout-2 .background-cloud.cloud-1 {
    width: 70vw;

    top: -30%;
    left: 30%;

    --x1: 10%;
    --y1: 15%;

    --x2: 25%;
    --y2: -25%;
}

#page-background .layout-2 .background-cloud.cloud-2 {
    width: 60vw;

    top: 25%;
    left: -10%;

    --x1: -20%;
    --y1: -10%;

    --x2: 5%;
    --y2: -20%;
}

#page-background .layout-2 .background-cloud.cloud-3 {
    width: 65vw;

    top: 60%;
    left: 30%;

    --x1: -12%;
    --y1: -8%;

    --x2: 20%;
    --y2: -15%;
}


@media screen and (max-width: 1024px) {
    #page-background .background-cloud.cloud-1 {
        width: 90vw;
        left: -30%;
    }

    #page-background .background-cloud.cloud-2 {
        width: 110vw;
    }

    #page-background .background-cloud.cloud-3 {
        width: 90vw;
    }

    #page-background .layout-2 .background-cloud.cloud-1 {
        top: -10%;
        width: 110vw;
    }

    #page-background .layout-2 .background-cloud.cloud-2 {
        width: 110vw;
    }

    #page-background .layout-2 .background-cloud.cloud-3 {
        width: 90vw;
    }
}

/* animation */

@keyframes cloud_drift {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(var(--x1), 0);
    }

    100% {
        transform: translate(0, 0);
    }
}


@keyframes cloud_drift2 {
    0% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(var(--x1), 0);
    }

    67% {
        transform: translate(var(--x2), 0);
    }

    100% {
        transform: translate(0, 0);
    }
}