/*=============================================================================
  IMAGE BLOCKS

  * Also called "banners" -- large banners have "image-block__large-banner"
    class, and small banners have "image-block__small-banner" class
  * Image rotator CSS can be found in "component-imagerotator.css"
  * Image rotators share some of the same classes, particularly the overlays
=============================================================================*/

/* Containers */
.image-block {
    width: 100%;
    max-width: 1200px;
    text-align: center;
    transition: all 0.3s ease-out;
}

.image-block.image-block__small-banner {
    margin: 0 auto;
}

.image-block__small-banner .image-block__banner {
	padding-bottom: 24px;
}

.image-block__wrapper {
    margin: 0;
    transition: all 0.3s ease-out;
    padding: 0;
    position: relative;
}

.image-block__banner {
    display: block;
    padding-bottom: var(--spacing-06);
}

.image-block__image-wrap {
    position: relative;
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--color-surface-primary);
	border-radius: var(--border-radius-md);
}

/* Images */
.image-block__image {
    position: relative;
    top: 0;
    left: 50%;
    width: 576px;
    transform: translateX(-50%);
}

/* Videos */
.image-block__video-container {
    display: block;
    width: 100%;
    position: relative;
}

.image-block__video-container.is-large {
    display: none;
}

.image-block__video-control {
    position: absolute;
    top: var(--spacing-02);
    right: var(--spacing-02);
    height: 52px;
    width: 52px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background-color: var(--color-surface-primary);
    opacity: var(--opacity-70);
    transition: background 200ms;
    border: none;
}

.image-block__video-control:hover {
    background: var(--color-surface-primary);
}

.image-block__video-control .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: var(--spacing-04-negative);
    margin-left: var(--spacing-04-negative);
}

/* Logo */
.image-block__logo-wrap {
    position: absolute;
    top: var(--spacing-02);
    right: var(--spacing-02);
    height: var(--spacing-12);
    width: var(--spacing-12);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background-color: var(--color-surface-primary);
}

.ta1 .image-block__logo-wrap,
.ta2 .image-block__logo-wrap,
.ta3 .image-block__logo-wrap,
.ta4 .image-block__logo-wrap,
.ta5 .image-block__logo-wrap,
.ta6 .image-block__logo-wrap {
    top: var(--spacing-04);
    right: var(--spacing-04);
}

.image-block__logo-wrap.is-black {
    background-color: var(--color-surface-primary-inverse);
}

.image-block__logo-wrap.is-left {
    left: var(--spacing-02);
    right: auto;
}

.image-block__logo {
    position: absolute;
    width: var(--spacing-12);
    top: var(--spacing-12-negative);
    left: 0;
}

.image-block__logo-wrap.is-color .image-block__logo {
    top: 0;
}

.image-block__logo-wrap.is-black .image-block__logo {
    top: -144px;
}

/* Information overlay */
.image-block__info-wrap {
    position: absolute;
    bottom: var(--spacing-06);
    left: var(--spacing-06);
    padding-right: var(--spacing-06);
    text-align: left;
    color: var(--color-text-primary-light);
}

.ta1 .image-block__info-wrap,
.ta2 .image-block__info-wrap,
.ta3 .image-block__info-wrap,
.ta4 .image-block__info-wrap,
.ta5 .image-block__info-wrap {
    width: auto;
    height: fit-content;
    margin-right: var(--spacing-06);
}

.ta6 .image-block__info-wrap {
    left: auto;
    right: 50%;
    top: 50%;
    width: 60%;
    max-width: 60%;
    height: fit-content;
    transform: translate(50%, -50%);
    text-align: center;
    margin-left: 0;
    margin-right: 0;
    padding-right: 0;
}

.image-block__info-wrap.is-holiday {
    color: var(--color-holiday-01);
}

.image-block__info-wrap.is-black {
    color: var(--color-text-primary-dark);
}

.image-block__large-banner .image-block__image-wrap {
    width: auto;
    max-width: 1200px;
}

.image-block__large-banner .image-block__topline {
    font: var(--text-marketing-content-sm);
    padding-bottom: var(--spacing-02);
}

.image-block__heading {
    font: var(--text-marketing-headline-xs);
    padding-bottom: var(--spacing-02);
}

.image-block__large-banner .image-block__subheading {
    font: var(--text-marketing-content-sm);
    padding-bottom: var(--spacing-02);
}

.image-block__large-banner .image-block__disclaimer {
    font: var(--text-marketing-content-disclaimer);
    padding-bottom: var(--spacing-04);
}

.image-block__small-banner .image-block__topline {
    font: var(--text-marketing-content-sm);
    padding-bottom: var(--spacing-02);
}

.image-block__small-banner .image-block__headline {
    font: var(--text-marketing-heading-xs);
    padding-bottom: var(--spacing-02);
}

.image-block__small-banner .image-block__subheading {
    font: var(--text-marketing-content-sm);
    padding-bottom: var(--spacing-02);
}

.image-block__small-banner .image-block__disclaimer {
    font: var(--text-marketing-content-disclaimer);
    padding-bottom: var(--spacing-04);
}

.image-block__button {
    display: inline-block;
    font: var(--text-button-sm);
    padding: var(--spacing-02) var(--spacing-03);
    margin-top: var(--spacing-02);
    border-radius: var(--border-radius-sm);
    text-align: center;
    color: var(--color-text-primary-dark);
    background-color: var(--color-surface-primary);
}

.image-block__button.is-sale {
    border-color: var(--color-surface-promo);
    background-color: var(--color-surface-promo);
    color: var(--color-text-primary-light);
}

.image-block__info-wrap.is-black .image-block__button:not(.is-sale) {
    background-color: var(--color-surface-primary-inverse);
    color: var(--color-surface-primary);
}

/* Holiday-Specific Text and Colors on Image Blocks */
.image-block__info-wrap.is-holiday,
.image-block__info-wrap.is-holiday-secondary {
    text-align: left;
    color: var(--color-holiday-01);
}

.image-block__info-wrap.is-holiday.holiday-02 {
    color: var(--color-holiday-02);
}

.image-block__overline {
    font: var(--text-marketing-content-sm);
    padding-bottom: 8px;
}

.image-block__subheading {
    font: var(--text-marketing-content-sm);
}

.image-block__info-wrap.is-holiday-secondary {
	color: var(--color-holiday-secondary-01);
}

.image-block__info-wrap.is-holiday-secondary.holiday-02 {
	color: var(--color-holiday-secondary-02);
}

.image-block__info-wrap.is-holiday .image-block__heading {
    font-family: var(--font-family-holiday-01);
	font-weight: var(--font-weight-holiday-01);
	line-height: var(--font-line-height-holiday-01);
}

.image-block__info-wrap.is-holiday-secondary .image-block__heading {
	font-family: var(--font-family-holiday-secondary-01);
	font-weight: var(--font-weight-holiday-secondary-01);
	line-height: var(--font-line-height-holiday-secondary-01);
}

.image-block__info-wrap.is-holiday .image-block__overline,
.image-block__info-wrap.is-holiday .image-block__subheading {
    font-family: var(--font-family-holiday-02);
	font-weight: var(--font-weight-holiday-02);
	line-height: var(--font-line-height-holiday-02);
}

.image-block__info-wrap.is-holiday-secondary .image-block__overline,
.image-block__info-wrap.is-holiday-secondary .image-block__subheading {
	font-family: var(--font-family-holiday-secondary-02);
	font-weight: var(--font-weight-holiday-secondary-02);
	line-height: var(--font-line-height-holiday-secondary-02);
}

.image-block__info-wrap.is-holiday .image-block__button {
	background-color: var(--color-holiday-01);
	color: var(--color-holiday-02);
}

.image-block__info-wrap.is-holiday .image-block__button.holiday-02 {
	background-color: var(--color-holiday-02);
	color: var(--color-holiday-01);
}

.image-block__info-wrap.is-holiday .image-block__button.holiday-03 {
	background-color: var(--color-holiday-03);
	color: var(--color-text-holiday-on-03);
}

.image-block__info-wrap.is-holiday .image-block__button.holiday-04 {
	background-color: var(--color-holiday-04);
	color: var(--color-text-holiday-on-04);
}

.image-block__info-wrap.is-holiday .image-block__button.holiday-05 {
	background-color: var(--color-holiday-05);
	color: var(--color-text-holiday-on-05);
}

.image-block__info-wrap.is-holiday .image-block__button.holiday-06 {
	background-color: var(--color-holiday-06);
	color: var(--color-text-holiday-on-06);
}

.image-block__info-wrap .image-block__button.holiday-secondary-01 {
	background-color: var(--color-holiday-secondary-01);
	color: var(--color-holiday-secondary-02);
}

.image-block__info-wrap .image-block__button.holiday-secondary-02 {
	background-color: var(--color-holiday-secondary-02);
	color: var(--color-holiday-secondary-01);
}

.image-block__info-wrap .image-block__button.holiday-secondary-03 {
	background-color: var(--color-holiday-secondary-03);
	color: var(--color-text-holiday-secondary-on-03);
}

/* END Holiday-Specific Text and Colors on Image Blocks */

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

    .image-block__image-wrap.is-holiday {
        max-width: 767px;
    }

    .image-block__image {
        width: 740px;
        max-width: 740px;
    }

    .image-block__large-banner .image-block__image {
        width: auto;
        max-width: 768px;
    }

    .image-block__image-wrap.is-holiday .image-block__image {
        width: 767px;
        max-width: 767px;
    }

    .image-block__info-wrap {
        max-width: 41.6667%;
        padding: 0;
    }

    .ta3 .image-block__logo-wrap,
    .ta4 .image-block__logo-wrap,
    .ta5 .image-block__logo-wrap {
        top: var(--spacing-04);
        left: var(--spacing-04);
    }

    .ta1 .image-block__info-wrap,
    .ta2 .image-block__info-wrap {
        left: 55%;
        bottom: var(--spacing-06);
        width: auto;
        margin-right: var(--spacing-06);
    }

    .ta2 .image-block__info-wrap {
        top: 50%;
        transform: translate(0, -50%);
    }

    .ta3 .image-block__info-wrap {
        max-width: 40%;
    }

    .ta4 .image-block__info-wrap,
    .ta5 .image-block__info-wrap {
        left: var(--spacing-06);
        top: 50%;
        width: auto;
        max-width: 40%;
        transform: translate(0, -50%);
    }

}

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

    .image-block__image-wrap {
        width: auto;
        max-width: 1200px;
        height: auto;
    }

    .image-block__large-banner .image-block__image {
        width: 100%;
        max-width: 992px;
    }

    .image-block__image-wrap.is-holiday {
        max-width: 1200px;
    }

    .image-block__small-banner .image-block__wrapper {
        margin: 0 var(--spacing-03-negative);
    }

    .image-block__image {
        top: auto;
        left: auto;
        transform: none;
    }

    .image-block__image-wrap.is-holiday .image-block__image {
        width: 100%;
        max-width: 1200px;
    }

    .image-block__large-banner .image-block__info-wrap {
        max-width: 46.875%;
        bottom: var(--spacing-10);
        left: var(--spacing-10);
        padding-right: 0;
    }

    .image-block__small-banner .image-block__info-wrap {
        max-width: 100%;
        padding-right: var(--spacing-06);
    }

    .image-block__large-banner .image-block__info-wrap .image-block__heading {
        padding-bottom: var(--spacing-02);
    }

    .image-block__large-banner .image-block__info-wrap .image-block__button {
        padding: var(--spacing-01) var(--spacing-03);
        font: var(--text-button-sm);
    }

    .image-block__large-banner .image-block__image-wrap.is-holiday .image-block__info-wrap .image-block__button {
        background-color: var(--color-holiday-01);
        color: var(--color-text-holiday-on-01);
    }

    .image-block__large-banner .image-block__image-wrap.is-holiday .image-block__info-wrap .image-block__heading {
        color: var(--color-holiday-02);
    }

    .image-block:not(.image-block__small-banner) .image-block__logo-wrap.is-left {
        left: var(--spacing-04);
        right: auto;
    }

    .image-block__small-banner .image-block__wrapper {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }

    .image-block__small-banner .image-block__banner {
        flex: 1 0 50%;
        max-width: 50%;
        padding: 0 var(--spacing-03) var(--spacing-06);
    }

    .image-block__small-banner .image-block__image-wrap {
        width: auto;
        border-radius: var(--border-radius-md);
        margin: 0;
    }

    .image-block__small-banner .image-block__image {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .image-block:not(.image-block__small-banner) .image-block__logo-wrap {
        top: var(--spacing-04);
        right: var(--spacing-04);
        height: var(--spacing-16);
        width: var(--spacing-16);
    }

    .image-block:not(.image-block__small-banner) .image-block__logo {
        width: var(--spacing-16);
        top: var(--spacing-16-negative);
    }

    .image-block:not(.image-block__small-banner) .image-block__logo-wrap.is-black .image-block__logo {
        top: -192px;
    }

    .image-block__logo-wrap.is-color .image-block__logo {
        top: 0;
    }

    .image-block__video-container.is-small {
        display: none;
    }

    .image-block__video-container.is-large {
        display: block;
    }

    .ta1 .image-block__info-wrap,
    .ta2 .image-block__info-wrap {
        left: var(--spacing-06);
        bottom: var(--spacing-06);
        width: auto;
        max-width: auto;
        margin-right: var(--spacing-06);
        padding-right: 0;
        right: 0;
    }

    .ta2 .image-block__info-wrap {
        left: 55%;
        top: 50%;
        transform: translate(0, -50%);
    }

    .ta3 .image-block__info-wrap,
    .ta4 .image-block__info-wrap,
    .ta5 .image-block__info-wrap {
        left: var(--spacing-06);
        bottom: var(--spacing-06);
        width: auto;
        max-width: 100%;
        margin-right: var(--spacing-06);
        padding-right: 0;
    }

    .ta4 .image-block__info-wrap,
    .ta5 .image-block__info-wrap {
        top: 50%;
        max-width: 40%;
        transform: translate(0, -50%);
    }

    .ta6 .image-block__info-wrap {
        padding-right: 0;
    }

}

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

    .image-block__large-banner .image-block__image {
        width: 100%;
        max-width: 1200px;
    }

    .image-block__large-banner .image-block__info-wrap {
        max-width: 45.9678%;
    }

    .image-block__small-banner .image-block__info-wrap {
        max-width: 40.65218%;
        padding: 0;
    }

    .image-block__logo-wrap.is-color .image-block__logo {
        top: 0;
    }

    .image-block__large-banner .image-block__info-wrap .image-block__button {
        padding: var(--spacing-03) var(--spacing-06);
        font: var(--text-button-lg);
    }

    .ta3 .image-block__logo-wrap {
        top: var(--spacing-04);
        left: var(--spacing-04);
    }

    .ta5 .image-block__logo-wrap {
        top: var(--spacing-04);
        right: var(--spacing-04);
    }

    .ta1 .image-block__info-wrap {
        left: 55%;
        bottom: var(--spacing-06);
        width: auto;
        margin-right: var(--spacing-06);
    }

    .ta2 .image-block__info-wrap {
        left: 55%;
        top: 50%;
        width: auto;
        transform: translate(0, -50%);
    }

    .ta3 .image-block__info-wrap {
        left: var(--spacing-06);
        bottom: var(--spacing-06);
        width: auto;
        max-width: 40%;
        margin-right: var(--spacing-06);
    }

    .ta4 .image-block__info-wrap,
    .ta5 .image-block__info-wrap {
        left: var(--spacing-06);
        top: 50%;
        width: auto;
        max-width: 40%;
        transform: translate(0, -50%);
    }

    .ta6 .image-block__info-wrap {
        top: 50%;
        width: 60%;
        max-width: 60%;
        transform: translate(50%, -50%);
        text-align: center;
    }

}

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

    .image-block {
        padding-left: 0;
        padding-right: 0;
    }

    .image-block__large-banner .image-block__image {
        width: 100%;
        max-width: 1200px;
    }

    .image-block__large-banner .image-block__info-wrap {
        max-width: 45.8678%;
    }

    .image-block__small-banner .image-block__info-wrap {
        max-width: 41.1017%;
    }

    .image-block:not(.image-block__small-banner) .image-block__logo-wrap.is-left {
        left: var(--spacing-04);
    }

    .image-block:not(.image-block__small-banner) .image-block__logo-wrap {
        height: 80px;
        width: 80px;
    }

    .image-block:not(.image-block__small-banner) .image-block__logo {
        width: 80px;
        top: -80px;
    }

    .image-block:not(.image-block__small-banner) .image-block__logo-wrap.is-black .image-block__logo {
        top: -240px;
    }

    .image-block__logo-wrap.is-color .image-block__logo {
        top: 0;
    }

    .ta1 .image-block__info-wrap {
        max-width: 50%;
    }

    .ta3 .image-block__info-wrap,
    .ta4 .image-block__info-wrap,
    .ta5 .image-block__info-wrap {
        max-width: 40%;
    }

    .ta6 .image-block__info-wrap {
        width: 60%;
        max-width: 60%;
        left: auto;
        right: 50%;
        padding-right: 0;
    }

}

@media screen and (min-width: 1448px) {
    .image-block__large-banner .image-block__info-wrap {
        max-width: 44.6667%;
    }

    .image-block__small-banner .image-block__info-wrap {
        max-width: 41.8368%;
    }

    .image-block__logo-wrap.is-color .image-block__logo {
        top: 0;
    }

    .ta6 .image-block__info-wrap {
        width: 60%;
        max-width: 60%;
        padding-right: 0;
    }

    .large-banner .ta5 .image-block__info-wrap {
        left: auto;
        right: 50%;
        top: 50%;
        width: 60%;
        max-width: 60%;
        transform: translate(50%, -50%);
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        height: fit-content;
        padding-right: 0;
    }

}