/* Reference  - - - - - - - - - - - *
dark blue   #1C406C
blue        #3B81F5
pink        #F487A9
mint        #B6E6CF
light pink  #F9CACD
yellow      #EFE670
light blue  #00CFE4
* - - - - - - - - - - - - - - - - - */


/* Reset  - - - - - - - - - - - - - */
html {
    font-size: 24px;
}

body {
    margin: 0;
    background-color: #3B81F5;
    color: #779;
    font-family: 'Mikado', Sans-Serif;
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* Fonts  - - - - - - - - - - - - - */
@font-face {
  font-family: 'Mikado';
  src: url('/National_Library/20160526010038oe_/https://donutjs.club/fonts/mikado-light.woff2') format('woff2'),
       url('/National_Library/20160526010038oe_/https://donutjs.club/fonts/mikado-light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Mikado';
  src: url('/National_Library/20160526010038oe_/https://donutjs.club/fonts/mikado-medium.woff2') format('woff2'),
       url('/National_Library/20160526010038oe_/https://donutjs.club/fonts/mikado-medium.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Mikado';
  src: url('/National_Library/20160526010038oe_/https://donutjs.club/fonts/mikado-bold.woff2') format('woff2'),
       url('/National_Library/20160526010038oe_/https://donutjs.club/fonts/mikado-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

/* Typography - - - - - - - - - - - */
h1 {
    font-size: 2.66rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 3rem 0 .5rem 0;
    color: #F487A9;
}

h2 + p {
    margin-top: 0.5rem;
}

h2 + h3 {
    margin-top: 0.75rem;
}

h3 {
    margin-bottom: 0.25rem;
}

h3 + p {
    margin-top: 0.25rem;
}

a {
    color: #3B81F5;
    transition: color 0.2s;
}

input,
button {
    font-family: 'Mikado', Sans-Serif;
    transition: background-color 0.2s;
}

img {
    max-width: 100%;
}

/* Top Banner - - - - - - - - - - - */
.sprinkle-background {
    width: 100%;
    padding: 20vh 0;
    position: relative;
}

.sprinkle-background a {
    display: block;
}

.sprinkles {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    z-index: 1;
}

.title {
    text-indent: -10000px;
    background: url('/National_Library/20160526010038oe_/https://donutjs.club/img/logotype.svg') center center no-repeat transparent;
    background-size: contain;
    width: 100%;
    height: 20vh;
    margin-top: -50px;
}

.donut {
    padding-top: 0;
    margin: 0 auto;
    display: block;
    width: 140px;
    height: 140px;
    -webkit-animation-name: spin;
    -webkit-animation-easing-function: linear;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: spin;
    -moz-animation-easing-function: linear;
    -moz-animation-duration: 20s;
    -moz-animation-iteration-count: infinite;
    -ms-animation-name: spin;
    -ms-animation-easing-function: linear;
    -ms-animation-duration: 20s;
    -ms-animation-iteration-count: infinite;
}

@-webkit-keyframes spin {
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spin {
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spin {
    from{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(360deg);}
}

/* Top Navigation - - - - - - - - - - */
.navigation {
    background-color: #1C406C;
    z-index: 2;
    position: relative;
    border-top: 4px solid #1C406C;
    border-bottom: 4px solid #1C406C;
}

.navigation-link {
    color: white;
    font-weight: 700;
    text-decoration: none;
    padding: .75rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: background-color 0.15s;
}

.navigation-link-pink { background-color: #F487A9; }
.navigation-link-pink:hover { background-color: #EF5787; }

.navigation-link-blue { background-color: #3B81F5; }
.navigation-link-blue:hover { background-color: #336fd3; }

.navigation-link-light-blue { background-color: #00CFE4; }
.navigation-link-light-blue:hover { background-color: #00A1B3; }

.navigation-link-green { background-color: #85D5AF; }
.navigation-link-green:hover { background-color: #3CAF77; }

.navigation-link-yellow { background-color: #EADF43; }
.navigation-link-yellow:hover { background-color: #CFC217; }

.navigation-link-orange { background-color: #f0711c; }
.navigation-link-orange:hover { background-color: #c3550c; }

.navigation-link-purple { background-color: #bf87f4; }
.navigation-link-purple:hover { background-color: #8c6abf; }

/* Nav on multiple rows when it doesn't all fit. */
@media (max-width: 699px) {
    .navigation {
        overflow: hidden;
        text-align: center;
    }

    .navigation-link {
        display: inline-block;
        font-size: 16px;
        margin-left: -7px;
    }
}

/* One row of navigation items when it fits. */

@media (min-width: 700px) {

    .navigation {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .navigation-link {
        font-size: 18px;
        text-align: center;

    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    }

}

/* Content - - - - - - - - - - */
.on-top {
    position: relative;
    z-index: 2;
}

.constrain {
    width: 100%;
    max-width: 42rem;
    background-color: white;
    margin: -10vh auto 4rem auto;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.panel {
    padding: 2rem;
    position: relative;
}

.panel-dark {
    background-color: #1C406C;
    color: #B2CCEB;
}

.panel-dark h1 {
    color: white;
}

.about {
    display: table;
}

.about-description {
    display: table-cell;
    vertical-align: middle;
    padding-right: 3rem;
}

.about-image {
    display: table-cell;
    vertical-align: middle;
}

.about-description strong {
    color: #5e5e7d;
}

.non-prof-description {
    font-size: .875rem;
    padding-bottom: 1.5rem;
}

.donny {
    max-width: 100%;
    margin-right: 2rem;
}

.button {
    position: relative;
    display: block;

    margin: 1rem auto;
    padding: .5rem .75rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 275px;
    max-width: 100%;

    font-size: 1.25rem;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    background-color: #3B81F5;
    color: #fff;

    border-radius: 5px;

    transition: background-color 0.2s;
}

.button:last-child {
    margin-bottom: 0;
}

.button:hover {
    background-color: #00CFE4;
}

.button.pink {
    background-color: #F487A9;
}

.button.pink:hover {
    background-color: #F9CACD;
}

.button.green {
    background-color: #3CAF77;
}

.button.green:hover {
    background-color: #85D5AF;
}

.button.inline-button {
    display: inline-block;
    margin: 0 .5rem;
    width: auto;

    font-size: 24px;
    text-transform: uppercase;

    cursor: pointer;
}

.tito-tickets-button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    margin: -0.5rem -0.75rem;
    padding: 0.5rem 0.75rem;

    color: currentColor;
    font-family: inherit;
    font-size: inherit;
    font-size: inherit;
    text-transform: inherit;
}


/* Schedule - - - - - - - - - - */
.schedule-coming-soon {
    padding: 62px 0;
}

.schedule:after {
    content: '';
    clear: both;
    display: table;
}

.schedule h1 {
    margin-top: 0;
}

.events-list {
    padding-left: 5rem;
    width: 70%;
    margin-left: 10%;

    box-sizing: border-box;
    float: right;
}

.events-illustrations {
    width: 20%;
    box-sizing: border-box;
    float: left;
    padding: 0;
}

.events-illustrations img {
    max-width: 90%;
    margin-bottom: 5rem;
}

.events-illustrations img:last-child {
    margin-bottom: 0;
}

.event-illustration-right {
    margin-left: 60px;
}

.event-illustration-left {
    margin-right: -20px;
}

.event-speaker {
    color: #F487A9;
}

.event-speaker h3 {
    margin: 0 0 0.25rem 0;
}

.event-speaker h3 a {
    text-decoration: none;
    padding: 4px 0;
    vertical-align: middle;

    font-size: 16px;
}

.event-speaker h3 a + span.ampersand {
    color: #3B81F5;
    font-size: 18px;
    opacity: 0.6;
}

.event-speaker h3 a:hover {
    color: #F487A9;
}

.event-speaker p {
    margin: 0;
}

.event-speaker p.event-talk-description {
    margin-top: 0.25rem;
    font-size: 14px;
    font-weight: normal;
    color: #B2CCEB;
}

.event {
    list-style-type: none;
    position: relative;
    padding-left: 20px;
    padding-bottom: 40px;
    border-left: 4px solid #3B81F5;
    word-wrap: break-word;
}

.event-last {
    border-left: 4px solid transparent;
    margin-top: -4px;
    margin-bottom: 0;
}

.event-first:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: -12px;
    width: 12px;
    height: 12px;
    background-color: #1C406C;
}

.event:after {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    left: -12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 4px solid #3B81F5;
    background-color: white;
}

.event-time {
    width: 100px;
    position: absolute;
    left: -130px;
    top: 0;
    margin: 0;
    text-align: right;
    font-weight: 700;
    color: #3B81F5;
}

.past-speakers-link {
    position: absolute;
    bottom: 0;
    right: 20px;
    font-size: .7em;
}

.past-events li {
    list-style-type: none;
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;
}

.past-events li .event-speaker h3 {
    color: #779;
}

.past-events li .event-speaker p {
    color: #aaa;
}

.past-events .button {
    margin-top: 3rem;
}

/* Future events. */
.panel.future-events {
    background-color: #3376c7;
}

.panel.future-events h2,
.panel.future-events p,
.panel.future-events li {
    color: #fff;
}

.panel.future-events h2 {
    margin-top: 0;
}

.panel.future-events ul {
    margin-bottom: 0;
}

.panel.future-events li {
    margin-top: 0.5rem;
}

/* Details on the homepage. */
.panel.details h2:first-child {
    margin-top: 0;
}

/* Tickets - - - - - - - - - - */
.panel .tito-wrapper {
    font-family: 'Mikado', Sans-Serif;
}

/* Sponsorship - - - - - - - - - - */

.panel table.sponsorship-packages {
    width: 100%;
}

.panel table.sponsorship-packages th,
.panel table.sponsorship-packages td
{
    text-align: center;
}

/* Sponsors */
.sponsors {
    margin: 0.75rem 0 0 ;
    padding: 0;
}

.sponsors li {
    display: inline-block;

    margin: 1rem 2rem 1rem 0;
}

.sponsors li a {
    display: inline-block;

    height: 50px;
    line-height: 50px;
}

.sponsors li img {
    max-width: 100%;
    max-height: 100%;

    vertical-align: middle;
}

/* Responsive - - - - - - - - - - */
@media screen and (max-width: 720px) {
    .about-image {
        width: 100%;
        display: block;
    }
    .donny {
        margin: 0 auto 1rem auto;
    }
    .events-illustrations {
        display: none;
    }
    .events-list {
        width: 100%;
        margin-left: 0;
    }
    .about-description {
        display: block;
        padding: 0;
        margin-top: 2rem;
    }
    .panel table.sponsorship-packages {
        font-size: .675rem;
    }
}

@media screen and (max-width: 480px) {
    html {
        font-size: 18px;
    }
    .panel {
        padding: 2rem 1em;
    }
    .event {
        font-size: .75rem;
    }
    .navigation-link {
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        -o-flex: 1;
        flex: 1;
    }
    .button {
        width: auto;
    }
}

@media screen and (max-width: 300px) {
    html {
        font-size: 16px;
    }
}

/* Responsive Videos - - - - - - - */

.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 }

/* Speak. */

.speaker-form {
    text-align: center;
}


/* Splash page! */

body.splash .sprinkle-background {
    z-index: 2;

    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;

    transform: translate(-50%, -50%);
}