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

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

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

.debug {
/*display: none;*/

}

.page {
    display: none;
}

.default {
    display: block;
}

:target {
    display: block;
}

:target ~ .default {
    display: none;
}

.hidePg {
  display: none;
}

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

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


}


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

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

.logo {
  text-align: left !important;
  font-size: 2.7em;
  color:#7d20d4;
  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: #41ad49 !important;
}

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


.nav li a.active {
  color: #41ad49;
  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;*/
  overflow: hidden;

}


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



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

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

}


.intro_content {
  /*margin: 1px;*/
  padding-top:20px;
padding-inline:20px;
padding-bottom:20px;
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%;
}

.inner2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
      "ls  rs"
   ;
   column-gap: 1em;
  /*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: 1.25fr .5fr .5fr;
  grid-template-areas:
      "ls main rs"
   ;
   column-gap: 1em;
  /*grid-template-columns: 200px 1fr 200px;*/
  padding-right: 6%;
}


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


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

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


aside:first-of-type {
   grid-area: rs;
}

aside:last-of-type {
   grid-area: ls;
      border-right: 2px solid #41ad49;
}

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: 800px;
   }

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



.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 {
/*max-width: 20%;*/
background-color: #fff;
border: 1px solid black;
text-align:center;
padding:2px;
}


.productItem img {
  /*height: 180px;
  object-fit: fill;*/
  width: 180px;
  opacity: 0.8;
}

.productItem.active img {
  opacity: 1;
}

.productItem img:hover {
  opacity: 1;
}


.productPreview {
  max-width: 20%;
}

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

#productDiv {
  max-width: 15%;
background-color: #fff;
border: 1px solid black;
}

#productDiv img {
  max-width: 480px;
  object-fit: fill;
}