/*
This file is not to be modified unless you know what you're doing. 
This contains all the modules' CSS.
*/


/* Auto Number Headings 

<div class="numberheadings"> 
<h2>...</h2> <p>...</p> <h2>...</h2> <p>...</p> 
</div> 

*/
.numberheadings {
  counter-reset: section
}

.numberheadings h2, .numberheadings h3, .numberheadings h4 {
  position: relative;
}

.numberheadings h2:before, .numberheadings h3:before, .numberheadings h4:before {
  counter-increment: section;
  content: counter(section, decimal) ". ";
  color: var(--blue);
}

/* Logo 

<div class="nclogo">
<a href="#2" class="nclogo_anchor">
<div class="nclogo_title">Heading</div>
  <!-- 
  <img src="nclogo.svg" alt="Site Title" class="nclogo_image"> 
  -->
</a>
<div class="nclogo_tagline">Just another WordPress website</div>
</div>

*/

.nclogo {
  --logo-text-size:2em;
  --logo-text-transform: uppercase;
  --logo-text-weight:400;
  --logo-text-color:inherit;
  --logo-img-width:250px;
  --logo-padding: 1.5em 0;
  --logo-margin:0;
}

.nclogo {
  padding:var(--logo-padding);
  margin:var(--logo-margin);
}

.nclogo_image,
.nclogo_anchor { display: block; }

.nclogo_image { width:var(--logo-img-width); }

.nclogo_title {
  font-size: var(--logo-text-size);
  text-transform: var(--logo-text-transform);
  font-weight:var(--logo-text-weight);
  color:var(--logo-text-color);
  margin: 0;
  line-height: normal;
  display: block;
}

.nclogo_anchor + .nclogo_tagline { margin-top:0.3em; }
.nclogo_tagline {
  font-size: 0.8em;
  opacity: 0.5;
  letter-spacing: 1px;
  font-style: italic;
}

/*  NC Navmenu 

<ul class="navmenu">
  <li>
    <a href="#">...</a>
  </li>
  <li class="menu-item-has-children">
    <a href="#">Label
    <ul class="sub-menu">...</ul>
  </li> 
</ul>

*/

.navmenu {
  --menu-bg-color: none;
  --menu-item-height: auto;
  --menu-align-items: center;
  --menu-box-shadow:none;

  --item-height: auto; 
  --item-align-items: center;

  --item-bg-color: #fff;
  --item-bg-color-hover: #fff;
  --item-bg-color-current: #fff;

  --item-text-color: #000;
  --item-text-color-hover: #000;
  --item-text-color-current: #000;

  --item-margin-left: 0;
  --item-padding: 1rem;
  --item-border-right: none;
  --item-border-bottom:solid 1px #ccc;
  
  --indicator-color: inherit;
  --transition: 0.5s;
  
  --drop-width:250px;
  --drop-radius:5px;
  --drop-div-color:solid 1px #333;
  --drop-item-bg-color: #444;
  --drop-item-text-color:#ccc;  
  --drop-item-padding:1em;
  --drop-item-bg-color-hover: #555;  
  --drop-item-text-color-hover:#fff;
  --drop-shadow: drop-shadow(0 5px 5px rgba(0,0,0,0.3));
}


.navmenu a { transition: var(--transition)}
.navmenu {
  display: flex;
  align-items: var(--item-align-items);
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
  height:var(--menu-item-height);
}
.navmenu > li {
  display: flex;
  align-items: stretch;
  justify-content:center;
  padding: 0;
  margin: 0;
  position:relative;
  height:var(--item-height);
}

.navmenu > li:not(:first-of-type) {
  margin-left: var(--item-margin-left);
}

.navmenu > li > a {
  display: flex;
  align-items:center;
  padding:var(--item-padding);
  background:var(--item-bg-color);
  color:var(--item-text-color);
  flex-wrap: wrap;
}

.navmenu > li > a.navmenu-current {
  color:var(--item-text-color-current);
  background:var(--item-bg-color-current);
}

.navmenu > li:not(:last-child) > a {
  border-right:var(--item-border-right);
}

  /* Modifier 

Make the menu a full width bar */

.navmenu-bar { 
  max-width:100%; 
  width:100%; 
  background:var(--menu-bg-color); 
  justify-content:var(--menu-align-items);
  flex-wrap:nowrap;
  overflow-x:auto;
  box-shadow:var(--menu-box-shadow);
}

/* Responsive 

NOTE: The items must be sent to flex-start to scroll properly

@media(max-width:768px) {
  .navmenu-bar { justify-content:flex-start; }
  .navmenu-bar > li:first-child > a { padding-left:var(--gap); }
  .navmenu-bar > li:last-child > a { padding-right:var(--gap); }
}
*/

.navmenu-bar > li > a { white-space: nowrap; }

/* Modifier 

Make the bar sticky */

.navmenu-sticky {
  position:sticky;
  left:0;
  top:-1px;
  z-index:200;
}

/* Account for WordPress bar when logged in */

body.logged-in .navmenu-sticky { top: 32px; }
@media(max-width:782px) { body.logged-in .navmenu-sticky { top:46px } }
@media(max-width:600px) { body.logged-in .navmenu-sticky { top:0 } }

/* Responsive 

  @media(max-height:600px){
    .navmenu-sticky { position:static; }
  }
*/

/* Submenu */

.navmenu .sub-menu {
    position: absolute;
    left: 0;
    margin:0;
    top:100%;
    width:var(--drop-width);
    line-height: normal;
    z-index: 200;
    opacity: 0;
    list-style-type:none;
    padding-left:0;
    visibility:hidden;
    background:var(--drop-item-bg-color);
    transition: var(--transition);
    color:var(--drop-item-text-color);
    max-height:10px;
    border-radius:var(--drop-radius);
}

.navmenu:not(.navmenu-vertical) .sub-menu,
.navmenu:not(.navmenu-list) .sub-menu {
  filter:var(--drop-shadow);
}

.navmenu .sub-menu > li:first-child a {
  border-radius:var(--drop-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.navmenu .sub-menu > li:last-child a {
  border-radius: var(--drop-radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}


/* Drop menu shadow for */

.navmenu:not(.navmenu-vertical) .sub-menu {
  filter:drop-shadow(0 5px 5px rgba(0,0,0,0.3));
}

/* Centered Drop menu for horizontal only */

.navmenu:not(.navmenu-vertical) > li > .sub-menu {
  left: 50%;
  margin-left:calc(-1 * var(--drop-width) / 2);
}

.navmenu:not(.navmenu-vertical) .sub-menu:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: var(--drop-item-bg-color);
    border-width: 10px;
    margin-left: -10px;
}

.navmenu li:hover > .sub-menu { 
  visibility:visible; overflow:visible;
  opacity:1; max-height:1000px }

.navmenu:not(.navmenu-vertical) .sub-menu .sub-menu:before {
  content:none;
}

.navmenu .sub-menu .sub-menu { left:100%; top:0;}

.navmenu .sub-menu li { 
  display:block; 
  list-style-type:none; 
  position:relative;
}

.navmenu .sub-menu li a { padding:var(--drop-item-padding); display:block;}
.navmenu .sub-menu li:not(:last-child) a { 
  border-bottom:var(--drop-div-color); }

    /* Submenu indicator */

    .navmenu .menu-item-has-children > a:after { 
      content:'\203A'; margin-left:0.5em;
      display:inline-block;
      transform:rotate(90deg);
      color:var(--indicator-color);
    }
      /* Second level */
      .navmenu .sub-menu > .menu-item-has-children > a:after { 
        transform:none;
        float:right;
      }

/* Hover styles */

.navmenu > li:hover > a {
  background:var(--item-bg-color-hover);
  color:var(--item-text-color-hover);
}

.navmenu .sub-menu li:hover > a {
  background:var(--drop-item-bg-color-hover);
  color:var(--drop-item-text-color-hover);
}

/* Modifier: Menu vertical */

.navmenu-vertical,
.navmenu-vertical li,
.navmenu-vertical .sub-menu li { 
  display:block; 
  line-height:1.5
}

.navmenu-vertical { 
  max-width:25em; 
  background:var(--item-bg-color);
  color:var(--item-text-color);
}

.navmenu-vertical > li:not(:first-of-type) { 
  margin-left:0;
}

.navmenu-vertical > li > a { 
  padding:var(--drop-item-padding);
  border-bottom:var(--item-border-bottom);
  display:block;
}


.navmenu-vertical .sub-menu { left: 100%; top: 0; }

.navmenu-vertical > .menu-item-has-children > a:after { 
  transform:none;
  position:absolute; right:1em;
  color:var(--indicator-color);
}

/* 
Menu Modifier 
Drop Menu Right Aligned
*/

.navmenu-right .menu-item-has-children > a:after {
  display:none;
  content:none;
}

.navmenu-right .sub-menu {
  position: absolute;
  left: auto;
  right:0;
}

.navmenu-right .sub-menu .sub-menu,
.navmenu-right.menu-vertical .sub-menu { left:auto; right:100%; }


/* Modifier: LIST Sub menu List inline */

.navmenu-list {
  border-top:var(--item-border-bottom);
  --drop-radius:0;
}

.navmenu-list .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    width: auto;
    box-shadow: none;
    background: var(--drop-item-bg-color);
    margin-bottom: 0;
    max-height:0;
    overflow: hidden;
}

.navmenu-list > li:hover > .sub-menu {
  border-bottom:var(--drop-div-color);
}

.navmenu-list .menu-item-has-children > a {
    position: relative;
}

.navmenu-list .menu-item-has-children > a:after {
    transition: 0.5s;
    content: '\25bc';
    transform: scale(1,0.5);
    font-size:0.8em;
    position: static;
    opacity: 1;
    float:right;
    color: var(--indicator-color);
}

.navmenu-list .menu-item-has-children:hover > a:after {
    transform: rotate(180deg)scale(1,0.5);
}



 /* Search Form 
 
  <form class="ncsearchform">
    <div class="ncsearchform_contain">
      <label for="wp-searchbox" class="hidetext">Search</label>
      <input class="ncsearchform_input" type="search" id="wp-searchbox" name="s" placeholder="Search">
      <button class="ncsearchform_button" type="submit">
        <svg class="ncsearchform_icon">...</svg>
      </button>
    </div>  
  </form>
 
 */

 .ncsearchform {
  --align-self:center;
  --text-indent: 1em;
  --radius: 50px;
  --min-width:150px;
  --text-size:1em;
  --text-color:#000;
  --bg-color:#fff;
  --border: solid 1px #ddd;
  --button-width: 2.5em;
  --button-bg-color:none;
  --button-color:#000;
  --focus-text-color:#000;
  --focus-border:solid 1px #aaa;
  --focus-bg-color:#fff;
  --focus-dropshadow: 0 1px 0.3rem rgba(0,0,0,0.3);
}

.ncsearchform {
  flex-grow: 1;
  min-width:var(--min-width);
  align-self:var(--align-self);
}

.ncsearchform_contain {
  display: flex;
  position:relative;
  align-items: center;
  flex-grow: 1;
}

.ncsearchform_input {
  background: var(--bg-color);
  text-indent: var(--text-indent);
  border: var(--border);
  border-radius: var(--radius);
  width: 100%;
  font-size: var(--text-size);
  min-height:2.5em;
  padding-right:var(--button-width);
  outline: none;
  transition: 0.3s;
  color:var(--text-color);
}

.ncsearchform_input,
.ncsearchform_input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.ncsearchform_input:focus {
  border:var(--focus-border);
  background: var(--focus-bg-color);
  box-shadow: var(--focus-dropshadow);
  color:var(--focus-text-color);
}

.ncsearchform_button {
  cursor: pointer;
  background: var(--button-bg-color);
  border: none;
  position: absolute;
  right: 0;
  height:100%;
  font-size: 1em;
  border-radius:var(--radius);
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  width: var(--button-width);
  padding: 0;
  display: flex;
  justify-content: center;    
}

.ncsearchform_icon {
  width: 1em;
  height: auto;
  display: block;
}
.ncsearchform_icon path {
  fill: var(--button-color);
}

/* Modifier 
Stretch
*/

.ncsearchform-stretch {
  align-self:stretch;
  position:relative;
  display: flex;
}
.ncsearchform-stretch .ncsearchform_contain {
  align-items: stretch;
}

.ncsearchform-stretch .ncsearchform_input {
  align-items: stretch;
}

.ncsearchform-stretch .ncsearchform_input,
.ncsearchform-stretch .ncsearchform_button {
  border-radius:0;
}


/* NC Header Div */

.nchdiv {
  display:inline-block;
  height: 0.15em;
  background: gold;
  width: 100px;
  position: relative;
  top: -0.5em;
  border: none;
}


/* NC Columns 

<div class="ncolumns ncolumns-fixed ncolumns-mason ncolumns-3 ncolumns-borders ncolumns-scroll">
  <div>...</div>
  <div>...</div>
</div>

*/

.ncolumns {
  --count:3; 
  --min-col-width: 250px;
  --column-gap: 3rem;
  --row-gap:1.5rem; 
  --bottom-box-padding:3em; /* Bottom padding of the box */
  --column-border-color: currentColor;
}

.ncolumns {
  display: grid;
  grid-column-gap: var(--column-gap);
  grid-row-gap: var(--row-gap);
  list-style-type: none;
  padding-left:0;
  margin-left:0;
}

.ncolumns > * :last-child { margin-bottom:0; } 

/* Box Styles */

.ncolumns_box { 
--box-padding: 3rem 0;
--box-text-color: #000;
--bg-color: #fff;
--contain-max-width: 1400px;
}

.ncolumns_box {
  padding:var(--box-padding);
  color:var(--box-text-color);
  background:var(--bg-color);
}

.ncolumns_box > .ncontain { max-width: var(--contain-max-width); }

.ncolumns_after { margin-top:var(--gap); }

/* Images */

.ncolumns_image img { display: block; }

/* Modifiers Column Count Style */

.ncolumns-1 { --count:1; }
.ncolumns-2 { --count:2; }
.ncolumns-3 { --count:3; }
.ncolumns-4 { --count:4; }
.ncolumns-5 { --count:5; }
.ncolumns-6 { --count:6; }
.ncolumns-7 { --count:7; }
.ncolumns-8 { --count:8; }
.ncolumns-9 { --count:9; }

.ncolumns-fixed { grid-template-columns: repeat(var(--count), 1fr) }
.ncolumns-auto  { grid-template-columns: repeat(auto-fit, minmax(var(--min-col-width), 1fr)) }
.ncolumns-flow  { grid-template-columns: repeat(auto-fit, minmax(var(--min-col-width), auto)) }

/* Modifier: Border */

.ncolumns-borders > *:not(:last-child) { position:relative; }

.ncolumns-borders > *:not(:last-child):after {
  display:block;
  content:'';
  width:1px;
  height:100%;
  background:var(--column-border-color);
  position:absolute;
  right:calc( -1 * var(--column-gap) / 2 );
  top:0;
  opacity:0.5;
}


/* Modifier Mason
This is unpredictable and only works well with at least 9 items or more.
*/

.ncolumns-mason {
display:block;
column-count:var(--count);
column-gap:var(--column-gap);
column-width:var(--min-col-width);

}

.ncolumns-mason > *,
.ncolumns-mason > .ncgallery_item { 
display:inline-block; 
margin-bottom: var(--row-gap); 
height: auto;
width: 100%;
}

/* Scroll or stack 

@media(max-width:640px){
  
  .ncolumns.ncolumns-stack.ncolumns-borders {
    grid-template-columns: 1fr;
    grid-gap: var(--row-gap);
  }

  .ncolumns.ncolumns-stack.ncolumns-borders > *:not(:last-child):after { 
    width:100%;
    height:1px;
    right:auto;
    bottom: calc( -1 * var(--column-gap) / 2 );
    top:auto;
   }

  .ncolumns-scroll {
    display:grid;
    --column-gap:var(--gap);
    grid-template-columns: repeat(30, minmax(var(--min-col-width), 1fr));
    overflow-x:auto;
    overflow-y:hidden;
    padding-left:var(--gap);
    margin-left: calc(-1 * var(--gap));
    margin-right: calc(-1 * var(--gap));
    margin-bottom: calc(-1 * var(--bottom-box-padding));
  }
  
  .ncolumns-scroll > * { 
    min-width:var(--min-col-width); 
    margin-bottom:var(--bottom-box-padding);
  }
  
  .ncolumns-scroll:after {
    content:''; width:1px; height:1px;
  }
  
  
}
*/

/* Gallery 

<div class="ncolumns_box">
<div class="ncontain">  
<div class="ncolumns_before"><h2>Heading for content</h2></div>

<div class="ncolumns ncgallery ncgallery-capslide">

<figure class="ncgallery_item">
  <a class="ncgallery_link" href="#">
    <div class="ncgallery_size">
      <img class="ncgallery_image" src="https://picsum.photos/600/500/" alt="">
    </div>
    <figcaption class="ncgallery_caption">
      <span class="ncgallery_title">Caption for the image</span>
      <span class="ncgallery_desc">Desc</span>
    </figcaption>
  </a>
</figure>

....

</div>

<div class="ncolumns_after"></div>

</div>
</div>

*/

.ncgallery {
--img-height:70%;
--min-col-width: 250px;
}

.ncgallery_box {
--box-padding: 3rem 0;
--text-color: #ccc;
--bg-color: #222;
--contain-max-width:1400px;
}

.ncgallery_box {  
background:var(--bg-color);
color:var(--text-color);
padding: var(--box-padding);
}

.ncgallery_box > .ncontain {
max-width: var(--contain-max-width);
}

.ncgallery_item {
display:block;
margin:0; padding:0;
position:relative;
overflow:hidden;
}

.ncgallery_link {
text-decoration:none;
color:inherit;
}

.ncgallery_size {
width:100%;
padding-top:var(--img-height);
height:100%
}


.ncgallery_image {
display:block;
height:100%;
width:100%;
object-fit:cover;
object-position:center center;
transform:scale(1);
position:absolute;
left:0;
top:0;
transition:0.6s;
}

.ncgallery_item:hover .ncgallery_image { transform: scale(1.2); }

.ncolumns-mason .ncgallery_size {
padding-top:0;
}

.ncolumns-mason .ncgallery_image {
position:static;
height:auto;
}

.ncgallery_caption {
position:absolute;
width:102%;
left:-1%;
bottom:0;
padding:3rem 0.75rem 0.75rem;
color:#fff;
font-size:0.7em;
text-align:center;
background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
letter-spacing:0.08em;
}

.ncgallery-capbelow .ncgallery_caption { color:inherit }

.ncgallery_caption > *:last-child {
margin-bottom:0;
}

/* Modifier: Caption Slide */

.ncgallery-capslide:not(.ncgallery-capbelow) .ncgallery_caption {
bottom:-100%;
opacity:0;
transition:0.2s;
}

.ncgallery-capslide:not(.ncgallery-capbelow) .ncgallery_item:hover .ncgallery_caption {
bottom: -1px;
opacity:1;
}

/* Modifier: Captions below */

.ncgallery-capbelow .ncgallery_caption {
position:relative;
width:100%;
padding:0.5rem;
background:none;
}

.ncgallery-capbelow .ncgallery_size {
position:relative;
height: auto;
overflow: hidden;
}

.ncgallery_caption:empty { display: none }


/* Accordion 

<div class="nccordion_box">

<div class="nccordion_before">...</div>

<div class="nccordion">
  <h2 class="nccordion_header">Header</h2>
  <div class="nccordion_content">
    <p>Some Text...</p>
  </div>

  <h2 class="nccordion_header">Header</h2>
  <div class="nccordion_content">
    <p>Some Text...</p>
  </div>
</div>

<div class="nccordion_before">...</div>

</div>

*/

.nccordion,
#wrapper .schema-faq {
  --heading-size:1em;
  --heading-text-color:inherit;
  --heading-border:solid 1px #ddd;
  --heading-padding:0.75rem;
  --heading-p-color:inherit;
  --heading-bg-color: #fff;
  --heading-bg-color-hover:lightyellow;
  --heading-bg-color-active:#fff;
  --transition:0.5s;
  
  --content-padding:1.5rem;
  --content-bg-color:#fff;
  --content-text-color:inherit;
  --acc-space:0.75rem;         
}

.nccordion_box {
  --box-bg-color:none;
  --box-text-color:inherit;
  --box-padding: 3em 0;
  background:var(--box-bg-color);
  color:var(--box-text-color);
  padding:var(--box-padding);
}

.nccordion_header,
#wrapper .schema-faq-question { 
  color:var(--heading-text-color);
  font-size:var(--heading-size); 
  cursor:pointer; 
  border:var(--heading-border); 
  padding:var(--heading-padding);
  margin-bottom:0;
  position:relative;
  transition:var(--transition);
  background:var(--heading-bg-color);
  margin-top:0;
  display: flex;
  align-items:center;
  justify-content:space-between
}

.nccordion_header:not(:first-of-type),
#wrapper .schema-faq-question:not(:first-of-type) {
  margin-top:var(--acc-space);
}

.nccordion_header:after,
#wrapper .schema-faq-question:after {
    transition: var(--transition);
    content: '\25bc';
    transform: scale(1,0.5);
    position: static;
    line-height: normal;
    opacity: 1;
    float: right;
    color: var(--heading-p-color);
}

.nccordion_header.active:after,
#wrapper .schema-faq-question.active:after {
  transform:rotate(180deg)scale(1,0.5);
}

.nccordion_header.active,
#wrapper .schema-faq-question.active { 
  background:var(--heading-bg-color-active);
}
.nccordion_header:hover,
#wrapper .schema-faq-question:hover { 
  background:var(--heading-bg-color-hover); 
}

.nccordion_header + .nccordion_content,
#wrapper .schema-faq-question + .schema-faq-answer {
  transition: var(--transition);
  max-height:0;
  overflow:hidden;
  border:var(--heading-border); 
  border-top:0;
  padding:var(--content-padding);
  padding-top:0; padding-bottom:0;
  visibility:hidden;
  background:var(--content-bg-color);
  color:var(--content-text-color);
}

.nccordion_header.active + .nccordion_content,
#wrapper .schema-faq-question.active + .schema-faq-answer {
  max-height:1500px;
  overflow:visible;
  padding:var(--content-padding);
  opacity:1;
  visibility:visible;
}

.nccordion_header.active + .nccordion_content > *:last-child  {
  margin-bottom:0;
}


/* Call Out Module 

<nav class="ncallout"> 
<div class="ncallout_bgimage"></div>
<div class="ncontain">
  <div class="ncallout_content">
    <p>Some text...</p>
  </div> 
  <div class="ncallout_button">
    <a href="#" class="ncbutton">Call Now</a>
  </div>
</div> 
</nav>

*/

.ncallout {
--bg-color:crimson;
--text-color:#fff;
--box-padding:3rem 0;

--text-size:1em;
--text-align:left;
--text-weight:400;
--button-width:30%;
--button-color:#000;
--button-text-color:#fff;
--content-width: calc(100% - var(--button-width));
--contain-max-width:1400px;
--bg-opacity:0.3;
}

.ncallout{ 
font-size:var(--text-size);
font-weight:var(--text-weight);
color:var(--text-color);
background-color: var(--bg-color);
padding: var(--box-padding);
position: relative;
}

.ncallout_bgimage {
position: absolute;
width:100%; height:100%;
left: 0; top:0;
background-size:cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
opacity:var(--bg-opacity);
}

.ncallout > .ncontain {
  display: grid;
  grid-template-columns: minmax(125px, var(--content-width)) minmax(125px, var(--button-width));
  grid-gap:var(--gap);
  max-width:var(--contain-max-width);
  position: relative;
  z-index: 3;
}

.ncallout_content > :last-child {
margin-bottom:0;
}

.ncallout_content {
text-align:var(--text-align);
}

.ncallout_button .ncbutton {
  background-color: var(--button-color);
  color: var(--button-text-color);
  padding: 0.75em 1em;
  min-width:200px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  border-radius: 50px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/*
@media(max-width:600px){
.ncallout > .ncontain {
  grid-template-columns:1fr;
  --padding:3rem 0;
  --text-align:center;
}
}
*/

/* Hero Module 

<section class="nchero nchero-bottom">
<img class="nchero_image" src="https://picsum.photos/1200/1000?image=1010">
<div class="ncontain">
  <div class="nchero_content">
    <h1>Hero image</h1>
    <p>...</p>
    <button class="button">Learn More</button>
  </div>
</div>
</section>

*/

.nchero { 
--tint:0.5;
--tint-color:#000;
--tint-height: 100%;
--tint-width:100%;

--image-position:center center;
--text-color: #fff;
--text-align:center;
--max-container-width: var(--width-max);

--content-max-width: 600px;
--content-position-x:center;
--content-position-y:center;
--text-padding: calc(2 * var(--gap, 1.5rem)) 0;
--box-height:100vh;
}

.nchero {  
overflow:hidden;
position:relative; 
color:var(--text-color);
background-size:cover;
background-repeat:no-repeat;
background-position:var(--image-position);
}

/* Tint Color */
.nchero:after { 
content:'';
display:block;
width:var(--tint-width); 
height:var(--tint-height);
position:absolute;
bottom:0;
left:0; right:0;
opacity:var(--tint); 
background: var(--tint-color);
}

.nchero_image {
position:absolute;
width:100%;
height:100%;
object-fit:cover;
object-position:var(--image-position);
display:block;
}

.nchero > .ncontain { 
min-height:var(--box-height);
max-width: var(--max-container-width);
display: flex;
flex-direction: column;
justify-content:var(--content-position-y);
align-items:var(--content-position-x);;
text-align:var(--text-align);
}

.nchero_content { 
max-width:var(--content-max-width); 
position:relative;
z-index:10;
padding: var(--text-padding);
}

.nchero_content > :last-child {
  margin-bottom:0
}

/* Modifiers: Bottom (Left Center Right) */

.nchero-bottom {
--content-position-y: flex-end;
--content-position-x: center;
--text-align:center;
--tint-height:80%;
--tint:0.8;
}

.nchero-bottom:after,
.nchero-bottomleft:after,
.nchero-bottomright:after { top:auto; background:linear-gradient(to bottom, rgba(255,255,255,0) 0%,var(--tint-color) 100%);}

.nchero-bottomleft {
--content-position-y: flex-end;
--content-position-x: flex-start;
--text-align:left;
}

.nchero-bottomright {
--content-position-y: flex-end;
--content-position-x: flex-end;
--text-align:right;
}

/* Modifiers: Left */

.nchero-left {
--tint-height:100%;
--tint:0.8;
--content-position-x: flex-start;
--content-position-y: center;
--content-max-width:400px;
--tint-width:70%;
--text-align:left;
--image-position:right center
}

.nchero-left:after { left:0; right:auto; background:linear-gradient(to left, rgba(255,255,255,0) 0%,var(--tint-color) 100%); }

/* Modifiers: Right */

.nchero-right {
--tint-height:100%;
--tint:0.8;
--content-position-x: flex-end;
--content-max-width:400px;
--tint-width:90%;
--text-align:right;
--image-position:left center
}

.nchero-right:after { right:0; left:auto; background:linear-gradient(to right, rgba(255,255,255,0) 0%,var(--tint-color) 100%); }

/* Modifier: Fixed */

#wrapper .nchero-fixed .nchero_image {
position:fixed;
top:0; left:0;
z-index:-1
}


/* NC Icons for Social Media */

.ncicons { 
--icon-width:2em;
--icon-gap:0.5rem;
--icon-color: currentColor;
--icon-bg-color: none;
--icon-border:solid 0.08em;
--icon-radius:50%;
}

.ncicons { 
display: grid; 
grid-template-columns:repeat(auto-fill, minmax(var(--icon-width), 1fr));
grid-gap:var(--icon-gap);
}

.ncicons-center {
  display:flex;
  justify-content: center;
}

.ncicons_link svg { width: calc(var(--icon-width) - 0.75em); height:auto; }
.ncicons_link { 
width:var(--icon-width); 
height:var(--icon-width); 
display:flex;
border-radius:var(--icon-radius);
justify-content:center;
align-items:center;
transition: .3s;
align-self:flex-start;
background-color:var(--icon-bg-color);
border:var(--icon-border);
color:var(--icon-color);
position:relative;
}

.ncicons-center .ncicons_link {
  margin:0 calc( var(--icon-gap) / 2);
}

.ncicons_link path { fill: var(--icon-color); }

.ncicons_link:hover { transform:scale(1.25); }

/*
.ncicons_facebook { background-color: #3b579d;}
.ncicons_twitter { background-color: #1da1f2;}
.ncicons_linkedin { background-color: #0077b5;}
.ncicons_pinterest { background-color: #bd081c;}
.ncicons_youtube { background-color: #ff0000;}
.ncicons_googleplus { background-color: #db4437;}
.ncicons_instagram { background-color: #fb3958;}
.ncicons_personal { background-color: #9b6954;}
.ncicons_email { background-color: #999;}
.ncicons_vimeo { background-color: #1ab7ea;}
.ncicons_tumblr { background-color: #36465d; }

*/


/* NC Left Heading 

<section class="ncleft">
<div class="ncontain">
  <header class="ncleft_heading">
    <h3>Lightness strikes again.</h3>
  </header>
  <div class="ncleft_content">
    <p>...</p>
  </div>
</div>
</section>

*/

.ncleft img,
.nctext img {
  max-width: 100%;
  height: auto;
}

.ncleft figure, 
.nctext figure { 
  width: auto !important;
  margin:0;
  margin-bottom:var(--gap);
}

.ncleft {
--box-padding: 3em 0;
--box-text-color:#000;
--box-bg-color:#fff;
--content-max-width:1400px;

--hd-size:3em;
--hd-weight:normal;
--hd-line-height:normal;
--hd-color:#000;
--hd-text-case:uppercase;
--hd-gap:3em;
--widths: 1fr 4fr;
}

.ncleft {
padding:var(--box-padding);
color:var(--box-text-color);
background:var(--box-bg-color);
}


.ncleft > .ncontain {
display:grid;
grid-gap:var(--hd-gap);
grid-template-columns:var(--widths);
max-width:var(--content-max-width);
}


.ncleft_heading > * {
font-size:var(--hd-size);
line-height:var(--hd-line-height);
color:var(--hd-color) !important;
font-weight:var(--hd-weight);
text-transform:var(--hd-text-case);
margin-bottom:0;
}

/* Responsive

@media(max-width:640px){
.ncleft {
  --widths:1fr;
  --hd-gap:1.5rem;
}
}

*/

/* NC List 

<div class="nclist">
<div class="ncontain">
  <div class="nclist_before"></div>

  <ul class="nclist_group">

    <li class="nclist_item">
      <a class="nclist_link" href="#">
        <div class="nclist_box">
          <div class="nclist_imgcontain">
            <img src="https://picsum.photos/200/300/" class="nclist_image" />
          </div>
          <div class="nclist_label">Label of Item</div>
        </div>
      </a>
    </li>

    <li>...</li>
    
  </ul>

  <div class="nclist_after"></div>
</div>
</div>

*/

.nclist {
--box-padding:3rem 0;
--bg-color:#eee;
--text-color:#333;
--contain-max-width:1400px;

--flex-direction:row;
--justify-content:flex-start;
--align-items:center;
--label-padding:0 0 0 1em; /* padding short-hand */
--min-item-width: 200px; /* No bigger than 300px */
}

.nclist {
padding:var(--box-padding);
background:var(--bg-color);
color:var(--text-color);
}

.nclist > .ncontain {
max-width:var(--contain-max-width);
}

.nclist_group {
list-style-type:none;
padding:0; 
margin:0;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(var(--min-item-width), 1fr));
grid-gap: 1.5em;
}

.nclist_link {
display:block;
text-decoration:none;
}

.nclist_box {
display:flex;
flex-direction:var(--flex-direction);
align-items:var(--align-items);
justify-content:var(--justify-content);
}

.nclist_imgcontain {
width:50px;
height:50px;
overflow:hidden;
}

.nclist_image {
max-width:100%;
height:auto;
object-fit:cover;
display:block;
}

.nclist_label {
padding:var(--label-padding);
flex-grow:1;
}

.nclist_after {
margin-top:var(--gap);
}

/* NC Media 

<div class="ncmedia">
<div class="ncontain">
  <div class="ncmedia_media">
    <!--
    <a class="ncmedia_link" href="#" target="_blank">
      <img class="ncmedia_image" src="https://picsum.photos/1000/700?random" alt="A picture" />
    </a> 
    -->
    <div class="ncmedia_video">
      <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
    </div>
  </div>
  <div class="ncmedia_text">
    <h2>Heading 2</h2><p>...</p>
  </div>
</div>
</div>

*/

.ncmedia {
--bg-color:#eee;
--text-color:#333;
--box-padding: 0;

--content-width:1000px;

--text-align:left;
--align-items:center;

--media-width: 40%;
--media-gap: 3rem;

--image-height: auto;
--image-focus: center center;  
}

.ncmedia {
padding: var(--box-padding);
color:var(--text-color);
background:var(--bg-color);
}

.ncmedia > .ncontain {
display:grid;
grid-template-columns:var(--media-width) auto;
grid-gap:var(--media-gap);
align-items:var(--align-items);
max-width:var(--content-width);
}

.ncmedia_image {
max-width:100%;
display:block;
Width:100%;
object-fit:cover;
object-position:var(--image-focus);
height:var(--image-height);
}

.ncmedia_video { 
position: relative; 
padding-bottom: 56.25%;
overflow: hidden;
max-width: 100%;
height: auto;
}

.ncmedia_video iframe,
.ncmedia_video object,
.ncmedia_video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:none;
margin:0;
}

.ncmedia_text {
text-align:var(--text-align);
}

/* Modifier: Right */

.ncmedia-right > .ncontain {
grid-template-columns: auto var(--media-width);
}

.ncmedia-right .ncmedia_media { order:2 }


/* Responsive 
@media(max-width:640px){

.ncmedia > .ncontain {
  grid-template-columns:auto;
  grid-gap: 1.5rem;
}

.ncmedia-right .ncmedia_media { order:0 }
.ncmedia_image { height:auto }
.ncmedia_text { padding-bottom: 3rem; }

}

*/



/* NC Rule Heading */

.ncrule { 
--rule-height: 0.08rem;
--rule-color: #ddd;
--rule-spacing: 0.5rem;
display:flex;
align-items:center;
text-align:center;
}

p + .ncrule,
ul + .ncrule,
ol + .ncrule { margin-top:calc(2 * var(--gap)); }

.ncrule:before,
.ncrule:after {
content:'';
display:block;
height:var(--rule-height);
background:var(--rule-color);
flex-grow: 0.5;
position:relative;
}

.ncrule:before { margin-right:var(--rule-spacing) }
.ncrule:after  {  margin-left:var(--rule-spacing) }

/* Modifier: Left Align */

.ncrule-left { text-align:left; }
.ncrule-left:before { display:none; }
.ncrule-left:after { flex-grow:1 }

/* Modifier: Small Uppercase */

.ncrule-small { 
text-transform:uppercase;
font-size:0.9em;
}


/* NC Split 

<section class="ncsplit">
<figure class="ncsplit_image">
  <img class="ncsplit_pic" src="https://images.unsplash.com/" alt="">

  <!-- Optional overlay content -->

  <div class="ncsplit_overlay"></div>
  <div class="ncsplit_imgcontent"><p>...</p></div>

  <!-- End optional overlay content -->

  <figcaption class="ncsplit_caption">A picture of a woman with brown red hair</figcaption>
</figure>
<div class="ncsplit_content">
  <div class="ncsplit_contentcontain">
    <h1>...</h1>
    <p>...</p>
  </div>
</div>
</section>

*/

.ncsplit {
--image-position: center center;
--text-color:#333;
--bg-color:#f2f2f2;
--text-space:3em;
--box-min-height:550px;
--content-max-width:400px;
--display-caption:block;
--caption-align: center;

--image-content-padding: var(--gap);
--overlay-color:#000;
--opacity:0.3;
--text-horizontal: center;
--text-vertical: center;
--image-content-color:#fff;

/* Global Variable */
--width-max: 1400px;
}

.ncsplit { 
width:100%;
display:flex; 
min-height:var(--box-min-height);
background:var(--bg-color);
}

.ncsplit_image,
.ncsplit_content { 
flex-basis:50%; 
display:flex;
flex-grow:1;
flex-direction:column;
}

.ncsplit_image { 
background-size:cover;
background-color:#aaa;
justify-content:flex-end;
overflow:hidden;
position:relative;
margin:0; padding:0; border:none;
}

.ncsplit_pic {
width:100%;
height:100%;
position:absolute;
left:0; right:0; bottom:0; top:0;
max-width:100%;
object-fit:cover;
object-position:var(--image-position);
display:block;
}

.ncsplit_caption {
position:absolute;
display:var(--display-caption);
width:100%;
color:#fff;
padding:var(--gap, 1.5rem);
padding-top:calc(var(--gap,1.5rem) * 3);
font-size:0.8em;
text-align:var(--caption-align);
background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
}

.ncsplit_content {
 color:var(--text-color);
 justify-content:center;
 align-items:flex-start;
 padding-right:var(--gap);
 background-color:var(--bg-color);
}

.ncsplit_contentcontain { 
width:100%;
max-width:calc( var(--width-max) / 2 );
padding-left:var(--text-space);
padding-right:0;
}

.ncsplit_contentcontain > :last-child {
margin-bottom: 0;
}

/* Optional Image Overlay Content */

.ncsplit_overlay,
.ncsplit_imgcontent {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
display: block;
}

.ncsplit_overlay {
background-color:var(--overlay-color);
opacity:var(--opacity);
}

.ncsplit_imgcontent {
display: flex;
flex-direction: column;
padding:var(--image-content-padding); 
align-items: var(--text-horizontal);
justify-content: var(--text-vertical);
color:var(--image-content-color);
}

/* Modifier Flip 
 Change the position of the image
*/

.ncsplit-flip .ncsplit_content {
order:-1;
padding-left:var(--gap);
padding-right:0;
align-items:flex-end;
}

.ncsplit-flip .ncsplit_contentcontain {
padding-right:var(--text-space);
padding-left:0;
}


/* Modifier: Center */

.ncsplit-center .ncsplit_content{
align-items:center;
padding-left:0 !important;
padding-right:0 !important;  
}

.ncsplit-center .ncsplit_contentcontain{
padding-left:0 !important;
padding-right:0 !important;
align-items:center;
text-align:center;
max-width: var(--content-max-width);
width:calc(100% - 2 * var(--gap));
}

/* breakpoint stack 

@media(max-width:640px){
  .ncsplit {
  flex-direction:column;
  min-height:0;
  }

  .ncsplit_image {
  min-height:none;
  width:100%;
  }

  .ncsplit_pic {
  position:static;
  }

  .ncsplit_content {
  padding:var(--gap) 0 !important;
  display:block;
  }

  .ncsplit_image, 
  .ncsplit_content {
  flex-basis: auto;
  }

  .ncsplit_contentcontain {
  max-width:var(--content-max-width);
  width:calc(100% - 2 * var(--gap));
  margin:0 auto;
  padding-left:0 !important;
  padding-right:0 !important;
  }



/* Modifier: Make the image always stack on top 
.ncsplit-imagetop .ncsplit_image { order:1 }
.ncsplit-imagetop .ncsplit_content { order:2 }

}
*/



/* NC Text 

<div class="nctext nctext-dropcap">
<div class="ncontain">

  <div class="nctext_before">
    <h2>A Heading</h2>
  </div>
  
  <div class="nctext_paragraphs">
    <p>...</p>
  </div>
  
  <div class="nctext_after">
    <p>Something else to follow</p>
  </div>
  
</div>
</div>


*/

.nctext {
--box-padding: 3em 0;
--box-text-color:inherit;
--box-bg-color:#fff;

--column-gap: 3rem;
--column-width: 220px;
--column-count: auto;
--column-rule:1px solid;

--text-align: left;
--text-indent: var(--gap, 1.5rem);
--text-width: 1000px;

--cap-size:5em;
--cap-color:inherit;
--cap-font: var(--serif, 'Domine');
}


.nctext {
background:var(--box-bg-color);
padding:var(--box-padding);
color:var(--box-text-color);
}

.nctext > .ncontain {
max-width: var(--text-width);
}

.nctext_paragraphs p { margin-top:0; }

.nctext > .ncontain > *:last-child {
margin-bottom:0;
}

.nctext_after {
margin-top:var(--gap, 1.5rem);
}

/* Modifier for columns 

If columns, must have class ".nctext-cols" added to parent to work
*/

.nctext-cols .nctext_paragraphs {
column-gap: var(--column-gap);
column-width: var(--column-width);
column-count:var(--column-count);
column-rule:var(--column-rule);
text-align:var(--text-align);
}

@media(min-width:535px){
.nctext-cols .nctext_paragraphs p {
    margin-bottom:0;
}
.nctext-cols .nctext_paragraphs > p:not(:first-of-type) {
  text-indent:var(--text-indent);
}
}
/* Modifier: Adds a dropcap to the first paragraph */

.nctext-dropcap .nctext_paragraphs > p:first-of-type:not(:focus)::first-letter {
  float: left;
  font-size: var(--cap-size);
  line-height: 1;
  padding-right: var(--gap, 1.5rem);
  font-weight: normal;
  height: 1em;
  position: relative;
  top: 0;
  font-family: var(--cap-font);
  margin: 0 !important;
  color:var(--cap-color);
}



/* NC Divider 

<div class="ncdivider ncdivider-overlaypreceding ncdivider-topleft">
<div class="ncdivider_container">
  <svg class="ncdivider_svg" xmlns="http://www.w3.org/2000/svg" width="1534" height="104" viewBox="0 0 1534 103">
    <path d="M623,987.772l1534,104H623Z" transform="translate(-623 -987.772)" fill="#fff" class="ncdivider_color"/>
  </svg>
</div>
</div>

*/

.ncdivider {
position:relative;
width:100%;
}

.ncdivider_container {
width:100%;
left:0;
}

.ncdivider_svg {
display:block;
width:100%;
height:auto;
transform-origin:center
}

.ncdivider_color {
fill:#000
}

/* 
Modifiers
Position options */

.ncdivider-overlaynone .ncdivider_container {
position:static;
}

.ncdivider-overlaypreceding .ncdivider_container {
position:absolute;
bottom:100%;
}

.ncdivider-overlaysucceeding .ncdivider_container {
position:absolute;
top:100%;
z-index: 5;
}


/* 
Modifiers 
Rotating options */

.ncdivider-topleft .ncdivider_svg {
/* point top left */
transform:scale(1, 1);
}

.ncdivider-topright .ncdivider_svg {
/* point top right */
transform:scale(-1, 1);
}

.ncdivider-bottomright .ncdivider_svg {
/* point bottom right */
transform:rotate(180deg);
}

.ncdivider-bottomleft .ncdivider_svg {
/* point bottom left */
transform:rotate(180deg)scale(-1, 1);
}


/* NC Search Reveal 

<header>

<!-- form sits as first thing in the header -->
<form class="ncsearchreveal">
  <input class="ncsearchreveal_input" id="ncsearchinput" name="s" type="search" placeholder="Search 300+ resources...">
  <button class="ncsearchreveal_close" tablindex="0" type="button" title="close search">
    <svg class="ncsearchreveal_x"></svg>
  </button>
</form>

<div class="ncontain">

  <b class="logo">Logo</b>
  <nav>...</nav>

  <!-- Reveal search box trigger label element -->
  <label class="ncsearchtrigger" for="ncsearchinput" title="reveal search box">
    <span hidden="">Search</span> 
    <svg class="ncsearchtrigger_icon"></svg>
  </label>

</div>
</header>

*/

.ncsearchtrigger {
cursor:pointer;
padding:3px; /* for Firefox and Edge */
align-self: center;
}

.ncsearchtrigger_icon {
display:block;
height:1.5em;
width:auto;
fill:#000;
transition:0.3s;
}

.ncsearchtrigger:hover .ncsearchtrigger_icon {
fill:#000;
}


/* Search form, field, and close button */

.ncsearchreveal {
--bg-color-start: #fff;
--bg-color-end: #fafaef;
--text-color: #000;
--text-size:1.2em;
--text-align:left;
--field-padding:0.5rem 1.5rem;
--field-border: solid 1px #000;
--x-button-height:1.5em;
--x-button-color: #fff;
--x-button-color-hover:#fff;
}

.ncsearchreveal {
position:absolute;
top:0;left:0;
width:100%;
height:100%;
margin:0;

/* for the positioning of the close button */
display:flex;
align-items:center;
justify-content:flex-end;
padding-left:1.5rem;
padding-right:1.5rem;

/* Must be hidden for header elements to interactive */
visibility:hidden;
}

.ncsearchreveal_input {
position:absolute;
left:0;
bottom:100%;
height:100%;
width:100%;
padding:var(--field-padding);
border:var(--field-border);
outline:none;
font-size:var(--text-size);
background-color:var(--bg-color-start);
color:var(--text-color);
z-index:4;
text-align:var(--text-align);
transition:0.3s;
visibility:visible; /* Must be visible to be interactive */
}

/* Currently this is hidden in place of a close field button */

.ncsearchreveal_input::-webkit-search-cancel-button {
 -webkit-appearance: none;
height:1.5rem;
width: 1.5rem;
cursor:pointer;
background-image:url('data:image/svg+xml;utf8,<svg alt="x icon" class="togglesearch active" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20" height="20" viewBox="0 0 131.395 131.396" enable-background="new 0 0 131.395 131.396" xml:space="preserve"><g fill="red"><rect x="-18.213" y="56.698" transform="matrix(0.7071 0.7071 -0.7071 0.7071 65.698 -27.2126)" width="167.821" height="17.999"></rect><rect x="56.697" y="-18.212" transform="matrix(0.7071 0.7071 -0.7071 0.7071 65.701 -27.2126)" width="18" height="167.819"></rect></g></svg>');
  background-repeat:no-repeat;
background-position:center;
background-size:contain;
display:none;
}

.ncsearchreveal_input:focus {
bottom:0;
top:auto;
box-shadow:0 0 1em rgba(0,0,0,0.3);
background-color:var(--bg-color-end);
}

.ncsearchreveal_close {
padding:0;
background:none;
border:none;
display:block;
cursor:pointer;
transition:0.1s;  
visibility:hidden;
opacity:0;
}

.ncsearchreveal_input:focus + .ncsearchreveal_close{
visibility:visible;
z-index:6;
opacity:1;
}

.ncsearchreveal_x {
height:var(--x-button-height); width:auto; display:block;
}

.ncsearchreveal_xcolor { fill:var(--x-button-color); transition:0.3s; }

.ncsearchreveal_close:hover .ncsearchreveal_xcolor {
fill:var(--x-button-color-hover);
}

/* NC Card 

<div class="ncard">
<a class="ncard_link" href="#">
  <div class="ncard_container">
    <div class="ncard_image">
      <div class="ncard_imgcon">
        <img class="ncard_img" src="" alt="" />
      </div>
    </div>
    <div class="ncard_text">
      <!-- Everything in here is up to the creator -->
      <b class="ncard_pretext">Read Next &rarr;</b>
      <div class="ncard_title">Is God mad at you for not going to church?</div>
      <!-- end creative HTML -->
    </div>
  </div>
</a>
</div>


*/

.ncard {
--card-padding:0;
--card-bg-color:#fff;
--card-bg-color-hover:#fff;
--card-flex-direction:row;
--card-border: solid 1px #ddd;
--card-border-hover: solid 1px #aaa;
--card-bshadow: none;

--image-width:30%;
--image-height:70%;
--text-padding:1em;

--border-radius: 5px;

--text-size:1em;
--text-color: #000;
--text-color-hover: #000;

--trans-speed:0.3s;
}

.ncard { width:100%; max-width:100%; position:relative; }

.ncard_link {
text-decoration:none;
color:inherit;
display:block;
}

.ncard_container {
display:flex;
position:relative;
background:var(--card-bg-color);
padding:var(--card-padding);
flex-direction:var(--card-flex-direction);
border:var(--card-border);
box-shadow:var(--card-bshadow);
transition:var(--trans-speed);
border-radius: var(--border-radius);
overflow: hidden;
}

.ncard:hover .ncard_container {
background:var(--card-bg-color-hover);
border:var(--card-border-hover);
}

.ncard_image {
flex-basis:var(--image-width);
min-width:var(--image-width);
overflow:hidden;
background-color: #eee;
}

.ncard_imgcon {
  padding-top:var(--image-height);
  width:100%;
  height:var(--image-height);
  min-height:100%;
  display:block;
  position:relative;
  /*
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center; */
}

.ncard_img {
  position:absolute;
  object-fit:cover;
  top:0; left:0;
  display:block;
  width:100%;
  height:100%;
  transition:var(--trans-speed);
}

.ncard:hover .ncard_img {
  transform:scale(1.4);
}

.ncard_text {
display:flex;
flex-grow:1;
flex-direction:column;
justify-content:center;
font-size:var(--text-size);
color:var(--text-color);
padding:var(--text-padding);
transition:var(--trans-speed);
min-width: 0; /* This is needed if you use truncated content within a flexbox */
}

.ncard:hover .ncard_text {
color:var(--text-color-hover);
}

/* NC Card box */

.ncard_box {
--box-padding: 3em 0;
--box-text-color: #000;
--bg-color: #fff;
--contain-max-width: 1400px;
}

.ncard_box {
padding: var(--box-padding);
color: var(--box-text-color);
background: var(--bg-color);
}

.ncard_box > .ncontain {
max-width: var(--contain-max-width);
}

.ncard_after {
margin-top:var(--gap);
}

/* ----------------- Single Link --------------- */

.ncard-singlelink { 
--card-bshadow: 0 1px 0.3rem rgba(0,0,0,0.2);
--image-width: 25%;
margin: var(--gap) 0;
}
.ncard-singlelink .ncard_posttext { font-size: 0.7em; margin-top: 0.5rem; }
.ncard-singlelink .ncard_title { font-weight: bold; white-space: normal; line-height: 1.3; }
.ncard-singlelink .ncard_url { 
  font-size: 0.5em; display:block; overflow:hidden; white-space: nowrap;  text-overflow: ellipsis; 
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  opacity: 0.8;
  letter-spacing: 1px;
  max-width: 100%;
  min-width: 0;
  width: 100%
}

.ncard-singlelink .ncard_url svg {
  height: 1em;
  display: inline-block;
  margin-right: 0.3em;
}

.ncard-singlelink .ncard_url svg path {
  fill:var(--link-color)
}

.ncard-singlelink .ncard-noimage {
  background-color: #eee;
  background-image: url(../img/icon-link.svg);
  background-position:center;
  background-repeat:no-repeat;
  background-size: 30% auto;
}

/* ------- Responsive ------- 

@media(max-width:430px){

.ncard {
  --card-flex-direction:column;
  --image-width:30%;
  --image-height:40%;
  --text-size:0.8em;
  --text-padding:1em;
}

}

*/