* {
        margin: 0px;
        padding: 0px;
    }
    
    @font-face {
        font-family: 'IBMPlexSansThaiLooped';
        font-style: normal;
        font-weight: 400;
        src: local('IBMPlexSansThaiLooped Regular'), local('IBMPlexSansThaiLooped-Regular'), url('https://tinimalitius.com/assets/fonts/IBM_Plex_Sans_Thai_Looped/IBMPlexSansThaiLooped-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('https://tinimalitius.com/assets/fonts/IBM_Plex_Sans_Thai_Looped/IBMPlexSansThaiLooped-Regular.woff') format('woff');
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }

    @font-face {
        font-family: 'IBMPlexSansThaiLooped-Bold';
        font-style: normal;
        font-weight: 700;
        src: local('IBMPlexSansThaiLooped Bold'), local('IBMPlexSansThaiLooped-Bold'), url('https://tinimalitius.com/assets/fonts/IBM_Plex_Sans_Thai_Looped/IBMPlexSansThaiLooped-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('https://tinimalitius.com/assets/fonts/IBM_Plex_Sans_Thai_Looped/IBMPlexSansThaiLooped-Bold.woff') format('woff');
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    
    @font-face {
        font-family: 'MarcellusSC';
        font-style: normal;
        font-weight: 400;
        src: local('MarcellusSC Regular'), local('MarcellusSC-Regular'), url('https://tinimalitius.com/assets/fonts/Marcellus_SC/MarcellusSC-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('https://tinimalitius.com/assets/fonts/Marcellus_SC/MarcellusSC-Regular.woff') format('woff');
        /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    
    html,
    body {
        height: 100%;
    }
    
    body {
        display: flex;
        flex-direction: column;
    }
    /* ----- Neutralize some Boostraap css  --------------------------------------------------- */
    
    .burger {
        padding-top: 18px;
    }
    
    .headergram {
        margin-bottom: 12px;
        margin-top: -12px;
    }
    
    .tinkigram {
        width: 45px;
        float: left;
    }
    
    .tinkiname {
        float: left;
        padding-top: 11px;
        margin-left: 12px;
    }
    
    .tinkigram img {
        width: 100%;
    }
    
    .navbar-header {
        margin-left: 11px;
    }
    
    .navbar-default {
        background-color: #ffffff;
        border: none;
    }
    
    .container .jumbotron,
    .container-fluid .jumbotron {
        border-radius: none;
    }
    
    .navbar-default .navbar-toggle:focus,
    .navbar-default .navbar-toggle:hover {
        background-color: transparent;
    }
    
    .navbar-default .navbar-toggle {
        border: none;
    }
    /* ----- General --------------------------------------------------- */
    
    body {
        /* font-family: niveau-grotesk, sans-serif; */
        font-family: IBMPlexSansThaiLooped;
        font-style: normal;
        /* font-weight: 200; */
        font-size: 16px;
        color: #546265;
    }
    
    html {
        width: 100%;
        height: 100%;
    }
    
    h1 {
        font-size: 3rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    h3 {
        font-size: 1.8rem;
    }
    
    h4 {
        font-size: 1.5rem;
    }
    
    h5 {
        font-size: 1.2rem;
        font-weight: bold;
    }
    
    a:link {
        color: #e6718e;
    }
    
    a:hover {
        color: #065043 !important;
    }
    
    a:visited {
        color: #e6718e;
    }

    strong, b {
        font-family: IBMPlexSansThaiLooped-Bold;
        font-style: normal;
        font-weight:700;
    }

    /* ----- Menu  --------------------------------------------------- */
    
    .navbar {
        padding-top: 30px;
        padding-bottom: 10px;
    }
    
    .navbar-brand {
        font-size: 24px;
        font-weight: regular;
        letter-spacing: 1px;
        font-family: MarcellusSC;
    }
    
    .navbar-right {
        font-size: 12px;
        text-transform: uppercase;
        float: left!important;
    }
    
    a:link.active{
        font-family: IBMPlexSansThaiLooped-Bold;
        font-style: normal;
        font-weight:700;
        color: #065043 !important;
    }
    
    .ghost {
        width: 98%;
        margin: 0 auto;
        flex: 1 0 auto;
    }
    
    .ghostHeader {
        width: 100%;
    }
    /* ----- Masonry  --------------------------------------------------- */
    
    .grid-item {
        padding: 7.5px;
    }
    
    .thumbnail {
        position: relative;
        overflow: hidden;
        padding: 0;
        border: none;
        border-radius: 0;
    }
    
    .img-full-width {
        width: 100%;
    }
    
    .caption {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        padding: 15px;
        display: none;
        text-align: center;
        z-index: 2;
    }
    
    .hovereffect {
        width: 100%;
        height: 100%;
        float: left;
        overflow: hidden;
        position: relative;
        text-align: center;
        cursor: default;
    }
    
    .hovereffect .overlay:hover {
        opacity: 1;
    }
    
    .hovereffect .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        background-color: rgba(233, 116, 145, 0.9);
        opacity: 0;
        -webkit-transition: opacity 0.6s;
        -moz-transition: opacity 0.6s;
        transition: opacity 0.6s;
    }
    
    .hovereffect img {
        display: block;
        position: relative;
    }
    
    .hovereffect h2 {
        text-transform: uppercase;
        text-align: center;
        color: #24393e;
        padding: 10px;
        opacity: 0;
        font-weight: bold;
    }
    
    .hovereffect:hover h2 {
        opacity: 1;
        filter: alpha(opacity=1);
    }
    
    .hovereffect h2 {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
        -webkit-transform-origin: 50%;
        -ms-transform-origin: 50%;
        transform-origin: 50%;
        background-color: transparent;
        margin: 0px;
    }
    /* ----- Infinite scroll  --------------------------------------------------- */
    
    .grid.are-images-unloaded {
        opacity: 0;
    }
    
    .scroller-status {
        display: none;
        padding-top: 20px;
        text-align: center;
        color: #777;
    }
    
    .view-more-button {
        padding: 40px 0;
    }
    
    .loader-ellips {
        font-size: 4px;
        /* change size here */
        position: relative;
        width: 4em;
        height: 1em;
        margin: 10px auto;
    }
    
    .loader-ellips__dot {
        display: block;
        width: 1em;
        height: 1em;
        border-radius: 0.5em;
        background: #555;
        /* change color here */
        position: absolute;
        animation-duration: 0.5s;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
    }
    
    .loader-ellips__dot:nth-child(1),
    .loader-ellips__dot:nth-child(2) {
        left: 0;
    }
    
    .loader-ellips__dot:nth-child(3) {
        left: 1.5em;
    }
    
    .loader-ellips__dot:nth-child(4) {
        left: 3em;
    }
    
    @keyframes reveal {
        from {
            transform: scale(0.001);
        }
        to {
            transform: scale(1);
        }
    }
    
    @keyframes slide {
        to {
            transform: translateX(1.5em)
        }
    }
    
    .loader-ellips__dot:nth-child(1) {
        animation-name: reveal;
    }
    
    .loader-ellips__dot:nth-child(2),
    .loader-ellips__dot:nth-child(3) {
        animation-name: slide;
    }
    
    .loader-ellips__dot:nth-child(4) {
        animation-name: reveal;
        animation-direction: reverse;
    }
    /* ----- Project  --------------------------------------------------- */
    
    .project {
        height: 100%;
        padding-bottom: 60px;
    }
    
    .project img {
        padding-bottom: 20px;
    }
    
    .more {
        height: 250px;
        width: calc(100% - 32px);
        display: block;
        margin: 42px 16px 16px 16px;
        float: left;
        border-top: 1px solid #c9d1cf;
    }
    
    .more img {
        height: 250px;
        float: left;
        margin-right: 15px;
    }
    
    .project-images {
        float: left;
        width: 50%;
        max-width: 750px;
        margin: 0 30px 0 16px;
    }
    
    .sticky-description {
        /* position: -webkit-sticky;
        position: sticky; */
        top: 50px;
        float: left;
        width: 30%;
    }
    /* ----- Info  ------------------------------------------------------- */
    
    .infocontent {
        max-width: 1024px;
    }
    
    .storom {
        width: 100%;
        text-align: justify;
        margin-bottom: 30px;
        line-height: 170%;
    }
    
    .contactinfo {
        border-top: 1px solid #cac7bc;
    }
    
    .sayhello {
        padding: 0 3rem 0 0;
    }
    
    .newsinfo {
        border-left: 1px solid #cac7bc;
        padding: 0 0 0 3rem;
    }
    
    .sayhello,
    .newsinfo {
        width: 50%;
        float: left;
        line-height: 154%;
        font-size: 1.4rem;
    }
    
    .sayhello,
    .newsinfo {
        margin: 10px 0 0 0;
    }
    
    .lilleom,
    .selectedclients,
    .selectedpeople {
        font-size: 1.3rem;
        line-height: 154%;
        text-align: left;
        width: 100%;
    }
    
    .selectedclients h3,
    .selectedpeople h3 {
        margin-top: 0;
    }
    
    .lilleom {
        padding-top: 54px;
    }
    
    .lilleomTxt {
        width: 100%;
    }
    
    .selectedclients,
    .selectedpeople {
        border-top: 1px solid #cac7bc;
        margin: 10px 0 0 0;
        padding-top: 20px;
    }
    
    .selectedclients hr {
        height: 200px;
    }
    
    .lilleom img {
        display: block;
        margin: 10px auto;
        width: 100%;
    }
    
    .imprinttxt {
        max-width: 2024px;
    }
    /* ----- Copyright  --------------------------------------------------- */
    
    .footer {
        padding-top: 40px;
        padding-bottom: 40px;
        width: 100%;
        background-color: #213632;
        color: #cdd9d7;
        margin-top: 50px;
        flex-shrink: 0;
    }
    
    .footer .monogram img {
        width: 100%;
    }
    
    .footerMain {
        margin-bottom: 3rem;
    }
    
    .footer a:hover {
        color: #0d937b !important;
    }
    
    .copy {
        font-size: 1rem;
    }
    
    .top {
        font-size: 1rem;
    }
    
    @media screen and (max-width: 870px) {
        .more img {
            height: 200px;
            margin-right: 5px;
        }
        .project-images {
            width: 60%;
        }
        .sticky-description {
            width: 30%;
        }
    }
    
    @media only screen and (max-width: 767px) {
        .navbar-header {
            margin-left: 5px;
        }
        .featured-project img {
            height: 230px;
        }
        .project-images {
            width: calc(100% - 32px);
            margin: 16px;
        }
        .sticky-description {
            position: unset;
            width: calc(100% - 32px);
            margin: 16px;
        }
        .more {
            margin: 46px 16px 16px 16px;
        }
        .lilleom {
            display: none;
        }
        .footerMain {
            text-align: center;
        }
        .selectedclients,
        .selectedpeople {
            border-top: none;
        }
        .selectedclients {
            margin: 10px 0 0 0;
            width: 50%;
            float: left;
            padding-top: 10px;
            padding-right: 3rem;
        }
        .selectedpeople {
            margin: 10px 0 0 0;
            width: 50%;
            float: left;
            border-left: 1px solid #cac7bc;
            padding-top: 10px;
            padding-left: 3rem;
        }
        .maininfo {
            border-bottom: 1px solid #cac7bc;
            padding-bottom: 20px;
        }
        .project {
            padding-bottom: 0px;
        }
    }
    
    @media only screen and (max-width: 600px) {
        .more {
            height: 400px;
        }
        .featured-project img {
            height: 150px;
            margin-right: 5px;
        }
    }