* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: Tahoma, Verdana, sans-serif;
    height: 100vh;
}

body {
    height: 100vh;
}

a:link{
    color: cornflowerblue;
    text-decoration: none;
}

a:visited{    
    color:#3e4095;
    text-decoration: none;
}

.bground{    
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    z-index: -1;
    background-image: url("../images/background.jpeg");
    display: block;
    background-repeat: repeat-y;
}

.menu{
    background-color: #E1EBEE;
}

.topnav {
    background-color: #E1EBEE;
    overflow: hidden;
    width: 100vw;
}

.topnav .links {
    float: right;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: bold;
}

.topnav a:hover {
    background-color: #B9D9EB;
}

/* Hide the link that should open and close the topnav on small screens */
.bars {
    display: none;
    float: right;
}

.note{
    font-style: italic;    
    margin: auto;
    text-align: center;
    background-color: #E1EBEE;
}

.container {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.left {
    width: 100%;
    padding: 1%;
    text-align: center;
    font-size: large;
}

.right {
    width: 50%;
    padding: 1%;
    text-align: center;
    font-size: large;
}

.logo{
    max-width: 65%;
    height: auto;
}

.mainheader{
    text-align: center;
    width: 100%;
}

.products{
    width: 100%;
    display: flex;
}

.prod{
    flex: calc(100/3);
    text-align: center;     
}

.proddesc{
    flex: 25%;
    height: 100%;
    padding: 1%;
}

.prodheader{
    text-align: center;
}

.prodimg{
    max-width: 40%;
    margin: auto;
    display: block;
    object-fit: contain;
}

.footercontainer {

    background-color: #E1EBEE;
}

.footer {
    display: flex;
    margin: auto;
}

.footerheading {
    font-weight: bolder;
    text-align: center;
}

.bottom {
    flex: calc(100/3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
}

.bottomnav {
    font-weight: bolder;
    color: black;
}

.inverter{
    display: flex;
    width: 100vw;
}

.invprod{
    width: 20%;
    padding: 1%;
}

.invprodimg{
    max-width: 40%;
    max-height: 100%;
    margin: auto;
    display: block;
    object-fit: cover;
}

.batterylogo{
    max-width: 35%;
}

.batteryimg {
    max-width: 30%;
    max-height: 100%;
    margin: auto;
    display: block;
    object-fit: cover;
}

.batteryimg2 {
    max-width: 50%;
    max-height: 100%;
    margin: auto;
    display: block;
    object-fit: cover;
}

.kool {
    width: 100%;
    margin: auto;
    display: block;
    object-fit: contain;
}

.invprodlogo{
    max-width: 50%;
    display: block;
    object-fit: contain;
    margin:auto;
}

.solar{
    width: 50%;
    margin:auto;
}

.solarprodlogo{
    max-width: 75%;
        display: block;
        object-fit: contain;
        margin: auto;
}

.column{
    display: grid;
    grid-template-columns: 50% 50%;
}

.columnitem{
    text-align: center;
    padding: 10px;
    border: 1px solid lightblue;
}

.grid-container {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

.grid-item {
    border: 1px solid lightblue;
    text-align: center;
    padding: 10px;
}

@media (max-width:1023px) {
    .grid-container {
            display: grid;
            grid-template-columns: 50% 50%;
        }

    .logo {
        max-width: 55%;
        height: auto;
    }

    .solarprodlogo{
        max-width: 100%;
    }

    .footer{
        width: 100%;
    }
}
@media (max-width:900px){

        .logo {
                max-width: 100%;
                height: auto;
            }

        .bgroundimg{
            width: 100%;
            min-height: 100%;
        }

        .links a:link {
            display: none;
        }

        .menu{
            position: absolute;
            width: fit-content;
            right: 0;
            padding: 10px;
        }

        .bars {
            display: block;
            font-size: 25px;
            width: fit-content;        
        }

            .bars a{
                color: black;                
            }
       
        .topnav.responsive {
            right: 0;
            width: fit-content;         
            background-color: rgba(225, 235, 238, 0.9);            
        }

            .topnav.responsive a.link{
                float: none;
                display: block;
                text-align: left;
                font-size: large;
            }
        
       
        .container {
            flex-direction: column;

        }
    
            .left {

                width: 100%;
            }
        
            .right {

                width: 100%;
            }

       .products{
            flex-direction: column;
       }

       .prod{
        width: 100%;
       }

        .proddesc{
            width: 100%;
        }

        .prodimg{
            width: 50%;
        }

       .inverter{
        flex-direction: column;
       }

       .grid-container{
        display: grid;
        grid-template-columns: 100%;
       }

           .column {
               display: grid;
               grid-template-columns: 100%;
           }

                   .columnitem {
                         border: none;
                   }

    .solar{
    width: 100%;
    }        
        .solarprodlogo {
                            max-width: 75%;
                        }
    
    .footer{
        width: 100%;
        flex-direction: column;
    }

}