@font-face {
    font-family: 'HandoBold';
    src: url('../fonts/Eko Bimantara - Hando-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'HandoRegular';
    src: url('../fonts/Eko Bimantara - Hando-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
	--primary-color: #1d2757;
    --secondary-color: #f09336;
	--top-banner-bg-color: #AD00FE;
    --accent-color: #E4f6ff;
    --topic-menu-bg-color-hover: #F0F0F0;
    /* LINK COLORS */
    --primary-links-color-hover: #f09336;
    --secondary-links-color-hover: #f09336;
    --footer-link-color: #c4c4c4;
    --footer-link-color-hover: #f09336;
    /* BUTTON COLORS - PRIMARY */
    --primary-button-color: #1d2757;
    --primary-button-color-hover: #002e47;
    --primary-button-text-color: #FEFEFE;
    --primary-button-text-color-hover: #FEFEFE;
    --primary-button-border-color: #1d2757;
    --primary-button-border-color-hover: #1d2757;
    /* BUTTON COLORS - SECONDARY */
    --secondary-button-color: #E4F6FF;
    --secondary-button-color-hover: #001623;
    --secondary-button-text-color: #005E91;
    --secondary-button-text-color-hover: #FEFEFE;
    --secondary-button-border-color: #005E91;
    --secondary-button-border-color-hover: #005E91;
    /* NAVIGATION COLORS */
    --nav-bg-color: #1d2757;
    --nav-tab-color: #FEFEFE;
    --nav-tab-color-hover: #f09336;
    --nav-link-color: #1d2757;
    --nav-link-color-hover: #f09336;
    /* HEADING/BANNER BACKGROUND COLORS */
    --bg-color-1: #0693B2;
    --bg-color-2: #D48000;
    --bg-color-3: #cc292b;
    /* HEADING/BANNER BACKGROUND COLORS WITH TRANSPARENCY */
    --rgba-color-1: rgb(29 39 87 / .5);
    --rgba-color-2: rgb(209 49 56 / .5);
    --rgba-color-3: rgb(145 197 0 / .5);
    /* FONT FAMILY */
    --font-family-heading: "HandoBold", sans-serif;
    --font-family-body: "HandoRegular", sans-serif;
}

.home-announcements h3 {
    background: #1d2757;
    color: #fff;
}

.also-bought h2 {
    background: #d13138;
    color: #fff;
}

.block-popularitems h3 {
    background: var(--bg-color-3);
    color: #fff;
}

.looked-at-these h2 {
    background: var(--bg-color-3);
    color: #fff;
}

.home-block a > span {
    font-family: var(--font-family-heading);
}

.home-block {
    border: 1px solid #ebebeb;
}

.home-block a:after {
    background: transparent;
}

.slideshow img {
    aspect-ratio: inherit !important;
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR MEDIUM SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */
@media screen and (min-width: 40em) {
    .caption-container.caption-right {
        left: inherit;
        background-image: linear-gradient(to left, rgb(0 0 0 / .5), rgb(0 0 0 / .5), transparent);
    }
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 64em) {
    .caption-container.caption-left > .caption {
        max-width: 67ch;
        padding: 2rem 4rem 2rem 1rem;
    }
    .caption-container.caption-right > .caption {
        max-width: 67ch;
        padding: 2rem 1rem 2rem 4rem;
    }
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR X-LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 75em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR XX-LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 90em) {
}