@charset "UTF-8";

/*

Theme Name: Kanda Multi-Page Theme



Author: Kanda Consulting



Description: WordPress theme, for a multi-page website, designed and built by Kanda Consulting.



Version: 1.0



*/



/*****************************



FONTS



Lato Light

font-family: "lato", sans-serif;

font-weight: 300;

font-style: normal;

Lato Regular

font-family: "lato", sans-serif;

font-weight: 400;

font-style: normal;

Lato Italic

font-family: "lato", sans-serif;

font-weight: 400;

font-style: italic;

Lato Medium

font-family: "lato", sans-serif;

font-weight: 500;

font-style: normal;

Lato Semibold

font-family: "lato", sans-serif;

font-weight: 600;

font-style: normal;

Lato Bold

font-family: "lato", sans-serif;

font-weight: 700;

font-style: normal;

Lato Bold Italic

font-family: "lato", sans-serif;

font-weight: 700;

font-style: italic;

Lato Heavy

font-family: "lato", sans-serif;

font-weight: 800;

font-style: normal;

Lato Black

font-family: "lato", sans-serif;

font-weight: 900;

font-style: normal;



*******************************/



/* @font-face {

    font-family: 'HelveticaNeueLTPro';

     src: url('fonts/HelveticaNeueLTPro-Bd.otf');

}  */







/*****************************



VARIABLES



*******************************/



:root{



    /* colours */



    --primary-color:#038DA1;

    --secondary-color:#4EAB7C;

    --purple:#303444;

    --black:#000000;

    --offwhite:#E7E2D7;

    --highlight-color:#038DA11A;

    





    /* fonts */



    --primary-font: "lato", sans-serif;

    --secondary-font:- "lato", sans-serif;





    /* colors of page elements */



    --footer-text-color:#ffffff;



    /* header social media */



    --header-social-media-color:#ffffff;



    /* pop-up */

    --pop-up-background-color:var(--purple);

    --pop-up-text-color:#ffffff;

    --pop-up-text-link-color:var(--primary-color);



    /* header */



    --nav-text:#FFFFFF99;

    --nav-hover-text:var(--primary-color);

    --nav-active-text:#ffffff;

    --nav-current-page-border:#ffffff;

    --mobile-button-color:#ffffff;



    /* page banners */



    --homepage-banner-heading-color:#ffffff;

    --page-banner-heading-color:#ffffff;

    --page-banner-heading-font-size:72px;







    /* buttons */



    --button-background-color:var(--primary-color);

    --button-font:var(--secondary-font);

    --button-hover-color:var(--primary-color);

    --button-text-color:#ffffff;







    /* style rules: size, line height etc */

    

    --text-size:16px;

    --text-line-height:24px;

    --section-heading-size:64px;

    --box-shadow:0px 5px 20px 5px rgba(0,0,0,0.150);

    --box-shadow-hover:0px 5px 20px 5px rgba(0,0,0,0.10);

    --footer-color:var(--purple);



    /* Join the Conversation */



    --subheading-font-size:24px;







}







/*****************************



GENERAL CSS RULES



*******************************/



html, body{

    scroll-behavior: smooth;

}



* {

    margin:0px;

    padding:0px;

}





ul li {

    list-style-type: disc;

}
.content_text_block ul li{
    list-style-position: inside;
}


ol li {

    list-style-type: decimal;

}



p, ul li, ol li, td {

    line-height: var(--text-line-height);

    font-size: var(--text-size);

    color:var(--purple);

    font-family: var(--primary-font);

}





/* headings  */



h1, h2, h3, h4, h5, h6 {

    font-family: var(--primary-font);

    color:var(--purple);

}



h1 {

    font-size: 58px;

    text-transform: uppercase;

    font-weight:400;

}



h2 {

    font-size: 50px;  

    text-transform: uppercase;

    font-weight:400;

}



h3 {

    font-size: 36px;  

    text-transform: uppercase;

    font-weight:500;

}



h4 {

    font-size: 30px;  

    font-weight:500;

}



h5 {

    font-size: 24px;   

    font-weight:500;

}



h6 {

    font-size: 26px;  

    font-weight:500;

}



@media screen and (max-width:991px) {



    h1 {

        font-size: 44px!important;

    }

    

    h2 {

        font-size: 34px!important;  

    }

    

    h3 {

        font-size: 30px!important;  

    }

    

    h4 {

        font-size: 32px!important;  

    }

    

    h5 {

        font-size: 28px!important;   

    }

    

    h6 {

        font-size: 24px!important;  

    }





}





button, .button {

    font-family: var(--button-font);

    color:var(--button-text-color);

    padding:20px 30px;

    font-weight:500;

    background-color: transparent;

    display:inline-block;

    text-transform: uppercase;

    border:2px solid white;

    transition: all .5s;

    

}



/* button/link hover */



button:hover, .button:hover {

    text-decoration: none;

    color:#ffffff;

    background-color:var(--button-hover-color);

    cursor: pointer;

    border:2px solid var(--button-hover-color);



}





/*****************************



CSS RULES THAT ARE SPECIFIC (E.G. NAVIGATION MENU BUTTONS)



*******************************/







.sub-posts header nav ul li.menu-item-348::before{

    content:'';

    display:block;

    height:3px;

    width:100%;

    background-color: #fff;

    margin-bottom:48px;

}

.menu-item-348 a{

    background-color: var(--primary-color);

    color:white;

    padding:5px 10px;

    /* border-radius:5px; */

}



section nav .menu-item-348 a{

    background-color:var(--primary-color);

    color:white;

    padding:5px 8px;

    /* border-radius: 5px; */

}



.menu-item-348 a:hover {

    color:white;

}



@media screen and (max-width:1103px) {

    

    header nav ul li.current_page_item::before, .sub-posts header nav ul li.menu-item-1892::before {

        content:'';

        display:none;

    

    }



}



/*****************************



REPEATED CLASSES



*******************************/y



.clearfix {

    clear:both;

}



.container {

    max-width: 1100px;

    padding-left: 15px;

    padding-right: 15px;

}





header .container{

    max-width: 1260px;

    padding-left: 15px;

    padding-right: 15px;

}





.section_padding {

    padding-top:90px;

    text-align: center;

    width:100%;

}



.heading {

    margin-bottom:50px;

}



.heading h2 {

    font-size: var(--section-heading-size);

}



.full_width_image {

    width: 100%;

}



.divider-container {

    display: flex;

    justify-content: center;

    margin-top:75px;

}



.divider {

    margin-bottom: 0px;

}



.back_to_hub_container {

    margin-top: 100px;

  }



.back_to_hub_link {

    padding:20px 30px;

    box-shadow:var(--box-shadow);

    -webkit-box-shadow:var(--box-shadow);

    width: fit-content;

    color:black;

    font-family: var(--button-font);

    border-radius:10px;

}



.back_to_hub_link:hover {

    background-color:var(--primary-color);

    color:var(--white);

    text-decoration: none;

}



.error_message {

    color:red;

}



.full_width_section {

    width:100%;

}



.full_width_image {

    width:100%;

}





/* overlay */



.overlay {

    height: 100vh;

    width: 100%;

    position: fixed;

    top: 0px;

    left: 0px;

    background-repeat: repeat;

    z-index: 99999;

    overflow: scroll;

    background-image: url('img/overlay.png');

    background-repeat: repeat;

}





/* 

==========================================



HEADER SOCIAL MEDIA



For the social media and email section at the top of the page



=========================================

*/



.header_social_media_banner {

    padding:5px 15px;

    background-color: var(--primary-color);

    display: flex;

    justify-content: center;

    position: relative;

    z-index: 2;

   

}



.header_social_media_container {

    display:flex;

    padding-right:10px;

}



.header_social_media_container svg {

    margin:5px;

    width:initial;  

}



.header_social_media_container svg path {

    fill:var(--header-social-media-color);

}



.header_email p {

    margin-top:5px;

    margin-bottom:0px;

    

}

.header_email p > a {

    color:var(--header-social-media-color);

}



@media screen and (max-width:600px) {



    .header_social_media_banner {

        display:block;

    }



    .header_email {

        margin-left:0px;

        text-align: center;

    }



    .header_social_media_container a {

        display:inline-block;

    }



    .header_social_media_container {

        display:block;

        text-align: center;

        padding-right:0px;

    }



    .header_email p {

        margin-left:0px;

        margin-top:0px;

        word-break: break-all;

    }

}





/* 

==========================================



HEADER AND NAVIGATION



=========================================

*/



header {

    width: 100%;

    height: auto;

    padding-bottom:30px;

    z-index: 10;

    background-color:var(--black);

    position: relative;

    transition: all 0.3s ease-in-out;  

    /* -webkit-box-shadow: 0px 4px 6px -2px rgba(0,0,0,0.43); 

    box-shadow: 0px 4px 6px -2px rgba(0,0,0,0.43); */

}



header .container {

    padding-left: 0px;

    padding-right: 0px;

}



/* logo */



header .logo {

    float: left;

    margin-top: 30px;

    margin-left: 15px;

}



header .logo img {

    max-width:190px;

    width:100%;

}



header .logo a {

    color:var(--nav-text);

}



header .logo a:hover {

    text-decoration: none;

}



/* nav */



header nav {

    float:right;  

}



header nav ul {

    margin-bottom:0px;

}



header nav ul li {

    display: inline-block;

    padding-right:30px;

}



header nav ul li a {

    font-family: var(--secondary-font);

    color:var(--nav-text);

}



header nav ul li a:hover {

    color:white;

    text-decoration: none;

}



header nav ul li.current_page_item a {

    color:var(--nav-active-text);

}



header nav ul li.current_page_item::before{

    content:'';

    display:block ;

    height:3px;

    width:100%;

    background-color: var(--nav-current-page-border);

    margin-bottom:45px;

}



@media screen and (max-width:1103px){

    header nav ul li.current_page_item::before{

        content:'';

        display:none;

    }

    

}



/* Mobile menu */



.mobile_button {

    width: 40px;

    position: relative;

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

    -webkit-transition: .5s ease-in-out;

    -moz-transition: .5s ease-in-out;

    -o-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    cursor: pointer;

    margin-top: 48px;

    float:right;

    margin-right:25px;

    display:none;

    padding:10px;

  }



.mobile_button span {

    display: block;

    position: absolute;

    height: 4px;

    width: 100%;

    background: var(--mobile-button-color);

    border-radius: 9px;

    opacity: 1;

    left: 0;

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

    -webkit-transition: .25s ease-in-out;

    -moz-transition: .25s ease-in-out;

    -o-transition: .25s ease-in-out;

    transition: .25s ease-in-out;

}



/* for the animation when mobile button is clicked clicked */



.mobile_button span:nth-child(1) {

    top: 0px;

}

  

.mobile_button span:nth-child(2), .mobile_button span:nth-child(3) {

    top: 10px;

}

  

.mobile_button span:nth-child(4) {

 top: 20px;

}

  

.mobile_button.open span:nth-child(1) {

    top: 18px;

    width: 0%;

    left: 50%;

}

  

.mobile_button.open span:nth-child(2) {

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

}

  

.mobile_button.open span:nth-child(3) {

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

}

  

.mobile_button.open span:nth-child(4) {

    top: 18px;

    width: 0%;

    left: 50%;

}





.scroll-down {

    width: 100%;

    z-index: 999;

    background-color:var(--black);

    position: fixed;

    top:0;

    transition: all 0.3s ease-in-out;

    

}



@media screen and (max-width:1103px) {

    .mobile_button {

        display:block;

    }



    header nav {

      width: 100%;

      display:none;

      background-color:black;

      margin-right:0px;

      margin-top: 11px;

  }



  header nav ul li {

      text-align: center;

      display:block;

      margin-bottom:15px;

      padding-right:0px;

      

  }

  header nav ul li:first-child {

    margin-top:10px!important

}

  header nav ul li:last-child {

      margin-bottom:0px!important

  }



  header nav ul li a {

      padding:0px;

  }





 

}





/* Exhibition navigation */



/* .menu_virtual_Exhibition nav {

    margin-top:48px;

} */



/* static pages (Contact page, Cookie Policy page etc */



.header_static nav {

    margin-top:48px;

}





/* 

==========================================



POP UPs



For pop-ups of content, for text content at the top of the page, and for clickable images



=========================================

*/



/* for top of the page, text pop-up */



.pop_up {

    background-color:var(--pop-up-background-color);

    padding:25px;

    color:var(--pop-up-text-color);

    text-align: center;

    padding:60px;

}

.pop_up_content{

    color:white;

}

.pop_up p, .pop_up h3,.pop_up a, .pop_up h1, .pop_up h2,.pop_up h4, .pop_up h5{

    color:white;

}



.pop_up_close {

    text-align: right;

    font-size: 20px;

 }



 .pop_up_close i:hover {

    color:var(--primary-color);

    cursor: pointer;

}



.pop_up_content {

    margin-top:15px;

}



.pop_up_content .content_text_block a {

    color:var(--pop-up-text-link-color)!important;

    text-decoration: none;

    font-weight: bold;

}



.pop_up_content .content_text_block a:hover {

    color:var(--secondary-color)!important;

}



/* for clickable images - COME BACK TO */





.image_overlay_container {

    width:100%;

    margin:auto;

    margin-top: 150px;

    margin-bottom: 150px;

    padding-left:5%;

    padding-right:5%;

}



.overlay_image {

    margin-top:10px;

}



.overlay_image img {

    width:100%;

}



.overlay_close {

    margin-left: 15px;

    font-size: 20px;

    color: white;

    font-weight: bold;

    text-align: right;

}



.overlay_close i:hover {

    color:var(--primary-color);

    cursor: pointer;

}



@media screen and (max-width:1000px) {

    .image_overlay_container {

        padding-left:15px;

        padding-right:15px;

    }

}









/* 

==========================================



IMAGE BANNERS



For homepage and all pages, the image banner at the top of the page



=========================================

*/



/* homepage banner */



.homepage_banner {

    height:100vh;

    width:100%;

    position: relative;

    background-size:cover;

    background-repeat: no-repeat;

    background-position: top center;

    z-index: 1;

}



.homepage_banner_text_block {

    position:absolute;

    top:50%;

    margin:0 auto;

    text-align: center;

    bottom:auto;

    color:#ffffff;

    left:50%;

    transform: translate(-50%,-50%);

}



.homepage_banner_logo {

    max-width:400px;

    margin:0 auto;

    margin-bottom:40px;

}



.homepage_banner_logo img {

    width:100%;

}



.homepage_banner_text_block h1, .homepage_banner_text_block h2 {

    color:var(--homepage-banner-heading-color);

    font-family: var(--secondary-font);

}



@media screen and (max-width:540px) {



    .homepage_banner {

       height:auto;

       padding-top:75px;

       padding-bottom:75px;

       margin-top: 0px;

    }



    .homepage_banner_text_block {

        position: static;

        transform: none;

        

    }



}



/* all other pages */



.page_banner{

    height:350px;

    width:100%;

    background-size:cover;

    position: relative;

    background-position:bottom center;

    

}



.page_banner .container {

    height:350px;

    position: relative;

    max-width:1200px;

}



.banner_heading {

    margin: 0;

    position: absolute;

    bottom: 7%;

    left: 15%;

    -ms-transform: translate(0%, -0%);

    transform: translate(0%, -0%);    

    line-height: 38px;

    color:var(--text-white);

    letter-spacing: 0px;

    padding-left:15px;

    padding-right:15px;

}



.banner_heading h1 {

    font-family: var(--secondary-font);

   color:var(--page-banner-heading-color);

   font-size: var(--page-banner-heading-font-size);

}





/*****************************



CONTENT TEXT BLOCK



All rules for content text block



*******************************/



/* Headings */

.content_text_block h1, .content_text_block h2, .content_text_block h3, .content_text_block h4, .content_text_block h5, .content_text_block h6 {

    margin-bottom:1rem;

}



/* Links */

.content_text_block a {

    font-weight: bold;

    color:var(--primary-color);

}



.content_text_block a:hover {

    color:var(--secondary-color);

    text-decoration: none;

}



/* Images */

.content_text_block img {

    width: 100%;

    display:block;

    height:auto;

    margin-top:30px;

}



.content_text_block img:hover {

    opacity: .6;

    cursor: pointer;

}



.content_text_block .wp-video {

    width:100%!important;

    display:block!important;

    height: auto!important;

}



/* Maps and embedded media */

.content_text_block iframe {

    width:100%;

    margin-bottom:1rem;

    display:block;

}



.wp-caption {

    width:100%!important;

    margin-bottom:1rem;

}



.wp-caption-text {

    text-align: center;

    margin-top:10px;

}



/* Downloadable documents */

.content_text_block h6 a {

    color:white;

    padding: 10px 30px;

    border-radius: 10px;

    display: block;

    background-color: var(--primary-color);

    font-size: 16px;

    text-align: center;

    margin: auto;

    display:inline-block;

    word-wrap: anywhere;

    font-weight: initial;

}



.content_text_block h6 a:hover {

    background-color:var(--button-hover-color);

    color:white;

    text-decoration: none;

}





/* 

==========================================



COMPANY INFORMATION



These are for small company logos with supporting content



=========================================

*/



.company_information_container {

    margin-bottom: 25px;

    margin-top: 45px;

  }





/* logo */

.company_logo {

    display: flex;

    height: 300px;

    justify-content: center;

    align-items: center;

    box-shadow:var(--box-shadow);

    -webkit-box-shadow:var(--box-shadow);

    border-radius:5px;

    width:100%;

 }



 .company_logo img{

    max-width:240px;  

 }



 .company_logo:hover {

    box-shadow:var(--box-shadow);  

    -webkit-box-shadow:var(--box-shadow);

}



.company_logo a:hover img {

    cursor: pointer;

    opacity: .4!important;

}



/* company info */



.company_info_container {

    height: 300px;

    position: relative;



 }



 .company_info {

    text-align:left !important;

    padding-left:20px;  

    margin: 0;

   position: absolute;

   top: 50%;

   left: 50%;

   -ms-transform: translate(-50%, -50%);

   transform: translate(-50%, -50%);

   width: 100%;

}



.company_info h1,.company_info h2,.company_info h3,.company_info h4,.company_info h5,.company_info h6 {

    color:var(--primary-color);

}



@media screen and (max-width:1100px) {



    .company_info {

        position: static;

        transform: none;

    }



 }

 

 @media screen and (max-width:767px) {

    .company_info {

        text-align: center!important;

        margin-top:25px;

    }



    .company_info_container {

       height:auto;

    }

}



@media screen and (max-width:600px) {

 

    .company_logo {

        float:none;

        margin:auto;

    }



    .company_info {

        float:none;

        width:100%;

        margin-top:25px;

    }



}



@media screen and (max-width:400px) {



    .company_logo img {

        max-width:none;

        width:90%;

    }



 }





/* 

==========================================



ICONS



These are for small graphics with text under them



=========================================

*/



.icons {

    margin-top:25px;

}



.icon {

    max-width: 135px;

    margin: auto;

}



.icon img {

    width: 100%;

}



.icons p {

    text-align: center;

    margin-top: 30px;

}





/* 

==========================================



SLIDESHOW



For images that get rotated through



=========================================

*/



.carousel {

    margin-bottom:25px;

}



.carousel-caption p {

    margin-top: 0px !important;

    width: fit-content;

    text-align: center;

    margin: auto;

        margin-top: auto;

        margin-bottom: auto;

    margin-bottom: 15px;

    padding: 5px;

    padding-right:15px;

    padding-left:15px;

    font-family: var(--primary-font);

    background-color:var(--primary-color);

    border-radius:10px;

}



.carousel-indicators li {

    background-color:white;

    opacity: .5;

    list-style: none!important;

    list-style-type: none;

}



.carousel-indicators li:hover {

    background-color:var(--primary-color);

    cursor: pointer;

    opacity: 1!important;

}



.carousel-indicators .active {

    background-color:var(--primary-color);

    opacity: 1!important;



}



.carousel-control-next-icon, .carousel-control-prev-icon {

    background-size: cover;

    width: 70px;

    height: 70px;

  }



  .carousel-control-next-icon {

    background-image: url('img/slideshow_arrow_next.png');

  }



  .carousel-control-prev-icon {

    background-image: url('img/slideshow_arrow_prev.png');

  }





  @media screen and (max-width:600px) {



    .carousel-control-next-icon, .carousel-control-prev-icon {

        background-size: cover;

        width: 35px;

        height: 35px;

      }



      .carousel-caption p {

          margin-bottom:0px;

          padding:5px;

          padding-left:15px;

          padding-right:15px;

      }



  }



/* 

==========================================



OPTIONAL CONTENT BLOCK



For content that is initially hidden in a section



=========================================

*/



.optional_content_link {

    padding-top:10px;

    padding-bottom:10px;



}



.optional_content_link p {

    margin-bottom:0px;

    font-weight: 600;

    font-family: var(--secondary-font);

}



.optional_content_link p i {

    margin-left:5px;

}



.optional_content_block {

    display:none;

}



.optional_content_link:hover {

    cursor: pointer;

}



.optional_content_block, .optional_content_block_visible {

    margin-top:25px;



}





/* 

==================



LATEST NEWS BLOCK ON FRONT PAGE



===================

*/



.latest_news_section {

    height:100%;

    position: relative;

    width:100%;

    background-size: cover; 

    background-color:var(--primary-color);

    color:var(--text-white);

    padding-top:130px;

    text-align: center;

    color:white;

    padding-bottom:130px;

    margin-top:130px;

   

}



.latest_news_content .content_text_block a {

    color:#fff;

}



.latest_news_content .content_text_block a:hover {

    color:var(--secondary-color);

}





@media screen and (max-width:768px){



    .latest_news_section{

        padding-top:70px;

        padding-bottom:70px;

    }

}





/* 

==================



NEWS BLOCKS



===================

*/



.latest_news_list_container {

    display:flex;

    background-color:var(--white);

    border-top-left-radius:10px;

    border-bottom-left-radius:10px;

    border-top-right-radius: 10px;

    border-bottom-right-radius:10px;

    overflow: hidden;

    box-shadow:var(--box-shadow);

    -webkit-box-shadow:var(--box-shadow);



}



.post_thumbnail_container {

    flex:50%;

    overflow:hidden;

    

}



.post_thumbnail{

    background-size:cover;

    background-repeat: no-repeat;

    background-position: center;

    height:250px;

    transform:scale(1);

    transition:all 0.5s linear;

    

}



.post_thumbnail:hover{

    transform:scale(1.2);

    transition:all 0.5s linear;

    -o-transition: all 0.5s linear; /* opera */

    -ms-transition: all 0.5s linear; /* IE 10 */

    -moz-transition: all 0.5s linear; /* Firefox */

    -webkit-transition: all 0.5s linear; /*safari and chrome */

    border-top-left-radius:10px;

    border-bottom-left-radius:10px; 

}



.post_text {

    flex:50%;

    text-align: left;

    margin-top:30px;

    padding:20px;

}



.post_text h5 {

    color:var(--primary-color);

    font-size: var(--subheading-font-size);

    

}



.post_text p {

    color:#000;

    margin-bottom:0px;

}



.post_text a {

    margin-top:15px;

    display:block;

}



.post_text a:hover {

    text-decoration: none;

}



.post_text a:hover p {

    color:var(--primary-color);

    

}





.view_news_page_button {

    display: flex;

    justify-content: center;

    margin:auto;

    background-color:var(--secondary-color);

    margin-top: 30px;

}



.view_news_page_button:hover {

    background-color:var(--primary-color);

}











@media screen and (max-width:600px) {



    .latest_news_list_container{

        flex-direction:column !important;

        border-top-left-radius:10px;

        border-top-right-radius: 10px;

    }



    .post_text {

        margin-top:0px;

    }



}









/* 

==========================================



SOCIAL MEDIA BLOCK



=========================================

*/



.social_media_section{

    padding-top:130px;

    text-align: center;  

}



.social_media_icons{

    display:flex;

    justify-content: center; 

}



.social_media_icons .facebook svg, .social_media_icons .insta svg, .social_media_icons .twitter svg{

    fill:var(--primary-color);

    margin:0px 20px 0px 20px;

    transition: .5s ease-in-out;

}



.social_media_icons svg:hover{

    transform:scale(1.2);

    transition: .5s ease-in-out;

}





@media screen and (max-width:768px){

    .social_media_section{

       padding-top:70px;

        

    }

}



/* 



=======================



LINK BANNER



The banner under a page's content, for linking to another page



======================

*/



.link_banner {

    padding:60px;

     background-image:url(./img/prompt.png);

    color:var(--purple);

    /* background-attachment: fixed; */

    text-align: center;

    position: relative;

    margin-top:130px;  

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}



.link_banner_content .button {

    background-color:transparent;

    border:2px solid var(--purple);

    color:var(--purple);

    transition: all 0.5s;

}



.link_banner_content .button:hover {

    background-color:var(--primary-color);

    border:2px solid var(--primary-color);

    color:white;

}

.link_banner_exhibition{
    background-image:url(./img/linkbanner_exhibition.png) !important;
}
.link_banner_exhibition .heading h2{
    color:white;
}

.link_banner_exhibition .link_banner_content .button{
    background-color:transparent;
    border:2px solid white;
    color:white;
}

.link_banner_exhibition .link_banner_content .button:hover{
    background-color:var(--purple);
    border:2px solid  var(--purple);
    color:white;
}
/* 

==========================================



MAILING LIST



=========================================

*/



.mailing_list_container {

    padding-right:15px;

    padding-left:15px;

    text-align:center;



}



.mailing_list_section  {

    padding-top:130px;

}



.mailing_list_form form input {

    background: #FFFFFF;

    -webkit-appearance: none;

    box-shadow:var(--box-shadow-hover);

    /* border-radius: 10px; */

    border:0px;

    padding:20px 30px;

    max-width:425px;

    width:100%;

}



.mailing_list_form form button{

    text-transform: uppercase;

    margin-left:10px;

    background-color:var(--purple);

    color:white;

    border:2px solid var(--purple);

    transition: all 0.5s;

}



.mailing_list_form form button:hover{

    background-color:var(--primary-color);

    color:white;

    border:2px solid var(--primary-color);

    

}



.g-recaptcha div {

    margin: auto;

      margin-top: auto;

    margin-top: 25px;

  }



  .disclaimer_info {

      margin-top:15px;

  }



  @media screen and (max-width:650px) {



    .mailing_list_form form input {

        width:100%;

        max-width:initial;

    }



    .mailing_list_form form button {

        text-transform: uppercase;

        margin-top: 20px;

        margin-left:0px;

      }



  }



  @media screen and (max-width:590px){

    #mailing_list_signup form button{

        margin-top:10px;

        

    }

}





/* 

==================



FOOTER



===================

*/





footer {

    background-color:var(--footer-color);

    color:white;

    padding:130px 10px 130px 10px;

    margin-top:130px;

}



footer .container{

    max-width:1360px;

}



/* footer contact info */



.contact_button_area {

    border:1px solid #ffffff99;

    padding:40px;

    /* border-radius:10px; */

    /* height: fit-content; */

}

.contact_button_area a {

    background-color: var(--primary-color);

    border:0px;

}

.contact_button_area a:hover{

    text-decoration: none;

    color:#ffffff;

    background-color:var(--button-hover-color);

    cursor: pointer;

    border:0;



}

.contact_button_area h3, .contact_button_area p{

    margin-bottom:20px;

    color:white;

}

/* footer other info */



.footer_info{

    padding-left:3rem;

    padding-top:1rem;

}

footer p{

    color:white;

}

.footer_info img {

    max-width:200px;

    margin-bottom:20px;

    width:100%;

}



.footer_social_media_section {

    display:flex;

    justify-content: left;

}



.footer_social_media_section svg {

    margin:10px 10px 10px 0px;

}



.footer_social_media_section path {

    fill:var(--footer-text-color);

}



.email_link {

    color:#fff;

}
@media screen and (max-width:350px){
    .email_link{
        font-size:12px;
    }
}


.email_link:hover {

    color:#ffffff;

    text-decoration: none;

}



.privacy_text p a {

    color:#fff;   

}



.privacy_text p a:hover {

    color:var(--primary-color);

    text-decoration: none;

}



/* footer nav */



.footer_menu section {

    width: 100%;

    /* height: 110px; */

    z-index: 10;

    position: relative;

    transition: all 0.3s ease-in-out;

}



.footer_menu section nav {

    float: left;

}



.footer_menu section nav ul li {

    display: inline-block;

    padding-right: 30px;

  }



.footer_menu section nav ul li a {

    font-family: var(--secondary-font);

    color:var(--nav-text);

}



.footer_menu section nav ul li.current_page_item a {

    color:#fff;

 }



 .footer_menu section nav ul li a:hover {

    color:#ffffff;

    text-decoration: none;

}



.footer_back_to_top {

    position: absolute;

    top:0%;

    right:10%;

}



@media screen and (max-width:1103px){



    footer {

        padding-top:50px;

        padding-bottom:50px;

    }



    .footer_menu section nav ul li {

        display: block;

        padding-right:30px;

        margin-top:15px;

    

    }

    .footer_info {

        padding-left:1rem;

    }

    .footer_back_to_top {

        top:auto;

        bottom:0%;

    }

}



/*****************************



JOIN THE CONVERSATION



*******************************/



/* banner */



.join_the_conversation_page_banner {

    height:350px;

    background-size:cover;

    color:white;

    

}



.join_the_conversation_page_banner .container {

    height:350px;

    position: relative;

    max-width:1200px;

}



.join_the_conversation_banner_heading {

    position: absolute;

    bottom:40px;

    left:0px;

    padding-left:15px;

    padding-right:15px;

    color:var(--purple);

}



.join_the_conversation_banner_heading h2, .join_the_conversation_banner_heading h3 {

    font-family: var(--secondary-font);

    color: var(--purple);  

}



.join_the_conversation_banner_heading h2 {

    font-size: var(--page-banner-heading-font-size);

}



.join_the_conversation_banner_heading h3 {

    margin-bottom:0px;

}





/* sub menu */



.have_your_say_menu li {

    background-color: var(--primary-color);

    color:white;

    display:inline-block;

    padding:10px;

    padding: 2px 15px;

    border-radius: 0px;

    margin-right:5px;

    margin-bottom:15px;

}



.have_your_say_menu li a {

    color:white;

    opacity: .4;

}



.have_your_say_menu li a:hover {

    opacity:1!important;

    text-decoration: none;

}



.active_have_your_say_link a {

    opacity:1!important;

}



.typeform_have_your_say_link {

    background-color:var(--secondary-color)!important;

}



.join_the_conversation_intro_content {

    margin-bottom:35px;

}





/* typeform buttons and form */





.typeform_buttons {

    margin-bottom:25px;

}



.typeform_link {

    color:white;

    display: block;

    margin-top:20px;

    width: max-content;

    margin: auto;

    margin-top:25px;

 }



 .typeform_link .button {

    text-transform: initial;

 }



.typeform_link:hover div {

    background-color:var(--secondary-color);

    color:white;

    text-decoration: none;

}





.typeform {

    margin-bottom:25px;

}



/* exhibition hub page buttons */



.exhibition_page_link_container {

    border-radius: 40px;

    box-shadow: var(--box-shadow);

    -webkit-box-shadow: var(--box-shadow);

    margin-bottom:35px;

    padding-left:0px;

    padding-right:0px;

}



.exhibition_page_link_content_image {

    width:100%;

    height: 207px;

    border-top-right-radius: 20px;

    border-top-left-radius: 20px;

    background-position: center;

    background-size:cover;

    background-repeat: no-repeat;

}



.exhibition_page_content {

    border-bottom-left-radius: 20px;

    border-bottom-right-radius: 20px;

    padding:30px;

    text-align: left;

}



.exhibition_page_content h6 {

    color:var(--primary-color);

}



.exhibition_page_read_more_link a {

    color:black;

    text-decoration: none;

}



.exhibition_page_read_more_link a p {

    text-transform: uppercase;

    font-size: 18px;

    margin-bottom:0px;

    font-family: var(--secondary-font);

}



.exhibition_page_read_more_link a:hover p {

    color:var(--primary-color);

}



.exhibition_page_read_more_link {

    float:right;

}



.exhibition_page_read_more_link img {

    width:167px;

}



@media screen and (max-width:800px) {



    .join_the_conversation_page_banner {

        width:100%;

        color:white;

        padding-top: 50px;

        padding-bottom: 50px;

        background-size:cover;

        height:auto;



    }



    .join_the_conversation_page_banner .container {

        height: auto;

    }



    .join_the_conversation_banner_heading {

        position: static;



    }





}



/* exhibition pages */



.exhibition_link_container {

    margin-top:100px;

}



.exhibition_section_link {

    box-shadow: var(--box-shadow);

    -webkit-box-shadow:var(--box-shadow);

    border-radius: 10px;

}



.next_section_link {

    margin-bottom:0px;

}



.exhibition_section_link .previous_exhibition_page_image, .exhibition_section_link .next_exhibition_page_image {

    background-size: cover;

    height: 200px;

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

    margin-right: -15px;

    margin-left: -15px;

    background-position: center;

}



.exhibition_section_content {

    padding: 20px;

}



.exhibition_section_text {

    font-weight: 700;

    position: absolute;

    top: -12%;

    font-family: var(--secondary-font);

    font-size: 22px;

  }



  .exhibition_next_text {

    right: 0;

    left: auto;

  }



  .exhibition_previous_text {

    left: 0%;

    right: auto;

  }



  @media screen and (max-width:767px) {

    .exhibition_section_text {

        position: static;

    }



    .next_section_link {

        margin-top:25px;

    }



}



.exhibition_section_content h6 {

    color: var(--primary-color);

}



.exhibition_read_more_link a p {

    font-family: var(--secondary-font);

    color: black;

    text-transform: uppercase;

    margin-bottom: 0px;

    font-size:18px;

  }



  .exhibition_read_more_link {

    padding-bottom: 20px;

  }



  .previous_exhibition_link {

    float: left !important;

  }



  .next_exhibition_link {

      float:right!important;

  }



  .exhibition_read_more_link a:hover {

    text-decoration: none;



  } 

.exhibition_read_more_link a:hover p {

    color:var(--primary-color);

    

}





/* 

==================



TIMELINE



Page with blocks, showing progression of a project



=========================

*/



.timeline {

    position: relative;

    max-width: 1200px;

    margin: 0 auto;

    margin-top:25px;

    margin-bottom:25px;

    text-align:left;

    padding-left:15px;

    padding-right:15px;

}

  



.after_timeline_content_container .content_text_block, .after_timeline_date h6 {

    opacity: .4!important;

}



.timeline_content_container .content_text_block {

    box-shadow: var(--box-shadow);

    -webkit-box-shadow: var(--box-shadow);

    border-radius:10px;

    padding:48px;

    margin-bottom:45px;

}



.current_timeline_content_container .content_text_block {

    background-color:var(--highlight-color);

     border-left:4px solid var(--primary-color); 

     border-top-left-radius: 0px;

     border-bottom-left-radius: 0px;

}

  

.highlighted_timeline_block {

   display:flex;

   justify-content: right;

}





.highlighted_timeline_block p {

    align-items: center;

    font-family: var(--secondary-font);

    margin-top:30px;

    font-size:18px;

    margin-right:20px;

}



.highlighted_timeline_block svg {

    transform: rotate(90deg);

}



.timeline_icon {

    width:45px!important;

    margin-top:21px!important;

    height:45px!important;

}



.timeline_icon:hover {

    opacity: 1!important;

    cursor:default!important;

}





/* Fix the circle for containers on the right side */



.right::after {

 left: -13px;

}

  

/* The actual content */



.timeline_content {

    background-color: #f2f2f2;

    position: relative;

    border-radius: 6px;

    color: black;

}



.timeline_content .content_text_block {

      margin-top:15px;

      margin-bottom: 0px;

}



.timeline_content .content_text_block:last-child {

     margin-bottom:0px!important;

  }



@media screen and (max-width:600px) {



    .timeline {

        margin-top:25px;

    }



    .timeline_content {

        padding: 20px 15px;

    }

     

}

  



.timeline_container {

    position: relative;

}



.timeline_date {

      width:25%;

      float:left;

      position: relative;

      padding-right: 50px;

}



.timeline_content_container {

    float:right;

    width:75%;

}





/* The circles on the timeline */



.timeline_date::after {

    content: '';

    position: absolute;

    width: 20px;

    height: 20px;

    right: -8px;

    background-color: var(--primary-color);

    border: 3px solid var(--primary-color);

    margin-top:0%;

    border-radius: 50%;

    z-index: 1;

}



.timeline_content_container::after {

    content: '';

    position: absolute;

    width: 2px;

    background-color: var(--primary-color);

    top: 0;

    bottom: 0;

    left: 0px;

    margin-left: -3px;

}



.timeline_content_container {

      background-color:transparent;

      padding-left:50px;

      position: relative;

}





/* Media queries - Responsive timeline on screens less than 600px wide */



@media screen and (max-width: 670px) {

    .timeline_content_container .content_text_block{

        margin-bottom:0px;

        padding:20px;

    }



    .timeline_content_container{

        width:100%;

        padding-left:20px;

    }



    .timeline_content_container::after{

        margin-left:0px;



    }



    .timeline_date{   

        width:100%;

        margin-bottom:40px;

        margin-top:40px;

    }



    .timeline_date::after{

        right:auto;

        left:-9px;

        margin-top:15%;

    }

}





/* 

==================



FAQs



page with questions and answers in an accordion



=========================

*/





/* filter section */



.filter_container input {

    padding:18px 30px;

    width: 340px;

    box-shadow:var(--box-shadow);

    -webkit-box-shadow:var(--box-shadow);

    border:0px;

    margin-top:25px;

}



.filter_container button {

    margin-left:5px;

    background-color:var(--primary-color);

    border:0px;

}



.filter_container button:hover {

    cursor:pointer;

    background-color:var(--purple);

    border:0px;



}





.filter_no_matches_result {

    margin-top:20px;

    display:none;

}





.accordion {

    margin-top: 50px;

    margin-bottom:150px;

    box-shadow:var(--box-shadow);

    -webkit-box-shadow:var(--box-shadow);

    border-radius: 10px;

}



.mb-0 {

    font-size: inherit!important;

    

   

}



.card {

    background-color:transparent;

    border: 0px;

}



.card-body {

    background-color:var(--highlight-color);

    padding: 30px;

    border-left:3px solid var(--primary-color);

}





.card-body .content_text_block {

    margin-bottom:0px;

    margin-top:0px;

}



.card-header {

    background-color:transparent;

    margin-top:10px;

    position: relative;

    z-index: 2;

   

}



.mb-0 button {

    

    padding: 0px;

    width:100%;

    font-weight:bold;

    white-space: normal;   

    text-transform: initial; 

    border:0;

    

}



.mb-0 button .faq-button p{

   

    margin-bottom: 0px;

    padding-left: 30px;

    text-align:left;

    margin-left:0;

    color:var(--primary-color) !important;

   

}

.mb-0 button .faq-button .faq-icon {

    text-align: right;

}





.mb-0 button .faq-button .faq-icon i {

    border-radius:50%;

    padding:6px 7px;

    border:2px solid var(--primary-color);

    font-size:10px;

}



.mb-0 button .faq-button .faq-icon i::before {

    color:var(--primary-color);

}



.mb-0 button:hover, .mb-0 button:hover .faq-button .faq-icon i::before {

    color:var(--secondary-color)!important;

    border:0px;

}







.minus-button{

    display: none;

}

.mb-0 button .faq-button img{

     

    width:30px;

    

}



.mb-0 button:hover {

    color:var(--button-hover-color);

    text-decoration: none;

}

.hover-icon-color{

    border:2px solid var(--button-hover-color) !important;

}

.leave-icon-color{

    border:2px solid var(--primary-color) !important;

}





.btn-link {

    color:white;

    transition:none!important;

}



.btn-link i {

    margin-right:25px;

}



.btn-link:hover {

    color:white;

}





.btn-link:hover, .btn-link:active, .btn-link:visited, .btn-link:focus {



    color:white;

    text-decoration:none!important;



}



.faq-button:focus, .faq-button:visited, .faq-button:active {

    color:var(--primary-color)!important;

}







@media screen and (max-width:768px){

 

    .mb-0 button .faq-button p{

        text-align: center;

        padding-left:0px;

       

    }

    .mb-0 button .faq-button .faq-icon{

        text-align: center;

    }

    .mb-0 button .faq-button i{

        margin-top:0px;

    }



    .btn-link i {

        margin-left:0px;

        margin-right:0px;

    }

}



@media screen and (max-width:630px) {



    .filter_container input {

        width:100%;

    }



    .filter_container button {

        margin-top:15px;

    }



}



@media screen and (max-width:575px) {



    .mb-0 button .faq-button i{

        margin-top:5px;

    }



}



@media screen and (max-width:375px) {



   



    .card-header {

        padding: 10px;

    }



}





/* 

==================



DOCUMENT LIBRARY



===================

*/

.documents_container {

    width:100%;

}





.document_group {

    padding-top:45px;

    padding-bottom:45px;

}



.document_group h2 {

    margin-bottom:30px;

}





.document_link_container {

    width: 100%;

    display: inline-table;

    margin-bottom:25px;

    box-shadow:var(--box-shadow);

    -webkit-box-shadow:var(--box-shadow);

    border-radius: 10px;

}



.document_link_container:hover{

    border-left:5px solid var(--primary-color);

    background-color:var(--highlight-color);

}

.document_name{

    color:var(--primary-color);

    text-align: left;

    

}

.document_name h6 {

    margin-bottom: 0px;

    padding-left:50px;

}



.document_name, .document_file_size , .document_date {



    border-right:1px solid rgba(26, 26, 26, 0.2);

    padding:15px;

}



.document_name {

    width:35%;

}



.document_file_size {

    width:20%;

}



.document_date {

    width:20%;

}



.download_icon {

    width:25%;

    padding:15px;

}



.download_icon img {

    float: right;

    padding-right:50px;

}



@media screen and (max-width:768px){

    .document_file_size , .document_date{

        display: none;

    }

    .document_name{

        width:70%;  

    }



    .download_icon{

        width:30%;   

    }



    .document_name h6 {

        padding-left:0px;

    }

    .download_icon img {

        padding-right: 10px;

    }

}





/* 

==================



CONTACT



Page with a native contact form



=========

================

*/

.wpcf7-form{

    box-shadow: var(--faqs-box-shadow);

    -webkit-box-shadow: var(--box-shadow);

    padding:40px;

    margin-top:60px;

    padding-top:80px;

    margin-bottom:60px;

}



.wpcf7-form-control-wrap {

    width:100%;

    display:block;

}



.wpcf7-form-control {

    width:80%;

    display:block;

    padding:15px;

}



.wpcf7-form p label {

    width:80%;

    display:block;

}

.wpcf7-form p label:first-of-type {

 margin-top:50px;

}

.wpcf7-form p label, .wpcf7-form-control{

    display:inline !important;

   

}

.wpcf7-form p label span input, .wpcf7-form p label span textarea {

    width:100%;

    display:block;

    padding:15px;

    background-color:var(--highlight-color);

    border:0px;

    



    

}



.wpcf7-form p label {

    margin-top:35px;

}



.wpcf7-form-control-wrap {

    margin-top:10px;

}





.wpcf7-submit {

    max-width: 160px;

    margin-top: 35px;

    margin: auto;

    width: 100%;

    border: 0px;

    margin-bottom: 25px;

    text-transform: uppercase;

    padding:20px 30px;

    font-weight:500;

    background-color: var(--primary-color);

    display:inline-block;
    color:white;

    




}



.wpcf7-submit:hover {

    background-color: var(--purple);

   cursor:pointer;

}



.wpcf7-spinner {

	text-align:center!important;

	margin:auto!important;

	display: block!important;

}



.wpcf7 form .wpcf7-response-output {

    text-align: center;

}



.contact_detail_section_icon {

    padding: 5px;

    border-radius: 10px;

    background-color: #f2f2f2;

    margin: auto;

    margin: auto;

    text-align: center;

    width: 40px;

    box-shadow: 0px 5px 6px 2px #ebe6e6;

}



.contact_detail_section_icon img {

    width:100%;

}



.contact_detail_section p {

    font-weight: 500;

    text-align: center;

    margin-top:10px;

}



.wpcf7-not-valid-tip {

    margin-top:5px;

    

}



.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {

    border-color:red;

}



@media screen and (max-width:991px) {

    .wpcf7-form p label span input, .wpcf7-form p label span textarea {

        border:2px solid var(--primary-color);

    }

}





@media screen and (max-width:750px) {

    .wpcf7-form {

        padding-left:15px;

        padding-right:15px;

    }



    .wpcf7-form p label span input, .wpcf7-form p label span textarea {

        width:100%;

    }

}





/* 

==================



BLOG / NEWS PAGE



===================

*/



.pagination {

    margin-top:25px;

}





.pagination span {

    display:none;

}



.pagination li {

    margin-right:15px;

    list-style-type: none!important;

}



.page-link {

  color: var(--primary-color);

  background-color: transparent;

  border-color: none;

  border: 2px solid var(--primary-color);

  text-align: center;

}



.page-link:hover {

    color: #fff;

    background-color: var(--primary-color);

    border: 2px solid var(--primary-color);

}



.page-item.active .page-link {

    color: #fff;

    background-color: var(--primary-color);

    border-color: none;

    border: 2px solid var(--primary-color);

}



.page-item.active .page-link:hover {

    color:#fff;

}



.page-item:last-child .page-link {

    border-radius: initial;

}



/* post page */



.post_page {

    margin-top:65px;

}



/* archive page for blog posts and Exhibition */



.post_archive {

    margin-top:50px;

}