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

}

/* ☰ */ /*FOR RESPONSIVE MENU*/

* {
    box-sizing:border-box
}

.wrapper {
    height: auto;
    width: 100%;
}



/*SIDEBAR (NAVIGATION)*/
.sidebar {
    color: white;
    position: fixed;
    height: 100%;
    width: 12%;
    padding: 2%;
    line-height: 1.5;
    
}

.sidebar ul {
    list-style: none;
    text-align: right;
}

.sidebar ul > li {
    text-align: center;
}

.sidebar ul > li > a {
    text-decoration: none;
    color: white;
    font-size: 1.1em;
}


.sidebar ul > li > a:hover {
    background: #F5F5F5;
    color: #202020;
    border-radius: 13px;
    padding: 2%;
}


.contentContainer {
    width: 100%;
    height: auto;
    background: #191919;
    color: white;
}


.redBackground {
    background:lightcoral;
    color: white;
    width: 100%;
    height: auto;
}


.titleArea {
    height: auto;
    width: 100%;
    background-color: #7fcec5;
    background-image: linear-gradient(315deg, #7fcec5 0%, #14557b 74%);
    margin-bottom: -4px;
}

.titleArea div {
    height: auto;
    
}

.titleArea div > .headTitle {
    color: #F5F5F5;
    position: absolute;
    text-align: center;
    transform: translate(14%, 22%);
    font-family: 'Titillium Web';
}


.headTitle2 {
    line-height: 2;
}


.titleArea div > hr {
    width: 84%;
    border: 1px solid white;
}


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


.greyBackground {
    background: #F5F5F5;
    padding: 4%;
    width: 100%;
    height:auto;
    color: black;
}



/*INFORMATION SECTION*/
.infoGrid {
    display: grid;
    width: 100%;
    gap: 7%;
}

.infoGrid div {
    height: auto;
    width: 100%;
    text-align: center;
}

.infoGrid div > img {
    height: auto;
    image-rendering: pixelated;
}



/* 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: #14557b;
        background-color: #F5F5F5;
        border-radius: 5px;
        border-color: white;
    }
    
    .specsTitle {
        font-weight: bolder;
        text-align: center;
        padding-bottom: 6%;
        font-size: 1.5vw;
    }

    .benefitsGrid {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto auto auto auto auto auto;
        row-gap: 4%;
        column-gap: 25%;
        margin-left: auto;
        margin-right: auto;
        height: 60em;
        width: 65%;
        padding-bottom: 10%;
    }

    .benefitsGrid div {
        height: 5em;
        width: 100%;
        text-align: left;
    }


    .productsGrid {
        display: grid;
        height: auto;
        width: 100%;
        gap: 3%;
    }


    .productsGrid div {
        height: auto;
        width: 45em;
        text-align: left;
    }

    .productsGrid div > img {
        height: 100%;
        image-rendering: pixelated;
        filter: drop-shadow(0px 5px 3px gray)
    }

    .productsGrid div > span {
        font-weight: bolder;
        font-size: 1.4em;
    }



/*MEDIA QUERIES*/

@media only screen and (min-width:100px) {
.sidebar {
    text-align: center;
    height: auto;
    width: 100%;
    position: relative;
    background-color: #7fcec5;
    background-image: linear-gradient(233deg, #7fcec5 0%, #14557b 74%);

    }

  .sidebar ul {
      display: contents;
  }

.sidebar ul > li {
        padding-bottom: 7%;
        text-align: center;
        /*
        display: block;
        */
    }


.sidebar img {        
        padding-bottom: 1em;
    }



.headTitle1 {
    font-size: 5vw;
}
   

.headTitle2 {
    font-size: 2.2vw;
}


.infoGrid {
    grid-template-rows: auto auto;
    padding-bottom: 30%;
}

.headTitle {
    margin-top: -7%;
}

.titleArea {
    padding-top: 3%;
}

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

.benefitsGrid {
    height: 77em;
}

.specsTitle {
    font-size: 3vw;
}

.productsGrid {
    grid-template-rows: auto auto;
    justify-content: space-around;
    padding-bottom: 15%;
}

.productsGrid div {
    width: 28em;
}

.productsGrid div > img {
    width: 28em;
}

}





@media only screen and (max-width:700px) {
   .sidebar img { 
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        display: block;
        
   }

}




@media only screen and (min-width:700px) {
    .sidebar {
        color: white;
        position: relative;
        width: 100%;
        background-color: #7fcec5;
    background-image: linear-gradient(191deg, #7fcec5 0%, #14557b 74%);
    }

    .sidebar ul {
        display: block;
    }

    .sidebar img {
        float: left;
        position: absolute;
        top: 35%;
        left: 2%;
    }

    .infoGrid {
        padding-bottom: 12%;
    }

    .sidebar ul > li {
        display: inline;
        padding-bottom: 0%;
        padding-left: 3%;
    } 


 

    .headTitle1 {
        font-size: 4.5vw;
        line-height: 1.5;
    }
       
    .headTitle2 {
        font-size: 2vw;
    }

    .headTitle {
        margin-top: -2%;
    }

    .titleArea {
        padding-top: 6%;
    }

    .benefitsGrid {
        height: 55em;
    }
    .specsTitle {
    font-size: 2vw;
    }

    .productsGrid {
        padding-bottom: 5%;
    }
}

/*RESPONSIVE NAVBAR 800PX --> 1499PX*/

    @media only screen and (min-width:800px) {
        .sidebar ul > li {
            padding-left: 6%;
        }
    }

    @media only screen and (min-width:900px) {
        .sidebar ul > li {
            padding-left: 9%;
        }

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

/*END*/



@media only screen and (min-width:1500px) {
    .sidebar {
        position: fixed;
        height: 100%;
        width: 16%;
        padding: 2%;
        background-color: #7fcec5;
        background-image: linear-gradient(78deg, #7fcec5 0%, #14557b 74%);
    }

    .sidebar img {
        float: right;
        padding-bottom: 16%;
        position: relative;
        top: 0;
        left: 0;
    }
    
    .contentContainer {
        margin-left: 16%;
        height: 100%;
        width: 84%;
    }

    .sidebar ul {
        padding-top: 35%;
    }

    .sidebar ul > li {
        display: list-item;
        text-align: right;
        padding-bottom: 30%;
    }

  .infoGrid {
  grid-template-columns: auto auto;
  width: 100%;
  gap: 7%;
  padding-bottom: 0;
  }

  .infoGrid div > img {
      height: 41em;
  }

  .benefitsGrid {
      height: 50em;
  }

  .specsTitle {
      font-size: 1.5vw;
  }

  .productsGrid div {
      width: 41em;
  }

  .productsGrid div > img {
    width: 41em;
  }
}

@media only screen and (min-width:1700px) {

    .productsGrid div {
        width: 43em;
    }
    
      .productsGrid div > img {
          width: 43em;
          float: right;
      }

      .productsGrid {
        grid-template-columns: auto auto;
        padding-bottom: 10%;
    }
}