* {
    box-sizing: border-box
}

body {
    font-family: 'IBM Plex Mono', monospace;
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; */
    line-height: 1.8;
    letter-spacing: 0px;
    margin: 0;
    background-color: #000
}

.base {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

a,
a:link {
    color: #00dada
}

a:visited {
    color: #01FEFE
}

a:hover {
    color: #00dada
}

a:active {
    color: #01FEFE
}

.black {
    color: #FFFFFF
}

.white {
    color: #000000
}

.green {
    color: #00FF00
}

.teal {
    color: #01FEFE
}

.grey {
    color: #777777
}

.purple {
    color: #3B82F6
}

.pink {
    color: #2563EB
}

p {
    font-size: 1rem;
    color: white
}

/* .links a {
    display: none;
    color: none;
    text-decoration: none;
} */

h1 {
    font-size: 2.5rem;
    font-weight: 300;
    color: white
}

h2 {
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: -10px;
    color: #00FF00
}

h3 {
    font-size: 1.75rem;
    font-weight: 300;
    margin-bottom: -10px;
    color: white
}

h4 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0px;
    margin-top: 10px;
    color: white
}

h5 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0px;
    margin-top: 10px;
    color: white
}

h6 {
    font-size: 1.125rem;
    font-weight: 500;
    color: white
}

.d1 {
    font-size: 6rem;
    font-weight: 300
}

.d2 {
    font-size: 5.5rem;
    font-weight: 300
}

.d3 {
    font-size: 4.5rem;
    font-weight: 300
}

.d4 {
    font-size: 3.5rem;
    font-weight: 300
}

code,
.code {
    font-family: Consolas, monaco, monospace
}

.small1 {
    font-size: 0.75rem;
    font-weight: 500;
    color: white
}

.small2 {
    font-size: 0.625rem;
    font-weight: 500
}

.intro {
    font-size: 1.5625rem;
    /* font-weight: 300 */
}

.intro1 {
    font-size: 1.875rem;
    /* font-weight: 300 */
}

.intro2 {
    font-size: 1.35rem;
    font-weight: 300;
}

.i {
    font-style: italic
}

.b {
    font-weight: bold
}

.underline {
    text-decoration: underline
}

.strike {
    text-decoration: line-through
}

.ttc {
    text-transform: capitalize
}

.ttu {
    text-transform: uppercase
}

.highlight {
    background: #042e70
}

.highlightpurp {
    background: #3B82F6
}

.font-300 {
    font-weight: 300
}

.font-400 {
    font-weight: 400
}

.font-500 {
    font-weight: 500
}

.font-700 {
    font-weight: 700
}

.left {
    text-align: left
}

.right {
    text-align: right
}

.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto
}

.justify {
    text-align: justify
}

.container-f,
.container-1440,
.container-1024,
.container-768,
.container-414 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 100%
}

.container-1440 {
    max-width: 1440px
}

.container-1024 {
    max-width: 1024px
}

.container-768 {
    max-width: 768px
}

.container-414 {
    max-width: 414px
}

.center-vertical {
    align-items: center
}

.position-relative {
    position: relative
}

.position-absolute {
    position: absolute
}

.position-bottom {
    align-items: flex-end
}

[class^="section-"] {
    padding-left: 40px;
    padding-right: 40px;
    width: 100%
}

.section-dark {
    background-color: #011d1d
}

.section-light {
    background-color: #000
}

.section-grey {
    background-color: #121314
}

.section-color {
    background-color: #01424e
}

.section-clear {
    background-color: transparent
}

.col-12 {
    width: 100%
}

.col-11 {
    width: 91.66667%
}

.col-10 {
    width: 83.33333%
}

.col-9 {
    width: 75%
}

.col-8 {
    width: 66.66667%
}

.col-7 {
    width: 58.33333%
}

.col-6 {
    width: 50%
}

.col-5 {
    width: 41.66667%
}

.col-4 {
    width: 33.33333%
}

.col-3 {
    width: 25%
}

.col-2 {
    width: 16.66667%
}

.col-1 {
    width: 8.33333%
}

@media (max-width: 767px) {
    [class^="col-"] {
        width: 100%;
        padding: 0 !important
    }
}

.pt-0 {
    padding-top: 0
}

.pt-1 {
    padding-top: 20px
}

.pt-2 {
    padding-top: 40px
}

.pt-3 {
    padding-top: 100px
}

.pb-0 {
    padding-bottom: 0
}

.pb-1 {
    padding-bottom: 20px
}

.pb-2 {
    padding-bottom: 40px
}

.pb-3 {
    padding-bottom: 100px
}

.pl-0 {
    padding-left: 0
}

.pl-1 {
    padding-left: 20px
}

.pl-2 {
    padding-left: 40px
}

.pl-3 {
    padding-left: 100px
}

.pr-0 {
    padding-right: 0
}

.pr-1 {
    padding-right: 20px
}

.pr-2 {
    padding-right: 40px
}

.pr-3 {
    padding-right: 100px
}

.mt-0 {
    margin-top: 0
}

.mt-1 {
    margin-top: 20px
}

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

.mt-3 {
    margin-top: 100px
}

.mb-0 {
    margin-bottom: 0
}

.mb-1 {
    margin-bottom: 20px
}

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

.mb-3 {
    margin-bottom: 100px
}

.ml-0 {
    margin-left: 0
}

.ml-1 {
    margin-left: 20px
}

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

.ml-3 {
    margin-left: 100px
}

.mr-0 {
    margin-right: 0
}

.mr-1 {
    margin-right: 20px
}

.mr-2 {
    margin-right: 40px
}

.mr-3 {
    margin-right: 100px
}

.card-dark,
.card-light,
.card-grey,
.card-color {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    box-shadow: 4px 4px 20px 4px rgba(0, 0, 0, 0.1);
    padding: 30px
}

.card-dark {
    background-color: #FFF
}

.card-light {
    background-color: #000
}

.card-grey {
    background-color: #EEF3F7
}

.card-color {
    background-color: #C1FFEF
}

.card-highlight {
    width: 100%;
    height: 100%;
    border-radius: 6px 6px 0px 0px;
    box-shadow: 4px 4px 20px 4px rgba(0, 0, 0, 0.1);
    padding: 30px
}

.card-highlight {
    background-color: #000
}

.nav-bar {
    position: fixed;
    padding: 0;
    background-color: #121314;
    height: 65px;
    z-index: 1
}

.nav-bar+div {
    padding-top: 65px
}

.nav-bar .container-1440 {
    height: 100%;
    justify-content: space-between
}

.nav-bar_logo {
    margin-top: 2px;
}

.nav-bar_logo img {
    max-width: 100px;
}


.nav-bar_links a {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    display: none;
    font-size: 16px;
    color: white;
    text-decoration: none;
    padding: 32px
}

.nav-bar_links a:hover {
    color: #3B82F6
}

.nav-bar_links a.active {
    color: #2563EB
}

.nav-bar_controls {
    display: flex
}

.nav-bar_control {
    background: transparent;
    border: 0;
    padding: 0 20px;
    cursor: pointer;
    display: flex;
    align-items: center
}

.nav-bar_control svg>* {
    fill: #2563EB
}

.nav-bar_control:focus {
    outline: none
}

.nav-bar_control:hover svg>* {
    fill: #3B82F6
}

.nav-bar_dropdown {
    background: #121314;
    position: absolute;
    top: 65px;
    left: 0;
    right: 0
}

.nav-bar_dropdown .nav-bar_links {
    margin-left: auto
}

.nav-bar_dropdown .nav-bar_links a {
    font-size: 24px;
    color: white;
    text-decoration: none;
    padding: 10px 40px 20px 0;
    display: block;
    text-align: right;
    line-height: 1
}

.nav-bar_dropdown-toggle .menu,
.nav-bar_dropdown-toggle .close {
    font-family: 'IBM Plex Sans', sans-serif;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    margin-right: 20px
}

.nav-bar_dropdown-toggle .close,
.nav-bar_dropdown-toggle.collapsed .menu {
    display: inline-block;
    color: white
}

.nav-bar_dropdown-toggle .menu,
.nav-bar_dropdown-toggle.collapsed .close {
    display: none
}

.nav-bar_dropdown .nav-bar_links a:hover {
    color: #2563EB
}

.nav-bar_dropdown .nav-bar_links a.active {
    color: #3B82F6
}

.nav-bar_dropdown-toggle {
    border-right: 1px solid white
}

.nav-bar_dropdown-toggle .bars,
.nav-bar_dropdown-toggle .bars {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 25px;
    position: relative
}

.nav-bar_dropdown-toggle .bars:after,
.nav-bar_dropdown-toggle .bars:before,
.nav-bar_dropdown-toggle .bars span,
.nav-bar_dropdown-toggle .bars:after,
.nav-bar_dropdown-toggle .bars:before,
.nav-bar_dropdown-toggle .bars span {
    position: absolute;
    left: 0;
    top: 10px;
    right: 0;
    bottom: auto;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    height: 4px;
    border-radius: 2px;
    content: "";
    background: white;
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    transform: rotate(35deg)
}

.nav-bar_dropdown-toggle .bars span,
.nav-bar_dropdown-toggle .bars span {
    top: 10px;
    opacity: 0
}

.nav-bar_dropdown-toggle .bars:after,
.nav-bar_dropdown-toggle .bars:after {
    top: 10px;
    -webkit-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    transform: rotate(-35deg)
}

.nav-bar_dropdown-toggle.collapsed .bars:after,
.nav-bar_dropdown-toggle.collapsed .bars:before,
.nav-bar_dropdown-toggle.collapsed .bars span,
.nav-bar_dropdown-toggle.collapsed .bars:after,
.nav-bar_dropdown-toggle.collapsed .bars:before,
.nav-bar_dropdown-toggle.collapsed .bars span {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1
}

.nav-bar_dropdown-toggle.collapsed .bars:after,
.nav-bar_dropdown-toggle.collapsed .bars:after {
    top: 18px
}

.nav-bar_dropdown-toggle.collapsed .bars:before,
.nav-bar_dropdown-toggle.collapsed .bars:before {
    top: 2px
}

@media (max-width: 479px) {

    .nav-bar_dropdown-toggle .menu,
    .nav-bar_dropdown-toggle .close,
    .nav-bar_dropdown-toggle.collapsed .menu,
    .nav-bar_dropdown-toggle.collapsed .close {
        display: none
    }
}

@media (min-width: 768px) {
    .nav-bar_links a {
        display: inline
    }

    .nav-bar_dropdown-toggle:not(.show-always),
    .nav-bar_dropdown {
        display: none
    }
}

.footer {
    background-color: #121314;
    min-height: 320px
}

.footer .container-1440 {
    height: 100%;
    justify-content: space-between
}

.footer-section-title {
    font-weight: bold;
    margin: 0 0 15px
}

.footer p:not(.footer-section-title) {
    margin: 0
}

.information {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px
}

.contact-information,
.social-media {
    margin-right: 60px
}

.contact-information p:last-child {
    max-width: 200px;
    margin-top: 30px
}

.social-media ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.social-media li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: black
}

.social-media li img {
    margin-right: 15px
}

.newsletter {
    max-width: 575px
}

.newsletter .input-group {
    margin-top: 30px
}

.input-group {
    width: 290px;
    height: 35px;
    display: flex;
    max-width: 100%;
    border-radius: 4px;
    background: #fff;
    position: relative;
    border: 1px solid #2563EB;
    padding: 0 0 0 30px
}

.input-group img {
    position: absolute;
    left: 7px;
    top: 10px
}

.input-group input {
    border: 0;
    width: 195px;
    padding-right: 5px;
    font-size: 14px
}

.input-group input:focus {
    outline: none
}

.input-group button {
    height: 100%;
    width: 85px;
    color: #fff;
    background-color: #2563EB;
    border: 0;
    cursor: pointer;
    margin-left: auto;
    font-size: 14px
}

.input-group button:focus {
    outline: none
}

.footer-left-aligned .container-1440 {
    flex-direction: column;
    align-items: flex-start
}

.footer-left-aligned .social-media {
    margin-bottom: 20px
}

.footer-left-aligned .social-media li {
    display: inline-block
}

.footer.footer-left-aligned p {
    margin-top: 20px
}

.fancybox-overlay {
    background-color: black
}

.fancybox-outer {
    position: static
}

.fancybox-close {
    top: 0;
    right: 0
}

.fancybox-nav {
    display: flex;
    width: 36px;
    height: 36px;
    top: calc(50% - 36px)
}

.fancybox-nav span {
    position: static;
    visibility: visible;
    height: 36px;
    margin-top: 0
}

.fancybox-prev {
    left: 0
}

.fancybox-next {
    right: 0
}

.fancybox-skin {
    background-color: transparent;
    box-shadow: none !important
}

.fancybox-next span {
    right: 0;
    background: url("../images/next-arrow.svg") center center no-repeat
}

.fancybox-prev span {
    left: 0;
    background: url("../images/next-arrow.svg") center center no-repeat;
    transform: rotate(180deg)
}

.fancybox-close {
    height: 20px;
    width: 20px;
    background: url("../images/close.svg") center center no-repeat;
    background-color: transparent;
    position: static;
    margin-left: 20px
}

.fancybox-control-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 40px;
    background-color: rgba(0, 0, 0, 0.5)
}

.open-image {
    background-color: transparent;
    border: 0;
    height: 20px;
    width: 20px;
    cursor: pointer
}

.open-image:focus {
    outline: none
}

.fancybox-image {
    display: flex;
    align-items: center;
    justify-content: center
}

.fancybox-image img {
    max-width: 100%
}

.image-cover {
    height: 100%;
    width: 100%
}

.image-fill {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    background-position: 50% 50%
}

.image-responsive {
    height: auto;
    max-width: 100%;
    border-radius: 6px
}

.shadow {
    box-shadow: 4px 4px 20px 4px rgba(0, 0, 0, 0.1)
}

.shadow-hover {
    transition: box-shadow 0.5s
}

.shadow-hover:hover {
    box-shadow: 4px 4px 20px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.5s
}

#top,
#bottom,
#left,
#right {
    background: #01FEFE;
    position: fixed
}

#left,
#right {
    top: 0;
    bottom: 0;
    width: 15px
}

#left {
    left: 0
}

#right {
    right: 0
}

#top,
#bottom {
    left: 0;
    right: 0;
    height: 15px
}

#top {
    top: 0
}

#bottom {
    bottom: 0
}

/* code for animated blinking cursor */
.typed-cursor {
    opacity: 1;
    font-weight: 100;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    -ms-animation: blink 0.7s infinite;
    -o-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

@-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.typed-fade-out {
    opacity: 0;
    animation: 0;
    transition: opacity .25s;
}