/*
s9fonts.css
*/
:root {
    --color1: #000000;
	--color2: #ffffff;
	--color3: #8A06F1;

	--font1: 'Heebo', Arial, Helvetica, sans-serif;
	--font2: 'IBM Plex Sans Thai', Arial, Helvetica, sans-serif;
	--font3: 'Inter', Arial, Helvetica, sans-serif;

	--placeholderColor: var(--color1);
	--placeholderFont: 'Inter', Arial, Helvetica, sans-serif;

}
@font-face {
    font-family: 'Heebo';
    src: url('../fonts/Heebo-Black.woff2') format('woff2'),
        url('../fonts/Heebo-Black.woff') format('woff'),
        url('../fonts/Heebo-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Heebo';
    src: url('../fonts/Heebo-Bold.woff2') format('woff2'),
        url('../fonts/Heebo-Bold.woff') format('woff'),
        url('../fonts/Heebo-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('../fonts/IBMPlexSansThai-SemiBold.woff2') format('woff2'),
        url('../fonts/IBMPlexSansThai-SemiBold.woff') format('woff'),
        url('../fonts/IBMPlexSansThai-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('../fonts/IBMPlexSansThai-Medium.woff2') format('woff2'),
        url('../fonts/IBMPlexSansThai-Medium.woff') format('woff'),
        url('../fonts/IBMPlexSansThai-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Medium.woff2') format('woff2'),
        url('../fonts/Inter-Medium.woff') format('woff'),
        url('../fonts/Inter-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
.fonts_using {
    font-family: 'Heebo', sans-serif;
    /*
    Bold 700
    Black 900
    */
    font-family: 'IBM Plex Sans Thai', sans-serif;
    /*
    Medium 500
    SemiBold 600
    */
    font-family: 'Inter', sans-serif;
    /*
    Medium 500
    */
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: normal;
    color: #000;
}
.container {
    width: 100%;
    max-width: 100%;
    display: block;
    clear: both;
    margin: 0 auto;
    padding: 0 20px;
}
@media screen and (min-width: 768px) {
    .container {
        max-width: 700px;
    }
}
@media screen and (min-width: 992px) {
    .container {
        max-width: 900px;
    }
}
@media screen and (min-width: 1140px) {
    .container {
        max-width: 1100px;
        padding: 0 40px;
    }
}
@media screen and (min-width: 1367px) {
    .container {
        max-width: 1360px;
    }
}

@media screen and (min-width: 768px) {}
@media screen and (min-width: 992px) {}
@media screen and (min-width: 1140px) {}
@media screen and (min-width: 1367px) {}
/*
s9styles.css
*/
* {
    padding: 0;
    margin: 0;
    position: relative;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
html {
    padding: env(safe-area-inset);
}
ul.nolist, ol.nolist, ul.nolist li, ol.nolist li {
	list-style-type: none;
}
.clr, .d-block, .d-block:after, .d-block:before, .clr:after, .clr:before {
	clear: both;
	display: block;
	position: relative;
	width: 100%;
}
.d-block:after, .d-block:before, .clr:after, .clr:before {
	content: '';
}
.m0 {
    margin: 0;
}
.clr {
	height: 0;
}
p {
	margin: 0;
    font-family: var(--font2);
    font-weight: 500;
    /* font-size: 18px; */
    font-size: 16px;
    line-height: 1.364;
    letter-spacing: normal;
    color: var(--color1);
}
/*@media screen and (min-width: 768px) {
    p {
        font-size: 20px;
    }
}
@media screen and (min-width: 992px) {
    p {
        font-size: 22px;
    }
}*/
p + p {
	margin-top: 20px;
}
p:empty {
	width: 0;
	height: 0;
	display: none;
}
select {
    outline: 0 none;
    background: none!important;
    -webkit-appearance: none;
    -moz-appearance: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
   -moz-appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
}
button {
    background: none;
    border: none;
    outline: none;
}
a {
	color: #000;
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}
a:hover {
    text-decoration: none;
}
a:focus, a:active {
    outline: none;
}
a, a img {
	border: none;
}
img {
	max-width: 100%;
	display: block;
    font-size: 0;
    width: 100%;
}
.tac {
	text-align: center;
}
.tal {
	text-align: left;
}
.tar {
	text-align: right;
}
.taj {
	text-align: justify;
}
.f-left, .alignleft {
	float: left;
}
.f-right, .alignright {
	float: right;
}
.d-center, .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.d-inline {
	display: inline-block;
	vertical-align: top;
}
.d-none, .hide {
	display: none !important;
}
.v_mid {
	vertical-align: middle !important;
}
.v_btm {
	vertical-align: bottom !important;
}
.video_container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video_container iframe, .video_container object, .video_container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.d-flex, .fd-flex {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	position: relative;
	width: 100%;
}
.ai-c {
	-ms-align-items: center;
	align-items: center;
}
.ai-fs {
	-ms-align-items: flex-start;
	align-items: flex-start;
}
.ai-fe {
	-ms-align-items: flex-end;
	align-items: flex-end;
}
.ai-b {
	-ms-align-items: baseline;
	align-items: baseline;
}
.ai-s {
	-ms-align-items: stretch;
	align-items: stretch;
}
.jc-c {
	justify-content: center;
}
.jc-fs {
	justify-content: flex-start;
}
.jc-fe {
	justify-content: flex-end;
}
.jc-sb {
	justify-content: space-between;
}
.jc-sa {
	justify-content: space-around;
}
.fxd-r {
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
}
.fxd-rr {
	-webkit-flex-direction: row-reverse;
	-moz-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	-o-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
.fxd-c {
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
}
.fxd-cr {
	-webkit-flex-direction: column-reverse;
	-moz-flex-direction: column-reverse;
	-ms-flex-direction: column-reverse;
	-o-flex-direction: column-reverse;
	flex-direction: column-reverse;
}
.fxw-w {
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
.fxw-wr {
	-webkit-flex-wrap: wrap-reverse;
	-moz-flex-wrap: wrap-reverse;
	-ms-flex-wrap: wrap-reverse;
	-o-flex-wrap: wrap-reverse;
	flex-wrap: wrap-reverse;
}
.fxw-n {
	-webkit-flex-wrap: nowrap;
	-moz-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	-o-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.block1, .block2, .block3, .block4, .block5 {
	position: relative;
	width: 100%;
	padding: 3px;
}
.block1 {
	-webkit-flex: 1;
	-moz-flex: 1;
	-ms-flex: 1;
	-o-flex: 1;
	flex: 1;
}
.block2 {
	-webkit-flex: 2;
	-moz-flex: 2;
	-ms-flex: 2;
	-o-flex: 2;
	flex: 2;
}
.block3 {
	-webkit-flex: 3;
	-moz-flex: 3;
	-ms-flex: 3;
	-o-flex: 3;
	flex: 3;
}
.block4 {
	-webkit-flex: 4;
	-moz-flex: 4;
	-ms-flex: 4;
	-o-flex: 4;
	flex: 4;
}
.block5 {
	-webkit-flex: 5;
	-moz-flex: 5;
	-ms-flex: 5;
	-o-flex: 5;
	flex: 5;
}
.ord1 {
	-webkit-order: 1;
	-moz-order: 1;
	-ms-order: 1;
	-o-order: 1;
	order: 1;
}
.ord2 {
	-webkit-order: 2;
	-moz-order: 2;
	-ms-order: 2;
	-o-order: 2;
	order: 2;
}
.ord3 {
	-webkit-order: 3;
	-moz-order: 3;
	-ms-order: 3;
	-o-order: 3;
	order: 3;
}
.ord-1 {
	-webkit-order: -1;
	-moz-order: -1;
	-ms-order: -1;
	-o-order: -1;
	order: -1;
}
.ord-2 {
	-webkit-order: -2;
	-moz-order: -2;
	-ms-order: -2;
	-o-order: -2;
	order: -2;
}
.ord-3 {
	-webkit-order: -3;
	-moz-order: -3;
	-ms-order: -3;
	-o-order: -3;
	order: -3;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font1);
	font-weight: 700;
}
/* h1 {
	font-size: 60px;
}
h2 {
	font-size: 55px;
}
h3 {
	font-size: 50px;
}
h4 {
	font-size: 40px;
}
h5 {
	font-size: 33px;
}
h6 {
	font-size: 25px;
} */
h1 {
    font-size: 27px;
}
@media screen and (min-width: 768px) {
    h1 {
        font-size: 30px
    }
}
@media screen and (min-width: 992px) {
    h1 {
        font-size: 33px
    }
}
@media screen and (min-width: 1367px) {
    h1 {
        font-size:35px
    }
}
@media screen and (min-width: 1750px) {
    h1 {
        font-size:40px
    }
}
h2 {
    /* font-size: 20px; */
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 15px;
}
.post-copy #navlist+h2 {
    color: #99989d;
    margin-top: 0;
}
/*@media screen and (min-width: 1140px) {
    h2 {
        font-size: 25px
    }
}
@media screen and (min-width: 1367px) {
    h2 {
        font-size: 30px
    }
}*/
h3 {
    font-size: 18px
}
@media screen and (min-width: 1140px) {
    h3 {
        font-size: 21px
    }
}
@media screen and (min-width: 1367px) {
    h3 {
        font-size: 25px
    }
}
h4 {
    font-size: 18px
}
@media screen and (min-width: 1140px) {
    h4 {
        font-size: 20px
    }
}
@media screen and (min-width: 1367px) {
    h4 {
        font-size: 22px
    }
}
h5 {
    font-size: 17px
}
@media screen and (min-width: 1140px) {
    h5 {
        font-size: 19px
    }
}
@media screen and (min-width: 1367px) {
    h5 {
        font-size: 21px
    }
}
h5 {
    font-size: 15px
}
@media screen and (min-width: 1140px) {
    h5 {
        font-size: 17px
    }
}
@media screen and (min-width: 1367px) {
    h5 {
        font-size: 19px
    }
}
/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder {
	color: var(--placeholderColor);
	font-family: var(--placeholderFont);
}
:-moz-placeholder {
	color: var(--placeholderColor);
	font-family: var(--placeholderFont);
}
::-moz-placeholder {
	color: var(--placeholderColor);
	font-family: var(--placeholderFont);
	opacity: 1;
}
:-ms-input-placeholder {
	color: var(--placeholderColor);
	font-family: var(--placeholderFont);
}
body {
    background-color: var(--color2);
    display: block;
    clear: both;
    width: 100%;
    font-family: var(--font2);
    font-weight: 500;
    /* font-size: 22px; */
    font-size: 16px;
    line-height: 1.36;
    letter-spacing: normal;
    color: var(--color1);
}
#full-site, #site-header, #site-nav, #site-main, #site-footer {
    display: block;
    clear: both;
    width: 100%;
    clear: both;
}
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9;
}
#header-height-fix {
    display: block;
    clear: both;
    width: 100%;
    position: relative;
}
#site-nav {
    background-color: var(--color1);
    padding: 10px 0;
    margin-bottom: 20px;
}

.site-logo {
    width: 100%;
    max-width: 150px;
}
@media screen and (min-width: 768px) {
    #site-nav {
        margin-bottom: 45px;
        padding: 0;
    }
}
.menu-toggle-button {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    margin: 0 10px;
}
@media screen and (min-width: 992px) {
    .menu-toggle-button {
        margin: 0 10px 0 20px;
    }
}
.menu-toggle-button .menu-bar {
    width: 20px;
    height: 2px;
    display: block;
    clear: both;
    background-color: var(--color2);
}
.menu-toggle-button .bars-text {
    font-family: var(--font1);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: normal;
    color: #fff;
    text-transform: uppercase;
    margin-left: 10px;
}
@media screen and (min-width: 768px) {
    .menu-toggle-button .bars-text {
        display: none;    
    }
}
@media screen and (min-width: 992px) {
    .menu-toggle-button .menu-bar {
        width: 30px;
        height: 5px;
    }
}
.menu-toggle-button .menu-bar:not(:last-child) {
    margin: 0 0 4px 0;
}
.main-menu {
    width: 100px;
    margin-left: 10px;
    border-left: 1px solid #262626;
}
@media screen and (min-width: 768px) {    
    .main-menu {
        width: 100%;
        max-width: 500px;
    }
}
@media screen and (min-width: 992px) {
    .main-menu {
        width: 100%;
        max-width: 680px;
        margin-left: 15px;
    }
}
@media screen and (min-width: 1140px) {
    .main-menu {
        max-width: 855px;
    }
}
@media screen and (min-width: 1367px) {
    .main-menu {
        max-width: 1000px;
    }
}
.main-menu .top-level {
    margin: 0 10px;
    position: relative;
}
@media screen and (min-width: 992px) {
    .main-menu .top-level {
        margin: 0 15px;
    }
}
.main-menu a {
    display: block;
    font-family: var(--font1);
    font-weight: 900;
    font-size: 13px;
    line-height: 0.8;
    letter-spacing: normal;
    color: var(--color2);
    text-transform: uppercase;
    padding: 18px 0;
}
@media screen and (min-width: 992px) {
    .main-menu .top-level {
        margin: 0 17px;
    }
    .main-menu a {
        font-size: 16px;
    }
}
/*@media screen and (min-width: 1140px) {
    .main-menu a {
        font-size: 19px;
    }
}
@media screen and (min-width: 1367px) {
    .main-menu a {
        font-size: 23px;
    }
}*/
.main-menu a:hover, .main-menu a.active, .main-menu li.active-item>a {
    color: var(--color3);
}
.sub-menu {
    display: none;
    width: 100%;
    background: #262626;
    z-index: 5;
    padding: 0;
    margin: 0;
}
.sub-menu.activeMenu {
    display: block;
}
.main-menu li:hover>.sub-menu {
    display: block;
}
@media screen and (min-width: 768px) {
    .sub-menu {
        position: absolute;
        /* top: 56px; */
        top: 49px;
        left: 0;
        width: 280px;
    }    
}
.sub-menu li {
    display: block;
    clear: both;
    position: relative;
}
.sub-menu a {
    width: 100%;
    padding: 10px 15px;
    position: relative;
    /* font-size: 18px; */
    font-size: 16px;
}
.sub-menu a:hover {
    background-color: #363636;
    color: #fff;
}
#section-1 {
    margin-bottom: 50px;
    gap: 20px;
}
.s1-first-block, .s1-section-block2, .s1-section-block3 {
    width: 100%;
}
@media screen and (min-width: 768px) {
    .s1-first-block, .s1-section-block2, .s1-section-block3 {
        width: 700px;
    }
}
@media screen and (min-width: 992px) {
    .s1-first-block {
        width: 100%;
    }
    .s1-section-block2, .s1-section-block3 {
        width: 420px;
    }
}
@media screen and (min-width: 1140px) {
    .s1-first-block {
        width: 400px;
    }
    .s1-section-block2 {
        width: 290px;
    }
    .s1-section-block3 {
        width: 290px;
        order: -1;
    }
}
@media screen and (min-width: 1367px) {
    .s1-first-block {
        width: 500px;
    }
    .s1-section-block2, .s1-section-block3 {
        width: 365px;
    }
}
.article-thumb {
    display: block;
    margin-bottom: 18px;
}
/*@media screen and (min-width: 1140px) {
    .article-thumb {
        margin-bottom: 25px;
    }
}*/
.cat-name {
    font-family: var(--font1);
    font-weight: 900;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: normal;
    color: var(--color3);
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}
/*@media screen and (min-width: 768px) {
    .cat-name {
        font-size: 16px;
    }
}
@media screen and (min-width: 1367px) {
    .cat-name {
        font-size: 19px;
        margin-bottom: 15px;
    }
}*/
.post-design-2 .cat-name {
    /* font-size: 14px; */
    font-size: 12px;
}
.post-name {
    font-family: var(--font1);
    font-weight: 900;
    font-size: 22px;
    line-height: 1.068;
    letter-spacing: normal;
    color: var(--color1);
    margin-bottom: 15px;
}
/*@media screen and (min-width: 768px) {
    .post-name {
        font-size: 35px;
    }
}
@media screen and (min-width: 1367px) {
    .post-name {
        font-size: 39px;
    }
}*/
.post-name a {
    all: inherit;
    cursor: pointer;
}
.post-sub-title {
    font-family: var(--font2);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.278;
    letter-spacing: normal;
}
@media screen and (min-width: 768px) {
    .post-sub-title {
        font-size: 18px;
    }
}

.section-title {
    font-family: var(--font1);
    font-weight: 700;
    /* font-size: 25px; */
    font-size: 22px;
    line-height: normal;
    letter-spacing: normal;
    color: var(--color3);
    text-transform: uppercase;
    margin-bottom: 20px;
}
#section-1 .section-title {
    border-bottom: 5px solid var(--color3);
}
/*@media screen and (min-width: 768px) {
    .section-title {
        font-size: 30px;
    }
}
@media screen and (min-width: 1140px) {
    .section-title {
        font-size: 38px;
        margin-bottom: 20px;
    }
}
@media screen and (min-width: 1367px) {
    .section-title {
        font-size: 47px;
        margin-bottom: 30px;
    }
}*/
.post-design-2 {
    padding: 5px;
    border-bottom: 1px solid #E5E5E5;
    margin-bottom: 10px;
}
@media screen and (min-width: 992px) {
    .post-design-2 {
        padding: 10px;
        margin-bottom: 15px;
    }    
}
@media screen and (min-width: 1367px) {
    .post-design-2 {
        margin-bottom: 20px;
    }
}
.post-name-2 {
    font-family: var(--font1);
    font-weight: 900;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--color1);
}
.post-name-2:hover {
    color: #8A06F1;
}
@media screen and (min-width: 992px) {
    .post-name-2 {
        font-size: 18px;
    }
}
@media screen and (min-width: 1140px) {
    .post-name-2 {
        font-size: 20px;
    }
}
.post-name-2 a {
    all: inherit;
    cursor: pointer;
}

.arrow-image img {
    opacity: 0.15;
}
.left-arrow {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
.arrow-image:hover img {
    opacity: 1;
}

.section-header-no-gap {
    border-top: 6px solid var(--color3);
    padding-top: 30px;
    margin-bottom: 30px;
}
.section-header {
    margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
    .section-header {
        flex-direction: column;
    }
}
.section-header-no-gap .section-title {
    margin: 0;
}
.section-title.m0 {
    margin: 0;
}
.cat-link {
    margin-left: 10px;
    width: 90px;
    height: 30px;
    font-family: var(--font1);
    font-weight: 700;
    font-size: 12px;
    line-height: 30px;
    letter-spacing: normal;
    color: var(--color1);
    text-align: center;
    text-transform: uppercase;
    border: 1px solid #E5E5E5;
}
@media screen and (min-width: 768px) {
    .cat-link {
        margin-left: 25px;
        width: 110px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }
}
@media screen and (min-width: 1140px) {
    .cat-link {
        margin-left: 40px;
        font-size: 17px;
    }
}
.cat-link:hover {
    background-color: #e5e5e5;
}

.slider-arrow {
    width: 100%;
    margin-top: 20px;
    display: flex;
    gap: 10px;
}
.right-arrow {
    margin-left: auto;
}
@media screen and (min-width: 992px) {
    .slider-arrow {
        width: auto;
        margin-left: auto;
        margin-top: inherit;
    }
}
.post-name-3, .post-name-4, .post-name-5, .cat-post-name {
    font-family: var(--font1);
    font-weight: 700;
    font-size: 18px;
    /* line-height: 1.071; */
    line-height: 1.2;
    letter-spacing: normal;
    color: var(--color1);
}
.post-name-3:hover, .post-name-4:hover, .cat-post-name:hover {
    color: var(--color3);
}
/*@media screen and (min-width: 1140px) {
    .post-name-3, .post-name-4, .post-name-5, .cat-post-name {
        font-size: 20px;
    }
}
@media screen and (min-width: 1367px) {
    .post-name-3, .post-name-4, .post-name-5, .cat-post-name {
        font-size: 25px;
    }    
}*/
.post-name-3 a, .post-name-4 a, .post-name-5 a, .cat-post-name a  {
    all: inherit;
    cursor: pointer;
}
.post-design-3 {
    padding: 0 15px 15px;
    /* border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid #e5e5e5; */
}
/* .center .post-design-3 {
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
} */

.post-list-type-2 {
    gap: 30px;
}
.post-design-4 {
    width: 100%;
}
@media screen and (min-width: 992px) {
    .post-design-4 {
        width: -webkit-calc(50% - 15px);
        width: -moz-calc(50% - 15px);
        width: -ms-calc(50% - 15px);
        width: -o-calc(50% - 15px);
        width: calc(50% - 15px);
    }
}
.post-design-4 .article-thumb, .post-design-5 .article-thumb, .post-design-4 .article-content, .post-design-5 .article-content {
    width: 100%;
}
@media screen and (min-width: 768px) {
    .post-design-4 .article-thumb, .post-design-5 .article-thumb {
        margin: 0;
        width: 166px;
    }
    .post-design-4 .article-content, .post-design-5 .article-content {
        width: -webkit-calc(100% - 190px);
        width: -moz-calc(100% - 190px);
        width: -o-calc(100% - 190px);
        width: -ms-calc(100% - 190px);
        width: calc(100% - 190px);
    }
}
.post-design-4 .cat-name {
    font-size: 13px;
    margin-bottom: 10px;
}

.blue-bg-section {
    background-color: #380361;
    gap: 20px;
    padding: 15px;
    margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
    .blue-bg-section {
        gap: 30px;
        padding: 30px;
    }
}
.tech-news, .tv-news {
    width: 100%;
}
@media screen and (min-width: 992px) {
    .tech-news, .tv-news {
        width: -webkit-calc(50% - 15px);
        width: -moz-calc(50% - 15px);
        width: -o-calc(50% - 15px);
        width: -ms-calc(50% - 15px);
        width: calc(50% - 15px);
    }
}
@media screen and (min-width: 1140px) {
    .blue-bg-section {
        gap: 60px;
    }
    .tech-news, .tv-news {
        width: -webkit-calc(50% - 30px);
        width: -moz-calc(50% - 30px);
        width: -o-calc(50% - 30px);
        width: -ms-calc(50% - 30px);
        width: calc(50% - 30px);
    }
}
.blue-bg-section .section-title {
    color: #fff;
}
.blue-bg-section .cat-link {
    border-color: #fff;
    color: #fff;
}
.blue-bg-section .cat-link:hover {
    background-color: #fff;
    color: #000;
}
.post-design-5:not(:last-child) {
    margin-bottom: 20px;
}
@media screen and (min-width: 992px) {
    .post-design-5:not(:last-child) {
        margin-bottom: 35px;
    }
}
.post-name-5 {
    color: var(--color2);
}

#site-footer {
    background-color: #000;
    padding: 15px 0;
    text-align: center;
}
#footer-social-links ul {
    gap: 10px;
}
#footer-social-links ul a {
    display: block;
    clear: both;
    color: #fff;
    width: 35px;
    height: 35px;
    background: #3b3b3b;
    line-height: 40px;
    text-align: center;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    font-size: 15px;
}
@media screen and (min-width: 768px) {
    #footer-social-links ul a {
        width: 45px;
        height: 45px;
        font-size: 22px;
        line-height: 50px;
    }    
}
#footer-social-links ul a:hover {
    background-color: #565656;
}
.footer-copyright {
    padding: 10px 0;
    font-family: var(--font3);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: normal;
    color: #fff;
}
/*@media screen and (min-width: 768px) {
    .footer-copyright {
        font-size: 18px;
    }
}*/
.footer-copyright a {
    all: inherit;
    cursor: pointer;
    display: inline-block;
    padding: 0;
}


#menu-remain-items {
    position: fixed;
    z-index: 1001;
    width: 100%;
    /* background: #fff; */
    background-color: #000;
    height: 100%;
    top: 0;
    left: 0;
    max-width: 300px;
    border-right: 1px solid #e5e5e5;
    padding: 15px;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
#menu-remain-items.openMenuBar {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
}
/* #menu-remain-items:not(.openMenuBar) .closeButton {
    display: none;
} */

.closeButton {
    font-size: 25px;
    margin-left: auto;
    display: block;
    margin-bottom: 20px;
    color: var(--color2);
}
.menu-ramain-inner {
    overflow-y: scroll;
    padding-bottom: 50px;
    max-height: calc(100vh - 50px);
}
.menu-ramain-inner::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.menu-ramain-inner::-moz-scrollbar {
    width: 5px;
    height: 5px;
}
.menu-ramain-inner::-ms-scrollbar {
    width: 5px;
    height: 5px;
}
.menu-ramain-inner::-o-scrollbar {
    width: 5px;
    height: 5px;
}
.menu-ramain-inner::-khtml-scrollbar {
    width: 5px;
    height: 5px;
}




/* .menu-item {
    margin-top: 10px;
} */
.menu-item li::marker{
    display: none;
}
.menu-item a {
    display: block;
    clear: both;
    font-family: var(--font1);
    font-weight: 900;
    font-size: 20px;
    color: #fff;
    padding: 5px 10px;
}
.menu-item a:hover {
    background-color: #303030;
}
li.menu-item.has_submenu>a::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #727272;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    position: absolute;
    right: 8px;
    top: 0;
    bottom: 0;
    margin: auto;
    -webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}
li.menu-item.has_submenu.sub-menu-opens>a::after {
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.searchBlock {
    display: block;
    margin-bottom: 10px;
    position: relative;
}
.searchBlock form {
    display: flex;
    align-items: center;
    justify-content: center;
    clear: both;
}
.searchBlock form input {
    border: 1px solid #424242;
    border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -ms-border-radius: 3px 0 0 3px;
    -o-border-radius: 3px 0 0 3px;
    background-color: #303030;
    padding: 10px;
    color: #fff;
    outline: none;
    --placeholderColor: #fff;
    height: 30px;
    width: -webkit-calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    width: -o-calc(100% - 30px);
    width: -ms-calc(100% - 30px);
    width: calc(100% - 30px);
}
.searchBlock form button {
    width: 30px;
    height: 30px;
    background-color: #303030;
    border: 1px solid #424242;
    border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    -ms-border-radius: 0 3px 3px 0;
    -o-border-radius: 0 3px 3px 0;
    font-size: 0;
    position: relative;
}
.searchBlock form button::before, .searchBlock form button::after {
    content: '';
}
.searchBlock form button::before {
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    background-color: #303030;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    display: block;
    position: absolute;
    left: 6px;
    top: 6px;
}
.searchBlock form button::after {
    width: 6px;
    height: 3px;
    background-color: #fff;
    display: block;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform-origin: right;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}
.desktop-items {
    display: none;
}
.mobile-items {
    display: block;
}
@media screen and (min-width: 768px) {
    .desktop-items {
        display: block;
    }
    .mobile-items {
        display: none;
    }
}


#site-main {
    margin-bottom: 30px;
}
@media screen and (min-width: 992px) {
    #site-main {
        margin-bottom: 40px;
    }
}

.category_name {
    font-family: var(--font1);
    font-weight: 900;
    /* font-size: 45px; */
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--color1);
    display: block;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.cat_post_list {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}
.cat_post {
    width: 100%;
}
@media screen and (min-width: 768px) {
    .cat_post_list {
        gap: 20px;
    }
    .cat_post {
        width: -webkit-calc(50% - 15px);
        width: -moz-calc(50% - 15px);
        width: -o-calc(50% - 15px);
        width: -ms-calc(50% - 15px);
        width: calc(50% - 15px);
    }
}
@media screen and (min-width: 992px) {
    .cat_post_list {
        gap: 30px;
    }
    .cat_post {
        width: -webkit-calc(33% - 20px);
        width: -moz-calc(33% - 20px);
        width: -o-calc(33% - 20px);
        width: -ms-calc(33% - 20px);
        width: calc(33% - 20px);
    }
}
@media screen and (min-width: 1140px) {}
@media screen and (min-width: 1367px) {
    .cat_post {
        width: -webkit-calc(33% - 16px);
        width: -moz-calc(33% - 16px);
        width: -o-calc(33% - 16px);
        width: -ms-calc(33% - 16px);
        width: calc(33% - 16px);
    }
}

.single-page-inner {
    gap: 40px;
    margin-bottom: 30px;
}
.single-post-content {
    width: 100%;
    position: relative;
}
.single-post-sidebar {
    width: 100%;
    position: relative;
}
.single-post-content .post_add_section, .single-post-sidebar .sidebar-block {
    position: sticky;
    top: 50px;
}
@media screen and (min-width: 1140px) {
    .single-post-content {
        width: 670px;
    }
    .single-post-sidebar {
        width: 310px;
    }
}
@media screen and (min-width: 1367px) {
    .single-page-inner {
        gap: 50px;
    }
    .single-post-content {
        width: 775px;
    }
    .single-post-sidebar {
        width: 445px;
    }
}

.breadcrumb {
    display: block;
    clear: both;
    width: 100%;
    position: relative;
    /* margin-bottom: 30px; */
    margin-bottom: 15px;
}
/* .breadcrumb::after {
    content: '';
    width: 120px;
    height: 1px;
    background-color: #e5e5e5;
    display: block;
} */
/* .breadcrumb ul {
    gap: 10px;
} */
.breadcrumb li {
    font-family: var(--font2);
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    color: #363636;
}
.breadcrumb a {
    font: inherit;
    color: var(--color3);
    /*color: #363636; */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(0, 0, 0, 0);
    -moz-text-decoration-color: rgba(0, 0, 0, 0);
    padding: 0 10px;
}
.breadcrumb li:first-child a {
    padding-left: 0;
}
/* .breadcrumb li:last-child {
    padding-left: 10px;
} */
.breadcrumb a::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right:2px solid var(--color3);
    border-bottom: 2px solid var(--color3);
    transform-origin: center;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    position: absolute;
    top: 0;
    bottom: 0;
    right: -5px;
    display: block;
    margin: auto;
    /* border-radius: 1px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px; */
}
.breadcrumb li:last-child a::after {
    display: none;
}
.breadcrumb a:hover {
    text-decoration-color: #c1c1c1;
    -moz-text-decoration-color: #c1c1c1;
}
.single-post-title {
    font-family: var(--font1);
    font-weight: 900;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    color: #000;
    margin-bottom: 10px;
}
/*@media screen and (min-width: 768px) {
    .single-post-title {
        font-size: 30px;
    }
}
@media screen and (min-width: 992px) {
    .single-post-title {
        font-size: 20px;
    }
}
@media screen and (min-width: 1367px) {
    .single-post-title {
        font-size: 20px;
    }
}
@media screen and (min-width: 1750px) {
    .single-post-title {
        font-size: 20px;
    }
}*/
.owl-dots {
    text-align: center;
}
.owl-dots button {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin: 0 5px;
}
.owl-dots button.owl-dot span {
    width: 12px;
    height: 12px;
    background-color: #DFDEDE;
    display: block;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.owl-dots button.owl-dot.active span {
    background-color: #8A06F1;
}


.single-post .slider-item {
    margin-bottom: 30px;
}

.single-slide-title {
    font-family: var(--font1);
    /* font-weight: 900; */
    /* font-weight: 400; */
    font-weight: 700;
    /* font-size: 20px; */
    /* font-size: 25px; */
    /* font-size: 30px; */
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--color1);
    margin-bottom: 15px;
    display: block;
}
@media screen and (min-width: 992px) {
    .single-slide-title {
        /* font-size: 35px; */
        /* font-size: 30px; */
        font-size: 29px;
    }
}
@media screen and (min-width: 1140px) {
    .single-slide-title {
        /* font-size: 25px; */
        /* font-size: 30px; */
        /* font-size: 40px; */
        /* font-size: 35px; */
        font-size: 32px;
    }
}
@media screen and (min-width: 1367px) {
    .single-slide-title {
        /* font-size: 30px; */
        /* font-size: 40px; */
        /* font-size: 50px; */
        /* font-size: 45px; */
        font-size: 35px;
    }
}
.single-slide-title.gray_color {
    color: #99989D;
    font-size: 20px;
}
@media screen and (min-width: 1140px) {
    .single-slide-title.gray_color {
        font-size: 25px;
    }
}
@media screen and (min-width: 1367px) {
    .single-slide-title.gray_color {
        font-size: 30px;
    }
}
.post_img_div {
    position: relative;
    margin-bottom: 35px;
}
@media screen and (min-width: 992px) {
    .post_img_div {
        margin-bottom: 20px;
    }    
}
.o_share {
    display: block;
    clear: both;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: right;
    padding: 10px;
    font-size: 0;
}
.detail-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.o_share .social {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background-color: #fff;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    margin: 3px;
    text-align: center;
    cursor: pointer;
}
.o_share img {
    width: 15px;
    height: 15px;
}
.open-social-btn {
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.social-bar-icons {
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    -webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}
.social-bar-icons.show_icons {
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
}


.more-post-list {
    display: block;
    clear: both;
    width: 100%;
    position: relative;
}
.more-post-list button {
    width: 200px;
    height: 50px;
    /* border: 1px solid #E5E5E5; */
    border: 1px solid var(--color3);
    font-family: var(--font1);
    font-weight: 700;
    /* font-size: 20px; */
    font-size: 18px;
    line-height: 2.3;
    letter-spacing: normal;
    color: var(--color1);
    text-align: center;
    text-transform: uppercase;
    display: block;
    margin: 0 auto;
}
.more-post-list button:hover {
    color: var(--color2);
    background-color: var(--color3);
}
.addBlock {
    display: block;
    clear: both;
    width: 100%;
    position: relative;
    min-height: 50px;
    margin-bottom: 30px;
}
.post-tags p {
    font-size: 18px;
}
.post-tags strong {
    font-size: 100%;
}
.post-tags a {
    font-size: inherit;
}
.post-tags a:hover {
    color: #8A06F1;
}

#section-6:not(.visible-section) {
    display: none;
}

.posted-on {
    /* font-size: 15px; */
    font-size: 12px;
    color: #363636;
    margin-bottom: 20px;
}
article.post a, .posted-on a {
    color: #8A06F1;
}
article.post img {
    display: block;
    clear: both;
    width: 100%;
    position: relative;
    margin: 15px 0;
}
.second-version {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.second-version .post-thumb {
    width: 125px;
    height: 125px;
}
.second-version .post-thumb img {
    height: 125px;
    object-fit: cover;
    object-position: center center;
}
.second-version .post-content {
    width: -webkit-calc(100% - 135px);
    width: -moz-calc(100% - 135px);
    width: -o-calc(100% - 135px);
    width: -ms-calc(100% - 135px);
    width: calc(100% - 135px);
}
.second-version .cat-name {
    margin-bottom: 5px;
}
.second-version .post-name-2 {
    font-size: 16px;
}
/*@media screen and (min-width: 992px) {
    .second-version .post-name-2 {
        font-size: 16px;
    }
}
@media screen and (min-width: 1140px) {
    .second-version .post-name-2 {
        font-size: 18px;
    }
}*/
.sidebar-block {
    position: sticky;
    top: 0;
}
@media screen and (max-width: 768px) {
    .mobile_hide {
        display: none;
    }
    .main-post .article-thumb {
        min-height: 160px;
    }
    .main-post .article-thumb img {
        width: 100%;
        min-height: 160px;
    }
}
iframe {
    width: 100%;
    height: 400px;
}

.footer_menu_links {
    display: block;
    clear: both;
    width: 100%;
    position: relative;
    padding-top: 15px;
    padding-bottom: 5px;
}
.footer_menu_links .footer_menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    list-style-type: none;
}
.footer_menu_links .footer_menu a, .footer_menu_links .footer_menu li {
    color: #fff;
}

.neswletter_text {
    font-family: var(--font1);
    font-weight: 900;
    font-size: 25px;
    line-height: 1.3;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    padding-top: 30px;
    width: 100%;
    max-width: 460px;
    margin: 0 auto 10px;
}
.footer_newsletter_form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 460px;
    margin: 0 auto 5px;
}
input#newsletter_email {
    height: 40px;
    width: 300px;
    padding: 11px;
    font-size: 16px;
    line-height: 40px;
    border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -ms-border-radius: 5px 0 0 5px;
    -o-border-radius: 5px 0 0 5px;
    border: none;
    outline: none;
}
button.newsletter-button {
    width: 150px;
    height: 40px;
    background: #8a06f1;
    border: none;
    border-radius:0 5px 5px 0;
    -webkit-border-radius:0 5px 5px 0;
    -moz-border-radius:0 5px 5px 0;
    -ms-border-radius:0 5px 5px 0;
    -o-border-radius:0 5px 5px 0;
    font-family: var(--font1);
    font-weight: 900;
    font-size: 18px;
    line-height: 1.3;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
}
p#newsletter span {
    font-family: var(--font3);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: normal;
    margin-bottom: 20px;
}
p#newsletter span.text-danger {
    color: #f00;
}
p#newsletter span.text-success {
    color: #0f0;
}

@media screen and (max-width: 480px) {
    .neswletter_text {
        font-size: 20px;
    }
    .footer_newsletter_form {
        width: 360px;
    }
    input#newsletter_email {
        height: 35px;
        width: 250px;
        padding: 10px;
        font-size: 15px;
        line-height: 35px;
    }
    button.newsletter-button {
        width: 100px;
        height: 35px;
        font-size: 14px;
    }
}
@media screen  and (max-width: 390px) {
    .neswletter_text {
        font-size: 18px;
    }
    .footer_newsletter_form, .footer_newsletter_form .left, .footer_newsletter_form .right {
        width: 100%;
    }
    input#newsletter_email {
        height: 35px;
        width: 100%;
        padding: 10px;
        font-size: 15px;
        line-height: 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
    }
    button.newsletter-button {
        margin-top: 10px;
        width: 100%;
        height: 35px;
        font-size: 14px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
    }
}


.about-us-page-content {
    display: block;
    clear: both;
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
.defaulte-page {
    min-height: calc(61vh + 6px);
}

.privacy-policy-page-content, .editorial_list {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
}
.ppcp-sidebar, .editorial_sidebar {
    display: none;
}
.ppcp-content, .editorial_content {
    width: 100%;
}
@media screen and (min-width: 650px) {
    .ppcp-sidebar, .editorial_sidebar {
        display: block;
        width: 30%;
    }
    .ppcp-content, .editorial_content {
        width: 68%;
    }
}
.ppcp-sidebar ul, .ppcp-sidebar ul ol, .editorial_sidebar ul, .editorial_sidebar ul ol {
    list-style-type: none;
}
.ppcp-sidebar ul ol, .editorial_sidebar ul ol {
    padding-left: 20px;
}
.ppcp-sidebar ul>li, .editorial_sidebar ul>li {
    margin-bottom: 15px;
    font-family: var(--font3);
    font-weight: 400;
    cursor: pointer;
}
.ppcp-sidebar .ppco-sb-inner, .editorial_sidebar .editorial_sidebar_inner {
    position: sticky;
    top: 60px;
}
.ppco-sb-inner li.active, .editorial_sidebar li.active {
    font-family: var(--font1);
    font-weight: bold;
}

.ppcp-content ul, .ppcp-content ol, .editorial_content ul, .editorial_content ol {
    margin-left: 20px;
}

.profile-page-data {
    margin-bottom: 30px;
}
.profile-page-data li {
    margin-right: 10px;
}
.profile-details {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 20px;
}
.profile-details .left {
    width: 150px;
}
.profile-details .right {
    width: -webkit-calc(100% - 170px);
    width: -moz-calc(100% - 170px);
    width: -o-calc(100% - 170px);
    width: -ms-calc(100% - 170px);
    width: calc(100% - 170px);
}
.profile-data {
    margin-bottom: 20px;
}
.profile-details .username {
    text-transform: capitalize;
}

.profile-posts-title {
    display: block;
    clear: both;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    font-size: 50px;
    line-height: 1.5;
    letter-spacing: normal;
    color: #000;
}