/*
File: home.css
This contains overrides for home page
*/

/*
SECTION TITLE LINES
*/

#rf-body .rf-title-line {
    display: flex;
    align-items: center;
}

/* Round Icon */
#rf-body .rf-title-line .rf-title-line__image {
    margin-right: var(--size-medium);
}

#rf-body .rf-title-line .rf-title-line__heading {
    margin-right: var(--size-medium);
    flex-grow: 1;
}

#rf-body .rf-title-line .rf-title-line__heading h2 {
    padding-bottom: 0;
}

#rf-body .rf-title-line a.rf-title-line__link {
    color: var(--color-1);
    font-weight: bold;
    transition: var(--transition-standard);
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

#rf-body .rf-title-line a.rf-title-line__link::after {
    content: "";
    display: block;
    z-index: 0;
    position: absolute;
    height: 1px;
    width: 0;
    bottom: 3px;
    background-color: var(--color-2);
    transition: var(--transition-standard);
}

#rf-body .rf-title-line a.rf-title-line__link:hover {
    color: var(--color-2);
}

#rf-body .rf-title-line a.rf-title-line__link:hover::after {
    width: 100%;
}

/* Color variant: color-2 dark */
#rf-body .rf-title-line a.rf-title-line__link.rf-color-2--dark {
    color: #d9bf4a; /* Slightly darker than color-2 */
}

#rf-body .rf-title-line a.rf-title-line__link.rf-color-2--dark::after {
    background-color: var(--color-3);
}

#rf-body .rf-title-line a.rf-title-line__link.rf-color-2--dark:hover {
    color: var(--color-3);
}

/* Color variant: color-3 */
#rf-body .rf-title-line a.rf-title-line__link.rf-color-3 {
    color: var(--color-3);
}

#rf-body .rf-title-line a.rf-title-line__link.rf-color-3::after {
    background-color: var(--color-2);
}

#rf-body .rf-title-line a.rf-title-line__link.rf-color-3:hover {
    color: var(--color-2);
}

/* Color variant: color-4 */
#rf-body .rf-title-line a.rf-title-line__link.rf-color-4 {
    color: var(--color-4);
}

#rf-body .rf-title-line a.rf-title-line__link.rf-color-4::after {
    background-color: var(--color-5);
}

#rf-body .rf-title-line a.rf-title-line__link.rf-color-4:hover {
    color: var(--color-5);
}

/* Color variant: color-5 dark */
#rf-body .rf-title-line a.rf-title-line__link.rf-color-5--dark {
    color: #733d5c; /* Slightly darker than color-5 */
}

#rf-body .rf-title-line a.rf-title-line__link.rf-color-5--dark::after {
    background-color: var(--color-2);
}

#rf-body .rf-title-line a.rf-title-line__link.rf-color-5--dark:hover {
    color: var(--color-2);
}

#rf-body .rf-title-line .rf-title-line__button .button {
    margin-top: 0;
}

#rf-body .rf-title-line .rf-title-line__button p {
    text-align: center;
}

/*
HERO IMAGE
*/

.rf-hero-slider .et_pb_slide_description {
    padding: 0;
}

.rf-hero-slider .rf-slide {
    display: flex;
    align-items: center;
    padding: var(--size-large) 0;
    color: var(--color-font-inverse) !important;
}

@media (max-width: 767px) {
    .rf-hero-slider .rf-slide {
        padding: var(--size-xxlarge) 0;
    }
}

.rf-hero-slider .rf-slide-content {
    flex-grow: 1;
    margin-right: var(--size-large);
}

.rf-hero-slider .rf-slide-content .rf-slide-content__subtitle {
    letter-spacing: 0.25px;
}

.rf-hero-slider .rf-slide-content .rf-slide-content__button-wrapper {
    margin-top: var(--line-height);
}

.rf-hero-slider .rf-slide-sidebar {
    position: relative;
    z-index: 2;
    max-width: 23rem;
    padding: var(--size-large);
    margin-bottom: var(--size-large);
    background-image: url(https://www.thebrushguys.com/wp-content/uploads/2020/06/rounded-rectangle-card-background-2-outline.svg);
    background-size: 100% 100%;
}

/* Star decoration for sidebar */
.rf-hero-slider .rf-slide-sidebar::before {
    content: "";
    background-image: url(https://www.thebrushguys.com/wp-content/uploads/2020/06/star.svg);
    display: block;
    position: absolute;
    z-index: -1;
    height: 75%;
    width: 75%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(79deg);
    top: calc(-37.5% - (-20%));
    right: calc(-37.5% - (-20%));
}

.rf-hero-slider .rf-slide-sidebar * {
    text-shadow: none;
}

.rf-hero-slider .rf-slide-sidebar .rf-slide-sidebar__overline,
.rf-hero-slider .rf-slide-sidebar .rf-slide-sidebar__title {
    display: block;
    color: var(--color-font-1) !important;
    text-align: left;
}

.rf-hero-slider .rf-slide-sidebar .rf-slide-sidebar__title {
    padding: var(--line-height) 0 0;
}

.rf-hero-slider .rf-slide-sidebar .rf-slide-sidebar__image {
    border-radius: var(--size-medium);
    overflow: hidden;
    position: relative;
}

/* Square element for image */
.rf-hero-slider .rf-slide-sidebar .rf-slide-sidebar__image::after {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 100%;
}

.rf-hero-slider .rf-slide-sidebar .rf-slide-sidebar__image img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--size-medium);
}

.rf-hero-slider .rf-slide-sidebar .rf-slide-sidebar__button-wrapper {
    position: absolute;
    width: calc(100% - 6rem);
    bottom: -1.5rem;
}

.rf-hero-slider .rf-slide-sidebar .rf-slide-sidebar__button {
    width: 100%;
    z-index: 2;
}

/*
FEATURED BLOCK
*/

.rf-featured-block {
    display: flex;
    align-items: center;
    margin-left: var(--size-medium);
}

.rf-featured-block__image-wrapper {
    width: 100%;
    max-width: 12rem;
}

/* Star decorations for featured blocks */
.rf-featured-block__image-wrapper.rf-star-before.rf-star-1 {
    position: relative;
}

.rf-featured-block__image-wrapper.rf-star-before.rf-star-1::before {
    content: "";
    background-image: url(https://www.thebrushguys.com/wp-content/uploads/2020/06/star.svg);
    display: block;
    position: absolute;
    z-index: -1;
    height: 75%;
    width: 75%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(20deg);
    top: -37.5%;
    right: -37.5%;
}

.rf-featured-block__image-wrapper.rf-star-before.rf-star-2 {
    position: relative;
}

.rf-featured-block__image-wrapper.rf-star-before.rf-star-2::before {
    content: "";
    background-image: url(https://www.thebrushguys.com/wp-content/uploads/2020/06/star2.svg);
    display: block;
    position: absolute;
    z-index: -1;
    height: 75%;
    width: 75%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-22deg);
    top: -37.5%;
    left: -37.5%;
}

/* Card backgrounds for different colors */
.rf-featured-block__image-wrapper.rf-star-before.rf-card-bg.rf-color-1::after {
    content: "";
    background-image: url(https://www.thebrushguys.com/wp-content/uploads/2020/06/rounded-rectangle-card-background-outline.svg);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: absolute;
    width: calc(100% + 3rem);
    left: -1.5rem;
    height: calc(100% + 1.5rem);
    top: -3rem;
    z-index: -2;
}

.rf-featured-block__image-wrapper.rf-star-before.rf-card-bg.rf-color-3::after {
    content: "";
    background-image: url(https://www.thebrushguys.com/wp-content/uploads/2020/06/rounded-rectangle-card-background-outline.svg);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: absolute;
    width: calc(100% + 3rem);
    left: -1.5rem;
    height: calc(100% + 1.5rem);
    top: -3rem;
    z-index: -2;
    filter: brightness(0) saturate(100%) invert(31%) sepia(42%) saturate(443%) hue-rotate(154deg) brightness(96%) contrast(95%);
}

.rf-featured-block__image-wrapper.rf-star-before.rf-card-bg.rf-color-4::after {
    content: "";
    background-image: url(https://www.thebrushguys.com/wp-content/uploads/2020/06/rounded-rectangle-card-background-outline.svg);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: absolute;
    width: calc(100% + 3rem);
    left: -1.5rem;
    height: calc(100% + 1.5rem);
    top: -3rem;
    z-index: -2;
    filter: brightness(0) saturate(100%) invert(60%) sepia(71%) saturate(307%) hue-rotate(71deg) brightness(92%) contrast(85%);
}

.rf-featured-block__image-wrapper.rf-star-before.rf-card-bg.rf-color-5::after {
    content: "";
    background-image: url(https://www.thebrushguys.com/wp-content/uploads/2020/06/rounded-rectangle-card-background-outline.svg);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: absolute;
    width: calc(100% + 3rem);
    left: -1.5rem;
    height: calc(100% + 1.5rem);
    top: -3rem;
    z-index: -2;
    filter: brightness(0) saturate(100%) invert(31%) sepia(59%) saturate(376%) hue-rotate(272deg) brightness(92%) contrast(98%);
}

.rf-featured-block__image-wrapper.rf-star-before.rf-card-bg.rf-color-6::after {
    content: "";
    background-image: url(https://www.thebrushguys.com/wp-content/uploads/2020/06/rounded-rectangle-card-background-outline.svg);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: absolute;
    width: calc(100% + 3rem);
    left: -1.5rem;
    height: calc(100% + 1.5rem);
    top: -3rem;
    z-index: -2;
    filter: brightness(0) saturate(100%) invert(52%) sepia(41%) saturate(4746%) hue-rotate(340deg) brightness(92%) contrast(94%);
}

.rf-featured-block__image-title {
    font-weight: bold;
}

.rf-featured-block__image {
    border-radius: var(--size-medium);
    overflow: hidden;
    position: relative;
}

.rf-featured-block__image img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--size-medium);
}

/* Square element for image */
.rf-featured-block__image::after {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 100%;
}

.rf-featured-block__content-wrapper {
    margin: var(--size-medium) 0 0 var(--size-large);
}

.rf-featured-block__content-wrapper a.button {
    width: 100%;
    text-align: center;
}

.rf-featured-block__title {
    padding-bottom: var(--line-height);
}

/*
MANUFACTURERS SECTION
*/

.rf-logo-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/*
TEACHERS SECTION
*/

#rf-body .rf-teacher-portrait .et_pb_main_blurb_image {
    margin-bottom: 0;
}

#rf-body .rf-teacher-portrait .et_pb_blurb_container {
    margin-top: -2rem;
}

#rf-body .rf-teacher-portrait .button {
    padding: 2rem var(--size-medium) 1rem !important;
    width: 100%;
    text-align: center;
}

/*
MEDIUMS SECTION
*/

#rf-body .rf-picture-tile {
    display: flex;
    align-items: center;
    justify-content: center;
}

#rf-body .rf-picture-tile h3 {
    padding-bottom: 0;
    text-align: center;
    transition: var(--transition-standard);
}

#rf-body .rf-picture-tile:hover h3 {
    color: var(--color-2) !important;
}

/*
Testimonials Section
*/

#rf-body.home .et_pb_testimonial .et_pb_testimonial_portrait {
    float: left;
    margin: 0.5rem 1rem 1rem 0.5rem;
}

#rf-body.home .et_pb_testimonial .et_pb_testimonial_portrait::before {
    box-shadow: none;
}

#rf-body.home .et_pb_testimonial .et_pb_testimonial_content p {
    padding-bottom: 0;
}

#rf-body.home .et_pb_testimonial .et_pb_testimonial_author {
    margin: 0;
}

/*
INSTAGRAM FEED
*/

#rf-body #sb_instagram {
    position: relative;
    left: -7.5%;
}

@media (max-width: 640px) {
    #rf-body #sb_instagram {
        left: 0;
        padding-left: var(--size-small);
    }
}

#rf-body #sb_instagram .sbi_item {
    padding-right: var(--size-large) !important;
    transition: var(--transition-bounce);
}

#rf-body #sb_instagram .sbi_item:hover {
    transform: skew(-1deg, 2deg) scale(1.05, 1.1);
}

@media (max-width: 980px) {
    #rf-body #sb_instagram .sbi_item {
        padding: 0 var(--size-small) var(--size-small) 0 !important;
    }
}

@media (max-width: 479px) {
    #rf-body #sb_instagram .sbi_item {
        display: none;
    }
    
    #rf-body #sb_instagram .sbi_item:nth-child(1),
    #rf-body #sb_instagram .sbi_item:nth-child(2),
    #rf-body #sb_instagram .sbi_item:nth-child(3),
    #rf-body #sb_instagram .sbi_item:nth-child(4) {
        display: block;
    }
}

#rf-body #sb_instagram .sbi_photo {
    border-radius: var(--size-medium);
    opacity: 1 !important;
}