html {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    max-width  : 100%;
    height     : 100%;
    overflow-x : hidden;
}

.anchor-primary {
    color: #2B79BF;
}

body {
    margin: 0px;
}

.active-bg {
    transition: background-color 0.25s cubic-bezier(.39, .19, .03, .92);
    background: #2B79BF !important;
}

.active-bg:hover {
    transition: background-color 0.25s cubic-bezier(.39, .19, .03, .92);
    background: #39a2ff !important;
}

.main-button {
    height   : 52px;
    width    : 172px;
    font-size: 20px !important;
}

.link-button {
    transition     : background-color 0.25s cubic-bezier(.39, .19, .03, .92);
    cursor         : pointer;
    display        : inline-flex;
    overflow       : visible;
    box-sizing     : border-box;
    line-height    : 1;
    font-family    : inherit;
    align-items    : center;
    white-space    : nowrap;
    justify-content: center;
    text-decoration: none;
    font-size      : 14px;
    min-width      : 48px;
    padding        : 0 16px;
    height         : 48px;
    border         : 4px solid transparent;
    border-radius  : 4px;
    color          : #FFFFFF;
    fill           : #FFFFFF;
    background     : #555555;
    box-shadow     : 0 2px 4px 0 rgba(0, 0, 0, .10), 0 1px 1px 0 rgba(0, 0, 0, .1);
}

.link-button:hover {
    transition: all 0.25s cubic-bezier(.39, .19, .03, .92);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .14), 0 1px 1px 0 rgba(0, 0, 0, .15);
    background: #767676;
}

.hero-area {
    background-color: #f2f2f2;
    width           : 100%;
    padding-top     : 60px;
    border-bottom   : 1px solid #bbb;
    height          : calc(100vh - 60px);
    /* viewport height */
}

.content-hero-area {
    height         : 100%;
    display        : flex;
    justify-content: left;
    align-items    : center;
}

.content-home {
    position    : relative;
    text-align  : left;
    margin-right: 48px;
    max-width   : 60%;
    margin-left : 10%;
    z-index     : 1;
    /*transition  : all 0.25s cubic-bezier(.39, .19, .03, .92);*/
}

.content-pic {
    position  : absolute;
    right     : 0%;
    bottom    : 0;
    max-height: 90%;
    opacity   : 1;
    transition: opacity 0.25s cubic-bezier(.39, .19, .03, .92);
}

.content-home h1 {
    font-size: 48px;
}

.content-home p {
    font-size: 24px;
}

h1 {
    font-size: 28px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    transition: color 0.25s cubic-bezier(.39, .19, .03, .92);
    color     : #444;
}

/* Article related css */

.std-section-sizing {
    max-width: 1280px;
    margin   : 0 auto;
    padding  : 0 0;
}

.content-lt {
    position    : relative;
    text-align  : left;
    margin-right: 48px;
    /* max-width   : 520px; */
    margin-left : 10%;
    z-index     : 1;
    /*transition  : all 0.25s cubic-bezier(.39, .19, .03, .92);*/

    font-size     : 15px;
    line-height   : 28px;
    /* letter-spacing: 0.01em; */
}

.article-font {
    /* font-family: Georgia, serif; */
}

.article-img-wrapper {
    height: 480px;
    max-width: 760px;

    background-color: white;
    border-radius: 8px;
}

.article-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.content-lt p {
    font-size     : 18px;
    /* letter-spacing: 0.5px; */
    text-overflow: ellipsis;
    max-width: 760px;
    overflow: hidden;
}

.content-lt li {
    max-width: 760px;
}

.header-t {
    font-size  : 48px;
    font-weight: 500;
    margin-left: 10%;
    margin-top : 0;
    /*transition : all 0.25s cubic-bezier(.39, .19, .03, .92);*/
}

.header-subt {
    font-size    : 24px;
    font-weight  : 300;
    margin-left  : 10%;
    margin-bottom: 0;
    /*transition   : all 0.25s cubic-bezier(.39, .19, .03, .92);*/
}

p,
ul,
li {
    transition: color 0.25s cubic-bezier(.39, .19, .03, .92);
    color     : #000;
}

.anchor {
    padding-top: 14px;
}

.section-text {
    font-size  : 48px;
    font-weight: 500;
    margin-left: 10%;
    /*transition : all 0.25s cubic-bezier(.39, .19, .03, .92);*/
}


.theme-bg-color {
    background: #fff;
}

.fancy-li li:before {
    content     : '\1F535';
    margin-left : -20px;
    margin-right: 10px;
}

.fancy-li li li:before {
    content     : '\1F537';
    margin-left : -20px;
    margin-right: 10px;
}

.fancy-li li li li:before {
    content     : '';
    margin-left : -20px;
    margin-right: 10px;
}

.fancy-li li {
    list-style : none;
    line-height: 32px;
}

.fancy-li li li {
    line-height     : 32px;
}

.fancy-li li li li {
    line-height     : 32px;
}

/* FLEX CONTAINER & ELEMENTS */

.flex-container {
    display: table;
    margin : 0 auto;
}

.subflex-container {
    margin         : 0px 0px 60px 0px;
    display        : flex;
    width          : 100%;
    max-width      : 900px;
    /* basically 384px * 2 + some margin */
    flex-wrap      : wrap;
    justify-content: center;
}

.flex-element {
    opacity            : 1;
    position           : relative;
    display            : table;
    margin             : 0 auto;
    border             : 1px solid #777;
    border-radius      : 4px;
    margin             : 16px;
    /* 256px + 128px */
    width              : 384px;
    /* 256px + 128px */
    height             : 384px;
    -webkit-align-items: center;
    align-items        : center;
    box-shadow         : 0 2px 4px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.13);
    transition         : box-shadow 0.25s;
    overflow           : hidden;
    background-color   : #FFF;
}

.flex-element-overlay {
    height    : 100%;
    width     : 100%;
    position  : absolute;
    left      : 0;
    top       : 0;
    background: rgba(30, 30, 30, .75);
}

.flex-element-overlay-listener {
    opacity   : 0;
    transition: all 0.25s cubic-bezier(.39, .19, .03, .92);
}

.flex-element-overlay-listener:hover {
    opacity   : 1;
    transition: all 0.25s cubic-bezier(.39, .19, .03, .92);
}

/* This is a workaround for a bug (acrylic effect doesn't animate when animating the opacity property from a nested element) */
.flex-element-overlay-acrylic {
    transition        : all 0.25s cubic-bezier(.39, .19, .03, .92);
    opacity           : 0;
    background-image  : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAABlBMVEVbW1vh4eGoqZ1WAAAAAnRSTlMDA8S3z0EAAAF9SURBVHgBFc4DrFUBGMDx/0G3e7Bs27b7Lpdt256XvvOYbbvGbD1riFNT1vAwNlXvN/vHqpOv/dY9IRyq4wcHwMjZArsh5/0BmXBBuDW1zpF2E6B1jZ+T0qcLI77uGfCmHkRmdjQv1hBafjrRZ+eILBq/nkBgwuN6M0pcP4sj0naNpgsR6dg/5YCyNXuHfbWFkjYl+mHCH6XGzvo1WjQSvu4I9OIQWMiIEW1qZHFwhHXPaqfktqvTv1UH4IARGmULoaW9zpsqbKg5gLxHyqNocuaEppCTnphzw1Fa3bI7pU4Q2s9wY9ZXYRANoJfSOhaubNC25+vf03eCpMwJzCh4MmlrmQvhG0a0yjOIhnq1qn9b2GFtWWq0gfE1CJ+zs5hhLCO7qmD0aLykSQtlU81G4Y5hJbqzrJ/tQrzmEjNcA250qL5j0RhFu7h1xpYpWSMa7IkYkKixIy8wlUhwpSzswJF4g4sV1bJIcV5Py45DWY10c4IpHNqR33LFJPkHmI5t0JckK6sAAAAASUVORK5CYII=');
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .10), 0 1px 1px 0 rgba(0, 0, 0, .1);
    box-shadow        : 0 2px 4px 0 rgba(0, 0, 0, .10), 0 1px 1px 0 rgba(0, 0, 0, .1);
}

.flex-element-overlay-acrylic:hover {
    opacity   : 1;
    transition: all 0.25s cubic-bezier(.39, .19, .03, .92);
}

.acrylic-overlay {
    background-color: rgba(220, 220, 220, .85);
}

/* End of workaround */

.flex-element-image {
    margin       : 0;
    position     : absolute;
    top          : 50%;
    left         : 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);
    width        : 100%;
}

.flex-element-text-overlay {
    text-align   : center;
    width        : 90%;
    margin       : 0;
    position     : absolute;
    top          : 50%;
    left         : 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);
}

.flex-element:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23);
}

.flex-element+.flex-extended-element {
    max-width: 802px;
    width    : 100%;
    height   : 384px;
}

/* .image-hero {*/
    /*width: auto;*/
/* } */

section {
    border-bottom: 1px solid #bbb;
}

/* OTHER ELEMENTS */

nav {
    height       : 60px;
    width        : 100%;
    z-index      : 1000;
    position     : fixed;
    border-radius: 0 0 4px 4px;
}

footer {
    border-radius   : 4px 4px 0 0;
    background-color: #f9f9f9;
    padding         : 12px;
}


.topnav {
    height    : 64px;
    margin-top: -64px;
    overflow  : hidden;
}

.topnav a {
    float          : right;
    color          : #000;
    text-align     : center;
    padding        : 22px 16px;
    text-decoration: none;
    font-size      : 16px;
    height         : 60px;
}

.logo {
    margin    : 10px;
    height    : 36px;
    text-align: center;
}

.center-wrapper {
    height    : 60px;
    text-align: center;
}

/* Add acrylic noise */
.acrylic {
    transition        : background-color 0.25s cubic-bezier(.39, .19, .03, .92);
    background-image  : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAABlBMVEVbW1vh4eGoqZ1WAAAAAnRSTlMDA8S3z0EAAAF9SURBVHgBFc4DrFUBGMDx/0G3e7Bs27b7Lpdt256XvvOYbbvGbD1riFNT1vAwNlXvN/vHqpOv/dY9IRyq4wcHwMjZArsh5/0BmXBBuDW1zpF2E6B1jZ+T0qcLI77uGfCmHkRmdjQv1hBafjrRZ+eILBq/nkBgwuN6M0pcP4sj0naNpgsR6dg/5YCyNXuHfbWFkjYl+mHCH6XGzvo1WjQSvu4I9OIQWMiIEW1qZHFwhHXPaqfktqvTv1UH4IARGmULoaW9zpsqbKg5gLxHyqNocuaEppCTnphzw1Fa3bI7pU4Q2s9wY9ZXYRANoJfSOhaubNC25+vf03eCpMwJzCh4MmlrmQvhG0a0yjOIhnq1qn9b2GFtWWq0gfE1CJ+zs5hhLCO7qmD0aLykSQtlU81G4Y5hJbqzrJ/tQrzmEjNcA250qL5j0RhFu7h1xpYpWSMa7IkYkKixIy8wlUhwpSzswJF4g4sV1bJIcV5Py45DWY10c4IpHNqR33LFJPkHmI5t0JckK6sAAAAASUVORK5CYII=');
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .10), 0 1px 1px 0 rgba(0, 0, 0, .1);
    box-shadow        : 0 2px 4px 0 rgba(0, 0, 0, .10), 0 1px 1px 0 rgba(0, 0, 0, .1);
}

@supports (backdrop-filter: blur(30px) saturate(125%)) or (-webkit-backdrop-filter:blur(30px) saturate(125%)) {
    .acrylic {
        -webkit-backdrop-filter: blur(30px) saturate(125%);
        backdrop-filter        : blur(30px) saturate(125%);
    }

    /* This is a workaround for a bug (acrylic effect doesn't animate) */
    .flex-element-overlay-acrylic {
        -webkit-backdrop-filter: blur(30px) saturate(125%);
        backdrop-filter        : blur(30px) saturate(125%);
    }

    /* End of workaround */
}

/* Timeline */

.timeline {
    line-height: 1.4em;
    list-style : none;
    margin     : 16px;
    padding    : 0px;
    width      : calc(100% - 32px);
}

.timeline h1,
.timeline h2,
.timeline h3,
.timeline h4,
.timeline h5,
.timeline h6 {
    line-height: inherit;
    margin     : 0;
}

/*----- TIMELINE ITEM -----*/
.timeline-item {
    padding-left: 40px;
    position    : relative;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

/*----- TIMELINE INFO -----*/
.timeline-info {
    font-size     : 12px;
    font-weight   : 700;
    letter-spacing: 0.5px;
    margin        : 0 0 .5em 0;
    text-transform: uppercase;
    white-space   : nowrap;
}

.timeline-info-span {
    border       : #2B79BF 1px solid;
    background   : #2B79BF;
    color        : white;
    border-radius: 4px;
    padding      : 2px 4px;
}

/*----- TIMELINE MARKER -----*/
.timeline-marker {
    position: absolute;
    top     : 0;
    bottom  : 0;
    left    : 0;
    width   : 15px;
}

.timeline-marker:before {
    background   : #2B79BF;
    border       : 3px solid transparent;
    border-radius: 100%;
    content      : "";
    display      : block;
    height       : 13px;
    position     : absolute;
    top          : 2px;
    left         : -2px;
    width        : 13px;
    transition   : all 0.25s cubic-bezier(.39, .19, .03, .92);
}

.timeline-marker:after {
    content      : "";
    width        : 3px;
    background   : #CCD5DB;
    display      : block;
    position     : absolute;
    top          : 23px;
    bottom       : 0;
    left         : 6px;
    border-radius: 1.5px;
}

.timeline-item:last-child .timeline-marker:after {
    content: none;
}

.timeline-item:not(.period):hover .timeline-marker:before {
    background: transparent;
    border    : 3px solid #2B79BF;
}

/*----- TIMELINE CONTENT -----*/
.timeline-content {
    padding-bottom: 40px;
    padding-right : 32px;
}

.timeline-content p:last-child {
    margin-bottom: 0;
}

/*----- TIMELINE PERIOD -----*/
.period {
    padding: 0;
}

.period .timeline-info {
    display: none;
}

.period .timeline-marker:before {
    background   : transparent;
    content      : "";
    width        : 19px;
    height       : auto;
    border       : none;
    border-radius: 2px;
    top          : 0;
    bottom       : 30px;
    position     : absolute;
    border-top   : 3px solid #CCD5DB;
    border-bottom: 3px solid #CCD5DB;
}

.period .timeline-marker:after {
    content: "";
    height : 32px;
    top    : auto;
}

.period .timeline-content {
    padding: 40px 0 70px;
}

.period .timeline-title {
    margin: 0;
}

.timeline-title-span {
    border       : #444444 1px solid;
    background   : #444444;
    color        : white;
    border-radius: 4px;
    padding      : 2px 8px;
    transition   : all 0.25s cubic-bezier(.39, .19, .03, .92);
}

div.social {
    grid-column: first;
    display    : block;
}

div.social a {
    text-decoration: none;
}

div.social a:not(:first-child) {
    margin-left    : 8px;
    text-decoration: none;
}

/*----------------------------------------------
      MOD: TIMELINE SPLIT
  ----------------------------------------------*/
@media only screen and (min-width: 768px) {}

/*----------------------------------------------
      MOD: TIMELINE CENTERED
  ----------------------------------------------*/
@media only screen and (min-width: 992px) {}

@media only screen and (min-width: 1280px) {
    .content-pic {
        opacity   : 1 !important;
        transition: opacity 0.25s cubic-bezier(.39, .19, .03, .92);
    }

    .timeline {
        max-width: 1280px;
    }
}

/* End of timeline */

/* Intermediate state */
@media only screen and (max-width: 420px) {
    .flex-element {
        width : 300px;
        height: 300px;
    }

    .flex-element+.flex-extended-element {
        width : 300px !important;
        height: 300px !important;
    }
}

/* Specifically made for very small devices (e.g. iPhone 5S, Lumia 520, Galaxy Fold, etc..) */
@media only screen and (max-width: 380px) {
    .logo {
        height     : 24px;
        margin     : 16px;
        margin-left: -0px;
    }

    .flex-element {
        width : 240px;
        height: 240px;
    }

    .flex-element+.flex-extended-element {
        width : 240px !important;
        height: 240px !important;
    }
}

@media only screen and (max-width: 720px) {
    .content-pic {
        opacity   : 0;
        transition: opacity 0.25s cubic-bezier(.39, .19, .03, .92);
    }

    .center-wrapper {
        text-align : left;
        margin-left: 8px;
    }

    .content-hero-area {
        justify-content: center;
    }

    .content-home h1 {
        font-size: 24px;
    }

    .content-home p {
        font-size: 20px;
    }

    .section-text {
        font-size  : 36px;
        margin-left: 24px;
    }

    .content-home {
        margin-left : 24px;
        margin-right: 24px;
        max-width   : 100%;
        text-align  : center;
        /*transition  : all 0.25s cubic-bezier(.39, .19, .03, .92);*/
    }

    .flex-element+.flex-extended-element {
        max-width: 802px;
        width    : 384px;
        height   : 384px;
    }
}

@media only screen and (min-width: 720px) {

    .content-pic {
        opacity   : 0.4;
        transition: opacity 0.25s cubic-bezier(.39, .19, .03, .92);
    }

    .timeline-split .timeline,
    .timeline-centered .timeline {
        display: table;
    }

    .timeline-split .timeline-item,
    .timeline-centered .timeline-item {
        display: table-row;
        padding: 0;
    }

    .timeline-split .timeline-info,
    .timeline-centered .timeline-info,
    .timeline-split .timeline-marker,
    .timeline-centered .timeline-marker,
    .timeline-split .timeline-content,
    .timeline-centered .timeline-content,
    .timeline-split .period .timeline-info,
    .timeline-centered .period .timeline-info {
        display       : table-cell;
        vertical-align: top;
        transition    : all 0.25s cubic-bezier(.39, .19, .03, .92);
    }

    .timeline-split .timeline-marker,
    .timeline-centered .timeline-marker {
        position: relative;
    }

    .timeline-split .timeline-content,
    .timeline-centered .timeline-content {
        padding-left: 28px;
    }

    .timeline-split .timeline-info,
    .timeline-centered .timeline-info {
        padding-right: 28px;
    }

    .timeline-content {
        margin-right: 0px;

    }

    .timeline-split .period .timeline-title,
    .timeline-centered .period .timeline-title {
        position: relative;
        left    : -72px;
    }
}

/* For timeline */
@media only screen and (min-width: 960px) {

    .timeline-centered,
    .timeline-centered .timeline-item,
    .timeline-centered .timeline-info,
    .timeline-centered .timeline-marker,
    .timeline-centered .timeline-content {
        display: block;
        padding: 0;
    }

    .timeline-centered .timeline-item {
        padding-bottom: 40px;
        overflow      : hidden;
    }

    .timeline-centered .timeline-marker {
        position   : absolute;
        left       : 50%;
        margin-left: -7px;
    }

    .timeline-centered .timeline-info,
    .timeline-centered .timeline-content {
        width: calc(50% - 36px);
    }

    .timeline-centered>.timeline-item:nth-child(odd) .timeline-info {
        float     : left;
        text-align: right;
    }

    .timeline-centered>.timeline-item:nth-child(odd) .timeline-content {
        float     : right;
        text-align: left;
    }

    .timeline-centered>.timeline-item:nth-child(even) .timeline-info {
        float     : right;
        text-align: left;
    }

    .timeline-centered>.timeline-item:nth-child(even) .timeline-content {
        float     : left;
        text-align: right;
    }

    .timeline-centered>.timeline-item.period .timeline-content {
        float     : none;
        padding   : 0;
        width     : 100%;
        text-align: center;
    }

    .timeline-centered .timeline-item.period {
        padding: 50px 0 90px;
    }

    .timeline-centered .period .timeline-marker:after {
        height: 30px;
        bottom: 0;
        top   : auto;
    }

    .timeline-centered .period .timeline-title {
        position: absolute;
        right   : -72px;
        top     : 46px;
    }
}

@media (prefers-color-scheme: dark) {
    section {
        border-bottom: 1px solid #444444;
    }

    .topnav a {
        color: #fff;
    }

    .theme-bg-color {
        background: #1e1e1e;
    }

    .acrylic-overlay {
        background-color: rgba(30, 30, 30, .85);
    }

    .hero-area {
        background-color: #272727;
        border-bottom   : 1px solid #444444;
    }

    .container .box {
        background-color: #222222;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        transition: color 0.25s cubic-bezier(.39, .19, .03, .92);
        color     : #eee;
    }

    p,
    ul,
    li {
        transition: color 0.25s cubic-bezier(.39, .19, .03, .92);
        color     : #fff;
    }

    footer {
        background-color: #111111;
    }
}