@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;500&family=Noto+Serif+SC:wght@300;600;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@200;400&display=swap');
html{
    background-color: #f4f5f7;
    color: #160A21;
    font-family: 'DM Mono', 'Noto Sans SC', sans-serif;
   overflow-X: hidden;
}



body{
    margin:0!important;
    position: relative;
    overflow-x: hidden;
}


nav{
    padding-top: 104px;
    padding-left: 156px;
    padding-right: 156px;
}

a, a:hover, a:focus, a:active{
    text-decoration: none!important;
    color: unset;
}
a:hover{
    font-style: normal;
}

.nav__wrapper{
    width: 100%;

    margin: auto;
    padding-bottom: 40px;
    height: auto;
}

main{
    padding-top: 104px;
    padding-left: 156px;
    padding-right: 156px;
}

footer{
    background-color: #160A21;
    padding-top: 30px;
    padding-bottom:32px;
    padding-left: 156px;
    padding-right: 156px;
    margin-bottom: 0px;
}

.footer__wrapper{
    width: 80%;
    margin: auto;
    display: inline-block;
    color: #f4f5f7;
}

#logo{
    font-family: 'DM Mono', 'Noto Serif SC', serif;
    font-weight: 900;
    float: left;
    transition: background-color .25s;
    transition-timing-function: ease-in-out

}

#nav-item{
    font-weight: 300;
    float: right;
    margin-left: 40px;
    text-decoration: underline!important;
}

#nav-item-cn{
    font-weight: 300;
    float: right;
    margin-left: 40px;
    text-decoration: underline!important;
    font-family: 'Noto Serif SC', serif !important;
    display: none;
}




.section{
    width: 100%;
    min-width: 0;
    margin: auto;

}

.column__wrapper{
    width: 100%;
    height: auto;
}

.column1{
    width: 45%;
    min-width: 450px;
    height: auto;
    float:left;

}
.column2{
    width: 27.5%;
    min-width: 310px;
    height: auto;
    float:left
}

.column3{
    width: 27.5%;
    min-width: 310px;
    height: auto;
    float:left
    
}

.column3-3{
    width: 33%;
    height: auto;
    float:left
}

#divider{
    width: 100%;
    height: 0px;
    background-color: #160A21;
    margin-top: 96px;
    margin-bottom: 96px;
    display: inline-block;
}

.featured-post__container{
    width: 100%;
    height: auto;
}

.featured-post__content{
    width: calc(100% - 16px);
    height: auto;
}

.featured-post__img{
    width: 100%;
    height: auto;
    margin-bottom: 0px;
    filter: grayscale(100);
}

.post__container{
    width: 100%;
    height: auto;
    border-left: solid 1px #160A21;
    margin-bottom: 40px;
}

.post__content-column2{
    width: calc(100% - 32px);
    height: auto;
    margin: auto;
    
}
.post__content{
    width: calc(100% - 32px);
    height: auto;
    margin: auto!important;

}


.post__img{
    width: 100%;
    height: auto;
    margin-bottom: 0;
    filter: grayscale(100);
    transition: filter .25s;
    transition-timing-function: ease-in-out
}


h1{
    font-weight: 900;
    font-size: 64px;
    line-height: 80px;
    font-family: 'DM Mono', 'Noto Serif SC', serif;
    margin-top:8px;
    transition: color .25s;
    transition-timing-function: ease-in-out;
    margin-bottom: 0px;
    margin-top: 0px!important;
}
.h1{
    font-weight: 900;
    font-size: 40px;
    line-height: 60px;
    font-family: 'DM Mono', 'Noto Serif SC', serif;
}



h2{
    font-weight: 900;
    font-size: 40px;
    line-height: 60px;
    font-family: 'DM Mono', 'Noto Serif SC', serif;
    margin-top:8px;
    transition: color .25s;
    transition-timing-function: ease-in-out;
    margin-bottom: 0px;
    margin-top: 0px!important;
}
.h2{
    font-weight: 900;
    font-size: 72px!important;
    line-height: 88px;
    font-family: 'DM Mono', 'Noto Serif SC', serif;
}

h3{
    font-weight: 900;
    font-size: 32px;
    line-height: 48px;
    font-family: 'DM Mono', 'Noto Serif SC', serif;

}
.h3{
    font-weight: 900;
    font-size: 32px;
    font-family: 'DM Mono', 'Noto Serif SC', serif;

}

h4{
    font-weight: 900;
    font-size: 24px;
    font-family: 'DM Mono', 'Noto Serif SC', serif;
    margin-bottom: 0px;
    margin-top: 40px!important;
    transition: color .25s;
    transition-timing-function: ease-in-out
}
.h4{
    font-weight: 900;
    font-size: 20px;
    font-family: 'DM Mono', 'Noto Serif SC', serif;
    margin-top:8px;
    transition: color .25s;
    transition-timing-function: ease-in-out
}

li{
    margin-top: 8px;
    list-style-type: square;
}


p{
    margin-block-start: 0;
    margin-block-end: 0;
    margin-top: 8px;

}

.pl{
    font-family: 'Commissioner', 'DM Mono', 'Noto Serif SC', serif;
    font-size: 32px;
    font-weight: 300;
    line-height: 48px;
    margin-top:32px
}

.pm{
    font-family: 'Commissioner', 'DM Mono', 'Noto Serif SC', serif;
    font-size: 28px;
    font-weight: 300;
    line-height: 40px;
    margin-top:24px
}

.ps{
    font-family: 'Commissioner', 'DM Mono', 'Noto Serif SC', serif;
    font-size: 24px;
    font-weight: 300;
    line-height: 36px;
    margin-top: 16px;
}

.pc{
    margin-top:0px !important;
    font-size: 20px;
    line-height: 35px;
    font-weight: 300;
    margin-top: 4px;
    color: #78777A;
    transition: color .25s;
    transition-timing-function: ease-in-out;
}


.pc-s{
    margin-top:0px i !important;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    margin-top: 4px;
    color: #78777A;
    transition: color .25s;
    transition-timing-function: ease-in-out
}

.p-footer{
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 20px;
    font-weight: 300;
}

.quote{
    width: 100%;
    max-width: 1128px;
    font-family: 'DM Mono', 'Noto Serif SC', serif;
    font-size: 48px;
    font-weight: 300;
    line-height: 85px;
}

.c-50-left{
    width: 45%;
    height: auto;
    float: left;
    position: relative;
    min-width: 544px;
}

.c-50-right{
    width: 45%;
    height: auto;
    float: right;
    position: relative;
    min-width: 500px;
    
}

.video-wrapper{
    overflow: hidden
}

.video-wrapper #video{
    position: relative; /* could be absolute if needed */
    left: 2px;
}

.highlight{
    font-weight: 600;
    background-color: antiquewhite;
    color: #160A12;
    transition: background-color .25s;
    transition-timing-function: ease-in-out
}

.strong{
    font-weight: 600!important;
}



.text-center{
    text-align: center;
}

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

.mt-32{
    margin-top: 32px
}

.mt-24{
    margin-top: 24px!important;
}



.column-expirience{
    width: 34%;
    min-width: 383px;
    height: auto;
    float:left;
    text-align: right;
}
.column-picture{
    width: 32%;
    min-width: 350px;
    height: auto;
    float:left;
}

.column-skills{
    width: 45%;
    min-width: 383px;
    height: auto;
    float:right;
    
}

.experience__content{
    margin-right: 16px;
}




.img-1{
    background-size: cover;
    float: right;
    position: absolute;
    width: calc(70% - 156px - 156px);
    height: auto;
    width: 66%;
    transform: scale(1.05);
    opacity: 0;
    filter: grayscale(100);
    transition: filter 2s ,opacity .25s, transform .25s;
    transition-timing-function: ease-in-out;
}

.content{
    margin-top:24px ;
    left: -42.85%;
    float: left;
    position: relative;
}


.spacer{
    margin-top: 180px;
}


.desktop-hide{
    display: none;
}

.portfolio-thumbnail{
    width: 100%;
    height: auto;
}

img{
    width: 100%;
    height: auto;
}

.card-wrapper{
    margin-top:80px;
    overflow-x: hidden;
    overflow-y:hidden;
    white-space: nowrap;
    margin-bottom: 64px;
    cursor: grab;
    cursor: -webkit-grab;
    user-select: none!important;
    -webkit-overflow-scrolling: touch;
}




.card{
    width: 300px;
    height: 500px;
    border-radius: 30px;
    margin-right: 64px;
    display: inline-block;
    padding: 16px;
    box-shadow: -6px 6px 10px 0px rgba(0,0,0,0.05);

}

.card-start{
    width: 300px;
    height: 500px;
    top: -22px !important;
    position: relative;
    border-radius: 30px;
    margin-right: 64px;
    display: inline-block;
    margin-left: 156px;
    padding: 16px;
    box-shadow: -6px 6px 10px 0px rgba(0,0,0,0.05);

}


.cardTitle{
    white-space: pre-wrap!important;
    min-height: 500px;
    padding: 16px;
    overflow-wrap: normal;
    height: auto;
    position: relative;
    bottom: 0px;
    max-width: calc(300 - 32px);
    color:#f4f5f7;

}

.item1{
    background: linear-gradient(to bottom , transparent 50%, black),
    url('../media/LYNX.jpg');
    background-size: cover;
    background-position: center;
}

.item2{
    background: linear-gradient(to bottom , transparent 50%, black),
    url('../media/Redesign-International-Broker.jpg');
    background-size: cover;
    background-position: center;
    background-position-x: 575px;
}

.item3{
    background: linear-gradient(to bottom , transparent 50%, black),
url('../media/ChinaSouthernAirlines-stewardess.jpeg');
    background-size: cover;
    background-position: center;
    background-position-x: 575px;
}

.item4{
    background: linear-gradient(to bottom , transparent 50%, black),
url('../media/StudieNet.png');
    background-size: cover;
    background-position: center;

}

.item5{
    background: linear-gradient(to bottom , transparent 50%, black),
url('../media/5.jpg');
    background-size: cover;
    top: 22px !important;
position: relative;
}


#SlideRight{
    float: right;
    width: 64px;
    height: 64px;
    border-radius: 100px;
    background-color: #f4f5f7;
    text-align: center;
    border: none;
    margin-left: 32px;
    box-shadow: -6px 6px 10px 0px rgba(0,0,0,0.05);
}

#SlideLeft{
    float: right;
    width: 64px;
    height: 64px;
    border-radius: 100px;
    background-color: #f4f5f7;
    text-align: center;
    border: none;
    margin-left: 32px;
    box-shadow: -6px 6px 10px 0px rgba(0,0,0,0.05);
    width: 64px;
    height: 64px;
}

.portfolio-nav{
display:inline-block;
padding-left: 156px;
padding-right: 156px;
}



.fl-left{
    float: left;
}

#bottom{
    position:absolute;                 
    bottom:0;                         
    left:0; 
    } 

button{
    transition: 0.3s;
}
    .button{
        margin-top: 64px;
        font-size: 24px;
        font-family: 'DM Mono', 'Noto Serif SC', serif;
        font-weight: 100;
        padding: 24px;
        background-color: #f4f5f7;
        border-radius: 100px;
        text-align: center;
        border: none;
        box-shadow: -6px 6px 10px 0px rgba(0, 0, 0, 0.05);

    }



.map{
    width: 800px;
    height: 1000px;
    position: absolute;
    top: 100px;
    right: 0;
    margin-right: -10%;
    background-image: url("../media/netherlands.png");
    background-size: contain;
    z-index: -10;
}

.about-me-left{
max-width: 45%;
height: auto;
position: relative;
float: left;
}

.textLink{
    text-decoration: underline!important;
    color: #00D1D1;
}

.invite{
    width: 100%;
    font-family: 'DM Mono', 'Noto Serif SC', serif;
    font-size: 48px;
    font-weight: 300;
    line-height: 85px;
}

iframe{
    width: 100%;
    height: 400px;
}

.card-wrapper.active{
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

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

.mr-156{
    margin-right: 156px!important;
}

.button:hover{
    cursor: pointer!important;
    cursor: -webkit-pointer;
}