:root {
  --lightgrey: #efefef;
  --darkblue: rgb(0 120 167);
  --lightblue: rgb(108 199 212);
  --lightpurple: #803282;

  --topmargin: calc(100vw * 0.04);
  --padding: calc(100vw * 0.06); 

    --h1: 160%;
    --h2: 130%;
    --h3: 120%;
    --p: 110%;
}



* {
    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-weight: 300;
    font-family: Farro;
    font-size: 100%;
    line-height: 1.2;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
	margin-top: 150px;
}

a {
    color: #000000;
    text-decoration: none;
}

ul, ol {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

li {
    vertical-align: top;
}

h1, h2, h3, h4, h5, h6, .titletxt {
    padding: 0px;
    margin: 0px;
    font-size: 100%;
    font-weight: 700;
    color: #000000;
    font-family: Farro;
}

fieldset {
    padding: 0px;
    margin: 0px;
    border: none;
}

input, textarea, select {
    font-size: 90%;
    padding: 5px;
    color: #000000;
    box-sizing: border-box;
    font-family: Farro;
    border-radius: 5px;
    border: 1px solid lightgray;
    
}

input[type=text], input[type=password] {
    height: 40px;
    /* width: 100%; */
}

textarea { 
    width: 100%; 
}

input[type=button], input[type=submit], button, a.button {
    cursor: pointer;
    padding: 10px 20px;
    border: 0px;
    font-size: 125%;
    color: white;
    background-color: var(--darkblue);
    transition: all 0.2s ease-in;
}

input[type=button]:hover, input[type=submit]:hover, button:hover, a.button:hover {
  background-color: var(--lightblue); 
}
input[type=text]:focus, textarea:focus { outline: var(--darkblue) solid 2px;}

select {
    height: 40px;
    padding-right: 30px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: right 10px center;
}

p {
    padding: 0px 0px 20px 0px;
    margin: 0px;
    font-family: Farro;
    font-weight: 300;
    font-size: var(--p);
	line-height: 1.5em;
}

strong {
    font-weight: 600;
    font-family: Farro;
}

table {
    border-spacing: 0px;
}

td, th {
    padding: 0px;
    text-align: left;
    vertical-align: top;
}
.anchor {position: absolute; margin-top: -290px;}
.hidden {
    display: none;
}

.spacer {
    clear: both;
    height: 0px;
    display: none;
}

table {
    border-spacing: 0px;
}

td, th {
    padding: 0px;
    /* width:  20%; */
}

//input[type=checkbox] {opacity: 0;-moz-opacity: 0;cursor: pointer;margin: 2px 0px 0px 0px;appearance: none;-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;width: 30px;/* height: 30px; */position: absolute;/* margin-top: -57px; */}
 
input[type=checkbox] + label:before { content: '\f0c8'; color:#fff; display: inline-block; margin: 0px 0px 0px 0px; }
input[type=checkbox]:checked + label:before {  content: '\f00c'; color: var(--darkblue); background-color:#fff; }

#gdpr-cookie-message { background-color: var(--lightblue); }
#gdpr-cookie-message h4, #gdpr-cookie-message p { color:white;}
#gdpr-cookie-message button { background-color: var(--darkblue); color:white; }
#gdpr-cookie-advanced { background-color: white !important; color:var(--lightblue) !important; }

.message { color: red; }
.layoutheader { position: fixed; top: 0;  background-color: white; z-index: 99999; height: 125px; width: 100%; transition: all 0.3s ease-in;}
.layoutheader_inner {max-width: 1440px; margin: 10px auto 0px auto;  }
.layoutheader .logo { float: left; } 
.layoutheader img { width: auto; height: 110px; transition: all 0.3s ease-in;} 
.layoutheader .right {float:right; }
.layoutheader .social { transition: all 0.3s ease-in; opacity: 1; }
.layoutheader .social li {float:left; width: auto; margin-left: 10px;}
.layoutheader .social i:before { font-size: 200%; color: var(--darkblue); transition: all 0.2s ease-in;}
.layoutheader .social a:hover i:before { color: var(--lightblue); }
.layoutheader .social { float: right; }

.scroll .layoutheader .social { opacity: 0}
.scroll .layoutheader { height: 100px; padding-bottom: 50px;  box-shadow: 0 0 5px #dadada;  }
.scroll .layoutheader img { width: auto; height: 85px;} 


.layoutheader .menu {margin: 20px 0px 0px 0px;clear: both;float: right;transition: all 0.3s ease-in;}
.layoutheader .menu li { font-size: 120%; float: left; padding: 20px 0px 0px 30px;  }
.layoutheader .menu li a {color: var(--darkblue);transition: all 0.40s ease-in;}
.layoutheader .menu li a:hover { border-bottom: 2px solid var(--darkblue); padding-bottom: 3px; font-weight: bold; }
.layoutheader:after { overflow:auto; }
.scroll .layoutheader .menu { margin: 0px 20px 0px 0px;  }
.layoutheader #menu4-7, .layoutheader #menu4-8 { display: none; }

.layoutfooter::before { clear: both; display: block; content:''; border:1px solid #dadada;  box-shadow: 0 0 2px #dadada; }
.layoutfooter .layoutfooter_inner {max-width: 1440px;  margin: 30px auto 60px auto;}
.layoutfooter .menu {width: 20%;float: left; min-width: 250px;}
.layoutfooter .menu li { font-size: 100%;  padding: 10px 0px 0px 30px;   }
.layoutfooter .menu li a { color: var(--darkblue); }
.layoutfooter .logo { float: left; }
.layoutfooter .logo  img { width: auto; height: 110px;}
.layoutfooter .social { float: right; }
.layoutfooter .social li {float:left; width: auto; margin-left: 10px;}
.layoutfooter .social i:before { font-size: 200%; color: var(--darkblue); transition: all 0.2s ease-in;}
.layoutfooter .social a:hover i:before { color: var(--lightblue); }
.layoutfooter #menu4-1 { display: none; }

.layoutcredits {clear: both; max-width: 1440px; margin: 20px auto;  text-align:right;font-size: 80%;}

.layoutmiddle { clear: both; }

.banner {background-color: var(--darkblue);height: 600px;background-position: right bottom;/* background-size: 50%; */}
.banner .imageleft { float: left;width: 50%; height: 600px; background-size: cover; }
.banner .content {  float: left; width: 50%; height: 600px; color: white; padding: 40px 0px 0px;}
.banner .content h3 {color:white; text-transform: uppercase; font-family: "Lilita One"; font-size: 400%; }
.banner .content h3:first-of-type { margin: 70px 0px 0px 80px; background-image: url(/images/DBtWiy895w35OABVvjqZ0e800z.png); background-size: 370px; background-position: left bottom; padding-bottom: 30px; width:100%; max-width: 370px;  }
.banner .content h3:last-of-type { margin: 70px 0px 0px 320px;  background-image: url(/images/qRPxB6GD3kzgD2GplRGR0e801o.png); background-size: 250px; background-position: left bottom; padding-bottom: 30px; width:100%;  max-width: 250px;  }

.home .aboutus { min-height: 600px; background-color: var(--lightgrey); padding: var(--padding) 0px var(--padding) 0px;  background-position: left bottom; }
.home .aboutus .titletxt {font-family: Farro;font-size: 400%;text-align: center;color: var(--darkblue);background-image: url(/images/cvs1OOnJ4idae5GE4pfL0e801a.png);background-size: 290px;background-position: right bottom;max-width: 290px;margin: 0px auto;padding-bottom: 30px;}
.home .aboutus .content p:last-of-type { margin: var(--topmargin) auto 0px auto; width: 50%; text-align: center; font-size: 200%; line-height: 1.8em; }

.home .volunteer { min-height: 600px; padding: var(--padding) 0px var(--padding) 0px; }
.home .volunteer>.titletxt { font-family: Farro; font-size: 400%; text-align: center; color: white; background-image: url(/images/qRPxB6GD3kzgD2GplRGR0e801o.png);  background-size: 350px; background-position: right bottom; max-width: 320px;  margin: 0px auto; padding-bottom: 30px;  }
.home .volunteer .items { display: flex;  margin: var(--topmargin) auto 0px auto;  max-width:1440px; }
.home .volunteer .items .titletxt { margin: 0px 40px; background-color: white;  font-size: 130%; font-family:"Lilita One"; text-transform: uppercase; padding: 10px 10px 10px 10px; color: black; }
.home .volunteer .util_textbox  { width: 33.3%; background-color: var(--lightgrey); margin: 0px 40px; height: 400px; transition: all 0.3s ease-in;}
.home .volunteer .util_textbox .content { padding: 20px 50px; line-height: 1.8em; }
.home .volunteer .util_textbox:hover { transform: scale(1.1); }

.home .volunteer .items  { counter-reset: dots; }
.home .volunteer .introduction { text-align: center; max-width: 1200px; margin: 60px auto; padding: 40px; background-color: var(--lightgrey); }
.home .introduction h3 { font-size: 250%; margin: 40px 0px;   font-family: 'lilita One'; text-transform: uppercase; color: black;} 
.home .volunteer .util_textbox::before { counter-increment: dots; content: counter(dots); font-size: 400%; position:relative; top: -40px; left: 20px; }


.home .volunteer { position: relative; }
.home .volunteer::before {  content: ' '; display: block; position: absolute; left: 0; top: 0;  width: 100%;  height: 100%;  opacity: 0.6;  background-image: url(/images/Wzi3k2DM8U5seScp6pXE4g02yo.jpg); background-size: cover;}
.home .items, .home .titletxt, .home .volunteer .introduction {  position: relative;}


.home .contactus { background-color: var(--lightgrey);   padding: var(--padding) 0px var(--padding) 0px; }
.home .contactus .titletxt { padding-bottom:30px; font-family: Farro;font-size: 400%;text-align: center;color: var(--darkblue);background-image: url(/images/cvs1OOnJ4idae5GE4pfL0e801a.png);background-size: 350px;background-position: right bottom;max-width: 350px;margin: 0px auto;}
.home .contactus .items { max-width:1400px;  margin: var(--topmargin) auto 0px auto; }
.home .contactus .util_image { float: left; width: 50%; padding: 0px; }
.home .contactus .surv_standard  { float: left; width: 40%;  margin: 0px 0px 0px 0px;}
.home .contactus .surv_standard input[type=text]  { margin: 10px 0px; width: 100%;}
.home .contactus::after { content:''; display:table; clear: both; }
.home .contactus .confirm {background-color: var(--lightblue); color: white; padding: 10px; border-radius: 5px;}
.home .contactus .confirm p {padding: 0px;}
.home .contactus .buttons { padding: 10px 0px; }

.home .events p { padding: 0px;}
.home .events .anchor { margin-top: -20px;}
.event_list { padding: var(--padding) 0px 0px 0px;  background-image: url(/images/4BDiLub2ypq0pmzJXEjW0p00lk.png), url(/images/KToK4QTRNPfoB1l5fXoO0p00jy.png); background-position: top left, bottom right; background-size: 30vw auto}
.event_list .titletxt { padding-bottom:50px; font-family: Farro;font-size: 400%;text-align: center;color: var(--darkblue);background-image: url(/images/cvs1OOnJ4idae5GE4pfL0e801a.png);background-size: 490px;background-position: right bottom;max-width: 550px;margin: 0px auto;}
.event_list .toplinks {max-width: 1200px; margin: 0px auto;  width: auto; text-align:right;}
.event_list .toplinks a {text-decoration: none !important;}
.event_list .toplinks a::after { content: '\2192';color: var(--darkblue); font-size: 160%; display: inline-block; margin: 0px 20px; display:inline; vertical-align:middle; }  
.event_list ul {max-width: 1200px; margin: var(--topmargin) auto 0px auto !important;}
.event_list li { margin: 0px 0px 0px 0px; line-height: 1.5em; list-style-type:none !important;  }
.event_list li:hover .bgimage {  transform: scale(1.1);}
.event_list li .bgimage  {width: 500px;height: 500px; margin: 0px 0px 0px 100px; transition: all 0.2s ease-in; background-size:cover;}
.event_list li .name {position: relative;left: 50%; top: -175px; padding: 50px 50px 0px 50px; margin: 0px 0px 0px -100px;width: 500px;background-color:var(--lightblue);color:white;font-size: 130%;font-weight: 600; font-family:"Lilita One"}
.event_list li .date, .event_list li  .venue, .event_list li  .time, .event_list li  .description, li .EvntExtAdditionalPriceText { top: -175px; padding: 10px 50px 0px 50px; color:white; position: relative; left: 50%; margin: 0px 0px 0px -100px; width: 500px; background-color: var(--lightblue) }
.event_list li .description { padding-bottom: 50px; }
.event_list .description ul { margin: 10px auto 0px auto !important;}
.event_list li .EvntExtAdditionalPriceText {text-transform:uppercase; font-weight: 900;}
.event_list li .description li {list-style-type: disc !important;}
.event_list a { background-color: white; color:var(--lightblue); padding: 10px 15px; border-radius: 5px; display: inline-block; text-align: center; margin-top: 20px; }
.event_list a:hover { color: var(--darkblue); text-decoration:none; }


.home .partnership { margin: var(--topmargin) 0px; }
.home .partnership .titletxt { padding-bottom:50px; font-family: "Lilita One";font-size: 300%;text-align: center;color: var(--darkblue); margin: 0px auto; }
.home .partnership ul { max-width: 1400px; margin: 0px auto;}
.home .partnership li { float: left; width:33.3%; text-align: center; }
.home .partnership li img { max-width: 100%; height: auto;  }
.home .partnership::after { content:''; display:table; clear: both; width: 100%; }

.home li { list-style-type:none !important; }

.std_contentpage {max-width: 1200px; margin: var(--topmargin) auto var(--topmargin) auto; } 
.std_contentpage .title { font-size: 300%; text-align: center;  margin: 0px 0px var(--topmargin) 0px; font-family: "Lilita one"; color: var(--darkblue); } 
.std_contentpage h1 { font-size: 220%; padding: 20px 0px;  }
.std_contentpage h2 { font-size: 180%; padding: 20px 0px; color: var(--darkblue); font-weight: bold; }
.std_contentpage h3 { font-size: 150%; padding: 20px 0px; color: var(--darkblue);}
.std_contentpage ul { margin: 20px;}
.std_contentpage li:not(.checkbox) { margin-bottom: 10px; line-height: 1.8em; list-style-type:disc;}
.std_contentpage a { color: var(--darkblue); }
.std_contentpage a:hover { text-decoration: underline; }

.home {max-width: 100% !important; margin: 0px;}

@media( max-width: 1600px ) {

  .banner {font-size: 90%;}
  
}

@media( max-width: 1440px ) {
  .layoutheader_inner { max-width: 100%; margin: 10px 20px 0px 20px; }
  .banner {height: auto;}
  .banner h3:last-of-type, .banner h3:first-of-type {  width: 100%; text-align:center; margin: 40px 0px !important; padding-bottom: 30px; text-align:center; max-width: 100% !important; background-position: center bottom !important;}
  .banner .imageleft { height: 400px; float: none; width:100%; }
  .banner .content { float: none; width:100%;  display:block; height: auto; text-align:center; padding: 50px; }
  .home .contactus {max-width: 100%; padding-left: 20px; }
  .layoutheader .menu {   margin: 20px 20px 0px 0px; }
 .layoutheader .social { margin-right: 10px;}
}



@media( max-width: 1200px ) {
  .home .volunteer::before {background-size: cover; background-position: center center; }
  .home .volunteer .items {  display: block; width: 100%; max-width: 100%;  max-width:50%;   }
  .home .volunteer .util_textbox {   width:100%; margin: 60px 0px;  box-sizing: border-box; height: auto;min-height: 300px; }
  .home .volunteer .introduction { max-width: 100%; margin: 60px 50px; }
  
 
  

  .contactus  { padding: 60px 50px !important; }
  .contactus .util_image {display: none; }
  .contactus .surv_standard { width: 100% !important;   }

  .std_contentpage .pagecontent_inner { margin: var(--topmargin) 50px; }
  
}

@media( max-width: 1000px ) {
  .event_list ul {padding: 0px; margin: 50px;}
  .event_list li { margin: 0px 0px 50px 0px; }
  .event_list li .bgimage {height: 50vh; background-size: cover; }
  .event_list li div { width: 100% !important; margin: 0px !important; position:relative; top: 0px !important; left: unset !important; }
  .event_list { padding: 100px 0px 0px 0px; background-image: unset;}
  .home .partnership li { width: 100%; margin-top: 20px;}
  .home .partnership li img { width: auto; max-height: 100px;}
  .home .contactus { padding: 50px !important;}
}


@media( max-width: 800px ) {
  .aboutus, .volunteer, .contactus, .event_list, .partnership { padding: 60px 5px !important; height: auto; min-height:auto !important; background-size: 50%;}
  .aboutus .content p:last-of-type { width: 90% !important; font-size: 120% !important }
  .home .volunteer .items {   max-width:80%;   }
  .home .volunteer .introduction { max-width: 100%; margin: 60px 20px; padding: 20px; }
  .home .volunteer .introduction h3 {font-size: 160%; margin: 20px 0px;}
  .home .partnership li {  padding: 0px 20px;}
  .home .volunteer .util_textbox:hover { transform: scale(1); }
  .home .contactus { padding: 20px !important;}
}

.layoutheader .toggle, .layoutfooter .toggle {display: none;}  

@media( max-width: 1200px ) {
  .layoutheader {width: 100%; height: 90px;}
  .layoutheader .layoutheader_inner {margin: 20px 20px;}
  .layoutheader .social { display: none; } 
  .layoutheader img { width: auto; height: 85px;} 
  .layoutheader .toggle { display: block; } 
  .layoutheader .toggle { position:absolute;right:0px;cursor:pointer; top: 30px;}
  .layoutheader .toggleon ul {display: block; position: absolute; top: 90px; right: 0px; height: calc(100vh - 70px); width: 100%; background-color: var(--darkblue); opacity: 0.9; z-index: 50; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column;} 
  .layoutheader .toggleon li { padding: 20px 0px 10px 20px; float: none;} 
  .layoutheader .toggleon li a {color:white; font-size: 150%; margin: 0px 0px; display: block;}
  .layoutheader .toggleoff ul { display:none; }
  .layoutheader .toggle { width: 50px; height: 50px;}
  .layoutheader .toggle  i:before { font-size: 200%; color: var(--darkblue); }

  .layoutheader .menu li a:hover { border-bottom: none; padding-bottom: 0px; font-weight: normal; }

  .layoutfooter .layoutfooter_inner {margin: 20px 20px;}
  .layoutcredits {margin: 0px 20px;}
  .layoutfooter .toggle {display: none;} 
  
}

@media( max-width: 600px ) {
  .banner { background-size: 60%; }
  .banner .imageleft {height: 300px;}
  .banner h3:last-of-type, .banner h3:first-of-type {   text-align:center; margin: 0px 0px !important; background-image: none !important;}
  .banner .content { font-size: 70%;  width: 100%; margin: 0px; }
  .home .contactus {padding: 60px 20px !important;}
  .home .aboutus .titletxt, .home .contactus>.titletxt, .home .volunteer>.titletxt, .home .event_list .titletxt, .home .partnership .titletxt  { max-width: 100%;  width: 100%; font-size: 350%; background-image: none; }
  .home .partnership .titletxt { font-size: 230%; }


  .event_list ul { margin: 50px 20px;}
  .event_list li .bgimage { height: 40vh; }
  .event_list li:hover .bgimage { transform: scale(1.0); }
  .event_list li div { width: 100% !important; margin: 0px !important; position:relative; top: 0px !important; left: unset !important; padding: 10px 20px 0px 20px!important;}
  .event_list li div.name { padding: 20px 20px 10px 20px !important;}
  .event_list li div.description { padding: 10px 20px 20px 20px !important;}


  .std_contentpage .pagecontent_inner { margin: var(--topmargin) 20px; }
  
}

.page .surv_standard { background-color: var(--lightgrey);padding: 50px;border-radius: 5px; }
.page .surv_standard .field { display: block; clear: both; padding: 20px 0px;}
.page .surv_standard .field_text label, .page .surv_standard .field_grid label, .page .surv_standard .field_date label, .page .surv_standard .field_select label  {clear: both;float: left;width: 40%;font-weight: bold;line-height: 40px;}
.page .surv_standard .field input {float: left; width: 50%; margin: 5px 0px;}
.page .surv_standard .description { clear: left; font-size: 85%;  }
.page .surv_standard table { width: 90%; }
.page .surv_standard tr { height: 50px;  }
.page .surv_standard .field_radio label, .page .surv_standard .field_area label, .page .surv_standard .field_multiselect label, .page .surv_standard .field_select label, .page .surv_standard .field_date label { font-weight: bold; }
.page .surv_standard .field_radio input {width: 10%;}
.page .surv_standard .field_radio .radio label { width: auto; float: left; width: 30%;   }
.page .field_grid label { max-width: 30px; }
.page .surv_standard .field input[type=checkbox] { width: 30px; }

.page .surv_standard .field_section { border-bottom: 1px solid var(--darkblue)}
.page .surv_standard .field_section .label {font-size: 120%; color: var(--darkblue); }
.page .surv_standard .field_group { border: 1px solid darkgray; padding: 10px 10px 40px 10px; margin: 30px 0px 30px 0px; box-sizing:border-box;  }
.page .surv_standard .field_group>.label {color:var(--d);}
.page .surv_standard .field_readonly>.label {color: var(--darkblue); }
.page .surv_standard .field_readonly .description {padding-top: 10px;}
.page .surv_standard .field_radio label { width: 100% !important; padding: 05px;}
.page .surv_standard ul { width: 50%; margin: 0px  0px 0px 30px !important;}
.page .surv_standard .buttons {margin: 20px 0px;}


.page .content .pagecontent_inner .flex { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 60px 0px;}
.page .flex ul { width: 40%; margin: 0px 5%;}
.page .flex ul li { margin: 20px 0px; list-style-type: none; }
.page .flex ul li:not(.checkbox):before { clear:left; float:left;  content: '\2713';   color: var(--darkblue); font-size: 260%; margin: 0px 0px 0px -40px; } 
.page .flex ul li h4 { font-family:  sans-serif; text-transform: uppercase; color: var(--darkblue); }
.page .flex ul li { clear:left; float:left;  } 
.page ul .checkbox {clear: left; padding: 5px 0px;}

.page .event_list {background: none; margin: 0px !important;}
.page .event_list ul { margin: 0px auto !important; width: 100%;}
.page .event_list li:before { content: '';  }

.page .image img { width: 100%; height: auto; padding: 50px; }
.util_embeddedpdf { width: 100%; height: 100%;  padding: 50px; overflow: auto; }
embed {width: 100%; height: 100%;}

@media( max-width: 1200px ) {
  .page .surv_standard { padding: 20px; }
  .page .surv_standard label { width: 100% !important;  }
  .page .surv_standard .input { clear: left;  width: 100%;  }
  .page .surv_standard .field_text input {   width: 100% !important;  }
  .page .surv_standard table { width: 100% !important;  }
  .page ul { width: 100%; margin: 0px 10%;}
  .page { margin: var(--topmargin) 20px;}
  .field_area textbox {max-width: 100%; }
  .page .image img { width: 100%; height: auto; }
  .page .image img { width: 100%; height: auto; padding: 20px; }
  .util_embeddedpdf {  padding: 20px; }
}