@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
:root {
   --nav_background: rgba(00, 25, 26, 1);
   --nav_background_70: rgba(00, 25, 26, 0.7);
   /* --background: rgba(5, 35, 45, 1); */
   --background: rgba(0, 70, 77, 1);
   /* --background_70: rgba(5, 35, 45, 0.7); */
   --background_70: rgba(0, 70, 77, 0.7);
   --thumbnail_bg: white;
   /* --border_color: rgba(0, 49, 51, 1); */
   --border_color: rgba(0, 173, 185, 1);
   --hover_color: rgba(0, 173, 185, 1);
   --link_color_mobile: rgba(204, 252, 255, 1);
   --hex_color1: rgba(0, 25, 26);
   --hex_color2: rgba(0, 25, 26);
   --hex_linecolor: #002324;
   --chamfer_size: 0.5rem;
}
*, *::before, *::after {
   box-sizing: border-box;
}

 html {
   /* Hexagon background from https://dev.to/afif/background-pattern-hexagon-shape-4ge8 */
   --s:32px; /* shape size */
   --m:2px;  /* space */
  
   --v1: var(--hex_color1) 119.5deg, transparent 120.5deg;
   --v2: var(--hex_linecolor)  119.5deg, transparent 120.5deg;
   background:
     conic-gradient(at var(--m)              calc(var(--s)*0.5777), transparent 270deg, var(--hex_linecolor) 0deg),
     conic-gradient(at calc(100% - var(--m)) calc(var(--s)*0.5777), var(--hex_linecolor) 90deg,  transparent 0deg),
    
     conic-gradient(from -60deg at 50% calc(var(--s)*0.8662)             , var(--v1)),
     conic-gradient(from -60deg at 50% calc(var(--s)*0.8662 + 2*var(--m)), var(--v2)),
    
     conic-gradient(from 120deg at 50% calc(var(--s)*1.4435 + 3*var(--m)), var(--v1)),
     conic-gradient(from 120deg at 50% calc(var(--s)*1.4435 +   var(--m)), var(--v2)),
    
     linear-gradient(90deg, var(--hex_color2) calc(50% - var(--m)),var(--hex_linecolor) 0 calc(50% + var(--m)), var(--hex_color2) 0);
    
   background-size: calc(var(--s) + 2*var(--m)) calc(var(--s)*1.732 + 3*var(--m)); 
   background-position: 2rem 2.5rem;
} 
body { 
   color: silver;
   margin: 0;
   font-family: 'Work Sans', sans-serif;
   font-weight: 400;
}
a {
   color: white;
   text-decoration: none;
   transition: ease-in-out 150ms;
}
a:hover {
   color: #0cbfe9;
}
ul {
   margin: 0;
   padding: 0;
}
li {
   list-style: none;
}
button {
   display: inline-block;
   margin: 0.5rem;
   padding: 0.5rem 1rem;
   background: var(--background);
   border: solid 2px var(--border_color);
   border-radius: 5px;
   cursor: pointer;
   color: white;
   transition: ease-in-out 150ms;
}
button:hover {
   background: var(--hover_color);
   color: black;
}
.chamfer {
   clip-path: polygon(
      0% var(--chamfer_size),                /* Top left */
      var(--chamfer_size) 0%,                /* Top left */
      calc(100% - var(--chamfer_size)) 0%,   /* Top right */
      100% var(--chamfer_size),              /* Top right */
      100% calc(100% - var(--chamfer_size)), /* Bottom right */
      calc(100% - var(--chamfer_size)) 100%, /* Bottom right */
      var(--chamfer_size) 100%,              /* Bottom left */
      0% calc(100% - var(--chamfer_size))    /* Bottom left */
   );
}

.container {
   position: relative;
   display: flex;
   justify-items: center;
   flex-direction: column;
   margin-left: auto;
   margin-right: auto;
   max-width: 96rem;
   min-width: 40rem;
}

header {
   display: block;
   justify-content: center;
   background-color: var(--nav_background_70);
   width: 100%;
}
header .logo {
   margin: 0;
   margin-left: 4rem;
   font-size: 2rem;
   line-height: 2rem;
}
header .logo a {
   display: inline-block;
   padding: 1rem 1rem;
}
.nav-toggle,
.sidemenu-toggle {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}
.nav-toggle:focus ~ .nav-toggle-label,
.sidemenu-toggle:focus ~ .sidemenu-toggle-label {
   outline: 3px solid rgba(lightblue, .75);
}
.nav-toggle-label {
   position: absolute;
   top: 0;
   left: 0;
   margin-left: 1rem;
   margin-top: 0.8rem;
   height: 2.5rem;
   display: flex;
   align-items: center;
   padding: 0.5rem;
   border: 1px solid silver;
   border-radius: 5px;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
   display: block;
   background: silver;
   height: 2px;
   width: 1.75rem;
   border-radius: 2px;
   position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
   content: '';
   position: absolute;
}
.nav-toggle-label span::before {
   bottom: 7px;
}
.nav-toggle-label span::after {
   top: 7px;
}
.nav-toggle-label:hover {
    cursor: pointer;
}
.nav-toggle:checked ~ nav.sitenav {
   transform: scale(1,1);
}
.nav-toggle:checked ~ nav.sitenav a {
   opacity: 1;
   transition: opacity 250ms ease-in-out 250ms;
}
nav.sitenav {
   z-index: 999;
   position: absolute;
   top: 100%;
   left: 0;
   background: var(--nav_background);
   border: solid 3px var(--border_color);
   min-width: 24ch;
   text-align: left;
   font-weight: bold;
   transform: scale(1, 0);
   transform-origin: top;
   transition: transform 400ms ease-in-out;
}
nav.sitenav a {
   z-index: 1000;
   color: white;
   text-decoration: none;
   font-size: 1.5rem;
   opacity: 0;
   transition: opacity 150ms ease-in-out;
   display: block;
   padding: 1rem;
}
nav.sitenav a:hover {
   color: white;
   background-color: var(--background);
}
nav.sitenav .subm-item {
   padding: 0.5rem 1.5rem 0.5rem;
   font-size: 1.2rem;
}
nav.sitenav .subm-item::before {
   content: '- ';
}

.breadcrumbs {
   display: block;
   justify-content: center;
   background-color: var(--nav_background_70);
   border-bottom: solid 3px var(--border_color);
   width: 100%;
}
.breadcrumbs ul {
   padding: 0.25rem 1rem;
}
.breadcrumb, .breadcrumb-subitem {
   display: inline-block;
   font-size: 1rem;
   line-height: 1rem;
   font-weight: bold;
}
.breadcrumb + .breadcrumb::before {
   content: '/ ';
   color: silver;
}
.breadcrumbs .breadcrumb-active {
   color: rgba(192, 192, 192, 0.5);
}
.breadcrumb-subitem::before {
   content: ' - ';
}

.content {
   flex-direction: row;
}
aside {
   display: inline-block;
   width: 12rem;
   min-width: 12rem;
   max-width: 20rem;
   opacity: 0.5;
   transition: opacity ease-in-out 150ms;
}
aside:hover {
   opacity: 1;
}
.sidemenu-toggle-label {
   display: none;
   cursor: pointer;
   margin-top: 0.5rem;
   color: white;
   font-weight: bold;
}
.sidemenu-toggle-label::after {
   content: "\276F";
   width: 1em;
   height: 1em;
   text-align: center;
   transition: all .35s;
}
.sidemenu-toggle:checked ~ .sidemenu {
   transform: scale(1,1);
   max-height:fit-content;
   opacity: 1;
   transition: opacity 250ms ease-in-out 250ms;
}
.sidemenu-toggle:checked ~ .sidemenu-toggle-label::after {
   transform: rotate(90deg);
}
.sidemenu {
   color: white;
   padding: 1rem;
}
.sidemenu h1 {
   font-size: 1.2rem;
   margin: 0.5rem 0;
   width: 100%;
   min-width: 10rem;
}
.sidemenu input {
   margin-left: 0.5rem;
}
.sidemenu label {
   margin-top: 0.125rem;
   margin-left: 0.5rem;
}
.sidemenu input[type="checkbox"] {
   width: 1rem;
   height: 1rem;
   border: 2px solid var(--border_color);
   border-radius: 0.25rem;
   appearance: none;
}
.sidemenu input[type="checkbox"]:checked {
   background-color: var(--hover_color);
}
.sidemenu .slider_filter_wrap {
   border-bottom: 3px solid var(--border_color);
   padding-bottom: 0.5rem;
}
.sidemenu .price-range-block {
   padding-left: 0.5rem;
   display: flex;
   justify-content: left;
   flex-direction: column;
}
.sidemenu .ui-slider-horizontal {
   display: inline-block;
   height: 1rem;
   min-width: 10rem;
   width: 98%;
   margin-bottom: 1rem;
   /* margin-right: 1rem; */
}
.sidemenu .ui-widget-header {
   background: var(--hover_color);
}
.sidemenu .price-range-field {
   width: 8rem;
   background-color: var(--background); 
   border: 1px solid var(--border_color); 
   color: white; 
   font-family: myFont; 
   font: normal 14px Arial, Helvetica, sans-serif; 
   border-radius: 5px; 
   height: 26px; 
   padding: 5px;
}
.sidemenu .tent_type_wrap,
.sidemenu .persons_wrap,
.sidemenu .seasons_wrap,
.sidemenu .brand_wrap {
   border-bottom: 3px solid var(--border_color);
   padding-bottom: 0.5rem;
}
.sidemenu .persons_wrap,
.sidemenu .seasons_wrap,
.sidemenu .rvalue_wrap,
.sidemenu .thickness_wrap {
   display: flex;
   flex-wrap: wrap;
}
.sidemenu .persons_wrap div,
.sidemenu .seasons_wrap div,
.sidemenu .rvalue_wrap div,
.sidemenu .thickness_wrap div {
   width: 5rem;
}
.sidemenu .tent_type_wrap div,
.sidemenu .persons_wrap div,
.sidemenu .seasons_wrap div,
.sidemenu .brand_wrap div,
.sidemenu .fill_wrap div,
.sidemenu .gender_wrap div,
.sidemenu .rvalue_wrap div,
.sidemenu .thickness_wrap div {
   display: flex;
   justify-content: left;
}

main {
   display: inline-block;
   width: 87rem;
   min-width: 20rem;
   max-width: 87rem;
}
.view {
   padding: 0.5rem;
   display: flex;
   justify-content: left;
   flex-wrap: wrap;
}
.sort_buttons {
   width: 100%;
   margin-left: 1rem;
   opacity: 0.5;
   color: white;
   transition: opacity ease-in-out 150ms;
}
.sort_buttons:hover {
   opacity: 1;
}
.cards thead {
   display: none;
}
.cards tbody tr {
   float: left;
}
.cards td:before {
   content: '';
   position: relative;
   float: left;  
}
.cards tbody td {
   display: block;
}
.cards .hidden {
   display: none;
}
.dataTables_wrapper {
   display: flex;
   flex-direction: column;
}
.dataTables_header, .dataTables_footer {
   display: flex;
   flex-wrap: wrap;
   white-space: nowrap;
   margin: 0.5rem 0;
   justify-content: space-between;
}
.dataTables_header .dataTables_filter,
.dataTables_header .dataTables_length,
.dataTables_header .dataTables_paginate,
.dataTables_footer .dataTables_info,
.dataTables_footer .dataTables_paginate {
   display: inline-block;
}
.dataTables_header .dataTables_filter {
   margin-left: 1rem;
   margin-right: 1rem;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
}
.dataTables_header .dataTables_filter input {
   margin-left: 0.5rem;
   padding: 0.5rem;
   width: 12rem;
   opacity: 0.8;
   background-color: var(--background_70);
   color: white;
   border: solid 2px var(--border_color);
   border-radius: 5px;
}
.dataTables_header .dataTables_length {
   margin-left: 1rem;
   margin-right: auto;
   margin-top: 0.6rem;
   margin-bottom: 0.6rem;
   opacity: 0.8;
   color: white;
}
.dataTables_header .dataTables_length select {
   padding: 0.406rem 0.5rem;
   background-color: var(--background_70);
   font-size: 1rem;
   color: white;
   border: solid 2px var(--border_color);
   border-radius: 5px;
}
.dataTables_paginate {
   margin-right: 6rem;
   margin-left: 1rem;
   margin-top: auto;
   margin-bottom: auto;
}
.dataTables_paginate .paginate_button {
   display: inline-block;
   margin: 0 0.25rem;
   padding: 0.5rem;
   cursor: pointer;
   opacity: 0.8;
   background: var(--background);
   border: solid 2px var(--border_color);
   border-radius: 5px;
   transition: ease-in-out 150ms;
}
.dataTables_paginate .paginate_button.current {
   background-color: var(--hover_color);
   color: black;
   cursor: auto;
}
.dataTables_paginate .paginate_button:hover {
   background: var(--hover_color);
   color: black;
}
.dataTable {
   display: block;
}
.dataTables_footer .dataTables_info {
   margin-left: 1rem;
   margin-bottom: 0.5rem;
}
.grid-wrap {
   display: inline-flex;
   flex-shrink: 0;
   float: left;
   justify-content: center;
   align-items: center;
   margin: 0.25rem;
   width: 12.375rem;
   height: 24.375rem;
   opacity: 0.8;
   transition: opacity ease-in-out 150ms;
   background-color: var(--border_color);
   clip-path: polygon(
      0% var(--chamfer_size),                /* Top left */
      var(--chamfer_size) 0%,                /* Top left */
      calc(100% - var(--chamfer_size)) 0%,   /* Top right */
      100% var(--chamfer_size),              /* Top right */
      100% calc(100% - var(--chamfer_size)), /* Bottom right */
      calc(100% - var(--chamfer_size)) 100%, /* Bottom right */
      var(--chamfer_size) 100%,              /* Bottom left */
      0% calc(100% - var(--chamfer_size))    /* Bottom left */
   );
}
.grid-wrap:hover {
   opacity: 1;
}
.grid {
   display: block;
   flex-shrink: 0;
   position: relative;
   width: 12rem;
   height: 24rem;
   background-color: var(--background);
   clip-path: polygon(
      0% var(--chamfer_size),                /* Top left */
      var(--chamfer_size) 0%,                /* Top left */
      calc(100% - var(--chamfer_size)) 0%,   /* Top right */
      100% var(--chamfer_size),              /* Top right */
      100% calc(100% - var(--chamfer_size)), /* Bottom right */
      calc(100% - var(--chamfer_size)) 100%, /* Bottom right */
      var(--chamfer_size) 100%,              /* Bottom left */
      0% calc(100% - var(--chamfer_size))    /* Bottom left */
   );
}
.thumbnail-container {
   position: relative;
   background-color: var(--thumbnail_bg);
   height: 11.5rem;
   width: 11.5rem;
   margin-top: 0.25rem;
   margin-left: auto;
   margin-right: auto;
   clip-path: polygon(
      0% var(--chamfer_size),                /* Top left */
      var(--chamfer_size) 0%,                /* Top left */
      calc(100% - var(--chamfer_size)) 0%,   /* Top right */
      100% var(--chamfer_size),              /* Top right */
      100% calc(100% - var(--chamfer_size)), /* Bottom right */
      calc(100% - var(--chamfer_size)) 100%, /* Bottom right */
      var(--chamfer_size) 100%,              /* Bottom left */
      0% calc(100% - var(--chamfer_size))    /* Bottom left */
   );
}
.grid img.thumbnail {
   position: absolute;
   margin: auto;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   max-height: 10rem;
   max-width: 10rem;
}
.grid .seasons,
.grid .persons,
.grid .weight,
.grid .gender,
.grid .comfort,
.grid .lower_comfort,
.grid .rvalue,
.grid .thickness {
   position: absolute;
   z-index: 10;
   color: #000;
   font-weight: bold;
   font-size: 1.2rem;
   filter: drop-shadow(1px 1px 2px grey);
}
.grid .comfort span,
.grid .lower_comfort span,
.grid .rvalue span,
.grid .thickness span {
   font-size: 0.8rem;
}
.grid .seasons,
.grid .comfort,
.grid .rvalue {
   bottom: 0.25rem;
   left: 0.5rem;
   text-align: left;
}
.grid .seasons .snow {
   filter: invert(8%) sepia(99%) saturate(7448%) hue-rotate(249deg) brightness(97%) contrast(144%);
}
.grid .seasons .sun {
   filter: invert(88%) sepia(100%) saturate(3242%) hue-rotate(352deg) brightness(107%) contrast(105%);
}
.grid .persons,
.grid .gender {
   top: 0.5rem;
   left: 0.25rem;
   display: flex;
   align-items: center;
}
.grid .persons img,
.grid .seasons img,
.grid .gender img {
   height: 2rem;
   width: 2rem;
}
.grid .weight,
.grid .lower_comfort,
.grid .thickness {
   bottom: 0.25rem;
   right: 0.5rem;
   text-align: right;
}
.grid p {
   margin: 0;
   height: 1.5rem;
   padding: 0 0.5rem 0 0.5rem;
   font-size: 0.8rem;
   font-weight: bold;
   color: white;
}
.grid p a {
   display: block;
}
.grid .brandname {
   padding-top: 0.25rem;
   font-size: 1.2rem;
   font-weight: bold;
   text-align: center;
   line-height: 1.5rem;
}
.grid .brandname span {
   display: block;
   padding-top: 0.5rem;
   font-size: 1rem;
   line-height: 1.2rem;
}
.grid .brandname a {
   display: block;
   padding: 0;
}
.grid .brand_hp,
.grid .brand_price,
.grid .msrp,
.grid .brand_msrp,
.grid .importer,
.grid .importer-price {
   position: absolute;
   height: fit-content;
}
.grid .brand_hp {
   display: flex;
   justify-content: left;
   align-items: flex-end;
   bottom: 2.7rem;
   max-width: 8rem;
}
.grid .brand_price {
   bottom: 2.7rem;
   right: 0;
}
.grid .msrp {
   bottom: 1.5rem;
}
.grid .brand_msrp {
   bottom: 1.5rem;
   right: 0;
}
.grid .importer {
   bottom: 0.4rem;
}
.grid .importer-price {
   bottom: 0.4rem;
   right: 0;
}
.item {
   justify-content: center;
}
.item-images_wrap {
   align-self: flex-start;
   width: 30rem;
   min-width: 20rem;
   margin: 0.5rem;
}
.item-images {
   display: flex;
   flex-wrap: wrap;
   background: white;
   border: solid 2px var(--border_color);
   border-radius: 5px;
}
.item-images .maxi {
   max-width: 95%;
   max-height: 95%;
   margin-top: 1rem;
   margin-bottom: 1rem;
   margin-left: auto;
   margin-right: auto;
   cursor: zoom-in;
   -webkit-transition: all 300ms 0ms ease-in-out;
    transition: all 300ms 0ms ease-in-out;
}
.item-images .maxi:active {
   -webkit-transform: scale(2);
   transform: scale(2) translate(7rem, 4rem);
   border: solid 1px black;
}
.item-images .mini {
   margin: 0.5rem;
}
.mini img {
   max-height: 5.5rem;
   max-width: 5.5rem;
   cursor: pointer;
}
.item-info_wrap {
   align-self: flex-start;
   width: calc(100% - 30rem);
   max-width: 40rem;
   min-width: 20rem;
   margin: 0.5rem;
}
.item-info {
   background: var(--background_70);
   border: solid 2px var(--border_color);
   border-radius: 5px;
}
.item-info h1 {
   font-size: 1.4rem;
   color: white;
   margin: 0;
   padding: 0.5rem;
   width: 100%;
}
.item-info h2 {
   font-size: 1rem;
   color: white;
   margin: 0;
   margin-top: 0.5rem;
   padding: 0.25rem 0.5rem;
   width: 100%;
}
.item-info h3 {
   font-size: 0.9rem;
   color: white;
   margin: 0;
   padding: 0.25rem 0.5rem 0.1rem 1rem;
   width: 100%;
}
.item-info li {
   padding: 0 0.5rem;
   color: white;
}
.item-info span {
   display: block;
   color: white;
   padding: 0 1.5rem;
}
.item-info .tables {
   margin: 0.5rem;
}
.tables table {
   margin: 1rem 0;
   width: 100%;
   color: white;
   border-collapse: collapse;
}
.tables th {
   font-size: 0.8rem;
   text-align: left;
   border-bottom: solid 2px var(--border_color);
}
.tables td {
   padding: 0.25rem 0.5rem;
   font-size: 0.8rem;
   border-bottom: solid 1px var(--border_color);
}
.tables td a {
   display: block;
}

@media screen and (max-width: 630px) {
   .content {
      flex-direction: column;
   }
   .container {
      width: 100%;
      min-width: 20rem;
   }
   aside, main {
      width: 100%;
      min-width: 20rem;
      max-width: 40rem;
      opacity: 1;
   }
   .sidemenu-toggle-label {
      display: flex;
      justify-content: space-between;
      width: 100%;
      background: var(--background_70);
      border: solid 2px var(--border_color);
      padding: 0.5rem 1rem;
   }
   .sidemenu {
      transform: scale(1,0);
      max-height: 0;
   }
   .sort_buttons {
      opacity: 1;
      margin-left: 0;
   }
   .sort_buttons span {
      display: block;
      width: 100%;
   }
   .dataTables_header, .dataTables_footer {
      flex-direction: row;
   }
   .dataTables_header .dataTables_filter,
   .dataTables_header .dataTables_length,
   .dataTables_header .dataTables_paginate,
   .dataTables_footer .dataTables_info,
   .dataTables_footer .dataTables_paginate {
      display: block;
      margin-left: 0;
      margin-right: auto;
      width: 100%;
   }
   .dataTables_paginate .paginate_button {
      font-size: 0.8rem;
   }
   .grid-wrap {
      width: 9.5rem;
      height: 19rem;
   }
   .grid {
      width: 9.25rem;
      height: 18.75rem;
   }
   .grid .thumbnail-container {
      width: 9rem;
      height: 9rem;
      margin-top: 0.125rem;
   }
   .grid img.thumbnail {
      max-width: 8rem;
      max-height: 8rem;
   }
   .grid .persons img,
   .grid .seasons img,
   .grid .gender img {
      height: 1.5rem;
      width: 1.5rem;
   }
   .grid p {
      font-size: 0.6rem;
   }
   .grid p a {
      color: var(--link_color_mobile);
   }
   .grid .seasons,
   .grid .persons,
   .grid .weight {
      font-size: 1rem;
   }
   .grid .comfort,
   .grid .lower_comfort,
   .grid .rvalue,
   .grid .thickness {
      font-size: 0.8rem;
   }
   .grid .comfort span,
   .grid .lower_comfort span,
   .grid .rvalue span,
   .grid .thickness span {
      font-size: 0.6rem;
   }
   .grid .brandname {
      padding-top: 0.125rem;
      font-size: 1rem;
   }
   .grid .brandname span {
      font-size: 0.8rem;
      padding-top: 0;
      line-height: 1rem;
   }
   .grid .brand_hp,
   .grid .brand_price {
      bottom: 2.2rem;
   }
   .grid .brand_msrp,
   .grid .msrp {
      bottom: 1.3rem;
   }
   .grid .importer,
   .grid .importer-price {
      bottom: 0.4rem;
   }
   .item-images_wrap,
   .item-info_wrap {
      width: calc(100% - 1rem);
   }
   
}