@font-face { font-family: neoteric;  src:url('neoteric-reg.ttf'); }

.ui-state-focus, .ui-accordion-header { outline: none; }

a {
    position: relative;
    color: blue;
    text-decoration-skip: ink;
}
    a:hover {
        color: blue;
    }

html, body {
    margin:0;
    padding:0;
}

.c {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

svg {
    margin-top: 5em;
}

tspan {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

rect, image, text {
    cursor: pointer;
}

.text {
    font-family: 'Padauk', sans-serif;
    font-size: 13px;
}

h2 {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 13px;
    }

h3 {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 14px;
        text-transform: uppercase;
    }

.radio-text {
    margin-bottom: 2em;
}

.box {
    position: absolute;
    border: 1px solid #000;
    padding: 1em 2em;
    display: none;
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    opacity: .95;
    box-shadow:
        0 0 0 2px hsl(0, 0%, 0%),
        0 0 0 6px hsl(0, 0%, 95%);
}
    .box:active {
        cursor: grabbing;
        cursor: -moz-grabbing;
        cursor: -webkit-grabbing;
    }
    .box img {
        max-width: 100%;
    }
    .box .pdf-viewer {
        opacity: 1;
    }

    #box-businesscard {
        top: 30%;
        left: 55%;
        margin-left: -222px;
        width: 444px;
        background: white;
        margin-bottom: 10em;
    }

      #box-businesscard a {
        text-decoration: none;
      }

    #box-eventcard {
        top: 5%;
        left: 100px;
        background: #fff600;
        width: 670px;
        margin-bottom: 10em;
    }

        #box-businesscard .text, #box-eventcard .text  {
            margin: 0 1em;
        }


#box-radio {
    top: 40px;
    left: 80px;
    width: 450px;
    background: white;
    margin-bottom: 10em;
}
    #box-radio h4 {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 14px;
    }

#box-capsule {
    left: 40px;
    top: 30px;
    width: 360px;
    background: #fff262;
    margin-bottom: 10em;
}
    #box-capsule img {
        border: 3px solid #000;
        margin-bottom: .5em;
    }

#box-LMC {
    left: 760px;
    top: 280px;
    width: 370px;
    background: plum;
    margin-bottom: 10em;
}
     #box-LMC img {
        border: 3px solid #000;
    }

#box-britishlibrary {
    left: 500px;
    top: 30px;
    width: 420px;
    background: white;
    margin-bottom: 10em;
}
    #box-britishlibrary img:first-of-type {
        max-width: 416px;
    }

#box-misc {
    left: 660px;
    top: 675px;
    width: 365px;
    background: lightgrey;
    margin-bottom: 10em;
}
    #box-misc h3 {
        margin-top: 1em;
        text-transform: none;
        font-size: 13px;
        font-family: 'Padauk', sans-serif;
    }
    #box-misc a {
        font-weight: lighter;
    }
    #box-misc li {
        font-family: 'Padauk', sans-serif;
        font-size: 13px;
    }

#box-charivaria {
    left: 30px;
    top: 40px;
    width: 500px;
    background: #f6c83e;
    margin-bottom: 10em;
}
    #box-charivaria .border img {
        border: 3px solid #000;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

#box-meltdown {
    left: 540px;
    top: 220px;
    width: 345px;
    background: white;
    margin-bottom: 10em;
}

#box-noplay {
    left: 620px;
    top: 40px;
    width: 580px;
    background: red;
    margin-bottom: 10em;
}

#box-allday {
    background: #8FBC8F;
    top: 220px;
    left: 990px;
}

#box-music-research {
    right: 20px;
    top: 60px;
    width: 420px;
    background: #e7f2f5;
    margin-bottom: 10em;
}

    #box-music-research a {
        text-decoration: underline;
        opacity: .99
    }

    #box-music-research .border img {
        border: 3px solid #000;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

.misc-date {
    margin-top: 2em;
}
    .misc-date:first-of-type {
        margin: 0;
    }

.bl-sig {
    display: flex;
    flex-direction: row;
    border: 3px solid black;
    margin-top: -10px;
    padding: 15px;
}
    .bl-sig img {
        border: none;
        max-height: 85px;
    }

    .bl-sig a {
        color: black;
    }

.bl-portrait {
    border: 3px solid black;
}

.bl-sigtext {
    margin-left: 1em;
}
    .bl-sigtext p {
        margin: 0;
        padding: 0;
        line-height: 15px;
    }

.exhibition-firstblock {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

.intro-block {
    width: 500px;
}
    .np { width: auto; }
    .intro-block h4 {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 18px;
    }
    .intro-block p {
         font-family: 'Padauk', sans-serif;
        font-size: 13px;
        margin-right: 1em;
    }
.img-block {
    width: 300px;
    margin: 1em;
}
    .img-block img {
        margin-bottom: .25em;
        border: 3px solid #000;
        }

.img-header {
    margin-top: 1em;
}

.presslink {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
    .presslink p {
        margin: 1em auto;
        white-space: nowrap;
        margin-bottom: 0;
    }
         .presslink p:first-of-type {
            margin-left: 0;
        }

        .presslink a {
            margin-left: 2em;
        }

.p-np {
    justify-content: flex-start;
    margin-bottom: .5em;
}

.radiolink {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
    .radiolink p {
        margin: 2.25em;
        margin-top: .25em;
        white-space: nowrap;
    }
         .radiolink p:first-of-type {
            margin-left: 0em;
        }


.listen-block {
    width: 350px;
}
    .listen-block img {
        margin-bottom: .25em;
        border: 3px solid #000;
        max-width: 340px;
    }
        .listen-block img:nth-of-type(2) {
            margin-top: .5em;
            margin-bottom: .75em;
        }
    .listen-block h4 {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 18px;
    }
    .listen-block p {
        font-family: 'Padauk', sans-serif;
        font-size: 13px;
        margin-right: 1em;
    }

.listen-block2 {
        width: 100%;
        margin: .25em auto;
    }
        .listen-block2 img {
            width: 100%;
            border: 3px solid #000;
        }
        .listen-block2 h4 {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 18px;
        }

.listen-block2-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
    .listen-block2-row img {
        margin-top: 1em;
        max-width: 300px;
    }
    .listen-block2-row p {
        font-family: 'Padauk', sans-serif;
        font-size: 13px;
    }

.listen-block2-rowtext {
    margin-left: 1em;
}

.artist-names {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 1em;
}
    .list-item {
        font-family: 'Padauk', sans-serif;
        font-size: 10px;
    }

iframe {
    border: 3px solid #000;
    margin-bottom: .25em;
 }

.show {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    margin-bottom: 1em;
}
    .show p {
        font-family: 'Padauk', sans-serif;
        font-size: 12px;
        text-align: left;
        margin: 1em;
    }
        .show p:first-of-type {
            white-space: nowrap;
        }

.description {
    font-family: 'Padauk', sans-serif;
    font-size: 13px;
    margin-bottom: 3em;
}

.talks {
    margin-top: 3em;
}

.event-calendar {
    margin-top: 3em;
    margin-bottom: 2em;
}

.businesscard-email {
    margin-top: 3em;
    text-align: center;
    font-size: 15px;
}
    .businesscard-email a {
        color: black;
    }

    .businesscard-email a:hover {
        color: blue;
    }

.date {
    display: flex;
    flex-direction: row;
    align-items: space-between;
}
    .date p:first-of-type {
        width: 80px;
    }
    .date p {
        margin: 1em;
    }

.datename {
    width: 550px;
    display: flex;
    flex-direction: column;
    margin-bottom: 2em;
}
    .datename p:first-of-type {
        width: auto;
    }
     .date p {
         margin-top: -.5em;
    }

.x {
    float:right;
    top: -1px;
    right: -7px;
    position: absolute;
    height: 20px;
    width: 20px;
    cursor: pointer;
}
    .x:after {
        content:'✕';
        font-size: 8px;
    }
.temp {
    height: 500px;
    width: 300px;
    background: black;
}

.year h3 {
    margin-bottom: 2em;
}

#news {
    position: absolute;
    width: 100vw;
    margin: 2em auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: baseline;
    display: none;
    pointer-events: none;
    z-index: -1;
}

    #news > div {
        margin-top: 1em;
        margin-bottom: 1em;
        padding: 0;
        width: 400px;
        background: url('f/dot.png');
    }
    #news > div > img {
        opacity: .78;
        max-width: 355px;
        max-height: 355px;
    }
    #news > div > div {
        margin: 0;
    }
    #news > div > div a {
        text-transform: none;
        text-shadow: 0 0 40px #000;
    }
    #news > div > div:nth-of-type(2) {
        margin-top: 1.5em;
    }

    .disc { margin: 2em 4em;}

    .news-title {
        font-family: 'Bold', Helvetica;
        text-transform: uppercase;
        padding: 0;
        margin: 0;
    }

    .news-body, .news-caption {
        padding: 2em;
    }

    .news-date {
        text-align: center;
        width: 90px;
        padding: .25em;
        margin: 0;
    }

    .t {
        font-family: 'Padauk', sans-serif;
        font-size: 20px;
        font-weight: 300;
    }
        .t:hover {
            fill: blue;
            border: 1px solid #000;
        }

    #businesscard:hover {
        cursor: pointer;
    }
        #businesscard:hover .tt {
            fill: blue;
        }

    #c{
        fill-opacity: .6;
      -webkit-animation: dash 1s infinite linear;
      -moz-animation: dash 1s infinite linear;
      -o-animation: dash 1s infinite linear;
      animation: dash 1s infinite linear;
      -webkit-transition: stroke-width .2s linear;
      -moz-transition: stroke-width .2s linear;
      -ms-transition: stroke-width .2s linear;
      -o-transition: stroke-width .2s linear;
      transition: stroke-width .2s linear;
    }
        #c:hover, #businesscard:hover #c {
            fill: white;
            fill-opacity: .9;
            stroke: black;
            stroke-width: 1.25px;
            stroke-dasharray: none;
            -webkit-animation: none;
            -moz-animation: none;
            -o-animation: none;
            animation: none;
        }
    @-webkit-keyframes dash {
      to { stroke-dashoffset: -5; }
    }
    @-moz-keyframes dash {
      to { stroke-dashoffset: -5; }
    }
    @-o-keyframes dash {
      to { stroke-dashoffset: -5; }
    }
    @keyframes dash {
      to { stroke-dashoffset: -5; }
    }

    .mobile {
        display: none;
        margin: 0;
        width: 100%;
    }

    .mobile-desc {
        text-align: justify;
        margin: 2em auto;
    }
        .mobile-textcontainer {
            width: 300px;
            margin-top: 5em;
        }
        .mobile-textcontainer p {
            margin: 2em;
            font-family: 'Padauk', sans-serif;
            font-size: 13px;
        }
    .mobile-email {
        text-align: center;
    }
        .mobile-email p {
            font-size: 15px;
        }

        .mobile-email a {
          text-decoration: none;
        }
    .mobile-button {
        margin: 3.5em auto;
        margin-bottom: 5em;
    }
        .mobile-button p {
            text-align:center;
        }
            .mobile-button p:hover {
                color: blue;
                text-shadow: 5px 5px 15px gold;
            }

    @media screen and (max-width: 860px){
        .c {
            flex-direction: column;
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
        }
        .box {
            position: relative;
            border:  none;
            padding: 0;
        }
        .x {
            top: 7px;
            right: 7px;
        }
            .x:after {
                font-size: 20px;
            }
        #box-eventcard {
            top: auto;
            left: auto;
            position:relative;
            background: pink;
            width: 100%;
            border: none;
            margin-bottom: 0;
        }
            #box-eventcard a {
                color: blue;
            }
        svg {display: none;}
        .mobile {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
        }
            .mobile img {
                width: 80px;
                margin: 1em 6.25em;
                margin-top: 0;
            }
            .mobile-email p a {
                color: black;
            }
            .mobile-email p a:hover {
                color: blue;
            }
            .mobile a {
                color: blue;
            }
    }
    .box-businesscard text {
    margin-top: 2em;
}