* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #000;
}

@font-face {
    font-family: CormorantGaramond-Regular;
    src: url(../fonts/CormorantGaramond-Regular.ttf);
}

@font-face {
    font-family: CormorantGaramond-Italic;
    src: url(../fonts/CormorantGaramond-Italic.ttf);
}

@font-face {
    font-family: CormorantGaramond-Medium;
    src: url(../fonts/CormorantGaramond-Medium.ttf);
}

@font-face {
    font-family: CormorantGaramond-Bold;
    src: url(../fonts/CormorantGaramond-Bold.ttf);
}

@font-face {
    font-family: CormorantGaramond-SemiBold;
    src: url(../fonts/CormorantGaramond-SemiBold.ttf);
}

@font-face {
    font-family: CormorantGaramond-MediumItalic;
    src: url(../fonts/CormorantGaramond-MediumItalic.ttf);
}

@font-face {
    font-family: CormorantGaramond-SemiBoldItalic;
    src: url(../fonts/CormorantGaramond-SemiBoldItalic.ttf);
}

@font-face {
    font-family: Opensans-Regular;
    src: url(../fonts/static/OpenSans/OpenSans-Regular.ttf);
}

@font-face {
    font-family: Opensans-SemiBold;
    src: url(../fonts/static/OpenSans/OpenSans-SemiBold.ttf);
}

@font-face {
    font-family: Opensans-Bold;
    src: url(../fonts/static/OpenSans/OpenSans-Bold.ttf);
}

@font-face {
    font-family: Opensans-Light;
    src: url(../fonts/static/OpenSans/OpenSans-Light.ttf);
}

@font-face {
    font-family: Opensans-LightItalic;
    src: url(../fonts/static/OpenSans/OpenSans-LightItalic.ttf);
}

@font-face {
    font-family: LibreBaskerville-Italic;
    src: url(../fonts/LibreBaskerville-Italic.ttf);
}

@font-face {
    font-family: LibreBaskerville-Reguler;
    src: url(../fonts/LibreBaskerville-Regular.ttf);
}

@font-face {
    font-family: Roboto-Regular;
    src: url(../fonts/Roboto-Regular.ttf);
}

#contact .content a[href^="tel"] {
    color: #5d5c5c !important;
    text-decoration: none;
  }

a {
    text-decoration: none;
}

button:focus,
input:focus {
    outline: none;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    box-shadow: 3px 3px 6px 0 rgb(0 0 0 / 16%);
    background-color: white;
    z-index: 999;
}

header .navigasi {
    padding-bottom: 12px;
    margin: 0 25px;
    height: 87px;
    display: flex;
    align-items: flex-end;
}

header .nav-logo .nav-logo-logo {
    height: 40px;
}

header .navigasi .highend-logo {
    background-image: url(../img/highend-logo.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 70%;
    height: 36px;
}

header .nav-logo {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.hamburger-menu {
    background-image: url(../img/hamburger-mobile.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 15%;
    height: 15px;
    position: relative;
    cursor: pointer;
}

header .sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #5d5c5c;
    text-align: left;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    -webkit-font-smoothing: antialiased;
}

.overflow-hidden {
    overflow: hidden;
}

header .sidebar.open {
    left: 0;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

header .sidebar .main-menu {
    list-style: none;
    margin: 0 20px;
}

header .sidebar .sidebar1 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-color: #796702;
    position: relative;
    height: 87px;
    box-shadow: 3px 3px 6px 0 rgb(0 0 0 / 16%);
}

header .sidebar .sidebar1 .sidebar1-image {
    background-image: url(../img/highend-footer.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 180px;
    height: 50px;
}

header .sidebar .sidebar1 .sidebar1-image2 {
    background-image: url(../img/close.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 15px;
    top: 15px;
    width: 17px;
    height: 17px;
}

header .sidebar .sidebar1 .sidebar1-image2:hover {
    cursor: pointer
}

header .sidebar .sidebar2 {
    background-color: #5d5c5c;
    height: auto;
    padding-top: 25px;
}

header .sidebar2 .main-menu {
    padding-top: 10px;
}

header .sidebar2 .dropdown {
    transition: all .5s ease-in;
    position: relative;
    height: 100%;
    text-align: left
}

header .sidebar2 .dropdown-hamburger {
    position: relative;
    top: -20px;
    overflow: hidden;
    display: none;
    color: black;
    list-style: none;
    text-align: center;
    cursor: pointer;
}

header .sidebar2 .dropdown-hamburger li {
    transition: all .2s ease-in-out;
    cursor: pointer
}

header .sidebar .sidebar2 .kanal-title {
    color: white;
    display: block;
    margin-bottom: 25px;
    text-transform: uppercase;
    font-family: 'CormorantGaramond-Bold';
    font-size: 23px;
}

header .sidebar .sidebar2 .dropdown .dropdown-hamburger li {
    font-family: 'CormorantGaramond-SemiBold';
    text-align: left;
    height: 25px;
    margin-top: 5px;
}

header .sidebar .sidebar2 .dropdown .dropdown-hamburger li a {
    text-transform: capitalize;
    text-align: left;
    color: #fff;
    font-size: 18px;
}

header .sidebar .sidebar2 .dropdown .dropdown-hamburger li a:hover {
    color: #a59100;
}

header .sidebar .contact-menu {
    margin: 150px 20px 20px;
    list-style: none;
}

header .sidebar .contact-menu li {
    width: fit-content;
    padding-top: 15px;
}

header .sidebar .contact-menu a {
    font-family: 'Opensans-Regular';
    font-size: 15px;
    color: #fff;
    text-align: left;
}

header .sidebar .left-sidebar {
    display: grid;
    height: 100%;
    grid-template-rows: 87px;
}

header .sidebar .sidebar3 {
    background-color: #11171d;
    padding: 20px 0;
    height: auto;
    position: relative;
}

header .sidebar .sidebar3 .sidebar3-content1 p {
    color: #a59200;
    text-align: center;
    font-family: 'LibreBaskerville-Reguler';
    font-size: 14px;
    padding: 0 20px;
}

header .sidebar3 .sidebar3-content2,
footer .group-content-2 {
    display: flex;
    justify-content: space-between;
}

footer .group1 .group-content-2,
header .sidebar3 .sidebar3-content2 {
    margin-top: 31px;
    padding: 0 20px;
}

header .sidebar3 .sidebar3-content2 .input-box #email-sidebar {
    font-family: 'Roboto-Regular';
    font-size: 12px;
    width: 100%;
    height: 35px;
}

header .sidebar3 .sidebar3-content2 input {
    border-radius: 3px;
    padding: 10px;
    border: unset;
}

header .sidebar .sidebar3-content2 .input-box,
footer .group-content-2 .input-box {
    margin-right: 20px;
    width: 100%;
}

header .sidebar .sidebar3-content2 .input-submit,
footer .group-content-2 .input-submit {
    width: 40%;
}

.validation {
    color: #fff;
    text-align: center;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    height: 30px;
    font-size: 9px;
    align-items: center;
    font-family: Opensans-Light;
}

.validation label {
    color: #Fff;
}

.subscribenow {
    background-color: #a59200;
    color: #fff;
    text-align: center;
    font-family: 'Roboto-Regular';
    font-size: 12px;
    width: 100%;
    height: 35px;
}

header .sidebar2 .main-menu .dropdown:focus-visible,
header .sidebar2 .main-menu .dropdown-hamburger:focus-visible,
.dropdown-hamburger {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    outline: unset;
}

header .search-form {
    background-color: #5d5c5c;
    position: fixed;
    width: 100%;
    top: 93px;
}

header .search-form .box-search {
    width: 70%;
    margin-left: 40px;
    color: white;
    padding: 4px 0;
}

header .search-form input {
    display: block;
    width: 100%;
    border-right-style: none;
    border-top-style: none;
    border-left-style: none;
    background-color: #5d5c5c;
    border-bottom: 1px solid white;
    color: white;
    font-size: 16px;
}

header .search-form {
    transition: .5s;
    position: fixed;
    top: 87px;
    left: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}

header .search-form.open {
    opacity: 1;
    visibility: visible;
}

header .search-form .box-search div {
    margin-top: 5px;
    font-size: 10px;
}

.sub-menu-icon {
    background-image: url(../img/dropdown.svg);
    background-size: contain;
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

.search-icon {
    width: 15%;
    height: 22px;
    position: relative;
    cursor: pointer;
    left: 30px;
}

.search-line {
    width: 12px;
    height: 2px;
    background: #796702;
    display: inline-block;
    transform: rotate(135deg);
    position: absolute;
    top: 16px;
    left: -8px;
    transition: all 0.3s ease-in 0s;
}

.active .search-line {
    width: 22px;
    left: 0;
    top: 11px;
    transition: all 0.3s ease-out 0s;
}

.search-circle {
    width: 15px;
    height: 15px;
    border: 2px solid #796702;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    transition: top 0.3s ease-in 0s, left 0.3s ease-in 0s, border-radius 0.3s ease-in 0s, border-width 0.3s ease-in 0s, width 0.3s ease-in 0s, height 0.3s ease-in 0s, background-color 0.1s ease-in 0s;
    background-color: #fff;
}

.active .search-circle {
    width: 0;
    height: 0;
    border-width: 0;
    top: 12px;
    left: 12px;
    transition: top 0.3s ease-in 0s, left 0.3s ease-in 0s, border-radius 0s ease-in 0.3s, border-width 0.3s ease-in 0s, width 0.3s ease-in 0s, height 0.3s ease-in 0s, background-color 0s ease-in 0.3s;
}

.active .second-line {
    transform: rotate(45deg);
}

main {
    margin: 0 auto;
    padding-top: 83px;
}

main .advertising a div {
    width: 100%;
    margin-top: 15px;
}

main .title-must-read {
    font-size: 20px;
    font-family: CormorantGaramond-SemiBoldItalic;
    color: #796702;
    font-stretch: normal;
    line-height: 3;
    width: 100%;
    position: relative;
    text-align: center;
    display: inline-flex;
    justify-content: space-around;
    white-space: nowrap;
    align-items: center;
}
main .title-must-read:before, 
main .title-must-read:after {
    content: '';
    width: 100%;
    height: 1px;
    background: #cac5c5;
    margin: 0 10px;
}

main .title-must-read a {
    color: #796702;
}

.date-paraghraph {
    font-family: Opensans-Light;
    font-weight: lighter;
    color: #5d5c5c;
}

.content-paraghraph {
    font-family: CormorantGaramond-SemiBold;
    color: #5d5c5c;
}

.writer-paraghraph {
    font-family: CormorantGaramond-Italic;
    color: #5d5c5c;
}

.title-paraghraph {
    font-family: Opensans-Regular;
    color: #796702;
}

main section .section1 .grid,
main section .section1 div a div {
    display: block;
    width: 100%;
}

main section .section1 .for-highlight-1,
main section .section1 .for-highlight-2,
main section .section1 .for-highlight-3,
main section .section1 .for-highlight-4,
main section .section1 .for-highlight-5,
main section .section1-style .for-highlight-1 {
    position: relative;
}

main section .section1 .highlight-grid-1,
main section .section1 .highlight-grid-2,
main section .section1 .highlight-grid-3,
main section .section1 .highlight-grid-4,
main section .section1 .highlight-grid-5 {
    position: absolute;
    left: 0;
    bottom: 0;
    font-family: CormorantGaramond-SemiBold;
    letter-spacing: 2px;
    color: white;
    padding: 10px 15px 35px;
}

main section .section1 .highlight-grid-1,
main section .section1 .highlight-grid-2,
main section .section1 .highlight-grid-1-style {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 38%, #000);
    height: 100%;
    width: 100%;
    display: inline-flex;
    align-items: flex-end;
}

main section .section1 .highlight-grid-1-style {
    position: absolute;
    left: 0;
    bottom: 0;
    font-family: CormorantGaramond-Medium;
    letter-spacing: 1px;
    color: white;
    padding: 14px 17px;
    line-height: 22px;
    font-size: 17px;
}

main .section1 .grid .grup,
main .section1 .grid .grup div {
    width: 100%;
}

main section .section1 .grid a .sub-img-grup {
    margin-bottom: 10px;
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

main .section2 {
    display: flex;
    gap: 20px;
    position: relative;
}

main section .section2-grid {
    margin-bottom: 40px;
}

main .section2 .grid .title-paraghraph {
    margin-top: 10px;
}

main .section2 .grid {
    display: flex;
    gap: 20px;
    width: 50%;
}

main .section2 .grid .grup {
    display: block;
    width: 100%;
}

main .section3 {
    margin-top: 10px;
}

main .section3 .grup,
main .section3 .grup a div {
    display: block;
    width: 100%;
}

main .section4 .video .img-iframe {
    display: block;
    position: relative;
}

main .section4 .video .img-iframe .image {
    max-height: 200px;
    object-position: center;
}

main .section4 .video .icon-playtube {
    background-image: url(../img/video-tube-icon.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 42px;
    height: 30px;
    position: absolute;
    top: 44%;
    z-index: 99;
    left: 46%;
}

main .arrow {
    width: 20px;
}

main section .more-video,
main section .more-style,
main section .more-people,
main section .more-living,
main section .more-living,
#magazine .more-style,
#subscribe .more-subscribe,
#inside-page .more-inside {
    display: flex;
    justify-content: flex-end;
    color: white;
    margin-top: 10px;

}

main section .more-news {
    padding-top: 23px;
}

main section .section1 .grid a .sub-img-grup {
    height: auto;
}

main .more {
    font-family: Opensans-SemiBoldItalic;
    background-color: #a59200;
    color: white;
    font-size: 14px;
    padding: 5px 10px;
    line-height: 14px;
    letter-spacing: 0.5px;
    border-radius: 3px;
}

.pagination {
    width: 100%;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.pagination .pagination-icon {
    width: 25px;
}

.pagination .pagination-title {
    font-family: Opensans-Light;
    color: #796702;
    letter-spacing: 0.9px;
    font-size: 15px;
}

.pagination .button-pagination {
    border: solid 1px #d3d3d3;
    border-radius: 10px;
    padding: 5px;
    color: #5d5c5c;
    background-color: #d3d3d3;
    cursor: pointer;
    line-height: 14px;
    letter-spacing: 0.5px;
    font-family: OpenSans-LightItalic;
    font-size: 13px;
}

.btn {
    border: solid 1px #d3d3d3;
    outline: none;
    padding: 5px 7px;
    background-color: #d3d3d3;
    cursor: pointer;
    font-size: 13px;
    border-radius: 100%;
    color: #5d5c5c;
    line-height: 14px;
    letter-spacing: 0.5px;
    margin-right: 2px;
    font-family: OpenSans-Light;
}

.active-pagination,
.btn:hover {
    background-color: #796702;
    border: solid 1px #796702;
    color: white;
}

footer {
    margin-top: 22px;
}

footer .group1,
footer .group2,
footer .group3 {
    background-color: #11171d;
}

footer .group1 .group-content-2 .input-box #subs {
    background-color: #a59200;
    font-family: Opensans-SemiBold;
    color: #fff;
    text-align: center;
    font-size: 12px;
}

footer .group1 .group-content {
    padding: 20px 0;
}

footer .group1 .group-content .group-content-1 {
    display: block;
    text-align: center;
    font-size: 15px;
    margin-bottom: 30px;
    line-height: 19px;
}

footer .group1 .group-content p {
    color: #a59200;
    font-family: LibreBaskerville-Italic;
    padding: 0 20px;
}

footer .group1 form .group-content-2 {
    display: block;
    width: 50%;
}

footer .group1 .group-content-2 input {
    border-radius: 3px;
    border: 0;
    padding: 10px;
    height: 35px;
}

footer .group1 .group-content-2 #email {
    font-family: Roboto-Regular;
    width: 100%;
    font-size: 12px;
}

footer .group2 .group-content p {
    color: #fff;
}

footer .group2 .group-content {
    height: 100%;
    align-items: center;
    text-align: center;
}

footer .group2 .flex-content {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

footer .group2 .group-content-1 {
    display: block;
    padding: 0 10px;
    padding-bottom: 20px;
}

footer .group2 .group-content-2 {
    display: flex;
    height: 100%;
}

footer .group2 .group-content-2 p {
    font-family: OpenSans-Regular;
}

footer .group3 {
    color: #fff;
}

footer .group2 .group-content .flex-content a .img-footer {
    height: calc(100% - 5px);
}

footer .group3 .alamat1 {
    font-family: Opensans-Light;
    text-align: center;
    color: #fff!important;
}

footer .group3 .alamat2 {
    font-family: Opensans-Light;
    text-align: center;
    padding: 20px;
    font-size: 10px;
    color: #fff;
}

footer .group3 .group-content .kontak .logo-footer>div {
    display: block;
    margin-bottom: 20px;
    width: 33vw;
    margin: 0 auto;

}

footer .group3 .group-content .kontak .logo-footer .logo-medsos {
    display: flex;
    justify-content: space-between;
}

footer .group3 .group-content .kontak .detail-kontak {
    text-align: center;
}

footer .group3 hr {
    margin-top: 22px;
    margin-bottom: 22px;
}

footer .group3 .group-content .kontak .logo-footer>div {
    padding: 20px 0;
}

button,
input {
    overflow: visible;
    font-family: inherit;
    line-height: 1.15;
    margin: 0;
}


/* STYLE PAGE CSS */


#style .menutab,
#magazine .header-magazine {
    display: flex;
    justify-content: center;
    font-family: CormorantGaramond-Regular;
}

.menutab .active div {
    color: #a59200;
}

#style .header-style,
#style .header-people,
#style .header-leisure,
#style .header-living,
#magazine .header-magazine {
    margin-bottom: 25px;
}

#style .header-style,
#style .header-people,
#style .header-leisure,
#magazine .header-magazine,
#style .header-living,
#style-fashion .header-style-fashion {
    font-size: 15px;
}

#style .header-style a:visited,
#style .header-people a:visited,
#style .header-leisure a:visited,
#style .header-living a:visited,
#style-fashion .header-style-fashion a:visited,
#magazine .header-magazine a:visited {
    color: black;
}

#style .header-style,
#style .header-leisure {
    gap: 40px;
}

#style .header-people {
    gap: 70px;
}

#style-fashion .header-style-fashion {
    gap: 60px;
}

#style .header-living {
    gap: 18px;
}
#style .header-living a{
    margin: 0 7px;
}
#style-fashion .header-style-fashion {
    line-height: 18px;
    letter-spacing: 0.75px;
    margin-bottom: 15px;
}

#style-fashion .header-style-fashion .tag-orange {
    color: #a59200;
}

#style .padding,
#style-fashion .padding {
    padding: 0 27px;
    margin-top: 21px;
}

/* INSIDE PAGE CSS */

#inside-page {
    margin-top: 11px;
}

#inside-page .up-header {
    position: relative;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
#inside-page .child {
    display: flex;
    flex-flow: column;
    white-space: nowrap;
}

#inside-page .up-header:after {
    content: '';
    position: absolute;
    width: 100%;
    opacity: 0.5;
    height: 1px;
    background: #707070;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-left: 15px;
}

#inside-page .up-header .style-header,
#inside-page .up-header .fashion-header {
    font-size: 15px;
    letter-spacing: 0.75px;
    line-height: 18px;
}

#inside-page .singlecrumb.up-header .style-header {
    line-height: 2.5;
}

#inside-page .up-header .style-header {
    color: #a59200;
    font-family: CormorantGaramond-MediumItalic;
}

#inside-page .up-header .fashion-header {
    color: #000000;
    font-family: CormorantGaramond-Regular;
}

#inside-page .cover {
    color: #5d5c5c;
    margin: 20px 0 10px;
}

#inside-page .cover,
#inside-page .up-header,
#inside-page .inside-comment,
#inside-page .inside-content,
#inside-page .inside-title,
#inside-page .inside-tag {
    padding: 0 9px 0 10px;
}

#inside-page .cover .title-cover {
    font-size: 25px;
    line-height: 30px;
    font-family: CormorantGaramond-SemiBold;
    letter-spacing: 1.25px;
    padding-bottom: 10px;
    color: #5d5c5c;
}

#inside-page .cover .writer-cover {
    display: flex;
    font-size: 10px;
    letter-spacing: 0.2px;
}

#inside-page .cover .writer-cover .writer {
    font-family: Opensans-Regular;
    margin-right: 5px;
    color: #5d5c5c;
    
}

#inside-page .cover .writer-cover .date-writer {
    font-family: Opensans-Light;
    color: #5d5c5c;
}

#inside-page .inside-image {
    width: 100%;
    height: 397px;
    margin: 10px 0;
}

#inside-page .inside-video {
    width: 100%;
    height: 195px;
    margin: 10px 0;
}

#inside-page .inside-video iframe {
    border: unset;
}

#inside-page .inside-content iframe,
#inside-page .inside-content p iframe {
  width: 100%;
}

#inside-page .inside-comment {
    font-family: Opensans-Regular;
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 0.3px;
    color: #707070;
    margin-bottom: 10px;
}

#inside-page .line {
    content: '';
    width: 100%;
    display: block;
    border-top: solid 2px #707070;
    width: 95%;
    margin: 0 auto;
    opacity: 0.2;
    margin-bottom: 10px;
}


#inside-page .inside-content,
#inside-page .inside-title {
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0.75px;
    color: #707070;
}

#inside-page .inside-content {
    font-family: CormorantGaramond-Medium;
    margin-bottom: 20px;
}
#inside-page .inside-content p{
    margin: 10px 0;
    color: #707070;
}
#inside-page .inside-content p em strong{
    display: unset;
    margin: unset;
}
#inside-page .inside-content p em strong a{
    color: #9b8d42;
}

#inside-page .inside-content strong {
    margin-top: 20px;
    display: block;
}

#inside-page .inside-content p strong,
#inside-page .inside-content p strong em {
    color: #707070;
    font-size: 12px;
}

#inside-page .inside-title {
    font-family: CormorantGaramond-Bold;
}

#inside-page .inside-tag {
    color: #707070;
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 0.6px;
    font-family: OpenSans-Regular;
}

#inside-page .inside-medsos {
    display: flex;
    gap: 70px;
    width: 100%;
    height: 51px;
    background-color: #707070;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 10px;
}
.kontak {
    margin: 0 20px;
}



/* Magzine */

#magazine .title-magazine {
    display: flex;
    gap: 0 20px;
}

#magazine .title-magazine .title-img {
    width: 38%;
}

#magazine .title-magazine .title-content {
    width: 62%;
}

#magazine .content-magazine-1 {
    display: flex;
    gap: 0 20px;
}

#magazine .content-magazine-1 div {
    display: block;
    width: 100%;
}

#magazine .content-magazine-3 {
    display: flex;
    flex-flow: wrap;
    padding: 0 10px;
}

#magazine .content-magazine-3 .grid{
    width: 50%;
    display: flex;
    justify-content: space-evenly;
}

#subscribe .content-magazine-3 .grid {
    display: flex;
    gap: 10px;
}

#subscribe .content-magazine-3 .grid {
    justify-content: center;
}

#magazine .content-magazine-3 div .content3-img{
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    max-width: calc(100% - 4.5px);
    max-height: calc(100% - 45.1px);
}

#subscribe section .content-magazine-3 div div {
    display: block;
    width: 100%;
    margin: 0 5px;
    max-width: calc(100% - 9px);
}

#magazine .title-magazine .title-content .title1 {
    font-family: CormorantGaramond-SemiBold;
    color: #5d5c5c;
}

#magazine .title-magazine .title-content .title2 {
    font-family: CormorantGaramond-MediumItalic;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
    color: #5d5c5c;
}

#magazine .title-magazine .title-content .title3 {
    font-family: CormorantGaramond-Regular;
    letter-spacing: 2.5px;
    color: #796702;
}

#magazine .title-magazine .title-content .title4 {
    font-family: CormorantGaramond-Regular;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: #5d5c5c;
}

#magazine .more-stories {
    margin: 15px 0;
    font-family: CormorantGaramond-MediumItalic;
    font-size: 19px;
    color: #5d5c5c;
}

#magazine .content-magazine-1 .content-title {
    font-family: CormorantGaramond-Regular;
    color: #5d5c5c;
}

#magazine .content-magazine-1 .content-content {
    margin-bottom: 10px;
    font-family: CormorantGaramond-SemiBold;
    color: #5d5c5c;
}

#magazine .content-magazine-2 {
    text-align: center;
}

#magazine .content-magazine-2 .content-content-2 {
    font-family: CormorantGaramond-Regular;
    letter-spacing: 1px;
    color: #5d5c5c;
    margin-bottom: 19px;
}

#magazine .content-magazine-2 .submit {
    background-color: #790202;
    font-family: Opensans-SemiBold;
    color: #fff;
    text-align: center;
    padding: 0 30px;
    letter-spacing: 0.45px;
    border-radius: 10px;
    border: 1px solid #790202;
    height: 30px;
}

#subscribe .section .content-magazine-3 .grid {
    padding: 0 10px;
}

#magazine .content-magazine-3 .grid .title-content,
#subscribe .content-magazine-3 .grid .title-content {
    text-align: center;
    font-family: CormorantGaramond-SemiBold;
    color: #796702;
    padding: 10px 0;
}

#subscribe .content-magazine-3 .content3-img {
    height: 228px;
}

#magazine section .cover-head {
    color: #a59200;
    padding-top: 10px;
    margin: 0 10px;
    border-bottom: solid 0.5px #cac5c5;
}

#magazine section .cover-head-1 {
    font-family: CormorantGaramond-SemiBoldItalic;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0.38;
    margin-bottom: 4px;
}

#magazine section .cover-head-2 {
    font-family: CormorantGaramond-SemiBold;
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0.45;
}

#magazine section .cover-head-3 {
    font-family: CormorantGaramond-Medium;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0.45;
}

#magazine section .sub-content-magazine {
    padding: 0 10px;
}

#magazine section .title-paraghraph-magazine {
    font-size: 18px;
    color: #a59200;
    font-family: CormorantGaramond-Medium;
    margin-bottom: 15px;
    line-height: 18px;
    letter-spacing: 0.45px;
}

#magazine section .content-paraghraph-magazine {
    font-size: 15px;
    color: #5d5c5c;
    font-family: CormorantGaramond-Medium;
    line-height: 18px;
    letter-spacing: 0.38px;
}

#magazine .content-magazine-2 {
    padding: 25px 47px 0;
}

#magazine .content-magazine-2 .content-print {
    font-family: CormorantGaramond-Regular;
    font-size: 25px;
    color: #5d5c5c;
    margin-bottom: 20px;
}

/* Subscribe */
 .content-subscribe {
    background-color: #790202;
    color: white;
    padding: 5px;
    border-radius: 7px;
    border: solid 1px #790202;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    width: 55%;
    display: block;
    margin: 0 auto;
    font-size: 13px;
    cursor: pointer;
    position: relative;
}
.content-subscribe a{
    color: #fff;
}

#subscribe .section1 .head-img-subscribe {
    height: 510px;
}

#subscribe .section1 .cover-head .cover-head-1,
#subscribe .section1 .cover-head .cover-head-2 {
    font-family: CormorantGaramond-Regular;
    font-size: 25px;
    line-height: 30px;
    letter-spacing: 0.63px;
}

#subscribe .section1 .cover-head .cover-head-1 div{
    color: #5d5c5c;
    padding: 10px 0 10px 9px;
}

#subscribe .section1 .cover-head .cover-head-2 {
    color: #a59200;
    padding: 0 9px;
    position: relative;
    padding-top: 3px;
}

#subscribe .section1 .cover-head-2:after {
    content: '';
    width: 100%;
    height: 1px;
    width: -webkit-fill-available;
    opacity: 0.5;
    background: #707070;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

#subscribe .subscribe-section {
    padding: 0 10px 0 9px;
    text-align: center;
}

#subscribe .subscribe-section .subsec-1 {
    font-family: CormorantGaramond-Regular;
    font-size: 30px;
    line-height: 18px;
    letter-spacing: 0.75px;
    color: #5d5c5c;
    margin: 15px 0 30px 0;
}

#subscribe .subscribe-section .subsec-2 {
    color: #5d5c5c;
    font-family: CormorantGaramond-SemiBold;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0.23px;
}

#subscribe .link-medsos .tokopedia {
    margin-top: 62px;
    margin-bottom: 10px
}

#subscribe section .marketplace {
    margin: 0 30px;
    margin-top: 20px;
}
#subscribe section .form{
    margin: 10px 30px;
}
#subscribe section .marketplace div {
    background-color: #790202;
    border: solid 1px #790202;
    color: white;
    font-family: Opensans-SemiBold;
    text-align: center;
    padding: 5px 0;
    margin: 0 auto;
}
#subscribe section .marketplace div:hover {
    background-color: #e0e0e0;
    color: #796702;
    border: solid 1px #e0e0e0;
}

#subscribe section .marketplace div,
#subscribe section .form input {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-size: 12px;
    border-radius: 10px;
}

#subscribe section .fill-instruction {
    color: #5d5c5c;
    text-align: center;
    font-family: CormorantGaramond-SemiBoldItalic;
    padding: 12px 0;
}

#subscribe section .form input {
    color: #707070;
    border: solid 1px #707070;
    font-family: Opensans-Light;
    padding: 4px 0px 4px 10px;
    margin: 0 auto;
    margin-bottom: 10px;
    height: 28px;
    font-size: 13px;
}
#subscribe section .choice-packet{
    margin: 20px 0 10px;
}
#subscribe section .choice-packet .donate-now{
    display: flex;
    justify-content: center;
    margin: 0 6px;
}

#subscribe section .choice-packet .donate-now li {
    background-color: #d3d3d3;
    color: white;
    min-width: 112px;
    width: 100%;
    border-radius: 15px;
    padding: 12px 8px;
    list-style: none;
    text-align: center;
    margin: 0 5px;
}
#subscribe section .choice-packet .donate-now input{
    display: none;
}

#subscribe section .choice-packet .donate-now li.active {
    background-color: #707070;
}

#subscribe section .choice-packet .month {
    font-family: Opensans-Regular;
    font-size: 15px;
    opacity: 90%;
    letter-spacing: 00.45px;
    color: #fff;
    -webkit-font-smoothing: antialiased;
}

#subscribe section .choice-packet .prices {
    font-family: CormorantGaramond-Bold;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #fff;
}

#subscribe section div .free-delivery {
    font-family: Opensans-Italic;
    color: #5d5c5c;
    font-size: 12px;
    text-align: center;
    padding: 5px 0 15px 0;
    font-style: italic;
}

#subscribe section #button-subs,
#subscribe section #button-butn {
    background-color: #790202;
    color: white;
    padding: 5px;
    border-radius: 7px;
    border: solid 1px #790202;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    width: -webkit-fill-available;
    display: block;
    margin: 0 30px;
    font-size: 13px;
    cursor: pointer;
    position: relative;
}

#subscribe section #button-butn {
    margin-bottom: 20px;
}

#subscribe section #button-subs:active,
#subscribe section #button-butn:hover {
    background-color: #e0e0e0;
    color: #796702;
    border: solid 1px #e0e0e0;
}
  
  @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
  }
.donate-now li.null {
    outline: auto;
    outline-color: #790202;
    animation: shake 0.5s;
}
#subscribe section .digital-version:before {
    content: '';
    height: 1px;
    width: 100%;
    opacity: 0.5;
    background: #707070;
    display: inline-block;
    position: relative;
    vertical-align: middle;

}

#subscribe section .digital-version {
    margin-top: 20px;
    text-align: center;
    padding: 0 20px;
}

#subscribe section .digital-version .title {
    margin-top: 20px;
    font-size: 30px;
    font-family: CormorantGaramond-Regular;
    margin-bottom: 14px;
    color: #5d5c5c;
}

#subscribe section .digital-version .content {
    font-size: 15px;
    font-family: CormorantGaramond-SemiBold;
    margin-bottom: 16px;
    color: #5d5c5c;
}

/* Search Result */

#search-result .header-search-result {
    padding-bottom: 22px;
    color: #5d5c5c;
    padding-left: 9px;
}

#search-result .header-tag-result {
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 30px;
    margin-bottom: 30px;
    padding-left: 10px;
  }
  
  #search-result .header-tag {
    line-height: 40px;
    letter-spacing: 3px;
    font-family: Opensans-Regular;
    color: #796702;
    margin-right: 12px;
  }
  
  #search-result .header-tag-word {
    font-family: CormorantGaramond-SemiBold;
    color: #5d5c5c;
  }
  

#search-result .header-search-result .header-search {
    font-family: CormorantGaramond-SemiBold;
    font-size: 32px;
    line-height: 20px;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
    margin-top: 10px;
}

#search-result .header-search-result .header-search-number {
    font-family: Opensans-Regular;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.2px;
}








/* About  */

#about .title-aboutus {
    padding: 20px 0;
    color: #a59200;
    font-family: CormorantGaramond-SemiBold;
    font-size: 18px;
    letter-spacing: 0.9px;
    line-height: 22px;
    text-align: center;
}

#about .content-aboutus {
    color: #707070;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0.75px;
    font-family: CormorantGaramond-Medium;
    padding: 0 9px 0 10px;
}

#about .content {
    font-family: CormorantGaramond-Medium;
}

#about .jdl-content {
    font-family: CormorantGaramond-Bold;
}

#about .content,
#about .jdl-content {
    letter-spacing: 0.38px;
    color: #5d5c5c;
    font-size: 15px;
    padding: 0 9px 0 10px;
}

main .title-must-read-siber {
    font-size: 20px;
    font-family: CormorantGaramond-SemiBoldItalic;
    color: #796702;
    font-stretch: normal;
    /* line-height: 3; */
    width: 100%;
    position: relative;
    text-align: center;
    display: inline-flex;
    justify-content: space-around;
    white-space: nowrap;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

main .title-must-read-siber:before {
    content: '';
    position: absolute;
    width: 32%;
    border: solid 0.5px #cac5c5;
    left: 0;
    bottom: 33px;
}

main .title-must-read-siber:after {
    content: '';
    position: absolute;
    width: 32%;
    border: solid 0.5px #cac5c5;
    border-width: thin;
    right: 0;
    bottom: 33px
}

/* Contact */

#contact .title,
#contact .content {
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0.38px;
    padding: 0 18px 0 9px;
}

#contact .title {
    color: #a59200;
    font-family: CormorantGaramond-SemiBold;
}

#contact .content {
    color: #5d5c5c;
    font-family: CormorantGaramond-Medium;
}

#search-result .result-zero {
    color: #5d5c5c;
    text-align: center;
    padding: 130px 0 172px 0;
}

#search-result .result-zero .not-found {
    font-family: CormorantGaramond-SemiBold;
    font-size: 26px;
    margin-bottom: 20px;
    line-height: 20px;
    letter-spacing: 1.3px;
}

#search-result .result-zero .another {
    font-family: CormorantGaramond-Medium;
    font-size: 20px;
    cursor: pointer;
    line-height: 20px;
    letter-spacing: 1px;
}

#search-result .result-zero .another:hover {
    font-family: CormorantGaramond-SemiBoldItalic;
    color: #796711;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

blockquote:before {
    content: open-quote;
}

blockquote:after {
    content: close-quote;
}


/* popup subscribe */
@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.open .popup-inner {
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 32%;
    bottom: 0;
    right: 0;
    left: 0;
    animation: fadein .4s;
    animation-timing-function: ease-out;
    max-height: 130px;
}

.popup-content {
    width: 100%;
    height: 100%;
    position: relative;
}

.open .popup-content .animate-text {
    width: 60%;
    height: auto;
    position: absolute;
    font-style: italic;
    text-align: center;
    top: 15%;
    bottom: 0;
    right: 30%;
    left: 30%;
}

.popup-content .text-up {
    color: #a59200;
    font-size: 14px;
    position: relative;
    opacity: 1;
    left: 0;
    width: 100%;
    max-width: 120px;
    /* animation: gerak-kiri .8s;
    animation-timing-function: ease-out; */
    margin: auto;
    animation: fadein 4s;
    -moz-animation: fadein .4s;
    -webkit-animation: fadein .4s;
    -o-animation: fadein .4s;
}

.popup-content .text-down {
    color: #fff;
    font-size: 10px;
    position: relative;
    opacity: 1;
    right: 0;
    top: 4%;
    width: 100%;
    /* animation: gerak-kanan .8s;
      animation-timing-function: ease-out; */
    margin: auto;
    animation: fadein 4s;
    -moz-animation: fadein .4s;
    -webkit-animation: fadein .4s;
    -o-animation: fadein .4s;
}

.popup-content button {
    position: absolute;
    font-size: 9px;
    width: 93px;
    height: 19px;
    border-radius: 3px;
    background-color: #a59200;
    bottom: 25%;
    right: 28%;
    border: 0;
    color: #fff;
    padding: 5px;
    cursor: pointer;
    opacity: 1;
}

.popup-content img {
    width: 100%;
}

.open .popup-content button {
    animation: fadein .4s;
    /* animation-timing-function: ease; */
}

.popup-content button:active {
    transform: translatey(5px);
}

.popup-wrap {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    margin: auto;
}

.open .bg-overlay {
    display: block;
    background: rgba(0, 0, 0, 0.85);
    height: 101vh;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    -webkit-transition: background 0.15s linear;
    -o-transition: background 0.15s linear;
    transition: background 0.15s linear;
}

.bg-overlay {
    display: none;
}

.close-btn:active {
    transform: scale(.8);
}

.overflow-hidden {
    overflow: hidden;
}

.popup-success,
.popup-magz {
    display: none;
}

.popup-success .popup-content,
.popup-magz .popup-content {
    width: auto;
    height: 174px;
    position: relative;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 16%);
    border-radius: 30px;
    padding: 20px 30px;
}

.popup-success .popup-wrap,
.popup-magz .popup-wrap {
    width: auto;
    margin: 0 24px;
}

.popup-success .text-up,
.popup-success .text-down,
.popup-magz .text-up,
.popup-magz .text-down {
    color: #212121;
}

.popup-success .popup-content .button-ok,
.popup-magz .popup-content .button-ok {
    position: absolute;
    font-family: 'Opensans-SemiBold';
    font-size: 14px;
    height: 30px;
    width: 110px;
    border-radius: 5px;
    background-color: #a49200;
    border: 0;
    color: #fff;
    cursor: pointer;
    margin: 0 auto;
    bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    left: 0;
}

.button-ok.close:hover {
    opacity: .7;
}

.popup-success.open .popup-content .animate-text,
.popup-magz.open .popup-content .animate-text {
    width: 100%;
    top: 11%;
    left: 0;
    font-style: normal;
}

.popup-success .text-up,
.popup-magz .text-up {
    font-family: 'CormorantGaramond-SemiBold';
    font-size: 18px;
    max-width: unset;
}

.popup-success .text-down,
.popup-magz .text-down {
    top: 15%;
    width: 80%;
    font-family: 'CormorantGaramond-SemiBold';
    font-size: 14px;
    line-height: 1.3;
}

.subscribenow:active {
    transform: translatey(5px);
}

.popup-magz .popup-content .button-ok {
    background-color: #790202;
}

.popup-magz .text-up,
.popup-magz .text-down {
    color: #796702;
}

.popup-magz .text-down {
    width: 60%;
}

.popup-magz .popup-content .button-ok {
    width: 173px;
}

/* end popup events */

/* headline slider */
.swiper-button-next:after,
.swiper-button-prev:after {
    display: none;
}

.swiper-button-next,
.swiper-button-prev {
    width: 25px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
}

.swiper-button-next {
    background-image: url(../img/polygon-next.svg);
}

.swiper-button-prev {
    background-image: url(../img/polygon-prev.svg);
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    display: none;
}

.swiper-pagination {
    width: 100%;
    position: absolute;
    bottom: 10px;
}

.swiper-pagination-bullet {
    width: 32px;
    height: 3px;
    background: #fff;
    border-radius: unset;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    margin: 0 4px;
    opacity: .4;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
}

/* end headline slider */
footer .group {
    border-top: 1px solid #787575;
}

/* follow us */
.followus {
    position: relative;
}

.followus .social.open ul li {
    visibility: visible;
    padding-right: 3em;
}

.followus .social ul {
    list-style: none;
    position: absolute;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: start;
    top: -4px;
    background: #5d5c5c;
    height: 100%;
}

.followus .social ul li {
    cursor: pointer;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.followus .social ul li i {
    color: #555;
}

.followus .social.js-btns-share.open {
    position: absolute;
    top: 0;
    background: #5d5c5c;
    width: 100%;
    height: 100%;
}

.followus .js-btns-share a,
.followus .js-btns-share span {
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    background-color: black;
    border-radius: 100%;
}

.followus .js-btns-share .facebook {
    background-image: url(../img/facebook.png);
}

.followus .js-btns-share .youtube {
    background-image: url(../img/youtube.png);
}

.followus .js-btns-share .instagram {
    background-image: url(../img/instagram.png);
}

.followus .js-btns-share .close {
    background-image: url(../img/close.png);
    width: 17px;
    height: 17px;
    margin: 7px 0;
    background-color: unset;
}

/* Responsive */

@media (max-width: 800px) {
    main .advertising a div {
        height: 120px;
    }

    main section .section1 .grid a .head-img-grup {
        height: 439px;
    }
    main section .section1 .highlight-grid-1,
    main section .section1 .highlight-grid-2,
    main section .section1 .highlight-grid-3,
    main section .section1 .highlight-grid-4,
    main section .section1 .highlight-grid-5 {
        font-size: 25px;
    }

    main .section1 .grid .grup {
        margin-top: 15px;
    }

    main section .section1 .grid .sub-content {
        padding: 12px;
    }

    .title-paraghraph {
        font-size: 16px;
    }

    .date-paraghraph {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .content-paraghraph {
        font-size: 18px;
    }

    #more-video .content-paraghraph,
    .other-video .content-paraghraph {
        font-size: 15px;
    }

    main .section3 .grup,
    main .section3 .grup a div {
        height: 320px;
    }

    footer .group1 .group-content-2 .input-box #subs {
        width: 113px;
    }

    footer .group2 .group-content-2 p {
        padding: 10px 65px;
        font-size: 15px;
    }

    footer .group3 .group-content .kontak .detail-kontak {
        font-size: 13px;
        margin-bottom: 10px;
    }
}

@media (max-width: 375px) {

    header .sidebar .sidebar2 .main-menu li div a {
        font-size: 23px;
    }

    main .advertising a div {
        height: 78px;
    }

    main section .section1 .grid a .head-img-grup {
        height: 397px;
    }
    main section .section1 .highlight-grid-1,
    main section .section1 .highlight-grid-2,
    main section .section1 .highlight-grid-3,
    main section .section1 .highlight-grid-4,
    main section .section1 .highlight-grid-5 {
        font-size: 20px;
    }

    main .section1 .grid .grup {
        margin-top: 10px;
    }

    main section .section1 .grid .sub-content {
        letter-spacing: 0.33px;
    }

    main section .section1 .grid .sub-content {
        padding: 10px;
    }

    main .section3 .grup,
    main .section3 .grup a div {
        height: 305px;
    }

    footer .group1 .group-content-2 .input-box #subs {
        width: 103px;
    }

    footer .group2 .group-content-2 p {
        padding: 20px 32px;
        font-size: 13px;
    }

    footer .group3 .group-content .kontak .detail-kontak {
        font-size: 10px;
    }
}

@media (max-width: 360px) {}