*,
*::after,
*::before {box-sizing: border-box;}

/*---- COLOR PALETTE ----*/
:root {
  --color-primary: #159bc7;
  --color-primary-dark: #0e617a;
  --color-primary-accent: #2196b0;
  --color-primary-light: #afdce6;
  --color-primary-transp: #0c3e5fc4;
  --color-secondary: #6cb3db;
  --color-secondary-dark: #44a3d1;
  --color-secondary-accent: #3dc1e4;
  --color-secondary-light: #d5ecfb;
  --color-black: #000000;
  --color-grey-dark: #403f3f;
  --color-grey: #a8a8a8;
  --color-grey-light: #efefef;
  --box-shadow: 0px 2px 7px 0px rgba(44, 44, 44, 0.2);
  --box-shadow-hover: 0px 2px 10px 0px rgba(12, 12, 12, 0.25);
  --color-accent: #e2753e;
  --color-accent-light: #e49866;
  --color-accent-dark: #e5570b;
  --border-radius: 5px;
  --color-gradient-dark: linear-gradient(to right, #0e617a, #082b4a);
  --color-gradient-dark-transp: linear-gradient(to right, #0e617a97, #082b4a97);
  --color-gradient-light: linear-gradient(to right, #afdce6, #adcfda);
  --color-gradient-light-transp: linear-gradient(to right, #60f0ff3b, #1483a700);
}

/*---- TYPOGRAPY ----*/
/* font-family: 'Lato', sans-serif; */
/* font-family: 'Lora', serif; */
/* font-family: 'Open Sans', sans-serif; */
html {/* 62.5% of 16px = 10px*/font-size: 55%;}
html ul{font-size: 120%;}
/* OPERA GX */  @media screen and (max-width: 1500px) and (min-width: 1100px) {html {font-size: 55%;}}
/* OPERA GX */  @media screen and (max-width: 1500px) and (min-width: 1100px) {html ul{font-size: 130%;}}
/* SAMSUNG  */  @media screen and (max-height: 350px) and (max-width:  500px) {html {font-size: 40%;}}
/* MOBILES  */  @media screen and (max-width: 480px) {html {font-size: 60%;}}

/* HEADER LINK FONTS */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');
.playfair-font {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    /* font-style: italic; */
    letter-spacing: 0.2rem;
    line-height: 2.5rem;
}
.oswald-font {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0.2rem;
}
.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}
::-moz-selection { /* Code for Firefox */
    color: #fff;
    background: var(--color-primary-accent);
}  
::selection {
    color: #fff;
    background: var(--color-primary-accent);
}
/* Main Headings */
h1,h2,h3 {
    color: var(--color-primary);
    font-family: 'Lora', serif;
    margin-bottom: 0.5rem;
}
h1 {font-size: 6rem;}
h2 {font-size: 4.4rem;}
h3 {font-size: 3.5rem;}
/* Sub Headings */
h4,h5,h6 {
    font-family: 'Lato', sans-serif; 
    margin: 1rem 0 0.5rem 0;
    color: var(--color-grey-dark);
}
h4 {font-size: 2.2rem;}
h5 {font-size: 2rem;}
h6 {font-size: 1.5rem;}
p {
    font-size: 1.35rem;
    font-family: 'Open Sans', sans-serif;
    margin-left: 0.5rem;
    margin-top: 0;
}
a {color: var(--color-secondary-accent);}
a:hover {color: var(--color-secondary-dark);}

/*---- BUTTONS ----*/
button {
    padding: 1rem 1.8rem;
    border: none;
    outline: none;
    border-radius: var(--border-radius);
    letter-spacing: 0.2rem;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
}
button:hover {cursor: pointer;}
.btn-dark-transp {background-color: var(--color-primary-transp);}
.btn-primary {
    color: #fff;
    background-color: var(--color-primary-accent);
}
.btn-primary:hover{background-color: var(--color-primary);}
.btn-light {
    color: #fff;
    background-color: var(--color-primary-light);
}
.btn-light:hover{background-color: var(--color-primary-accent);}
.btn-outline {
    color: var(--color-primary);
    background-color: transparent;
    border: 2px solid var(--color-primary)
}
.btn-outline:hover{
    background-color: var(--color-primary);
    color: #fff;
}
.btn-outline-a {
    color: #fff;
    background-color: transparent;
    border: 3px solid #fff;
    transition: 200ms;
}
.btn-outline-a:hover{background-color: rgba(166, 75, 14, 0.526);}
.btn-warn {
    color: #fff;
    background-color: var(--color-accent);
}
.btn-warn:hover{background-color: var(--color-accent-dark);}
.btn-txt{background-color: transparent;}
.btn-txt:hover{color: var(--color-primary);}
.refine button {letter-spacing: normal;}

/*---- Responsiveness ----*/
/*flex-direction*//*flex-wrap*//*flex-flow*//*justify-content*//*align-items*//*align-content */
.flex-container {display: flex;}
.flex-row {flex-direction: row;}
.flex-col {flex-direction: column;}
.flex-center {
    justify-content: center;
    align-items: center;
    align-content: center;
    row-gap: 30px;
    column-gap: 30px;
}
.flex-wrap{flex-flow: wrap;}
.flex-right {
    justify-content: right;
    align-items: right;
    align-content: right;
    row-gap: 30px;
    column-gap: 30px;
}
.fb-66 {flex-basis: 66%;}
.fb-33 {flex-basis: 33%;}
.fb-50 {flex-basis: 47%;}
.fb-25 {flex-basis: 25%;}
.fb-100 {flex-basis: 100%;}
.grid {display: grid;}
.grid1autox2{ /*used for impot box*/
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
}
.grid2x1auto{
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;
}
.grid2x1{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}
.grid1x2{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}
.grid1x3{
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}
.grid15x1{
    grid-template-columns: 20% 80%;
    grid-auto-rows: minmax(min-content, max-content);
    align-items: start;
}
.grid4xauto{    
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px 10px;
    grid-auto-rows: minmax(min-content, max-content);
}
.grid-exp{
    grid-template-columns: 1fr;
    grid-template-rows: 10vh 80vh 10vh;
}
.push {margin-left: 25px;}
.pull {margin-right: 25px;}
.content-center {
    display: block;
    margin: 0 auto;
}
td, th {
    border: 1px solid var(--color-grey-light);    
    text-align: left;
    padding: 8px;
}  
th {
    font-size: 120%;
    background-color: var(--color-grey-light);
}
table{ 
    border-collapse: collapse;
    border: 1px solid var(--color-grey-light);
}
tr{border-bottom: 1px solid var(--color-grey-dark);}

.mob--hide{ display: inherit;}  /*just reset to origional*/
.mob--show {display: none;}
@media screen and (max-width: 1255px) {
    .grid4xauto{grid-template-columns: 1fr 1fr 1fr;}
}
@media screen and (max-width: 900px) {
    .flex-row {flex-direction: column;}
    .mob--hide{ display: none;}
    .mob--show {display: inline-block;}
    .push {margin-left: 15px;}
    .pull {margin-right: 15px;}
    .grid4xauto{grid-template-columns: 1fr 1fr;}
    .grid1x2{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .flex-right, .flex-center { row-gap: 15px;}
}

/*---- DESIGN ----*/
.transition-normal {transition-duration: 0.28s;}
.border-rad {border-radius: var(--border-radius);}
.border-p {border: solid var(--color-primary);}
.border-l {border: solid var(--color-primary-light);}
.border-g {border: solid var(--color-grey);}
.border-thin {border-width: 1px;}
.border-none{border: none;}
.h-100{height: 100%;}
.h-90{height: 90%;}
.mh-90{min-height: 90%;}
.w-100 {width: 100%;}
.w-90 {width: 90%;}
.w-50 {width: 49%;}
.w-75 {width: 75%;}
.w-auto{width: auto;}
.h-auto{height: auto;}
.no-pad {padding: 0;}
.no-margin{margin:0;}
.basic-pad{padding: 20px}
.basic-margin{margin: 30px;}
.thin-margin{margin:7px;}
.thin-pad {padding: 7px 10px;}
.lrg-pad{padding:45px}
.lrg-margin{margin: 65px;}
/* Styles */
.align-c{text-align: center;}
.align-r{text-align: right;}
.thin {font-weight: 300;}
.regular {font-weight: 400;}
.bold {font-weight: 700;}
.italic {font-style: italic;}
.upper-c {text-transform: uppercase;}
.sub{font-size: 120%;}
.f-left{float: left;}
.f-right {float: right;}
.bg-red{background-color: var(--color-accent);}
.bg-lg {background-color: var(--color-grey-light);}
.bg-dark-transp {background-image: var(--color-gradient-dark-transp);}
.bg-light-transp {background-image: var(--color-gradient-light-transp);}
.c-g {color: var(--color-grey);}
.c-l {color: var(--color-primary-light)}
.bg-g {color: var(--color-grey-dark);}
.c-red{color: var(--color-accent);}
.c-grn {color: var(--color-primary-accent);}
.c-w{color: #fff;}
.c-b{color: #000;}
.shadow {box-shadow: var(--box-shadow);}
.shadow:hover {box-shadow: var(--box-shadow-hover);}
.img-cover{object-fit: cover;}
.img-contain{object-fit: contain;}
.scroll-y{overflow-y: scroll;}
.whitespace-top-25 {margin-top: 25vh;}
.absolute {position: absolute;}
.relative {position: relative;}
@media screen and (max-width: 900px) {
    .w-90 {width: 100%;}
    .whitespace-top-25 {margin-top: 15vh;}
}

/*---- SPRITES ----*/
.sprite-80px {
    background-size: calc(800px*0.4) calc(400px*0.4);
    width: calc(200px*0.4); 
    height: calc(200px*0.4);
}
.sprite-40px {
    background-size: calc(800px*0.2) calc(400px*0.2);
    width: calc(200px*0.2); 
    height: calc(200px*0.2);
}
.sprite-20px {
    background-size: calc(800px*0.1) calc(400px*0.1);
    width: calc(200px*0.1); 
    height: calc(180px*0.1);
}
#thumbs-up { background-image: url(images/sprite.webp); background-position: 0 0;}
#facebook { background-image: url(images/sprite.webp); background-position: calc(600px*0.2) 0;}
#instagram { background-image: url(images/sprite.webp); background-position: calc(400px*0.2) 0;}
#linked { background-image: url(images/sprite.webp); background-position: calc(200px*0.2) 0;}
#linked-sml { background-image: url(images/sprite.webp); background-position: calc(200px*0.1) 0;}
#phone { background-image: url(images/sprite.webp); background-position: 0 calc(200px*0.1);}
#loc { background-image: url(images/sprite.webp); background-position: calc(200px*0.1) calc(200px*0.1);}
#mail { background-image: url(images/sprite.webp); background-position: calc(400px*0.1) calc(200px*0.1);}
#whatsapp { background-image: url(images/sprite.webp); background-position: calc(600px*0.1) calc(200px*0.1);}

/*---- FORM ----*/
form, .form {padding: 10px 18px;}
input , textarea, select{
    padding: 5px 10px;
    margin: 7px 0;
}
input:focus, textarea:focus {outline: none;}
input:focus.acc-focus, textarea:focus.acc-focus{box-shadow: 0px 0px 5px 0.001px var(--color-secondary-accent);}
textarea {
    resize: none; /* disable resize */
    font-family: 'Lato', sans-serif; 
}
/* Hide arrown from number input */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;}
input[type=number] {-moz-appearance: textfield;}/* Firefox */
form label {font-size: 150%;}
form label p {display: inline-block;font-size: 120%;margin: 0;}
.checkbox {
	-webkit-appearance: none; /*remove default styles*/
    cursor: pointer;
    height: 20px;
    position: relative;
}
.checkbox:hover {border: 1px solid var(--color-primary);}
.checkbox:checked {background-color: #e9ecee;}
.checkbox:checked:after { /* The check mark */
	content: '\2714';
	font-size: 13px;
	position: absolute;
	top: 0px;
	left: 5px;
}
/* Request Form */
.req-category{
    min-width: 930px;
    max-width: 950px;
}
@media screen and (max-width: 1130px) {
    .req-category{
        min-width: 530px;
        max-width: 550px;
    }
}
@media screen and (max-width: 900px) {
    .req-category{
        min-width: 85vw;
        max-width: 90vw;
    }
}

/*---- NAV BAR ----*/
nav {
    overflow: hidden;
    background-color: var(--color-primary-dark);
    font-family: Arial, Helvetica, sans-serif;
    /* sticky nav */
    /* position: -webkit-sticky;
    position: sticky;
    top: 0; */
}
nav.admin{
    width: 20vw;
    padding: 3rem 0 2rem 2rem;
    height: 100vh;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
}
nav img {
    max-height: 4rem;
    margin: 10px 18px;
}  
nav a {
    float: left;
    color: white;
    padding: 1rem 1rem 1rem 5rem;
    text-decoration: none;
} 
nav.admin a {
    width: 100%;
    max-width:  15vw;
    font-size: 150%;
    padding: 0.2rem 3rem;
    display: block;
    white-space: nowrap;
}
nav.admin h5{ margin: 0;}
nav.admin a:hover > h5 {color: var(--color-secondary-dark);}
nav .flex-container{
    min-height: 65px;
    max-width: 70%;
    padding: 0;
}
.point::before {content: "> ";}
.dropbtn {  
    min-height: 5.5rem;
    font-size: 1.5rem;  
    font-family: 'Lato', sans-serif; 
    letter-spacing: 0.2rem;
    color: white;
    padding: 1.5rem 4rem 1rem 4rem;
    background-color: inherit;
}
.dropdown > button > a {padding: 0;}
.dropdown:hover .dropbtn:hover,
.dropdown:hover .dropbtn:hover>a{
    cursor: pointer;
    color: var(--color-primary-light);
}
.dropdown .dropbtn > i {font-size: 1.3rem;}
.dropdown-content {
    display: none;
    background-color: #fff;
    position: absolute;
    width: 80vw;
    margin: 0 10vw;
    padding: 0 3rem;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
}  
.dropdown:hover .dropdown-content {display: block;}
/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: auto;
}  
.column a {
    float: none;
    color: black;
    padding: 14px;
    display: inline-block;
    white-space: wrap;
    font-size: 12px;
}
.column .nav-head > a {font-size: 16px;}
.column h3 {
    margin: 0;
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
/* UNDERLINE EFFECT */
/* normal line */
.nav-link {
    position: relative;
    opacity: 0.75;
}  
.nav-link:hover {opacity: 1;} 
.nav-link::before {
    transition: 300ms;
    height: 1.3px;
    content: "";
    position: absolute;
    background-color: var(--color-secondary);
}
.nav-link-ltr::before {
    width: 0%;
    bottom: 10px;
}  
.nav-link-ltr:hover::before {width: 100%;}
/* category heading line */
.nav-head {
    position: relative;
    white-space: nowrap;
    color: var(--color-primary);
}  
.nav-head::before {
    transition: 400ms;
    height: 5px;
    content: "";
    position: absolute;
    background-color: var(--color-primary);
}
.nav-head-ltr::before {
    width: 0%;
    bottom: 10px;
}  
.nav-head-ltr:hover::before {width: 100%;}
/* Mobile nav */
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}  
.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}  
.overlay a {
    padding: 2rem 8px;
    text-decoration: none;
    font-size: 3rem;
    color: #818181;
    display: block;
    transition: 0.3s;
}  
.overlay a:hover, .overlay a:focus {color: var(--color-grey-light);}  
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
} 
.nav-btn--tasks{    
    color: #fff;
    font-size: 9vw;
    border-radius: 100%;
    margin-top: -20px;
    position: fixed;
    left: 43vw;
    padding: 1.5vh 2.8vh;
}
@media screen and (max-width: 900px) {
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
    nav .flex-container{max-height: 1rem;}
    .navBurg {color: #fff;}
    nav form {padding: 0;}
    nav.admin{
        width: 100vw;
        padding: 2rem 1rem;
        height: 21vh;
        margin-top: 81vh;
    }
    nav.admin a,
    nav.admin button.a {
        max-width: 100%;
        font-size: 200%;
        padding: 0;
    }
    nav a { padding: 0;}
    nav.admin .grid1x2 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }
}
@media screen and (max-width: 830px) { nav.admin{ margin-top: 85vh;}}
@media screen and (max-width: 430px) { 
    nav.admin{ margin-top: 80vh;}
    nav.admin a { font-size: 150%;}
    .nav-btn--tasks{    
        font-size: 9vw;
        margin-top: -20px;
        position: fixed;
        left: 40vw;
        padding: 2.3vh 3.5vh;
    }
}


/*---- BACK TO TOP BUTTON ----*/
#TopBtn {
    display: none;
    position: fixed;
    bottom: 18px;
    right: 30px;
    z-index: 99;
    font-size: 20px;
    border: none;
    outline: none;
    background-color: var(--color-primary-dark);
    color: white;
    cursor: pointer;
    padding: 10px 8px 10px 10px;
    border-radius: 100%;
    width: 42px;
    height: 42px;
    transform: rotate(270deg);
}  
#TopBtn:hover {    background-color: var(--color-secondary-accent);}

/*---- FOOTER ----*/
footer {width: 70vw;}
.cta h3, .cta h5 {
    color: #fff;
    margin: 0;
    text-align: left;
}
.cta {
    padding: 2vw 1vw 2vw 0;
    margin: 2rem auto;
}
#CtaGradient{  
    background: -webkit-linear-gradient(var(--color-secondary-accent), var(--color-primary), var(--color-accent-dark));  
    background: -moz-linear-gradient(var(--color-secondary-accent), var(--color-primary), var(--color-accent-dark));  
    background: -o-linear-gradient(var(--color-secondary-accent), var(--color-primary), var(--color-accent-dark));  
    background: linear-gradient(var(--color-secondary-accent), var(--color-primary), var(--color-accent-dark));  

    -webkit-transition: background 280ms ease-out;  
    -moz-transition: background 280ms ease-out;  
    -o-transition: background 280ms ease-out;  
    transition: background 280ms ease-out;  

    background-size:1px 200px;  
    border-radius: var(--border-radius);
}   
#CtaGradient:Hover{background-position:100px;} 
.cta > div.flex-container > div{flex-basis: 20%;}
.cta > div.flex-container > div:nth-of-type(2){flex-basis: 60%;}
.cta .fa-con {
    font-size: 80px;
    padding: 0 2rem 0 6rem;
    color: #fff;
}
/* Main Footer */
.main-ft {margin: 3rem 1rem;}
.main-ft > div {flex-basis: 30%;}
.foot-nav > .nav-link{
    font-size: 14px;
    text-decoration: none;
    color: #031D44;
    padding: 0 0 14px 10px;
    display: inline-block;
}
.ft-connect{margin: 5rem;}
.ft-connect h6{color: var(--color-primary-accent);}
.fa-media {
    font-size: 40px;
    padding: 5px 15px;
    color: var(--color-primary-accent);
}
.fa-media:hover{color: var(--color-primary);}
.ft-contact {
    font-size: 1.5rem;
    color: var(--color-primary);
}
.ft-contact p{
    display: inline-block;
    margin-bottom: 0;
}
.cc {
    font-size: 1.2rem;
    color: var(--color-grey);
    margin-top: 5rem;
    letter-spacing: 0.15rem;
}
.lic-img{width: 80px;height: 80px;}
.lic-img img{max-height: 80px;max-width: 80px;}
@media screen and (max-width: 900px) {
    footer {width: 90vw;}
    #CtaGradient{background-size:1px auto;}
    .cta {padding: 10px 20px;}
    .cta .fa-con {padding: 0 ;}
    .cta h3, .cta h5 {
        text-align: center;
        margin: 2rem 0;
    }
}

/*---- CATEGORY ----*/
.cat-bg {
    background-color: #f4f4f4;
    max-width: 100vw;
}
.category {
    min-width: 75vw;
    max-width: 85vw;
    padding: 10px 0 10px 0;
}
.category .mob--show {
    display: none;
}
.cat-banner {
    width: 100%;
    height: 150px;
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
    margin-top: 10px;
}
.cat-banner img {
    vertical-align: middle;
    width: 100%;
    /* height: fit-content; */
    object-fit: contain;
}
.cat-intr {width: 80%;}
.cat-intr h3 {margin-top:10px;}

/* Block/Card */
.product-list{padding: 0 10px;}
.product{
    position:relative;
    width: 215px;
    height: 320px;
}
.product img {
    width: 215px;
    height: 150px;
    margin: -15px -15px 0 -15px;
}
.product h5{margin: 5px 0 5px 0;}
.product p{margin: 0;}
.product button.btn-outline{
    position: absolute;
    bottom: 10px;
    width: 185px;
}
.card {
    background-color: #fff;
    /* box-shadow: var(--box-shadow); */
    border-radius: var(--border-radius);
    transition: 300ms box-shadow;
    padding: 15px;
    overflow: hidden;
}
.side-nav {
    max-width: 250px;
    min-width: 180px;
}
.side-nav img {
    max-width: 220px;
    height: auto;
}
@media screen and (max-width: 510px) {
    .product, .product img{
        width: 160px; 
        height: 250px;
    }
    .product img {
        width: 160px;
        height: 100px;
        margin: 0;
    }
    .product h5{margin: 5px 0 5px 0;}
    .category .card, .prod-container .card {padding: 5px;}
    .product button.btn-outline{width: 150px;}
}
@media screen and (max-width: 900px) {
    .category {max-width: 100vw;}
    .category .mob--show {
        display: block;
    }
}

/*---- PRODUCT ----*/
.prod-category{
    min-width: 65vw;
    max-width: 75vw;
}
/* Breadcrumbs */
ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
}
ul.breadcrumb li {
    display: inline;
    font-size: 180%;
}
ul.breadcrumb li+li:before {
    padding: 8px;
    content: "/";
}
ul.breadcrumb li a {
    color: var(--color-secondary-accent);
    text-decoration: none;
}
ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}
.prod-container {
    background-color: #fff;
    border-radius: var(--border-radius);
    padding: 20px;
    margin: 10px 0;
}

/* Image Slider */
.slider-container{
    position: relative;
    border-right: 3px solid var(--color-primary-light);
    max-width: 45vw;
    max-height: 680px;
}
.slider-container .column {width: 5vw; padding: 0;}
.slider-container .column img {
    vertical-align: middle;
    height: 5vw;
    object-fit: contain;
    border-bottom: 1px solid var(--color-secondary-light);
}
.slider-container .column .cursor {cursor: pointer;}
.active, .demo:hover {opacity: 1;}
.demo {opacity: 0.6;}
.column-1 {
    padding: 0 5px;
    float: left;
    height: auto;
}
.mySlides{display: none;}
.numbertext {
    color: var(--color-primary-dark);
    font-size: larger;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}
.mySlides img{
    height: auto;
    max-height: 55vh;
    width: auto;
    max-width: 25vw;
    object-fit: contain;
}
/* Desc */
.prod-desc{
    max-width: 35vw;
    margin: 30px 0 0 25px;
    position: relative;
    min-height: 300px;
    max-height: 450px;
}
.prod-desc p {font-size: 150%;}
.prod-desc button {
    position: absolute;
    bottom: 30px;
}
/* Tabs */
.tab {overflow: hidden;}
.tab button {
    transition: 0.3s;
    border-radius: 5px 5px 0 0;
}
.tab button:hover {background-color: var(--color-grey-light);}
.tab button.active {background-color: var(--color-grey);color: #fff;}
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid var(--color-grey);
    border-radius: var(--border-radius);
}
.tabcontent h3 {margin-top: 10px;}
.tabcontent a {font-size: 130%; line-height: 2.5rem;}
/* Specs */
#Specs table {margin-bottom: 15px;}
#Specs table  tr  th {padding : 0 0 5px 0;}
#Specs table  tr  td {
    padding: 2px;
    font-size: 120%;
}
@media  screen and (max-width: 900px) {
    .prod-category {
        max-width: 90vw;
        min-width: 75vw;
    }
    ul.breadcrumb{font-size: 65%;}
    .slider-container {
        max-width: 80vw;
        border: none;
    }
    .slider-container .column { width: 100%;}
    .slider-container .column img {
        padding: 10px 0;
        margin: 5px 0;
        height: 15vw;
        max-width: 19%;
    }
    .mySlides img {
        max-width: 75vw;
        max-height: 65vw;
    }
    .prod-desc {
        max-width: 80vw;
        min-height: 400px;
        margin: 0;
        font-size: 95%;
    }    
    .numbertext {top: 20vw;}
    .tab button {
        font-size: 120%;
        padding: 15px 7.5px;
        margin: 0 2.5px;
        letter-spacing: 0.02rem;
    }
    .tabcontent a {font-size: 100%; line-height: 4rem;}
    #Specs table.w-50 {width: 100%;}
    #Specs table.w-75 {width: 100%;}
    #Specs table  tr  td {font-size: 100%;}
}


/*---- Contact US ----*/
.employee {
    width: 200px;
    height: 400px;
}
.employee > img{
    width: 200px;
    height: 200px;
    object-fit: cover;
    margin: -15px -15px 0 -15px;
}
.contact-links, .contact-links a {
    color: var(--color-primary-accent);
}
.contact-links p{ 
    display: inline-block;
    letter-spacing: 0.1px;
}
.contact-links p:hover{
    color: var(--color-secondary-accent);
    cursor: pointer;
}
.facon{font-size: 160%;}


/*---- COLLAPSIBLE ----*/
.collapsible {
  background-color: var(--color-grey-light);
  cursor: pointer;
  margin: 10px 0;
  text-align: left;
  font-size: 15px;
}
.active, .collapsible:hover {background-color: var(--color-primary-light);}
.content {
  padding: 0 18px 18px 18px;
  display: none;
  overflow: hidden;
}

/*---- IMAGE TOP ----*/
.img-top {
  max-height: 500px;  
  object-fit: cover;
}

/*---- SUPPLIERS ----*/
.brand {padding: 5px 10px;}
.brand p{
    font-size: 100%;
}
.brand img {
    width: 60%;
    max-width: 100px;
    max-height: 100px;
}

/*---- PROJECTS MODAL VIDEO ----*/
.mod-btn {
    width: 160px;
    height: 180px;
    display: block;
    border-radius: var(--border-radius);
    background-color: var(--color-primary-dark);
    padding: 2px;
    font-size: 90%;
}
.mod-btn:hover{background-color: var(--color-primary);}
.vid-frm {
    border-radius: var(--border-radius);
    background-image: linear-gradient(rgb(255, 50, 50),rgb(215, 12, 12));
    height: 160px;
    width: 140px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100px 30px 50px;
    overflow: hidden;
}
.vid-frm:hover {
    height: 157px;
    width: 137px;
}
.vid-frm img {
    background-color: #fff;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vid-frm ._1 {
    display: inline-block;
    width: 15%;
    padding: 0;
    transform: rotate(90deg);
}
.vid-frm p {
    color: #fff;
    width: 70%;
    padding: 0;
    margin: 0;
    display: inline-block;
    margin-top: 6px;
}
.desc {
    background-color: #fff;
    text-align: left;
    padding: 0.5rem;
    color: #858282;
    letter-spacing: normal;
}
.modal {
    display: none;
    position: fixed;
    z-index: 100;
    padding-top: 25px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.m_phone {
    width: 400px;
    max-width: 80vw;
}
.m_normal {
    width: 960px;
    max-width: 80vw;
}
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: var(--border-radius);
    overflow: hidden;
}
.modal-close1, .modal-close2, .modal-close3, .modal-close4 {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.modal-close1:hover, .modal-close2:hover, .modal-close3:hover, .modal-close4:hover {
    cursor: pointer;
    color: #858282;
}

/*---- ADMIN/BACKGROUNDS ----*/
div.admin {padding: 2rem 13rem 1rem 23vw;}
.admin-category {
    min-width: 730px;
    max-width: 750px;
}
@media screen and (max-width: 900px) {
    div.admin {padding: 2rem 5rem 20vh 5rem;}
    .admin .grid4xauto{grid-template-columns: 1fr;}
    .modal-content {margin: 15px 40px;}
}
@media screen and (max-width: 300px) {div.admin {padding: 2rem 3.5rem 20vh 3.5rem;}}

/*---- FILE EXPLORER ----*/
.f-ico{
    width: 100px;
    height: 100px;
}
.fa-exp {
    color: var(--color-primary-dark);
    font-size: 700%;
}
.fa-exp:hover{color: var(--color-primary);}
.img-exp{background-color: inherit;}
.img-exp:hover{background-color: var(--color-grey);}
.exp-header{
    background-color: var(--color-primary-accent);
    padding-top: 1vh;
}
.exp-footer{
    background-color: #fff;
    padding-top: 1vh;
}
.exp-header img {
    max-height: 8vh;
    width: auto;
}

/*---- FULL PAGE NOTICE ----*/
.center-n {
    height: 100vh;
    position: relative;
}  
.center-n .notice {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.notice{
    height: auto;
    width: 350px;
    margin: auto;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}
.notice .far {
    font-size: 1000%;
    display: block;
}

/*---- MOBILE ----*/
.mobile {
    width: 100vw -5px;
    overflow-y: hidden;
}
.m-intro, .m-why {
    background-size: cover;
    background-repeat: no-repeat;
}
.m-intro {
    background-image: linear-gradient(to left, #00000000, var(--color-primary)), url('images/mobile/pic1_crop.webp');
    height: 40vh;
}
.m-why {
    min-width: 45vw;
    background-image: linear-gradient(to right, #00000000, var(--color-accent)), url('images/mobile/service.webp');
    height: 40vh;
}
.m-txt {
    padding: 12px 0 0 25px;
    width: 25vw;
    background-color: var(--color-primary);
}
.m-txt2{
    padding: 25px 65px 0 0;
    background-color: var(--color-accent);
}
#options, #inspo {width: 65vw;}
#options > .grid1x3 > div {
    margin : 15px;
    padding: 15px;
}
#options > .grid1x3 > div > img {height: 100px;}
#options > .grid1x3 > div > h3 {
    color: #1387a9;
    margin-top: 10px;
}
#inspo > .grid > .card {
    line-height: 1.7rem;
    margin-top: 50px;
}
#inspo > .grid > .product {width: auto;}
#inspo > .grid > .product >img  {
    width: auto;
    margin: 0 auto;
}
#process {
    height: auto;
    background-image: linear-gradient(#ffffff, #ffffff2e, #fff), url('images/mobile/consult.webp');
    background-size: cover;
}
#process div.border-rad {
    background-color: #fff;
    padding: 15px;
    margin: 0 15px;
}
#process h3{margin-top: 1rem;}
@media screen and (max-width: 900px) {
    .mobile > .grid1autox2 {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .m-intro {height: 30vh;}
    .m-txt { 
        width: 100vw;
        padding: 8px 15px;
    }
    .m-txt2{
        padding: 25px 5px 0 25px;
    }
    #process div.border-rad {
        margin: 0;
        padding: 5px;
        line-height: 1.7rem;
    }
    #process div.border-rad ul{padding-left: 15px;}
    #options, #inspo{width: 85%;}
    #options > .grid1x3 {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
    #inspo > .grid > .card {margin-top: 7px;}
}

/*---- INNO HUB ----*/
#inno > .grid1x3 > .card{width: 100%;}
#list { 
    list-style: none;
    max-height: 250px;
}
#list > div {
    z-index: -1;
    width: 300px;
    opacity: 0;
    animation: fadeIn 1s ease-in both;
}
#list div:nth-child(2) {animation-delay: 1.7s;}
#list div:nth-child(3) {animation-delay: 3.4s;}
#list div:nth-child(4) {animation-delay: 5.1s;}
#list div:nth-child(5) {animation-delay: 6.8s;}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, -20%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
#inno-sol-b {
    background-image: linear-gradient(#fff, var(--color-primary));
    height: 100px;
}
#inno-sol h4 {
    margin-bottom: 30px;
    margin-top: 0;
}
#inno-sol {background-image: linear-gradient(var(--color-primary),var(--color-accent), #fff);}
#why p {font-size: 15px;}
@media screen and (max-width: 900px) {
    #list {min-height: auto;}
    #inno-sol .grid4xauto {grid-template-columns: 1fr;}
    #inno-sol .card > .w-100 {width: 40%;}
}

/*---- Service Plans ----*/
.plans {
    margin: 50px;
    padding: 25px;
}
.plans .sub {margin-left: 0;}
.plans hr {border: 1px solid #fff;}
.plans-pop {
    padding: 45px 40px 30px 40px;
    margin: 30px 40px;
    position: relative;
}
.pop-sticker {
    position: absolute;
    top: 20px;
    left: 30px;
    background-color:  red;
    padding: 5px 10px;
    letter-spacing: 5px;
}
.bronze{background-color: var(--color-accent);}
.silver{background-color: var(--color-grey);}
.gold{background-color: rgb(236, 197, 0);}
.plans-t{font-size: 12px;}
.plans-t th {font-size: 15px;}
.plans-t tr > td:nth-of-type(1) {font-size: 15px;}
.plans-t .sub {font-size: 10px;}
@media screen and (max-width: 900px) {
    #splans .grid1x3 {grid-template-columns: 1fr;}
    #splans .w-50 {width: 75%;}
    #splans .w-75 {width: 100%;}
    .plans {margin: 15px 50px; padding: 15px 25px;}
    .plans-pop {margin: 0 40px; padding: 45px 40px 30px 40px;}
}

/*---- iCS ----*/
.ics {
    background-image: url(images/prod/ics/bg.svg);
    background-size: cover;
}
.ics--head {
    position: relative;
    margin-top: 150px;
    padding: 180px 20px 40px 20px;
}
.ics--head > img { position: absolute;}
.ics--head > img._1 {
    height: 400px;
    width: auto;
    top: -200px;
    left: 22%;
}
.ics--head > img._2 {
    height: 220px;
    width: auto;
    top: -15px;
    right: 33%;
}
.ics--demo-1{
    padding: 0 2rem 10px 2.8rem;
    margin: 0 1rem 0 5rem;
    text-decoration: none;
}
.ics--demo-1:hover {cursor: pointer;}
.ics--demo-1 h2,.ics--demo-1 p {color: #fff;}
.ics--demo-1 p{font-size: 1.5rem;}
.ics--demo-1 h2 { margin-top: 2rem;}
.ics--demo-2{
    border: 3px solid var(--color-primary) ;
    padding: 2.5rem;
    margin: 0 5rem 0 1rem;
    font-size: 1.8rem;
    background-color: #ffffffb7;
}
@media screen and (max-width: 900px) {
    .ics--head {
        margin-top: 100px;
        padding-top: 150px;
    }
    .ics--head > .w-75 {width: 90%;}
    .ics--head h3.w-75 {
        font-size: 2.5rem;
        width: 100%;
    }
    .ics--head h4 {font-size: 1.6rem;}
    .ics--head > img._1 {
        height: 200px;
        top: -115px;
        left: 10px;
    }
    .ics--head > img._2 {
        height: 150px;
        top: 0px;
        right: 0;
    }
    .ics--demo.grid2x1auto {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }
    .ics--demo-1{margin: 0;}
    .ics--demo-2{margin: 15px;}
}

/*---- MANUF LISTS ----*/
.block {
    padding: 8.5px;
    border-radius: 3px;
    display: inline-block;
}
.block-red {
    padding: 8.5px;
    border-radius: 3px;
    display: inline-block;
    background-color: var(--color-accent-dark);
}
.task>span>i {font-size: 20px;}
.tasklist .collapsible {font-size: 13.3333px;}
@media screen and (max-width: 900px) {
    .tasklist .grid1x2 {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr;
    }
}

/*---- DOCUMENT LIBRARY  ----*/
.btn-book{
    height: 210px;
    width: 148px;
    box-shadow: var(--box-shadow);
    text-decoration: none;
}
.btn-book:hover {box-shadow: var(--box-shadow-hover)}
.btn-book img{
    width: 148px;
    height: 210px;
}