/* =================
 *  FONTS
 * ================= */

@font-face {
    font-family: 'Avara_Bold';
    src:    url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBold/Avara-Bold_web.eot');
    src:    url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBold/Avara-Bold_web.eot?#iefix') format('embedded-opentype'),
            url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBold/Avara-Bold_web.woff') format('woff'),
            url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBold/Avara-Bold_web.woff2') format('woff2'),
            url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBold/Avara-Bold_web.ttf') format('truetype'),
            url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBold/Avara-Bold_web.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avara_Bold Italic';
    src:    url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBoldItalic/Avara-Bold_Italic_web.eot');
    src:    url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBoldItalic/Avara-Bold_Italic_web.eot?#iefix') format('embedded-opentype'),
            url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBoldItalic/Avara-Bold_Italic_web.woff') format('woff'),
            url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBoldItalic/Avara-Bold_Italic_web.woff2') format('woff2'),
            url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBoldItalic/Avara-Bold_Italic_web.ttf') format('truetype'),
            url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBoldItalic/Avara-Bold_Italic_web.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avara_Black';
    src:    url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBlack/Avara-Black_web.eot');
    src:    url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBlack/Avara-Black_web.eot?#iefix') format('embedded-opentype'),
            url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBlack/Avara-Black_web.woff') format('woff'),
            url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBlack/Avara-Black_web.woff2') format('woff2'),
            url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBlack/Avara-Black_web.ttf') format('truetype'),
            url('https://timberfestival.org.uk/wp-content/themes/simplemag/fonts/AvaraBlack/Avara-Black_web.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}
    
    
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}td:not([align]),th:not([align]){text-align:left}

html {
  box-sizing: border-box;
  font-size: 62.6.5%;
    margin: 0;
    padding: 0;
}
*, *:before, *:after {
  box-sizing: inherit;
}
* {
    -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
    
    
body { 
    margin:0;
    padding:0;
    font-family: Helvetica, Arial, sans-serif;
}
    
a {
    text-decoration: none;
    color: white;
    cursor: pointer;
}
    
    a:hover {
        text-decoration: none;
        color: white;
        cursor: pointer;
    }
    
    h1,h2,h3,h4,h5,h6 {
        margin: 0; padding: 0;font-weight: normal;font-size: 1em;
        font-family: 'Avara_Bold', Georgia, sans-serif;
    }
    
    #map { position:absolute; top:0; bottom:0; width:100%; }
    
    .marker {
      background-image: url('sotf-mapbox-icon2.png');
      background-size: cover;
      width: 28px;
      height: 28px;
      cursor: pointer;
    }
    
    .mapboxgl-popup {
        max-width: 300px !important;
      }
    .mapboxgl-popup-content {
        text-align: center;
        font-family: 'Avara_Bold', Georgia, sans-serif;
        background: #1c2719;
        color: #FFF;
        box-shadow: 0 2px 2px rgba(0,0,0,0.3);
    }
    
    .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
        border-top-color: #1c2719;
    }
    
    .mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
        border-left-color: #1c2719;
    }
    
    .mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
        border-right-color: #1c2719;
    }
    
    .mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
        border-bottom-color: #1c2719;
    }
    
    .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
        border-bottom-color: #1c2719;
    }
    
    .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
        border-bottom-color: #1c2719;
    }
    
    .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
        border-top-color: #1c2719;
    }
    
    .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
        border-top-color: #1c2719;
    }
    
    .mapboxgl-popup-close-button {
        background: #000;
        color: #FFF;
        font-size: 150%;
    }
    
    .mapboxgl-popup-close-button:hover {
    background-color: #e1de34;
        color: #000;
}
    
    .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
    margin: 80px 1em 0 0;
    }
    
    .pop-up-subtitle {
        width: 100%;
        font-size: 87%;
        text-transform: uppercase;
        font-weight: normal;
        letter-spacing: 0.15em;
        display: block;
        margin-top: 0.9em;
        padding: 0;
        line-height: 1;
        position: relative;
    }

.pop-up-subtitle:before {
    content: ' ';
    display: block;
    width: 100%;
    height: 1px;
    background: #e1de34;
    position: absolute;
    top: calc(50% - 2px);
    left: 0;
    z-index: 0;
}

.pop-up-subtitle span {
    background: #1c2719;
    position: relative;
    z-index: 99;
    padding: 0 0.5em;
}
    
    
    h3 {
        margin: 0;
        padding: 0.7em 0 0 0;
        font-weight: normal;
    }
    
    .share-buttons {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        margin: 0.7em auto 0 auto;
    }

.share-buttons div {
    margin: 0 0.2em;
    padding: 0.4em 0.5em 0.2em 0.5em;
    display: flex;
    flex-direction: row;
    align-content: center;
    background: #FFF;
    border-radius: 20px;
}

.share-buttons div a {
    line-height: 1;
}

.share-buttons div:hover {
    background-color: #e1de34;
}

.share-icon {
    width: 1.6em;
    max-height: 1.2em;
    object-fit: contain;
}
    
    #top-bar {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        background: #1c2619;
        background-image: url('SOTF-Banner-Background-2.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        padding: 1em 65px 0.8em 1em;
        color: #FFF;
        display: flex;
        flex-flow: row wrap;
        align-content: center;
        align-items: center;
        box-shadow: 0 0 6px rgba(0,0,0,0.7);
    }
    
#top-bar h2 {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 80%;
    margin-right: 1em;
    padding-top: 0.2em;
    padding-right: 2.5em;
    background-image: url(sotf-logo-white.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
}

.tb-share {
    max-height: 1em;
    display: flex;
    flex-flow: row wrap;
    margin-right: 0.5em;
}

.tb-share div {
    background: #FFF;
    max-height: 1em;
    border-radius: 20px;
    margin: 0 0.2em;
}

.tb-share div:hover {
    background: #e1de34;
}

.tb-share .facebook .share-icon, .tb-share .twitter .share-icon {
    max-height: 1em;
    padding: 0.1em;
    
}
    
    
    .top-nav {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .top-nav li {
        display: inline;
        padding: 0;
        margin: 0;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-size: 75%;
        font-family: 'Avara_Bold', Georgia, sans-serif;
    }
    
    .top-nav li {
        margin-right: 0.5em;
    }
    
    .top-nav li:last-of-type {
        margin-right: 0;
    }
    
    .top-nav li a:hover {
        color: #e1de34;
    }
    
    .timber-logo {
        position: absolute;
        top: 4px;
        right: 8px;
        cursor: pointer;
    }
    
    .timber-logo a img {
        max-height: 40px;
        width: auto;
    }
    
    #project-summary {
        position: absolute;
        top: 4.5em;
        left: 1em;
        z-index: 99;
        max-width: 380px;
        font-size: 85%;
        background: #1c2619;
        background-image: url('projsum-bg.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
        padding: 0.8em 1.2em;
        margin-right: 2em;
        color: #FFF;
    }
    
    #project-summary h1 {
        font-weight: normal;
        font-size: 120%;
        padding: 0.3em 0;
    }
    
    #project-summary h4 {
        font-weight: normal;
        padding: 0.5em 0 0.2em;
        font-size: 105%;
    }
    
    #project-summary p {
        font-weight: normal;
        margin-bottom: 0.85em;
        line-height: 1.3;
    }
    
    
    #project-summary div.space {
        content: " ";
        padding: 0.8em 0;
        display: block;
    }
    
    #project-summary a {
        border-bottom: 1px solid #e1de34;
    }
    
    #project-summary a:hover {
        color: #e1de34;
    }
    
    .project-logo {
        max-width: 200px;
        height: auto;
        margin-bottom: 1.2em;
    }
    
    .close-btn {
        font-weight: 600;
        margin: 1em 0 0.4em 0;
        display: inline-block;
        border: 1px solid #e1de34;
        padding: 0.2em 0.5em 0 0.5em;
    }
    
    
    .accordion {
        font-family: 'Avara_Bold', Georgia, sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        background: none;
      color: #FFF;
      cursor: pointer;
      padding: 0.7em 0 0 0;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 1em;
      transition: 0.4s;
        border-top: 1px solid #e1de34;
        margin-bottom: 1em;
        margin-top: 0.5em;
        font-weight: normal;
    }

    .active, .accordion:hover {
      background-color: none; 
    }

    .panel {
      padding: 0;
      display: none;
      background-color: none;
      overflow: hidden;
    }
    
@media only screen and (max-width: 960px) {
    
    ul.top-nav {
        width: 100%;
        margin-top: 0.4em;
    }
    
    ul.top-nav li {
        border: 1px solid #FFF;
        padding: 3px 7px 0 7px;
        border-radius: 3px;
    }
    
    }
    
@media only screen and (max-width: 626px) {
    
    li.timber-link {
    display: none;
    }
        
    #project-summary {
        top: 6em;
        left: 0;
        }
    
    .top-nav li {
        font-size: 70%;
    }
    
    #top-bar h2 {
        background-image: none;
        padding-right: 0;
        margin-right: 0.3em;
        }
    
    }