@charset "utf-8";
        @import url("https://fonts.googleapis.com/css?family=Bai Jamjuree");
        /* CSS Document */
        /*RESET*/
        
        html,
        body,
        div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        abbr,
        acronym,
        address,
        big,
        cite,
        code,
        del,
        dfn,
        em,
        font,
        img,
        ins,
        kbd,
        q,
        s,
        samp,
        small,
        strike,
        strong,
        sub,
        sup,
        tt,
        var,
        b,
        u,
        i,
        center,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent;
        }
        
        body {
            line-height: 1;
        }
        /*ol, ul{list-style:none;}*/
        
        blockquote,
        q {
            quotes: none;
        }
        
        blockquote:before,
        blockquote:after,
        q:before,
        q:after {
            content: '';
            content: none;
        }
        
         :focus {
            outline: 0;
        }
        
        ins {
            text-decoration: none;
        }
        
        del {
            text-decoration: line-through;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        
        html {
            font-size: 70%;
            min-width: 350px;
        }
        /*MAIN*/
        
        body {
            font-size: 1.7rem;
            line-height: 1.25em;
            font-family: "Bai Jamjuree", sans-serif;
        }
        
        .homepage {
            width: 100%;
            height: 20vh;
            min-width: 1100px;
        }
        
        .subpage {
            width: 100%;
            min-width: 1100px;
            padding-top: 75px;
            margin-bottom: 50px;
        }

        .subpage-contact {
            width: 90%;
            min-width: 1100px;
            padding-top: 75px;
            margin-bottom: 50px;
    
        }
        
        .subpage strong {
            color: rgb(41, 104, 185);
            font-size: 18px;
        }
        
        .blackbold {
            color: rgba(89, 89, 89);
            font-weight: bold;
            font-size: 18px;
        }
        
        .home-content {
            padding-top: 90px;
            padding-bottom: 30px;
            padding-left: 50px;
            box-sizing: border-box;
            position: relative;
            background-image: url("images/Background.png");
            background-size: cover;
        }
        
        .main {
            width: 100%;
            padding-top: 1vh;
            margin-bottom: 60px;
        }
        /*.row to control display column width*/
        
        .row {
            width: 80%;
            max-width: 1500px;
            min-width: 1100px;
            margin: 0 auto;
        }
        
        .row100 {
            width: 100%;
            max-width: 1500px;
            min-width: 1100px;
            margin: 0 auto;
            text-align: center;
        }

        .row90 {
            width: 90%;
            max-width: 1500px;
            min-width: 1100px;
            margin: 0 auto;
        }

        .row70 {
            width: 70%;
            max-width: 1500px;
            min-width: 1100px;
            margin: 0 auto;
        }
        
        table {
            table-layout: fixed;
            width: 100%;
        }
        
        .pic-caption {
            display: inline-block;
            text-align: center;
            font-size: 18px;
            font-color: rgb(89, 89, 89);
        }

        .normaltext {
            width: 100%;
            font-weight: normal;
            line-height: 1.4 text-align: left;
            font-size: 18px;
            font-color: rgb(89, 89, 89)
        }
        
        .normaltext1 {
            text-align: center;
            font-weight: normal;
            font-size: 18px;
            font-color: rgb(89, 89, 89)
        }

         .normaltext9 {
            width: 100%;
            font-weight: normal;
            line-height: 1.5;
            text-align: left;
            font-size: 18px;
            font-color: rgb(89, 89, 89)
        }


        .titletext {
            width: 100%;
            text-align: left;
            font-weight: bold;
            font-size: 25px;
            color: #2968b9;
        }


        .pic-title {
            text-align: center;
            font-weight: bold;
            font-size: 25px;
            color: #2968b9;
        }

        .titletext1 {
            width: 100%;
            text-align: left;
            font-weight: bold;
            font-size: 18px;
            color: #2968b9;
            Margin: 0;
        }
        
        .pub-sec-title {
            font-weight: bold;
            font-size: 25px;
            color: #2968b9;
        }
        
        
        .pub-table1 {
            font-weight: normal;
            line-height: 1.4 
            text-align: left;
        }
        
        .pub-table2 {
            
            color: rgb(89, 89, 89)
            font-size: 4;
        }

        .pub-table3 {
            
            color: rgb(41, 104, 185)
            font-size: 4;
        }

        .pub-title {
            font-size: 18px; /* corresponds to size=4 in HTML */
            font-weight: bold;
            color: #595959;
            margin: 0;
        }

        .pub-authors {
            font-size: 18px;
            font-weight: normal;
            color: #595959;
            margin: 0;
        }

        .profile {
            font-size: 18px;
            font-weight: normal;
            color: black;
            margin: 0;
            text-align: justify;
        }

         .pub-details {
            color: #2968b9;
            margin: 0;
        }

        .pub-link {
  text-decoration: underline;
  color: #595959;
}
        

        /*Text Collapse*/
 /* --- Popover layout --- */
.profile-popover {
  position: relative;            /* anchor for the absolute panel */
  display: inline-block;
  
}

.profile-popover__link {
  text-decoration: underline;
  color: #595959;
}
.profile-popover__link:focus { outline: none; outline-offset: 2px; }

/* The panel is absolutely positioned under the link */
.profile-popover__panel {
  position: absolute;
  inset: auto auto auto 0;       /* set left=0; top is below via transform */
  transform: translateY(8px);    /* 8px below the link */
  z-index: 1000;
  inline-size: min(700px,90vw);
  max-inline-size: min(750px, 68vw);
  max-block-size: 1000px;         /* scroll if very long */
  overflow: auto;
  padding: 12px 14px 14px 14px;
  border: 1px solid #f5f5f5e8;
  border-radius: 10px;
  background: #f5f5f5e8;
  box-shadow: 0 12px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
}

/* Little arrow */
.profile-popover__panel::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 14px;                    /* aligns roughly under the link */
  width: 10px; height: 10px;
  transform: rotate(45deg);
  background: #595959;
  border-left: 1px solid #d0d5dd;
  border-top: 1px solid #d0d5dd;
}

/* Close button inside the panel */
.profile-popover__close {
  position: sticky;              /* stays visible while scrolling */
  top: 0;
  float: right;
  margin: -6px -6px 4px 8px;
  inset-inline-start: auto;
  border: 0;
  background: transparent;
  
  cursor: pointer;
  color: #667085;
}
.profile-popover__close:focus { outline: none; border-radius: 4px; }

.profile-popover__content {
  white-space: normal;
  background: #f5f5f5e8;
}




        .layout-table {
            width: 90%;
            max-width: 2000px;
        }
        
        .layout-table-pub {
            width: 90%;
            max-width: 2000px;
            margin-left: 30px;
        }

        .layout-table60 {
            text-align: center;
            width: 60%;
            max-width: 2000px;
            
        }

        .news-content {
            height: 500px;
        }
        
        .news-title {
            color: #2968b9;
        }

        .news-title1 {
            color: black;
        }


        .responsiveimage {
                display: block;
                width: 50%
                margin: 0 auto;
        }



        .responsiveimage1 {
            display: inline-block;
            margin-right: 40px;
            
            
        }
        
        .responsiveimage2 {
            margin: 5px 20px 40px 0px;
            display: inline;
            float: left;
        }
        
        .responsiveimage3 {
            margin: 5px 20px 60px 0px;
            display: inline;
            float: left;
        }
        
        .responsiveimage4 {
            margin: 8px 20px 50px 0px;
            display: inline;
            float: left;
            width: 20%;            
        }
        
        .responsiveimage5 {
            width: 50% float: center;
        }
        
        .tabletext {
            display: block;
            margin: 5px 0 0 0;
        }
        


        a {
            color:  rgb(89, 89, 89);
        	text-decoration: none;
	        font-weight: bold;
           
        }
        
        a:hover {
            color: #2968b9;
        }
        
        header {
            background-color: white;
            width: 100%;
            min-width: 350px;
            height: 55px;
            position: fixed;
            top: 0;
            left: 0;
            border-bottom: 1px solid #DCDCDC;
            box-shadow: 0 0 10px #333;
            z-index: 100;
        }
        
        #logo {
            margin: 1vh 0px;
            float: left;
            width: 250px;
            height: auto;
            display: block;
        }
        
        nav {
            font-size: 18px;
            font-size: 1.6rem;
            float: right;
            margin-top: 5px;
            margin-right: 5px;
        }
        
        #menu-icon {
            display: hidden;
            width: 40px;
            height: 40px;
            background: #2968b9 url(images/menu-icon.png) center;
        }
        
        a:hover#menu-icon {
            background-color: black;
            border-radius: 4px 4px 0 0;
        }
        
        ul {
            list-style: none;
        }
        
        ol {
            list-style: decimal;
            
        }

        li {
            font: bold;
            font-size: 18px;
        }

        /* li {

	display: inline-block;
	float: left;
	padding: 10px

} */
        
        ul li {
            display: inline-block;
            float: left;
            padding: 10px
        }
        
        .toc {
            display: inline;
            float: right;
            margin: 10px 10px 10px 10px;
        }

        .toc-left {
            display: inline;
            float: left;
            margin-right: 30px;
            margin-bottom: 30px;
        }

         .group-image {
            width: 100%;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        /*dropdown menu*/
        
        .dropdown {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            min-width: 130px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }
        
        .dropdown-content a {
            color: black;
            padding: 8px 10px;
            text-decoration: none;
            display: block;
        }
        
        .dropdown-content a:hover {
            background-color: #ddd;
            color: #2968b9
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        .flex-container {
            display: flex;
            flex-wrap: nowrap;
            background-color: DodgerBlue;
        }
        
        .flex-container .box1 {
            background-color: #f1f1f1;
            width: 30%;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
        
        .flex-container .box2 {
            background-color: #f1f1f1;
            width: 50%;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
        
        .current {
            color: #2968b9;
        }
        
        .copyright {
            text-align: center;
            width: 100vw;
            font-size: 0.8em;
        }

        .copyright1 {
            text-align: left;
            width: 100vw;
            font-size: 0.8em;
        }
        /*section {

	margin: 80px auto 40px;
	position: relative;
	padding: 20px;

}*/
        
        h1 {
            font-size: 2em;
            color: white;
            line-height: 1.15em;
            margin: 20px 0;
        }
        
        h2 {
            font-size: 1.6em;
            color: #2968b9;
            line-height: 1.15em;
            margin: 20px 0;
        }
        
        h3 {
            font-size: 1.5em;
            color: #F26522;
            line-height: 1.15em;
            margin: 20px 0;
        }
        
        p {
            line-height: 1.4em;
            margin-bottom: 20px;
        }
        
        .mySlides {
            display: none
        }
        
        .w3-left,
        .w3-right,
        .w3-badge {
            cursor: pointer
        }
        
        .w3-badge {
            height: 13px;
            width: 13px;
            padding: 0
        }
        
        .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1.5s;
            animation-name: fade;
            animation-duration: 1.5s;
        }
        
        @-webkit-keyframes fade {
            from {
                opacity: .4
            }
            to {
                opacity: 1
            }
        }
        
        @keyframes fade {
            from {
                opacity: .4
            }
            to {
                opacity: 1
            }
        }
        /* ====== Footer ====== */
        
        footer {
            font-family: "Bai Jamjuree", sans-serif;
            font-size: 16px;
            font-weight: normal;
            text-align: left;
            padding-top: 10px;
            color: rgba(255, 255, 255, 0.3);
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            background-color: white;
            border-top: 1px solid #DCDCDC;
            box-shadow: 0 0 5px #333;
        }
        
        .alignleft {
            float: left;
            padding-left: 10px;
        }
        
        .alignright {
            float: right;
            padding-right: 10px;
        }
        
        .hangingindent {
            padding-left: 22px;
            text-indent: -22px;
        }
        /* ====== Button ====== */
        
        .btn,
        button,
        input[type="button"] {
            display: inline-block;
            font-family: "Bai Jamjuree", sans-serif;
            font-weight: 800;
            font-size: 1.7rem;
            text-transform: uppercase;
            letter-spacing: .2rem;
            height: 2rem;
            line-height: 2rem;
            padding: 0 .15rem;
            margin: 1rem .15rem 3rem 0rem;
            color: #000000;
            text-decoration: none;
            text-align: center;
            white-space: nowrap;
            cursor: pointer;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            background-color: #c5c5c5;
            border: .2rem solid #c5c5c5;
        }
        
        .btn:hover,
        button:hover,
        input[type="button"]:hover,
        .btn:focus,
        button:focus,
        input[type="button"]:focus {
            background-color: #b8b8b8;
            border-color: #b8b8b8;
            color: #000000;
            outline: 0;
        }
        
        .btn-animatedbg {
            position: relative;
            background: transparent !important;
            border-color: #F26522 !important;
            color: #FFFFFF !important;
            height: 4.6rem;
            line-height: 4.8rem;
            padding: 0 3rem 0 3rem;
            overflow: hidden;
            z-index: 1;
        }
        
        .btn-animatedbg::before {
            content: "";
            height: 100%;
            width: 0;
            background-color: #F26522;
            -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        
        .btn-animatedbg::after {
            display: block;
            content: "";
            width: 2rem;
            height: 2rem;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
            -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
            margin-top: -1.1rem;
            position: absolute;
            top: 50%;
            right: 4rem;
        }
        
        .btn-animatedbg:hover::before {
            width: 100%;
        }
        
        .btn-animatedbg:hover::after {
            right: 3rem;
        }
        /* Slideshow container */
        /* Slideshow container */

 


        
        .slideshow-container {
            max-width: 700px;
            position: relative;
            margin: auto;
        }
        /* Next & previous buttons */
        
        .prev,
        .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: grey;
            font-weight: bold;
            font-size: 30px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
        }
        /* Position the "next button" to the right */
        
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }
        /* On hover, add a black background color with a little bit see-through */
        
        .prev:hover,
        .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
        /* Caption text */
        
        .text {
            color: #f2f2f2;
            font-size: 15px;
            padding: 8px 12px;
            position: absolute;
            bottom: 8px;
            width: 100%;
            text-align: center;
        }
        /* Number text (1/3 etc) */
        
        .numbertext {
            color: black;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }
        /* The dots/bullets/indicators */
        
        .dot {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }
        
        .active,
        .dot:hover {
            background-color: #717171;
        }
        /* Fading animation */
        
        .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1.5s;
            animation-name: fade;
            animation-duration: 1.5s;
        }
        
        @-webkit-keyframes fade {
            from {
                opacity: .4
            }
            to {
                opacity: 1
            }
        }
        
        @keyframes fade {
            from {
                opacity: .4
            }
            to {
                opacity: 1
            }
        }
        /* On smaller screens, decrease text size */
        
        @media only screen and (max-width: 300px) {
            .prev,
            .next,
            .text {
                font-size: 11px;
                font-color: black
            }
        }
        /*MEDIA QUERY*/
        
        @media only screen and (max-width: 1100px) {
            @media (max-width: 1100px) {
                #header {
                    position: fixed;
                    top: 0;
                }
            }
            footer {
                min-width: 350px;
            }
            nav {
                font-size: 3vh;
            }
            h1 {
                font-size: 1.5em;
                color: white;
                line-height: 1.15em;
                text-align: left;
            }
            h3 {
                font-size: 1em;
                color: #F26522;
                line-height: 1.15em;
                text-align: left;
            }
            .main {
                width: 100%;
                min-height: 65vh;
                padding-top: 0vh;
            }
            .homepage {
                min-width: 350px;
            }
            .subpage {
                min-width: 350px;
            }
            .home-content {
                padding-top: 90px;
                padding-bottom: 30px;
                padding-left: 25px;
                box-sizing: border-box;
                position: relative;
            }
            .slideshow-container {
                padding-left: 0vw;
                padding-right: 0vw;
                position: relative;
            }
            .responsiveimage {
                width: 100%
            }


            .responsiveimage100 {
                
                width: 100%
            
            }

            .responsiveimage5 {
                width: 100%
            }
            .responsiveimage1 {
                width: 100%;
                margin: 30px;
                padding-left: 0px;
                
                max-width: 300px;
            }
            .responsiveimage3 {
                margin-bottom: 10px;
                margin-right: 10px;
                padding-left: 0px;
                padding-right: 10px;
            }
            .responsiveimage2 {
                margin: 0px 5px 10px 0px;
                padding-left: 0px;
                padding-right: 10px;
            }
            .responsiveimage4 {
                margin: 0, 0, 0, 0;
                width: 100%;
                max-width: 300px;
            }
            .caption {
                color: #f2f2f2;
                font-size: 15px;
                padding: 0px 0px;
                position: absolute;
                bottom: 8px;
                width: 100%;
                text-align: center;
            }
            .home-content__button {
                display: flex;
                justify-content: left;
                padding: 0px;
                color: white;
            }
            .btn-animatedbg {
                color: white !important;
            }
            .row {
                min-width: 350px;
            }
            .row70 {
                min-width: 350px;
            }
            .normaltext {
                font-size: 15px;
            }
            #menu-icon {
                display: inline-block;
            }
            nav ul,
            nav:active ul {                                   /*Menu Botton Drop-down*/
                display: none;
                position: absolute;
                padding: 20px;
                background: #fff;
                border: 2px solid #2968b9;
                right: 20px;
                top: 40px;
                min-width: 100px;
                width: 10%;
                border-radius: 4px 0 4px 4px;
            }
            nav li {
                text-align: center;
                width: 100%;
                padding: 5px 0;
                margin: 0;
            }
            nav:hover ul {
                display: block;
            }
            .tabletext {
                display: block;
                margin: 0 0 5px 0;
            }
            .toc {
                display: block;
                float: none;
                margin: 0 0 0 0;
                width: 100%;
            }

            .layout-table60 {
            text-align: center;
            width: 100%;
            max-width: 2000px;
            
            }   

            .toc-left {
            display: inline;
            float: center;
            margin: 30px;
            
            }   

            .copyright1 {
                width: 100vw;
                text-align: left;
            }

            
            .copyright {
                width: 100vw;
            }