/*
    section - inner tag of every component, so it applyes those styles automatically.
        Classes to use inside section:
        .subtitle
        .text - to apply common color of text
        .accent-color - to highlight specific text
        .link - to add color changing on hover


    .primary-block - the inner block of the component.
        Classes to use inside primary-block:
        .bg-hover - to add bg color changing on block hover (write to the same element on which the ".primary-block" class was applied)
        .text - to apply common color of text
        .accent-color - to highlight specific text
        .link - to add color changing on hover

    .secondary-block - inner block of the primary-block.
        Classes to use inside secondary-block:
        .bg-hover - to add bg color changing on block hover (write to the same element on which the ".secondary-block" class was applied)
        .text - to apply common color of text
        .accent-color - to highlight specific text
        .link - to add color changing on hover


    .tertiary-block - inner block secondary-block.
        Classes to use inside tertiary-block:
        .bg-hover - to add bg color changing on block hover (write to the same element on which the ".tertiary-block" class was applied)
        .text - to apply common color of text
        .accent-color - to highlight specific text
        .link - to add color changing on hover

*/

/*COMPONENT CONTAINER*/
section {
    background-color: var(--bg-color);
}
section h1, section h2, section h3 {
    color: var(--h-color);
}
section .text {
    color: var(--block-primary-text-color);
}
section .subtitle {
    color: var(--subtitle-color);
}
section .accent-color {
    color: #C6E76C;
}
section .link:hover {
    color: var(--link-hover-color);
}

/*PRIMARY BLOCK*/
.primary-block {
    background-color: var(--block-primary-bg-color);
}
.primary-block.bg-hover:hover {
    background-color: var(--block-primary-bg-hover-color);
}
.primary-block h1, .primary-block h2, .primary-block h3 {
    color: var(--block-primary-h-color);
}
.primary-block .text {
    color: var(--block-primary-text-color);
}
.primary-block .accent-color {
    color: #C6E76C;
}
.primary-block .link:hover {
    color: var(--block-primary-link-hover-color);
}

/*SECONDARY BLOCK*/
.secondary-block {
    background-color: var(--block-secondary-bg-color);
    box-shadow: var(--block-secondary-box-shadow);
}
.secondary-block.bg-hover:hover {
    background-color: var(--block-secondary-bg-hover-color);
}
.secondary-block h1, .secondary-block h2, .secondary-block h3 {
    color: var(--block-secondary-h-color);
}
.secondary-block .text {
    color: var(--block-secondary-text-color);
}
.secondary-block .accent-color {
    color: #C6E76C;
}
.secondary-block .link:hover {
    color: var(--block-secondary-link-hover-color);
}

/*TERTIARY BLOCK*/
.tertiary-block {
    background-color: var(--block-tertiary-bg-color);
    box-shadow: var(--block-tertiary-box-shadow);
}
.tertiary-block.bg-hover:hover {
    background-color: var(--block-tertiary-bg-hover-color);
}
.tertiary-block h1, .tertiary-block h2, .tertiary-block h3 {
    color: var(--block-tertiary-h-color);
}
.tertiary-block .text {
    color: var(--block-tertiary-text-color);
}
.tertiary-block .accent-color {
    color: #C6E76C;
}
.tertiary-block .link:hover {
    color: var(--block-tertiary-link-hover-color);
}

/* homepage \/ */
faq-component .subtitle {
    margin: 50px 0;
}
faq-component div.primary-block {
    --block-primary-bg-color: transparent;
    border: 1px solid #E1E4E4;
    border-radius: 0;
}
faq-component div.primary-block:hover, 
faq-component div.primary-block.expand {
    --block-primary-bg-hover-color: transparent;
}
faq-component div.primary-block:hover .title,
faq-component div.primary-block .title {
    font-weight: 400;
    --block-primary-accent-color: #0E1011;
}
faq-component div.primary-block .icon svg {
    display: none;
}
faq-component div.primary-block .icon:after {
    content: "";
    display: block;
    height: 18px;
    width: 15px;
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.749%2010.4619L13.7225%200.247401L3.508%200.220897C3.40158%200.206489%203.29331%200.215114%203.19051%200.246188C3.08772%200.277262%202.9928%200.33006%202.91218%200.401007C2.83156%200.471955%202.76713%200.559395%202.72324%200.657409C2.67936%200.755423%202.65704%200.861722%202.65781%200.96911C2.65858%201.0765%202.68241%201.18247%202.72769%201.27984C2.77297%201.37722%202.83864%201.46373%202.92027%201.53352C3.00189%201.60331%203.09756%201.65475%203.20079%201.68435C3.30402%201.71395%203.4124%201.72103%203.5186%201.7051L11.1728%201.7369L1.03256%2011.8772C0.89198%2012.0178%200.813002%2012.2084%200.813002%2012.4073C0.813002%2012.6061%200.89198%2012.7968%201.03256%2012.9373C1.17315%2013.0779%201.36382%2013.1569%201.56264%2013.1569C1.76145%2013.1569%201.95212%2013.0779%202.09271%2012.9373L12.233%202.79705L12.2648%2010.4513C12.2655%2010.6502%2012.3452%2010.8407%2012.4864%2010.9809C12.6275%2011.1211%2012.8186%2011.1994%2013.0175%2011.1987C13.2164%2011.198%2013.4069%2011.1183%2013.5471%2010.9771C13.6873%2010.836%2013.7656%2010.6449%2013.7649%2010.446L13.749%2010.4619Z%22%20fill%3D%22%23C6E76C%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center;

    transition: transform 1s linear;
}
faq-component div.primary-block.expand .icon:after {
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.45607%2013.9153L13.6706%2013.8888L13.6971%203.67426C13.7115%203.56784%2013.7029%203.45957%2013.6718%203.35677C13.6407%203.25398%2013.5879%203.15906%2013.517%203.07844C13.446%202.99782%2013.3586%202.93339%2013.2606%202.8895C13.1625%202.84562%2013.0562%202.8233%2012.9489%202.82407C12.8415%202.82483%2012.7355%202.84867%2012.6381%202.89395C12.5407%202.93923%2012.4542%203.0049%2012.3844%203.08653C12.3147%203.16815%2012.2632%203.26382%2012.2336%203.36705C12.204%203.47028%2012.1969%203.57866%2012.2129%203.68486L12.1811%2011.3391L2.04078%201.19882C1.90019%201.05824%201.70952%200.979261%201.51071%200.979261C1.31189%200.979262%201.12122%201.05824%200.980633%201.19882C0.840049%201.33941%200.761071%201.53008%200.761071%201.7289C0.76107%201.92771%200.840049%202.11838%200.980634%202.25897L11.1209%2012.3993L3.46667%2012.4311C3.26775%2012.4318%203.07725%2012.5115%202.93708%2012.6526C2.79692%2012.7938%202.71857%2012.9848%202.71927%2013.1838C2.71997%2013.3827%202.79967%2013.5732%202.94083%2013.7134C3.08199%2013.8535%203.27305%2013.9319%203.47197%2013.9312L3.45607%2013.9153Z%22%20fill%3D%22%23C6E76C%22%2F%3E%3C%2Fsvg%3E');
}
faq-component .primary-block.overflow .expandable-wrapper::-webkit-scrollbar-thumb {
    background-color: #B3E920;
}
/* homepage /\ */


posts-template .posts-template .flex-wrapper {
    display: none;
}

footer-component ~ * section {
    padding: 0;
}

about-us-banner[data-gh-id="about-us-banner-second"] .flex-wrapper {
    flex-direction: row-reverse;
}

@media screen and (max-width: 550px) {
    about-us-banner div.flex_button > * {
        width: fit-content;
    }
    about-us-banner div.flex_button {
        justify-content: center;
    }
}

/* small */
popup-container[data-position=bottom-right] .get-in-touch-form div.like_title {
    font-size: 24px;
    line-height: 36px;
    font-weight: 400;
}

popup-container .get-in-touch-form form .form_wrap input,
popup-container .get-in-touch-form form .form_wrap textarea {
    font-size: 16px;
    max-height: 45px;
    padding: 0;
    --input-border-radius: 0;
    border: none !important;
    border-bottom: 1px solid #0E1011 !important;
}
popup-container div.popup {
    border-radius: 0;
}
popup-container .get-in-touch-form form .btn_wrapper .btn {
    font-size: 22px;
}
/* small */

div.get-in-touch-form {
    --block-primary-bg-color: #FFFFFF;
    --block-primary-border-radius: 0;
    max-width: 554px;
    padding: 50px;
}
.get-in-touch-form form .form_wrap input,
.get-in-touch-form form .form_wrap textarea {
    max-height: 45px;
    padding: 0;
    --input-border-radius: 0;
    border: none;
    border-bottom: 1px solid #0E1011;
}
.get-in-touch-form form .form_wrap textarea:hover,
.get-in-touch-form form .form_wrap textarea:hover,
.get-in-touch-form form .form_wrap input:hover,
.get-in-touch-form form .form_wrap input:focus {
    --input-active-border-color: #B3E920;
}
.get-in-touch-form .btn {
    background-color: #B3E920;
    color: #0E1011;
    width: 100%;
    padding: 17px 25px;
    border: 1px solid transparent;

    transition: all .2s ease-in;
}
.get-in-touch-form .btn_wrapper .btn:hover {
    background-color: #0E1011;
    color: #fff;
}

/* fancybox */
.fancybox__caption button {
    cursor: pointer;
    background-color: #B3E920;
    color: #0E1011;
    width: 100%;
    padding: 10px 15px;
    border: 1px solid transparent;
    font-size: 22px;

    transition: all .2s ease-in;
}
.fancybox__caption button:hover {
    background-color: #fff;
    color: #0E1011;
}
.fancybox__container .fancybox__slide.has-youtube .fancybox__content {
    width: 100%;
    height: 100%;
}
@media screen and (min-width: 1250px) {
    .fancybox__container .fancybox__content iframe[src^="/house-rotations/"] {
        width: 60vw;
    }
    
}
/* fancybox */