* { background-repeat: no-repeat; background-position: center center; box-sizing: border-box; }
body {margin: 0px;padding: 0px;width: 100%;height: auto;background-color: #ffffff;color: #000000;font-family: "Poppins";font-size: 100%;line-height: 1.2;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}
a {color: #000000;text-decoration: none;font-weight: normal;}
a:hover{font-weight: bold;}
ul, ol { padding: 0px; margin: 0px; }
li { list-style-type: none; vertical-align: top; }
h1, h2, h3, h4, h5, h6 { padding: 0px 0px 0px 0px; margin: 0px; font-weight: normal; color: #000000; }
h1 { font-size: 250%; }
h2 { font-size: 162%; }
h3 { font-size: 138%; }
h4 { font-size: 100%; }
h5 { font-size: 81.25%; }
h6 { font-size: 68.75%; }
fieldset { padding: 0px; margin: 0px; border: none; }
input, textarea, select { font-size: 90%; background: transparent; border: solid #000000 1px; padding: 5px; color: #000000; box-sizing: border-box; font-family: "Poppins"; }
input[type=text], input[type=password]  { height: 30px; }
input[type=button], input[type=submit] { cursor: pointer; background-color: #000000; color: #ffffff; padding: 10px 20px 10px 20px; }
select { height: 30px; padding-right: 30px; background-image: none; background-repeat: no-repeat; background-position: right 10px center; }
p {padding: 0px 0px 20px 0px;margin: 0px;font-size: 100%;}
strong { font-weight: normal; font-family: "PoppinsBold"; }
table { border-spacing: 0px; }
td, th { padding: 0px; text-align: left; vertical-align: top; }
.hidden { display: none; }
.spacer { clear: both; height: 0px; display:none; }
.query::placeholder {color: black; }

/*Fonts*/

@font-face { font-family: "Poppins"; src: url(/library/fonts/Poppins/Regular.otf) format("opentype"); }
@font-face { font-family: "PoppinsBold"; src: url(/library/fonts/Poppins/Bold.otf) format("opentype"); }

@font-face { font-family: "Sedan"; src: url(/library/fonts/Sedan/Regular.otf) format("opentype"); }
@font-face { font-family: "SedanItalic"; src: url(/library/fonts/Sedan/Italic.otf) format("opentype"); }


/*Colours*/

:root {
    --blue: #155E8F;
    --brown: #AB9A82; 
    --beige: #EEEBE6;
}


/*********************************************************************************/
/*Common*/
/*********************************************************************************/

.layouttopmenu, .layoutbreadcrumb, .layoutmiddle, .pagecontent_inner{
    max-width: 1500px;
    margin: 0 auto;
}

.pagetitle, .news-pagetitle, .util_sitesearch h2{
    height: 270px;
    background-color: var(--blue);
    margin-bottom: 20px;
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: end;
    font-family: "SedanItalic";
}

.pagetitle, .news-pagetitle h2, .util_sitesearch h2{
    color: white;
    font-size: 350%;
}

@media (max-width: 500px){
    .pagetitle, .news-pagetitle, .util_sitesearch h2{
        justify-content: center;
        text-align: center;
    }
}


/*Right layout*/

.section54 .layoutmiddle, .section75 .layoutmiddle, .section80 .layoutmiddle, .section81 .layoutmiddle, .section82 .layoutmiddle,
.section103 .layoutmiddle, .section104 .layoutmiddle, .section105 .layoutmiddle, .section106 .layoutmiddle, .section137 .layoutmiddle{
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding: 0 10px 100px 10px;
}

.section54 .layoutcontent, .section75 .layoutcontent, .section80 .layoutcontent, .section81 .layoutcontent, .section82 .layoutcontent,
.section103 .layoutcontent, .section104 .layoutcontent, .section105 .layoutcontent, .section106 .layoutcontent, .section137 .layoutcontent{
    width: 100%;
}


@media (max-width: 1000px){
    .section54 .layoutmiddle, .section75 .layoutmiddle, .section80 .layoutmiddle, .section81 .layoutmiddle, .section82 .layoutmiddle,
    .section103 .layoutmiddle, .section104 .layoutmiddle, .section105 .layoutmiddle, .section106 .layoutmiddle, .section137 .layoutmiddle{
        flex-direction: column;
        padding: 10px;
    }
}

/*Breadcrumbs*/

.nav_breadcrumb{
    padding: 20px;
    margin-bottom: 40px;
    font-size: 125%;
}

/*Buttons*/

.home .article .link a, input[type=submit], .showmore a{
    background-color: var(--blue);
    color: white;
    border-radius: 2em;
    padding: 8px 50px;
    font-size: 114%;
    border: none;
}

.home .article .link a:hover, input[type=submit]:hover, .showmore a:hover{
    background-color: var(--brown);
    font-weight: normal;
}

/*Archive component*/

.archive-links{
    background-color: var(--beige);
    width: 480px;
    height: fit-content;
    margin-bottom: 40px;
}

.archive-links h2{
    background-color: var(--blue);
    color: white;
    padding: 10px 20px;
}

.archive-links ul{
    padding: 30px 30px 0 30px ;
}

.archive-links ul li{
    padding-bottom: 30px;
    font-size: 120%;
}

@media (max-width: 1200px){

    .archive-links{
        width: 100%;
    }

}

/*********************************************************************************/
/*Header*/
/*********************************************************************************/

.layoutheader{ border-bottom: 5px solid var(--brown); }

.layoutheader_inner .logo a{
    color: var(--blue);
    font-family: "Sedan";
    font-size: 300%;
    font-weight: bold;
}

.layoutheader_inner{
    height: 115px;
    max-width: 1500px;
    margin: 2px auto 0 auto;
    padding: 0 20px;
    border-top: 2px solid #F39322;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/*Desktop view*/

@media (min-width: 1250px){

    .layoutheader .toggle { display: none; } 
    
    .layoutheader_inner .items{
        display: flex;
        justify-content: space-between; 
        align-items: center;
        padding-top: 15px;
    }
    
    .layoutheader_inner .nav_simple ul{
        display: flex;
        justify-content: space-between; 
        padding-right: 10px;
    }


    .layoutheader_inner .nav_simple .menu19{
        display: none;
    }
    
    .layoutheader_inner .nav_simple a{
        font-weight: bold;
        padding-right: 15px;
    }

    .layoutheader_inner .nav_simple li:hover a{
        color: var(--blue);
    }
    
    .layoutheader_inner input[type=text]{
        width: 220px;
        border-radius: 2em;
        border: 2px solid var(--blue);
        padding: 0 15px;
        font-weight: bold;
    }
    
}

/*Tablet/Mobile view*/

@media (max-width: 1249px){
    .layoutheader .toggle {position:absolute;top:45px;right:30px;cursor:pointer;}

    .layoutheader .toggleoff ul, .layoutheader .util_sitesearchbar {display:none;}

    .layoutheader .toggleon ul{display:block;position: absolute;top: 110px;right: 0px;width: 100%;background-color: white;/* opacity: 0.9; */z-index: 50;text-align: center; padding: 10px 0; border-bottom: 5px solid var(--brown);}

    .layoutheader .toggleon li{padding: 10px 0px 10px 20px; font-size: 110%;}

    .layoutheader svg path {fill: var(--brown);}

    .layoutheader svg {width: 35px; height: 35px;}

}


@media (max-width: 600px){

    .layoutheader_inner .logo a{ font-size: 200%;}
}

@media (max-width: 430px){

    .layoutheader_inner .logo{ width: 300px;}

}

/*********************************************************************************/
/*Footer*/
/*********************************************************************************/

.layoutcredits{
    background-color: var(--blue);
}

.layoutcredits_inner{
    min-height: 200px;
    max-width: 1500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin: 0 auto;
}

.layoutcredits_inner .copyright, .layoutcredits_inner .beachshore, .layoutcredits_inner .beachshore a{
    color: white;
}

@media (max-width: 600px){

    .layoutcredits_inner{
        flex-direction: column;
        justify-content: center;
        gap:20px;
        text-align: center;
    }
}

/*********************************************************************************/
/*Home*/
/*********************************************************************************/

.home .banner .util_textbox_inner{
    min-height: 450px;
    width: 100%;
    display: flex;
}

.home .banner .imageleft, .banner .content{
    width: 50%;
}

.home .banner .imageleft{
    background-position: top 65% right 35%;
    background-size: 145%;
    filter: grayscale(100%);
}

.home .banner .content{
    background-color: var(--blue);
    display: flex;
    justify-content: center; 
    align-items: center;
    text-align: center;
}

.home .banner .content h1{
    font-family: "SedanItalic";
    font-size: 350%;
    color: white;
    padding: 0 10px;
}

.home .welcome{
    padding: 50px 20px;
}

.home .welcome h2{
    color: var(--blue);
    padding-bottom: 10px;
}

.home .util_container .items{
    min-height: 500px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 80px;
    padding: 0 10px;
}

.home .util_container>h2{
    color: var(--blue);
    padding: 0 10px 20px 10px;
}

.home .list_article{
    width: 100%;
}

.home .list_article .list{
    /* max-width: 990px; */
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 30px;
}

.home .list_article .article{
    width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.home .list_article .article .headline {
    padding: 10px;
    background-color: var(--beige);
    border-bottom: 10px solid var(--brown); 
    display: flex;           
    align-items: center;     
    min-height: 83px;      
}


.home .list_article .article .bgimage{
    /* max-width: 480px; */
    min-height: 480px;
    background-color: var(--beige);
    background-position: top 30% center;
    /* background-size: 160%;     */
    background-size: cover;
}

.home .list_article .article .abstract{
    padding: 20px 10px 40px 20px;
    font-size: 115%;
    margin-bottom: 30px;
}

.home .list_article .article .link{
    position: absolute;
    bottom: 0;
    padding: 10px;
}

.home .archive-links{
    min-height: 530px;
}


@media (max-width: 1200px){
    .home .util_container .items{
        flex-direction: column;
        gap:100px;
    }
}

@media (max-width: 550px){

    .home .banner .util_textbox_inner{
        flex-direction: column;
    }

    .home .banner .imageleft, .banner .content{
        width: 100%;
        min-height: 225px;
    }

    .home .banner .content h1{
        font-size: 280%;
    }

    .home .welcome{
        padding: 30px 20px 60px 20px;
    }

    .home .welcome h2, .home .welcome h3{
        transform: scale(0.9);
    }

    .home .list_article .list{
        flex-direction: column;
        align-items: center;
        gap:50px;
    }
    .home .list_article .article{
        width: 90%;
    }

}


/*********************************************************************************/
/*Article*/
/*********************************************************************************/

.news_stylea{
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    margin: 10px;
}

.news_stylea .banner {
    max-width: 1000px;
    height: auto;
    margin-bottom: 60px;
}

.news_stylea .banner img {
    max-width: 1000px;
    height: auto;
}

.news_stylea .headline{
    font-size: 162%;
    color: var(--blue);
    margin-bottom: 40px;
    order:1;
}

.news_stylea .created{
    display: none;
}

.news_stylea .abstract{
    order:2;
}

.news_stylea .image{
    order:3;
    max-width: 860px;
    height: auto;
    margin-top: 40px;
    text-align: center;
}

.news_stylea .caption{
    order:4;
    padding: 5px 0 0 20px;
    font-size: 14px;
}

.news_stylea .image img{
    width: 100%;
    height: auto;
}

.news_stylea p img{
    margin: 20px 0;
}

.news_stylea .article{
    order:5;
    margin: 40px 0 50px 0;
}

.news_stylea .abstract, .news_stylea .article{
    font-size: 100%;
    line-height: 1.5;
}

.news_stylea .article img{
    display: block; 
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}


/*********************************************************************************/
/*Digital archive*/
/*********************************************************************************/

.digital-archive .pagecomponents_inner{
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin: 80px auto;
    padding: 10px;
    gap:40px;
}

.digital-archive .util_textbox_inner{
    width: 200px;
    height: auto;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.digital-archive .util_textbox_inner:hover{
    transform: scale(1.05);
}

.digital-archive .util_textbox_inner .titletxt{
    font-size: 130%;
    height: 80px; 
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.digital-archive .util_textbox_inner .imagetop{
    overflow: hidden;
    border-radius: 15px;
    width: 200px;
}



.digital-archive .util_textbox_inner img{
    width: auto;
    height: 200px;
    transform: scale(1.5);
}


/*********************************************************************************/
/*Category pages*/
/*********************************************************************************/

.category .list_article  .titletxt{
    font-size: 162%;
    margin-bottom: 30px;
    background-color: var(--brown);
    color: white;
    padding: 10px 20px;
}

.category .article{
    padding: 10px;
}

.category .article .headline a{
    color: var(--blue);
    font-weight: bold;
    padding-inline-start: 10px;
}

.category .article .abstract{
    padding: 20px 0;
    padding: 20px 10px;
    font-size: 115%;
    border-bottom: 3px solid var(--brown);
}

/*********************************************************************************/
/*About page*/
/*********************************************************************************/


.about .content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    background-color: var(--beige);
    padding: 60px;
    margin: 100px 40px;

}

.about .content h2{
    margin-bottom: 20px;
    font-size: 30px;
    color: var(--blue);
}

.about img{
    max-width: 500px;
    height: auto; 
    padding: 20px;
}


@media (max-width: 900px){

    .about .content{
        padding: 20px;
        margin: 0;
    }

    .about img{
       float: none !important;
       padding: 30px 0;
       width: 100%;
       display: block;
       margin: 0 auto;
    }
}


/*********************************************************************************/
/*Index*/
/*********************************************************************************/


.index .util_container{
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 50px;
}

.index .list_article{
    padding: 20px;
}

.index .list_article .titletxt{
    font-size: 120%;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--brown);
    color: var(--brown);
}

.index .article .headline a{
    padding-inline-start: 10px;
    font-size: 80%;
    
}

.index .article .abstract{
    display: none;
}

@media (max-width: 1000px){
    .index .pagecomponents_inner{
        flex-direction: column;
    }

    .index .content{
        width: 100%;
    }

}


/*********************************************************************************/
/*Contact Us*/
/*********************************************************************************/

.contact .surv_standard{
    padding: 60px;
    margin: 40px;
    background-color: var(--beige);
}

.contact .surv_standard .titletxt{
    margin-bottom: 30px;
    text-align: center;
    margin-bottom: 20px;
    font-size: 30px;
    color: var(--blue);
}

.contact .surv_standard .label{
    display: none;
}

.contact .form{
    max-width: 600px;
    margin: 0 auto;
}

.contact .surv_standard input[type=text], .contact .surv_standard textarea{
    width: 100%;
    margin: 5px 0 15px 0;
    background-color: white;
    border: none;
    border-radius: 10px;
}

.contact .surv_standard input[type=text]{
    height: 35px;
}

.contact .surv_standard .buttons{
    text-align: center;
    margin-top: 30px;
}

@media (max-width: 600px){

    .contact .surv_standard{
        padding: 30px;
        margin: 0px 0px 20px 0;
    }

}

/*********************************************************************************/
/*Search*/
/*********************************************************************************/

.util_sitesearch {
    min-height: 600px;
}

.util_sitesearch .include{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 40px;
    margin: 60px auto;
    padding: 10px;
}

.util_sitesearch input[type=text]{
    width: 300px;
    height: 40px;
    margin: 0 10px 0 0;
}

.util_sitesearch #result_report{
    font-weight: bold;
    font-size: 110%;
    margin-bottom: 20px;
}

.util_sitesearch #results{
    max-width: 1000px;
}

.util_sitesearch .result{
    text-align: start;
    margin-bottom: 15px;
    padding-bottom: 30px;
    border-bottom: 2px solid var(--brown);
}

.util_sitesearch .title{
    font-weight: bold;
    padding-bottom: 10px;
}

.util_sitesearch .description{
    padding-bottom: 10px;
}


@media (max-width: 550px){
    .util_sitesearch .include{
        flex-direction: column;
    }

    .util_sitesearch input[type=text]{
        margin: 10px;
    }
}