/* =========================================================
   E-MAGAZINE THEMES
   ========================================================= */


/* =========================================================
   LIGHT THEMES
   ========================================================= */


/* ---------------------------------------------------------
   WHITE
   --------------------------------------------------------- */

.magazine[data-theme="white"] {

    --mag-bg: #ffffff;
    --mag-text: #333333;
    --mag-heading: #111111;

    --mag-block-bg: #f7f7f7;
    --mag-block-text: #333333;

    --mag-accent: #3b6ea5;
    --mag-border: #dddddd;

}


/* ---------------------------------------------------------
   CREAM
   --------------------------------------------------------- */

.magazine[data-theme="cream"] {

    --mag-bg: #f5f0e6;
    --mag-text: #33302b;
    --mag-heading: #171512;

    --mag-block-bg: #ebe3d4;
    --mag-block-text: #33302b;

    --mag-accent: #b58b45;
    --mag-border: #d8cdbb;

}


/* ---------------------------------------------------------
   MINT
   --------------------------------------------------------- */

.magazine[data-theme="mint"] {

    --mag-bg: #eef7f3;
    --mag-text: #263b35;
    --mag-heading: #16352d;

    --mag-block-bg: #dceee8;
    --mag-block-text: #263b35;

    --mag-accent: #4b9b82;
    --mag-border: #c8ddd5;

}


/* ---------------------------------------------------------
   SKY
   --------------------------------------------------------- */

.magazine[data-theme="sky"] {

    --mag-bg: #edf5fa;
    --mag-text: #293b47;
    --mag-heading: #102b3b;

    --mag-block-bg: #dcebf3;
    --mag-block-text: #293b47;

    --mag-accent: #4385a8;
    --mag-border: #c6dce7;

}


/* ---------------------------------------------------------
   LAVENDER
   --------------------------------------------------------- */

.magazine[data-theme="lavender"] {

    --mag-bg: #f5f1fa;
    --mag-text: #393244;
    --mag-heading: #241b32;

    --mag-block-bg: #e8def2;
    --mag-block-text: #393244;

    --mag-accent: #8565a6;
    --mag-border: #d8c9e3;

}


/* =========================================================
   DARK THEMES
   ========================================================= */


/* ---------------------------------------------------------
   DARK
   --------------------------------------------------------- */

.magazine[data-theme="dark"] {

    --mag-bg: #111111;
    --mag-text: #dddddd;
    --mag-heading: #ffffff;

    --mag-block-bg: #1b1b1b;
    --mag-block-text: #dddddd;

    --mag-accent: #ffffff;
    --mag-border: #333333;

}


/* ---------------------------------------------------------
   NAVY
   --------------------------------------------------------- */

.magazine[data-theme="navy"] {

    --mag-bg: #101a2b;
    --mag-text: #d9e2ef;
    --mag-heading: #ffffff;

    --mag-block-bg: #17243a;
    --mag-block-text: #d9e2ef;

    --mag-accent: #5b9bd5;
    --mag-border: #2d405d;

}


/* ---------------------------------------------------------
   RED
   --------------------------------------------------------- */

.magazine[data-theme="red"] {

    --mag-bg: #211416;
    --mag-text: #eadfe0;
    --mag-heading: #ffffff;

    --mag-block-bg: #301b1f;
    --mag-block-text: #eadfe0;

    --mag-accent: #d45b63;
    --mag-border: #563239;

}


/* ---------------------------------------------------------
   PURPLE
   --------------------------------------------------------- */

.magazine[data-theme="purple"] {

    --mag-bg: #221936;
    --mag-text: #e4dff0;
    --mag-heading: #ffffff;

    --mag-block-bg: #241d31;
    --mag-block-text: #e4dff0;

    --mag-accent: #9b78c5;
    --mag-border: #44375a;

}


/* ---------------------------------------------------------
   GREEN
   --------------------------------------------------------- */

.magazine[data-theme="green"] {

    --mag-bg: #02291b;
    --mag-text: #dce9e3;
    --mag-heading: #ffffff;

    --mag-block-bg: #182822;
    --mag-block-text: #dce9e3;

    --mag-accent: #5ca77e;
    --mag-border: #304c3f;

}


/* ---------------------------------------------------------
   GOLD
   --------------------------------------------------------- */

.magazine[data-theme="gold"] {

    --mag-bg: #12100c;
    --mag-text: #e7dfcf;
    --mag-heading: #ffffff;

    --mag-block-bg: #1d1911;
    --mag-block-text: #e7dfcf;

    --mag-accent: #c9a45c;
    --mag-border: #493e2b;

}


/* =========================================================
   GLOBAL THEME APPLICATION
   ========================================================= */

.magazine {

    background-color: var(--mag-bg);
    color: var(--mag-text);

}


/* Headings */

.magazine h1,
.magazine h2,
.magazine h3,
.magazine h4,
.magazine h5,
.magazine h6 {

    color: var(--mag-heading);

}


/* Paragraph */

.magazine p {

    color: var(--mag-text);

}


/* Links */

.magazine a {

    color: var(--mag-accent);

}

.magazine a:hover {

    color: var(--mag-heading);

}


/* Borders */

.magazine hr {

    border-color: var(--mag-border);

}


/* Common block background */

.mag-block-bg {

    background-color: var(--mag-block-bg);
    color: var(--mag-block-text);

}


/* Common accent */

.mag-accent {

    color: var(--mag-accent);

}


/* Accent background */

.mag-accent-bg {

    background-color: var(--mag-accent);

}


/* =========================================================
   SELECTION
   ========================================================= */

.magazine ::selection {

    background: var(--mag-accent);
    color: var(--mag-bg);

}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

.magazine input,
.magazine textarea,
.magazine select {

    background-color: var(--mag-block-bg);
    color: var(--mag-text);
    border-color: var(--mag-border);

}

.magazine input:focus,
.magazine textarea:focus,
.magazine select:focus {

    border-color: var(--mag-accent);
    outline: none;

}


/* =========================================================
   BLOCK COMMON
   ========================================================= */

.magazine .mag-block {

    color: var(--mag-text);

}

.magazine .mag-block-title {

    color: var(--mag-heading);

}

.magazine .mag-block-content {

    color: var(--mag-text);

}


/* =========================================================
   QUOTE
   ========================================================= */

.magazine .mag-quote {

    border-left: 3px solid var(--mag-accent);

}

.magazine .mag-quote-mark {

    color: var(--mag-accent);

}


/* =========================================================
   BUTTON / SEE MORE
   ========================================================= */

.magazine .mag-button,
.magazine .see-more {

    background-color: var(--mag-accent);
    color: var(--mag-bg);

}

.magazine .mag-button:hover,
.magazine .see-more:hover {

    background-color: var(--mag-heading);
    color: var(--mag-bg);

}


/* =========================================================
   TIMELINE
   ========================================================= */

.magazine .mag-timeline {

    color: var(--mag-text);

}

.magazine .mag-timeline-heading h2 {

    color: var(--mag-heading);

}

.magazine .mag-timeline-item {

    border-color: var(--mag-border);

}

.magazine .mag-timeline-year {

    color: var(--mag-accent);

}


/* Timeline line */

.magazine .mag-timeline-list::before {

    background-color: var(--mag-border);

}


/* Timeline dot */

.magazine .mag-timeline-item::before {

    background-color: var(--mag-accent);
    border-color: var(--mag-bg);

}


/* =========================================================
   COUNTER
   ========================================================= */

.magazine .mag-counter {

    color: var(--mag-text);

}

.magazine .mag-counter-value {

    color: var(--mag-accent);

}

.magazine .mag-counter-title {

    color: var(--mag-heading);

}


/* =========================================================
   STICKY
   ========================================================= */

.magazine .mag-sticky {

    color: var(--mag-text);

}

.magazine .mag-sticky h2 {

    color: var(--mag-heading);

}

.magazine .mag-sticky-content {

    color: var(--mag-text);

}

.magazine .mag-sticky-item {

    border-color: var(--mag-border);

}


/* =========================================================
   ENDING
   ========================================================= */

.magazine .mag-ending {

    color: var(--mag-text);

}

.magazine .mag-ending-title {

    color: var(--mag-heading);

}

.magazine .mag-ending-content {

    color: var(--mag-text);

}

.magazine .mag-ending-line {

    background-color: var(--mag-accent);

}


/* =========================================================
   GALLERY
   ========================================================= */

.magazine .mag-gallery-item {

    border-color: var(--mag-border);

}

.magazine .mag-gallery-item figcaption {

    color: var(--mag-text);

}


/* =========================================================
   IMAGE + TEXT
   ========================================================= */

.magazine .mag-image-text-content {

    color: var(--mag-text);

}

.magazine .mag-image-text-content h2 {

    color: var(--mag-heading);

}


/* =========================================================
   VIDEO
   ========================================================= */

.magazine .mag-video-content {

    color: var(--mag-text);

}

.magazine .mag-video-content h2 {

    color: var(--mag-heading);

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .magazine {

        overflow-x: hidden;

    }

}