/* Custom font faces */
@font-face {
    font-family: 'ABCDiatype';
    src: url('../fonts/ABCDiatype-Medium.woff2') format('woff2'),
         url('../fonts/ABCDiatype-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TelkaWide';
    src: url('../fonts/RL-Telka-Wide-Regular.woff2') format('woff2'),
         url('../fonts/RL-Telka-Wide-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Background color */
body {
    background-color: #F0EDE6 !important;
}

main.home {
    background-color: #F0EDE6 !important;
}

/* Body text color - override pink */
body,
button,
html,
input,
select,
textarea,
p,
a,
ul,
ol,
h1, h2, h3, h4, h5 {
    color: #000000 !important;
}

h1 a, h2 a, h3 a, h4 a, h5 a {
    color: #000000 !important;
}

/* Logo + baseLogo - Telka font */
span.logo,
span.logo a,
span.baseLogo,
span.baseLogo a,
footer span.logo,
footer span.logo a {
    font-family: 'TelkaWide', sans-serif !important;
    font-size: 25px !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    text-decoration: none;
}

@media only screen and (max-width: 768px) {
    span.logo,
    span.logo a,
    span.baseLogo,
    span.baseLogo a,
    footer span.logo,
    footer span.logo a {
        font-size: 18px !important;
    }
}

/* Story title - Telka font */
body.story .storyTitle h1,
body.collection .storyTitle h1 {
    font-family: 'TelkaWide', sans-serif !important;
    font-size: 25px !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

@media only screen and (max-width: 768px) {
    body.story .storyTitle h1,
    body.collection .storyTitle h1 {
        font-size: 18px !important;
    }
}

/* Project names (titles on homepage) - Telka font */
div.titles span {
    font-family: 'TelkaWide', sans-serif !important;
    font-size: 25px !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: #000000 !important;
    transform: translateY(-50%) !important;
}

/* Story nav dots */
body.story #fp-nav {
    right: 50px !important;
}

body.story #fp-nav ul li {
    margin: 7px 0 !important;
}

body.story #fp-nav ul li a {
    font-size: 13px !important;
    text-align: right !important;
    width: 100% !important;
}

body.story #fp-nav ul li a {
    border-bottom: none !important;
}

body.story #fp-nav ul li a span {
    position: relative !important;
}

body.story #fp-nav ul li a span::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 1px !important;
    width: 100% !important;
    height: 1px !important;
    background-color: #000000 !important;
    opacity: 0 !important;
}

body.story #fp-nav ul li a.active span::after {
    opacity: 1 !important;
}

/* Story last section (pagination) */
body.story .section:last-child {
    background: #C0BAA9 !important;
}

body.story .section span.prev a:hover span,
body.story .section span.next a:hover span {
    border-bottom-color: #000000 !important;
    color: #000000 !important;
}

body.story .section span.pageTitle,
body.collection span.pageTitle {
    font-family: 'TelkaWide', sans-serif !important;
    font-size: 25px !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: #000000 !important;
}

/* Prev/Next alignment with header nav */
body.story .section span.next a span,
body.collection .section span.next a span {
    left: 50px !important;
}

body.story .section span.prev a span,
body.collection .section span.prev a span {
    right: 50px !important;
}

/* Inactive logo - color instead of opacity */
.about .baseLogo a,
.about .logo a,
.menu .baseLogo a,
.menu .logo a {
    opacity: 1 !important;
    color: #C8C3B8 !important;
}

.header .logo a.inactive,
footer .logo a.inactive {
    opacity: 1 !important;
    color: #C8C3B8 !important;
}

body.story footer span.logo a,
body.story header .headerMain span.logo a {
    opacity: 1 !important;
    color: #C8C3B8 !important;
}

/* Header nav buttons - text instead of icons */
span.menuBtn,
span.aboutBtn {
    font-family: 'ABCDiatype', sans-serif !important;
    font-size: 15px !important;
    color: #000000 !important;
    cursor: pointer;
    width: auto !important;
}

span.menuBtn {
    right: 50px !important;
}

span.aboutBtn {
    right: 126px !important;
}

@media only screen and (max-width: 600px) {
    span.menuBtn {
        right: 30px !important;
        top: 31px !important;
    }

    span.aboutBtn {
        right: auto !important;
        left: 30px !important;
        top: 31px !important;
    }
}

/* About & Menu panels */
.about,
.menu {
    background-color: #C0BAA9 !important;
    opacity: 1 !important;
    z-index: 99999 !important;
}

.about .inner,
.menu .inner {
    opacity: 0 !important;
}

.about .container .textBlock h2 {
    display: none !important;
}

.about .container .textBlock,
.menu .container .menuBlock {
    padding-top: 50px !important;
}

.menu .container .menuBlock h2 {
    font-size: 15px !important;
    margin-bottom: 40px !important;
}

.menu .container .menuBlock ul {
    line-height: 1.2 !important;
}

.menu .container .menuBlock ul li a {
    position: relative !important;
    border-bottom: none !important;
}

.menu .container .menuBlock ul li a::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 1px !important;
    width: 100% !important;
    height: 1px !important;
    background-color: #000000 !important;
    opacity: 0 !important;
}

.menu .container .menuBlock ul li a:hover::after {
    opacity: 1 !important;
}

.about .container .textBlock p {
    margin-bottom: 15px !important;
    line-height: 1.3 !important;
    max-width: 513px !important;
}

@media only screen and (max-width: 768px) {
    .about .container .textBlock p {
        padding-right: 40px !important;
    }
}

.about .container span.closeBtn,
.menu .container span.closeBtn {
    font-family: 'ABCDiatype', sans-serif !important;
    font-size: 15px !important;
    color: #000000 !important;
    cursor: pointer;
    width: auto !important;
    height: auto !important;
    top: 44px !important;
    right: 50px !important;
}

@media only screen and (max-width: 640px) {
    .about .container span.closeBtn {
        top: 50px !important;
        right: 40px !important;
    }
    .menu .container span.closeBtn {
        top: 47px !important;
        right: 40px !important;
    }
}

/* Menu sub-nav mode (when enabled via Options) */
.menu .container .menuBlock .category-link.active::after {
    opacity: 1 !important;
}

.menu .container .menuBlock .projects-column h2 {
    font-size: 15px !important;
    margin-bottom: 40px !important;
}

.menu .container .menuBlock .projects-column ul {
    line-height: 1.3 !important;
}

.menu .container .menuBlock .projects-column ul li a:hover {
    color: #000000 !important;
}

/* Mobile homepage captions */
main.home .mobileBlock .block .imageBlock > span {
    color: #000000 !important;
}

/* Collection pagination background */
.baseBlock .pagination {
    background: #C0BAA9 !important;
}

/* Collection captions */
.collectionBlocks .container .columns .imageBlock .caption {
    color: #000000 !important;
    font-family: 'ABCDiatype', sans-serif !important;
}

/* Body copy - ABC Diatype */
body,
button,
html,
input,
select,
textarea,
p,
a,
ul,
ol {
    font-family: 'ABCDiatype', sans-serif !important;
}