@font-face {
  font-family: 'Gochi Hand'; font-display: swap;
  src: url('/inc/fonts/gochi-hand-regular.eot'); 
  src: url('/inc/fonts/gochi-hand-regular.eot?#iefix') format('embedded-opentype'), 
       url('/inc/fonts/gochi-hand-regular.woff2') format('woff2'), 
       url('/inc/fonts/gochi-hand-regular.woff') format('woff'), 
       url('/inc/fonts/gochi-hand-regular.ttf')  format('truetype'), 
       url('/inc/fonts/gochi-hand-regular.svg') format('svg'); 
}

@font-face{ font-family: 'Caveat Brush'; font-display: swap;
  src: url('/inc/fonts/caveat-brush-regular.ttf');
}

:root {
  --primary-01: #734485; /* purple - main*/
  --primary-02:#71c4ef ; /* blue - link*/
  --primary-03:#00668c ; /* dark blue - link */
  --accent-01:#d4eaf7; /* lighter blue */
  --accent-02:#b6ccd8; /* light blue */
  --text-01:#1d1c1c; /* black - h1, text */
  --text-02:#595e61; /* dark gray - thumb color*/
  --bg-01:#fffefb; /* lighter gray */
  --bg-02:#f5f4f1; /* light gray */
  --bg-03:#cccbc8; /* gray */
}

/*** Overwrite ****/
body {font-family: var(--bs-body-font-family);
font-size: 1.1em; line-height:1.5em; color: var(--text-02)}
a {color:var(--primary-03)}
a:hover {color:var(--primary-02)}

h1, .h1 {font-family:"Caveat Brush", cursive; color:var(--text-01); margin-bottom:1em}
h1.post-title {margin-bottom:0.5em; text-transform:capitalize}
h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6 {font-family:"Caveat Brush", cursive; color:var(--text-02); margin-bottom:1em}

.navbar {padding: 1.5em 0!important; background-color:#fff; transition: all 0.5s ease;}
.navbar.shrink {padding:0.5em 0!important; background-color:var(--bg-02)}
.nav-item {margin-right:1em}
.navbar-brand {font-family: 'Gochi Hand', cursive; font-size:2.0em; transition: all 0.5s ease; color: var(--primary-01)}
.navbar.shrink .navbar-brand {font-size:1.75em}
.nav-link, .nav-link:active, .nav-link:focus {color: var(--text-01)!important}
.nav-link:hover {color: var(--primary-02)!important}
.navbar-brand.reverse {color:#fff}
.navbar-nav.reverse .nav-link{color:#fff!important}
.navbar-nav.reverse .nav-link:hover{color: var(--primary-02)!important}

ol, ul {padding-left: 1.5rem}

.dropdown-menu {width:250px}
.dropdown-item {width: 248px; white-space: normal!important;}
.dropdown:hover > .dropdown-menu {display: block;  margin-top: 0;}

.row + .row {margin-top:2rem} /*subsequent sibbling*/

.btn-primary {--bs-btn-border-color:transparent!important; --bs-btn-active-border-color: transparent!important; --bs-btn-hover-border-color: transparent!important; --bs-btn-bg: var(--primary-03)!important; --bs-btn-hover-bg: var(--primary-02)!important}


/*** New ***/
.hero {height:400px; position:relative; border:1px solid var(--bg-03); overflow:hidden}
.hero-image {height:100%; width:100%; background-repeat:no-repeat; background-size:cover;background-position: 0 0 }
.clear {clear:both!important}
.fw-medium {font-weight: 500 !important}
.fw-bold {font-weight: 700 !important}
.fw-black {font-weight: 900 !important}
.back-to-top {position: fixed; display: none; right: 45px; bottom: 45px; z-index: 99}
.bg-primary01{background-color: var(--primary-01)}
.bg-accent01 {background-color: var(--accent-01)}
.bg-accent02 {background-color: var(--accent-02)}

.bg-bg01{background-color: var(--bg-01)}
.bg-bg02{background-color: var(--bg-02)}
.bg-bg03{background-color: var(--bg-03)}
.bg-white {background-color:#fff}

.sidebar, .footer, .navbar-nav {font-size:0.92em}
.thumb-link, .sidebar a {color: var(--text-02); text-decoration:none!important}
.thumb-link:hover, .sidebar a:hover {color: var(--primary-02)!important}
img.thumbnail {border:1px solid var(--bg-03)}
img.thumbnail:hover {border-color: var(--text-02)}
.thumb-caption {font-size:0.875em; line-height:1.2em; text-align:center; padding:10px 20px}
.ul {margin-left:20px!important}
.ul li {margin-top:10px}


/*purple*/
.footer .bg-primary01{color:#fff!important}
.footer .bg-primary01 a {color:#fff!important; text-decoration:underline;}
.footer .bg-primary01 a:hover {color:var(--primary-02)!important}
.pipe {margin:0 15px}


/*** Single Page ***/
.sname, .sdate {width:95%; border-bottom:1px solid #333; text-align:left; padding:10px 0 }
.table-grid {width:100%}
.worksheet {width:100%; max-width:1000px; margin:120px auto 50px; text-align:center}

@media print{
@page {
  size: Letter portrait;
  margin:0.5in;
}
body, p, h1, h2, h3 {color:#000}
.noPrint, .adbanner, #relatedPosts, .navbar, .footer {display:none}
.toPrint {display:block}
h1 {font-size:35px; text-align:center; margin:10px 0}
.sImage {max-height:800px!important}
.worksheet {margin:0 auto}
}

@media (max-width:767px){
.hero {height:200px}
.navbar-brand {font-size:1.75em}
.navbar.shrink .navbar-brand {font-size:1.5em}
}