@import url(fontawesome-all.min.css);
    @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic");
    /*
	Spectral by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
    
     :root {
        /* wrapper.style1 */
        --s1-codecolor: rgba(255, 255, 255, 0.075);
        --s1-labelcolor: rgba(255, 255, 255, 0.075);
        --h1-color: white;
        --h2-color: #252525;
        --h3-color: #252525;
        --h4-color: #252525;
        --h5-color: #252525;
        --thecolor: #252525;
        --style1: #00ecbd;
        --style4: #41e6c2;
        /*f2849e */
        --style2: #363636;
        --style3: #76ddff;
    }
    
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }
    
    body {
        line-height: 1;
    }
    
    ol,
    ul {
        list-style: none;
    }
    
    blockquote,
    q {
        quotes: none;
    }
    
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    body {
        -webkit-text-size-adjust: none;
    }
    
    mark {
        background-color: transparent;
        color: inherit;
    }
    
    input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
    
    input,
    select,
    textarea {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
    }
    /* Basic */
    
    @-ms-viewport {
        width: device-width;
    }
    
    html {
        box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
        box-sizing: inherit;
    }
    
    body {
        background: #ffffff !important;
    }
    /*This is the background-color of the main page*/
    
    body.is-preload *,
    body.is-preload *:before,
    body.is-preload *:after {
        -moz-animation: none !important;
        -webkit-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
        -moz-transition: none !important;
        -webkit-transition: none !important;
        -ms-transition: none !important;
        transition: none !important;
    }
    
    body,
    input,
    select,
    textarea {
        color: #353535;
        /*color-for-all*/
        font-family: "Open Sans", Helvetica, sans-serif;
        font-size: 16pt;
        font-weight: 400;
        letter-spacing: 0.075em;
        line-height: 1.65em;
    }
    
    @media screen and (max-width: 1680px) {
        body,
        input,
        select,
        textarea {
            font-size: 13pt;
        }
    }
    
    @media screen and (max-width: 1280px) {
        body,
        input,
        select,
        textarea {
            font-size: 12pt;
        }
    }
    
    @media screen and (max-width: 736px) {
        body,
        input,
        select,
        textarea {
            font-size: 11pt;
            letter-spacing: 0.0375em;
        }
    }
    
    a {
        -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
        -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
        -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
        transition: color 0.2s ease, border-bottom-color 0.2s ease;
        border-bottom: solid 1px;
        border-bottom-color: var(--thecolor);
        color: inherit;
        text-decoration: none;
    }
    
    a:hover {
        border-bottom-color: var(thecolor)60;
    }
    
    strong,
    b {
        color: var(--thecolor);
        font-weight: 600;
    }
    
    em,
    i {
        font-style: italic;
    }
    
    p {
        margin: 0 0 1em 0;
        letter-spacing: 0.1em;
    }
    
    h1 {
        font-size: 1.35em;
        color: var(--h1-color);
        font-weight: 800;
        letter-spacing: 0.225em;
        line-height: 1em;
        margin: 0 0 1em 0;
        text-transform: uppercase;
    }
    
    h2 {
        font-size: 1.35em;
        color: var(--h2-color);
        font-weight: 800;
        letter-spacing: 0.16em;
        line-height: 1.75em;
        margin: 0 0 1em 0;
        text-transform: uppercase;
    }
    
    @media screen and (max-width: 736px) {
        h2 {
            font-size: 1.1em;
            line-height: 1.65em;
        }
    }
    
    h3 {
        font-size: 1.15em;
        color: var(--h3-color);
        font-weight: 800;
        letter-spacing: 0.16em;
        line-height: 1.75em;
        margin: 0 0 1em 0;
        text-transform: uppercase;
    }
    
    @media screen and (max-width: 736px) {
        h3 {
            font-size: 1em;
            line-height: 1.65em;
        }
    }
    
    h4 {
        font-size: 1em;
        color: var(--h4-color);
        font-weight: 800;
        letter-spacing: 0.16em;
        line-height: 1em;
        margin: 0 0 1em 0;
        /* text-transform: uppercase; */
    }
    
    h5 {
        /*publication name*/
        font-size: 0.9em;
        color: var(--h5-color);
        font-weight: 600;
        letter-spacing: 0.1em;
        line-height: 1.5em;
        margin: 0 0 1em 0;
    }
    
    #projectinfo h3 h5 {
        /*publication name*/
        font-size: 0.9em;
        color: var(--h5-color);
        font-weight: 200;
        letter-spacing: 0.1em;
        line-height: 1.5em;
        margin: 0 0 5em 3em;
    }
    
    #projectinfo h5 #link {
        text-decoration: underline;
    }
    
    h6 {
        /*publication details*/
        font-size: 0.7em;
        color: var(--h6-color);
        font-weight: 600;
        letter-spacing: normal;
        line-height: 1.5em;
        margin: 0 0 1em 0;
    }
    
    h1 a,
    h2 a,
    h3 a,
    h4 a,
    h5 a,
    h6 a {
        color: inherit;
        text-decoration: none;
    }
    
    sub {
        font-size: 0.8em;
        position: relative;
        top: 0.5em;
    }
    
    sup {
        font-size: 0.8em;
        position: relative;
        top: -0.5em;
    }
    
    hr {
        border: 0;
        border-bottom: solid 2px #fff;
        margin: 3em 0;
    }
    
    hr.major {
        margin: 4.5em 0;
    }
    
    blockquote {
        font-size: 1.2em;
        border-left: solid 4px #fff;
        font-style: italic;
        font-family: Cochin, Georgia, Times, serif;
        margin: 0 0 1em 0;
        padding: 0.5em 0 0.5em 2em;
    }
    
    code {
        background: var(--s1-codecolor);
        border-radius: 3px;
        font-family: "Courier New", monospace;
        font-size: 0.9em;
        letter-spacing: 0;
        margin: 0 0.25em;
        padding: 0.25em 0.65em;
    }
    
    pre {
        -webkit-overflow-scrolling: touch;
        font-family: "Courier New", monospace;
        font-size: 0.9em;
        margin: 0 0 2em 0;
    }
    
    pre code {
        display: block;
        line-height: 1.75em;
        padding: 1em 1.5em;
        overflow-x: auto;
    }
    
    .align-left {
        text-align: left;
    }
    
    .align-center {
        text-align: center;
    }
    
    .align-right {
        text-align: right;
    }
    /* Row */
    
    .row {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        align-items: stretch;
    }
    
    .row>* {
        box-sizing: border-box;
    }
    
    .row.gtr-uniform>*> :last-child {
        margin-bottom: 0;
    }
    
    .row.aln-left {
        justify-content: flex-start;
    }
    
    .row.aln-center {
        justify-content: center;
    }
    
    .row.aln-right {
        justify-content: flex-end;
    }
    
    .row.aln-top {
        align-items: flex-start;
    }
    
    .row.aln-middle {
        align-items: center;
    }
    
    .row.aln-bottom {
        align-items: flex-end;
    }
    
    .row>.imp {
        order: -1;
    }
    
    .row>.col-1 {
        width: 8.33333%;
    }
    
    .row>.off-1 {
        margin-left: 8.33333%;
    }
    
    .row>.col-2 {
        width: 16.66667%;
    }
    
    .row>.off-2 {
        margin-left: 16.66667%;
    }
    
    .row>.col-3 {
        width: 25%;
    }
    
    .row>.off-3 {
        margin-left: 25%;
    }
    
    .row>.col-4 {
        width: 33.33333%;
    }
    
    .row>.col-4-s {
        width: 33.33333%;
    }
    
    .row>.off-4 {
        margin-left: 33.33333%;
    }
    
    .row>.col-5 {
        width: 41.66667%;
    }
    
    .row>.off-5 {
        margin-left: 41.66667%;
    }
    
    .row>.col-6 {
        width: 50%;
    }
    
    .row>.off-6 {
        margin-left: 50%;
    }
    
    .row>.col-7 {
        width: 58.33333%;
    }
    
    .row>.off-7 {
        margin-left: 58.33333%;
    }
    
    .row>.col-8 {
        width: 66.66667%;
    }
    
    .row>.off-8 {
        margin-left: 66.66667%;
    }
    
    .row>.col-9 {
        width: 75%;
    }
    
    .row>.off-9 {
        margin-left: 75%;
    }
    
    .row>.col-10 {
        width: 83.33333%;
    }
    
    .row>.off-10 {
        margin-left: 83.33333%;
    }
    
    .row>.col-11 {
        width: 91.66667%;
    }
    
    .row>.off-11 {
        margin-left: 91.66667%;
    }
    
    .row>.col-12 {
        width: 100%;
    }
    
    .row>.off-12 {
        margin-left: 100%;
    }
    
    .row.gtr-0 {
        margin-top: 0;
        margin-left: 0em;
    }
    
    .row.gtr-0>* {
        padding: 0 0 0 0em;
    }
    
    .row.gtr-0.gtr-uniform {
        margin-top: 0em;
    }
    
    .row.gtr-0.gtr-uniform>* {
        padding-top: 0em;
    }
    
    .row.gtr-25 {
        margin-top: 0;
        margin-left: -0.375em;
    }
    
    .row.gtr-25>* {
        padding: 0 0 0 0.375em;
    }
    
    .row.gtr-25.gtr-uniform {
        margin-top: -0.375em;
    }
    
    .row.gtr-25.gtr-uniform>* {
        padding-top: 0.375em;
    }
    
    .row.gtr-50 {
        margin-top: 0;
        margin-left: -0.75em;
    }
    
    .row.gtr-50>* {
        padding: 0 0 0 0.75em;
    }
    
    .row.gtr-50.gtr-uniform {
        margin-top: -0.75em;
    }
    
    .row.gtr-50.gtr-uniform>* {
        padding-top: 0.75em;
    }
    
    .row {
        margin-top: 0;
        margin-left: -1.5em;
    }
    
    .row>* {
        padding: 0 0 0 1.5em;
    }
    
    .row.gtr-uniform {
        margin-top: -1.5em;
    }
    
    .row.gtr-uniform>* {
        padding-top: 1.5em;
    }
    
    .row.gtr-150 {
        margin-top: 0;
        margin-left: -2.25em;
    }
    
    .row.gtr-150>* {
        padding: 0 0 0 2.25em;
    }
    
    .row.gtr-150.gtr-uniform {
        margin-top: -2.25em;
    }
    
    .row.gtr-150.gtr-uniform>* {
        padding-top: 2.25em;
    }
    
    .row.gtr-200 {
        margin-top: 0;
        margin-left: -3em;
    }
    
    .row.gtr-200>* {
        padding: 0 0 0 3em;
    }
    
    .row.gtr-200.gtr-uniform {
        margin-top: -3em;
    }
    
    .row.gtr-200.gtr-uniform>* {
        padding-top: 3em;
    }
    
    @media screen and (max-width: 1680px) {
        .row {
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            align-items: stretch;
        }
        .row>* {
            box-sizing: border-box;
        }
        .row.gtr-uniform>*> :last-child {
            margin-bottom: 0;
        }
        .row.aln-left {
            justify-content: flex-start;
        }
        .row.aln-center {
            justify-content: center;
        }
        .row.aln-right {
            justify-content: flex-end;
        }
        .row.aln-top {
            align-items: flex-start;
        }
        .row.aln-middle {
            align-items: center;
        }
        .row.aln-bottom {
            align-items: flex-end;
        }
        .row>.imp-xlarge {
            order: -1;
        }
        .row>.col-1-xlarge {
            width: 8.33333%;
        }
        .row>.off-1-xlarge {
            margin-left: 8.33333%;
        }
        .row>.col-2-xlarge {
            width: 16.66667%;
        }
        .row>.off-2-xlarge {
            margin-left: 16.66667%;
        }
        .row>.col-3-xlarge {
            width: 25%;
        }
        .row>.off-3-xlarge {
            margin-left: 25%;
        }
        .row>.col-4-xlarge {
            width: 33.33333%;
        }
        .row>.off-4-xlarge {
            margin-left: 33.33333%;
        }
        .row>.col-5-xlarge {
            width: 41.66667%;
        }
        .row>.off-5-xlarge {
            margin-left: 41.66667%;
        }
        .row>.col-6-xlarge {
            width: 50%;
        }
        .row>.off-6-xlarge {
            margin-left: 50%;
        }
        .row>.col-7-xlarge {
            width: 58.33333%;
        }
        .row>.off-7-xlarge {
            margin-left: 58.33333%;
        }
        .row>.col-8-xlarge {
            width: 66.66667%;
        }
        .row>.off-8-xlarge {
            margin-left: 66.66667%;
        }
        .row>.col-9-xlarge {
            width: 75%;
        }
        .row>.off-9-xlarge {
            margin-left: 75%;
        }
        .row>.col-10-xlarge {
            width: 83.33333%;
        }
        .row>.off-10-xlarge {
            margin-left: 83.33333%;
        }
        .row>.col-11-xlarge {
            width: 91.66667%;
        }
        .row>.off-11-xlarge {
            margin-left: 91.66667%;
        }
        .row>.col-12-xlarge {
            width: 100%;
        }
        .row>.off-12-xlarge {
            margin-left: 100%;
        }
        .row.gtr-0 {
            margin-top: 0;
            margin-left: 0em;
        }
        .row.gtr-0>* {
            padding: 0 0 0 0em;
        }
        .row.gtr-0.gtr-uniform {
            margin-top: 0em;
        }
        .row.gtr-0.gtr-uniform>* {
            padding-top: 0em;
        }
        .row.gtr-25 {
            margin-top: 0;
            margin-left: -0.375em;
        }
        .row.gtr-25>* {
            padding: 0 0 0 0.375em;
        }
        .row.gtr-25.gtr-uniform {
            margin-top: -0.375em;
        }
        .row.gtr-25.gtr-uniform>* {
            padding-top: 0.375em;
        }
        .row.gtr-50 {
            margin-top: 0;
            margin-left: -0.75em;
        }
        .row.gtr-50>* {
            padding: 0 0 0 0.75em;
        }
        .row.gtr-50.gtr-uniform {
            margin-top: -0.75em;
        }
        .row.gtr-50.gtr-uniform>* {
            padding-top: 0.75em;
        }
        .row {
            margin-top: 0;
            margin-left: -1.5em;
        }
        .row>* {
            padding: 0 0 0 1.5em;
        }
        .row.gtr-uniform {
            margin-top: -1.5em;
        }
        .row.gtr-uniform>* {
            padding-top: 1.5em;
        }
        .row.gtr-150 {
            margin-top: 0;
            margin-left: -2.25em;
        }
        .row.gtr-150>* {
            padding: 0 0 0 2.25em;
        }
        .row.gtr-150.gtr-uniform {
            margin-top: -2.25em;
        }
        .row.gtr-150.gtr-uniform>* {
            padding-top: 2.25em;
        }
        .row.gtr-200 {
            margin-top: 0;
            margin-left: -3em;
        }
        .row.gtr-200>* {
            padding: 0 0 0 3em;
        }
        .row.gtr-200.gtr-uniform {
            margin-top: -3em;
        }
        .row.gtr-200.gtr-uniform>* {
            padding-top: 3em;
        }
    }
    
    @media screen and (max-width: 1280px) {
        .row {
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            align-items: stretch;
        }
        .row>* {
            box-sizing: border-box;
        }
        .row.gtr-uniform>*> :last-child {
            margin-bottom: 0;
        }
        .row.aln-left {
            justify-content: flex-start;
        }
        .row.aln-center {
            justify-content: center;
        }
        .row.aln-right {
            justify-content: flex-end;
        }
        .row.aln-top {
            align-items: flex-start;
        }
        .row.aln-middle {
            align-items: center;
        }
        .row.aln-bottom {
            align-items: flex-end;
        }
        .row>.imp-large {
            order: -1;
        }
        .row>.col-1-large {
            width: 8.33333%;
        }
        .row>.off-1-large {
            margin-left: 8.33333%;
        }
        .row>.col-2-large {
            width: 16.66667%;
        }
        .row>.off-2-large {
            margin-left: 16.66667%;
        }
        .row>.col-3-large {
            width: 25%;
        }
        .row>.off-3-large {
            margin-left: 25%;
        }
        .row>.col-4-large {
            width: 33.33333%;
        }
        .row>.off-4-large {
            margin-left: 33.33333%;
        }
        .row>.col-5-large {
            width: 41.66667%;
        }
        .row>.off-5-large {
            margin-left: 41.66667%;
        }
        .row>.col-6-large {
            width: 50%;
        }
        .row>.off-6-large {
            margin-left: 50%;
        }
        .row>.col-7-large {
            width: 58.33333%;
        }
        .row>.off-7-large {
            margin-left: 58.33333%;
        }
        .row>.col-8-large {
            width: 66.66667%;
        }
        .row>.off-8-large {
            margin-left: 66.66667%;
        }
        .row>.col-9-large {
            width: 75%;
        }
        .row>.off-9-large {
            margin-left: 75%;
        }
        .row>.col-10-large {
            width: 83.33333%;
        }
        .row>.off-10-large {
            margin-left: 83.33333%;
        }
        .row>.col-11-large {
            width: 91.66667%;
        }
        .row>.off-11-large {
            margin-left: 91.66667%;
        }
        .row>.col-12-large {
            width: 100%;
        }
        .row>.off-12-large {
            margin-left: 100%;
        }
        .row.gtr-0 {
            margin-top: 0;
            margin-left: 0em;
        }
        .row.gtr-0>* {
            padding: 0 0 0 0em;
        }
        .row.gtr-0.gtr-uniform {
            margin-top: 0em;
        }
        .row.gtr-0.gtr-uniform>* {
            padding-top: 0em;
        }
        .row.gtr-25 {
            margin-top: 0;
            margin-left: -0.375em;
        }
        .row.gtr-25>* {
            padding: 0 0 0 0.375em;
        }
        .row.gtr-25.gtr-uniform {
            margin-top: -0.375em;
        }
        .row.gtr-25.gtr-uniform>* {
            padding-top: 0.375em;
        }
        .row.gtr-50 {
            margin-top: 0;
            margin-left: -0.75em;
        }
        .row.gtr-50>* {
            padding: 0 0 0 0.75em;
        }
        .row.gtr-50.gtr-uniform {
            margin-top: -0.75em;
        }
        .row.gtr-50.gtr-uniform>* {
            padding-top: 0.75em;
        }
        .row {
            margin-top: 0;
            margin-left: -1.5em;
        }
        .row>* {
            padding: 0 0 0 1.5em;
        }
        .row.gtr-uniform {
            margin-top: -1.5em;
        }
        .row.gtr-uniform>* {
            padding-top: 1.5em;
        }
        .row.gtr-150 {
            margin-top: 0;
            margin-left: -2.25em;
        }
        .row.gtr-150>* {
            padding: 0 0 0 2.25em;
        }
        .row.gtr-150.gtr-uniform {
            margin-top: -2.25em;
        }
        .row.gtr-150.gtr-uniform>* {
            padding-top: 2.25em;
        }
        .row.gtr-200 {
            margin-top: 0;
            margin-left: -3em;
        }
        .row.gtr-200>* {
            padding: 0 0 0 3em;
        }
        .row.gtr-200.gtr-uniform {
            margin-top: -3em;
        }
        .row.gtr-200.gtr-uniform>* {
            padding-top: 3em;
        }
    }
    
    @media screen and (max-width: 980px) {
        .row {
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            align-items: stretch;
        }
        .row>* {
            box-sizing: border-box;
        }
        .row.gtr-uniform>*> :last-child {
            margin-bottom: 0;
        }
        .row.aln-left {
            justify-content: flex-start;
        }
        .row.aln-center {
            justify-content: center;
        }
        .row.aln-right {
            justify-content: flex-end;
        }
        .row.aln-top {
            align-items: flex-start;
        }
        .row.aln-middle {
            align-items: center;
        }
        .row.aln-bottom {
            align-items: flex-end;
        }
        .row>.imp-medium {
            order: -1;
        }
        .row>.col-1-medium {
            width: 8.33333%;
        }
        .row>.off-1-medium {
            margin-left: 8.33333%;
        }
        .row>.col-2-medium {
            width: 16.66667%;
        }
        .row>.off-2-medium {
            margin-left: 16.66667%;
        }
        .row>.col-3-medium {
            width: 25%;
        }
        .row>.off-3-medium {
            margin-left: 25%;
        }
        .row>.col-4-medium {
            width: 33.33333%;
        }
        .row>.off-4-medium {
            margin-left: 33.33333%;
        }
        .row>.col-5-medium {
            width: 41.66667%;
        }
        .row>.off-5-medium {
            margin-left: 41.66667%;
        }
        .row>.col-6-medium {
            width: 50%;
        }
        .row>.off-6-medium {
            margin-left: 50%;
        }
        .row>.col-7-medium {
            width: 58.33333%;
        }
        .row>.off-7-medium {
            margin-left: 58.33333%;
        }
        .row>.col-8-medium {
            width: 66.66667%;
        }
        .row>.off-8-medium {
            margin-left: 66.66667%;
        }
        .row>.col-9-medium {
            width: 75%;
        }
        .row>.off-9-medium {
            margin-left: 75%;
        }
        .row>.col-10-medium {
            width: 83.33333%;
        }
        .row>.off-10-medium {
            margin-left: 83.33333%;
        }
        .row>.col-11-medium {
            width: 91.66667%;
        }
        .row>.off-11-medium {
            margin-left: 91.66667%;
        }
        .row>.col-12-medium {
            width: 100%;
        }
        .row>.off-12-medium {
            margin-left: 100%;
        }
        .row.gtr-0 {
            margin-top: 0;
            margin-left: 0em;
        }
        .row.gtr-0>* {
            padding: 0 0 0 0em;
        }
        .row.gtr-0.gtr-uniform {
            margin-top: 0em;
        }
        .row.gtr-0.gtr-uniform>* {
            padding-top: 0em;
        }
        .row.gtr-25 {
            margin-top: 0;
            margin-left: -0.375em;
        }
        .row.gtr-25>* {
            padding: 0 0 0 0.375em;
        }
        .row.gtr-25.gtr-uniform {
            margin-top: -0.375em;
        }
        .row.gtr-25.gtr-uniform>* {
            padding-top: 0.375em;
        }
        .row.gtr-50 {
            margin-top: 0;
            margin-left: -0.75em;
        }
        .row.gtr-50>* {
            padding: 0 0 0 0.75em;
        }
        .row.gtr-50.gtr-uniform {
            margin-top: -0.75em;
        }
        .row.gtr-50.gtr-uniform>* {
            padding-top: 0.75em;
        }
        .row {
            margin-top: 0;
            margin-left: -1.5em;
        }
        .row>* {
            padding: 0 0 0 1.5em;
        }
        .row.gtr-uniform {
            margin-top: -1.5em;
        }
        .row.gtr-uniform>* {
            padding-top: 1.5em;
        }
        .row.gtr-150 {
            margin-top: 0;
            margin-left: -2.25em;
        }
        .row.gtr-150>* {
            padding: 0 0 0 2.25em;
        }
        .row.gtr-150.gtr-uniform {
            margin-top: -2.25em;
        }
        .row.gtr-150.gtr-uniform>* {
            padding-top: 2.25em;
        }
        .row.gtr-200 {
            margin-top: 0;
            margin-left: -3em;
        }
        .row.gtr-200>* {
            padding: 0 0 0 3em;
        }
        .row.gtr-200.gtr-uniform {
            margin-top: -3em;
        }
        .row.gtr-200.gtr-uniform>* {
            padding-top: 3em;
        }
    }
    /* @media screen and (max-width: 736px) {
    #mobilerotate {
        transform: rotate(90deg);
    }
} */
    
    @media screen and (max-width: 736px) {
        .row {
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            align-items: stretch;
        }
        #mobiledisplay>.col-3 {
            width: 100%;
        }
        #mobiledisplay2>.col-3 {
            width: 50%;
        }
        #mobiledisplay>.col-4 {
            width: 100%;
        }
        #mobiledisplay>.col-4-s {
            width: 50%;
        }
        #mobiledisplay>.col-5 {
            width: 100%;
        }
        #mobiledisplay>.col-6>.image.fitIII {
            width: 100%;
        }
        #mobiledisplay>.col-7 {
            width: 100%;
        }
        .row>* {
            box-sizing: border-box;
        }
        .row.gtr-uniform>*> :last-child {
            margin-bottom: 0;
        }
        .row.aln-left {
            justify-content: flex-start;
        }
        .row.aln-center {
            justify-content: center;
        }
        .row.aln-right {
            justify-content: flex-end;
        }
        .row.aln-top {
            align-items: flex-start;
        }
        .row.aln-middle {
            align-items: center;
        }
        .row.aln-bottom {
            align-items: flex-end;
        }
        .row>.imp-small {
            order: -1;
        }
        .row>.col-1-small {
            width: 8.33333%;
        }
        .row>.off-1-small {
            margin-left: 8.33333%;
        }
        .row>.col-2-small {
            width: 16.66667%;
        }
        .row>.off-2-small {
            margin-left: 16.66667%;
        }
        .row>.col-3-small {
            width: 25%;
        }
        .row>.off-3-small {
            margin-left: 25%;
        }
        .row>.col-4-small {
            width: 33.33333%;
        }
        .row>.off-4-small {
            margin-left: 33.33333%;
        }
        .row>.col-5-small {
            width: 41.66667%;
        }
        .row>.off-5-small {
            margin-left: 41.66667%;
        }
        .row>.col-6 {
            width: 100%;
        }
        .row>.off-6-small {
            margin-left: 50%;
        }
        .row>.col-7-small {
            width: 58.33333%;
        }
        .row>.off-7-small {
            margin-left: 58.33333%;
        }
        .row>.col-8-small {
            width: 66.66667%;
        }
        .row>.off-8-small {
            margin-left: 66.66667%;
        }
        .row>.col-9-small {
            width: 75%;
        }
        .row>.off-9-small {
            margin-left: 75%;
        }
        .row>.col-10-small {
            width: 83.33333%;
        }
        .row>.off-10-small {
            margin-left: 83.33333%;
        }
        .row>.col-11-small {
            width: 91.66667%;
        }
        .row>.off-11-small {
            margin-left: 91.66667%;
        }
        .row>.col-12-small {
            width: 100%;
        }
        .row>.off-12-small {
            margin-left: 100%;
        }
        .row.gtr-0 {
            margin-top: 0;
            margin-left: 0em;
        }
        .row.gtr-0>* {
            padding: 0 0 0 0em;
        }
        .row.gtr-0.gtr-uniform {
            margin-top: 0em;
        }
        .row.gtr-0.gtr-uniform>* {
            padding-top: 0em;
        }
        .row.gtr-25 {
            margin-top: 0;
            margin-left: -0.375em;
        }
        .row.gtr-25>* {
            padding: 0 0 0 0.375em;
        }
        .row.gtr-25.gtr-uniform {
            margin-top: -0.375em;
        }
        .row.gtr-25.gtr-uniform>* {
            padding-top: 0.375em;
        }
        .row.gtr-50 {
            margin-top: 0;
            margin-left: -0.75em;
        }
        .row.gtr-50>* {
            padding: 0 0 0 0.75em;
        }
        .row.gtr-50.gtr-uniform {
            margin-top: -0.75em;
        }
        .row.gtr-50.gtr-uniform>* {
            padding-top: 0.75em;
        }
        .row {
            margin-top: 0;
            margin-left: -1.5em;
        }
        .row>* {
            padding: 0 0 0 1.5em;
        }
        .row.gtr-uniform {
            margin-top: -1.5em;
        }
        .row.gtr-uniform>* {
            padding-top: 1.5em;
        }
        .row.gtr-150 {
            margin-top: 0;
            margin-left: -2.25em;
        }
        .row.gtr-150>* {
            padding: 0 0 0 2.25em;
        }
        .row.gtr-150.gtr-uniform {
            margin-top: -2.25em;
        }
        .row.gtr-150.gtr-uniform>* {
            padding-top: 2.25em;
        }
        .row.gtr-200 {
            margin-top: 0;
            margin-left: -3em;
        }
        .row.gtr-200>* {
            padding: 0 0 0 3em;
        }
        .row.gtr-200.gtr-uniform {
            margin-top: -3em;
        }
        .row.gtr-200.gtr-uniform>* {
            padding-top: 3em;
        }
    }
    
    @media screen and (max-width: 480px) {
        .row {
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            align-items: stretch;
        }
        .row>* {
            box-sizing: border-box;
        }
        .row.gtr-uniform>*> :last-child {
            margin-bottom: 0;
        }
        .row.aln-left {
            justify-content: flex-start;
        }
        .row.aln-center {
            justify-content: center;
        }
        .row.aln-right {
            justify-content: flex-end;
        }
        .row.aln-top {
            align-items: flex-start;
        }
        .row.aln-middle {
            align-items: center;
        }
        .row.aln-bottom {
            align-items: flex-end;
        }
        .row>.imp-xsmall {
            order: -1;
        }
        .row>.col-1-xsmall {
            width: 8.33333%;
        }
        .row>.off-1-xsmall {
            margin-left: 8.33333%;
        }
        .row>.col-2-xsmall {
            width: 16.66667%;
        }
        .row>.off-2-xsmall {
            margin-left: 16.66667%;
        }
        .row>.col-3-xsmall {
            width: 25%;
        }
        .row>.off-3-xsmall {
            margin-left: 25%;
        }
        .row>.col-4-xsmall {
            width: 33.33333%;
        }
        .row>.off-4-xsmall {
            margin-left: 33.33333%;
        }
        .row>.col-5-xsmall {
            width: 41.66667%;
        }
        .row>.off-5-xsmall {
            margin-left: 41.66667%;
        }
        .row>.col-6-xsmall {
            width: 50%;
        }
        .row>.off-6-xsmall {
            margin-left: 50%;
        }
        .row>.col-7-xsmall {
            width: 58.33333%;
        }
        .row>.off-7-xsmall {
            margin-left: 58.33333%;
        }
        .row>.col-8-xsmall {
            width: 66.66667%;
        }
        .row>.off-8-xsmall {
            margin-left: 66.66667%;
        }
        .row>.col-9-xsmall {
            width: 75%;
        }
        .row>.off-9-xsmall {
            margin-left: 75%;
        }
        .row>.col-10-xsmall {
            width: 83.33333%;
        }
        .row>.off-10-xsmall {
            margin-left: 83.33333%;
        }
        .row>.col-11-xsmall {
            width: 91.66667%;
        }
        .row>.off-11-xsmall {
            margin-left: 91.66667%;
        }
        .row>.col-12-xsmall {
            width: 100%;
        }
        .row>.off-12-xsmall {
            margin-left: 100%;
        }
        .row.gtr-0 {
            margin-top: 0;
            margin-left: 0em;
        }
        .row.gtr-0>* {
            padding: 0 0 0 0em;
        }
        .row.gtr-0.gtr-uniform {
            margin-top: 0em;
        }
        .row.gtr-0.gtr-uniform>* {
            padding-top: 0em;
        }
        .row.gtr-25 {
            margin-top: 0;
            margin-left: -0.375em;
        }
        .row.gtr-25>* {
            padding: 0 0 0 0.375em;
        }
        .row.gtr-25.gtr-uniform {
            margin-top: -0.375em;
        }
        .row.gtr-25.gtr-uniform>* {
            padding-top: 0.375em;
        }
        .row.gtr-50 {
            margin-top: 0;
            margin-left: -0.75em;
        }
        .row.gtr-50>* {
            padding: 0 0 0 0.75em;
        }
        .row.gtr-50.gtr-uniform {
            margin-top: -0.75em;
        }
        .row.gtr-50.gtr-uniform>* {
            padding-top: 0.75em;
        }
        .row {
            margin-top: 0;
            margin-left: -1.5em;
        }
        .row>* {
            padding: 0 0 0 1.5em;
        }
        .row.gtr-uniform {
            margin-top: -1.5em;
        }
        .row.gtr-uniform>* {
            padding-top: 1.5em;
        }
        .row.gtr-150 {
            margin-top: 0;
            margin-left: -2.25em;
        }
        .row.gtr-150>* {
            padding: 0 0 0 2.25em;
        }
        .row.gtr-150.gtr-uniform {
            margin-top: -2.25em;
        }
        .row.gtr-150.gtr-uniform>* {
            padding-top: 2.25em;
        }
        .row.gtr-200 {
            margin-top: 0;
            margin-left: -3em;
        }
        .row.gtr-200>* {
            padding: 0 0 0 3em;
        }
        .row.gtr-200.gtr-uniform {
            margin-top: -3em;
        }
        .row.gtr-200.gtr-uniform>* {
            padding-top: 3em;
        }
    }
    /* Section/Article */
    
    section.special {
        text-align: center;
    }
    
    #p2 {
        text-align: left;
    }
    
    article.special {
        text-align: center;
    }
    
    header p {
        color: rgba(255, 255, 255, 0.5);
        position: relative;
        top: -0.25em;
    }
    
    header h3+p {
        font-size: 1.1em;
    }
    
    header h4+p,
    header h5+p,
    header h6+p {
        font-size: 0.9em;
    }
    
    header.major {
        margin: 0 0 3.5em 0;
    }
    
    header.major h2,
    header.major h3,
    header.major h4,
    header.major h5,
    header.major h6 {
        /* border-bottom: solid 2px #fff; */
        display: inline-block;
        padding-bottom: 0em;
        position: relative;
    }
    
    header.major h2:after,
    header.major h3:after,
    header.major h4:after,
    header.major h5:after,
    header.major h6:after {
        content: '';
        display: block;
        height: 1px;
    }
    
    header.major p {
        color: #fff;
        top: 0;
    }
    
    @media screen and (max-width: 736px) {
        header.major {
            margin: 0 0 2em 0;
        }
    }
    
    @media screen and (max-width: 980px) {
        header br {
            display: none;
        }
    }
    /* Form */
    
    form {
        margin: 0 0 2em 0;
    }
    
    label {
        color: #fff;
        display: block;
        font-size: 0.9em;
        font-weight: 600;
        margin: 0 0 1em 0;
    }
    
    input[type="text"],
    input[type="password"],
    input[type="email"],
    select,
    textarea {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
        background-color: rgba(144, 144, 144, 0.25);
        border-radius: 3px;
        border: none;
        color: inherit;
        display: block;
        outline: 0;
        padding: 0 1em;
        text-decoration: none;
        width: 100%;
    }
    
    input[type="text"]:invalid,
    input[type="password"]:invalid,
    input[type="email"]:invalid,
    select:invalid,
    textarea:invalid {
        box-shadow: none;
    }
    
    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus,
    select:focus,
    textarea:focus {
        box-shadow: 0 0 0 2px #21b2a6;
    }
    
    select {
        background-size: 1.25em;
        background-repeat: no-repeat;
        background-position: calc(100% - 1em) center;
        height: 2.75em;
        padding-right: 2.75em;
        text-overflow: ellipsis;
    }
    
    select:focus::-ms-value {
        background-color: transparent;
    }
    
    select::-ms-expand {
        display: none;
    }
    
    input[type="text"],
    input[type="password"],
    input[type="email"],
    select {
        height: 2.75em;
    }
    
    textarea {
        padding: 0.75em 1em;
    }
    
    input[type="checkbox"],
    input[type="radio"] {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
        display: block;
        float: left;
        margin-right: -2em;
        opacity: 0;
        width: 1em;
        z-index: -1;
    }
    
    input[type="checkbox"]+label,
    input[type="radio"]+label {
        text-decoration: none;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-size: 1em;
        font-weight: 400;
        padding-left: 2.4em;
        padding-right: 0.75em;
        position: relative;
    }
    
    input[type="checkbox"]+label:before,
    input[type="radio"]+label:before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        text-transform: none !important;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
    }
    
    input[type="checkbox"]+label:before,
    input[type="radio"]+label:before {
        background: rgba(144, 144, 144, 0.25);
        border-radius: 3px;
        content: '';
        display: inline-block;
        font-size: 0.8em;
        height: 2.0625em;
        left: 0;
        line-height: 2.0625em;
        position: absolute;
        text-align: center;
        top: 0;
        width: 2.0625em;
    }
    
    input[type="checkbox"]:checked+label:before,
    input[type="radio"]:checked+label:before {
        background: #2e3842;
        color: #fff;
        content: '\f00c';
    }
    
    input[type="checkbox"]:focus+label:before,
    input[type="radio"]:focus+label:before {
        box-shadow: 0 0 0 2px #21b2a6;
    }
    
    input[type="checkbox"]+label:before {
        border-radius: 3px;
    }
    
    input[type="radio"]+label:before {
        border-radius: 100%;
    }
    
     ::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
        opacity: 1.0;
    }
    
     :-moz-placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
        opacity: 1.0;
    }
    
     ::-moz-placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
        opacity: 1.0;
    }
    
     :-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
        opacity: 1.0;
    }
    /* Box */
    
    .box {
        border-radius: 3px;
        border: solid 2px #fff;
        margin-bottom: 2em;
        padding: 1.5em;
    }
    
    .box> :last-child,
    .box> :last-child> :last-child,
    .box> :last-child> :last-child> :last-child {
        margin-bottom: 0;
    }
    
    .box.alt {
        border: 0;
        border-radius: 0;
        padding: 0;
    }
    /* Icon */
    
    .icon {
        text-decoration: none;
        border-bottom: none;
        position: relative;
    }
    
    .icon:before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        text-transform: none !important;
        font-family: 'Font Awesome 5 Free';
        font-weight: 400;
    }
    
    .icon>.label {
        display: none;
    }
    
    .icon:before {
        line-height: inherit;
    }
    
    .icon.solid:before {
        font-weight: 900;
    }
    
    .icon.brands:before {
        font-family: 'Font Awesome 5 Brands';
    }
    
    .icon.major {
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        border-radius: 3px;
        border: solid 2px #fff;
        display: inline-block;
        font-size: 1.35em;
        height: calc(3em + 2px);
        line-height: 3em;
        text-align: center;
        width: calc(3em + 2px);
    }
    
    .icon.major:before {
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        display: inline-block;
        font-size: 1.5em;
    }
    
    @media screen and (max-width: 736px) {
        .icon.major {
            font-size: 1em;
        }
    }
    
    .icon.style1,
    .ai.style1 {
        color: #00ffcc;
        /*f2849e */
    }
    
    .icon.style2,
    .ai.style2 {
        color: #00f0ff;
    }
    
    .icon.style3,
    .ai.style3 {
        color: #76ddff;
    }
    
    .icon.style4,
    .ai.style4 {
        color: #ffffff;
    }
    /**/
    
    .ai {
        text-decoration: none;
        border-bottom: none;
        position: relative;
    }
    
    .ai:before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        text-transform: none !important;
        font-family: 'Academicons';
        font-weight: 400;
    }
    
    .ai>.label {
        display: none;
    }
    
    .ai.solid:before {
        font-weight: 600;
    }
    
    .ai.ai:before {
        font-family: 'Academicons';
    }
    /* Image */
    
    .image {
        border-radius: 3px;
        border: 0;
        display: inline-block;
        position: relative;
    }
    
    .image img {
        border-radius: 3px;
        display: block;
    }
    
    .image.left {
        float: left;
        margin: 0 2em 2em 0;
        top: 0.25em;
    }
    
    .image.right {
        float: right;
        margin: 0 0 2em 2em;
        top: 0.25em;
    }
    
    .image.center {
        float: center;
        margin: 0 0 0em 8em;
        top: 0.5em;
    }
    
    .image.left,
    .image.right {
        max-width: 30%;
    }
    
    .image.left img,
    .image.right img {
        width: 100%;
    }
    
    .image.fit {
        display: block;
        margin: 0 0 2em 0;
        width: 100%;
    }
    
    .image.fit img {
        width: 100%;
    }
    
    .image.fitI {
        display: block;
        margin: 0 0 0 0;
        width: 100%;
    }
    
    .image.fitI2 {
        display: flex;
        margin: 0 0 0 0;
        width: 100%;
    }
    
    .image.fitI img {
        width: 100%;
    }
    
    .image.fitII {
        display: block;
        margin-bottom: 2em;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .image.fitphoto {
        display: block;
        margin-bottom: 2em;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .image.fitphoto img {
        width: 100%;
    }
    
    .image.fitII img {
        width: 100%;
    }
    
    .image.fitIII {
        display: block;
        width: 40%;
        margin: 0 auto;
    }
    
    .image.fitIII img {
        width: 100%;
    }
    
    .image.fitIV {
        display: block;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 3em;
    }
    
    .image.fitIV img {
        width: 100%;
    }
    
    .image.crop {
        display: block;
        margin: 0 0 2em 0;
        width: 100%;
    }
    
    .image.crop img {
        width: 100%;
        padding-top: 100%;
        /* 1:1 Aspect Ratio */
    }
    
    .image.featured {
        display: block;
        margin: 0 0 2em 0;
        width: 100%;
    }
    
    .image.featured img {
        width: 100%;
    }
    
    @media screen and (max-width: 736px) {
        .image.featured {
            margin: 0 0 1em 0;
        }
    }
    
    .image.main {
        display: block;
        margin: 0 0 3em 0;
        width: 100%;
    }
    
    .image.main img {
        width: 100%;
    }
    
    .cropped1 {
        height: 30em;
        /* height of container */
        object-fit: cover;
    }
    /* List */
    
    ol {
        list-style: decimal;
        margin: 0 0 2em 0;
        padding-left: 1.25em;
    }
    
    ol li {
        padding-left: 0.25em;
    }
    
    ul {
        list-style: disc;
        margin: 0 0 2em 0;
        padding-left: 1em;
    }
    
    ul li {
        padding-left: 0.5em;
    }
    
    ul.alt {
        list-style: none;
        padding-left: 0;
    }
    
    ul.alt li {
        border-top: solid 1px #fff;
        padding: 0.5em 0;
    }
    
    ul.alt li:first-child {
        border-top: 0;
        padding-top: 0;
    }
    
    dl {
        margin: 0 0 2em 0;
    }
    /* Actions */
    
    ul.actions {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        cursor: default;
        list-style: none;
        margin-left: -1em;
        padding-left: 0;
    }
    
    ul.actions li {
        padding: 0 0 0 1em;
        vertical-align: middle;
    }
    
    ul.actions.special {
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        width: 100%;
        margin-left: 0;
    }
    
    ul.actions.special li:first-child {
        padding-left: 0;
    }
    
    ul.actions.stacked {
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-left: 0;
    }
    
    ul.actions.stacked li {
        padding: 1em 0 0 0;
    }
    
    ul.actions.stacked li:first-child {
        padding-top: 0;
    }
    
    ul.actions.fit {
        width: calc(100% + 1em);
    }
    
    ul.actions.fit li {
        -moz-flex-grow: 1;
        -webkit-flex-grow: 1;
        -ms-flex-grow: 1;
        flex-grow: 1;
        -moz-flex-shrink: 1;
        -webkit-flex-shrink: 1;
        -ms-flex-shrink: 1;
        flex-shrink: 1;
        width: 100%;
    }
    
    ul.actions.fit li>* {
        width: 100%;
    }
    
    ul.actions.fit.stacked {
        width: 100%;
    }
    
    @media screen and (max-width: 480px) {
        ul.actions:not(.fixed) {
            -moz-flex-direction: column;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            margin-left: 0;
            width: 100% !important;
        }
        ul.actions:not(.fixed) li {
            -moz-flex-grow: 1;
            -webkit-flex-grow: 1;
            -ms-flex-grow: 1;
            flex-grow: 1;
            -moz-flex-shrink: 1;
            -webkit-flex-shrink: 1;
            -ms-flex-shrink: 1;
            flex-shrink: 1;
            padding: 1em 0 0 0;
            text-align: center;
            width: 100%;
        }
        ul.actions:not(.fixed) li>* {
            width: 100%;
        }
        ul.actions:not(.fixed) li:first-child {
            padding-top: 0;
        }
        ul.actions:not(.fixed) li input[type="submit"],
        ul.actions:not(.fixed) li input[type="reset"],
        ul.actions:not(.fixed) li input[type="button"],
        ul.actions:not(.fixed) li button,
        ul.actions:not(.fixed) li .button {
            width: 100%;
        }
        ul.actions:not(.fixed) li input[type="submit"].icon:before,
        ul.actions:not(.fixed) li input[type="reset"].icon:before,
        ul.actions:not(.fixed) li input[type="button"].icon:before,
        ul.actions:not(.fixed) li button.icon:before,
        ul.actions:not(.fixed) li .button.icon:before {
            margin-left: -0.5em;
        }
    }
    /* Icons */
    
    ul.icons {
        cursor: default;
        list-style: none;
        padding-left: 0;
    }
    
    ul.icons li {
        display: inline-block;
        padding: 0 1em 0 0;
    }
    
    ul.icons li:last-child {
        padding-right: 0 !important;
    }
    
    ul.icons.major {
        padding: 1em 0;
    }
    
    ul.icons.major.s li {
        padding-right: 2em;
    }
    
    ul.icons.major li {
        padding-right: 3.5em;
    }
    
    @media screen and (max-width: 736px) {
        ul.icons.major li {
            padding: 0 1em !important;
        }
    }
    /* Table */
    
    .table-wrapper {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }
    
    table {
        margin: 0 0 2em 0;
        width: 100%;
    }
    
    table tbody tr {
        border: solid 1px #fff;
        border-left: 0;
        border-right: 0;
    }
    
    table tbody tr:nth-child(2n+1) {
        background-color: rgba(144, 144, 144, 0.25);
    }
    
    table td {
        padding: 0.75em 0.75em;
    }
    
    table th {
        color: #fff;
        font-size: 0.9em;
        font-weight: 600;
        padding: 0 0.75em 0.75em 0.75em;
        text-align: left;
    }
    
    table thead {
        border-bottom: solid 2px #fff;
    }
    
    table tfoot {
        border-top: solid 2px #fff;
    }
    
    table.alt {
        border-collapse: separate;
    }
    
    table.alt tbody tr td {
        border: solid 1px #fff;
        border-left-width: 0;
        border-top-width: 0;
    }
    
    table.alt tbody tr td:first-child {
        border-left-width: 1px;
    }
    
    table.alt tbody tr:first-child td {
        border-top-width: 1px;
    }
    
    table.alt thead {
        border-bottom: 0;
    }
    
    table.alt tfoot {
        border-top: 0;
    }
    /* Button */
    
    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    button,
    .button {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
        -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        background-color: transparent;
        border-radius: 3px;
        border: 0;
        box-shadow: inset 0 0 0 2px #fff;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-size: 0.8em;
        font-weight: 600;
        height: 3.125em;
        letter-spacing: 0.225em;
        line-height: 3.125em;
        max-width: 30em;
        padding: 0 2.75em;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover,
    button:hover,
    .button:hover {
        background-color: rgba(144, 144, 144, 0.25);
    }
    
    input[type="submit"]:active,
    input[type="reset"]:active,
    input[type="button"]:active,
    button:active,
    .button:active {
        background-color: rgba(144, 144, 144, 0.5);
    }
    
    input[type="submit"].icon:before,
    input[type="reset"].icon:before,
    input[type="button"].icon:before,
    button.icon:before,
    .button.icon:before {
        margin-right: 0.5em;
    }
    
    input[type="submit"].fit,
    input[type="reset"].fit,
    input[type="button"].fit,
    button.fit,
    .button.fit {
        width: 100%;
    }
    
    input[type="submit"].small,
    input[type="reset"].small,
    input[type="button"].small,
    button.small,
    .button.small {
        font-size: 0.7em;
    }
    
    button.small.s {
        font-size: 0.3em;
    }
    
    input[type="submit"].large,
    input[type="reset"].large,
    input[type="button"].large,
    button.large,
    .button.large {
        font-size: 1.35em;
    }
    
    input[type="submit"].primary,
    input[type="reset"].primary,
    input[type="button"].primary,
    button.primary,
    .button.primary {
        background-color: black;
        box-shadow: none !important;
        color: #ffffff !important;
    }
    
    .button.transparent {
        background-color: rgba(0, 0, 0, 0);
        box-shadow: none !important;
        color: #000000 !important;
        text-align: left;
        padding: 0;
    }
    
    .button.style1 {
        background-color: #9faeb2;
        box-shadow: none !important;
        color: #ffffff !important;
    }
    
    .button.style2 {
        background-color: #ffffff;
        box-shadow: none !important;
        color: #424242 !important;
    }
    
    input[type="submit"].primary:hover,
    input[type="reset"].primary:hover,
    input[type="button"].primary:hover,
    button.primary:hover,
    .button.primary:hover {
        background-color: #000000a7 !important;
    }
    
    .button.style1:hover {
        background-color: #434343a7 !important;
    }
    
    .button.style2:hover {
        background-color: #ffffffa7 !important;
    }
    
    input[type="submit"].primary:active,
    input[type="reset"].primary:active,
    input[type="button"].primary:active,
    button.primary:active,
    .button.primary:active {
        background-color: #091d2b !important;
    }
    
    .button.style1:active {
        background-color: #091d2b !important;
    }
    
    .button.style2:active {
        background-color: #8bc3cb !important;
    }
    
    input[type="submit"].disabled,
    input[type="submit"]:disabled,
    input[type="reset"].disabled,
    input[type="reset"]:disabled,
    input[type="button"].disabled,
    input[type="button"]:disabled,
    button.disabled,
    .button.disabled,
    .button:disabled {
        pointer-events: none;
        opacity: 0.25;
    }
    
    @media screen and (max-width: 736px) {
        input[type="submit"],
        input[type="reset"],
        input[type="button"],
        button,
        .button {
            height: 3.75em;
            line-height: 3.75em;
        }
        .button.primary {
            background-color: black;
            /* --style4 */
            box-shadow: none !important;
            color: #ffffff !important;
        }
        .button.style1 {
            background-color: #9faeb2;
            box-shadow: none !important;
            color: #ffffff !important;
        }
        .button.style2 {
            background-color: #ffffff;
            box-shadow: none !important;
            color: #424242 !important;
        }
    }
    /* Features */
    
    .features {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        list-style: none;
        padding: 0;
        width: 100%;
    }
    
    .features li {
        padding: 4em 4em 2em 6em;
        display: block;
        position: relative;
        text-align: left;
        width: 50%;
    }
    
    .features li:nth-child(1) {
        background-color: rgba(0, 0, 0, 0.035);
    }
    
    .features li:nth-child(2) {
        background-color: rgba(0, 0, 0, 0.07);
    }
    
    .features li:nth-child(3) {
        background-color: rgba(0, 0, 0, 0.105);
    }
    
    .features li:nth-child(4) {
        background-color: rgba(0, 0, 0, 0.14);
    }
    
    .features li:nth-child(5) {
        background-color: rgba(0, 0, 0, 0.175);
    }
    
    .features li:nth-child(6) {
        background-color: rgba(0, 0, 0, 0.21);
    }
    
    .features li:nth-child(7) {
        background-color: rgba(0, 0, 0, 0.245);
    }
    
    .features li:nth-child(8) {
        background-color: rgba(0, 0, 0, 0.28);
    }
    
    .features li:nth-child(9) {
        background-color: rgba(0, 0, 0, 0.315);
    }
    
    .features li:nth-child(10) {
        background-color: rgba(0, 0, 0, 0.35);
    }
    
    .features li:before {
        display: block;
        color: #00ffcc;
        position: absolute;
        left: 1.75em;
        top: 2.75em;
        font-size: 1.5em;
    }
    
    .features li:nth-child(1) {
        border-top-left-radius: 3px;
    }
    
    .features li:nth-child(2) {
        border-top-right-radius: 3px;
    }
    
    .features li:nth-last-child(1) {
        border-bottom-right-radius: 3px;
    }
    
    .features li:nth-last-child(2) {
        border-bottom-left-radius: 3px;
    }
    
    @media screen and (max-width: 980px) {
        .features li {
            padding: 3em 2em 1em 2em;
            text-align: center;
        }
        .features li:before {
            left: 0;
            margin: 0 0 1em 0;
            position: relative;
            top: 0;
        }
    }
    
    @media screen and (max-width: 736px) {
        .features li {
            padding: 3em 0 1em 0;
            background-color: transparent !important;
            border-top: solid 2px #fff;
            width: 100%;
        }
        .features li:first-child {
            border-top: 0;
        }
    }
    /* Spotlight */
    
    .spotlight {
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
    }
    
    .spotlight p {
        text-align: left;
    }
    
    .spotlight .image {
        -moz-order: 1;
        -webkit-order: 1;
        -ms-order: 1;
        order: 1;
        border-radius: 0;
        width: 40%;
    }
    
    .spotlight .image img {
        border-radius: 0;
        width: 100%;
    }
    
    .spotlight .content {
        padding: 2em 4em 0.1em 4em;
        -moz-order: 2;
        -webkit-order: 2;
        -ms-order: 2;
        order: 2;
        max-width: 48em;
        width: 60%;
    }
    
    .spotlight:nth-child(2n) {
        -moz-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
    
    .spotlight:nth-child(1) {
        background-color: rgba(0, 0, 0, 0.075);
    }
    
    .spotlight:nth-child(2) {
        background-color: rgba(0, 0, 0, 0.15);
    }
    
    .spotlight:nth-child(3) {
        background-color: rgba(0, 0, 0, 0.225);
    }
    
    .spotlight:nth-child(4) {
        background-color: rgba(0, 0, 0, 0.3);
    }
    
    .spotlight:nth-child(5) {
        background-color: rgba(0, 0, 0, 0.375);
    }
    
    .spotlight:nth-child(6) {
        background-color: rgba(0, 0, 0, 0.45);
    }
    
    .spotlight:nth-child(7) {
        background-color: rgba(0, 0, 0, 0.525);
    }
    
    .spotlight:nth-child(8) {
        background-color: rgba(0, 0, 0, 0.6);
    }
    
    .spotlight:nth-child(9) {
        background-color: rgba(0, 0, 0, 0.675);
    }
    
    .spotlight:nth-child(10) {
        background-color: rgba(0, 0, 0, 0.75);
    }
    
    @media screen and (max-width: 1280px) {
        .spotlight .image {
            width: 45%;
        }
        .spotlight .content {
            width: 55%;
        }
    }
    
    @media screen and (max-width: 980px) {
        .spotlight {
            display: block;
        }
        .spotlight br {
            display: none;
        }
        .spotlight .image {
            width: 100%;
        }
        .spotlight .content {
            padding: 4em 3em 2em 3em;
            max-width: none;
            text-align: center;
            width: 100%;
        }
    }
    
    @media screen and (max-width: 736px) {
        .spotlight .content {
            padding: 3em 2em 1em 2em;
        }
    }
    /* Wrapper - project id = wrapperproject */
    
    #wrapperproject>*>.inner {
        width: 100%;
        max-width: 68em;
        margin: 0 auto;
        padding: 5em 1em;
    }
    
    #wrapperproject h2 {
        color: #252525;
        text-align: center;
    }
    
    #wrapperproject h4 {
        color: white;
        text-align: center;
    }
    
    @media screen and (max-width: 736px) {
        #wrapperproject>*>.inner {
            padding: 2.5em 1em;
        }
    }
    /* Wrapper - singlepost */
    
    .wrappersinglepost {
        padding: 4em 0 4em 0;
    }
    
    .wrappersinglepost>.inner {
        width: 80em;
        margin: 0 auto;
    }
    
    @media screen and (max-width: 1280px) {
        .wrappersinglepost>.inner {
            width: 90%;
        }
    }
    
    @media screen and (max-width: 980px) {
        .wrappersinglepost>.inner {
            width: 100%;
        }
    }
    /* Wrapper - photography */
    
    .wrapperphoto {
        padding: 4em 0 4em 0;
    }
    
    .wrapperphoto>.inner {
        width: 80em;
        margin: 0 auto;
    }
    
    @media screen and (max-width: 1280px) {
        .wrapperphoto>.inner {
            width: 90%;
        }
    }
    
    @media screen and (max-width: 980px) {
        .wrapperphoto>.inner {
            width: 100%;
        }
    }
    /* Wrapper - masonry */
    
    .wrappermasonry {
        display: grid;
        padding: 1.5em;
        margin-right: auto;
        margin-left: auto;
    }
    
    .wrappermasonry>.inner {
        width: 80em;
        margin: 0 auto;
    }
    
    @media screen and (max-width: 1280px) {
        .wrappermasonry>.inner {
            width: 90%;
        }
    }
    
    @media screen and (max-width: 980px) {
        .wrappermasonry>.inner {
            width: 100%;
        }
    }
    /* Wrapper - drawing */
    
    .wrapperdrawing {
        padding: 4em 0 4em 0;
        background-color: #f7f7f7;
    }
    
    .wrapperdrawing>.inner {
        width: 80em;
        margin: 0 auto;
    }
    
    @media screen and (max-width: 1280px) {
        .wrapperdrawing>.inner {
            width: 90%;
        }
    }
    
    @media screen and (max-width: 980px) {
        .wrapperdrawing>.inner {
            width: 100%;
        }
    }
    /* Wrapper */
    
    .wrapper {
        padding: 6em 0 4em 0;
    }
    
    .wrapper>.inner {
        width: 60em;
        margin: 0 auto;
        margin-bottom: 3em;
    }
    
    @media screen and (max-width: 1280px) {
        .wrapper>.inner {
            width: 90%;
        }
    }
    
    @media screen and (max-width: 980px) {
        .wrapper>.inner {
            width: 90%;
        }
    }
    
    .wrapper.alt {
        padding: 3em 1em 1em 1em;
    }
    
    .wrapper.style6 {
        background-color: #f8d300;
        padding: 1em 0 1em 0;
    }
    
    .wrapper.style7 {
        background-color: #0d142a;
        padding: 1em 0 1em 0;
    }
    
    .wrapper.pro {
        padding: 1em 0 1em 0;
    }
    
    .wrapper.photo {
        padding-top: 1em;
    }
    /* *************************************************************** */
    
    .wrapper.style-social {
        text-align: center;
        background-color: #f3f3f3;
        color: #c8ece9;
    }
    
    .wrapper.style-social strong,
    .wrapper.style-social b {
        color: #363636;
    }
    
    #p1 {
        margin: 0;
    }
    
    #p2 {
        margin: 0;
        color: #f8d300;
    }
    
    .wrapper.style-social h2,
    .wrapper.style-social h3,
    .wrapper.style-social h4,
    .wrapper.style-social h5,
    .wrapper.style-social h6 {
        color: #363636;
    }
    
    .wrapper.style-social hr {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style-social blockquote {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style-social code {
        background: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style-social header p {
        color: #363636;
    }
    
    .wrapper.style-social header.major h2,
    .wrapper.style-social header.major h3,
    .wrapper.style-social header.major h4,
    .wrapper.style-social header.major h5,
    .wrapper.style-social header.major h6 {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style-social header.major p {
        color: #363636;
    }
    
    .wrapper.style-social label {
        color: #363636;
    }
    
    .wrapper.style-social input[type="text"],
    .wrapper.style-social input[type="password"],
    .wrapper.style-social input[type="email"],
    .wrapper.style-social select,
    .wrapper.style-social textarea {
        background-color: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style-social select {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(0, 0, 0, 0.125)' /%3E%3C/svg%3E");
    }
    
    .wrapper.style-social select option {
        color: #ffffff;
        background: #21b2a6;
    }
    
    .wrapper.style-social input[type="checkbox"]+label,
    .wrapper.style-social input[type="radio"]+label {
        color: #c8ece9;
    }
    
    .wrapper.style-social input[type="checkbox"]+label:before,
    .wrapper.style-social input[type="radio"]+label:before {
        background: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style-social input[type="checkbox"]:checked+label:before,
    .wrapper.style-social input[type="radio"]:checked+label:before {
        background: #ffffff;
        color: #21b2a6;
    }
    
    .wrapper.style-social ::-webkit-input-placeholder {
        color: #a6e0db !important;
    }
    
    .wrapper.style-social :-moz-placeholder {
        color: #a6e0db !important;
    }
    
    .wrapper.style-social ::-moz-placeholder {
        color: #a6e0db !important;
    }
    
    .wrapper.style-social :-ms-input-placeholder {
        color: #a6e0db !important;
    }
    
    .wrapper.style-social .formerize-placeholder {
        color: #a6e0db !important;
    }
    
    .wrapper.style-social .icon.major {
        border-color: rgba(0, 0, 0, 0.125);
    }
    /* .wrapper.style-social .icons {
				font-size: 1.25em;
			} */
    
    .wrapper.style-social .icons a {
        color: #363636;
    }
    
    .wrapper.style-social .icons a:hover {
        color: #36363680;
    }
    
    .wrapper.style-social ul.alt li {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style-social table tbody tr {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style-social table tbody tr:nth-child(2n+1) {
        background-color: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style-social table th {
        color: #ffffff;
    }
    
    .wrapper.style-social table thead {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style-social table tfoot {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style-social table.alt tbody tr td {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style-social input[type="submit"],
    .wrapper.style-social input[type="reset"],
    .wrapper.style-social input[type="button"],
    .wrapper.style-social button,
    .wrapper.style-social .button {
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.125);
        color: #ffffff;
    }
    
    .wrapper.style-social input[type="submit"]:hover,
    .wrapper.style-social input[type="reset"]:hover,
    .wrapper.style-social input[type="button"]:hover,
    .wrapper.style-social button:hover,
    .wrapper.style-social .button:hover {
        background-color: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style-social input[type="submit"]:active,
    .wrapper.style-social input[type="reset"]:active,
    .wrapper.style-social input[type="button"]:active,
    .wrapper.style-social button:active,
    .wrapper.style-social .button:active {
        background-color: rgba(255, 255, 255, 0.2);
    }
    
    @media screen and (max-width: 736px) {
        .wrapper.style-social .features li {
            border-top-color: rgba(0, 0, 0, 0.125);
        }
        .wrapper.style-social .icons {
            font-size: 0.7em;
        }
        .wrapper.style-social p {
            font-size: 0.9em;
        }
    }
    /* ************************************************************************************************************************ */
    /* 极简风 style1 全白 */
    
    .wrapper.style1 {
        background-color: white;
        /* color: black; */
    }
    
    .wrapper.style1 strong,
    .wrapper.style1 b {
        color: black;
    }
    
    .wrapper.style1 h2,
    .wrapper.style1 h3,
    .wrapper.style1 h4,
    .wrapper.style1 h5,
    .wrapper.style1 h6 {
        color: black;
    }
    
    .wrapper.style1 hr {
        border-color: black;
    }
    
    .wrapper.style1 blockquote {
        border-color: black;
    }
    
    .wrapper.style1 code {
        background: var(--s1-codecolor);
    }
    /* Wrapper style1 header */
    
    .wrapper.style1 header p {
        color: black;
    }
    
    .wrapper.style1 header.major h2,
    .wrapper.style1 header.major h3,
    .wrapper.style1 header.major h4,
    .wrapper.style1 header.major h5,
    .wrapper.style1 header.major h6 {
        border-color: black;
    }
    
    .wrapper.style1 header.major p {
        color: black;
    }
    
    .wrapper.style1 label {
        color: var(--s1labelcolor);
    }
    /* Wrapper sytl1 input */
    
    .wrapper.style1 input[type="text"],
    .wrapper.style1 input[type="password"],
    .wrapper.style1 input[type="email"],
    .wrapper.style1 select,
    .wrapper.style1 textarea {
        background-color: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style1 select {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(0, 0, 0, 0.125)' /%3E%3C/svg%3E");
    }
    
    .wrapper.style1 select option {
        color: #ffffff;
        background: #21b2a6;
    }
    
    .wrapper.style1 input[type="checkbox"]+label,
    .wrapper.style1 input[type="radio"]+label {
        color: #c8ece9;
    }
    
    .wrapper.style1 input[type="checkbox"]+label:before,
    .wrapper.style1 input[type="radio"]+label:before {
        background: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style1 input[type="checkbox"]:checked+label:before,
    .wrapper.style1 input[type="radio"]:checked+label:before {
        background: #ffffff;
        color: #21b2a6;
    }
    
    .wrapper.style1 ::-webkit-input-placeholder {
        color: #a6e0db !important;
    }
    
    .wrapper.style1 :-moz-placeholder {
        color: #a6e0db !important;
    }
    
    .wrapper.style1 ::-moz-placeholder {
        color: #a6e0db !important;
    }
    
    .wrapper.style1 :-ms-input-placeholder {
        color: #a6e0db !important;
    }
    
    .wrapper.style1 .formerize-placeholder {
        color: #a6e0db !important;
    }
    
    .wrapper.style1 .icon.major {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style1 ul.alt li {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style1 table tbody tr {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style1 table tbody tr:nth-child(2n+1) {
        background-color: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style1 table th {
        color: #ffffff;
    }
    
    .wrapper.style1 table thead {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style1 table tfoot {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style1 table.alt tbody tr td {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style1 input[type="submit"],
    .wrapper.style1 input[type="reset"],
    .wrapper.style1 input[type="button"],
    .wrapper.style1 button,
    .wrapper.style1 .button {
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.125);
        color: #ffffff;
    }
    
    .wrapper.style1 input[type="submit"]:hover,
    .wrapper.style1 input[type="reset"]:hover,
    .wrapper.style1 input[type="button"]:hover,
    .wrapper.style1 button:hover,
    .wrapper.style1 .button:hover {
        background-color: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style1 input[type="submit"]:active,
    .wrapper.style1 input[type="reset"]:active,
    .wrapper.style1 input[type="button"]:active,
    .wrapper.style1 button:active,
    .wrapper.style1 .button:active {
        background-color: rgba(255, 255, 255, 0.2);
    }
    
    @media screen and (max-width: 736px) {
        .wrapper.style1 .features li {
            border-top-color: black;
        }
        .wrapper.style1 .icons {
            font-size: 0.7em;
        }
        .wrapper.style1 p {
            font-size: 0.9em;
        }
    }
    /* ************************************************************************************************************************ */
    
    .wrapper.style2 {
        background-color: #2e3842;
    }
    
    .wrapper.style2 h2,
    h3,
    h4,
    h5,
    h6,
    p {
        color: #ffffff;
    }
    
    .wrapper.style2 strong {
        color: #ffffff;
        font-weight: 800;
    }
    
    .wrapper.style2 p {
        font-size: 0.9em;
    }
    
    .wrapper.style2 p>a,
    strong>a {
        -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
        -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
        -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
        transition: color 0.2s ease, border-bottom-color 0.2s ease;
        border-bottom: solid 1px;
        border-bottom-color: #ffffff;
        color: inherit;
        text-decoration: none;
    }
    
    .wrapper.style2 p>a:hover,
    strong>a:hover {
        border-bottom-color: #ffffff98;
    }
    
    .wrapper.style2 ::-webkit-input-placeholder {
        color: #a6e0db !important;
    }
    
    .wrapper.style2 :-moz-placeholder {
        color: #a6e0db !important;
    }
    
    .wrapper.style2 ::-moz-placeholder {
        color: #a6e0db !important;
    }
    
    .wrapper.style2 :-ms-input-placeholder {
        color: #a6e0db !important;
    }
    
    .wrapper.style2 .formerize-placeholder {
        color: #a6e0db !important;
    }
    
    .wrapper.style2 .icon.major {
        border-color: rgba(255, 255, 255, 0.4);
    }
    
    .wrapper.style2 ul.alt li {
        border-color: rgba(255, 255, 255, 0.4);
    }
    
    .wrapper.style2 table tbody tr {
        border-color: rgba(255, 255, 255, 0.4);
    }
    
    .wrapper.style2 table tbody tr:nth-child(2n+1) {
        background-color: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style2 table th {
        color: #ffffff;
    }
    
    .wrapper.style2 table thead {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style2 table tfoot {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style2 table.alt tbody tr td {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style2 input[type="submit"],
    .wrapper.style2 input[type="reset"],
    .wrapper.style2 input[type="button"],
    .wrapper.style2 button,
    .wrapper.style2 .button {
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.125);
        color: #ffffff;
    }
    
    .wrapper.style2 input[type="submit"]:hover,
    .wrapper.style2 input[type="reset"]:hover,
    .wrapper.style2 input[type="button"]:hover,
    .wrapper.style2 button:hover,
    .wrapper.style2 .button:hover {
        background-color: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style2 input[type="submit"]:active,
    .wrapper.style2 input[type="reset"]:active,
    .wrapper.style2 input[type="button"]:active,
    .wrapper.style2 button:active,
    .wrapper.style2 .button:active {
        background-color: rgba(255, 255, 255, 0.2);
    }
    
    @media screen and (max-width: 736px) {
        .wrapper.style2 .features li {
            border-top-color: rgba(0, 0, 0, 0.125);
        }
    }
    /* ************************************************************************************************************************ */
    
    .wrapper.style3 {
        background-color: #f8f8f8;
        color: #363636;
    }
    
    .wrapper.style3 strong,
    .wrapper.style3 b {
        color: #363636;
    }
    
    .wrapper.style3 h2,
    .wrapper.style3 h3,
    .wrapper.style3 h4,
    .wrapper.style3 h5,
    .wrapper.style3 h6,
    .wrapper.style3 p {
        color: #363636;
    }
    
    .wrapper.style3 hr {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style3 blockquote {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style3 code {
        background: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style3 header p {
        color: #363636;
    }
    
    .wrapper.style3 header.major h2,
    .wrapper.style3 header.major h3,
    .wrapper.style3 header.major h4,
    .wrapper.style3 header.major h5,
    .wrapper.style3 header.major h6 {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style3 header.major p {
        color: #363636;
    }
    
    .wrapper.style3 label {
        color: #363636;
    }
    
    .wrapper.style3 input[type="text"],
    .wrapper.style3 input[type="password"],
    .wrapper.style3 input[type="email"],
    .wrapper.style3 select,
    .wrapper.style3 textarea {
        background-color: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style3 select {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(0, 0, 0, 0.125)' /%3E%3C/svg%3E");
    }
    
    .wrapper.style3 select option {
        color: #363636;
        background: #505393;
    }
    
    .wrapper.style3 input[type="checkbox"]+label,
    .wrapper.style3 input[type="radio"]+label {
        color: #363636;
    }
    
    .wrapper.style3 input[type="checkbox"]+label:before,
    .wrapper.style3 input[type="radio"]+label:before {
        background: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style3 input[type="checkbox"]:checked+label:before,
    .wrapper.style3 input[type="radio"]:checked+label:before {
        background: #ffffff;
        color: #363636;
    }
    
    .wrapper.style3 ::-webkit-input-placeholder {
        color: #b9bad4 !important;
    }
    
    .wrapper.style3 :-moz-placeholder {
        color: #b9bad4 !important;
    }
    
    .wrapper.style3 ::-moz-placeholder {
        color: #b9bad4 !important;
    }
    
    .wrapper.style3 :-ms-input-placeholder {
        color: #b9bad4 !important;
    }
    
    .wrapper.style3 .formerize-placeholder {
        color: #b9bad4 !important;
    }
    
    .wrapper.style3 .icon.major {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style3 ul.alt li {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style3 table tbody tr {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style3 table tbody tr:nth-child(2n+1) {
        background-color: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style3 table th {
        color: #363636;
    }
    
    .wrapper.style3 table thead {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style3 table tfoot {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style3 table.alt tbody tr td {
        border-color: rgba(0, 0, 0, 0.125);
    }
    
    .wrapper.style3 input[type="submit"],
    .wrapper.style3 input[type="reset"],
    .wrapper.style3 input[type="button"],
    .wrapper.style3 button,
    .wrapper.style3 .button {
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.125);
        color: #ffffff;
    }
    
    .wrapper.style3 input[type="submit"]:hover,
    .wrapper.style3 input[type="reset"]:hover,
    .wrapper.style3 input[type="button"]:hover,
    .wrapper.style3 button:hover,
    .wrapper.style3 .button:hover {
        background-color: rgba(255, 255, 255, 0.075);
    }
    
    .wrapper.style3 input[type="submit"]:active,
    .wrapper.style3 input[type="reset"]:active,
    .wrapper.style3 input[type="button"]:active,
    .wrapper.style3 button:active,
    .wrapper.style3 .button:active {
        background-color: rgba(255, 255, 255, 0.2);
    }
    
    @media screen and (max-width: 736px) {
        .wrapper.style3 .features li {
            border-top-color: rgba(0, 0, 0, 0.125);
        }
    }
    /* ************************************************************************************************************************ */
    
    .wrapper.style4 {
        background-color: transparent;
    }
    
    .wrapper.style4 h4 {
        color: #4E4852;
    }
    /* ************************************************************************************************************************ */
    /* Project page */
    
    .wrapper.style5 {
        background-color: #ffffff;
        color: #4E4852;
    }
    
    .wrapper.style5 strong,
    .wrapper.style5 b {
        color: #252525;
    }
    
    .wrapper.style5 h2,
    .wrapper.style5 h3,
    .wrapper.style5 h4,
    .wrapper.style5 h5,
    .wrapper.style5 h6,
    .wrapper.style5 p {
        color: #252525;
    }
    
    p#credit-p {
        color: grey;
        font-size: 0.5em;
        line-height: initial;
        margin: 1.5em 0 0 0;
    }
    
    .wrapper.style5 h5 {
        font-weight: normal;
    }
    
    .wrapper.style5 hr {
        border-color: #dfdfdf;
    }
    
    .wrapper.style5 blockquote {
        border-color: #dfdfdf;
    }
    
    .wrapper.style5 code {
        background: rgba(0, 0, 0, 0.0375);
    }
    
    .wrapper.style5 p>a {
        -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
        -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
        -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
        transition: color 0.2s ease, border-bottom-color 0.2s ease;
        border-bottom: solid 1px;
        border-bottom-color: #252525;
        color: inherit;
        text-decoration: none;
    }
    
    .wrapper.style5 p>a:hover {
        border-bottom-color: #25252560;
    }
    
    .wrapper.style5 header.major h2,
    .wrapper.style5 header.major h3,
    .wrapper.style5 header.major h4,
    .wrapper.style5 header.major h5,
    .wrapper.style5 header.major h6 {
        border-color: #dfdfdf;
    }
    
    .wrapper.style5 header.major p {
        color: #4E4852;
    }
    
    .wrapper.style5 label {
        color: #2E3842;
    }
    
    .wrapper.style5 input[type="text"],
    .wrapper.style5 input[type="password"],
    .wrapper.style5 input[type="email"],
    .wrapper.style5 select,
    .wrapper.style5 textarea {
        background-color: rgba(0, 0, 0, 0.0375);
    }
    
    .wrapper.style5 select {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23dfdfdf' /%3E%3C/svg%3E");
    }
    
    .wrapper.style5 select option {
        color: #2E3842;
        background: #ffffff;
    }
    
    .wrapper.style5 input[type="checkbox"]+label,
    .wrapper.style5 input[type="radio"]+label {
        color: #4E4852;
    }
    
    .wrapper.style5 input[type="checkbox"]+label:before,
    .wrapper.style5 input[type="radio"]+label:before {
        background: rgba(0, 0, 0, 0.0375);
    }
    
    .wrapper.style5 input[type="checkbox"]:checked+label:before,
    .wrapper.style5 input[type="radio"]:checked+label:before {
        background: #2E3842;
        color: #ffffff;
    }
    
    .wrapper.style5 ::-webkit-input-placeholder {
        color: #8E8892 !important;
    }
    
    .wrapper.style5 :-moz-placeholder {
        color: #8E8892 !important;
    }
    
    .wrapper.style5 ::-moz-placeholder {
        color: #8E8892 !important;
    }
    
    .wrapper.style5 :-ms-input-placeholder {
        color: #8E8892 !important;
    }
    
    .wrapper.style5 .formerize-placeholder {
        color: #8E8892 !important;
    }
    
    .wrapper.style5 .icon.major {
        border-color: #dfdfdf;
    }
    
    .wrapper.style5 ul.alt li {
        border-color: #dfdfdf;
    }
    
    .wrapper.style5 table tbody tr {
        border-color: #dfdfdf;
    }
    
    .wrapper.style5 table tbody tr:nth-child(2n+1) {
        background-color: rgba(0, 0, 0, 0.0375);
    }
    
    .wrapper.style5 table th {
        color: #2E3842;
    }
    
    .wrapper.style5 .inner h3 {
        /* font-size: 2em; */
        padding-bottom: 0em;
        margin-bottom: 0;
    }
    
    .wrapper.style5 .inner p,
    ul {
        font-size: 0.9em;
    }
    
    .wrapper.style5 table thead {
        border-color: #dfdfdf;
    }
    
    .wrapper.style5 table tfoot {
        border-color: #dfdfdf;
    }
    
    .wrapper.style5 table.alt tbody tr td {
        border-color: #dfdfdf;
    }
    
    .wrapper.style5 input[type="submit"],
    .wrapper.style5 input[type="reset"],
    .wrapper.style5 input[type="button"],
    .wrapper.style5 button,
    .wrapper.style5 .button {
        box-shadow: inset 0 0 0 2px #dfdfdf;
        color: #2E3842;
    }
    
    .wrapper.style5 input[type="submit"]:hover,
    .wrapper.style5 input[type="reset"]:hover,
    .wrapper.style5 input[type="button"]:hover,
    .wrapper.style5 button:hover,
    .wrapper.style5 .button:hover {
        background-color: rgba(0, 0, 0, 0.0375);
    }
    
    .wrapper.style5 input[type="submit"]:active,
    .wrapper.style5 input[type="reset"]:active,
    .wrapper.style5 input[type="button"]:active,
    .wrapper.style5 button:active,
    .wrapper.style5 .button:active {
        background-color: rgba(0, 0, 0, 0.1);
    }
    
    @media screen and (max-width: 736px) {
        .wrapper.style5 .features li {
            border-top-color: #dfdfdf;
        }
    }
    
    @media screen and (max-width: 980px) {
        .wrapper {
            padding: 4em 3em 2em 3em;
        }
    }
    
    @media screen and (max-width: 736px) {
        .wrapper {
            padding: 3em 2em 1em 2em;
        }
    }
    
    #publicationpage a {
        -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
        -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
        -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
        transition: color 0.2s ease, border-bottom-color 0.2s ease;
        border-bottom: 0;
        color: inherit;
        text-decoration: none;
    }
    
    #publicationpage h5 a:hover {
        border-bottom: solid 0.7px #252525;
    }
    
    #publicationpage h5 {
        font-size: 0.95em;
        line-height: 1.5em;
        letter-spacing: 0.11em;
        margin: 0;
    }
    
    #publicationpage p {
        font-size: 0.8em;
        color: #686868;
        letter-spacing: 0.11em;
    }
    /* BlogWrapper */
    
    #blogwrapper {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        -moz-transition: opacity 0.5s ease;
        -webkit-transition: opacity 0.5s ease;
        -ms-transition: opacity 0.5s ease;
        transition: opacity 0.5s ease;
        margin: 0 auto;
        max-width: 100%;
        opacity: 1;
        padding: 4.5em;
        width: 90em;
    }
    
    #blogwrapper * {
        color: #363636;
    }
    
    body.is-menu-visible #blogwrapper {
        opacity: 0.15;
    }
    
    @media screen and (max-width: 1680px) {
        #blogwrapper {
            padding: 3em;
        }
    }
    
    @media screen and (max-width: 1280px) {
        #blogwrapper {
            display: block;
        }
    }
    
    @media screen and (max-width: 736px) {
        #blogwrapper {
            padding: 1.5em;
        }
    }
    
    body.single #blogwrapper {
        display: block;
    }
    /* Intro */
    
    #intro header h2 {
        font-size: 2em;
        font-weight: 900;
    }
    
    #intro header p {
        font-size: 0.8em;
    }
    
    @media screen and (max-width: 1280px) {
        #intro {
            margin: 0 0 3em 0;
            text-align: center;
        }
        #intro header h2 {
            font-size: 2em;
        }
        #intro header p {
            font-size: 0.7em;
        }
    }
    
    @media screen and (max-width: 736px) {
        #intro {
            margin: 0 0 1.5em 0;
            padding: 1.25em 0;
        }
        #intro> :last-child {
            margin-bottom: 0;
        }
        #intro .logo {
            margin: 0 0 0.5em 0;
        }
        #intro header h2 {
            font-size: 1.25em;
        }
        #intro header> :last-child {
            margin-bottom: 0;
        }
    }
    /* Sidebar */
    
    #sidebar {
        margin-right: 3em;
        min-width: 22em;
        width: 22em;
    }
    
    #sidebar>* {
        border-top: solid 1px rgba(160, 160, 160, 0.3);
        margin: 3em 0 0 0;
        padding: 3em 0 0 0;
    }
    
    #sidebar> :first-child {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }
    
    @media screen and (max-width: 1280px) {
        #sidebar {
            border-top: solid 1px rgba(160, 160, 160, 0.3);
            margin: 3em 0 0 0;
            min-width: 0;
            padding: 3em 0 0 0;
            width: 100%;
            overflow-x: hidden;
        }
    }
    /* Page Wrapper + Menu */
    
    #page-wrapper {
        -moz-transition: opacity 0.5s ease;
        -webkit-transition: opacity 0.5s ease;
        -ms-transition: opacity 0.5s ease;
        transition: opacity 0.5s ease;
        opacity: 1;
        padding-top: 3em;
    }
    
    #page-wrapper:before {
        background: rgba(0, 0, 0, 0);
        content: '';
        display: block;
        display: none;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10001;
    }
    
    #menu {
        -moz-transform: translateX(22em);
        -webkit-transform: translateX(22em);
        -ms-transform: translateX(22em);
        transform: translateX(22em);
        -moz-transition: -moz-transform 0.45s ease, visibility 0.45s;
        -webkit-transition: -webkit-transform 0.45s ease, visibility 0.45s;
        -ms-transition: -ms-transform 0.45s ease, visibility 0.45s;
        transition: transform 0.45s ease, visibility 0.45s;
        position: fixed;
        top: 0;
        right: 0;
        width: 22em;
        max-width: 80%;
        height: 100%;
        -webkit-overflow-scrolling: touch;
        background: #44c4a8ea;
        color: #ffffff;
        cursor: default;
        visibility: hidden;
        z-index: 10002;
    }
    
    #menu>.inner {
        -moz-transition: opacity 0.45s ease;
        -webkit-transition: opacity 0.45s ease;
        -ms-transition: opacity 0.45s ease;
        transition: opacity 0.45s ease;
        -webkit-overflow-scrolling: touch;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 2.75em;
        opacity: 0;
        overflow-y: auto;
    }
    
    #menu>.inner>ul {
        list-style: none;
        margin: 0 0 1em 0;
        padding: 0;
    }
    
    #menu>.inner>ul>li {
        padding: 0;
        border-top: solid 1px #ffffff26;
    }
    
    #menu>.inner>ul>li a {
        display: block;
        padding: 1em 0;
        line-height: 1.5;
        border: 0;
        color: inherit;
    }
    
    #menu>.inner>ul>li:first-child {
        border-top: 0;
        margin-top: -1em;
    }
    
    #menu>.close {
        -moz-transition: opacity 0.45s ease, -moz-transform 0.45s ease;
        -webkit-transition: opacity 0.45s ease, -webkit-transform 0.45s ease;
        -ms-transition: opacity 0.45s ease, -ms-transform 0.45s ease;
        transition: opacity 0.45s ease, transform 0.45s ease;
        -moz-transform: scale(0.25) rotate(180deg);
        -webkit-transform: scale(0.25) rotate(180deg);
        -ms-transform: scale(0.25) rotate(180deg);
        transform: scale(0.25) rotate(180deg);
        -webkit-tap-highlight-color: transparent;
        display: block;
        position: absolute;
        top: 2em;
        left: -6em;
        width: 6em;
        text-indent: 6em;
        height: 3em;
        border: 0;
        font-size: 1em;
        opacity: 0;
        overflow: hidden;
        padding: 0;
        white-space: nowrap;
    }
    
    #menu>.close:before,
    #menu>.close:after {
        -moz-transition: opacity 0.2s ease;
        -webkit-transition: opacity 0.2s ease;
        -ms-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 2em 2em;
    }
    
    #menu>.close:before {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %2300ffcc%3B %7D%3C/style%3E%3Cline x1='15' y1='15' x2='85' y2='85' /%3E%3Cline x1='85' y1='15' x2='15' y2='85' /%3E%3C/svg%3E");
        opacity: 0;
    }
    
    #menu>.close:after {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23585858%3B %7D%3C/style%3E%3Cline x1='15' y1='15' x2='85' y2='85' /%3E%3Cline x1='85' y1='15' x2='15' y2='85' /%3E%3C/svg%3E");
        opacity: 1;
    }
    
    #menu>.close:hover:before {
        opacity: 1;
    }
    
    #menu>.close:hover:after {
        opacity: 0;
    }
    
    @media screen and (max-width: 736px) {
        #menu {
            -moz-transform: translateX(16.5em);
            -webkit-transform: translateX(16.5em);
            -ms-transform: translateX(16.5em);
            transform: translateX(16.5em);
            width: 16.5em;
            background: #44c4a8ea;
            color: #ffffff;
        }
        #menu>.inner {
            padding: 2.75em 1.5em;
        }
        #menu>.close {
            top: 0.5em;
            left: -4.25em;
            width: 4.25em;
            text-indent: 4.25em;
        }
        #menu>.close:before,
        #menu>.close:after {
            background-size: 1.5em 1.5em;
        }
    }
    
    body.is-menu-visible #wrapper {
        pointer-events: none;
        cursor: default;
        opacity: 0.25;
    }
    
    body.is-menu-visible #menu {
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        visibility: visible;
    }
    
    body.is-menu-visible #menu>* {
        opacity: 1;
    }
    
    body.is-menu-visible #menu .close {
        -moz-transform: scale(1.0) rotate(0deg);
        -webkit-transform: scale(1.0) rotate(0deg);
        -ms-transform: scale(1.0) rotate(0deg);
        transform: scale(1.0) rotate(0deg);
        opacity: 1;
    }
    /* body.is-menu-visible #page-wrapper {
		opacity: 0.35;
	}

		body.is-menu-visible #page-wrapper:before {
			display: block;
		}

	body.is-menu-visible #menu {
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	} */
    
    #menu .menu-divider {
        border: 0;
        /* border-top: 1px solid rgba(255, 255, 255, 0.35); */
        margin: 1.5em 0;
    }
    
    #menu .menu-social {
        display: flex;
        align-items: center;
        gap: 1.25em;
        list-style: none;
        padding: 0;
    }
    
    #menu .menu-social li {
        padding: 0;
        border: 0;
    }
    
    #menu .menu-social>li {
        border: none !important;
    }
    /* Header */
    
    #menu .menu-social a {
        display: block;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 0;
        color: inherit;
    }
    
    #menu .menu-social a::before {
        font-size: 1.6rem;
        line-height: 1.2;
    }
    /* Slightly smaller to visually balance the broader book shape. */
    
    #menu .menu-social .fa-book::before {
        font-size: 1.35rem;
    }
    
    #header {
        -moz-transition: background-color 0.2s ease;
        -webkit-transition: background-color 0.2s ease;
        -ms-transition: background-color 0.2s ease;
        transition: background-color 0.2s ease;
        background: #ffffff;
        height: 3.5em;
        left: 0;
        line-height: 3em;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10000;
    }
    
    #header h1 {
        -moz-transition: opacity 0.2s ease;
        -webkit-transition: opacity 0.2s ease;
        -ms-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
        height: inherit;
        left: 1.25em;
        line-height: inherit;
        position: absolute;
        top: 0;
    }
    
    #header h1 a {
        border: 0;
        display: block;
        height: inherit;
        line-height: inherit;
    }
    
    #header .logo {
        display: block;
        border-bottom: 0;
        color: inherit;
        font-weight: 900;
        margin: 0 0 2.5em 0;
        display: inline-block;
        padding: 0.5em 0 0 calc(10%);
    }
    
    #header h1 a img {
        display: block;
        width: 2em;
        height: 2em;
    }
    
    @media screen and (max-width: 736px) {
        #header h1 a {
            font-size: 0.8em;
        }
    }
    /* 
			#header .logo > * {
				display: inline-block;
				vertical-align: middle;
			}*/
    
    #header nav {
        height: inherit;
        line-height: inherit;
        position: absolute;
        right: 0;
        top: 0;
    }
    
    #header nav>ul {
        list-style: none;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }
    
    #header nav>ul>li {
        display: inline-block;
        padding: 0;
    }
    
    #header nav>ul>li>a {
        border: 0;
        color: #fff;
        display: block;
        font-size: 0.8em;
        letter-spacing: 0.225em;
        padding: 0 1.5em;
        text-transform: uppercase;
    }
    
    #header nav>ul>li>a.menuToggle {
        outline: 0;
        position: relative;
    }
    
    #header nav>ul>li>a.menuToggle:after {
        /*Menu close button*/
        background-image: url("images/bars-b.svg");
        background-position: right center;
        background-repeat: no-repeat;
        content: '';
        display: inline-block;
        height: 3.75em;
        vertical-align: top;
        width: 2em;
    }
    
    @media screen and (max-width: 736px) {
        #header nav>ul>li>a.menuToggle {
            padding: 0 1.5em;
        }
        #header nav>ul>li>a.menuToggle span {
            display: none;
        }
    }
    
    @media screen and (max-width: 736px) {
        #header nav>ul>li>a {
            padding: 0 0 0 1.5em;
        }
    }
    
    #header nav>ul>li:first-child {
        margin-left: 0;
    }
    
    #header.alt {
        background: transparent;
    }
    
    #header.alt h1 {
        pointer-events: none;
        opacity: 0;
    }
    /* Banner */
    
    #banner {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        cursor: default;
        height: 100vh;
        min-height: 35em;
        overflow: hidden;
        position: relative;
        text-align: center;
    }
    
    #banner h2 {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
        transition: transform 0.8s ease, opacity 0.5s ease;
        display: inline-block;
        font-size: 7em;
        opacity: 1;
        padding: 0.35em 1em;
        position: relative;
        z-index: 1;
        margin-bottom: 0;
        letter-spacing: 0.5em;
        line-height: 1em;
    }
    
    #banner h2,
    h3,
    p {
        color: #ffffff;
    }
    
    #banner h2:before,
    #banner h2:after {
        -moz-transition: width 0.4s ease;
        -webkit-transition: width 0.4s ease;
        -ms-transition: width 0.4s ease;
        transition: width 0.4s ease;
        -moz-transition-delay: 0.2s;
        -webkit-transition-delay: 0.2s;
        -ms-transition-delay: 0.2s;
        transition-delay: 0.2s;
        /* background: #fff; */
        content: '';
        display: block;
        height: 3px;
        position: absolute;
        width: 100%;
    }
    
    #banner h2:before {
        top: 0;
        left: 0;
    }
    
    #banner h2:after {
        bottom: 0;
        right: 0;
    }
    
    #banner p {
        letter-spacing: 0.3em;
        /* text-transform: uppercase; */
    }
    
    #banner p a {
        color: inherit;
    }
    
    #banner .more {
        -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
        transition: transform 0.5s ease, opacity 0.5s ease;
        -moz-transition-delay: 2s;
        -webkit-transition-delay: 2s;
        -ms-transition-delay: 2s;
        transition-delay: 0.3s;
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        border: none;
        bottom: 0;
        color: inherit;
        font-size: 0.8em;
        height: 8.5em;
        left: 50%;
        letter-spacing: 0.225em;
        margin-left: -8.5em;
        opacity: 1;
        outline: 0;
        padding-left: 0.225em;
        position: absolute;
        text-align: center;
        text-transform: uppercase;
        width: 16em;
        z-index: 1;
    }
    
    #banner .more:after {
        background-image: url("images/arrow.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        bottom: 4em;
        content: '';
        display: block;
        height: 1.5em;
        left: 50%;
        margin: 0 0 0 -0.75em;
        position: absolute;
        width: 1.5em;
    }
    
    #banner:after {
        pointer-events: none;
        -moz-transition: opacity 0.6s ease-in-out;
        -webkit-transition: opacity 0.6s ease-in-out;
        -ms-transition: opacity 0.6s ease-in-out;
        transition: opacity 0.8s ease-in-out;
        -moz-transition-delay: 0.8s;
        -webkit-transition-delay: 0.8s;
        -ms-transition-delay: 0.8s;
        transition-delay: 0.3s;
        content: '';
        background: #282d31;
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }
    
    @media screen and (max-width: 920px) {
        #banner {
            padding: 7em 3em 7em 3em;
            height: auto;
            min-height: 0;
        }
        #banner h2 {
            font-size: 2em;
        }
        #banner br {
            display: none;
        }
        #banner .more {
            display: none;
        }
    }
    
    body.is-preload #banner h2 {
        -moz-transform: scale(0.95);
        -webkit-transform: scale(0.95);
        -ms-transform: scale(0.95);
        transform: scale(0.95);
        opacity: 0;
    }
    
    body.is-preload #banner h2:before,
    body.is-preload #banner h2:after {
        width: 0;
    }
    
    body.is-preload #banner .more {
        -moz-transform: translateY(8.5em);
        -webkit-transform: translateY(8.5em);
        -ms-transform: translateY(8.5em);
        transform: translateY(8.5em);
        opacity: 0;
    }
    
    body.is-preload #banner:after {
        opacity: 1;
    }
    /* CTA */
    
    #cta .inner {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        max-width: 45em;
    }
    
    #cta .inner header {
        -moz-order: 1;
        -webkit-order: 1;
        -ms-order: 1;
        order: 1;
        padding-right: 3em;
        width: 70%;
    }
    
    #cta .inner header p {
        color: inherit;
    }
    
    #cta .inner .actions {
        -moz-order: 2;
        -webkit-order: 2;
        -ms-order: 2;
        order: 2;
        width: 30%;
    }
    
    @media screen and (max-width: 980px) {
        #cta .inner {
            display: block;
            text-align: center;
        }
        #cta .inner header {
            padding-right: 0;
            width: 100%;
        }
        #cta .inner .actions {
            margin-left: auto;
            margin-right: auto;
            max-width: 20em;
            width: 100%;
        }
    }
    
    @media screen and (max-width: 736px) {
        #cta .inner .actions {
            max-width: none;
        }
    }
    /* Main */
    /* Main from Future*/
    
    #mainI {
        -moz-flex-grow: 1;
        -webkit-flex-grow: 1;
        -ms-flex-grow: 1;
        flex-grow: 1;
        -ms-flex: 1;
        width: 100%;
    }
    /* Main - project page/photo page */
    
    #mainII {
        padding: 0em 0 2em 0;
    }
    
    @media screen and (max-width: 736px) {
        #mainII {
            padding: 0em 0 1em 0;
        }
    }
    /* Category page - thumbnail image*/
    /* #main>header {
    padding: 12em 0 10em 0;
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/banner.jpg");
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/banner.jpg");
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/banner.jpg");
    background-image: linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/banner.jpg");
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
} */
    
    #main #proje {
        padding: 2em 0 5em 0;
        /* background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/unsplash/alvaro-reyes-qWwpHwip31M-unsplash.jpg"); */
        /* background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/unsplash/alvaro-reyes-qWwpHwip31M-unsplash.jpg"); */
        /* background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/unsplash/alvaro-reyes-qWwpHwip31M-unsplash.jpg"); */
        /* background-image: linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/unsplash/alvaro-reyes-qWwpHwip31M-unsplash.jpg"); */
        background-attachment: fixed;
        background-position: center -9em;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        color: #000000;
    }
    
    #main #proje h2 {
        color: #181818;
    }
    
    #main #visuala {
        padding: 12em 0 12em 0;
        /* <div class="image"><img src="/images/Mainpage/mp-drawing.jpg" alt="" /></div> */
        background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/starskyC.jpeg");
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/starskyC.jpeg");
        background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/starskyC.jpeg");
        background-image: linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/starskyC.jpeg");
        background-attachment: fixed;
        background-position: center -4em;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        color: #ffffff;
    }
    
    #main #drawingpage {
        padding: 12em 0 12em 0;
        background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/Mainpage/mp-drawing.jpg");
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/Mainpage/mp-drawing.jpg");
        background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/Mainpage/mp-drawing.jpg");
        background-image: linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/Mainpage/mp-drawing.jpg");
        background-attachment: fixed;
        background-position: center -4em;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        color: #ffffff;
    }
    
    #main #calli {
        padding: 12em 0 12em 0;
        background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/Calligraphy/thumbnail-calli.jpg");
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/Calligraphy/thumbnail-calli.jpg");
        background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/Calligraphy/thumbnail-calli.jpg");
        background-image: linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/Calligraphy/thumbnail-calli.jpg");
        background-attachment: fixed;
        background-position: center -9em;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        color: #ffffff;
    }
    
    #main #calliworkshop {
        padding: 12em 0 12em 0;
        background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/Calligraphy/workshop/workshop15.jpg");
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/Calligraphy/workshop/workshop15.jpg");
        background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/Calligraphy/workshop/workshop15.jpg");
        background-image: linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/Calligraphy/workshop/workshop15.jpg");
        background-attachment: fixed;
        background-position: center -9em;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        color: #ffffff;
    }
    
    #main #illus {
        padding: 12em 0 12em 0;
        background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/");
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/");
        background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/");
        background-image: linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/");
        background-attachment: fixed;
        background-position: center -9em;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        color: #ffffff;
    }
    
    #main #photog {
        padding: 12em 0 12em 0;
        background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/photography/thumbnail-photog.jpeg");
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/photography/thumbnail-photog.jpeg");
        background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/photography/thumbnail-photog.jpeg");
        background-image: linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/photography/thumbnail-photog.jpeg");
        background-attachment: fixed;
        background-position: center -9em;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        color: #ffffff;
    }
    
    @media screen and (max-width: 920px) {
        #main #calli,
        #proje,
        #visuala,
        #photog,
        #drawi {
            padding: 7em 3em 7em 3em;
            height: auto;
            min-height: 0;
        }
        #main #calli h2 {
            font-size: 2em;
        }
        #main #proje h2 {
            font-size: 2em;
        }
        #main #visuala h2 {
            font-size: 2em;
        }
        #main #photog h2 {
            font-size: 2em;
        }
        #main #drawi h2 {
            font-size: 2em;
        }
        #main #calli br {
            display: none;
        }
        #main #calli .more {
            display: none;
        }
    }
    /* #main #drawi {
    padding: 12em 0 12em 0;
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/photography/thumbnail-photog.jpeg");
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/photography/thumbnail-photog.jpeg");
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/photography/thumbnail-photog.jpeg");
    background-image: linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../../images/photography/thumbnail-photog.jpeg");
    background-attachment: fixed;
    background-position: center -9em;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
} */
    
    #main #drawi {
        padding: 5em 0 1em 0;
        background-color: #f7f7f7;
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
    }
    
    #main #drawi>h2 {
        font-size: 4em;
        margin: 0 0 0.5em 0;
        color: #181818;
    }
    
    #main #singlepost {
        padding: 4em 0 1em 0;
        background-color: #ffffff;
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
    }
    
    #main>header h2 {
        font-size: 4em;
        margin: 0 0 0.5em 0;
        color: #ffffff;
    }
    
    #main>header p {
        color: inherit;
        letter-spacing: 0.225em;
        text-transform: uppercase;
        top: 0;
    }
    
    #main .inner {
        color: #363636;
    }
    
    #main>header p a {
        color: inherit;
    }
    
    @media screen and (max-width: 1680px) {
        #main>header {
            padding: 10em 0 8em 0;
        }
    }
    
    @media screen and (max-width: 1280px) {
        #main>header {
            padding: 8em 3em 6em 3em;
        }
    }
    
    @media screen and (max-width: 980px) {
        #main>header {
            padding: 10em 3em 8em 3em;
        }
    }
    
    @media screen and (max-width: 736px) {
        #main>header {
            padding: 5em 3em 3em 3em;
        }
        #main>header h2 {
            font-size: 3.5em;
            margin: 0 0 1em 0;
        }
    }
    
    body.is-mobile #main>header {
        background-attachment: scroll;
    }
    /* Footer */
    
    #footer {
        padding: 1em 0 0.5em 0;
        background-color: #f3f3f3;
        text-align: center;
    }
    
    #footer .copyright {
        color: rgba(29, 29, 29, 0.836);
        font-size: 0.7em;
        letter-spacing: 0.225em;
        list-style: none;
        padding: 0;
        /* text-transform: uppercase; */
    }
    
    #footer .copyright li {
        border-left: solid 1px rgba(255, 255, 255, 0.5);
        display: inline-block;
        line-height: 1em;
        margin-left: 1em;
        padding-left: 1em;
    }
    
    #footer .copyright li:first-child {
        border-left: 0;
        margin-left: 0;
        padding-left: 0;
    }
    
    #footer .copyright li a {
        color: inherit;
    }
    
    #footer .copyright li a:hover {
        color: #fff;
    }
    
    @media screen and (max-width: 480px) {
        #footer .copyright li {
            border: 0;
            display: block;
            line-height: 1.65em;
            margin: 0;
            padding: 0.5em 0;
        }
    }
    
    @media screen and (max-width: 980px) {
        #footer {
            padding: 4em 3em 2em 3em;
        }
    }
    
    @media screen and (max-width: 736px) {
        #footer {
            padding: 3em 2em 1em 2em;
        }
    }
    /* Landing */
    /* The main page background image */
    
    body.landing #page-wrapper {
        background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/unsplash/morgan-sessions-YIN4xUBaqnk-unsplash.jpg");
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/unsplash/morgan-sessions-YIN4xUBaqnk-unsplash.jpg");
        background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/unsplash/morgan-sessions-YIN4xUBaqnk-unsplash.jpg");
        background-image: linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/unsplash/morgan-sessions-YIN4xUBaqnk-unsplash.jpg");
        background-attachment: fixed;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        padding-top: 0;
    }
    
    body.landing #page-wrapper-calli {
        background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/Calligraphy/thumbnail-calli.jpg");
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/Calligraphy/thumbnail-calli.jpg");
        background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/Calligraphy/thumbnail-calli.jpg");
        background-image: linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/Calligraphy/thumbnail-calli.jpg");
        background-attachment: fixed;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        padding-top: 0;
    }
    
    body.landing #footer {
        background-color: #f3f3f3;
    }
    
    body.is-mobile.landing #page-wrapper {
        background: none;
    }
    
    body.is-mobile.landing #banner,
    body.is-mobile.landing .wrapper.style4 {
        background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/unsplash/morgan-sessions-YIN4xUBaqnk-unsplash.jpg");
        background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../images/unsplash/morgan-sessions-YIN4xUBaqnk-unsplash.jpg");
        background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/unsplash/morgan-sessions-YIN4xUBaqnk-unsplash.jpg");
        background-image: linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/unsplash/morgan-sessions-YIN4xUBaqnk-unsplash.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    body.is-mobile.landing #footer {
        background-color: #ffffff;
    }
    /* popup box */
    /* The Modal (background) */
    
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        width: calc(100%);
        border: none;
        margin: 5% auto;
        /*5% top and centered*/
        z-index: 1;
        /* Sit on top */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }
    /* Modal Content/Box */
    
    .modal-content {
        text-align: center;
        background-color: #fefefe;
        margin: 15% auto;
        /* 15% from the top and centered */
        padding: 40px;
        border: 1px solid #888;
        width: calc(60%);
        /* Could be more or less, depending on screen size */
        justify-content: center;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        animation-name: animatetop;
        animation-duration: 0.4s
    }
    /* Modal Content */
    /* .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation-name: animatetop;
    animation-duration: 0.4s
} */
    /* Modal Header */
    /* .modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
} */
    /* Modal Body */
    
    .modal-body {
        padding: 2px 16px;
    }
    /* Modal Footer */
    /* .modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
} */
    /* Add Animation */
    
    @keyframes animatetop {
        from {
            top: -300px;
            opacity: 0
        }
        to {
            top: 0;
            opacity: 1
        }
    }
    
    .modal-content p {
        padding: 0%;
        margin: 0;
    }
    
    @media screen and (max-width: 750px) {
        .modal {
            width: calc(100%);
            padding-bottom: 15px;
        }
        .modal p {
            padding: 15px 20px 0 20px;
        }
        .modal img {
            width: calc(100%);
        }
    }
    
    #wechat:focus,
    #wechat:hover {
        cursor: pointer;
    }
    /* The Close Button */
    
    .close {
        color: #aaa;
        float: right;
        font-size: 30px;
        font-weight: bold;
    }
    
    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
    /* Mini Post */
    
    .mini-post {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        background: #ffffff;
        border: solid 1px rgba(160, 160, 160, 0.3);
        margin: 0 0 2em 0;
    }
    
    .mini-post .image {
        overflow: hidden;
        width: 100%;
    }
    
    .mini-post .image img {
        -moz-transition: -moz-transform 0.2s ease-out;
        -webkit-transition: -webkit-transform 0.2s ease-out;
        -ms-transition: -ms-transform 0.2s ease-out;
        transition: transform 0.2s ease-out;
        width: 100%;
    }
    
    .mini-post .image:hover img {
        -moz-transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
    }
    
    .mini-post header {
        padding: 1.25em 4.25em 0.1em 1.25em;
        min-height: 4em;
        position: relative;
        -moz-flex-grow: 1;
        -webkit-flex-grow: 1;
        -ms-flex-grow: 1;
        flex-grow: 1;
    }
    
    .mini-post header h3 {
        font-size: 0.7em;
    }
    
    .mini-post header .published {
        display: block;
        font-family: "Raleway", Helvetica, sans-serif;
        font-size: 0.6em;
        font-weight: 400;
        letter-spacing: 0.25em;
        margin: -0.625em 0 1.7em 0;
        text-transform: uppercase;
    }
    
    .mini-post header .author {
        position: absolute;
        right: 2em;
        top: 2em;
    }
    
    .mini-posts {
        margin: 0 0 2em 0;
    }
    
    @media screen and (max-width: 1280px) {
        .mini-posts {
            display: -moz-flex;
            display: -webkit-flex;
            display: -ms-flex;
            display: flex;
            -moz-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            width: calc(100% + 2em);
        }
        .mini-posts>* {
            margin: 2em 2em 0 0;
            width: calc(50% - 2em);
        }
        .mini-posts> :nth-child(-n+2) {
            margin-top: 0;
        }
    }
    
    @media screen and (max-width: 480px) {
        .mini-posts {
            display: block;
            width: 100%;
        }
        .mini-posts>* {
            margin: 0 0 2em 0;
            width: 100%;
        }
    }
    /* Post */
    
    .post {
        padding: 3em 4em 1em 4em;
        background: #ffffff;
        border: solid 1px rgba(160, 160, 160, 0.3);
        margin: 0 0 3em 0;
        position: relative;
    }
    
    .post>header {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        left: -3em;
        margin: -3em 0 3em 0;
        position: relative;
        width: calc(100% + 6em);
    }
    
    .post>header .title {
        -moz-flex-grow: 1;
        -webkit-flex-grow: 1;
        -ms-flex-grow: 1;
        flex-grow: 1;
        -ms-flex: 1;
        padding: 3em 3em 1.5em 3em;
        border-top: solid 1px rgba(160, 160, 160, 0.3);
        border-bottom: solid 1px rgba(160, 160, 160, 0.3);
    }
    
    .post>header .title h4 {
        font-weight: 900;
        font-size: 1em;
        margin-bottom: 0;
    }
    
    .post>header .title p {
        color: #252525;
    }
    
    .post>p {
        font-size: 0.9em;
        color: #252525;
    }
    
    .post>header .title> :last-child {
        margin-bottom: 0;
    }
    
    .post>header a {
        border-bottom: none;
    }
    
    .post>header .meta {
        padding: 3em 3em 1.75em 3em;
        border-left: solid 1px rgba(160, 160, 160, 0.3);
        border-top: solid 1px rgba(160, 160, 160, 0.3);
        border-bottom: solid 1px rgba(160, 160, 160, 0.3);
        min-width: 17em;
        text-align: center;
        width: 17em;
    }
    
    .post>header .meta>* {
        margin: 0 auto;
    }
    
    .post>header .meta> :last-child {
        margin-bottom: 0;
    }
    
    .post>header .meta .published,
    .author {
        color: #252525;
        display: block;
        font-family: "open sans", Helvetica, sans-serif;
        font-size: 0.8em;
        font-weight: 500;
        letter-spacing: 0.2em;
        margin: 0 auto;
        text-transform: uppercase;
        white-space: nowrap;
    }
    
    .post>a.image.featured {
        overflow: hidden;
    }
    
    .post>a.image.featured img {
        -moz-transition: -moz-transform 0.2s ease-out;
        -webkit-transition: -webkit-transform 0.2s ease-out;
        -ms-transition: -ms-transform 0.2s ease-out;
        transition: transform 0.2s ease-out;
    }
    
    .post>a.image.featured:hover img {
        -moz-transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
    }
    
    .post>footer {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
    }
    
    .post>footer .actions {
        -moz-flex-grow: 1;
        -webkit-flex-grow: 1;
        -ms-flex-grow: 1;
        flex-grow: 1;
    }
    
    .post>footer .stats {
        cursor: default;
        list-style: none;
        padding: 0;
    }
    
    .post>footer .stats li {
        border-left: solid 1px rgba(160, 160, 160, 0.3);
        display: inline-block;
        font-family: "Raleway", Helvetica, sans-serif;
        font-size: 0.6em;
        font-weight: 400;
        letter-spacing: 0.25em;
        line-height: 1;
        margin: 0 0 0 2em;
        padding: 0 0 0 2em;
        text-transform: uppercase;
    }
    
    .post>footer .stats li:first-child {
        border-left: 0;
        margin-left: 0;
        padding-left: 0;
    }
    
    .post>footer .stats li .icon {
        border-bottom: 0;
    }
    
    .post>footer .stats li .icon:before {
        color: rgba(160, 160, 160, 0.3);
        margin-right: 0.75em;
    }
    
    @media screen and (max-width: 980px) {
        .post {
            border-left: 0;
            border-right: 0;
            left: -3em;
            width: calc(100% + (3em * 2));
        }
        .post>header {
            -moz-flex-direction: column;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            padding: 3.75em 3em 1.25em 3em;
            border-left: 0;
        }
        .post>header .title {
            -ms-flex: 0 1 auto;
            margin: 0 0 2em 0;
            padding: 0;
            text-align: center;
        }
        .post>header .meta {
            -moz-align-items: center;
            -webkit-align-items: center;
            -ms-align-items: center;
            align-items: center;
            display: -moz-flex;
            display: -webkit-flex;
            display: -ms-flex;
            display: flex;
            -moz-justify-content: center;
            -webkit-justify-content: center;
            -ms-justify-content: center;
            justify-content: center;
            border-left: 0;
            margin: 0 0 2em 0;
            padding-top: 0;
            padding: 0;
            text-align: left;
            width: 100%;
        }
        .post>header .meta>* {
            border-left: solid 1px rgba(160, 160, 160, 0.3);
            margin-left: 2em;
            padding-left: 2em;
        }
        .post>header .meta> :first-child {
            border-left: 0;
            margin-left: 0;
            padding-left: 0;
        }
        .post>header .meta .published {
            margin-bottom: 0;
            margin-top: 0;
        }
        .post>header .meta .author {
            -moz-flex-direction: row-reverse;
            -webkit-flex-direction: row-reverse;
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
            margin-bottom: 0;
        }
        .post>header .meta .author .name {
            margin: 0 0 0 1.5em;
        }
        .post>header .meta .author img {
            width: 3.5em;
        }
    }
    
    @media screen and (max-width: 736px) {
        .post {
            padding: 1.5em 1.5em 0.1em 1.5em;
            left: -1.5em;
            margin: 0 0 2em 0;
            width: calc(100% + (1.5em * 2));
        }
        .post>header {
            padding: 3em 1.5em 0.5em 1.5em;
            left: -1.5em;
            margin: -1.5em 0 1.5em 0;
            width: calc(100% + 3em);
        }
        .post>header .title h2 {
            font-size: 1.1em;
        }
    }
    
    @media screen and (max-width: 480px) {
        .post>header .meta {
            -moz-align-items: center;
            -webkit-align-items: center;
            -ms-align-items: center;
            align-items: center;
            -moz-flex-direction: column;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }
        .post>header .meta>* {
            border-left: 0;
            margin: 1em 0 0 0;
            padding-left: 0;
        }
        .post>header .meta .author .name {
            display: none;
        }
        .post>.image.featured {
            margin-left: -1.5em;
            margin-top: calc(-1.5em - 1px);
            width: calc(100% + 3em);
        }
        .post>footer {
            -moz-align-items: -moz-stretch;
            -webkit-align-items: -webkit-stretch;
            -ms-align-items: -ms-stretch;
            align-items: stretch;
            -moz-flex-direction: column-reverse;
            -webkit-flex-direction: column-reverse;
            -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
        }
        .post>footer .stats {
            text-align: center;
        }
        .post>footer .stats li {
            margin: 0 0 0 1.25em;
            padding: 0 0 0 1.25em;
        }
    }
    /* Posts */
    
    ul.posts {
        list-style: none;
        padding: 0;
    }
    
    ul.posts li {
        border-top: dotted 1px rgba(160, 160, 160, 0.3);
        margin: 1.5em 0 0 0;
        padding: 1.5em 0 0 0;
    }
    
    ul.posts li:first-child {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }
    
    ul.posts article {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-align-items: -moz-flex-start;
        -webkit-align-items: -webkit-flex-start;
        -ms-align-items: -ms-flex-start;
        align-items: flex-start;
        -moz-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
    
    ul.posts article .image {
        display: block;
        margin-right: 1.5em;
        min-width: 4em;
        width: 4em;
    }
    
    ul.posts article .image img {
        width: 100%;
    }
    
    ul.posts article header {
        -moz-flex-grow: 1;
        -webkit-flex-grow: 1;
        -ms-flex-grow: 1;
        flex-grow: 1;
        -ms-flex: 1;
    }
    
    ul.posts article header h3 {
        font-size: 0.7em;
        margin-top: 0.125em;
    }
    
    ul.posts article header .published {
        display: block;
        font-family: "Raleway", Helvetica, sans-serif;
        font-size: 0.6em;
        font-weight: 400;
        letter-spacing: 0.25em;
        margin: -0.625em 0 1.7em 0;
        text-transform: uppercase;
    }
    
    ul.posts article header> :last-child {
        margin-bottom: 0;
    }
    /* Project */
    
    #project>a.image.featured {
        overflow: hidden;
    }
    
    #project>a.image.featured img {
        -moz-transition: -moz-transform 0.2s ease-out;
        -webkit-transition: -webkit-transform 0.2s ease-out;
        -ms-transition: -ms-transform 0.2s ease-out;
        transition: transform 0.2s ease-out;
    }
    
    #project>a.image.featured:hover img {
        -moz-transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
    }
    /* Masonry Order */
    
    .masonry {
        display: grid;
        grid-template-columns: repeat(1, minmax(100px, 1fr));
        grid-gap: 10px;
        grid-auto-rows: 0;
    }
    
    @media only screen and (max-width: 1023px) and (min-width: 768px) {
        .masonry {
            grid-template-columns: repeat(2, minmax(100px, 1fr));
        }
    }
    
    @media only screen and (min-width: 1024px) {
        .masonry {
            grid-template-columns: repeat(3, minmax(100px, 1fr));
        }
    }
    
    .masonry-item {
        transition: filter .25s ease-in-out;
    }
    /* Masonry */
    
    .masonry-grid {
        /* It is split into 3 columns */
        column-count: 3;
        /* The space between columns */
        column-gap: 1rem;
        /* Misc */
        width: 100%;
    }
    
    .masonry-grid2 {
        display: grid;
        grid-gap: 1em;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-auto-rows: 0;
    }
    
    .masonry-grid.special {
        /* It is split into 4 columns */
        column-count: 4;
        /* The space between columns */
        column-gap: 1rem;
        /* Misc */
        width: 100%;
    }
    
    .masonry-grid__item {
        /* Prevent a column from breaking into multiple columns */
        break-inside: avoid;
        /* Misc */
        margin-bottom: 1rem;
    }
    
    .masonry-grid__item ul,
    .masonry-grid2 ul {
        font-size: 0.7em;
    }
    
    .masonry-grid article,
    .masonry-grid2 {
        -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
        transition: transform 0.5s ease, opacity 0.5s ease;
        position: relative;
    }
    
    .masonry-grid article>.image,
    .masonry-grid2>.image {
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        position: relative;
        display: block;
        width: 100%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .masonry-grid article>.image img,
    .masonry-grid2>.image img {
        display: block;
        width: 100%;
    }
    
    .masonry-grid article>.image:before,
    .masonry-grid2>.image:before {
        pointer-events: none;
        -moz-transition: background-color 0.5s ease, opacity 0.5s ease;
        -webkit-transition: background-color 0.5s ease, opacity 0.5s ease;
        -ms-transition: background-color 0.5s ease, opacity 0.5s ease;
        transition: background-color 0.5s ease, opacity 0.5s ease;
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1.0;
        z-index: 1;
        opacity: 0.8;
    }
    
    .masonry-grid article>.image:after,
    .masonry-grid2>.image:after {
        pointer-events: none;
        -moz-transition: opacity 0.5s ease;
        -webkit-transition: opacity 0.5s ease;
        -ms-transition: opacity 0.5s ease;
        transition: opacity 0.5s ease;
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: 0.25;
        z-index: 2;
    }
    
    .masonry-grid article>a,
    .masonry-grid2>a {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        -moz-transition: background-color 0.5s ease, -moz-transform 0.5s ease;
        -webkit-transition: background-color 0.5s ease, -webkit-transform 0.5s ease;
        -ms-transition: background-color 0.5s ease, -ms-transform 0.5s ease;
        transition: background-color 0.5s ease, transform 0.5s ease;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 1em;
        border-radius: 0;
        border-bottom: 0;
        color: #ffffff;
        text-align: center;
        text-decoration: none;
        z-index: 3;
    }
    
    .masonry-grid article>a> :last-child,
    .masonry-grid2>a> :last-child {
        margin: 0;
    }
    
    .masonry-grid article>a:hover,
    .masonry-grid2>a:hover {
        color: #ffffff !important;
    }
    
    .masonry-grid article>a h2,
    .masonry-grid2>a h2 {
        margin: 0;
    }
    
    .masonry-grid article>a .content,
    .masonry-grid2>a .content {
        -moz-transition: max-height 0.5s ease, opacity 0.5s ease;
        -webkit-transition: max-height 0.5s ease, opacity 0.5s ease;
        -ms-transition: max-height 0.5s ease, opacity 0.5s ease;
        transition: max-height 0.5s ease, opacity 0.5s ease;
        width: 100%;
        max-height: 0;
        line-height: 1.5;
        margin-top: 0.35em;
        opacity: 0;
    }
    
    .masonry-grid article>a .content> :last-child,
    .masonry-grid2>a .content> :last-child {
        margin-bottom: 0;
    }
    /* when hover, show animation */
    
    body:not(.is-touch) .masonry-grid article:hover>.image,
    body:not(.is-touch) .masonry-grid2:hover>.image {
        -moz-transform: scale(0.98);
        -webkit-transform: scale(0.98);
        -ms-transform: scale(0.98);
        transform: scale(0.98);
    }
    
    body:not(.is-touch) .masonry-grid article:hover>.image:before,
    body:not(.is-touch) .masonry-grid2:hover>.image:before {
        background-color: #333333;
        opacity: 0.35;
    }
    
    body:not(.is-touch) .masonry-grid.special article:hover>.image:before {
        background-color: transparent;
        opacity: 0.35;
    }
    
    body:not(.is-touch) .masonry-grid article:hover>.image:after,
    body:not(.is-touch) .masonry-grid2:hover>.image:after {
        opacity: 0;
    }
    
    body:not(.is-touch) .masonry-grid article:hover .content,
    body:not(.is-touch) .masonry-grid2:hover .content {
        max-height: 15em;
        opacity: 1;
    }
    
    *+.masonry-grid,
    *+.masonry {
        margin-top: 2em;
    }
    
    body.is-preload .masonry-grid article,
    body.is-preload .wrappermasonry {
        -moz-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
        opacity: 0;
    }
    
    body.is-touch .masonry-grid article .content,
    body.is-touch .wrappermasonry .content {
        max-height: 15em;
        opacity: 1;
    }
    
    @media screen and (max-width: 1280px) {
        .masonry-grid article {
            width: 100%;
            margin: 0.25em 0.25em 0.8em 0.25em;
        }
    }
    
    @media screen and (max-width: 980px) {
        .masonry-grid article {
            width: 100%;
            margin: 0.25em 0.25em 0.8em 0.25em;
        }
    }
    
    @media screen and (max-width: 736px) {
        .masonry-grid {
            column-count: 2;
        }
        .masonry-grid article {
            width: 100%;
            margin: 0.25em 0.25em 0.8em 0.25em;
        }
        .masonry-grid article:hover>.image {
            -moz-transform: scale(1.0);
            -webkit-transform: scale(1.0);
            -ms-transform: scale(1.0);
            transform: scale(1.0);
        }
    }
    
    @media screen and (max-width: 480px) {
        .masonry-grid {
            column-count: 1;
        }
        .masonry-grid article {
            width: 100%;
            margin: 1em 0 0 0;
        }
    }
    /* Tiles */
    
    .tiles {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        position: relative;
        margin: -2.5em -2.5em -2.5em -2.5em;
    }
    
    .tiles article {
        -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
        transition: transform 0.5s ease, opacity 0.5s ease;
        position: relative;
        width: calc(50% - 1em);
        margin: 0.5em 0.5em 0.5em 0.5em;
    }
    
    .tiles article>.image {
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        position: relative;
        display: block;
        width: 100%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .tiles article>.image img {
        display: block;
        width: 100%;
    }
    
    .tiles article>.image:before {
        pointer-events: none;
        -moz-transition: background-color 0.5s ease, opacity 0.5s ease;
        -webkit-transition: background-color 0.5s ease, opacity 0.5s ease;
        -ms-transition: background-color 0.5s ease, opacity 0.5s ease;
        transition: background-color 0.5s ease, opacity 0.5s ease;
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1.0;
        z-index: 1;
        opacity: 0.8;
    }
    
    .tiles article>.image:after {
        pointer-events: none;
        -moz-transition: opacity 0.5s ease;
        -webkit-transition: opacity 0.5s ease;
        -ms-transition: opacity 0.5s ease;
        transition: opacity 0.5s ease;
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: 0.25;
        z-index: 2;
    }
    
    .tiles article>a {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        -moz-transition: background-color 0.5s ease, -moz-transform 0.5s ease;
        -webkit-transition: background-color 0.5s ease, -webkit-transform 0.5s ease;
        -ms-transition: background-color 0.5s ease, -ms-transform 0.5s ease;
        transition: background-color 0.5s ease, transform 0.5s ease;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 1em;
        border-radius: 0;
        border-bottom: 0;
        color: #ffffff;
        text-align: center;
        text-decoration: none;
        z-index: 3;
    }
    
    .tiles article>a> :last-child {
        margin: 0;
    }
    
    .tiles article>a:hover {
        color: #ffffff !important;
    }
    
    .tiles article>a h2 {
        margin: 0;
    }
    
    .tiles article>a .content {
        -moz-transition: max-height 0.5s ease, opacity 0.5s ease;
        -webkit-transition: max-height 0.5s ease, opacity 0.5s ease;
        -ms-transition: max-height 0.5s ease, opacity 0.5s ease;
        transition: max-height 0.5s ease, opacity 0.5s ease;
        width: 100%;
        max-height: 0;
        line-height: 1.5;
        margin-top: 0.35em;
        opacity: 0;
    }
    
    .tiles article>a .content> :last-child {
        margin-bottom: 0;
    }
    
    .tiles article.project1>.image:before {
        /* background-color: #f2849e; */
    }
    
    body:not(.is-touch) .tiles article:hover>.image {
        -moz-transform: scale(0.97);
        -webkit-transform: scale(0.97);
        -ms-transform: scale(0.97);
        transform: scale(0.97);
    }
    
    body:not(.is-touch) .tiles article:hover>.image:before {
        background-color: #333333;
        opacity: 0.35;
    }
    
    body:not(.is-touch) .tiles article:hover>.image:after {
        opacity: 0;
    }
    
    body:not(.is-touch) .tiles article:hover .content {
        max-height: 15em;
        opacity: 1;
    }
    
    *+.tiles {
        margin-top: 2em;
    }
    
    body.is-preload .tiles article {
        -moz-transform: scale(0.95);
        -webkit-transform: scale(0.95);
        -ms-transform: scale(0.95);
        transform: scale(0.95);
        opacity: 0;
    }
    
    body.is-touch .tiles article .content {
        max-height: 15em;
        opacity: 1;
    }
    
    @media screen and (max-width: 1280px) {
        .tiles {
            margin: -1.25em -1.25em -1.25em -1.25em;
        }
        .tiles article {
            width: calc(50% - 1em);
            margin: 0.25em 0.25em 0.25em 0.25em;
        }
    }
    
    @media screen and (max-width: 980px) {
        .tiles {
            margin: -1.25em -1.25em -1.25em -1.25em;
        }
        .tiles article {
            width: calc(50% - 1em);
            margin: 0.25em 0.25em 0.25em 0.25em;
        }
    }
    
    @media screen and (max-width: 736px) {
        .tiles {
            margin: -1.25em -1.25em -1.25em -1.25em;
        }
        .tiles article {
            width: calc(50% - 1em);
            margin: 0.25em 0.25em 0.25em 0.25em;
        }
        .tiles article:hover>.image {
            -moz-transform: scale(1.0);
            -webkit-transform: scale(1.0);
            -ms-transform: scale(1.0);
            transform: scale(1.0);
        }
    }
    
    @media screen and (max-width: 480px) {
        .tiles {
            margin: 0;
        }
        .tiles article {
            width: 100%;
            margin: 1.25em 0 0 0;
        }
    }
    /* tiles2 */
    /* 一行三个 */
    
    .tiles2 {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        position: relative;
        margin: -2.5em -2.5em -2.5em -2.5em;
    }
    
    .tiles2 article {
        -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
        transition: transform 0.5s ease, opacity 0.5s ease;
        position: relative;
        width: calc(33.33333% - 1em);
        margin: 0.5em 0.5em 0.5em 0.5em;
    }
    
    .tiles2 article>.image {
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        position: relative;
        display: block;
        width: 100%;
        border-radius: 0;
        overflow: hidden;
    }
    
    .tiles2 article>.image img {
        display: block;
        width: 100%;
    }
    
    .tiles2 article>.image:before {
        pointer-events: none;
        -moz-transition: background-color 0.5s ease, opacity 0.5s ease;
        -webkit-transition: background-color 0.5s ease, opacity 0.5s ease;
        -ms-transition: background-color 0.5s ease, opacity 0.5s ease;
        transition: background-color 0.5s ease, opacity 0.5s ease;
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1.0;
        z-index: 1;
        opacity: 0.8;
    }
    
    .tiles2 article>.image:after {
        pointer-events: none;
        -moz-transition: opacity 0.5s ease;
        -webkit-transition: opacity 0.5s ease;
        -ms-transition: opacity 0.5s ease;
        transition: opacity 0.5s ease;
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: 0.25;
        z-index: 2;
    }
    
    .tiles2 article>a {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        -moz-transition: background-color 0.5s ease, -moz-transform 0.5s ease;
        -webkit-transition: background-color 0.5s ease, -webkit-transform 0.5s ease;
        -ms-transition: background-color 0.5s ease, -ms-transform 0.5s ease;
        transition: background-color 0.5s ease, transform 0.5s ease;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 1em;
        border-radius: 0;
        border-bottom: 0;
        color: #ffffff;
        text-align: center;
        text-decoration: none;
        z-index: 3;
    }
    
    .tiles2 article>a> :last-child {
        margin: 0;
    }
    
    .tiles2 article>a:hover {
        color: #ffffff !important;
    }
    
    .tiles2 article>a h2 {
        margin: 0;
    }
    
    .tiles2 article>a .content {
        -moz-transition: max-height 0.5s ease, opacity 0.5s ease;
        -webkit-transition: max-height 0.5s ease, opacity 0.5s ease;
        -ms-transition: max-height 0.5s ease, opacity 0.5s ease;
        transition: max-height 0.5s ease, opacity 0.5s ease;
        width: 100%;
        max-height: 0;
        line-height: 1.5;
        margin-top: 0.35em;
        opacity: 0;
    }
    
    .tiles2 article>a .content> :last-child {
        margin-bottom: 0;
    }
    
    .tiles2 article.project1>.image:before {
        /* background-color: #f2849e; */
    }
    
    body:not(.is-touch) .tiles2 article:hover>.image {
        -moz-transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
    }
    
    body:not(.is-touch) .tiles2 article:hover>.image:before {
        background-color: #333333;
        opacity: 0.35;
    }
    
    body:not(.is-touch) .tiles2 article:hover>.image:after {
        opacity: 0;
    }
    
    body:not(.is-touch) .tiles2 article:hover .content {
        max-height: 15em;
        opacity: 1;
    }
    
    *+.tiles2 {
        margin-top: 2em;
    }
    
    body.is-preload .tiles2 article {
        -moz-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
        opacity: 0;
    }
    
    body.is-touch .tiles2 article .content {
        max-height: 15em;
        opacity: 1;
    }
    
    @media screen and (max-width: 1280px) {
        .tiles2 {
            margin: -1.25em -1.25em -1.25em -1.25em;
        }
        .tiles2 article {
            width: calc(50% - 1em);
            margin: 0.25em 0.25em 0.25em 0.25em;
        }
    }
    
    @media screen and (max-width: 980px) {
        .tiles2 {
            margin: -1.25em -1.25em -1.25em -1.25em;
        }
        .tiles2 article {
            width: calc(50% - 1em);
            margin: 0.25em 0.25em 0.25em 0.25em;
        }
    }
    
    @media screen and (max-width: 736px) {
        .tiles2 {
            margin: -1.25em -1.25em -1.25em -1.25em;
        }
        .tiles2 article {
            width: calc(50% - 1em);
            margin: 0.25em 0.25em 0.25em 0.25em;
        }
        .tiles2 article:hover>.image {
            -moz-transform: scale(1.0);
            -webkit-transform: scale(1.0);
            -ms-transform: scale(1.0);
            transform: scale(1.0);
        }
    }
    
    @media screen and (max-width: 480px) {
        .tiles2 {
            margin: 0;
        }
        .tiles2 article {
            width: 100%;
            margin: 1.25em 0 0 0;
        }
    }
    /* RUUULLLLEEEEsss for label */
    
    .author-archive {
        padding: 1.5rem;
    }
    
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .author-archive ol {
        list-style: none;
    }
    
    h1 {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    h1 a {
        transition: all 0.1s;
    }
    
    h1 a:hover {
        background: var(--green);
        color: var(--white);
    }
    
    input[type="radio"] {
        position: absolute;
        left: -9999px;
    }
    /* FILTERS
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
    
    .filters {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .filters * {
        display: inline-block;
    }
    
    .filters label {
        font-weight: lighter;
        font-size: 0.8em;
        padding: 0.5rem 1rem;
        margin-bottom: 0.25rem;
        border-radius: 2rem;
        min-width: 50px;
        line-height: normal;
        cursor: pointer;
        transition: all 0.1s;
        color: #252525;
    }
    
    .filters label:hover {
        background: var(--green);
        color: #00ecbd;
    }
    /* FILTERED ELEMENTS (CATEGORIESPOSTS)
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
    /* .categoryposts {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-columns: repeat(4, 1fr);
} */
    /* .categoryposts .categorypost {
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.1);
} */
    /* .categoryposts .categorypost-title {
    font-size: 1.3rem;
} */
    /* .categoryposts .categorypost-title:hover {
    text-decoration: underline;
} */
    /* .categoryposts figcaption {
    padding: 1rem;
} */
    /* .categoryposts .categorypost-categories {
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
}

.categoryposts .categorypost-categories * {
    display: inline-block;
}

.categoryposts .categorypost-categories li {
    margin-bottom: 0.2rem;
}

.categoryposts .categorypost-categories a {
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    border: 1px solid;
    line-height: normal;
    transition: all 0.1s;
}

.categoryposts .categorypost-categories a:hover {
    background: var(--green);
    color: var(--white);
} */
    /* FILTERING RULES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
    
    [value="All"]:checked~.masonry-grid [data-category] {
        display: block;
    }
    
    [value="Portrait"]:checked~.masonry-grid .categorypost:not([data-category*="Portrait"]),
    [value="Travel"]:checked~.masonry-grid .categorypost:not([data-category*="Travel"]),
    [value="Analog"]:checked~.masonry-grid .categorypost:not([data-category*="Analog"]),
    [value="Documentary"]:checked~.masonry-grid .categorypost:not([data-category*="Documentary"]),
    [value="Impression"]:checked~.masonry-grid .categorypost:not([data-category*="Impression"]) {
        display: none;
    }
    
    [value="All"]:checked~.filters [for="All"],
    [value="Portrait"]:checked~.filters [for="Portrait"],
    [value="Travel"]:checked~.filters [for="Travel"],
    [value="Analog"]:checked~.filters [for="Analog"],
    [value="Documentary"]:checked~.filters [for="Documentary"],
    [value="Impression"]:checked~.filters [for="Impression"] {
        background: var(--green);
        color: #00ecbd;
    }
    /* Timeline */
    
    .timeline {
        /* Used to position the left vertical line */
        position: relative;
    }
    
    .timeline__line {
        /* Border */
        border-right: 1px solid #aaa;
        /* Positioned at the left */
        left: 0.7em;
        position: absolute;
        top: 0px;
        /* Take full height */
        height: 100%;
    }
    
    .timeline__items {
        /* Reset styles */
        list-style-type: none;
        margin: 0em;
        padding: 0em;
    }
    
    .timeline__item {
        margin-bottom: 1em;
    }
    
    .timeline__top {
        /* Center the content horizontally */
        align-items: center;
        display: flex;
    }
    
    .timeline__circle {
        /* Rounded border */
        background-color: rgb(170, 170, 170);
        border-radius: 1em;
        /* Size */
        height: 0.6em;
        width: 0.6em;
    }
    
    .timeline__triangle {
        /* Rounded border */
        border-top: 7px solid transparent;
        border-left: 13px solid #ff4f19;
        border-bottom: 7px solid transparent;
        /* Size */
        height: 0em;
        width: 0em;
        z-index: 1;
    }
    
    .timeline__time {
        /* Take available width */
        padding-left: 1em;
        flex: 1;
    }
    
    .timeline__title {
        padding-left: 1.6em;
        flex: 1;
    }
    
    .timeline__desc {
        /* Make it align with the title */
        margin-left: 3em;
    }
    
    #timelinetime {
        color: #636363;
        font-size: 0.8em;
        margin: 0;
        line-height: normal;
    }
    /* Gallery */
    
    .splide__container {
        box-sizing: border-box;
        position: relative
    }
    
    .splide__list {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        display: -ms-flexbox;
        display: flex;
        height: 100%;
        margin: 0!important;
        padding: 0!important;
        transform-style: preserve-3d
    }
    
    .splide.is-initialized:not(.is-active) .splide__list {
        display: block
    }
    
    .splide__pagination {
        -ms-flex-align: center;
        align-items: center;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 0;
        pointer-events: none
    }
    
    .splide__pagination li {
        display: inline-block;
        line-height: 1;
        list-style-type: none;
        margin: 0;
        pointer-events: auto
    }
    
    .splide__progress__bar {
        width: 0
    }
    
    .splide {
        outline: none;
        position: relative;
        visibility: hidden
    }
    
    .splide.is-initialized,
    .splide.is-rendered {
        visibility: visible
    }
    
    .splide__slide {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        box-sizing: border-box;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        list-style-type: none!important;
        margin: 0;
        outline: none;
        position: relative
    }
    
    .splide__slide img {
        vertical-align: bottom;
        width: 100%;
        height: auto;
    }
    
    .splide__slider {
        position: relative
    }
    
    .splide__spinner {
        animation: splide-loading 1s linear infinite;
        border: 2px solid #999;
        border-left-color: transparent;
        border-radius: 50%;
        bottom: 0;
        contain: strict;
        display: inline-block;
        height: 20px;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
        width: 20px
    }
    
    .splide__track {
        overflow: hidden;
        position: relative;
        z-index: 0
    }
    
    @keyframes splide-loading {
        0% {
            transform: rotate(0)
        }
        to {
            transform: rotate(1turn)
        }
    }
    
    .splide--draggable>.splide__slider>.splide__track,
    .splide--draggable>.splide__track {
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none
    }
    
    .splide--fade>.splide__slider>.splide__track>.splide__list,
    .splide--fade>.splide__track>.splide__list {
        display: block
    }
    
    .splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,
    .splide--fade>.splide__track>.splide__list>.splide__slide {
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        z-index: 0
    }
    
    .splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,
    .splide--fade>.splide__track>.splide__list>.splide__slide.is-active {
        opacity: 1;
        position: relative;
        z-index: 1
    }
    
    .splide--rtl {
        direction: rtl
    }
    
    .splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,
    .splide--ttb.is-active>.splide__track>.splide__list {
        display: block
    }
    
    .splide__arrow {
        -ms-flex-align: center;
        align-items: center;
        background: #ccc;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        display: -ms-flexbox;
        display: flex;
        height: 2em;
        -ms-flex-pack: center;
        justify-content: center;
        opacity: .7;
        padding: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 2em;
        z-index: 1
    }
    
    .splide__arrow svg {
        fill: #000;
        height: 1.2em;
        width: 1.2em
    }
    
    .splide__arrow:hover {
        opacity: .9
    }
    
    .splide__arrow:focus {
        outline: none
    }
    
    .splide__arrow--prev {
        left: 1em
    }
    
    .splide__arrow--prev svg {
        transform: scaleX(-1)
    }
    
    .splide__arrow--next {
        right: 1em
    }
    
    .splide__pagination {
        bottom: .5em;
        left: 0;
        padding: 0 1em;
        position: absolute;
        right: 0;
        z-index: 1
    }
    
    .splide__pagination__page {
        background: #ccc;
        border: 0;
        border-radius: 50%;
        display: inline-block;
        height: 8px;
        margin: 3px;
        opacity: .7;
        padding: 0;
        transition: transform .2s linear;
        width: 8px
    }
    
    .splide__pagination__page.is-active {
        background: #fff;
        transform: scale(1.4)
    }
    
    .splide__pagination__page:hover {
        cursor: pointer;
        opacity: .9
    }
    
    .splide__pagination__page:focus {
        outline: none
    }
    
    .splide__progress__bar {
        background: #ccc;
        height: 3px
    }
    
    .splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,
    .splide--nav>.splide__track>.splide__list>.splide__slide {
        border: 3px solid transparent;
        cursor: pointer
    }
    
    .splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,
    .splide--nav>.splide__track>.splide__list>.splide__slide.is-active {
        border: 3px solid #000
    }
    
    .splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,
    .splide--nav>.splide__track>.splide__list>.splide__slide:focus {
        outline: none
    }
    
    .splide--rtl>.splide__arrows .splide__arrow--prev,
    .splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,
    .splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev {
        left: auto;
        right: 1em
    }
    
    .splide--rtl>.splide__arrows .splide__arrow--prev svg,
    .splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,
    .splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg {
        transform: scaleX(1)
    }
    
    .splide--rtl>.splide__arrows .splide__arrow--next,
    .splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,
    .splide--rtl>.splide__track>.splide__arrows .splide__arrow--next {
        left: 1em;
        right: auto
    }
    
    .splide--rtl>.splide__arrows .splide__arrow--next svg,
    .splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,
    .splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg {
        transform: scaleX(-1)
    }
    
    .splide--ttb>.splide__arrows .splide__arrow,
    .splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,
    .splide--ttb>.splide__track>.splide__arrows .splide__arrow {
        left: 50%;
        transform: translate(-50%)
    }
    
    .splide--ttb>.splide__arrows .splide__arrow--prev,
    .splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,
    .splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev {
        top: 1em
    }
    
    .splide--ttb>.splide__arrows .splide__arrow--prev svg,
    .splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,
    .splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg {
        transform: rotate(-90deg)
    }
    
    .splide--ttb>.splide__arrows .splide__arrow--next,
    .splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,
    .splide--ttb>.splide__track>.splide__arrows .splide__arrow--next {
        bottom: 1em;
        top: auto
    }
    
    .splide--ttb>.splide__arrows .splide__arrow--next svg,
    .splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,
    .splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg {
        transform: rotate(90deg)
    }
    
    .splide--ttb>.splide__pagination,
    .splide--ttb>.splide__slider>.splide__pagination {
        bottom: 0;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        left: auto;
        padding: 1em 0;
        right: .5em;
        top: 0
    }
    
    .thumbnails {
        display: flex;
        margin: 1rem auto 0;
        padding: 0;
        justify-content: center;
    }
    
    .thumbnail {
        width: 70px;
        height: 70px;
        overflow: hidden;
        list-style: none;
        margin: 0 0.2rem;
        cursor: pointer;
    }
    
    .thumbnail img {
        width: 100%;
        height: auto;
    }
    /* Preloader styles */
    
    #preloader {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background-color: #074960;
        /* Change the background color as needed */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .spinner {
        border: 8px solid #f3f3f3;
        /* Light grey */
        border-top: 8px solid #267a99;
        /* Blue */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    /* Hide main content initially */
    
    #main-content {
        display: none;
    }
    /*event logs*/
    
    .event-logs {
        max-width: 720px;
        margin: 0 9rem;
        padding: 0;
        text-align: left;
        color: #292d2c;
    }
    
    .event-log-document h1 {
        font-size: 38px;
        font-weight: 600;
        letter-spacing: -1px;
        line-height: 1.3;
        margin: 0 0 15px;
    }
    
    .event-logs h2 {
        font-size: 1.35em;
        color: var(black);
        font-weight: 800;
        letter-spacing: 0.16em;
        line-height: 1.75em;
        margin: 0 0 1em 0;
        text-transform: uppercase;
    }
    
    .event-log-entry {
        display: grid;
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 18px;
        margin: 0 0 1.5rem;
        font-size: 16px;
        line-height: 1.8;
        text-align: left;
    }
    
    .event-log-entry time {
        color: black;
        font-weight: 800;
        font-size: 14px;
        padding-top: 0px;
        white-space: nowrap;
    }
    
    .event-log-entry p {
        color: inherit;
        margin: 0 0 .5rem;
        font-size: inherit;
        line-height: inherit;
        letter-spacing: 0;
    }
    /*     
    .event-logs a,
    .event-log-document a {
        color: inherit;
    }
    
    .event-logs a:hover,
    .event-log-document a:hover {
        color: inherit;
    }
     */
    
    .event-logs a:focus-visible,
    .event-log-document a:focus-visible {
        outline: 2px solid #087660;
        outline-offset: 4px;
    }
    
    .event-logs>p {
        color: inherit;
        letter-spacing: 0;
    }
    
    .event-log-page {
        margin: 0;
        color: #292d2c;
        background: white;
        font-family: "Open Sans", Helvetica, Arial, sans-serif;
        font-size: 15px;
        line-height: 1.8;
    }
    
    .event-log-document {
        max-width: 720px;
        margin: 60px auto;
        padding: 0 24px;
    }