/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Roboto Light'), local('Roboto-Light'),
         url('/assets/fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/assets/fonts/roboto-v20-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
  
/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Roboto'), local('Roboto-Regular'),
         url('/assets/fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/assets/fonts/roboto-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* crete-round-regular - latin */
@font-face {
    font-family: 'Crete Round';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Crete Round'), local('CreteRound-Regular'),
         url('/assets/fonts/crete-round-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/assets/fonts/crete-round-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

  /* ibm-plex-sans-regular - latin */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('IBM Plex Sans'), local('IBMPlexSans'),
         url('/assets/fonts/ibm-plex-sans-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/assets/fonts/ibm-plex-sans-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


body {
    text-align: center;
    color: black;
    font-family: 'Roboto', serif;
} 

.brand-red { /*use to specify JC Brand Red color*/
    background-color: #9C2437;
}

body, html { /*for hero*/
    height: 100%;
}

.home-hero-title {
    font-size: 3.2em;
    font-family: 'Crete Round', serif;
}

.navbar-nav a {
    font-size: 0.97em;
    font-family: 'IBM Plex Sans', sans-serif;
}

.navbar { /*keeps navbar menu in front of content, especially on sm screen sizes*/
    z-index: 9999;
}

.btn a {
    color: inherit;
}

.page-title {
    font-size: 2.6em;
    font-family: 'Crete Round', serif;
}

#rewards-title {
    font-size: 1.6em;
    font-family: 'Roboto', serif;
}

.btn-danger {
    background-color: #9C2437;
    border-color: #9C2437;

}
.sale-alert {
    font-size: 0.85em;
    padding: .50rem 1.25rem;
    background-color: #9C2437;
}

.demo-notice-alert {
    font-size: 0.85em;
    padding: 0.6rem 1.25rem;
    background-color: #fee685;
}

.footer-copyright {
    font-size: 0.8em;
}

.border { /* frame around imgs on story, shop pages */
    border-width: 12px !important;
}

  /*Hero Images*/
.home-large-image, .story-large-image {
    height: 80%;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
    .home-hero-image {
        background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.4)), 
        url("/assets/images/home_hero_view.jpg");
    }

    .home-store-image {
        background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.4)), 
        url("/assets/images/home_hero_store.jpg");
    }

    .story-hero-image {
        background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.4)), 
        url("/assets/images/story_hero_region.jpg");
    }
/* Place text in the middle of the image */
.hero-text, .store-footer {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.store-location {
    top: 100%;
    left: 50%;
    position: relative;
}

/*OUR STORY PAGE*/
#story-berries {
    transform: rotate(358deg);
}

#story-farmer, #story-sourcing {
    transform: rotate(3deg);
}

.border-brand {
    border-color: #9C2437 !important;
}
/*SHOP PAGE*/
.shop-card-product {
    width: 20rem;
}

#shop-beans {
    transform: rotate(1deg);
}