/****************************************/
/* Callout box v01 */
/* Set variables */
:root {
    --hp-color--orange: #b02e01;
    --hp-color--gold: #f8b300;
    --hp-color--black: #000000;
    --hp-color--white: #ffffff;
    --hp-color--offblack: #121212;
    --hp-color--offwhite: #f5f5f5;
}
/* Using the Plugin-Card */
.plugin-card.sph-callout {
    --cwf-card--background-color: #EFEFEF;
    --cwf-card--foreground-color: #333;
    --cwf-card--marker-color: #006894;
    --cwf-card--link-color: #006894;
    background-color: var(--cwf-card--background-color);
    background-image: url('/media/school-of-population-health/assets/images/dark-stripes-light.png');
/*background-image: url("https://www.transparenttextures.com/patterns/dark-stripes-light.png");*/
    margin-bottom: 1rem;
    z-index: 0;
}
.plugin-card.sph-callout .t4_button {
    --cwf-button--background-color: #F8b300;
    --cwf-button--border-color: #ccc;
    --cwf-button--active--border-color: #222;
    --cwf-button--color: #222;
    --cwf-button--active--background-color: #222;
    --cwf-button--active--color: #FFF;
    --cwf-button--hover-focus--background-color: #222;
    --cwf-button--hover-focus--color: #FFF;
}
/* Using class .sph-callout */
.sph-callout {
    padding: 0;
    border: none;
}
.sph-callout--basic {
    background: var(--hp-color--offwhite);
    border: 4px solid var(--hp-color--gold);
    padding: 0.5em 2em;
}
@media (min-width: 450px) {
.sph-callout--basic {
    padding: 0;
    } 
}
@media (min-width:320px) {
   .sph-callout--basic {
        padding: 0;
    } 
}
.plugin-card.sph-callout2 {
    --cwf-card--background-color: #F8b300;
    --cwf-card--foreground-color: #333;
    --cwf-card--marker-color: #222;
    --cwf-card--link-color: #006894;
    background-color: var(--cwf-card--background-color);
    background-image: url('/media/school-of-population-health/assets/images/dark-stripes-light.png');
/*  background-image: url("https://www.transparenttextures.com/patterns/dark-stripes-light.png");*/
    margin-bottom: 1rem;
    z-index: 0;
}
.plugin-card.sph-callout2 .t4_button {
    --cwf-button--background-color: #222;
    --cwf-button--border-color: #FFF;
    --cwf-button--color: #FFF;
    --cwf-button--active--background-color: #444;
    --cwf-button--active--color: #FFF;
    --cwf-button--hover-focus--background-color: #444;
    --cwf-button--hover-focus--color: #FFF;
}

.plugin-card.sph-callout3 {
    --cwf-card--background-color: #F8B300;
    --cwf-card--foreground-color: #333;
    --cwf-card--marker-color: #006894;
    --cwf-card--link-color: #006894;
    background-color: var(--cwf-card--background-color);
    background-image: url('/media/school-of-population-health/assets/images/dark-stripes-light.png');
/*  background-image: url("https://www.transparenttextures.com/patterns/dark-stripes-light.png");*/
    margin-top:2rem!important;
    margin-bottom: 1rem;
    z-index: 0;
    border:0;
}
.plugin-card.sph-callout3 .t4_button {
    --cwf-button--background-color: #222;
    --cwf-button--border-color: #222;
    --cwf-button--active--border-color: #CCC;
    --cwf-button--color: #FFF;
    --cwf-button--active--background-color: #F8B300;
    --cwf-button--active--color: #222;
    --cwf-button--hover-focus--background-color: #FFF;
    --cwf-button--hover-focus--color: #222;
}
.plugin-card.sph-callout4 {
    --cwf-card--background-color: #F8B300;
    --cwf-card--foreground-color: #333;
    --cwf-card--marker-color: #006894;
    --cwf-card--link-color: #006894;
    background-color: var(--cwf-card--background-color);
    background-image: url('/media/school-of-population-health/assets/images/dark-stripes-light.png');
/*  background-image: url("https://www.transparenttextures.com/patterns/dark-stripes-light.png");*/
    margin-bottom: 1rem;
    z-index: 0;
}
.plugin-card.sph-callout4 .t4_button {
    --cwf-button--background-color: #222;
    --cwf-button--border-color: #222;
    --cwf-button--active--border-color: #CCC;
    --cwf-button--color: #FFF;
    --cwf-button--active--background-color: #F8B300;
    --cwf-button--active--color: #222;
    --cwf-button--hover-focus--background-color: #FFF;
    --cwf-button--hover-focus--color: #222;
}
@media screen and (min-width: 768px) {
.plugin-card.sph-callout3 .plugin-card__media {
    width: 50%;
}
}