html, body {
    font-family: Tahoma, Verdana, sans-serif;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0%;
}

* {
    box-sizing: border-box;
}

/*NAVBAR*/

#hamnav {
    width: 100%;
    background-color: #202020;
    /* Optional */
    position: fixed;
    top: 0;
    z-index: 5;
  }

  #hamnav:active {
      background-color: #202020;
  }
  
  /* (B) HORIZONTAL MENU ITEMS */
  #hamitems { display: flex; }
  
  
  #hamitems a {
    flex-grow: 1;
    flex-basis: 0;
    padding: 10px;
    color: white;
    text-decoration: none;
    text-align: center;
  }
  
  #hamitems a:hover { color: #B8B8B8 }
  
  /* (C) HIDE HAMBURGER */
  #hamnav label, #hamburger { display: none; }
  
  /* [ON SMALL SCREENS] */
  @media screen and (max-width: 768px){
  
    /* (A) BREAK INTO VERTICAL MENU */
    #hamitems a {
      box-sizing: border-box;
      display: block;
      width: 100%;
      border-top: 1px solid #333;
    }
  
    /* (B) SHOW HAMBURGER ICON */
    #hamnav label {
      display: inline-block;
      color: white;
      background: #202020;
      font-style: normal;
      font-size: 1.2em;
      padding: 10px;
    }
  
    /* (C) TOGGLE SHOW/HIDE MENU */
    #hamitems { display: none; }
    #hamnav input:checked ~ #hamitems { display: block; }
  }

  /* HEADLINE PICTURE AND TEXT*/
.headPicture {

background: linear-gradient(360deg, #202020, #CD0000, #202020);
margin-top: -8%;

}

.headPicture img {
    width:100%
}

.pictureText {
    font-size: 7vw;
    text-align: center;
    transform: translate(0%, 80%);
    color: white;
   
}


/* PRODUCTS DISPLAY AREA*/


/*
.gradientBackground {
    height: auto;
    width: 100%;
    background: linear-gradient(79deg, #000000, #202020, #b2b2b2, #000000);
    background-size: 400% 400%;
    animation: gradient 19s ease infinite;
    color: white;
    
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
*/

.productContainer {
    display: grid;
    grid-template-columns: auto auto;
    height: auto;
    line-height: 1;
    gap: 5%;
    padding: 10%;
    
}

.productContainer div {
    height: auto;
    width: 100%;
}

.productContainer div > a > img {
    height: 100%;
    width: 100%; 
    image-rendering: pixelated;
}


/*
.productContainer div > hr {
    width: 30%;
    transform: translate(-113%, -2229%);
}
*/

.productTitles {
    font-size: 3vw;
    transform: translate(0%, -4%);

}

.productText {
    font-size: 1.4vw;
    text-shadow: none;
    transform: translate(-13%, 5%);
    
}

/*TABLES*/
.greyBackground {
    background-color:#F5F5F5;
    height: auto;
    width: 100%;
    padding: 5%;
}


th, td {
    border: #202020;
    border-style: solid;
    border-radius: 15px;
}

th {
    padding: 1%;
}

td {
    padding: 2%;
}

/*SYMBOLS CONTAINER AREA*/
.whiteBackground {
    height: auto;
    width: 100%;
   padding: 1%;
}

.randomTitle {
    text-align: center;
    font-size: 3vw;
    font-weight: bold;
    margin-bottom: 1em;
}

.symbolsContainer {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto;
    height: auto;
}

.symbolsContainer div {
    text-align: center;
    margin: 4%;
}

.symbolsTitles{
    font-size: 1.2vw;
}

.symbolsText {
    font-size: .8vw;
    
}

/* FOOTER*/

.blackBackground {
    height: auto;
    width: 100%;
    background-color: #202020;
    color: white;
}

.footerContainer {
    margin: auto;
    display:grid;
    grid-template-columns: auto auto auto;
    grid-gap:5rem;
    
    box-sizing: border-box;
    
    
}

.footerContainer > div {
    margin-top: 20px;
    text-align: left;
    font-size: 15px;
    height: 267px;
    width: 175px;
    max-width: 100%;
   color: white;
    }

    .footerContainer a {
        color: white;
        text-decoration: none;
    }

    .footerContainer a:hover {
        color: #B8B8B8;
    }


    .general-purpose-button {
        display:flex;
        align-items: center;
        color:black;
        background:none;
        cursor: pointer; 
        padding: .25em .5em;
        font-size: 15px;
        width: fit-content;
        width: -moz-fit-content;
        text-align: center;
        border: 1px solid hsl(0, 0%, 60%);
        border-radius: 15px;
        margin: 1em auto;
        outline:0;
        transition: background-color .25s, color .25s, border-radius .25s, border-color .25s;
        background-color: white;
    }
    .general-purpose-button:hover {
        color: white;
        background-color: #CD2200;
        border-radius: 5px;
        border-color: white;
    }
    

/* Extra small devices (phones, 100px and up) */

@media only screen and (min-width: 100px) {
    /*
.productContainer {
    grid-template-columns: repeat(1, auto);
}
*/

.symbolsContainer {
    grid-template-columns: repeat(1, auto); 
}

.symbolsTitles {
    font-size: 4vw;
}

.symbolsText {
    font-size: 3vw;
}

.footerContainer {
    grid-template-columns: repeat(1, auto);
    width: auto;
    justify-content: center;
}

.productText {
    transform: translate(-12%, 5%);
    
}

.pictureText {
    transform: translate(0%, 96%);
}

}

/*  small devices (tablets, 600px and up) */

@media only screen and (min-width: 600px) {
    /*
    .productsContainer img{
        height: 20em;
        
    }
    */

    .symbolsContainer {
        grid-template-columns: repeat(2, auto);
    }

    .symbolsTitles {
        font-size: 2.5vw;
    }
    
    .symbolsText {
        font-size: 1.7vw;
    }

    .footerContainer {
        grid-template-columns: repeat(1, auto);
    }

    .productText {
        transform: translate(-10%, 5%);
    }
}
    /* Large devices (900px and up) */


@media only screen and (min-width: 700px) {
    .productText {
        transform: translate(-7%, 5%);
    }

    .pictureText {
        transform: translate(0%, 75%);
    }
}

@media only screen and (min-width: 900px) {
    /*
    .productsContainer img{
        height: 20em;
       
    }
    */

    .symbolsContainer {
        grid-template-columns: repeat(2, auto);
    }

    .symbolsTitles {
        font-size: 2vw;
    }
    
    .symbolsText {
        font-size: 1.5vw;
    }

    .footerContainer {
        grid-template-columns: repeat(3, auto);
    }

    .productText
    {
        transform: translate(-3%, 5%);
        
    }

}


    /* Extra large devices (1200px and up) */

@media only screen and (min-width: 1200px) {
/*
    .productsContainer img{
        height: 33em;
      
    }
  */  

    .symbolsContainer {
        grid-template-columns: repeat(4, auto);
    }

    .symbolsTitles {
        font-size: 1.2vw;
    }
    
    .symbolsText {
        font-size: .8vw;
    }

    .footerContainer {
        grid-template-columns: repeat(3, auto);
    }

    .productText {
        transform: translate(-2%, 5%);
    }
}

@media only screen and (min-width: 1350px) {
    .productText {
        transform: translate(0%, -5%);
    }
}

/*iSAN v3000 WEBPAGE*/
.wrapper {
    max-width: 100%;
     height: auto;
 }
 
 .redGradient{
    background: linear-gradient(360deg, #202020, #CD0000, #202020);
    color: white;
    width: 100%;
    height: auto;
 }

 .headGrid {
     display: grid;
     gap: 5%;
 }

 .headGrid div {
     height: auto;
     width: 100%;
 }

.headGrid div > img {
    height: 100%;
    width: 100%;
    image-rendering: pixelated;
}

 .v3kTitle {
     font-size: 4.5vw;
     text-align: center;
 }

/*SPECIFICATIONS*/

 .specsTitle {
     text-align: center;
     font-size: 4vw;
     padding-bottom: 5%;
     color: #202020;
 }

.specsGrid {
    height: auto;
    width: 80%;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    gap: 2% 2%;
    margin: auto;
    padding-bottom: 2%;
}

.specsGrid div {
    padding: 9%;
    font-size: 1.7vw;
}

/*MORE PRODUCTS*/

.moreProducts-Title {
    font-size: 4vw;
    text-align: center;
    color: #202020;
    padding-bottom: 5%;
}

.productsGrid {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 14%;
    justify-content: center;
}

.productsGrid div {
    height: auto;
    width: 17em;
    text-align: center;
    border-radius: 10px;
    padding-top: 5%;
    padding-bottom: 7%;
    line-height: 2.4;
    font-size: 1.2em;
    color: #202020;
    background: white;
}

.productsGrid div > a {
    text-decoration: none;
    color: #202020;
    
}

.productsGrid div > a:hover {
    background: #cd0000;
    border-radius: 10px;
    color: white;
}

.productsGrid div > img {
    height: 5em;
    width: 12em;
    padding-top: 3%;
    image-rendering: pixelated;
}

.productsGrid div > hr {
    width: 10em;
}

.learnMore-Button {
    background:#CD0000; 
    border-radius:22px; 
    padding:8px; 
    position: relative;
    color: white;
}

.learnMore-Button:hover {
    border-radius: 9px;
    background-color:#CD2200;
    transition: 0.2s;
}

/*CLIENTS AREA*/

.clientsGrid {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto;
    justify-content: space-evenly;
}

.clientsGrid div {
    height: auto;
    width: 100%;
}

.clientsGrid div:hover {
    opacity: 0.7;
}


/*RESPONSIVE*/

 @media only screen and (min-width:100px) {
     .headGrid {
         grid-template-rows: 1fr 2fr;
         transform: translate(0%, 80%);
     }

   

     .productsGrid {
         grid-template-columns: repeat(1, auto);
         padding-bottom: 36em;
        
     }

     .clientsGrid {
         grid-template-columns: repeat(1, auto);
     }

     .specsGrid div{
         font-size: 2.7vw;
     }
 }


 @media only screen and (min-width:600px) {
    .headGrid {
        transform: translate(0%, 50%);
    }

    .clientsGrid {
        grid-template-columns: repeat(2, auto);
    }

 }


 @media only screen and (min-width:700px) {
    .headGrid {
        transform: translate(0%, 37%);
    }

    .productsGrid {
        grid-template-columns: repeat(2, auto);
        padding-bottom: 12em;
    }
 }


 @media only screen and (min-width:900px) {
    .headGrid {
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 0fr 0fr;
        transform: translate(0%, 80%);
}
.specsGrid div {
    font-size: 1.5vw;
}

.clientsGrid {
    grid-template-columns: repeat(3, auto);
}

 }


 @media only screen and (min-width:1200px) {
     .headGrid {
        transform: translate(0%, 23%);
     }

     .productsGrid {
        grid-template-columns: repeat(3, auto);
        padding-bottom: 5em;
    }
 }


 @media only screen and (min-width:1500px) {
     .headGrid {
         transform: translate(0%, 23%);
     }

     .clientsGrid {
        grid-template-columns: repeat(9, auto);
    }
 }