/*
    Theme Name:   X-Code 
    Theme URI:    https://www.training-sdm.com
    Description:  X-Code
    Author:       X-Code
    Author URI:   https://www.training-sdm.com
    Version:      0.0.1
    License:      license purchased
    License URI:  https://www.training-sdm.com
    Text Domain:  training-sdm
*/

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@900&display=swap');


@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxK.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

a {
    text-decoration: none;
}

.menu-item>.dropdown-menu>.menu-item>a:hover {
    /* background-color: #049eff; */
    color: #31d6aa;
}

.header-sub {
    background-color: black;
}

.container #menu-menu-utama>.menu-item {
    color: black;
    padding: 20px 10px;
    background-image: linear-gradient(#049eff, #049eff), linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
    background-size: 0 100%, auto;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.2s ease-out;
}

.container #menu-menu-utama-1>.menu-item {
    color: black;
    padding: 10px 10px;
    background-image: linear-gradient(#049eff, #049eff), linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
    background-size: 0 100%, auto;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.2s ease-out;
}

.container #menu-menu-utama-2>.menu-item {
    background-image: linear-gradient(#049eff, #049eff), linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    background-size: 0 100%, auto;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.2s ease-out;
}

.container #menu-menu-utama>.menu-item:hover,
.container #menu-menu-utama-1>.menu-item:hover,
.container #menu-menu-utama-2>.menu-item:hover {
    background-color: #f8c645;
    background-size: 100% 100%, auto;
    /* transition: 0.3s; */
}

.container #menu-menu-utama>.menu-item:hover>a,
.container #menu-menu-utama-1>.menu-item:hover>a {
    color: white;
}

li.dropdown:hover>.dropdown-menu {
    display: inline-block;
    min-width: 13rem;
    font-size: 14px;
    padding-left: 20px;
    font-weight: 600;
}

.sidebar-utama .textwidget>p>a>img {
    height: auto;
    width: 80%;
}

.sidebar-utama .textwidget .tmb-3d-bnd {
    width: 90%;
    margin: auto;
    display: block;
}

.sidebar-utama .textwidget a {
    color: white;
}

.sidebar-utama .block-title {
    color: white;
    border-bottom: 2px solid #940000;
    margin-bottom: 15px;
    /* font-size: unset;
    background-color: unset; */
}

.sidebar-utama .block-title>span {
    padding: 6px 12px 4px;
    /* background-color: #940000; */
    font-size: 14px;
    background-image: linear-gradient(to top, #940000, red);
    /* text-transform: uppercase; */
    font-weight: 600;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
    display: block;
    width: max-content;
}

.sidebar-utama .block-title>span::before {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    box-sizing: border-box;
    width: calc(100% - 4px);
    height: 55%;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .6), rgba(255, 255, 255, .2));
    z-index: 1;
}

.sidebar-utama .block-title>span::after {
    content: "";
    display: block;
    position: absolute;
    top: -40px;
    left: -14px;
    box-sizing: border-box;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-image: linear-gradient(to left, rgba(250, 250, 250, .5) 1%, transparent 70%);
    z-index: 1;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.sidebar-utama>#sidebar-sticky>div {
    padding-bottom: 20px;
}

.sidebar-utama #searchsubmit {
    color: white;
    position: absolute;
    background-color: dodgerblue;
    border: 1px solid dodgerblue;
    /* box-shadow: none; */
    margin: 0;
    right: 0;
    font-size: 14px;
    margin-left: 0px !important;
    padding: 3px 10px;
}

.container>#menu-menu-baru {
    background-color: black;
}

.container>#menu-menu-baru:before {
    content: "";
    background-color: black;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
}

#sidebar-sticky #s {
    width: 95%;
    border: 1.5px solid #ced4da;
}

#sidebar-sticky #s:focus {
    outline: none;
}

.container>#menu-menu-baru>.menu-item {
    /* color: white; */
    padding: 0px 5px;
}

.container>#menu-menu-baru>.menu-item>a {
    font-size: 12px;
    color: white;
}

#container-post>h3 {
    /* width: 70%; */
    padding: 10px 10px 10px 0px;
    margin-left: 5px;
    position: relative;
    font-family: "Raleway", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    /* border-bottom: 5px solid rgb(78, 113, 255); */
    /* border-width: calc(100% / 3); */
    margin-top: 20px;
}

h3 ::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 50%;
    left: 0;
    border-top: 1px solid rgb(54, 134, 220);
}

.card {
    border: unset;
    border-radius: 0px;
}

.card img,
.similar-articles img,
.post-footer img {
    transition: transform 0.5s ease;
    filter: brightness(90%);
}

.card:hover img,
.post-footer img:hover,
.similar-articles img:hover {
    transform: scale(1.5);
    /* filter: brightness(100%); */
}

.card-img {
    border-radius: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .row {
    --bs-gutter-x: 0;
} */
.card-date {
    font-size: 12px;
}

.card-group.col-9>* {
    padding-right: 10px;
}

.card-group:last-child .card {
    padding: 2px;
}

.card-group a {
    color: black;
    text-decoration: none;
}

/* .card-title-second {
    font-size: 18px;
}
.card-text-second {
    font-size: 14px;
} */
.batas-gambar {
    overflow: hidden;
}

.card-text {
    text-align: justify;
}

.card-body {
    padding: 0rem 1rem;
}

.card-utama>.card-body {
    padding: 1rem 0rem;
}

.post-footer>a {
    text-decoration: none;
}

.post-footer>a>.row {
    padding-bottom: 10px;
}

footer {
    background-color: rgb(31, 31, 31);
    margin-top: 40px;
}

footer h3 {
    font-size: 1.25rem;
    font-family: var(--bs-body-font-family);
    text-transform: uppercase !important;
    font-weight: 700px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.083);
}

footer .container>.row>* {
    padding: 10px;
}

.single-post .row>div>h4 {
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 16px;
}

.single-post .row>div>h4>a {
    text-decoration: none;
    /* color: rgb(95, 95, 95); */
    text-transform: uppercase;
}

.single-date {
    font-size: 16px;
    /* font-family: oswald; */
    color: rgb(165, 165, 165);
    /* text-transform: uppercase; */
    font-weight: 600;
}

.single-post p a {
    text-decoration: none;
    color: rgb(158, 158, 158);
}

.single-post .previousnext {
    margin-top: 40px;
    margin-bottom: 40px;
}

.single-post .previous>h6,
.single-post .next>h6 {
    color: rgb(158, 158, 158);
    text-transform: uppercase;
}

.single-post .previous>div>a,
.single-post .next>div>a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    color: black;
}

.single-post .previous>div>a:hover,
.single-post .next>div>a:hover {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    color: rgb(143, 143, 143);
}

.single-post .next {
    text-align: right;
}

.single-tags {
    line-height: 1.75;
}

.single-tags>a {
    /* text-decoration: none;
    color: gray;
    font-size: 12px;
    padding: 5px; */
    text-decoration: none;
    color: white;
    font-size: 12px;
    padding: 4px;
    background-color: #31d6aa;
}

.single-tags>a:hover {
    background-color: #4af0c4;
    color: white;
}

.jadwalList>h2 {
    font-size: 18px;
    margin-top: 40px;
}

table {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

table,
td,
th {
    border: 1px solid rgb(230, 230, 230);
}

.search>.container,
.tag>.container,
.category>.container {
    padding-top: 30px;
}

.search>.container .row,
.tag #content .row,
.category #content .row {
    /* padding-top: 10px; */
}

.search .row>div>a,
.tag .row>div>a,
.category .row>div>a {
    text-decoration: none;
    color: black;
    font-weight: 600;
    font-size: 18px;
}

.search-date,
.tag-date,
.category-date {
    font-size: 14px;
    color: rgb(165, 165, 165);
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
}

.search-content,
.tag-content,
.category-content {
    font-size: 14px;
}

.error404>.container {
    text-align: center;
}

.error404>.container>div {
    margin: 100px 0px 100px 0px;
}

.error404 h1 {
    font-family: Oswald;
    font-weight: 700;
}

.error404 h6 {
    font-family: Oswald;
    font-weight: 700;
    color: gray;
}

.similar-articles a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

.similar-articles img {
    /* margin-bottom: 15px; */
}

.home .box1,
.home .box2,
.home .box3 {
    padding-bottom: 15px;
}

.similar-articles>.row>.col-4>a>div {
    margin-top: 15px;
}

/* .similar-articles > .row > * {
    padding: 8px;
} */
.footer-img>img {
    width: 300px;
    /* width: 100%; */
    padding-left: 50px;
    padding-right: 50px;
}

footer p {
    font-size: 12px;
}

footer h5 {
    padding-bottom: 10px;
}

.jdl {
    position: relative;
    width: max-content;
    background-image: linear-gradient(to top, #940000, red);
    overflow: hidden;
}

.jdl span,
.jdl a {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: max-content;
    height: 35px;
    line-height: 35px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0 24px;
    color: white;
    z-index: 2;
}

.jdl::before {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    box-sizing: border-box;
    width: calc(100% - 4px);
    height: 55%;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .6), rgba(255, 255, 255, .2));
    z-index: 1;
}

.jdl::after {
    content: "";
    display: block;
    position: absolute;
    top: -30px;
    left: -18px;
    box-sizing: border-box;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-image: linear-gradient(to left, rgba(250, 250, 250, .5) 1%, transparent 70%);
    z-index: 1;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.wdh-jdl {
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid #940000;
}

.card-img-overlay {
    top: unset;
    font-family: "roboto";
    text-shadow: 1px 1px 5px black;
}

.card-img-overlay small {
    font-size: 10px;
    text-transform: uppercase;
    padding: 3px 7px;
}

.me-lg-3 {
    margin-right: 0px !important;
}

.breadcrumb,
.breadcrumb>a {
    text-decoration: none;
    color: rgb(165, 165, 165);
}

.post>h2>a {
    text-decoration: none;
    color: black;
}

.page>.container {
    padding-top: 20px;
}

.post #listJadwalPelatihan {
    margin-top: 20px;
}

.NP1 {
    text-align-last: justify;
    border-bottom: 1px solid #7aa1fb;
    padding-bottom: 25px;
}

.NP2 {
    text-align-last: justify;
    /* border-top: 1px solid #7aa1fb; */
    padding-top: 25px;
}

.post #listJadwalPelatihan .lis {
    padding-top: 20px;
    padding-bottom: 20px;
}

#listJadwalPelatihan>.nextPrev>a {
    text-decoration: none;
    color: rgb(165, 165, 165);
}

.nextPrev>.Next,
.nextPrev>.Prev {
    cursor: pointer;
}

.form-cari {
    position: absolute;
    display: none;
    color: black;
    padding: 10px 10px;
    background-color: white;
    border-top: 3px solid #7aa1fb;
    box-shadow: 0px 3px 3px gainsboro;
}

#sidebar-sticky {
    position: sticky;
    top: 0;
}

.sidebar-utama>#sidebar-sticky>div>.searchform::before {
    content: "SEARCH";
    display: inline-block;
    color: black;
    /* font-family: Oswald; */
    font-weight: 700;
    font-size: 21px;
    border-bottom: 3px solid black;
    padding-right: 20px;
    margin-bottom: 15px;
    /* background-color: chartreuse; */
}

/* .single .sidebar-utama {
    margin-top: 25px;
} */
.card.col-12>.row {
    --bs-gutter-x: 0px;
}

footer {
    background-color: #000;
}


.style-mobile-menu {
    display: table-row-group;
    position: absolute;
    width: 70%;
    height: 100%;
    left: 0;
    /* background-color: white; */
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 200;
}

.card-title {
    text-align: left;
}

footer .row>div:first-child {
    text-align: -webkit-center;
}

footer .row>div:last-child {
    padding-left: 40px;
}

.seperator {
    border-top: 1px solid #cdcdcd29;
    width: 80%;
    margin: 20px 0px 20px 0px;
}

.sos-kak .fa-facebook,
.sos-kak .fa-instagram:not(.tmb-sosmed),
.sos-kak .fa-twitter,
.sos-kak .fa-youtube-play,
.sos-kak .fa-linkedin-square {
    background: #000000;
    color: white !important;
    border: 1px solid white !important;
    padding: 13px;
    font-size: 12px !important;
    width: 40px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
}

.carousel-inner {
    height: 500px;
}

.carousel-caption {
    position: sticky;
    text-align: left;
    margin-left: 20px;
}

.carousel-caption>h5 {
    font-size: 36px;
}

.carousel-item>img {
    filter: brightness(80%);
}

.box4 .col-6>.row>.col-12 h3 {
    font-size: 22px;
}

.box4 .col-6>.row>.col-6 h3 {
    font-size: 16px;
}

.box5 h3,
.box6 h3,
.box4 h3 {
    font-size: 16px;
    line-height: 1.2;
    /* font-family: "Roboto"; */
}

.Tentative {
    background-color: black;
}

.Running {
    background-color: green;
}

.company-profile>.container>h3 {
    color: #5b5b5b;
    font-weight: 900;
    text-align: center;
    padding-bottom: 40px;
}

.company-profile iframe {
    float: right;
}

.company-profile>.container>.row>div:first-child>p {
    line-height: 30px;
}

.company-profile {
    background-color: rgba(225, 238, 242, 0.62);
    margin-top: 50px;
    margin-bottom: 50px;
    padding-bottom: 50px;
    padding-top: 50px;
}

.sosmed {
    text-align: center;
    padding: 20px 0px 20px 0px;
}

.sosmed>a {
    text-decoration: none;
}

.sosmed img {
    width: 26%;
}

.brosur>.row>div {
    height: 380px;
    /* height: fit-content; */
    overflow: hidden;
}

.brosur {
    /* height: 380px; */
    height: fit-content;
    overflow: hidden;
}

.brosur>.row>div>img {
    display: block;
    width: auto;
    height: 100%;
    /* filter: brightness(50%); */
    margin-left: calc(-100% / 3);
}

.brosur-img {
    height: 100%;
    width: auto;
    /* filter: brightness(50%); */
    background: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}

.brosur-img.img-load {
    opacity: 0.2;
}

.brosur-img.img-load+.LoadMuter div {
    border-color: rgb(90, 95, 141) transparent transparent transparent !important;
}

.brosur-img::after {
    content: "";
    border: 2px solid #fff;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 10px;
}

.HapusBrosur {
    margin: auto;
    position: absolute;
    inset: 0;
    background: rgba(68, 28, 28, 0.411);
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.HapusBrosur a {
    margin: auto;
    position: absolute;
    inset: 0;
    width: 100px;
    height: 30px;
}

.yutub img {
    width: 80px;
    height: 55px;
    padding: 8px;
}

.yutub>div:last-child {
    background-color: rgb(31, 31, 31);
}

.yutub>div:last-child>div {
    text-decoration: none;
    font-size: 12px;
    color: white;
}

.yutub>div:last-child>div>.row:hover {
    cursor: pointer;
    background-color: rgb(56, 56, 56) !important;
}

.yutub h6 {
    color: white;
    padding: 10px;
    margin: 0px;
    background-color: rgb(31, 31, 31);
}

.yutub>div::-webkit-scrollbar {
    width: 8px;
}

/* Track */
.yutub>div::-webkit-scrollbar-track {
    background-color: rgb(67, 67, 67);
    /* border-radius: 10px; */
}

/* Handle */
.yutub>div::-webkit-scrollbar-thumb {
    background: gray;
    border-radius: 10px;
}

/* Handle on hover */
.yutub>div::-webkit-scrollbar-thumb:hover {
    background: #b30000;
}

.kategori-box {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: rgba(225, 238, 242, 0.62);
    margin-top: 50px;
    margin-bottom: 50px;
}

.kategori-box>.container>ul {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    /* padding-bottom: 20px; */
}

.kategori-box>.container>ul>h4 {
    font-weight: 700;
    margin-block: auto;
    padding-right: 10px;
    width: fit-content;
}

.kategori-box>.container>ul>li:nth-child(2)>div {
    color: #31d6aa;
}

.kategori-box>.container>ul>li {
    padding: 0px 12px 0px 12px;
    margin-block: auto;
    color: rgb(141, 141, 141);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    width: fit-content;
}

.kategori-box>.container>ul>li>div {
    font-weight: 700;
    font-size: 11px;
    text-decoration: none;
    color: rgb(141, 141, 141);
    text-transform: uppercase;
    cursor: pointer;
}

.kategori-box>.container>ul>li>ul {
    width: 25rem;
    margin-top: 15px;
    right: 0;
    height: 400px;
    overflow-y: scroll;
}

.kategori-box>.container>ul>li>ul>li>div {
    text-decoration: none;
    color: rgb(141, 141, 141);
    font-size: 12px;
    cursor: pointer;
    width: max-content;
}

.box7 .card {
    background-color: unset;
}

.breadcrumb {
    padding-top: 21px;
}

#JadwalBanner .JadwalBanner {
    min-height: 180px;
}

@keyframes ldio-9lrg6kf699 {
    0% {
        background: #8be775;
    }

    12.5% {
        background: #8be775;
    }

    12.625% {
        background: #bcfc9f;
    }

    100% {
        background: #bcfc9f;
    }
}

.ldio-9lrg6kf699 div {
    margin-top: 20px;
    margin-bottom: 20px;
    position: absolute;
    width: 15.52px;
    height: 15.52px;
    background: #bcfc9f;
    animation: ldio-9lrg6kf699 0.4545454545454546s linear infinite;
}

.loadingio-spinner-blocks-2fgw453qn3b {
    width: 194px;
    height: 194px;
    display: inline-block;
    overflow: hidden;
    background: none;
}

.ldio-9lrg6kf699 {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;
    /* see note above */
}

.ldio-9lrg6kf699 div {
    box-sizing: content-box;
}

.search .konten>.container,
.category .konten>.container,
.tag .konten>.container {
    padding-top: 30px;
}

.search .search-date>span,
.category .category-date>span,
.tag .tag-date>span,
.similar-articles .single-date>span {
    padding: 2px 8px 2px 8px;
    color: white;
    background-color: #31d6aa;
}

.similar-articles .single-date {
    padding-top: 10px;
    padding-bottom: 10px;
}

.bg-abu {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: rgba(225, 238, 242, 0.62);
}

.formcari-2 input[type="text"] {
    width: 91%;
    border: 1.5px solid #ced4da;
    height: 50px;
    padding-left: 10px;
}

.formcari-2 input[type="submit"] {
    color: white;
    position: absolute;
    background-color: #31d6aa;
    border: 1px solid #31d6aa;
    /* box-shadow: none; */
    margin: 0;
    right: 1;
    font-size: 14px;
    margin-left: 0px !important;
    padding: 3px 10px;
    height: 50px;
    width: 100px;
    text-transform: uppercase;
    font-size: 14px;
    outline: none;
}

.formcari-2>form>div {
    padding-top: 20px;
}

.form-cari-2>.searchform>div>input[type="text"]:focus {
    border-color: #f1f1f1;
    box-shadow: unset;
    outline: none;
}

.breadcrumb-image {
    position: absolute;
    left: 0;
    top: 20px;
    padding: 10px 12px;
    background-color: rgb(0 0 0 / 61%);
    /* width: 85%; */
    color: lightgray;
}

.breadcrumb-image a {
    text-decoration: none;
    color: lightgray;
}

#JadwalBanner>a {
    text-decoration: none;
}

.error404 footer {
    margin-top: 0px;
}

.tombol-kembali {
    background-color: #31d6aa;
    border: none;
    color: white;
    font-weight: 700;
    padding: 14px 28px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    border-radius: 50px;
}

.error404 .container>.row>div>* {
    margin-top: 15px;
    margin-bottom: 15px;
}

.error404 .container>.row>div {
    align-self: center;
}

.home .box4,
.home .box5,
.home .link-social,
.home .playlist-yutub {
    margin-top: 50px;
}

.home [class^="box"] {
    padding-bottom: 20px;
}

.box7 .card-group>* {
    width: 20%;
}

.company-profile iframe {
    width: 100%;
    height: 444px;
}

.playlist-yutub>.yutub>div:nth-child(2)>iframe,
.playlist-yutub>.yutub>div:last-child {
    height: 450px;
}

.yt-menu {
    position: absolute;
    color: white;
    right: 0;
    top: 0;
    padding: 10px;
}

.breadcrumb-image>a {
    display: none;
}

.breadcrumb-image>a:first-child,
.breadcrumb-image>a:last-child {
    display: contents;
}

/* .FixTraining .td-image-wrap :before {
    content: "";
    background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0));
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0));
} */

.td-big-grid-flex .td-image-wrap:before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
    z-index: 1;
}

.navigation {
    margin-top: 50px;
    text-align: center;
    border-top: 3px solid #eee;
    padding-top: 20px;
    position: relative;
}

.navigation::after {
    content: "";
    margin: auto;
    position: absolute;
    height: 3px;
    width: 20%;
    background-color: #ec3136;
    top: -3px;
    left: 0;
    right: 0;
}

.navigation>p>a {
    background-color: #ec3136;
    color: white;
    text-decoration: none;
    padding: 6px 15px;
    margin: 5px;
}

/*========== LOADING ============= */
.LoadMuter {
    margin: auto;
    display: inline-block;
    position: absolute;
    inset: 0;
    width: 80px;
    height: 80px;
}

.LoadMuter div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: LoadMuter 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}

.LoadMuter div:nth-child(1) {
    animation-delay: -0.45s;
}

.LoadMuter div:nth-child(2) {
    animation-delay: -0.3s;
}

.LoadMuter div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes LoadMuter {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*====================*/
@media (max-width: 767px) {
    .archive-header>h2 {
        font-size: 14px !important;
    }

    .archive-header>h2>span {
        font-size: 18px !important;
    }
}


@media (max-width: 1199px) {
    li.dropdown:hover>.dropdown-menu {
        left: 50%;
        width: 11rem;
    }

    .company-profile iframe {
        height: 390px;
    }
}

@media (max-width: 991px) {
    .bi-search {
        margin-right: 20px;
    }

    .box7 .card-group>* {
        width: 25%;
    }

    .box5 h3,
    .box6 h3,
    .box4 h3 {
        font-size: 16px;
        line-height: 1.2;
    }

    .playlist-yutub>.yutub>div:nth-child(2)>iframe,
    .playlist-yutub>.yutub>div:last-child {
        height: 300px;
    }

    .playlist-yutub>.yutub>div:last-child>div>div>div:last-child>p {
        margin-left: 20px;
    }
}

@media (max-width: 767px) {
    .formcari-2 input[type="submit"] {
        right: 10%;
    }

    .box7 .card-group>* {
        width: 50%;
    }

    .company-profile iframe {
        height: 300px;
    }

    .yutub {
        position: relative;
    }

    .playlist-yutub>.yutub>div:last-child {
        position: absolute;
        height: 338px;
        right: 0;
        background-color: #000000bd;
        display: none;
    }

    .carousel-inner {
        height: 400px;
    }
}

@media (max-width: 600px) {
    .carousel-inner {
        height: 350px;
    }
}

@media (max-width: 483px) {
    li.dropdown:hover>.dropdown-menu {
        left: -200%;
    }

    .carousel-inner {
        height: 200px;
    }

    .carousel-inner>.carousel-item>.carousel-caption>h5 {
        font-size: 20px;
    }

    .box5 h3,
    .box6 h3,
    .box4 h3 {
        font-size: 14px;
    }
}

@media (max-width: 395px) {
    li.dropdown:hover>.dropdown-menu {
        left: 0;
    }

    .company-profile iframe {
        height: 200px;
    }

    .playlist-yutub>.yutub>div:nth-child(2)>iframe {
        height: 250px;
    }

    .playlist-yutub>.yutub>div:last-child {
        height: 288px;
    }
}

@media (max-width: 367px) {
    li.dropdown:hover>.dropdown-menu {
        left: -50%;
    }

    .carousel-inner>.carousel-item>.carousel-caption>h5 {
        font-size: 18px;
    }

    .carousel-inner>.carousel-item>.carousel-caption>p {
        font-size: 14px;
    }
}


a {
    text-decoration: none;
    color: inherit;
}

.tmb-3d-bnd {
    display: inline-block;
    box-sizing: border-box;
    height: 40px;
    border-radius: 20px;
    position: relative;
    text-align: center;
    background-color: red;
    border: 3px solid white;
    color: white;
    box-shadow: 0px 5px 10px 1px rgba(10, 10, 10, .2);
    cursor: pointer;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.tmb-3d-bnd:before {
    content: "";
    display: block;
    box-sizing: border-box;
    width: calc(100% - 20px);
    height: 60%;
    border-radius: 20px;
    position: absolute;
    left: 10px;
    top: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, .2) 100%);
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}

header {
    box-sizing: border-box;
    width: 100%;
    height: 100px;
    position: sticky;
    top: 0;
    z-index: 9999;
    transition: .3s;
    box-shadow: 0px 6px 10px -6px rgba(10, 10, 10, .2);
}

.wdh {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: white;
}

.kir,
.tgh,
.kan {
    display: block;
    float: left;
    box-sizing: border-box;
    height: 100px;
    transition: .3s;
}

.kir {
    width: 445px;
    overflow: hidden;
}

.tgh {
    width: calc(100% - 445px - 140px);
    padding-top: 37.5px;
}

.kan {
    width: 140px;
    text-align: right;
    padding: 30px 10px;
    overflow: hidden;
}

.kir .wdh-lgo {
    position: relative;
    display: table-cell;
    box-sizing: border-box;
    width: 170px;
    height: 100px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.kir .wdh-per {
    display: table-cell;
    height: 100px;
    width: 275px;
    padding: 0 10px;
    vertical-align: middle;
    font-size: 10.5px;
    font-style: italic;
    font-weight: bold;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.kir .wdh-lgo .bg-lgo {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    height: 100px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.kir .wdh-lgo .lgo {
    position: absolute;
    top: 0;
    left: 35px;
    box-sizing: border-box;
    width: 155px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.kir .wdh-per div {
    font-size: 16px;
    line-height: 10px;
    font-style: normal;
}

.tgh::before {
    content: "MEDIA EDUTAMA";
    font-family: 'Heebo', sans-serif;
    display: block;
    height: 43px;
    line-height: 40px;
    overflow: hidden;
    box-sizing: border-box;
    width: calc(100% - 445px);
    position: absolute;
    left: 445px;
    bottom: 0;
    font-size: 120px;
    letter-spacing: 5px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    background: -webkit-linear-gradient(transparent, rgb(235, 235, 235));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

.tmb-car {
    width: 120px;
    font-weight: bold;
}

.searchform {
    display: block;
    box-sizing: border-box;
    width: max-content;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 1;
    box-shadow: 0 0 10px 1px rgba(10, 10, 10, .2);
    transition: .3s;
}

.searchform input {
    box-sizing: border-box;
    height: 30px;
    line-height: 28px;
    outline: none;
    padding: 0 5px;
    border: 1px solid rgb(100, 100, 100);
}

.searchform input[type="submit"] {
    box-sizing: border-box;
    height: 30px;
    line-height: 28px;
    border: none;
    background-color: rgb(100, 100, 100);
    color: white;
    padding: 0 20px;
}

.searchform.akt {
    top: 110px;
}

.mob {
    display: none;
}

.tmb-sosmed {
    padding: 0 20px;
    font-weight: bold;
    line-height: 30px;
}

.tmb-sosmed i {
    font-size: 20px;
    margin-right: 5px;
    vertical-align: middle;
}

.tmb-sosmed:hover {
    color: white;
}

@media only screen and (min-width: 768px) {
    .menu {
        display: block;
        box-sizing: border-box;
        width: max-content;
        padding: 0;
        margin: auto;
    }

    .menu li {
        list-style: none;
    }

    .menu>li {
        display: inline-block;
        margin: 0 10px;
        position: relative;
    }

    .menu li a {
        display: block;
        box-sizing: border-box;
        height: 25px;
        line-height: 25px;
        padding: 0 15px;
        font-weight: bold;
        background-color: white;
        box-shadow: 0px 10px 10px -6px rgba(10, 10, 10, .2);
    }

    .menu li:hover>a {
        color: red;
    }

    .menu li:hover ul {
        display: block;
    }

    .menu ul {
        display: none;
        position: absolute;
        padding: 0;
        padding-top: 15px;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
    }

    .menu ul li {
        border-left: 1px solid rgb(150, 150, 150);
        border-right: 1px solid rgb(150, 150, 150);
    }

    .menu ul li:first-child {
        border-top: 1px solid rgb(150, 150, 150);
    }

    .menu ul li:last-child {
        border-bottom: 1px solid rgb(150, 150, 150);
    }

    .menu ul a {
        width: 200px;
        box-shadow: none;
        height: 40px;
        line-height: 40px;
    }

    header.kcl,
    .kcl .kir,
    .kcl .tgh,
    .kcl .kan {
        height: 70px;
    }

    .kcl .tgh::before {
        height: 38px;
    }

    .kcl .tgh {
        padding-top: 22.5px;
    }

    .kcl .kan {
        padding: 15px 10px;
    }

    .kcl .kir .wdh-lgo {
        height: 70px;
    }

    .kcl .kir .wdh-per {
        height: 70px;
    }

    .kcl .kir .wdh-lgo .bg-lgo {
        top: -15px;
    }

    .kcl .kir .wdh-lgo .lgo {
        top: -7px;
        left: 45px;
        width: 145px;
    }

    .kcl .menu ul {
        padding-top: 7.5px;
    }

    .kcl .searchform.akt {
        top: 80px;
    }
}

@media only screen and (min-width: 827px) and (max-width: 1185px) {
    .kir {
        width: 135px;
    }

    .kir .wdh-lgo {
        left: -45px;
    }

    .kir .wdh-per {
        display: none;
    }

    .tgh {
        width: calc(100% - 135px - 140px);
    }

    .tgh::before {
        width: calc(100% - 135px);
        left: 135px;
    }

    .menu>li {
        margin: 0 5px;
    }

    .tmb-sosmed {
        margin: 10px 5px;
    }
}


@media only screen and (max-width: 827px) {
    .tmb-3d-bnd {
        height: 6vw;
        border-radius: 4vw;
        border-width: .2vw;
        font-size: 3vw;
        box-shadow: 0px .5vw 1vw .1vw rgba(10, 10, 10, .2);
        -webkit-border-radius: 4vw;
        -moz-border-radius: 4vw;
        -ms-border-radius: 4vw;
        -o-border-radius: 4vw;
    }

    .tmb-3d-bnd:before {
        width: calc(100% - 4vw);
        border-radius: 4vw;
        left: 2vw;
        -ms-border-radius: 4vw;
        -o-border-radius: 4vw;
        -webkit-border-radius: 4vw;
        -moz-border-radius: 4vw;
    }

    header {
        height: 14vw;
        box-shadow: 0px .6vw 1vw -.6vw rgba(10, 10, 10, .2);
    }

    .kir .wdh-lgo .bg-lgo,
    .kir .wdh-per {
        display: none;
    }

    .kir,
    .kan {
        display: block;
        height: 14vw;
        position: absolute;
    }

    .kir {
        width: 30vw;
    }

    .tgh {
        position: absolute;
        width: 100vw;
        top: 14vw;
        left: -60vw;
        width: 60vw;
        height: calc(100vh - 14vw);
        background-color: rgba(250, 0, 0, .9);
        padding: 0;
        z-index: 2;
        overflow: hidden;
    }

    .tgh::before {
        height: calc(100vh - 14vw);
        line-height: 24vw;
        width: 24vw;
        position: absolute;
        z-index: 1;
        right: unset;
        bottom: unset;
        top: 0;
        left: 38vw;
        writing-mode: vertical-lr;
        font-size: 24vw;
        transform: rotate(180deg);
        letter-spacing: 0;
        background: #121FCF;
        background: linear-gradient(to right, rgba(250, 250, 250, .7) 9%, transparent 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: vertical-lr;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
    }

    .tgh::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        top: -60vw;
        left: 0;
        border-radius: 100%;
        box-sizing: border-box;
        z-index: 1;
        width: 120vw;
        height: 120vw;
        background-image: linear-gradient(to top, rgba(250, 250, 250, .2) 0, transparent 50%);
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        -ms-border-radius: 100%;
        -o-border-radius: 100%;
    }

    .menu-middle-container::before {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        border-radius: 100%;
        box-sizing: border-box;
        z-index: 1;
        width: 120vw;
        height: 120vw;
        background-image: linear-gradient(to top, rgba(250, 250, 250, .2) 0, transparent 50%);
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        -ms-border-radius: 100%;
        -o-border-radius: 100%;
    }

    .menu-middle-container::after {
        content: "";
        display: block;
        position: absolute;
        top: 90vw;
        left: 0;
        z-index: 1;
        border-radius: 100%;
        box-sizing: border-box;
        z-index: 1;
        width: 120vw;
        height: 120vw;
        background-image: linear-gradient(to bottom, rgba(250, 250, 250, .2) 0, transparent 50%);
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        -ms-border-radius: 100%;
        -o-border-radius: 100%;
    }

    .tgh.akt {
        left: 0;
    }

    .menu-middle-container {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        z-index: 2;
    }

    .menu {
        padding: 0;
        margin: 0;
        position: relative;
        z-index: 2;
    }

    .menu li {
        box-sizing: border-box;
        list-style: none;
        margin: 10vw 5vw;
        line-height: 5vw;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
    }

    .menu li a {
        color: white;
        display: inline;
    }

    .menu ul {
        padding: 0;
        margin: 0;
    }

    .menu ul li {
        height: 0;
        overflow: hidden;
        margin: 0;
    }

    li.akt>a {
        color: rgb(150, 150, 150);
    }

    li.akt>ul li {
        margin: 10vw 5vw;
        height: 5vw;
        line-height: 5vw;
    }

    .kan {
        right: 0;
        padding: 4vw 2vw;
        width: max-content;
    }

    .kir .wdh-lgo {
        width: 22vw;
        height: 14vw;
    }

    .kir .wdh-lgo .lgo {
        left: 0;
        width: 22vw;
    }

    .tmb-car {
        width: 20vw;
        margin-right: 2vw;
        vertical-align: top;
    }

    .kan .tmb-mnu {
        display: inline-block;
        box-sizing: border-box;
        height: 6vw;
        line-height: 6vw;
        padding: 0 2vw;
        vertical-align: top;
    }

    .searchform {
        padding: 2vw;
        border-radius: 1vw;
        right: 2vw;
        box-shadow: 0 0 2vw .2vw rgba(10, 10, 10, .2);
        -webkit-border-radius: 1vw;
        -moz-border-radius: 1vw;
        -ms-border-radius: 1vw;
        -o-border-radius: 1vw;
    }

    .searchform input {
        height: 7vw;
        line-height: 6.6vw;
        padding: 0 2vw;
        border-width: .2vw;
    }

    .searchform input[type="submit"] {
        height: 7vw;
        line-height: 7vw;
        padding: 0 3vw;
    }

    .searchform.akt {
        top: 16vw;
    }

    .mob {
        display: block;
    }

    .tmb-sosmed {
        padding: 0 4vw;
        line-height: 5vw;
        margin: 1vw;
    }

    .tmb-sosmed i {
        font-size: 4vw;
        margin-right: 1vw;
    }

    .jdl span,
    .jdl a {
        height: 6.5vw;
        line-height: 6.5vw;
        font-size: 3vw;
        padding: 0 3vw;
    }

    .jdl::before {
        top: .5vw;
        left: .5vw;
        width: calc(100% - 1vw);
        height: 55%;
    }

    .jdl::after {
        top: -4vw;
        left: -3vw;
        width: 10vw;
        height: 10vw;
    }

    .wdh-jdl {
        margin-top: 2vw;
        margin-bottom: 2vw;
        border-width: .2vw;
    }
}

.modal-backdrop.show {
    z-index: 9999;
}

.modal {
    z-index: 99999;
}