@media(min-width:1200px){
/*************************************************************/

body:after{
    content: "dev version | screen: large";
}

/* Branding container */
/* .branding-container{
    border-bottom: none;
    padding-bottom: 0;
}

.branding-left .region-branding-left .sitename-2023-block span.sitename-text{
    display: block;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    top: -23px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Branding 02 container */
.branding-right .region-branding-right{
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    margin-top: -25px;
    padding: 15px;
}
.branding-02-container{
    /* background: #01224b; */
    background: rgb(1,34,75);
    background: linear-gradient(180deg, rgba(1,34,75,1) 46%, rgba(255,255,255,0) 100%);
    padding: 20px 3%;
}
body.path-frontpage .branding-02-container{
    background: none;
}
.branding-first{
    width: 12%;
    background: none;
    position: relative;
    z-index: 100;
}

.branding-02-container .wrapper{
    display: flex;
    flex-wrap: wrap;
    width: 88%;
}

.branding-second{
    width: 40%;
}
    .branding-second .region-branding-second .sitename-2023-block span.sitename-text{
        top: -15px;
    }

    @media(min-width:1412px){
    /*************************************************************/
        .branding-second .region-branding-second .sitename-2023-block span.sitename-text{
            top: -5px;
        }
    /*************************************************************/
    }


.branding-third{
    width: 10%;
}
.branding-fourth{
    width: 50%;
}

body.scrolled .branding-02-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.5);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 10px 20px;
}
body.scrolled .branding-02-container .line-top,
body.scrolled .branding-02-container .line-bottom,
body.scrolled .branding-02-container .branding-second{
    display: none;
}
body.scrolled .branding-02-container .msia-crest-2023-block,
body.scrolled .branding-02-container .sabah-crest-2023-block{
    top: 0;
}
body.scrolled .branding-02-container .ksti-logo-mobile-block{
    display: block;
}
body.scrolled .branding-02-container .ksti-logo-block{
    display: none;
}

body.scrolled .branding-02-container .msia-crest-2023-block img,
body.scrolled .branding-02-container .sabah-crest-2023-block img,
body.scrolled .branding-02-container .ksti-logo-block img{
    height: 50px;
}
body.scrolled .branding-02-container .wrapper{
    justify-content: flex-end;
}
body.scrolled .branding-02-container .main-menu-2023-block{
    top: 0;
}
body.scrolled .branding-02-container .main-menu-2023-block ul li a,
body.scrolled .branding-02-container .main-menu-2023-block ul li span.nolink{
    /* text-shadow: 0 0 5px rgba(0,0,0,0.5); */
    color: #000000;
}
body.scrolled .branding-02-container .main-menu-2023-block ul ul li a{
    color: #FFFFFF;
}
body.scrolled .branding-02-container .branding-fourth .region-branding-fourth{
    padding-bottom: 0;
}

/* Malaysia crest */
.branding-first .region-branding-first .msia-crest-2023-block{
    position: relative;
    top: 18px;
}
.branding-first .region-branding-first .msia-crest-2023-block img{
    height: 70px;
}


/* Sabah crest */
.branding-first .region-branding-first .sabah-crest-2023-block{
    position: relative;
    top: 18px;
}
.branding-first .region-branding-first .sabah-crest-2023-block img{
    height: 70px;
}

/* KSTI logo mobile */
.branding-first .region-branding-first .ksti-logo-mobile-block{
    display: none;
}

/* Site name */
.branding-second .region-branding-second .sitename-2023-block{
    display: block;
}


/* Line top: line running on top of the banner */
.line-top{
    display: flex;
}

/* Line bottom: line running on top of the banner */
.line-bottom{
    display: flex;
}

.branding-third .region-branding-third .ksti-logo-block{
    display: block;
    top: -3px;
}

/* Main menu 2023 */
.main-menu-2023-block{
    display: block;
    position: relative;
    top: -5px;
}
.main-menu-2023-block ul li a.menu-mobile-only{
    display: none;
}

/* Hamburger menu */
.hamburger-block{
    display: none;
}

/*
.hamburger-block .hamburger{
    width: 93px;
    height: 106px;
}
.hamburger-block .hamburger:after{
    width: 93px;
    height: 106px;
}
.hamburger-block .hamburger .hamburger-box{
    z-index: 100;
} */

/* News brief */
.news-brief-block .views-field-title h2{
    font-size: 55px;
} 

/* Slideshow container */
body.path-frontpage .slideshow-container{
    /* background: url("../images/ksti-building.jpg") no-repeat;
    background-size: cover;
    padding: 3% 0 5% 0; */
    /* margin-bottom: 150px; */
    /* margin-bottom: 50px; */
}
body.path-frontpage .slideshow-container .region-slideshow{
    padding-top: 160px;
}

    /* Slideshow container */
    .slideshow-container{
        margin-top: -190px;
        /* height: 100vh; */
    }

/* Slideshow block */
.slideshow-block{
    /* width: 60%; */
    /* top: 80px; */
}

/* Slideshow video block */
.slideshow-video-bg-block{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* height: 100vh; */
}


.frontpage-first-container .region-frontpage-first{
    flex-direction: row;
}

/* Inner page banner */
.inner-page-banner-container h1.page-header{
    font-size: 40px !important;
    line-height: 45px !important;
}

/* Sidebar */
.sidebar-menu-block ul.nav {
    background: #bd231e;
    padding: 10px 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
    text-align: left;
}
.sidebar-menu-block ul.nav li{
    border: none;
}
.sidebar-menu-block ul.nav li a:after{
    display: inline-block;
}


/* Latest Info common styling (Events, News..) */
.latest-info-block{
    width: 33%;
    padding: 20px 20px;
}

/* Upcoming events */
.upcoming-events-block{
    width: 33%;
    padding: 20px 20px;
}
.upcoming-events-block .views-field-field-upcoming-poster img{
    object-fit: cover;
    width: 100%;
    height: 485px;
    padding: 0;
}

/* Media gallery block */
.view-media-gallery-2023 .media-gallery{
    display: flex;
    padding-bottom: 0;
    /* padding-bottom: 100px; */
    flex-direction: column;
}
.view-media-gallery-2023 .media-gallery .cover{
    width: 90%; 
}
.view-media-gallery-2023 .media-gallery .cover img{
    height: 550px;
}
.view-media-gallery-2023 .media-gallery .info{
    width: 100%;
    /* width: 80%; */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: flex-end;
    margin-top: 0;
    padding-left: 10%;
}
.view-media-gallery-2023 .media-gallery .info .header{
    font-size: 50px;
    font-weight: bold;
    color: #FFFFFF;
    text-transform: uppercase;
    /* margin-left: 30px;

    transform: rotate(90deg);
    position: absolute;
    top: 164px;
    right: -10%; */

    transform: rotate(270deg);
    transform-origin: right;
    position: absolute;
    top: 142px;
    right: 2%;
}
.view-media-gallery-2023 .media-gallery .info .header:after{
    content: "";
    display: block;
    height: 4px;
    width: 200px;
    background: #FFFFFF;
    position: absolute;
    right: -63%;
    top: 10px;
}
.view-media-gallery-2023 .media-gallery .info .wrapper{
    background: #FFFFFF;
    border-left: 20px solid #fbab0a;
    padding: 7% 7%;
    position: relative;
    right: 0px;
    bottom: 30px;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    /* height: 210px; */
}
    /* media gallery arrows */
    .media-gallery-block .arrow-left{
        left: -7%;
        top: 40%;
        background: none !important;
        border: 0;
    }
    .media-gallery-block .arrow-left i{
        font-size: 100px;
        font-weight: bold;
        color: rgba(255,255,255,0.3);
        transition: color 0.3s ease-out;
    }
    .media-gallery-block .arrow-right{
        right: -7%;
        top: 40%;
        background: none !important;
        border: 0;
    }
    .media-gallery-block .arrow-right i{
        font-size: 100px;
        font-weight: bold;
        color: rgba(255,255,255,0.3);
        transition: color 0.3s ease-out;
    }

    .media-gallery-block .arrow-left:hover i,
    .media-gallery-block .arrow-right:hover i{
        color: rgba(255,255,255,1);
        background: none;
    }

/* Footer Address Group block */
.footer-address-2023-group-block{
    display: flex;
    width: 75%;
    margin: 0 auto;
    /* background: #FFFFFF; */
    padding: 5% 5%;
    position: relative;
    /* top: -100px; */
    flex-wrap: wrap;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    flex-direction: row;
    justify-content: flex-start;
    /* margin: -200px auto 50px auto; */
    z-index: 100;
    margin-top: -40px;
}
    body.path-frontpage .footer-address-2023-group-block{
        /* margin-top: -300px; */
        /* margin-top: -175px; */
    }

/* Footer third */
.footer-third-container{
    padding-top: 0;
    padding-bottom: 7%;
}

/* Sitename footer 2023 */
.sitename-footer-2023-block h1{
    text-align: left;
}

/* Footer logo block */
.footer-logo-block{
    display: block;
}

/* Sitename footer 2023 */
.sitename-footer-2023-block{
    flex-basis: 100%;
}

/* Address 2023 */
.address-2023-block{
    text-align: left;
    padding-right: 20px;
}

/* QR code block */
.qr-code-block{
    text-align: right;
    align-self: flex-start;
    padding: 0;
    display: block;
}
.qr-code-block img{
    /* margin-left: 20px; */
}

/* Footer menu block */
.footer-menu-block ul.menu{
    display: flex;
    flex-direction: row;
    margin: 20px 0 0 0;
    text-align: center;
}

/* Map of KSTI on footer */
.ksti-map-block iframe{
    /* height: 700px; */

    height: 200px;
}

/* Photo gallery page */
.view-photo-gallery.gallery-page .view-content ul li{
    width: 31%;
    display: inline-block;
    margin: 0 10px 20px 10px;
}
.view-photo-gallery.gallery-page .view-content ul li:nth-child(3n+1){
    margin-left: 0;
}
.view-photo-gallery.gallery-page .view-content ul li:nth-child(3n){
    margin-right: 0;
}

/* TEST EXPERIMENTAL (NOT USING LIST) */
.tech-highlights-block div.tech-highlight-list-wrapper{
    margin: 0 20px 0 0;
}
.tech-highlights-block .tech-highlight-container-02{
    justify-content: flex-end;
}

.tech-highlights-block.not-using-list{
    position: absolute;
    top: -140px;
    background: none;
}

/* Media gallery deco */
.deco-media-gallery-block{
    display: block;
}

/* State Apps selection */
.state-apps-icons{
    position: fixed;
    left: 15px;
    bottom: 80px;
    z-index: 500;
    display: block;
}

/* Accessibility widget */
.asw-widget{
    display: block;
}

/* Footer Address Group block */
.footer-address-2023-group-block{
    background: #FFFFFF url("../images/cubic-grid-pattern-rv2.jpg") no-repeat;
}

/* Social media widgets */
.social-media-widgets-block .field--name-body ul{
    text-align: left;
}

/* Paragraph: Image grid */
.paragraph--type--image-grid .field--name-field-img-grid-photos .field--item{
    width: 22%;
}

/*************************************************************/
 }