@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
    position: relative;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif!important;
}

@media screen and (max-width:320px) {
    body {
        width: 137%!important;
    }
}

#nav .navbar {
    background: #143e6c;
    box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.35);
}


/* a.navbar-brand {
    display: none
} */

#nav .navbar-brand img {
    /* margin-left: 50px; */
    width: 100%;
    max-width: 130px!important;
    height: auto;
}

#nav .nav a {
    color: #000;
}

#nav .nav-lms {
    width: 100%;
}

#nav .nav-lms li {
    padding-left: 15px;
}

#nav .nav-lms li a {
    color: #fff;
    font-weight: 700;
    font-size: 12px;
}

#nav .nav-lms-right {
    display: flex;
    justify-content: center;
    align-content: center;
    list-style: none;
}

#nav .nav-lms-right li {
    padding-left: 5px;
}


/* .nav-lms-right li:last-child {
    padding-left: 5px;
} */

#nav .nav-lms-right li img {
    padding-left: 5px;
    margin-top: -5px;
    margin-left: -15px;
}

#nav .jms-2023 {
    background-color: #072647;
    border: 1px solid #072647;
    color: #F48220!important;
    padding: 18px 25px;
    font-size: 14px!important;
    position: relative;
    top: 6px;
    font-weight: 600;
}

#nav .button-register {
    background-color: #F9441B;
    border: 1px solid #F9441B;
    color: #fff;
    padding: 5px 25px 5px 25px;
    border-radius: 10px;
    width: 150px;
    text-align: center;
    font-size: 16px!important;
    margin-top: 5px;
    /* margin-left: 15px; */
}

#nav .navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 100%)!important
}

#nav .navbar-expand-xl .navbar-nav .dropdown-menu {
    background: #143e6c;
}

#nav .dropdown-item-lms:focus,
#nav .dropdown-item-lms:hover {
    color: #fff;
    background-color: none
}

#nav .mobile {
    display: none;
}

@media screen and (min-width:376px) and (max-width:1279px) {
    #nav .navbar-brand img {
        padding-left: 10px;
    }
    #nav .nav-lms li {
        padding-left: 10px;
    }
    /* #nav .nav-lms li a {
        font-size: 14px;
    } */
    /* #nav .nav-lms-right {
        margin-left: -60px;
    } */
    #nav .mobile {
        display: block;
    }
    #nav .desktop {
        display: none;
    }
    /* .nav-lms-right li:last-child {
        padding-left: 5px;
    } */
    #nav .jms-2023 {
        top: 4px;
    }
}

@media screen and (max-width:375px) {
    #nav .jms-2023 {
        padding: 5px;
        top: 4px;
        font-size: 12px!important;
    }
}

#home {
    /* height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    padding: 100px 0;
    background-position: center;
    background-size: cover; */
}

#home #background-video {
    height: 680px;
    width: 100%;
    object-fit: cover;
    display: block;
    
}
#page-headline{
    width: 100%;
    height: 500px;
    padding: 0;
    margin-bottom: 10px;
}
#home .overlay {
    background: rgba(0, 3, 23, .9);
    /* mix-blend-mode: multiply; */
    opacity: .8;
    position: absolute;
    
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15% 32px;
    line-height: 1.5;
    text-align: center;
    z-index: 9;
}

#home .overlay h1 {
    margin-top: 130px;
    color: #fff;
    letter-spacing: 10px;
    font-size: 16px;
    line-height: 50px;
}

#home .overlay p {
    color: #fff;
    font-size: 36px;
    letter-spacing: 5px;
    font-weight: 900;
    line-height: 50px;
}

#home .daftar {
    background-color: #EB5B27;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 15px;
    border-radius: 50px;
    text-align: center;
    color: #fff;
    font-weight: 600;
}

#home .dropdown-item {
    display: block;
    width: 100%;
    max-width: 350px;
    padding: 0.25rem 7.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    position: relative;
    left: -35px;
}


/* #home #myBtn {
width: 60px;
font-size: 12px;
padding: 10px;
border: none;
background: rgba(0, 0, 0, 0.4);
color: #fff;
cursor: pointer;
border-radius: 10px;
}

#home #myBtn:hover {
background: #ddd;
color: black;
} */

#home .button {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    bottom: -350px;
    left: -420px
}

#home .background {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2.2px rgba(0, 0, 0, 0.051), 0 2.3px 5.3px rgba(0, 0, 0, 0.059), 0 4.4px 10px rgba(0, 0, 0, 0.06), 0 7.8px 17.9px rgba(0, 0, 0, 0.059), 0 14.6px 33.4px rgba(0, 0, 0, 0.059), 0 35px 80px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    height: 50px;
    position: absolute;
    width: 50px;
    opacity: .3;
}

#home .button:active .background {
    background: #e93c15;
}

#home .active .icon {
    transform: rotate(-120deg);
}

#home .part {
    background: white;
    height: 100px;
    position: absolute;
    width: 100px;
}

#home .active .left {
    clip-path: polygon( 43.77666% 55.85251%, 43.77874% 55.46331%, 43.7795% 55.09177%, 43.77934% 54.74844%, 43.77855% 54.44389%, 43.77741% 54.18863%, 43.77625% 53.99325%, 43.77533% 53.86828%, 43.77495% 53.82429%, 43.77518% 53.55329%, 43.7754% 53.2823%, 43.77563% 53.01131%, 43.77585% 52.74031%, 43.77608% 52.46932%, 43.7763% 52.19832%, 43.77653% 51.92733%, 43.77675% 51.65633%, 43.77653% 51.38533%, 43.7763% 51.11434%, 43.77608% 50.84334%, 43.77585% 50.57235%, 43.77563% 50.30136%, 43.7754% 50.03036%, 43.77518% 49.75936%, 43.77495% 49.48837%, 44.48391% 49.4885%, 45.19287% 49.48865%, 45.90183% 49.48878%, 46.61079% 49.48892%, 47.31975% 49.48906%, 48.0287% 49.4892%, 48.73766% 49.48934%, 49.44662% 49.48948%, 50.72252% 49.48934%, 51.99842% 49.4892%, 53.27432% 49.48906%, 54.55022% 49.48892%, 55.82611% 49.48878%, 57.10201% 49.48865%, 58.3779% 49.4885%, 59.6538% 49.48837%, 59.57598% 49.89151%, 59.31883% 50.28598%, 58.84686% 50.70884%, 58.12456% 51.19714%, 57.11643% 51.78793%, 55.78697% 52.51828%, 54.10066% 53.42522%, 52.02202% 54.54581%, 49.96525% 55.66916%, 48.3319% 56.57212%, 47.06745% 57.27347%, 46.11739% 57.79191%, 45.42719% 58.14619%, 44.94235% 58.35507%, 44.60834% 58.43725%, 44.37066% 58.41149%, 44.15383% 58.27711%, 43.99617% 58.0603%, 43.88847% 57.77578%, 43.82151% 57.43825%, 43.78608% 57.06245%, 43.77304% 56.66309%, 43.773% 56.25486%);
    transition: clip-path 500ms;
}

#home .active .right {
    clip-path: polygon( 43.77666% 43.83035%, 43.77874% 44.21955%, 43.7795% 44.59109%, 43.77934% 44.93442%, 43.77855% 45.23898%, 43.77741% 45.49423%, 43.77625% 45.68961%, 43.77533% 45.81458%, 43.77495% 45.85858%, 43.77518% 46.12957%, 43.7754% 46.40056%, 43.77563% 46.67156%, 43.77585% 46.94255%, 43.77608% 47.21355%, 43.7763% 47.48454%, 43.77653% 47.75554%, 43.77675% 48.02654%, 43.77653% 48.29753%, 43.7763% 48.56852%, 43.77608% 48.83952%, 43.77585% 49.11051%, 43.77563% 49.38151%, 43.7754% 49.65251%, 43.77518% 49.9235%, 43.77495% 50.1945%, 44.48391% 50.19436%, 45.19287% 50.19422%, 45.90183% 50.19408%, 46.61079% 50.19394%, 47.31975% 50.1938%, 48.0287% 50.19366%, 48.73766% 50.19353%, 49.44662% 50.19338%, 50.72252% 50.19353%, 51.99842% 50.19366%, 53.27432% 50.1938%, 54.55022% 50.19394%, 55.82611% 50.19408%, 57.10201% 50.19422%, 58.3779% 50.19436%, 59.6538% 50.1945%, 59.57598% 49.79136%, 59.31883% 49.39688%, 58.84686% 48.97402%, 58.12456% 48.48572%, 57.11643% 47.89493%, 55.78697% 47.16458%, 54.10066% 46.25764%, 52.02202% 45.13705%, 49.96525% 44.01371%, 48.3319% 43.11074%, 47.06745% 42.4094%, 46.11739% 41.89096%, 45.42719% 41.53667%, 44.94235% 41.3278%, 44.60834% 41.24561%, 44.37066% 41.27137%, 44.15383% 41.40575%, 43.99617% 41.62256%, 43.88847% 41.90709%, 43.82151% 42.24461%, 43.78608% 42.62041%, 43.77304% 43.01978%, 43.773% 43.428%);
    transition: clip-path 500ms;
}

#home .pointer {
    border-radius: 50%;
    cursor: pointer;
    height: 100px;
    position: absolute;
    -webkit-tap-highlight-color: transparent;
    width: 100px;
}

#home .icon {
    transform: rotate(-90deg);
    transition: transform 500ms;
    width: 100px;
    height: 100px;
}

#home .left {
    clip-path: polygon( 56.42249% 57.01763%, 54.93283% 57.0175%, 53.00511% 57.01738%, 50.83554% 57.01727%, 48.62036% 57.01718%, 46.55585% 57.01709%, 44.83822% 57.01702%, 43.66373% 57.01698%, 43.22863% 57.01696%, 42.86372% 57.01904%, 42.56988% 57.01621%, 42.3402% 56.99486%, 42.16778% 56.94152%, 42.0457% 56.84267%, 41.96705% 56.68478%, 41.92493% 56.45432%, 41.91246% 56.13777%, 41.91258% 55.76282%, 41.9129% 55.37058%, 41.91335% 54.96757%, 41.91387% 54.56032%, 41.91439% 54.15537%, 41.91485% 53.75926%, 41.91517% 53.3785%, 41.91529% 53.01965%, 41.94275% 52.72355%, 42.02117% 52.51653%, 42.14465% 52.38328%, 42.30727% 52.30854%, 42.50308% 52.27699%, 42.72619% 52.27341%, 42.97065% 52.28248%, 43.23056% 52.2889%, 43.94949% 52.28896%, 45.45083% 52.28912%, 47.47445% 52.28932%, 49.76027% 52.28957%, 52.04818% 52.28981%, 54.07805% 52.29003%, 55.5898% 52.29019%, 56.32332% 52.29024%, 56.58221% 52.28816%, 56.83726% 52.28948%, 57.07897% 52.30593%, 57.29794% 52.34898%, 57.48468% 52.43029%, 57.62978% 52.56146%, 57.72375% 52.7541%, 57.75718% 53.01981%, 57.75713% 53.37763%, 57.75699% 53.81831%, 57.75679% 54.31106%, 57.75657% 54.82507%, 57.75635% 55.32958%, 57.75615% 55.79377%, 57.75601% 56.18684%, 57.75596% 56.47801%, 57.7549% 56.50122%, 57.74034% 56.5624%, 57.6955% 56.64887%, 57.60334% 56.748%, 57.44691% 56.84712%, 57.20925% 56.93358%, 56.87342% 56.99471%);
}

#home .right {
    clip-path: polygon( 56.42249% 42.44625%, 54.93283% 42.44637%, 53.00511% 42.44649%, 50.83554% 42.4466%, 48.62036% 42.4467%, 46.55585% 42.44679%, 44.83822% 42.44685%, 43.66373% 42.4469%, 43.22863% 42.44691%, 42.86372% 42.44483%, 42.56988% 42.44767%, 42.3402% 42.46902%, 42.16778% 42.52235%, 42.0457% 42.6212%, 41.96705% 42.77909%, 41.92493% 43.00956%, 41.91246% 43.32611%, 41.91258% 43.70105%, 41.9129% 44.0933%, 41.91335% 44.49631%, 41.91387% 44.90355%, 41.91439% 45.3085%, 41.91485% 45.70462%, 41.91517% 46.08537%, 41.91529% 46.44422%, 41.94275% 46.74032%, 42.02117% 46.94735%, 42.14465% 47.0806%, 42.30727% 47.15534%, 42.50308% 47.18688%, 42.72619% 47.19047%, 42.97065% 47.1814%, 43.23056% 47.17497%, 43.94949% 47.17491%, 45.45083% 47.17476%, 47.47445% 47.17455%, 49.76027% 47.1743%, 52.04818% 47.17406%, 54.07805% 47.17384%, 55.5898% 47.17369%, 56.32332% 47.17363%, 56.58221% 47.17571%, 56.83726% 47.17439%, 57.07897% 47.15795%, 57.29794% 47.1149%, 57.48468% 47.03359%, 57.62978% 46.90242%, 57.72375% 46.70977%, 57.75718% 46.44406%, 57.75713% 46.08625%, 57.75699% 45.64557%, 57.75679% 45.15282%, 57.75657% 44.6388%, 57.75635% 44.1343%, 57.75615% 43.6701%, 57.75601% 43.27703%, 57.75596% 42.98586%, 57.7549% 42.96265%, 57.74034% 42.90148%, 57.6955% 42.815%, 57.60334% 42.71587%, 57.44691% 42.61675%, 57.20925% 42.53029%, 56.87342% 42.46916%);
}

#home .splide.head {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    z-index: 9;
}


/* #home .splide__track {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
} */

#home .splide__arrow--next {
    display: none;
}

#home .splide__arrow--prev {
    display: none;
}

#home .splide__pagination {
    bottom: -154px;
    left: 0;
    padding: 0 1em;
    position: absolute;
    right: 0;
    z-index: 1
}

#home h1 {
    font-size: 32px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    width: 100%;
    max-width: 800px;
    margin: 30px auto 0 auto;
}

#home h2 {
    font-size: 18px;
    text-align: center;
    color: #F89822;
    font-weight: 400;
    margin: 30px 0;
    line-height: 1.3;
}

#home h3 {
    font-size: 14px;
    text-align: center;
    color: #fff;
    margin-top: 45px;
}

#home .media {
    display: flex;
    justify-content: center;
}

#home img.hg {
    width: 100%;
    height: auto;
    max-width: 300px;
    margin: 6px auto
}

#home .img-initiators {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    border: 1px solid #fff;
    border-radius: 25px;
    padding: 10px;
}

#home img.suara {
    width: 100%;
    height: 19px;
    max-width: 177px;
    margin: 0 auto;
    display: block;
}

#home img.ims {
    width: 100%;
    height: auto;
    max-width: 89px;
    margin: 0 auto;
    display: block;
}

@media screen and (max-width:1280px) {
    #home h1 {
        font-size: 32px;
        margin: 0 auto;
    }
    #home h2 {
        font-size: 18px
    }
    
    #home h3 {
        margin-top: 25px;
    }
}

.head-absolute{
    margin: auto;
    position: absolute;
    top:7%;
    right: 0;
    left: 0;
    text-align: center;
    z-index: 99;
}

/* @media only screen and (min-width: 390px) and (max-width: 1200px) {
    #home .overlay h1 {
        margin-top: 250px;
    }
    #home .button {
        align-items: center;
        display: flex;
        justify-content: center;
        position: relative;
        bottom: 20px;
        left: 0
    }
} */


/* #home {
    background: url("../images/bg_lm3.jpg");
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    padding-top: 100px;
    padding-bottom: 20px;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

#home img.header-text {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 825px;
    height: auto;
    margin-bottom: 10px;
}

#home img.header-text-mobile {
    display: none;
}

#home .body-count {
    background: rgba(7, 7, 29, 0.75);
    padding: 10px 0 10px 5px;
    width: 100%;
    max-width: 300px;
    margin: 30px auto 0 auto;
    height: auto;
    border-radius: 10px;
}

#home .count {
    text-align: center;
    font-size: 35px;
    margin-bottom: 10px;
    color: #F53B00;
}

#home h1.date {
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: 700;
}

#home h1.sub-date {
    text-align: center;
    font-size: 16px;
    color: #fff;
    font-weight: 400;
}

#home .canvas {
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 900px;
}

#home .days,
#home .hours,
#home .minutes,
#home .seconds {
    display: inline-block;
    padding: 10px 5px 0 0;
    width: 100%;
    max-width: 70px;
    border-radius: 5px;
    font-size: 14px;
}

#home .numbers {
    border: 2px solid #F53B00;
    border-radius: 10px;
    height: 65px;
    margin-bottom: 5px;
    font-size: 45px;
    font-weight: 700;
    padding-top: 1px;
}

@media only screen and (min-width: 0px) and (max-width: 765px) {
    #home img.header-text {
        display: none;
    }
    #home img.header-text-mobile {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 649px;
        height: auto;
        margin-bottom: 10px;
    }
}

@media (max-width:1000px) {
    #home .canvas {
        position: absolute;
        height: 100%;
        width: 100%;
        max-width: 150px;
        margin: 0 auto;
        left: 150px;
        top: 50px
    }
} */


#page-headline img#page-img{
    height: 680px;
    width: 100%;
    object-fit: cover;
    display: block;
}

#about {
    background-color: #fff;
    padding-top: 200px;
    height: auto;
}

#about img {
    position: relative;
    left: 33px;
    border-radius: 10px;
}

#about img.part {
    display: block;
    border-radius: 10px 0 0 10px;
    padding: 30px;
    background-color: #023047;
}

#about h1.header {
    text-align: center;
    color: #023047;
    font-size: 25px;
    font-weight: 700;
}

#about .about h1 {
    margin-top: 20px;
    color: #F9441B;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
}

#about .about h2 {
    margin-top: 20px;
    color: #fff;
    font-size: 16px;
    /* font-weight: 400; */
    line-height: 1.5;
}

#about .read-more {
    font-size: 12px;
}

#about .about {
    background-color: #023047;
    padding: 30px;
    height: 408px;
    border-radius: 0 10px 10px 0;
}

#about .read-more-judul {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
}

#about .read-more-header {
    text-align: center;
    color: #F9441B;
    font-size: 18px;
    font-weight: 700;
}

#about .read-more-isi {
    text-align: left;
    font-size: 18px;
}

#about .read-more-isi-suara {
    text-align: center;
    font-size: 14px;
}

#about .media {
    display: flex;
    justify-content: center;
    align-items: center;
}

#about .media img {
    margin-left: 50px;
    width: 80%;
    height: auto;
}

@media only screen and (min-width: 0) and (max-width: 768px) {
    #about h1.header {
        /* border-top: 5px solid #fff; */
        padding-top: 10px;
    }
    #about img.part {
        width: 100%;
        height: auto;
        border-radius: 10px 10px 0 0;
    }
    #about img {
        left: 0;
    }
    #about .about {
        height: auto;
        border-radius: 0 0 10px 10px;
    }
    #about .about h1 {
        margin-top: -30px;
    }
    #about .media img {
        margin-left: 10px;
        width: 80%;
        height: auto;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1279px) {
    #about h1.header {
        /* border-top: 5px solid #fff; */
        padding-top: 10px;
    }
    #about img.part {
        width: 100%;
        height: auto;
        border-radius: 10px;
    }
    #about img {
        left: 0;
    }
    #about .about {
        height: auto;
        border-radius: 10px;
        padding: 50px;
    }
    #about .about h1 {
        margin-top: -30px;
    }
    #about .media img {
        margin-left: 10px;
        width: 80%;
    }
}

@media only screen and (width:1280px) {
    #about img {
        left: -29px
    }
}

#video {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    padding: 50px 0;
}

#video h1 {
    color: #143e6c;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
}

#video h3 {
    color: #000;
    text-align: center;
    font-size: 16px;
    margin-bottom: 30px;
}

#video iframe {
    width: 100%;
    max-width: 1280px;
    height: 700px;
    margin: 0 auto;
}

@media screen and (max-width:767px) {
    #video iframe {
        width: 100%;
        max-width: 560px;
        height: 315px;
        margin: 0 auto;
    }
}

#foto {
    background: url("../images/bg-foto.png");
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: cover;
    padding: 50px 0;
}

#foto h1 {
    color: #fff;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
}

#foto h3 {
    color: #fff;
    text-align: center;
    font-size: 16px;
    margin-bottom: 30px;
}

#foto img.home {
    /* width: 100%; */
    width: 268px;
    height: 268px;
    margin: 20px 10px;
    border-radius: 18px;
    object-fit: cover;
    border: 4px solid #fff
}

#foto img.popup {
    width: 100%;
    max-width: 1280px;
    height: 450px;
    object-fit: cover;
    margin: 0 auto;
    display: block;
}

#foto .content-foto {
    display: none;
}

#foto #loadMorefoto {
    width: 200px;
    color: #fff;
    display: block;
    text-align: center;
    margin: 20px auto;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    background-color: #143E6C;
    transition: .3s;
    font-size: 12px;
}

#foto #loadMorefoto:hover {
    color: #143E6C;
    background-color: #fff;
    border: 1px solid #143E6C;
    text-decoration: none;
}

#foto .noContentfoto {
    color: #fff !important;
    background-color: transparent !important;
    pointer-events: none;
    text-align: center;
}

@media screen and (max-width:1279px) {
    #foto img.home {
        width: 100%;
        display: block;
        margin: 20px auto;
        height: 150px;
    }
    #foto img.popup {
        max-width: 600px;
        height: 300px;
    }
    #foto .grid {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow: scroll;
    }
}

#network {
    background-color: #FFF;
    padding-top: 10px;
    padding-bottom: 20px;
    height: auto;
}

#network h1.header {
    text-align: center;
    color: #143e6c;
    font-size: 25px;
    font-weight: 700;
}

#network h3 {
    text-align: center;
    color: #000;
    font-size: 16px;
    margin-bottom: 30px;
}

#network .media {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#network .media img {
    margin-left: 15px;
    margin-bottom: 10px;
}

@media (max-width:1200px) {
    #network .media {
        display: flex;
        flex-wrap: wrap;
    }
    #network .media img {
        margin-bottom: 20px;
    }
}

#collaborators {
    background-color: #FFF;
    padding-top: 10px;
    padding-bottom: 20px;
    height: auto;
}

#collaborators h1.header {
    text-align: center;
    color: #143e6c;
    font-size: 25px;
    font-weight: 700;
}

#collaborators h3 {
    text-align: center;
    color: #000;
    font-size: 16px;
}

#collaborators .media {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#collaborators .media img {
    margin-left: 30px;
    /* margin-bottom: 20px; */
    margin-top: 25px;
}

#collaborators .collaborators {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#collaborators .collaborators img {
    margin-left: 20px;
    /* margin-bottom: 10px; */
    margin-top: 25px;
}

@media (max-width:1000px) {
    #collaborators .media {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto 0 auto;
        max-width: 150px;
    }
    #collaborators .media img {
        margin-left: 20px;
        /* width: 150px; */
    }
    #collaborators .collaborators {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    /* #collaborators .collaborators img {
        margin-bottom: 20px;
    } */
    #collaborators {
        height: auto;
    }
}

#agenda {
    background-color: #023047;
    padding-top: 70px;
    padding-bottom: 50px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}


/* #agenda .splide__slide {
    width: calc(50%)!important;
    max-width: 500px;
} */

#agenda h1.header {
    text-align: center;
    color: #fff;
    font-size: 43px;
    font-weight: 700;
}

#agenda h2.header {
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

#agenda .header-workshop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F9441B;
    /* background-color: #e12b04; */
    padding: 15px 10px 10px 10px;
    border-radius: 10px 10px 0 0;
    max-width: 900px;
    margin: 0 auto;
}

#agenda .header-workshop h1 {
    color: #fff;
    font-size: 16px;
    font-weight: 200;
}

#agenda .header-workshop h2 {
    color: #fff;
    font-size: 14px;
    font-weight: 200;
}

#agenda .isi-workshop {
    background-color: #fff;
    font-size: 16px;
    border-radius: 0 0 10px 10px;
    max-width: 900px;
    margin: 0 auto;
}

#agenda .table {
    display: flex;
    justify-content: center;
}

#agenda .distance-top {
    padding-top: 30px;
}


/* #agenda tr:first-child {
    height: 80px;
} */


/* #agenda tr:last-child {
    height: 80px;
} */

#agenda p.head-det-agenda {
    font-weight: 700;
    font-size: 35px;
    color: #023047;
    text-align: center;
}

#agenda p.head-det-agenda-2 {
    font-weight: 700;
    font-size: 25px;
    color: #023047;
    text-align: center;
}

#agenda .judul {
    font-weight: 700;
    font-size: 20px;
    color: #023047;
}

#agenda .isi {
    font-size: 16px;
    color: #000;
}

#agenda .bg-det-agenda {
    background-color: #e6e6e6;
    padding: 20px;
    border-radius: 15px;
}

#agenda .bg-det-agenda-2 {
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
}

#agenda img.bullet {
    position: relative;
    bottom: 8px;
    right: 10px;
}

#agenda b.bold {
    font-weight: 700;
}

#agenda .splide__pagination {
    bottom: -2.5em;
    left: 0;
    padding: 0 1em;
    position: absolute;
    right: 0;
    z-index: 1
}

#agenda .td {
    padding-bottom: 30px!important;
}

#agenda .btn-tooltip {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    padding: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

#agenda .splide__arrow {
    -ms-flex-align: center;
    align-items: center;
    background: #ccc;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    height: 2em;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: .7;
    padding: 0;
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    width: 2em;
    z-index: 1
}

#agenda .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: rgb(202, 188, 0)!important;
    border-bottom: 1px solid #fff !important;
    background-color: transparent!important;
    font-weight: 700!important;
    font-size: 20px;
}

#agenda .nav-link {
    display: block;
    padding: .5rem 1rem;
    color: #d9d9d9!important;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    font-weight: 700!important;
    font-size: 20px;
}

#agenda .nav-pills2 .nav-link2.active,
.nav-pills2 .show>.nav-link2 {
    color: #fff!important;
    border-bottom: 1px solid #fff !important;
    background-color: #023047!important;
    font-weight: 700!important;
}

#agenda .nav-link2 {
    display: block;
    padding: .5rem 1rem;
    color: #023047!important;
    text-decoration: none;
    font-weight: 700!important;
    border: none!important;
    border-radius: 5px;
    margin-left: 5px;
}

@media (max-width:1200px) {
    #agenda img.bullet {
        display: none;
    }
    #agenda td.jam {
        width: 130px;
        font-size: 14px;
    }
}

@media (max-width:1000px) {
    #agenda .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        font-size: 16px;
    }
    #agenda .nav-link {
        font-size: 16px;
    }
}

@media (max-width:1000px) {
    #agenda .header-workshop h1 {
        color: #fff;
        font-size: 14px;
    }
    /* #agenda .header-workshop h2 {
        color: #fff;
        font-size: 14px;
        font-weight: 200;
    } */
}


/* #part {
    margin-top: 35px;
} */

#part img {
    position: relative;
    left: 31px;
}

#part img.part {
    display: block;
    border-radius: 10px 0 0 10px;
    background-color: #fff;
    padding: 30px 0 30px 50px;
    object-fit: cover;
}

#part h1.header {
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    /* border-top: 5px solid #fff; */
    padding-top: 30px!important;
}

#part .about h1 {
    margin-top: 5px;
    color: #023047;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    margin-left: 80px;
}

#part .about h2 {
    /* margin-top: 15px; */
    margin-bottom: 25px;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 550px;
    margin-left: 80px;
}

#part .about {
    background-color: #fff;
    height: 408px;
    border-radius: 0 10px 10px 0;
    padding: 60px 30px 30px 30px;
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    #part h1.header {
        /* border-top: 5px solid #fff; */
        padding-top: 10px;
    }
    #part img.part {
        width: 100%;
        height: auto;
        border-radius: 10px 10px 0 0;
        padding: 30px
    }
    #part img {
        left: 0;
    }
    #part .about {
        height: auto;
        border-radius: 0 0 10px 10px;
        padding: 30px;
    }
    #part .about h2:first-child {
        margin-top: -30px;
    }
    #part .about h1 {
        margin-left: 0;
    }
    #part .about h2 {
        margin-left: 0;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1279px) {
    #part h1.header {
        /* border-top: 5px solid #fff; */
        padding-top: 10px;
    }
    #part img.part {
        width: 100%;
        height: auto;
        border-radius: 10px;
        padding: 30px
    }
    #part img {
        left: 0;
    }
    #part .about {
        height: auto;
        border-radius: 10px;
        padding: 50px;
    }
    #part .about h2:first-child {
        margin-top: -30px;
    }
    #part .about h1 {
        margin-left: 0;
    }
    #part .about h2 {
        margin-left: 0;
    }
}


/* @media only screen and (width:1280px) {
    #part img {
        left: -29px
    }
    #part .about h1 {
        margin-left: 0;
    }
    #part .about h2 {
        margin-left: 0;
    }
} */

#event {
    margin-top: 35px;
}

#event h1.header {
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    border-top: 5px solid #fff;
    padding-top: 30px!important;
}

#event img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 185px;
    height: auto;
    margin-bottom: 20px;
    object-fit: cover;
    transition: all .3s ease;
}

#event a img:hover {
    transform: scale(1.1);
    filter: grayscale(1);
}

@media only screen and (max-width: 1200px) {
    #event h1.header {
        /* border-top: 5px solid #fff; */
        padding-top: 10px;
        margin-top: 10px;
    }
}

@media only screen and (width: 1280px) {
    #event h1.header {
        /* border-top: 5px solid #fff; */
        padding-top: 10px;
        margin-top: 10px;
    }
}

#venue {
    margin-top: 35px;
}

#venue img {
    position: relative;
    left: 32px;
}

#venue img.venue {
    display: block;
    border-radius: 10px 0 0 10px;
    padding: 30px 0 30px 50px;
    background-color: #fff;
    object-fit: cover;
}

#venue h1.header {
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    border-top: 5px solid #fff;
    padding-top: 30px!important;
}

#venue .about h1 {
    margin-top: 20px;
    color: #023047;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    margin-left: 40px;
}

#venue .about h2 {
    margin-top: -5px;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-left: 40px;
}

#venue .maps {
    background-color: #fff;
    padding: 30px;
    height: 408px;
    width: 600px;
}

#venue .about {
    background-color: #fff;
    padding: 30px;
    height: 408px;
    border-radius: 0 10px 10px 0;
}

#venue hr {
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
    margin-left: 80px;
}

@media only screen and (max-width: 768px) {
    #venue h1.header {
        border-top: 5px solid #fff;
        padding-top: 10px;
    }
    #venue img.venue {
        width: 100%;
        height: auto;
        border-radius: 10px 10px 0 0;
        padding: 30px
    }
    #venue img {
        left: 0;
    }
    #venue .about {
        height: auto;
        border-radius: 0 0 10px 10px
    }
    #venue .about h1:first-child {
        margin-top: -30px;
    }
    #venue .about h1 {
        margin-left: 0;
    }
    #venue .about h2 {
        margin-left: 0;
    }
    #venue .maps {
        width: 100%;
    }
    #venue hr {
        max-width: 100%;
        margin-left: 0;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1399px) {
    #venue h1.header {
        border-top: 5px solid #fff;
        padding-top: 10px;
    }
    #venue img.venue {
        width: 100%;
        height: auto;
        border-radius: 10px;
        padding: 30px
    }
    #venue img {
        left: 0;
    }
    #venue .about {
        height: auto;
        border-radius: 10px;
        padding: 50px;
    }
    #venue .about h1:first-child {
        margin-top: -30px;
    }
    #venue .about h1 {
        margin-left: 0;
    }
    #venue .about h2 {
        margin-left: 0;
    }
    #venue .maps {
        width: 100%;
    }
    #venue hr {
        max-width: 100%;
        margin-left: 0;
    }
}


/* @media only screen and (width:1280px) {
    #venue .about h1 {
        margin-left: 0;
    }
    #venue .about h2 {
        margin-left: 0;
    }
    #venue .maps {
        width: 550px;
        position: relative;
        left: 20px;
    }
} */

#speaker {
    background-color: #E6E6E6;
    padding-top: 70px;
    padding-bottom: 50px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#speaker h1 {
    text-align: center;
    color: #143e6c;
    font-size: 25px;
    font-weight: 700;
}

#speaker h3 {
    text-align: center;
    font-size: 16px;
    color: #0A0D2C;
    margin-bottom: 30px;
}

#speaker .speaker-img {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

#speaker .border {
    border: 10px solid #fff;
    border-radius: 30px;
    padding: 10px;
    margin-bottom: 20px;
    background: #FFFFFF;
    height: 258px;
    transition: all .3s ease;
}

#speaker .border:hover {
    transform: scale(1.1);
}

#speaker .border-detail {
    border: 10px solid #fff;
    border-radius: 30px;
    padding: 10px;
    margin-bottom: 20px;
    margin-top: 70px;
    background: #efefef;
    height: 270px;
    width: 215px;
}

#speaker .nama {
    font-size: 16px;
    text-align: center;
    color: #023047;
    font-weight: 700;
    line-height: 1;
}

#speaker .jabatan {
    font-size: 14px;
    text-align: center;
    color: #023047;
    line-height: 1.1;
}

#speaker .text-speaker {
    font-size: 14px;
    text-align: center;
    color: #023047;
    margin-top: 75px;
}

#speaker a {
    transition: all .3s ease;
}

#speaker a:hover {
    transform: scale(1.1);
}

@media only screen and (min-width: 0) and (max-width: 765px) {
    #speaker .text-speaker {
        margin-top: 0;
    }
    #speaker .border {
        height: 275px;
    }
    #speaker .border-detail {
        height: 270px;
        width: auto;
    }
}

@media only screen and (min-width: 766px) and (max-width: 1200px) {
    #speaker .border-detail {
        border: 10px solid #fff;
        border-radius: 30px;
        padding: 10px;
        margin-bottom: 20px;
        background: #efefef;
        height: auto;
        width: auto;
    }
    #speaker .border {
        height: 275px;
    }
}

@media (min-width:1300px) {
    #speaker .border {
        width: 213px;
    }
}

#kontak {
    background-color: #F6F7FF;
    padding-top: 30px;
    padding-bottom: 30px;
    height: auto;
}

#kontak h1.header {
    text-align: center;
    color: #143e6c;
    font-size: 25px;
    font-weight: 700;
}

#kontak h2 {
    text-align: center;
    color: #070C4A;
    font-size: 18px;
    font-weight: 300;
}

#kontak h3 {
    text-align: center;
    color: #070C4A;
    font-size: 16px;
    font-weight: 300;
}

#kontak img {
    max-width: 30px;
    height: auto;
    width: 100%;
    margin-left: 10px;
}

#kontak .br {
    border-top: 1px solid rgba(2, 48, 71, 0.75);
    margin: 15px auto;
    max-width: 500px;
}

#kontak .form-email {
    display: flex;
    justify-content: center;
}

#kontak .email {
    border: none;
    color: #070C4A;
    background: transparent;
}

#kontak .wa a {
    color: #070C4A;
    border-right: 1px solid #070C4A;
    padding: 0 10px
}

#kontak .wa a:last-child {
    border: none;
}

@media (max-width:1200px) {
    #kontak .wa a {
        line-height: 40px;
    }
}

#news {
    background-color: #f6f6f6;
    padding-top: 70px;
    padding-bottom: 50px;
}

#news h1 {
    text-align: center;
    color: #143e6c;
    font-size: 25px;
    font-weight: 700;
}

#news h2 {
    color: #0A0D2C;
    font-size: 18px;
    font-weight: 700;
    margin-top: 8px;
    margin-bottom: 10px;
}

#news h3 {
    text-align: center;
    color: #000;
    font-size: 16px;
    margin-bottom: 30px;
}

#news p.isi-popup {
    color: #0A0D2C;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

#news p.isi {
    width: 100%;
    max-width: 281px;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    margin: 15px auto 35px auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #0A0D2C;
}

#news img.home {
    width: 100%;
    max-width: 281px;
    height: 179px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}

#news img.popup {
    width: 100%;
    max-width: 310px;
    height: 185px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    margin: 10px 20px 10px 0;
    float: left;
}

#news .content {
    display: none;
}

#news #loadMore {
    width: 200px;
    color: #fff;
    display: block;
    text-align: center;
    margin: 20px auto;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    background-color: #143E6C;
    transition: .3s;
    font-size: 12px;
}

#news #loadMore:hover {
    color: #143E6C;
    background-color: #fff;
    border: 1px solid #143E6C;
    text-decoration: none;
}

#news .noContent {
    color: #000 !important;
    background-color: transparent !important;
    pointer-events: none;
    text-align: center;
}

@media (max-width:1200px) {
    #news img.home {
        width: 100%;
        max-width: 350px;
        height: 150px;
        object-fit: cover;
        border-radius: 10px;
        display: block;
        margin: 0 auto;
    }
    #news {
        height: auto;
    }
    #news p.isi {
        max-width: 350px;
    }
    #news img.popup {
        float: none;
        margin: 0 auto 20px auto;
    }
}

#newslatter {
    background-color: #E0E5FF;
    padding-top: 70px;
    padding-bottom: 50px;
    height: auto;
}

#newslatter h4 {
    text-align: center;
    color: #070C4A;
    font-size: 25px;
    font-weight: 700;
}

#newslatter h5 {
    text-align: center;
    color: #070C4A;
    font-size: 16px;
    font-weight: 400;
}

#newslatter .button-kirim {
    background-color: #1734CF;
    color: #fff;
    border-color: #1734CF;
    border-radius: 10px;
    width: 30%;
    padding: 10px 0
}

#faq {
    background-color: #fff;
    padding-top: 70px;
    padding-bottom: 50px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#faq h1 {
    text-align: center;
    color: #143e6c;
    font-size: 25px;
    font-weight: 700;
}

#faq *,
#faq *:after,
#faq *:before {
    box-sizing: border-box;
}

#faq :root {
    font-size: 16px;
}

#faq *:focus {
    outline: none;
}

#faq details div {
    /* border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000; */
    padding: 1.5em;
}

#faq details div>*+* {
    margin-top: 1.5em;
}

#faq details+details {
    margin-top: .5rem;
}

#faq summary {
    list-style: none;
    font-weight: 600;
    color: rgba(2, 48, 71, 1);
}

#faq summary::-webkit-details-marker {
    display: none;
}

#faq summary {
    /* border: 1px solid #0A0D2C; */
    padding: .75em 1em;
    cursor: pointer;
    position: relative;
    padding-left: calc(1.75rem + .75rem + .75rem);
    border-radius: 5px;
    background-color: #E0E5FF;
}

#faq summary:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: .75rem;
    content: "↓";
    width: 1.75rem;
    height: 1.75rem;
    background: rgba(2, 48, 71, 0.75);
    color: #FFF;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 5px;
}

#faq details[open] summary {
    background-color: #eee;
}

#faq details[open] summary:before {
    content: "↑";
}

#faq summary:hover {
    background-color: #eee;
}

#faq a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 0 0;
}

#faq a:hover {
    box-shadow: 0 3px 0 0;
}

.copyright {
    background-color: #143e6c;
    color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
    font-size: 12px;
    text-align: center;
}

.splide__pagination__page {
    width: 8px;
    height: 8px;
    margin: 5px;
}

.splide__pagination__page.is-active {
    background: #F9441B!important;
    opacity: 1;
}

.swal-modal .swal-text {
    text-align: center;
    line-height: 1.5;
}

#targeting {
    padding: 70px 0;
}

#targeting h1 {
    text-align: center;
    color: #143E6C;
    font-size: 25px;
    font-weight: 700;
}

#targeting h2 {
    color: #143E6C;
    font-size: 20px;
    font-weight: 600;
}

#targeting .bg {
    background-color: #D9D9D9;
    padding: 25px;
    border-radius: 15px;
    margin: 20px 0
}

#targeting ol {
    color: #143E6C;
}

#acara {
    background: url("../images/acara/acara.png");
    padding: 70px 0;
    background-position: center;
    background-size: cover;
}

#acara .bg-header {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

#acara .bg-img {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}

#acara img {
    width: 100%;
    max-width: 500px;
    height: 250px;
    object-fit: cover;
}

#acara h1 {
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    padding: 20px 0;
}

#acara h2 {
    color: #fff;
    font-size: 20px;
}

#acara p {
    color: #fff;
    text-align: justify;
}

#acara li {
    color: #fff;
    margin: 10px 0;
}

#acara .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: #EB5B27;
    border-radius: 10px;
    padding: 25px 50px;
}

#acara .nav-pills .nav-link {
    background-color: #143E6C;
    border: 0;
    border-radius: 10px;
    color: #fff;
    padding: 25px 50px;
}

@media screen and (max-width:1279px) {
    #acara .bg-img {
        justify-content: start;
        overflow: scroll;
    }
    #acara .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        padding: 10px;
    }
    #acara .nav-pills .nav-link {
        padding: 10px;
    }
}

#workshop {
    padding: 70px 0;
}

#workshop .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: #EB5B27;
    border-radius: 10px;
    padding: 15px 25px;
}

#workshop .nav-pills .nav-link {
    background-color: #143E6C;
    border: 0;
    border-radius: 10px;
    color: #fff;
    padding: 15px 25px;
}

#workshop table {
    font-size: 14px;
}

#workshop table th {
    padding: 5px;
    text-align: center;
}

#workshop .bdr {
    border-radius: 15px;
}

@media screen and (max-width:1279px) {
    #workshop .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        padding: 10px;
    }
    #workshop .nav-pills .nav-link {
        padding: 10px;
    }
}

#wa .fly-wa-bottom {
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 8
}

#wa .fly-wa-bottom img {
    height: 45px;
    width: auto
}

@media screen and (max-width:768px) {
    /* #wa .fly-wa-bottom {
        bottom: 0;
    } */
    #wa .fly-wa-bottom img {
        height: 40px;
        width: auto
    }
    .participant{
        padding: 0;
    }
    
}

h1.header{
    text-align: center;
    color: #fff;
    font-size: 25px;
    font-weight: 700;

}

.participant{
    background-color: #023047;
    padding: 7%;
    display: block;
}
.participant .card{
    display: block;
    padding: 30px;
}

.participant-row1{
    padding: 1%;
}

.participant-img{
    float: left;
    padding-right: 20px;
}
.participant-img img{
    width: 100%;
    height: 380px;
    object-fit: cover;
}

.participant-list{
    float: right;
    padding-left: 8%;
    margin-top: 60px;
}
.participant-list h1{
    font-size: 20px;
    color: #023047;
    font-weight: 400;
    line-height: 1.5;
}
.participant-list h2{
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}
.htl-img{   
    padding: 0;
    padding-right: 20px;
}
.htl-img img{
    width: 100%;
    height: 346px;
    object-fit: cover;
}
.about-list{
    float: right;
    padding-left: 20px;
    
}
.about-list h1{
    color: #023047;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}
.about-list h2{
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}
.about-list .card{
    height: 410px;
}

.conference img{
    width: 100%;
    height: 375px;
}    

@media screen and (max-width:600px) {
    .htl-img{padding-right: 0; margin-bottom: 20px;}
}

@media screen and (max-width:380px) {
    #home h1 {
        font-size: 18px;
        
    }
    #home h2{
        font-size: 15px;
    }
    #home img.hg{
        width: 60%;
    }
    .participant{padding: 2%;}
    .participant-img{padding: 0;}
    .participant-list{padding: 0;margin-top: 30px;}
    .participant .card{margin-bottom: 20px;}

    .about-list{margin-top: 15px;}
}