@font-face {
    font-family: 'Syne Regular',sans-serif;
    src: url(font/Syne/static/Syne-Regular.ttf);
}
@font-face {
    font-family: 'Syne Medium',sans-serif;
    src: url(font/Syne/static/Syne-Medium.ttf);
}
@font-face {
    font-family: 'Syne SemiBold',sans-serif;
    src: url(font/Syne/static/Syne-SemiBold.ttf);
}
@font-face {
    font-family: 'Syne Bold',sans-serif;
    src: url(font/Syne/static/Syne-Bold.ttf);
}
@font-face {
    font-family: 'Syne ExtraBold',sans-serif;
    src: url(font/Syne/static/Syne-ExtraBold.ttf);
}
@font-face {
    font-family: 'Syne';
    src: url(font/Syne/Syne-VariableFont_wght.ttf);
}
body, div, h1, h2, h3, h4, h5, h6, p, ol, ul, blockquote, figure{
    margin:0;
    padding:0;
    font-weight: normal;
    font-size: unset;
    cursor: default;
    font-family: 'Syne',sans-serif;
    color: #000;
}

body{
    position: relative;
    max-width: 1920px;
    margin:0 auto;
    -webkit-text-size-adjust: 100%;
}
a{
    text-decoration: none;
    color: inherit;
    cursor:pointer;
}
li{
    list-style-type: none;
}
html {
    scroll-behavior: smooth;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}
img{
    width:100%;
    object-fit: cover;
}
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.flex.col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.flex.centered{
    align-items: center;
}
.flex.space{
    justify-content: space-between;
}
.top-sec img{
    aspect-ratio: 2.2 ;
}
.top-sec{
    position: relative;
}
.top-title h2{
    font-size:42px;
    font-weight: 700;
    color:#000;
    max-width: 750px;
    background-color: #FBDD66;
    padding: 40px;
    border-bottom-right-radius: 50px;
}
.top-title{
    position: relative;
    top:-65px;
    width: 100%;
    left: 0;
    right: 0;
    max-width: 1511px;
    margin: 0 auto;
    padding: 0 20px;
}
.article_longform{
    max-width: 1511px;
    margin:0 auto;
}
.article_info span ,.article_info time{
    font-size:13px;
    font-weight: 700;
}
.article_info{
    padding: 0 20px 20px;
}
.article_info span{
    padding-right:10px;
}
.article_info time{
    position: relative;
    padding-left: 30px;
}
.article_info time::before{
    content: "";
    display: block;
    width:20px;
    border-top: 1px solid #CCCCCC;
    position: absolute;
    left:0;
    top:50%;
}
.social_wrapper img{
    width:22px;
    height:22px;
    object-fit: contain;
}
.social_wrapper span{
    padding:10px;
    background-color: #F2F2F2;
    margin-right: 20px;
    border-radius: 50%;
}
.social_wrapper{
    padding: 0 20px 44px;
}
.article_quote h3{
    color:#d9b00b;
    font-weight: 600;
    font-size: 25px;
    padding-right: 55px;
}
.article_quote{
    max-width: 350px;
    width: 25%;
    position: absolute;
    left: 20px;
    top: 0;
}
.article_body p{
    padding-bottom:20px;
    line-height: 24px;
    font-size:16px;
    padding-left: 60px;
    margin: 0 auto;
    border-left: 1px solid #FBDD66;
}
.article_img img_off, .article_img figure{
    width: calc((100% / 2) - 25px);
    aspect-ratio: 1;
}
.article_img.full figure{
    width:100%;
    aspect-ratio: 2.6;
}
.article_img{
    padding: 100px 0;
}
.article_text{
    position: relative;
}
.article_p{
    max-width: 825px;
    padding-left: 100px;
    margin: 0 auto;
    width:60%;
}
.article_p a{
    border-bottom: 1px solid #d9b00b;
    font-weight: 700;
}
.article_p figure {
    padding:0 60px;
    margin-bottom: 20px;
}
@media screen and (max-width:1511px){
    .article_img {
        padding: 100px 30px;
    }
}

@media screen and (max-width:1000px){
    .article_p{
        margin: 0 0 0 auto;
        width: 80%;
        padding: 0 50px;
    }
    .top-title h2{
        font-size: 32px;
    }
    .article_img img {
        width: calc((100% / 2) - 10px);
    }
}

@media screen and (max-width:768px) {
    .article_quote{
        width: 100%;
        max-width: unset;
        position: unset;
    }
    .article_quote h3{
        padding: 0 30px 30px;
        font-size: 20px;
        text-align: center;
    }
    .article_body p{
        border-left: none;
        padding: 0 0 20px;
    }    
    .article_p{
        width: 100%;
        padding: 0 30px;
    }
    .top-title h2{
        padding:32px 24px;
    }
    .article_img {
        padding: 50px 30px;
    }
}
@media screen and (max-width:500px){
    .top-title h2{
        font-size:24px;
    }
    .top-title{
        top: -30px;
    }
    .article_info{
        flex-direction: column;
    }
    .article_info time::before{
        display: none;
    }
    .article_info time{
        padding-left:0;
    }
    .article_quote h3{
        padding: 0 16px 30px;
    }
    .article_p{
        padding:0 16px;
    }
    .article_img{
        padding:40px 16px;
    }
    .article_p img{
        padding:0;
    }
}