/*** Warnock Pro Display
This is used for large headings ***/
/*
font-family: warnock-pro-display, serif;
Light - 300
Display - 400
Medium - NULL
SemiBold - 600
Bold - 700
ExtraBold - NULL
 */

/*** Warnock Pro
This is used for smaller headings & empathised text ***/
/*
font-family: warnock-pro, serif;
Light - 300
Regular - 400
Medium - NULL
SemiBold - 600
Bold - 700
ExtraBold - NULL
 */

/*** Nocturne Serif Regular
This is used for body text ***/
/*
font-family: nocturne-serif, serif;
Light - NULL
Regular - 400
Medium - NULL
SemiBold - NULL
Bold - NULL
ExtraBold - NULL
 */

/*** Nocturne Serif Light
This is used for button text ***/
/*
font-family: nocturne-serif-lights, serif;
Light - NULL
Regular - 400
Medium - NULL
SemiBold - NULL
Bold - NULL
ExtraBold - NULL
 */

/*** Meno Banner Light
font-family: meno-banner, serif;
Only font weight 300 in project
*/

/*** Presicav Light
font-family: presicav, sans-serif;
Only font weight 300 in project
Used for h3.banner-accent
 */

/*** Font Declarations ***/

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p, body {
    font-family: nocturne-serif-lights, serif;
    font-size: 16px;
    line-height: 24px;
    color: var(--grey);
    font-weight: 400; /* Regular */
}

p, ul, ol {
    margin-bottom: 24px;
}

ul, ol {
    font-size: 16px;
    line-height: 20px;
}

ul > li,
ol > li {
    margin-bottom: 15px;
}

b, strong {
    /* Body bold doesn't change font weight - changes color instead */
    font-weight: 400; /* Regular */
    color: var(--onyx);
}

/* Other paragraph styles */

div.subheading p,
p.subheading {
    font-size: 18px;
    line-height: 26px;
    color: var(--grey);
    font-weight: 300; /* light */
    font-family: warnock-pro, serif;
}

div.subtext p,
p.subtext {
    font-size: 13px;
    line-height: 20px;
    color: var(--tumbleweed);
    font-weight: 300; /* light */
    font-family: warnock-pro, serif;
}

/*** Hyperlinks ***/
a {
    text-decoration: underline;
    color: var(--salamander);
}
a:hover {
    color: var(--salamander);
    opacity: 0.45;
}

a.button {
    text-decoration: none;
}


/*** --- HEADINGS --- ***/

/*h1*/
h1,
.h1style {
    color: var(--onyx);
    font-size: 70px;
    line-height: 80px;
    font-weight: 300; /* light */
    margin-bottom: 45px;
    font-family: warnock-pro-display, serif;
}
h1.home,
.h1style.home {
    color: var(--onyx);
    font-size: 95px;
    line-height: 100px;
    font-weight: 300; /* light */
    margin-bottom: 15px;
    font-family: warnock-pro-display, serif;
}
h1.maker,
h1.maker.large,
.h1style.maker,
.h1style.maker.large {
    color: var(--ivory);
    font-size: 180px;
    line-height: 160px;
    font-weight: 300; /* light */
    margin-bottom: 90px;
    font-family: warnock-pro-display, serif;
    text-shadow: 5px 5px 11px rgba(0,0,0,0.1);
}

h1.maker.small,
.h1style.maker.small {
    font-size: 95px;
    line-height: 100px;
}


/*h2*/
h2,
.h2style {
    color: var(--onyx);
    font-size: 60px;
    line-height: 70px;
    font-weight: 300;  /* light */
    margin-bottom: 20px;
    font-family: warnock-pro-display, serif;
}


/*h3*/
h3,
.h3style {
    color: var(--onyx);
    font-size: 45px;
    line-height: 55px;
    font-weight: 300;  /* light */
    margin-bottom: 10px;
    font-family: warnock-pro-display, serif;
}

h3.banner-accent {
    font-family: presicav, sans-serif;
    font-weight: 300;
    color: var(--salamander);
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/*h4*/
h4,
.h4style {
    color: var(--onyx);
    font-size: 36px;
    line-height: 46px;
    font-weight: 300;  /* light */
    margin-bottom: 10px;
    font-family: warnock-pro-display, serif;
}


/*h5*/
h5,
.h5style {
    color: var(--grey);
    font-size: 22px;
    line-height: 33px;
    font-weight: 300;  /* light */
    margin-bottom: 10px;
    font-family: warnock-pro-display, serif;
}


/*** Small Desktop ***/
@media(max-width: 1399.98px) {
    h1.home,
    .h1style.home {
        font-size: 60px;
        line-height: 70px;
    }

    h1.maker,
    h1.maker.large,
    .h1style.maker,
    .h1style.maker.large {
        color: var(--ivory);
        font-size: 90px;
        line-height: 80px;
    }

    h1.maker.small,
    .h1style.maker.small {
        font-size: 60px;
        line-height: 70px;
    }

}



/*** Mobile ***/
@media(max-width: 991.98px) {

    p, body {
        font-size: 15px;
        line-height: 24px;
    }

    ul, ol {
        font-size: 16px;
        line-height: 20px;
    }

    div.subheading p,
    p.subheading {
        font-size: 18px;
        line-height: 26px;
    }

    div.subtext p,
    p.subtext {
        font-size: 13px;
        line-height: 20px;
    }


    /*h1*/
    h1,
    .h1style {
        font-size: 60px;
        line-height: 70px;
        margin-bottom: 15px;
    }

    /*h2*/
    h2,
    .h2style {
        font-size: 45px;
        line-height: 60px;
        margin-bottom: 13px;
    }

    /*h3*/
    h3,
    .h3style {
        font-size: 32px;
        line-height: 45px;
        margin-bottom: 10px;
    }

    /*h4*/
    h4,
    .h4style {
        font-size: 24px;
        line-height: 36px;
        margin-bottom: 10px;
    }


    /*h5*/
    h5,
    .h5style {
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 10px;
    }

}

/*** Small Mobile ***/
@media(max-width: 574.98px) {

    h1,
    .h1style {
        font-size: 38px;
        line-height: 44px;
    }

    h1.home,
    .h1style.home {
        font-size: 45px;
        line-height: 50px;
    }

    h1.maker,
    h1.maker.large,
    .h1style.maker,
    .h1style.maker.large {
        color: var(--ivory);
        font-size: 45px;
        line-height: 50px;
    }

    h1.maker.small,
    .h1style.maker.small {
        font-size: 45px;
        line-height: 50px;
    }

    h2,
    .h2style {
        font-size: 35px;
        line-height: 40px;
    }

    h3.banner-accent {
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 20px;
    }
}



/*** Font Color Overrides ***/

.onyx_background h1,
.onyx_background h2,
.onyx_background h3,
.onyx_background h4,
.onyx_background .h1style,
.onyx_background .h2style,
.onyx_background .h3style,
.onyx_background .h4style {
    color: var(--ivory);
}

.onyx_background h5,
.onyx_background .h5style {
    color: var(--tumbleweed);
}