/*
Theme Name: Kinakwii
Author: Switchclick
Author URI: https://switchclick.com
Description: Custom Bootstrap Theme
Version: 1.12
*/

/*


2023 03 17
- Alumni Sans
- Lato
- Blue #7ea4b0
- Green #b2c6b6


2023 06 16
- Arbutus Slab
- Lato
- Primary Green  #008800  India Green
- Accent Red  #881111  Crimson
- Accent Blue  #357DED  Azure
- Deep Green  #003300  Pakistan Green
- Reference: https://coolors.co/008800-881111-357ded-003300


*/

/* main */
html, body { width:100%; height:100%; }
body { margin:0; padding:0; }
body { font-size:1.25rem; }

/* clean */
.clean { color:inherit; background-color:transparent; border:1px solid transparent; }

/* colors */
body { background-color:#faf8f2; color:#222; }
.green, .fg-green { color:#008800; }
.blue, .fg-blue { color:#357DED; }
.red, .fg-red { color:#881111; }
.grey, .fg-grey { color:#999; }
.white, .fg-white { color:#fff; }
.bg-green { background-color:#008800; }
.bg-blue { background-color:#357DED; }
.bg-red { background-color:#881111; }
.bg-grey { background-color:#999; }
.bg-white { background-color:#fff; }
.border-green { border-color:#008800; }
.border-blue { border-color:#357DED; }
.border-red { border-color:#881111; }
.border-grey { border-color:#999; }
.text-outline-white { text-shadow:0px 0px 5px #fff; }

/*
.menu-fg { color:#b2c6b6; }
.menu-bg { background-color:#e0f8ff; }
.bg-kwii { background-color:#b2c6b6; }
.bg-trans { background-color:transparent; border-color:transparent; }
*/

/* links */
a { color:#008800; }
a:link { color:#008800; }
a:visited { color:#007700; }
a:hover { color:#009900; }
a:active { color:#00AA00; }
a.no-underline,
button.no-underline,
#page-header a,
#page-menu a,
#page-footer a { text-decoration:none; }
/* undo bootstrap cascade */
a.btn-primary { color:#fff; }
/* p, p * { text-decoration-color:#b2c6b6 !important; } */

/* bootstrap button */
.btn-kwii { color:#fff !important; background-color:#008800; border-color:#008800; border-style:solid; }
.btn-kwii:hover { color:#008800 !important; background-color:#fff; border-color:#008800; }
.btn-outline-kwii { color:#008800 !important; background-color:#fff; border-color:#008800; border-style:solid; }
.btn-outline-kwii:hover { color:#fff !important; background-color:#008800; border-color:#fff; }

/* circle button */
.circle { border-radius:50%; width:3rem; height:3rem; transition:all 150ms ease-in-out; }
.circle.active { transform:rotate(180deg); }

/* fonts */
body { font-family:"Lato", sans-serif; }
h1, h2, h3, h4, h5, h6, .title { font-family:"Arbutus Slab", cursive; }
.lh1 { line-height:1; }
h1 { margin-bottom:1.5rem; }

/* page title */
.h1-fancy { position:relative; margin-top:3rem; }
/* .h1-ramp { display:none; } */
/* .h1-fancy h1 {} */
/* @media only screen and (min-width:992px) */
/* { */
	/* position */
	.h1-fancy { overflow-x:hidden; margin-bottom:1rem; }
	.h1-ramp { display:block; position:absolute; top:0; bottom:0; left:0px; right:66%; padding:1rem; background-color:#f7f7f7; border-radius:5px; border-top-left-radius:0px; border-bottom-left-radius:0px; }
	.h1-fancy h1 { display:inline-block; position:relative; padding:1rem 3rem 0.5rem 0; margin:0; background-color:#f7f7f7; border-radius:5px; border-top-left-radius:0px; border-bottom-left-radius:0px; }
	.h1-ramp,
	.h1-fancy h1 { border-bottom:1px solid #dee2e6; }

	/* coloring */
	.h1-ramp,
	.h1-fancy h1 { background-color:#b2c6b6; color:#fff; border-bottom:1px solid #357b92; }
/* } */

/* sizing */
.tiny { font-size:50%; }
.small { font-size:80%; }
.big { font-size:150%; }
.large { font-size:200%; }
.epic { font-size:300%; }
.bold { font-weight:bold; }

/* opacity */
.lit { opacity:0.75; }
.dim { opacity:0.5; }
.shy { opacity:0.25; }

/* media */
img.fit { width:100%; height:auto; }
img.max-250 { max-width:250px; height:auto; }
img.max-500 { max-width:500px; height:auto; }
.bg-feature { width:100%; height:100%; min-height:300px; background-color:#7ea4b0; background-repeat:no-repeat; background-position:center center; background-size:cover; }

/* slider */
.bg-slide { position:relative; width:100%; height:100%; min-height:500px; background-color:#7ea4b0; background-repeat:no-repeat; background-position:center center; background-size:cover; }
.slide-caption { position:absolute; padding:1rem 0 2rem 0; bottom:0rem; left:0; right:0; text-align:center; background-color:#000; background-color:rgba( 0, 0, 0, 0.75 ); }
.slide-caption { font-size:2rem; color:#fff; text-shadow:0px 0px 5px #000; }
.swiper-button-next, .swiper-button-prev { color:#000 !important; text-shadow:0px 0px 5px white; }
.swiper-pagination-bullet { background-color:#fff !important; }
.swiper-pagination-bullet-active { background-color:#fff !important; box-shadow:0px 0px 5px #000; }

/* linkbox */
.linkbox {}
.linkbox-image { background-color:#eee; }
.linkbox-title { font-weight:bold; }
.linkbox-title a { text-decoration:none; }
.linkbox-intro { opacity:0.75; }

/* blockquote */
blockquote { border-left:10px solid #b2c6b6; margin-left:2rem; }
blockquote { color:#333; padding:1rem 2rem; margin-top:2rem; margin-bottom:2rem; }
blockquote p:last-child { margin-bottom:0; }
blockquote .author { color:#999; text-align:right; font-size:80%; font-style:italic; }

/* baseline */
.baseline { font-size:0.75rem; color:#222; background-color:#eee; }
.baseline a { text-decoration:none; color:#222; }

/* nav */
/* .nav { color:#b2c6b6; background-color:#f7f7f7; } */
/* .nav a { color:#b2c6b6; text-decoration:none; } */

/* subnav */
.subnav { position:relative; color:#b2c6b6; background-color:#e0f8ff; }
/* .subnav { position:relative; color:#b2c6b6; background-color:#f8ffcf; } */
.subnav a { color:#b2c6b6; text-decoration:none; }
.subnav-link {}
.subnav-view { position:absolute; display:none; margin-left:2rem; top:90%; z-index:100; }
/* .subnav:hover .subnav-view, */
.subnav-show,
.subnav-view:hover { display:block; }

/* devnav */
.devnav { position:relative; color:#333; background-color:#ccc; }
.devnav a { color:#333; text-decoration:none; }
.devnfo { color:#222; background-color:#ddd; }


/* header menu */
ul#theme_header_menu,
ul#theme_header_menu ul { list-style:none; margin:0; padding:0; }
ul#theme_header_menu a { display:block; padding:0.75rem 1rem; }
ul#theme_header_menu li.current_page_item a { background-color:#008800; color:#fff; }
ul#theme_header_menu a:hover { background-color:#ccc; color:#000; }
ul#theme_header_menu ul a:hover { background-color:#008800; }
@media only screen and (max-width:767px)
{
	ul#theme_header_menu { display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
	ul#theme_header_menu ul { display:none; }
}
@media only screen and (min-width:768px)
{
	ul#theme_header_menu { display:flex; align-items:center; justify-content:space-between; }
	ul#theme_header_menu li { position:relative; }
	ul#theme_header_menu ul { display:none; opacity:0; position:absolute; top:100%; left:0; width:200px; background-color:rgba( 0, 0, 0, 0.75 ); z-index:100; transition:opacity 325ms ease-in-out; }
	ul#theme_header_menu li:hover ul,
	ul#theme_header_menu ul:hover { display:block; opacity:1; }
	ul#theme_header_menu ul ul { padding-left:2rem; }
	ul#theme_header_menu ul ul ul { padding-left:2rem; }
}
@media only screen and (min-width:992px)
{
	ul#theme_header_menu a { display:block; padding:0.75rem 3rem; }
}

/* header menu: mobile */
@media only screen and (max-width:767px)
{
	button#theme_header_menu_hamburger { display:block; width:100%; padding:1rem 5rem; border:0; background-color:transparent; transition:background-color 250ms ease-in-out; }
	button#theme_header_menu_hamburger:hover { background-color:#ddd; }
	button#theme_header_menu_close { display:none; transition:background-color 250ms ease-in-out; }
	button#theme_header_menu_close:hover { background-color:#bbb; }
	button#theme_header_menu_close.open { display:block; position:absolute; top:1rem; right:1rem; }
	ul#theme_header_menu { overflow-y:hidden; max-height:0; }
	ul#theme_header_menu.open { max-height:1000px; }
}
@media only screen and (min-width:768px)
{
	button#theme_header_menu_hamburger { display:none; }
	button#theme_header_menu_close { display:none; }
}

/* footer dl */
#page-footer dl {}
#page-footer dt { font-weight:bold; font-size:125%; }
#page-footer dd { margin-left:3rem; }

/* footer menu */
#theme_footer_menu { list-style:none; margin:0; padding:0 0 1rem 0; }
#theme_footer_menu a { color:#fff; }
#theme_footer_menu a:hover { color:#eee; text-decoration:underline; }


/* hero */
.hero { position:relative; width:100%; }
.hero-image { width:100%; margin-bottom:1rem; background-repeat:no-repeat; background-size:1px; background-position:5000px 5000px; }
.hero-image img { display:inline-block; }
.hero-title { font-size:1.5rem; font-weight:bold; }
.hero-title-ramp { display:none; }
.hero-title-text { text-align:center; padding:1rem; color:#fff; background-color:#3d8c9c; border-radius:5px; }
@media only screen and (min-width:992px)
{
	.hero { height:500px; margin-bottom:3rem; }
	.hero-image { position:absolute; overflow:hidden; height:100%; background-size:cover; background-position:center center; }
	.hero-image img { display:none; }
	.hero-title { position:absolute; bottom:-2rem; left:0%; width:100%; overflow-x:hidden; }
	.hero-title-ramp { display:block; position:absolute; bottom:0; left:0px; right:50%; padding:1rem; background-color:#3d8c9c; }
	.hero-title-text { display:inline-block; position:relative; padding:1rem 3rem 1rem 0; text-align:left; border-top-left-radius:0px; border-bottom-left-radius:0px; }
}
.hero-title-ramp,
.hero-title-text { background-color:#b2c6b6; }

/* cta */
.cta { display:flex; align-content:space-between; background-color:#f7f7f7; border-top:1px solid #dee2e6; border-bottom:1px solid #dee2e6; }
.cta { background-color:#b2c6b6; color:#fff; }
.cta-image {}
.cta-text { padding:5rem 0; }
.cta-title { font-weight:bold; margin-bottom:1rem; }
.cta-body {}
.cta-link { white-space:nowrap; }

/* document preview */
.docpreview {  }
.docpreview img { width:100px; height:auto; border:1px solid #b2c6b6; border-radius:0.25rem; }

/* login */
body.login div#login h1 a { background-image: url( '/wp-content/themes/kinakwii/images/square-kinakwii-logo.png' ); padding-bottom: 30px; }

/* gravity forms */
.gsection { margin:2rem 0; }

/* faq */
.faq-question-label { margin:2rem 0 0 0; opacity:0.35; }
@media only screen and (min-width:992px) { .faq-question-label { margin-left:-1rem; } }
.faq-question { font-weight:bold; font-size:150%; }
.faq-answer { margin:0 0 0 1rem; }
ul.faq-answer li { margin:1rem 0; }

/* blog */
.blog_image { width:100%; height:150px; background-size:cover; background-position:center center; border-radius:0.375rem; }
.blog_image a { display:block; width:100%; height:100%; }
.blog_title { font-size:150%; }
.blog_title a { text-decoration:none; }

/* .blog-tags { margin:0.5rem 0 0 0; padding:0.5rem 1rem; font-size:75%; } */
.post-tags { margin:1.5rem 0 0 0; padding:0.5rem 1rem; background-color:#eee; border-radius:0.5rem; }

/* audio player wrap */
.chief-audio { }
.chief-audio-image img { border-radius:50%; width:100%; height:auto; }
.chief-audio-title { font-size:125%; margin:0.5rem 0 0.25rem; }
.chief-audio-player .wp-block-audio figcaption { margin:0; }
@media only screen and (max-width:1399px)
{
	.chief-audio-image { margin:0 auto; max-width:250px; padding:0 2rem; }
	.chief-audio-title { text-align:center; }
}
@media only screen and (min-width:1400px)
{
	.chief-audio { position:relative; }
	.chief-audio-image { position:absolute; width:25%; top:0; left:0; }
	.chief-audio-stack { position:absolute; width:73%; top:0; right:0; }
	.chief-audio-title { padding:0 0 0 1rem; }
}



