@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url('https://fonts.googleapis.com/css?family=PT+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit');


/** General Theme Stylings **/


/** These colors should match the variables below.
    They are listed here at the top to make it easy
    to copy from the variable below to this here.
    They are meant to add the hex value in the middle
    of the branding boxes.
    Add a font-color as needed for contrast.
**/


             .brand-box-1::after {content:'#F37362';color:#ffffff;}
             .brand-box-2::after {content:'#FFD27A';color:#ffffff;}
             .brand-box-3::after {content:'#F9A86F';color:#ffffff;}
             .brand-box-4::after {content:'#9DD4B2';color:#ffffff;}
             .brand-box-5::after {content:'#6792CC';color:#ffffff;}
             .brand-box-6::after {content:'#343642';}

.dark-region .brand-box-1::after {content:'#F37362';}
.dark-region .brand-box-2::after {content:'#FFD27A';}
.dark-region .brand-box-3::after {content:'#F9A86F';}
.dark-region .brand-box-4::after {content:'#9DD4B2';}
.dark-region .brand-box-5::after {content:'#6792CC';}
.dark-region .brand-box-6::after {content:'#FFD27A';color:#000000;}

:root {
  
  /* brand colors are for reference **/
  
     --brand-color-1: #3A78BE; 
     --brand-color-2: #284593;
     --brand-color-3: #53B6FE;
     --brand-color-4: #231F21;
     --brand-color-5: #A7A9AC;
     --brand-color-6: #FFFFFF;
  
  --dr-brand-color-1: #3A78BE;
  --dr-brand-color-2: #284593;
  --dr-brand-color-3: #53B6FE;
  --dr-brand-color-4: #231F21;
  --dr-brand-color-5: #A7A9AC;
  --dr-brand-color-6: #ffffff;
  
  /* magic accordion */
  --mag-acc-color-1: #CDCDCD;
  --mag-acc-color-2: #FFFFFF;
  --mag-acc-font-1: #231F21;
  --mag-acc-font-2: #231F21;
  
  --mag-acc-dr-color-1: #333333;
  --mag-acc-dr-color-2: #666666;
  --mag-acc-dr-font-1: #FFFFFF;
  --mag-acc-dr-font-2: #FFFFFF;
  
  /* region backgrounds */
  
  --body-background:#53B6FE; /* only visible if screen is wider than 1800px */
  --page-background:#ffffff; /* generally should stay white */
  --dr-background:#231F21; /* base color when .dark-region or .transposed is applied */
  
  --help-wrapper:transparent;
  --topper-wrapper:transparent;
  --header-banner-wrapper:transparent;
  --header-wrapper:transparent;
  --banner-wrapper:transparent;
  --content-area-wrapper:transparent;
  --preface-wrapper:transparent;
  --content-top-wrapper:transparent;
  --content-wrapper:transparent;
  --sidebar:transparent;
  --content-bottom-wrapper:transparent;
  --postscript-wrapper:transparent;
  --postscript-wrapper-dark-region:#333333;
  --pre-footer-wrapper:transparent;
  --footer-wrapper:transparent;
  
  /* main menu * mobile menu */
  —menu-width:220px;
  --menu-link-d:#000000; /* desktop main level link:hover background color */
  --menu-link-d1:#000000; /* desktop link:hover background color */
  --menu-link-m:#000000; /* mobile link background color */ 
  --menu-bg-d:#A7A9AC;  /* background on main menu desktop */
  --menu-bg-d1:#231F20; /* background on main menu desktop when shrunk (nav affix)*/
  --menu-bg-d2:#242021; /* ul under desktop expanded menu item */
  --menu-bg-m:#333333;  /* background on mobile pop out menu */
  --menu-bg-m2:#242021; /* ul mobile under expanded menu item */
  
  --menu-fontcolor-d:#231F21; /* link color on main level menu desktop */
  --menu-fontcolor-d1:#ffffff; /* link color on all links below main level menu desktop */
  --menu-fontcolor-m:#ffffff; /* link color on all mobile menu links */
  
  --menu-width:310px; /* width of ul desktop below first level expanded menu item */   
    
  /* fonts & links */
    
  --font-color: #231F21; /* font color */
  --dr-font-color: #FFFFFF; /* .dark-region font color */
  
  --link-color-1: #3A78BE; /* a */
  --link-color-2: #2797d7; /* a:hover, a:visited, a:active */
  --link-color-3: #4fbfff; /* a.secondary */
  --link-color-4: #84d2ff; /* a.secondary:hover, a.secondary:visited, a.secondary:active */
  
  --dr-link-color-1:#3A78BE; /* .dark-region a */
  --dr-link-color-2:#2797d7; /* .dark-region a:hover, .dark-region a:visited, .dark-region a:active */
  --dr-link-color-3:#4fbfff; /* .dark-region a.secondary */
  --dr-link-color-4:#84d2ff; /* .dark-region a.secondary:hover, .dark-region a.secondary:visited, .dark-region a.secondary:active */
  
  /* buttons */
  
  --button-primary:#3A78BE;                         /* background color */
  --button-primary-hover:#2797D7;                   /* background color when hovering */
  --button-primary-font:#ffffff;                    /* font color */
  --button-primary-font-hover:#ffffff !important;              /* font color when hovering */
  
  --button-secondary:#231f20;                       /* background color */
  --button-secondary-hover:#000000;                 /* background color when hovering */
  --button-secondary-font:#ffffff;                  /* font color */
  --button-secondary-font-hover:#ffffff;            /* font color when hovering */
                                                     
  --button-transposed:#ffffff;                      /* background color */
  --button-transposed-hover:#3A78BE;                /* background color when hovering */
  --button-transposed-font:#3A78BE;                 /* font color */
  --button-transposed-font-hover:#ffffff;           /* font color when hovering */
                                                    
  --button-secondary-transposed:#DDDDDD;            /* background color */
  --button-secondary-transposed-hover:#231f20;      /* background color when hovering */
  --button-secondary-transposed-font:#231f20;       /* font color */
  --button-secondary-transposed-font-hover:#ffffff; /* font color when hovering */
  
  --button-outline-border:#ffffff;
  --button-outline-border-hover:#ffffff;
  
  --button-border-radius:2px;
  
  /* blocks */
  
  --block-border-radius:2px; /* should complement the button border radius */
  
  --block-callout-border:#231F21; /* block border color */
  --block-callout-border-dark:#ffffff; /* block border color for dark regions */
  --block-secondary-background:#3A78BE; /*if the secondary background is too dark, add a block class of dark-region to make the text white */
  --block-secondary-fontcolor:#231F21; /* if the bg is light enough, this can be the same as the main --font-color */
 /* note that blocks with transposed background are the same as dr-background for light regions and --page-background for dark regions */
 /* note that the blocks with transposed font colors are the same as --dr-font-color for light regions and the --font-color for dark regions */
  
  /* search and views */
  
  --search-icon:#999999;
  --search-icon-hover:#444444;
  --search-bg:#53B6FE; /* background for exposed filters and search page form */
}


/** Theme typography **/

html {
  font-size:16px; /* this sets the default (base) font-size for the site */
  line-height: 24px;/* this sets the default (base) line-height for the site */
  
}

body {
 font-family:'Kanit'; font-weight:100;
}

/* headers */

h1,
h2,
h2 a,
h3,
h4,
h5,
h6 {
  width: 100%;
  clear:both;
  text-transform:uppercase;
  font-family: 'Kanit', sans-serif;
}
h1.secondary,
h2.secondary,
h2.secondary a,
h3.secondary,
h4.secondary,
h5.secondary,
h6.secondary {
  text-transform:unset;
  font-family: 'Kanit', sans-serif;
}

h1.accent,
h2.accent,
h2.accent a,
h3.accent,
h4.accent,
h5.accent,
h6.accent {
  text-transform:unset;
  font-family: 'PT Serif', serif;
}

h1 {
    font-size:40px;
    line-height:58px;
    /*font-family:inherit;*/
    /*font-weight:inherit;*/
    /*color:inherit;*/
    padding:10px 0;
    margin-bottom:0;
	color:#444444;
	font-family: 'Kanit', sans-serif;
}
h1 a{
    font-size:40px;
    line-height:58px;
	color:#3A78BE;
	font-family: 'Kanit', sans-serif;
}
h1.secondary{
	color:#444444;
	font-family: 'Kanit', sans-serif;
	font-size:40px;
    line-height:58px;
}
h1.secondary a{color:#3A78BE;}
h1.accent{font-size:40px; color:#231F21;font-family: 'PT Serif', serif;}
h1.accent a{font-size:40px;color:#3A78BE;font-family: 'PT Serif', serif;}

h2 {
    font-size:36px;
	color:#444444;
	font-family: 'Kanit', sans-serif;
}
h2 a{
    font-size:36px;
    line-height:58px;
	color:#3A78BE;
	font-family: 'Kanit', sans-serif;
}
h2.secondary{
	color:#444444;
	font-family: 'Kanit', sans-serif;
	font-size:36px;
}
h2.accent{font-size:36px; color:#231F21;font-family: 'PT Serif', serif;}
h2.accent a{font-size:36px;color:#3A78BE;font-family: 'PT Serif', serif;}
h2.secondary a{
	color:#3A78BE;
	font-family: 'Kanit', sans-serif;
	font-size:36px;
}

h3 {
    font-size:26px;
    line-height:58px;
	color:#444444;
	font-family: 'Kanit', sans-serif;
}

h3.secondary{
	color:#444444;
	font-family: 'Kanit', sans-serif;
	font-size:26px;
}
h3.accent{font-size:26px; color:#231F21;font-family: 'PT Serif', serif;}
h3 a{
    font-size:26px;
    line-height:58px;
	color:#3A78BE;
	font-family: 'Kanit', sans-serif;
}
h3.secondary a{
	color:#3A78BE;
	font-family: 'Kanit', sans-serif;
	font-size:26px;
}
h3.accent a{font-size:26px;color:#3A78BE;font-family: 'PT Serif', serif;}

h2,h2 a {
    line-height:3.3rem;
	font-family: 'Kanit', sans-serif;
    /*font-family:inherit;*/
    /*font-weight:inherit;*/
    /*color:inherit;*/
}

h4 {
    font-size:23px;
    line-height:58px;
	color:#444444;
	font-family: 'Kanit', sans-serif;
}

h4.secondary{
	color:#444444;
	font-family: 'Kanit', sans-serif;
	font-size:23px;
}
h4.accent{font-size:23px; color:#231F21;font-family: 'PT Serif', serif;}
h4 a{
    font-size:23px;
    line-height:58px;
	color:#3A78BE;
	font-family: 'Kanit', sans-serif;
}
h4.secondary a{
	color:#3A78BE;
	font-family: 'Kanit', sans-serif;
	font-size:23px;
}
h4.accent a{font-size:23px;color:#3A78BE;font-family: 'PT Serif', serif;}


h3 {
    line-height:2.4rem;
    /*font-family:inherit;*/
    /*font-weight:inherit;*/
    /*color:inherit;*/
}

h4 {
    line-height:1.7rem;
    /*font-family:inherit;*/
    /*font-weight:inherit;*/
    /*color:inherit;*/
}

h5 {
    line-height:1.6rem;
    /*font-family:inherit;*/
    /*font-weight:inherit;*/
    /*color:inherit;*/
}

h5 {
    font-size:17px;
    line-height:58px;
	color:#444444;
	font-family: 'Kanit', sans-serif;
}

h5.secondary{
	color:#444444;
	font-family: 'Kanit', sans-serif;
	font-size:17px;
}
h5.accent{font-size:17px; color:#231F21;font-family: 'PT Serif', serif;}
h5 a{
    font-size:17px;
    line-height:58px;
	color:#3A78BE;
	font-family: 'Kanit', sans-serif;
}
h5.secondary a{
	color:#3A78BE;
	font-family: 'Kanit', sans-serif;
	font-size:17px;
}
h5.accent a{font-size:17px;color:#3A78BE;font-family: 'PT Serif', serif;}

h6 {
    font-size:14px;
    line-height:58px;
	color:#444444;
	font-family: 'Kanit', sans-serif;
}

h6.secondary{
	color:#444444;
	font-family: 'Kanit', sans-serif;
	font-size:14px;
}
h6.accent{font-size:14px; color:#231F21;font-family: 'PT Serif', serif;}
h6 a{
    font-size:14px;
    line-height:58px;
	color:#3A78BE;
	font-family: 'Kanit', sans-serif;
}
h6.secondary a{
	color:#3A78BE;
	font-family: 'Kanit', sans-serif;
	font-size:14px;
}
h6.accent a{font-size:14px;color:#3A78BE;font-family: 'PT Serif', serif;}


h6 {
    line-height: 1.4rem;
    /*font-family:inherit;*/
    /*font-weight:inherit;*/
    /*color:inherit;*/
}



b, strong {
  
}

i, em {
  
}


/* ======================================= */
/* = Tribute Media Custom Block Stylings = */
/* ======================================= */




/* ================= */
/* = Media Queries = */
/* ================= */
@media (min-width:576px){
}
@media (min-width:768px){

}
@media (min-width:992px){
}
@media (min-width:1200px){
}