/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
Globals (GL)
	GL - Carousels
		GL_C - Flickity main carousel
            GL_C - Card styles
            GL_C - Buttons

/*--------------------------------------------------------------
GL_C - Flickity main carousel
--------------------------------------------------------------*/

.hopp-blocks-main-carousel {
    overflow: hidden;
    margin-bottom: 2rem;
}

.hopp-blocks-main-carousel,
.hopp-blocks-main-carousel .flickity-slider {
    padding: 0;
}

.hopp-blocks-main-carousel .card-carousel.flickity-enabled {
    padding-bottom: 4.5rem;
}

.hopp-blocks-main-carousel .flickity-button {
    bottom: 0;
    top: auto;
    right: 1.5rem;
    left: auto;
}

.hopp-blocks-main-carousel .flickity-button {
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    font-family: inherit;
    box-shadow: none !important;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 9.4rem;
    height: 3rem;
}

.hopp-blocks-main-carousel.faw-post-cards .carousel-cell > div {
    margin-right: 0;
    margin-left: 0;
    height: auto;
    width: 100%;
    display: flex;
}

.hopp-blocks-main-carousel.faw-post-cards .carousel-cell > div > div {
    width: 100%;
}

.hopp-blocks-main-carousel.faw-post-cards .flickity-enabled .flickity-slider > div,
.hopp-blocks-main-carousel .flickity-slider > div {
    /* min-height: calc(100% - 3rem); */
    display: flex;
    padding-bottom: 3rem;
    margin-bottom: 0!important;
    min-height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* .hopp-blocks-main-carousel .flickity-prev-next-button.next:after,
.hopp-blocks-main-carousel .flickity-prev-next-button.previous:after {
    background-size: 3rem 2rem;
    border: none;
	left: auto;
    right: auto;
    transform: rotate(0deg);
    background-repeat:no-repeat;
	width: 100%;
    height: 100%;
    background-position: center;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='38.752' height='22.828' viewBox='0 0 38.752 22.828'%3e%3cg id='long-arrow-left-white' transform='translate(487.939 456.426) rotate(180)'%3e%3cline id='Line_4' data-name='Line 4' x2='36.673' transform='translate(450.188 445.013)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2'/%3e%3cpath id='Path_23123' data-name='Path 23123' d='M17.919.5l9.76,9.794a.275.275,0,0,1,0,.386L17.893,20.5' transform='translate(459.105 434.512)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2'/%3e%3c/g%3e%3c/svg%3e ");
}

.hopp-blocks-main-carousel .flickity-button.flickity-prev-next-button.next:hover:after,
.hopp-blocks-main-carousel .flickity-button.flickity-prev-next-button.next:focus:after,
.hopp-blocks-main-carousel .flickity-button.flickity-prev-next-button.next:active:after,
.hopp-blocks-main-carousel .flickity-button.flickity-prev-next-button.previous:hover:after,
.hopp-blocks-main-carousel .flickity-button.flickity-prev-next-button.previous:focus:after,
.hopp-blocks-main-carousel .flickity-button.flickity-prev-next-button.previous:active:after {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='38.752' height='22.828' viewBox='0 0 38.752 22.828'%3e%3cg id='long-arrow-left-white' transform='translate(487.939 456.426) rotate(180)'%3e%3cline id='Line_4' data-name='Line 4' x2='36.673' transform='translate(450.188 445.013)' fill='none' stroke='%23e5231b' stroke-linecap='round' stroke-width='2'/%3e%3cpath id='Path_23123' data-name='Path 23123' d='M17.919.5l9.76,9.794a.275.275,0,0,1,0,.386L17.893,20.5' transform='translate(459.105 434.512)' fill='none' stroke='%23e5231b' stroke-linecap='round' stroke-width='2'/%3e%3c/g%3e%3c/svg%3e ");
} */

.hopp-blocks-main-carousel .flickity-prev-next-button.next:after {
    transform: rotate(-180deg);
}

.hopp-blocks-main-carousel .flickity-prev-next-button.previous {
    margin-left: auto;
    margin-right: 12rem;
}

.hopp-blocks-main-carousel .flickity-prev-next-button.next:before {
    content: none;
}

/* Editor column width classes */
.hopp-blocks-main-carousel .flickity-slider > div {
    min-width:32rem;
}

.hopp-blocks-main-carousel.carousel-1-cards .flickity-slider > div {
	width:100%;
}

.hopp-blocks-main-carousel.carousel-2-cards .flickity-slider > div {
	width:50%;
}

.hopp-blocks-main-carousel.carousel-3-cards .flickity-slider > div {
	width:33.3%;
}

.hopp-blocks-main-carousel.carousel-4-cards .flickity-slider > div {
	width:25%;
}

.hopp-blocks-main-carousel-template-wrapper .hopp-blocks-main-carousel .flickity-button {
    right: 0;
}

.hopp-blocks-main-carousel .container-carousel-inner {
    margin: 0 -1.5rem;
}


/*--------------------------------------------------------------
GL_C - Card styles
--------------------------------------------------------------*/

/* Dark theme cards */
.card-carousel--dark .faw-post-cards__card,
.card-carousel--dark .faw-post-cards__card__text {
    background-color: #3E3E3E;
}

.card-carousel--dark,
.card-carousel--dark .wp-block-button__link:hover ~ div .faw-post-cards__title, 
.card-carousel--dark .wp-block-button__link:focus ~ div .faw-post-cards__title,
.card-carousel--dark .wp-block-button__link:active ~ div .faw-post-cards__title,
.card-carousel--dark .faw-post-cards__date, 
.card-carousel--dark .faw-post-cards__cats,
.card-carousel--dark a,
.card-carousel--dark a:hover,
.card-carousel--dark a:focus,
.card-carousel--dark a:active {
    color: #fff;
}

.card-carousel--dark .faw-post-cards__title:after {
    background-color:currentColor;
}
/* End: Dark theme cards */

/*--------------------------------------------------------------
GL_C - Buttons
--------------------------------------------------------------*/

.hopp-blocks-main-carousel .flickity-button {
    overflow:hidden;
}

.hopp-blocks-main-carousel .flickity-button-icon {
    display: block;
}

.hopp-blocks-main-carousel .flickity-button-icon {
    position: relative;
}

.hopp-blocks-main-carousel .flickity-prev-next-button:after {
    content: none;
} 

.hopp-blocks-main-carousel .flickity-button-icon {
    width: 3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}