:root {

}

@font-face {
    font-family: "Benton Sans";
    src: url('../fonts/benton-sans-regular.eot') format('eot'),
    url('../fonts/benton-sans-regular.woff2') format('woff2'),
    url('../fonts/benton-sans-regular.woff') format('woff');
    font-weight: normal;
}
@font-face {
    font-family: "Benton Sans";
    src: url('../fonts/benton-bold.eot') format('eot'),
    url('../fonts/benton-sans-bold.woff2') format('woff2'),
    url('../fonts/benton-sans-bold.woff') format('woff');
    font-weight: bold;
}

@font-face {
    font-family: "Freight Text Pro";
    src: url('../fonts/freight-text-pro-medium-regular.woff2') format('woff2'),
    url('../fonts/freight-text-pro-medium-regular.woff') format('woff');
    font-weight: 400;
}
@font-face {
    font-family: "Freight Text Pro";
    src: url('../fonts/freight-text-pro-book-italic.woff2') format('woff2'),
    url('../fonts/freight-text-pro-book-italic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: "Freight Text Pro";
    src: url('../fonts/freight-text-pro-black-regular.woff2') format('woff2'),
    url('../fonts/freight-text-pro-black-regular.woff') format('woff');
    font-weight: 700;
}

body {
    font-family: 'Benton Sans', sans-serif;
    margin: 0;
}

*, ::after, ::before {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 8px;
    font-weight: 500;
    line-height: 1.2;
}

div, span, p, h1, h2, h3, a {
    backface-visibility: hidden;
    transform: scale3d(1,1,1);
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, abbr, acronym, img, ol, ul, li, table, tr, th, td, canvas, embed, video, input {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

p {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 16px;
    text-align: left;
}

h2 {
    font-family: 'Freight Text Pro', serif;
    font-weight: 400;
    font-size: 48px;
    letter-spacing: -.07rem;
    text-align: center;
    line-height: .9;
    margin-bottom: 48px;
    margin-top: 40px;
    font-feature-settings: "liga";
    color: #000000cc;
}

input[type="password"] {
    height: 34px;
    margin-right: 8px;
    font-size: 16px;
    font-family: 'Benton Sans', sans-serif;
    padding: 2px 16px 0 8px;
}

.login {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.no-decsender {
    line-height: .8;
}

.h2-small {
    font-size: 24px;
}

h3 {
    font-family: 'Freight Text Pro', serif;
    font-weight: 700;
    font-size: 28px;
    color: #d21015;
    letter-spacing: -.07rem;
    font-feature-settings: "liga";
}

.full-height {
    font-feature-settings: "aalt";
}

.year {
    font-family: 'Freight Text Pro', serif;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -.07rem;
    text-align: center;
    line-height: 1;
    color: #000000cc;
}

.month {
    text-align: center;
    font-size: 16px;
    margin: 0;
    line-height: 1;
}

.highlight {
    background-color: #fffc00;
    /*mix-blend-mode: multiply;*/
    padding: 4px 2px;
    margin-left: -2px;
    margin-right: -2px;
}

.note .highlight {
    padding: 0 2px;
}

.intro-final {
    opacity: 1 !important;
}

.intro-left{
    opacity: 0;
}
.intro-right{
    opacity: 0;
}
.intro-full{
    opacity: 0;
}

.intro-fade{
    opacity: 0;
}

.intro-left-start {
    transform: translateX(-1.25rem);
    opacity: 0;
}

.intro-left-end {
    transform: translateX(0rem);
    opacity: 1 !important;
    transition: transform .5s cubic-bezier(.17,.63,.44,.91), opacity .5s cubic-bezier(.17,.63,.44,.91);
}

.intro-right-start {
    transform: translateX(1.25rem);
    opacity: 0;
}

.intro-right-end {
    transform: translateX(0rem);
    opacity: 1 !important;
    transition: transform .5s cubic-bezier(.17,.63,.44,.91), opacity .5s cubic-bezier(.17,.63,.44,.91);
}

.intro-full-start {
    transform: translateY(1.25rem);
    opacity: 0;
}

.intro-full-end {
    transform: translateY(0rem);
    opacity: 1 !important;
    transition: transform .5s cubic-bezier(.17,.63,.44,.91), opacity .5s cubic-bezier(.17,.63,.44,.91);
}

.intro-fade-start {
    opacity: 0;
}

.intro-fade-end {
    opacity: 1 !important;
    transition: opacity .5s cubic-bezier(.17,.63,.44,.91);
}

.container-fluid {
    max-width: 1168px;
    padding-right: 16px;
    padding-left: 16px;
    position: relative;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.event-details {
    width: 50%;
}

.event-left {
    float: left;
    padding-right: 112px;
    padding-left: 96px;
}

.event-right {
    float: right;
    padding-left: 112px;
    padding-right: 96px;
}

.event-date {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    border: solid 3px rgb(0 0 0 / 10%);
    flex-shrink: 0;
    pointer-events: visible;
}

.event {
    position: relative;
    width: 100%;
    padding-bottom: 48px;
    min-height: 163px;
    display: inline-block;
    pointer-events: none;
}

.event-details-text {
    pointer-events: visible;
}

.event-date-wrapper {
    position: absolute;
    left: 50%;
    margin-left: -57px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.event-date-wrapper:after {
    content: "";
    border-left: 1px dotted #000000;
    height: 100%;
    margin-top: -20px;
    margin-bottom: -20px;
    min-height: 40px;
}

.event-date-wrapper:before {
    content: "";
    position: absolute;
    top: 95px;
    border-bottom: 1px solid #000000;
    width: 9px;
}

.event-last:after {
    content: none;
}

.event-last:before {
    content: none;
}

.btn, input[type="submit"] {
    text-decoration: none;
    color: #ffffff;
    background: #000000;
    padding: 2px 16px 0 16px;
    border-radius: 17px;
    height: 34px;
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-family: 'Benton Sans', sans-serif;
    border: none;
    box-sizing: inherit;
}

.btn[href=""]:not(input) {
    pointer-events: none;
    opacity: .5;
}

.btn:last-child {
    margin-bottom: 16px;
}

.btn-documents:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../images/icon-document.png);
    background-size: cover;
    top: -1px;
    left: -2px;
    position: relative;
    margin-right: 2px;
}

.btn-emails:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../images/icon-email.png);
    background-size: cover;
    top: -1px;
    left: -2px;
    position: relative;
    margin-right: 2px;
}

.btn-messages:before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../images/icon-message.png);
    background-size: cover;
    top: -1px;
    left: -2px;
    position: relative;
    margin-right: 2px;
}

.main {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.waves-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    z-index: -1;
    background-color: #fafafa;
    background-image: url(../images/paper-texture.jpg);
    background-size: 100% auto;
}

.waves-repeat {
    flex-grow: 1;
    background: url(../images/waves.png);
    background-size: 100% auto;
    position: relative;
    margin-top: 100px;
}

h1 {
    font-family: 'Freight Text Pro', serif;
    font-weight: 700;
    font-size: 72px;
    letter-spacing: -.054em;
    text-align: center;
    line-height: 1;
    margin-bottom: 60px;
    margin-top: 60px;
    font-feature-settings: "liga";
    color: #000000cc;
}

h1:after {
    content: "";
    border-top: 1px solid #000000;
    border-bottom: 1px dotted #000000;
    height: 4px;
    width: 100%;
    max-width: 660px;
    position: relative;
    display: block;
    margin: auto;
    margin-top: 32px;
}

.highlighter {
    position: relative;
    z-index: 1;
}

.highlighter:after {
    content: "";
    background: url(../images/highlighter.png);
    position: absolute;
    width: 112%;
    height: 100%;
    background-size: contain;
    top: 5%;
    background-position: center;
    background-repeat: no-repeat;
    left: -5%;
    /*mix-blend-mode: multiply;*/
    pointer-events: none;
    z-index: -1;
}

.devil {
    position: relative;
}

.devil:after {
    content: "";
    background: url(../images/devil.png);
    position: absolute;
    width: 139%;
    height: 143%;
    background-size: contain;
    top: 15%;
    background-position: center;
    background-repeat: no-repeat;
    left: -5%;
    /*mix-blend-mode: multiply;*/
    pointer-events: none;
}

.image-wrapper {
    position: absolute;
    width: 50%;
    pointer-events: none;
}

.image-centered {
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 568px;
}

.image-top {
    bottom: 100%;
    margin-bottom: 20px;
}

.image-bottom {
    top: 100%;
}

.image-left {

}

.image-right {
    right: 0;
}

.image {
    width: 100%;
}

.event-left .image {
    margin-left: -24px;
}

.event-right .image {
    margin-right: -24px;
}

.mb-24 {
    margin-bottom: -24px;
}

.mb-40 {
    margin-bottom: -40px;
}

.mb-60 {
    margin-bottom: -60px;
}

.mb-80 {
    margin-bottom: -80px;
}

.mb-168 {
    margin-bottom: -168px;
}

.mb-224 {
    margin-bottom: -224px;
}

.mb-264 {
    margin-bottom: -264px;
}

.mb-380 {
    margin-bottom: -380px;
}

.mb-500 {
    margin-bottom: -500px;
}

.mb-768 {
    margin-bottom: -768px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb172 {
    margin-bottom: 172px;
}

.mb232 {
    margin-bottom: 232px;
}

.mb282 {
    margin-bottom: 282px;
}

.mt-40 {
    margin-top: -40px;
}

.mt-64 {
    margin-top: -64px;
}

.mt-80 {
    margin-top: -80px;
}

.mt-152 {
        margin-top: -152px;
}

.mt-212 {
    margin-top: -212px;
}

.mt-292 {
    margin-top: -292px;
}

.mt-362 {
    margin-top: -362px;
}

.mt-312 {
    margin-top: -312px;
}

.mt-500 {
    margin-top: -500px;
}


.mt212 {
    margin-top: 212px;
}

.ml-40 {
    margin-left: -40px;
}

.pb136 {
    padding-bottom: 136px;
}

.pl96 {
    padding-left: 96px;
}

.pl192 {
    padding-left: 17.5%;;
}

.pr192 {
    padding-right: 17.5%;;
}

.pb0 {
    padding-bottom: 0px;
}

.event-inner {
    position: relative;
    display: inline-block;
    width: 100%;
}

.note {
    font-family: 'Freight Text Pro', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 18px;
    padding-left: 16px;
    border-left: solid 3px #00000010;
    line-height: 1.4;
    margin-top: 24px;
    margin-bottom: 24px;
}

.asterisk {
    display: flex;
}

.asterisk:before {
    content: "*";
    margin-left: -4px;
    margin-right: 4px;
}

.dots-right, .dots-left {
    position: relative;
}

.dots-right:after {
    content: "";
    border-top: dotted 4px rgb(0 0 0 / 15%);
    width: 36px;
    position: absolute;
    top: 50%;
    right: -44px;
}

.dots-left:before {
    content: "";
    border-top: dotted 4px rgb(0 0 0 / 15%);
    width: 36px;
    position: absolute;
    top: 50%;
    left: -44px;
}

.pdf-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: #00000090;
    top: 0;
    left: 0;
    display:none;
    align-items: center;
    justify-content: center;
}

.pdf-overlay iframe {
    width: 80%;
    height: 80%;
    position: relative;
    z-index: 2;
    max-width: 960px;
}

.image-ratio {
    visibility: hidden;
}

.canvas-fit-size {
    position: absolute; 
    width:100% !important; 
    height:100% !important;
    top:0;
    left:0;
}

.exit-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 1;
}

.pdf-overlay:before {
    position: absolute;
    content: "";
    height: 2px;
    width: 24px;
    transform: rotate(45deg);
    background-color: #ffffff;
    top: 36px;
    right: 24px;
}

.pdf-overlay:after {
    position: absolute;
    content: "";
    height: 2px;
    width: 24px;
    transform: rotate(-45deg);
    background-color: #ffffff;
    top: 36px;
    right: 24px;
}

.centered-content:before {
    content: "";
    border-top: 1px solid #000000;
    border-bottom: 1px dotted #000000;
    height: 4px;
    width: 100%;
    max-width: 1000px;
    position: relative;
    display: block;
    margin: auto;
    margin-top: 90px;
    margin-bottom: 90px;
}

.centered-content {
    text-align: center;
    max-width: 832px;
    margin: auto;
    margin-bottom: 90px;
}



/*.toolbar { display: none}

#viewerContainer {
    top: 0;
}*/

@media not print {

    /*Medium desktop (desktops, less than 1440px)*/
    @media (max-width: 1439.98px) {

    }

    /*Large devices (desktops, less than 1200px)*/
    @media (max-width: 1199.98px) {
        
    }

    /*Medium devices (tablets, less than 992px)*/
    @media (max-width: 991.98px) {
        .mobile-hide {
            display: none;
        }

        .event-date-wrapper {
            position: relative;
            margin-left: 0;
            left: 0;
            margin-bottom: 32px;
        }

        .dots-right:after {
            content: none;
        }

        .dots-left:before {
            content: none;
        }

        .event-right {
            padding: 0;
            float: inherit;
            display: inherit;
        }

        .event-left {
            padding: 0;
            float: inherit;
        }

        .event-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 0 !important;
            margin-top: 0 !important; 
        }

        .image-wrapper {
            position: relative;
            width: 100%;
            max-width: 480px;
            margin-bottom: 20px;
        }

        .event-details {
            width: 100%;
            max-width: 480px;
        }

        h1 {
           font-size: 56px; 
           margin-bottom: 40px;
        }

        h1:after {
            max-width: 520px;
        }

        .event {
            padding-bottom: 40px !important;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .event:after {
            content: "";
            border-left: 1px dotted #000000;
            height: 100%;
            margin-top: 10px;
            margin-bottom: -60px;
            min-height: 80px;
        }

        .mt-212 {
            margin-top: -180px;
        }

        .sm-mb12 {
            margin-bottom: 12px;
        }

        .mb-60 {
            margin-bottom: -44px;
        }

        .event-details:first-child {
            margin-top: 16px;
        }

        .sm-mb0 {
            margin-bottom: 0;
        }

        .mt-362 {
            margin-top: -192px;
        }

        .mt212 {
            margin-top: 0;
        }

        .mb-24 {
            margin-bottom: -16px !important;
        }

        .mt-80 {
            margin-top: 0;
        }

        .mt-312 {
            margin-top: -48px;
        }

        .mt-40 {
            margin-top: 0;
        }

    }

    /*Extra small devices (portrait phones, less than 576px)*/
    @media (max-width: 575.98px) {

        .mb-60 {
            margin-bottom: -28px;
        }

        h1 {
            font-size: 44px;
        }

        .mt-212 {
            margin-top: -120px;
        }

        .mt-362 {
            margin-top: -152px;
        }

        .mt-292 {
            margin-top: -232px;
        }

    }

    /*iPhone 5 (older portrait phones, less than 375px)*/
    @media (max-width: 374.98px) {
        
    }

}

@media print {

    @page {
        size: A3;
    }

    body {
        width: 1200px;
        -webkit-print-color-adjust: exact !important;
    }

   .intro-left {
       transform: translateX(0rem);
       opacity: 1 !important;
   }

   .intro-right {
       transform: translateX(0rem);
       opacity: 1 !important;
   }

   .intro-full {
       transform: translateY(0rem);
       opacity: 1 !important;
   }

   .intro-fade {
       opacity: 1 !important;
   }

   .event-date {
       border: solid 2px rgb(0 0 0 / 30%);
   }

   .dots-right:after {
       border-top: dotted 4px rgb(0 0 0 / 30%)
   }

   .dots-left:after {
       border-top: dotted 4px rgb(0 0 0 / 30%)
   }

   .waves-background {
       background-color: #ffffff;
       background-image: none;
   }
}