/*SETUP==========================================================*/

html {
/*  scroll-padding-top: 4rem;*/
}

body {
/* overflow: hidden;*/
 font-family: Helvetica, Arial, sans-serif;
 font-size: 12pt;

 --main-green: #41ad49;
}

.debug {
/*display: none;*/

}

.page {
    display: none;
}

.default {
    display: block;
}

:target {
    display: block;
}

:target ~ .default {
    display: none;
}

.hidePg {
  display: none;
}

.invisibleSize {
  visibility: hidden;
}

a:-webkit-any-link {
    text-decoration: none;
}

.body {
/*  display: grid;
  grid-template-columns: auto auto auto;*/
zoom: 100%;
  /*overflow: scroll;*/
  justify-items: center;
 /* margin-top: 5%;
  margin-bottom: 10%;*/
/*  min-width: 1400px;*/


}

.container {
  margin-left: max(20px, 5%);
  margin-right: max(20px, 5%);
  /*min-width:80%;*/
}


/*HEADER, LOGO & NAVIGATION==========================================================*/

.header {
  /*border-bottom: 4px solid;*/
  padding:4px;
}

.logo {
  text-align: left !important;
  font-size: 2.7em;
  color:var(--main-green);
  font-style: italic;
  display:inline;
  text-align: left;
  font-weight: 600 !important;
}

.logo:hover {
  color:#41ad49; !important;
  font-style: italic !important;
  font-weight: 600 !important;
}

.logo_future {
  color:black;
  font-style: normal;
  font-weight: 300 !important;
  display:inline;
}

.logo_future:hover {
  color:#41ad49 !important;
  font-style: italic !important;
  display:inline;
}


.logo a {
  color: #41ad49;
}

.logo img{
  max-height: 130px;
  width:auto;
  zoom: 100%;
}


.nav {
 text-align: left;
text-decoration-style: none;
margin-bottom: 14px;
}

.nav ul {
 list-style-type: none;
padding-left: 0px;
margin-bottom: 0px;
display: inline;
clear: both;
}

.nav li {
color: black;
text-decoration-style: none;
display: inline;

}


.nav li a {
color: black;
text-decoration-style: none;
font-weight: bold;
font-size: 0.9em;
display: inline;
padding-bottom: 2px;
border-bottom: 2px solid white;
margin-inline-end: 5px;
}

.nav li a .selected {
  /*color: black;*/
  /*border-bottom: 2px solid white;*/
}

.nav li a .wide {
  /*border-bottom: 2px solid white;*/
}

.nav li a .wide_selected {
  /*border-bottom: 2px solid white;*/
}

.nav li:hover {
  color: black;
  /*background-color: white;*/
/*text-decoration: underline;*/
  /*border-bottom: 2px solid white;*/
}



.subNav {
    padding-top:2px;
}

.subNav ul {
  padding-top:2px;
}


.nav li a:hover {
color: #41ad49;
font-style: italic;
}


.active {
  /*border-bottom: 1px solid white;*/
    font-style: italic;
}

.active a {
  color:var(--main-green) !important;
}

a.active {
/*    color: #41ad49 !important;*/
}


.nav li a.active {
  color:var(--main-green);
  font-weight: 800;
  font-style: italic;
  /*border-bottom: 2px solid #41ad49; */
}

.navExt {

}


.pullHide {
  display: none !important;
  /*visibility: hidden;*/
  animation: fadeOut 0.5s ease-in-out forwards;
}


.pullShow {
  font-weight: 200 !important;
  color: #41ad49 !important;
  font-style: italic;
  animation: fadeIn 0.5s ease-in-out forwards;
}


.pullShow.active {
text-decoration:underline;

}

.pullShow a {
  font-weight: 200 !important;
  color: #41ad49 !important;
}

.nav li a.pullHide {
  display: none !important;
  /*display: none !important;*/
  /*visibility: hidden;*/
}

/*.pullHide li a {
  display: hidden !important;
}
*/



/*ANIMATIONS=================================*/

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}




/*CONTENT CONTAINER==========================================================*/


.content {
/*  min-height:500px;
  height: 500px;*/
  width: 100%;
  overflow: hidden;
  /*min-width: 92%;*/

}


.top {
 /* height: 7.5vh;*/
}



.sidebar {
  border-right: 1px solid lightgrey;
}

.footer {
    /*border-top: 1px solid lightgrey;*/
    background-color: #ccc;

}


.intro_content {
  /*margin: 1px;*/
  --padding_std: 10px;
  padding-top:  calc(var(--padding_std) + 10px);
padding-inline-start: calc(var(--padding_std) + 10px);
padding-inline-end: calc(var(--padding_std) - 2px);
padding-bottom: calc(var(--padding_std) + 10px);
border: 1px solid #666;
/*
    border-inline: 2px solid white;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
*/
    min-width: 800px;
    min-height: 720px;
justify-items: center;
}

.inner {
/*  padding-right: 6%;*/
/*height: 100%;*/
}

.inner2col {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
   column-gap: 0.2em;
  /*grid-template-columns: 200px 1fr 200px;*/
/*  padding-right: 6%;*/
}

/*
.innerProductCol {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-areas:
      "ls  rs"
   ;
   column-gap: 1em;
  padding-right: 6%;
}
*/

.innerProductCol {
  display: grid;
  grid-template-columns: 3fr .1fr .1fr;
  /*grid-template-columns: 1.4fr .2fr .2fr;*/
/*  grid-template-areas:
      "main ls rs"
   ;*/
   column-gap: 0.2em;
   /*column-gap: 1em 0.5em;*/
  /*grid-template-columns: 200px 1fr 200px;*/
  /*padding-right: 6%;*/
  /*      "ls2 main2 rs2"*/
}




.rightCol {
    display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-template-rows: 0.2fr 0.2fr 0.2fr;
         justify-content: space-between;
         align-items: end;
}

.server_illus {
 max-width: 20vw;
  padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
 padding-bottom: 15px;
}

.rightCol img {
  width: 100%;
}

.rightCol p {
display: block;
}

.gridded {
/*      grid-auto-rows: 1fr;*/
}

.img_cell {
  height: 100%;
}


.inner3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
/*    grid-template-rows: 1fr 1fr 1fr;*/
/*  grid-template-areas:
      "ls main rs"
      "ls2 main2 rs2"
   ;*/
   column-gap: 2em;
  /*grid-template-columns: 200px 1fr 200px;*/
  /*      "ls2 main2 rs2"/
  padding-right: 6%;
}

.inner3col main {
  border-right: 2px dotted #41ad49;
}

main {
   grid-area: main;
   /*background-color: #cccccc;*/
}


/*aside.product_display {
     grid-area: ls !important;
}*/

.product_feature {
/*grid-column: auto / span 3;*/
grid-row: auto / span 4;
      border-right: 2px dotted #41ad49;
      /*padding-right: calc(var(--padding_std) + 5px);*/
      margin-right: calc(var(--padding_std) + 5px);
}

.story_feature {
/*grid-column: auto / span 3;*/
grid-row: auto / span 2;
      border-right: 2px dotted #41ad49;
      /*padding-right: calc(var(--padding_std) + 5px);*/
      margin-right: calc(var(--padding_std) + 5px);
/*      min-width: 170px;*/
/*      max-width: 30%;*/
height: 100%;
}

.story_feature p {
  font-size: 1.3em;
  padding: 0.2em;
  margin-right: calc(var(--padding_std)*2);
    min-width: 200px;
}

.narrowCol {
  min-width: 200px;
}

.wideCol {
  min-width: 30%;
}

.server_illus {
  padding-left: calc(var(--padding_std) - 5px);
}

.server_illus img {
/*margin-left: calc(var(--padding_std) - 5px);*/
margin-right: calc(var(--padding_std)*1);
margin-bottom: calc(var(--padding_std)*2);
object-fit: fill;
}

.wideImg {
max-width:96%;
}

.narrowImg {
  max-height: 25vh;
  width: auto;
}


.product_subhead {
  display: inline;
  grid-column:  auto / span 2;
}


.product_subhead ul {
 list-style-type: none;
padding-left: 0px;
margin-bottom: 12pt;
clear: both;
}

.product_subhead li {
text-decoration-style: none;
display: inline;

}

.product_subhead a {
/*  color: var(--main-green);*/
color: black;
font-weight: bold;
  font-size: 1em;
/*  font-style: italic;*/
  margin-block-start: 0em;
/*    margin-block-end: 0em;*/
}

a.active  {
color: var(--main-green);
  font-weight: bold;
  text-decoration: underline;
}
/*
aside:first-of-type {
   grid-area: ls;
}

aside:last-of-type {
   grid-area: rs;
}
*/

p {
  max-width: 800px;
}



/* GRID */

/*  CSS GRID STYLES */

   .gridlayout {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       grid-template-rows: auto 1fr auto; /* Example layout */
       grid-gap: 1rem;
       max-width: 1200px;
   }

   .gcell {
       border: 2px solid #000;
       border-radius: 3px;
       font-family: arial;
       font-weight: bold;
       font-style: oblique;
   }




.thumbnail_int{

   object-fit: cover;

   overflow: hidden;

   height: 100px; 

   width : 100px;

}  





.thumbnail {

  position: relative;

  margin: 1rem;

  padding-bottom: 100% ;

  border: 1px solid gray;

}


.cell_content {
  display: flex;
  flex-direction: column;
       justify-content: space-between;
 /* justify-content: flex-end;*/
}

.product_display {
  display: flex;
  flex-direction: column;
       justify-content: space-between;
 /* justify-content: flex-end;*/
}


.endNav {
   display: grid;
/*align-self:end;*/
/*justify-self: start;*/
          /*vertical-align: bottom;*/
}

.endNav.previous {
  display: inline;
}

.endNav.next {
display: inline;
align-self:end;
justify-self: start;
          /*vertical-align: bottom;*/
}

/*BODY TEXT==========================================================*/


.intro_content p {
/*max-width:800px;*/
}

.below {
  padding-top: 0px;
  margin-top: 0px !important;
      margin-block-start: 0px !important;
  margin-bottom: 2em;
}



.intro_content h2 {
 font-family: Helvetica, Arial Black, sans-serif;
font-weight: 900;
font-size: 1.47em;
margin-bottom: 10px;
padding-bottom: 0px;
/*text-decoration: underline;
border-bottom: 4px solid black;*/
}


h5 {
  display: inline !important;
   font-family: Helvetica, Arial Black, sans-serif;
font-weight: 900;
font-size: 1.47em !important;
margin-block-start: 0em !important;
    margin-block-end: 0em !important;
}





.intro_content p a {
  color: black;
  text-decoration: underline;
}

.intro_content p a:hover {
  color: #a82a2a;
  text-decoration: none;
}


.intro_content p i {
/*  color: #999;*/
  font-style: italic;
}






.inner3col h2 {
/*font-family: Helvetica, Arial Black, sans-serif;*/
font-weight: 600;
font-size: 1.2em;
margin-bottom: 10px;
/*  color: #41ad49;
  font-style: italic;*/
padding-bottom: 0px;
/*text-decoration: underline;
border-bottom: 4px solid black;*/
}



/*PRODUCT DISPLAY==========================================================*/



.productItem {
/*--product_item_width: 200px;*/
/*--product_thumb_width: 180px;*/
--product_base_width: 135px;
--product_thumb_width: var(--product_base_width);
/*product thumbnails*/
/*max-width: 20%;*/
width: calc(var(--product_thumb_width) + var(--padding_std));
background-color: #fff;
/*border: 1px solid black;*/
padding-left: var(--padding_std);
padding-right: calc(var(--padding_std) - 5px);
padding-top:2px;
padding-bottom: var(--padding_std);
/*position: relative;
top: -40px;
  z-index: -1;*/
}

.productItem:first-child {
/*border: 1px solid red;*/
}

.productItem:nth-child(3n) {
  /*targets 2nd row of 2col layout*/
}

.productPreview {
  text-align:center;
}


.productItem {
}

.productItem img {
  /*height: 180px;
  object-fit: fill;*/
  max-width: var(--product_thumb_width);
  /*width: 180px;*/
  opacity: 0.8;
}

.productItem.active img {
  opacity: 1;
}

.productItem img:hover {
  opacity: 1;
}


.productPreview {
  max-width: 30%;
}

.productPreview img {
  /*max-height: 480px;
  object-fit: fill;*/
}

#productDiv {
/*Container for product showcase display*/
/*max-width: 15%;*/
/*padding-right: calc(var(--padding_std) + 5px);*/
padding-right: calc(var(--padding_std) - 7px);
padding-top: var(--padding_std);
padding-bottom: var(--padding_std);
background-color: #fff;
/*border: 1px solid black;*/
border-bottom: 2px solid black;
}

#productDiv img {
/*  max-width: 480px;*/
 max-width: 98%;
margin-left: -10px !important;
  object-fit: fill;
}

.productPreviewText {
  font-style: normal;
}

p.productPreviewText {
    margin-block-start: 0.6em !important;
    font-size: 0.9em;
    font-weight: 300;
    /*border: 1px solid black;*/
/*    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;*/
}

.productItem a {
   color: black !important;
}


.productItem a:hover {
 /*color:#41ad49 !important;
  font-style: italic !important;*/
   text-decoration: underline;
}

.productItem a:visited {
  color: black !important;
}