/* Default browser size is 16px.
:root font-size: 62.5% sets the browser font at 10px.
Then body font-size: 1.6rem sets the font of the body back to 16px
This way any px sizes can be converted to rem by moving the decimal place up one
e.g. 20px becomes 2rem, 24px becomes 2.4rem */

:root {
    font-size: 62.5%;
}

body {
    font-size:1.6rem;
}

h1,
h2,
h3,
h4 {
    font-family: "adobe-caslon-pro", serif;
    font-weight:normal;
    letter-spacing:normal;
    margin:0;
    text-transform: uppercase;
    color:#242424;
}

h1,
.h1 {
    font-size:3rem;
    line-height:1.2;
}

h2,
.h2 {
    font-size: 3rem;
    line-height: 1.3333333333333333;
}

h3,
.h3 {
    font-size: 2rem;
    line-height: 1.5;
}

h4,
.h4 {
    font-size: 1.8rem;
    line-height: 1.4166666666666667;
}

h5,
p,
li,
input,
.page-numbers {
    font-family: 'Open Sans';
    color:#242424;
}

p,
li,
.page-numbers {
    line-height: 1.625;
    font-weight:400;
    font-size: 1.6rem;
}

h5,
.h5 {
    font-size: 1.5rem;
    line-height: 1.6666666666666667;
    font-weight:600;
}

.alpha {
    font-size:4rem;
    line-height: 1.125;
}

.beta {
    font-size:3rem;
    line-height: 1.2;
}

a {
    color:inherit;
}

a:hover {
    text-decoration:none;
}

@media (min-width:992px) {
    h1,
    .h1 {
        font-size:4rem;
        line-height: 1.375;
    }
    h2,
    .h2 {
        font-size: 3.6rem;
        line-height: 1.2777777777777777;
    }
    h3,
    .h3 {
        font-size: 2.4rem;
        line-height: 1.4166666666666667;
    }
    h4,
    .h4 {
        font-size: 2rem;
    }
    p,
    li {
        font-size: 1.8rem;
        line-height: 1.5555555555555556;
    }
    .alpha {
        font-size:6rem;
        line-height: 1.25;
    }
    .beta {
        font-size:4.5rem;
        line-height: 1.2222222222222223;
    }
}