body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}
body {font-size:16px;}
.w3-half>img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-half>img:hover{opacity:1}

.product-detail .w3-table-all { max-width: 1000px; }
.product-detail .product-img { max-width: 500px;}
.product-title span { white-space: nowrap; }

.product-detail #tabnav {
  overflow: hidden;
  background-color: white;
  max-width: 1000px;
  box-shadow: 0px 10px 10px -4px rgb(0,0,0,0.4);
}

.product-detail #tabnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
box-shadow: -2px 0px 6px rgba(0, 0, 0, 0.7);
text-decoration: none;
font-size: 17px;
}

.product-detail #tabnav a:hover {
background-color: #ddd;
color: black;
}

.product-detail #tabnav a.active {
background-color: #CCC;
color: dimgray;
}

.product-detail .sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}

/* .product-detail .sticky ~ .tabcontent {
    padding-top: 60px;
  } */

.product-detail .tabcontent {
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

.product-detail .tabcontent::before
{
    content: '';
    display: block;
    height:      200px;
    margin-top: -200px;
    visibility: hidden;
}

.product-detail .sticky ~ .tabcontent::before {
    height:      300px;
    /* margin-top: -100px; */
  }

  
/* Go from zero to full opacity */
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}

@media (max-width: 400px) {
    .product-detail #tabnav a {
        font-size: 14px;
        padding: 10px 13px;
    }
}

  



.line-col { background:#00A623; color: white;}

.line-btn .line-it-button { float: right;}

.line-btn { max-width: 1340px; left: 0; right:0; }

.download { vertical-align: baseline; padding: 4px 8px; }

@media (max-width: 992px) {
    .line-btn { max-width: 1000px; }
}

#line_container.w3-modal { padding: unset; justify-content: center; align-items: center; }

#line_modal { max-width: 300px; display: flex; flex-wrap: wrap-reverse; width: 100%; height: fit-content; max-height: 100%; background-color: white; position: relative; }
#line_modal #vert_chat {display: block;}
#line_modal #hori_chat {display: none;}
#line_modal #line_frame {border: none; max-width: 300px;}
#line_modal #line_card { flex-grow: 1; max-width: 300px; text-align: center; display:flex; flex-direction: column-reverse; background-image: url('/assets/img/linecard.jpg'); background-size: contain; max-width: 300px; }
#line_modal #line_card .w3-display-topright {font-size: 22px; background: transparent;}
#line_modal #line_card div {flex-grow: 1; height: 170px; max-height: 250px; width: 100%;}
#line_modal #line_card img {width: 80px; height: 80px; margin: 10px auto 0px; display: block;}

@media (min-width: 600px) {
    #line_modal { max-width: 600px; }
    #line_modal #vert_chat {display: none;}
    #line_modal #hori_chat {display: block;}
}


.ytembed {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 1000px;
  }

#showcase {
    position:relative;
}

#particles-js canvas {
    display: block;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease
}

#particles-js {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #001020;
    z-index: -10;
    top: 0;
    left: 0
}

.noWrap {
    white-space:nowrap;
    /* word-break:keep-all; */
}

#myNav a {
    padding-left:20%;
}

#mySidebar {
    z-index:3;
    width:300px;
}

/* @media (max-width: 992px) {
    #mySidebar {
      max-width: 215px;
    }
} */

#about_showcase {
    margin-top: 80px;
    height: 520px;
    background-image: url("../img/about_banner.jpg");
    background-position: left center;
    background-size: cover;
}

#product_showcase {
    margin-top: 80px;
    background-image: url("../img/wave-81840.jpg");
    background-position: left 10% top 40%;
    background-size: cover;
    overflow:hidden;
}

.factoryimg {
    width: 100%;
    margin: 10px 0;
}

.item-group h3 {
    padding: 5px 20px;
    background: darkgray;
    margin: 0;
}

.item-group a {
    text-decoration: none;
    min-width: 200px;
}

.product-detail img.w3-card {
    width:45%;
    margin: 1% 1%;
}

.product-detail .features p {
    padding: 0 0 10px 20px;
    margin: 0;
}

.region {
    /* float:right; */
    font-size: 10px;
}

.region a {
    text-decoration:none;
}

.keepAll {
    word-break:keep-all;
}

#productAccord {
    margin-left:32px;
}

.item-group {
    padding-top: 32px;
}

#AboutPhotoGrid { max-width: 900px; }
#AboutPhotoGrid > * {
    width: 320px;
    height: 530px;
    max-width: 100%;
    display: inline-block;
    vertical-align: bottom;
}

#EventPhotoGrid { max-width:  900px;}

#EventPhotoGrid > * {
    width: 320px;
    /* max-height: 530px; */
    max-width: 100%;
    display: inline-block;
    vertical-align: bottom;
}

.img-magnifier-container {
    position:relative;
  }
  
  .img-magnifier-glass {
    position: absolute;
    background-color: white;
    border: 3px solid #000;
    cursor: none;
    /*Set the size of the magnifier glass:*/
    width: 200px;
    height: 200px;
  }

@media (min-width: 902px) {
    #product_showcase img {
        margin: -100px calc(100% - 700px - 300px) -300px 0 !important;
    }
}

@media (max-width: 602px) {
    .item-group {
        margin-top: -172px;
        padding: 200px 2px 0;
    }

    .item-group h1, .item-group hr {
        margin: 0 20px 10px;
        font-size: 24px!important;
    }

    .product-detail .features > b {
        font-size: 14px;
    }

    .product-detail .features p, .product-detail td {
        font-size: 12px;
    }

    .item-group a {
        max-width: 200px;
        width: calc(47vw - 10px);
        min-width: 130px;
        padding:2px !important;
    }

    .item-group a h3 {
        font-size: 18px;
        padding: 0 20px;
    }

    #product_showcase {
        padding-top: 0 !important;
    }

    #product_showcase img {
        max-height: 90vw;
        float:left!important;
        margin: 0 0 -200px 0 !important;
    }

    #product_showcase h1 {
        font-size: large !important;
    }

    .w3-xxxlarge, .w3-jumbo {font-size: 32px!important;}
    .w3-xxlarge { font-size: 24px!important;}
    .w3-xlarge { font-size: 20px!important;}

    #showcase img {
        height: initial!important;
    }

    #showcase .w3-xxxlarge {
        font-size: 22px!important;
    }

    #showcase h1 {
        margin: 0;
    }

    #services, #productLines, #contact {
        margin-top: 12px!important;
    }

    #services p, #productLines p, #contact p, #productLines + div p, #contact + div p {
        font-size: 12px;
    }

    #productLines + div h3  {
        font-size: 20px; }
    #mySidebar {
        width: 60vw;
        min-width: 220px; }
    #mySidebar a, #productAccord  {
        font-size: 14px!important; }
    #mySidebar h3 {
        font-size: 18px; }
    #productAccord * {
        padding-left: 10px!important;   }
}