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

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

body {
/* overflow: hidden;*/
/*--height_constant: 67vh;*/
/*68vh*/
 --main-green: #41ad49;
 --height_constant: 75vh; /*Max height of container*/
 --height_stretch: 6vh; /*Height subtracted from container for footer*/
  --padding_std: 10px;
  --column_std: 2em;
  --wide_height_constant: 0vh;
  --vertical_height_constant: 0vh;
  --new_height_constant: 76vh;
  

 --section_border_style: 3px dotted #41ad49;
}


.product_feature.store {
    grid-template-rows: 0.95fr 0.05fr;
    display: grid;
}

.intro_container {
  max-width: 90vw;
  padding-right: 1.5%;
}

.intro_splash img {
 width: 100%;
 /*padding-top: calc(var(--padding_std)*2 + 5px); */ 
 /*Issues w narrow border under navigation at 1600px wide*/
  padding-top: calc(var(--padding_std)*2);  
padding-bottom: calc(var(--padding_std)*1.5 + 10px);  
}



/*
.mix_col {
  display: grid;
  grid-template-columns: 0.6fr 0.2fr 0.4fr;
   column-gap: 0.2em;
  padding-top: var(--intro_content_padding);
}
*/

.mix_col {
  display: grid;
  /*grid-template-columns: 0.5fr 0.5fr;*/
  grid-template-columns: 0.4fr 0.6fr;
   column-gap: 0.2em;
  padding-top: var(--intro_content_padding);
  /*grid-template-columns: 200px 1fr 200px;*/
/*  padding-right: 6%;*/
}

.mix_col {
  grid-template-rows: 0.5fr 0.5fr;
}


.top_feature {
    grid-column: auto / span 3;
}



  .wideFeature {
    width: 80%;
  }

.story {
grid-row: auto / span 2;
      
      /*padding-right: calc(var(--padding_std) + 5px);*/
      margin-right: calc(var(--padding_std) + 5px);
/*      min-width: 170px;*/
/*      max-width: 30%;*/
height: 100%;
padding-top: var(--intro_content_padding);
}


.top_feature img {
width: auto;
  max-height: 44vh;
  margin-left: 5%;
}


.mix_col {
  min-height: calc(var(--height_constant) - var(--height_stretch));
max-height: calc(var(--height_constant) - var(--height_stretch));
}

.debug {
/*display: none;*/

}


.js_debug {
  display: none;
}

.page {
    display: none;
}

.default {
    display: block;
}

:target {
    display: block;
}

:target ~ .default {
    display: none;
}

.hidePg {
  display: none;
}

.invisibleSize {
  visibility: hidden;
}




.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%;*/
}

.productItem:last-of-type {

}


.fr_logo_green {
  display: inline !important;
font-style: italic;
font-weight: bold;
  color: var(--main-green);
}

.fr_logo_black{
  display: inline !important;
font-weight: bold !important;
}


.small_green {
  display: inline !important;
font-weight: bold;
  color: var(--main-green);
}


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

.header {
  /*border-bottom: 4px solid;*/
  padding-left:4px;
  padding-top:4px;
  padding-bottom: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;
    background-image: url(img/header_short5c.svg);
  background-position: right;
  background-repeat: no-repeat;
}

.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;
  background-color: white;
}

.logo_rack {
  background-color: white;
  padding-right: 15px;
}



.logo a {
  color: #41ad49;
}

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


.nav {
 text-align: left;
text-decoration-style: none;
margin-bottom: calc(var(--padding_std) + 2px);
}

.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;*/
}


.subNav {
    padding-top:2px;
}

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


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


.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 {

}



/*#storageLink, #furnitureLink {
  padding: 5px;
  padding-right: 7px;
  border: 1px solid var(--main-green);
  text-decoration: none;
  font-weight: normal;
}

#storageLink.active, #furnitureLink.active {
  padding: 5px;
  padding-right: 7px;
  color:white;
  background-color: #90b592;
  border: 1px solid #90b592;
  text-decoration: none;
}

#storageLink:hover, #furnitureLink:hover {
  padding: 5px;
  padding-right: 7px;
  color:white;
  background-color: var(--main-green);
  border: 1px solid var(--main-green);
  
}

#storageLink.active:hover, #furnitureLink.hover {
  padding: 5px;
  padding-right: 7px;
  color:white;
  background-color: white;
  border: 1px solid var(--main-green);
  color: var(--main-green);
  text-decoration: none;
  font-style: normal;
}
*/


  /*background-color: #badbbc;
  8ca58e
  
  */
/*font-style: italic;*/

.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;
}
*/

.menu_spacer {
/*margin-top: var(--padding_std);*/
}



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

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

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

.fade-in-element {
    opacity: 0; /* Start invisible */
    transition: opacity 2s ease-in; /* 2s fade-in effect */
}

.fade-in-element.show {
    opacity: 1; /* Fully visible */
}


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


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

}


#content {
/*  height: 100%;*/
}

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



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

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

}


.product_showing {
  width: 95%;
}

.breadcrumb_product {
      position: absolute;
    bottom: 16vh;
}

.intro_content {
  /*margin: 1px;*/
  --intro_content_padding: calc(var(--padding_std));
padding-right: 1vw;
border: 1px solid #666;
    min-width: 800px;
/*    min-height: 620px;*/
min-height: calc(var(--height_constant));
justify-items: center;
}



.inner1col {
    max-width: 760px;
    padding-right: 10%;
}

.inner1col.questions {
    padding-right: 6%;
}


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

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

.inner2col.story_servers {
  grid-template-rows: 0.2fr 0.8fr
}


/*
.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;
   padding-top: var(--intro_content_padding);
   /*column-gap: 1em 0.5em;*/
  /*grid-template-columns: 200px 1fr 200px;*/
  /*padding-right: 6%;*/
  /*      "ls2 main2 rs2"*/
}

.innerProductCol.twocol {

}



.rightCol {
    display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-template-rows: 0.1fr 0.1fr;
/*  grid-template-rows: 0.1fr 0.1fr 0.1fr;*/
         justify-content: space-between;
         align-items: end;
         padding-left: 15px;
}

.server_illus {

}

.grid_illus {
  /*
 max-width: 20vw;*/
 max-width: 20vw;
  padding-top: calc(var(--intro_content_padding) + 20px);
/* padding-bottom: 35px;*/
/*padding-bottom: calc(4vh + 5px);*/
padding-bottom: calc(4vh);
/*margin-right: 1vw;
    margin-left: 1vw;*/
padding-right: var(--intro_content_padding);
padding-left: var(--intro_content_padding);
}






.rightCol img {
  width: 100%;
}


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

.img_cell {
  height: 100%;
}


.inner3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding-top: var(--intro_content_padding);
/*    grid-template-rows: 1fr 1fr 1fr;*/
/*  grid-template-areas:
      "ls main rs"
      "ls2 main2 rs2"
   ;*/
   column-gap: 2em;
   padding-right: 3px;
/*     min-height: var(--height_constant);
*/
   min-height: calc(var(--height_constant) -11vh);
      max-height: calc(var(--height_constant) -11vh);
/*min-height: 56vh;*/
/*min-height: calc(var(--height_constant) - 12vh);*/
/*min-height: calc(var(--height_constant) - 15vh);*/
/*  min-height: var(--height_constant);*/
  /*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;*/
}



/*Benefits text part of column idea*/
/*.inner3col.benefit_col {
    grid-template-rows: 0.2fr 0.8fr;
}

.text_feature {
  grid-column: auto / span 3;
}
*/



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

.product_feature {
  --margin_feature: calc(var(--padding_std)*2);
/*grid-column: auto / span 3;*/
grid-row: auto / span 5;
      border-right: var(--section_border_style);
      /*padding-right: calc(var(--padding_std) + 5px);*/
      margin-right: calc(var(--margin_feature) + 5px);
/*      border-bottom: 2px solid black;*/

/*EXPERIMENTAL*/
/*
    grid-template-rows: 0.1fr 0.8fr 0.1fr;
    display: grid;
    */

}

.written_feature {
  padding-top: var(--intro_content_padding);
}

.product_box {
  max-width: 75vw;
}


.product_feature, .story_feature, .inner1col, .inner2col, .written_feature, .mix_col {
  min-height: calc(var(--height_constant) - var(--height_stretch));
max-height: calc(var(--height_constant) - var(--height_stretch));
}


#compress {
  display: none;
}

.inner1col .story_feature, .inner1col .text_feature {
  border-right: none;
}

.inner2col .story_feature, .inner2col .text_feature {
  border-right: var(--section_border_style);
}

.inner3col .cell_feature {
  border-right: var(--section_border_style);
}

.inner3col .cell_feature:last-of-type {
  border-right: none;
}


.cell_feature {
  padding-right: calc(var(--padding_std)*2);
}



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

.text_feature {
/*grid-column: auto / span 3;*/
grid-row: auto / span 2;
      
      /*padding-right: calc(var(--padding_std) + 5px);*/
      margin-right: calc(var(--padding_std) + 5px);
/*      min-width: 170px;*/
/*      max-width: 30%;*/
height: 100%;
padding-top: var(--intro_content_padding);
}

.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%;
}


.wide_server {
    grid-column: auto / span 2;
  max-height: 15vh;
  max-width: 30vw;
}

  

/*
.wide_server {
    grid-column: auto / span 2;
}*/


.narrow_server {

}

.narrowImg {
  max-height: 23vh;
  width: auto;
margin-top: -15px;
}

.brighter {
    filter: brightness(1.1) saturate(0.95);
}

.singleImg {
max-width:96%;
  max-height: 45vh;
  width: auto;
  padding-top:var(--intro_content_padding);
}

.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;
margin-right: 5px;
}

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

.product_subhead a:hover {
text-decoration: none !important;
}

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;
}

.breadcrumb_living {
/*  padding-right: 20px;*/
}







#product_category_info {
  margin-bottom: calc(var(--padding_std)*1.5);
/*  margin-bottom: calc(var(--padding_std)*3);*/
}

.products_list {
  margin-top: calc(var(--padding_std)*2);
}

/* 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;*/
    border-top: 2px solid black;
    padding-top: var(--padding_std);
    margin-top: calc(20px + var(--padding_std));
}

.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: 600;
font-size: 1.47em;*/
font-weight: 600;
font-size: 1.5em;
  z-index: 5;
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;
}



.smallPhoto {
  width: 65%;
  height: 65%;
  margin-top: -5px;
}




.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==========================================================*/

body {
  --product_base_width: 115px;
}


.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;*/
}

  .tallProduct.productItem img {
width: calc(var(--product_thumb_width) - 55px);
padding-left: 15px;
}

  .tallProductView {
/*width: 80%;*/
height: 70%;
padding-left: 15px;
margin-top: -20px;
}

  .tallerProductView {
/*width: calc(var(--product_thumb_width) - 75px);*/
/*width: 70%;*/
/*height: 75%;*/
/*width: 70%;*/
padding-left: 15px;
margin-top: -20px;
}


.tallFeature {
 margin-top: -20px;
 margin-bottom: 20px;"
}



#productDiv.product_showing {

}


  .wideProduct.productItem img {
width: calc(var(--product_thumb_width) - 10px);
margin-bottom: 20px;
}

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

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

.productPreview {
  text-align:center;
}


.grid_illus img {
  max-width: calc(var(--product_base_width) - 10px);
}

.productItem {
}

.productItem img {
  /*height: 180px;
  object-fit: fill;*/
  max-width: calc(var(--product_thumb_width));
  /*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%;
}


/*
.wideFeature img {
  max-height: calc(var(--height_constant) - 5vh);
}
*/


.featureBorders {
  margin-top: 10px;
  margin-bottom: 10px;
}

.productPreview img, .product_showing img {
  /*max-height: 480px;
  object-fit: fill;*/
  /*filter: contrast(150%);*/
/*  filter: brightness(1.25) contrast(110%) grayscale(10%)
    hue-rotate(1deg)saturate(95%);*/
      filter: brightness(1.2) contrast(110%) grayscale(0%)
    hue-rotate(1deg)saturate(85%);
}

#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;*/
/*  max-height: 500px;*/
}

#productDiv img {
/*  max-width: 480px;*/
 max-width: 98%;
margin-left: -10px !important;
  object-fit: fill;
  max-height: calc(var(--height_constant) - 15vh - var(--wide_height_constant) - var(--vertical_height_constant));
}


.animatedIn {
    animation: fadeIn 0.75s ease-in-out forwards;
}

.animatedOut {
    animation: fadeOut 0.75s ease-in-out forwards;
}

.productPreviewText {
  font-style: normal;
}

p.productPreviewText {
/*
    margin-block-start: 0.6em !important;*/
    margin-block-start: 0.2em !important;
    font-size: var(--lowerTextSize);
    font-weight: 300;
    margin-bottom: 0px;
    /*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;
}


.footer {
  padding: 10px;
}




.anim-container {
    width: 300px;
    height: 300px;
}

#anim-display {
    width: 100%;
    height: 100%;
    object-fit: cover;
}