/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 16 Oct 2024, 1:22:34 am
    Author     : azman
*/

@font-face 
{
	font-family: Agency FB;
	src: url('../fonts/AGENCYR.TTF') format('truetype');	
}

@font-face 
{
	font-family: Copperplate Gothic;
	src: url('../fonts/COPRGTB.TTF') format('truetype');	
}

@font-face 
{
	font-family: Century Gothic Bold;
	src: url('../fonts/GOTHICB.TTF') format('truetype');	
}

@font-face 
{
	font-family: Century Gothic;
	src: url('../fonts/GOTHIC.TTF') format('truetype');	
}


@font-face 
{
	font-family: Eras Light ITC;
	src: url('../fonts/ERASLGHT.TTF') format('truetype');	
}

html {
  font: 1.1em/1.4 Century Gothic, sans-serif;
}

@media screen and (max-width: 600px) {
/* start of phone styles */

    .mainFrame
    {       
        width: 100%;            
    }

    .topFrame
    {
        width: 100%;        
        height: 100px;
        margin: auto;        
        background-image: url("../images/panels.jpg");    
        background-repeat: no-repeat;
        background-size: 100%;        
    }   
    
    .productFrame
    {
        position: relative;
        margin-top: 100px;
        width: 100%;             
        text-align: center;
    }

    .products
    {        
        width: 100%;
        position: relative;
        top: 100px;    
        text-align: center;
        text-decoration: none;
        font-family: Agency FB, Times, serif;
        font-weight: bold;
        font-size: 40px;    
        color: #118c34;      
        margin: auto;
    }
    
    .productType
    {        
        width: 100%;
        position: relative;      
        font-size: 40px;
        font-weight: bolder;            
        color: #118c34;
        text-transform: uppercase;        
    }

    .solarPanelImage1
    {            
        position: relative;
        top: 50px;                    
        width: 25%;
    }
    
    .solarPanelImage2
    {            
        position: relative;
        vertical-align: top;         
        top: 50px;
        padding-left: 30px;
        width: 25%;        
    }
    
    .solarPanelImage3
    {            
        position: relative;
        vertical-align: top;
        top: 50px;            
        padding-left: 30px;
        width: 25%;
    }

    .offgridinverter
    {            
        position: relative;
        top: 0px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }

    .ongridinverter
    {            
        position: relative;
        top: 0px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }
    
    .hybridinverter
    {            
        position: relative;
        top: 50px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }
    
    .accoupledinverter
    {            
        position: relative;
        top: 150px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }
    
    .batteryFrame
    {
        position: relative;
        top: 400px;
        width: 100%;             
        text-align: center;
    }
    
    .contactusFrame
    {
        position: relative;
        top: 700px;
        width: 100%;             
        text-align: center;
        background: #208d7b;
    }
    
    .contactusFrame .contactus
    {        
        padding-top: 30px;
        width: 100%;
        position: relative;      
        font-size: 40px;
        font-weight: bolder;            
        color: #fff;
        text-transform: uppercase;        
    }
    
    .contactusFrame .text
    {        
        width: 60%;
        text-align: center;
        margin: auto;
        position: relative;      
        font-size: 20px;
        font-weight: bolder;            
        color: #fff;        
        padding: 30px;
    }
    
    .contactusFrame .emailForm
    {
        position: relative;   
        margin: auto;    
    }

    .contactusFrame .inputName
    {
        position: relative;   
        margin: auto;    
        text-decoration: none;
        font-weight: bold;
        font-family: Century Gothic, Times, serif;
        font-size: 14px;    
        color: #fff;        
        padding-top: 20px;
        padding-bottom: 5px;
    }

    .contactusFrame .inputField
    {
        text-decoration: none;
        font-family: Century Gothic, Times, serif;
        font-size: 13px;
        padding: 5px 5px;    
        color: #888;    
        border-radius: 5px;
        margin: 0px;    
    }

    .contactusFrame .submitButton
    {    
        margin-top: 30px;
        background-color: #61bb22; /* Green */
        border: none;
        color: white;
        padding: 20px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 13px;
        border-radius: 5px;
    }
    
    .contactusFrame .compName
    {        
        width: 60%;
        text-align: center;
        margin: auto;
        position: relative;      
        font-size: 30px;
        font-weight: bolder;            
        color: #ddd;        
        padding-top: 50px;
    }
    
    .contactusFrame .address
    {        
        width: 60%;
        text-align: center;
        margin: auto;
        position: relative;      
        font-size: 14px;
        font-weight: bolder;            
        color: #bbb;
        padding-bottom: 60px;
    }

    .lvbattery
    {            
        position: relative;
        top: 50px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }
    
    .lvstackbattery
    {            
        position: relative;
        top: 100px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }
    
    .lvrackbattery
    {            
        position: relative;
        top: 200px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }
    
    .hvlithiumbattery
    {            
        position: relative;
        top: 200px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }  

    a
    {
        color: #157fda;
        text-decoration: none;
        font-weight: bold;
    }

    a:visited
    {
        color: #157fda;
        text-decoration: none;
        font-weight: bold;
    }
  
}

@media screen and (max-width: 4000px) {
/* start of desktop styles */


    .mainFrame
    {       
        width: 100%;            
    }

    .topFrame
    {
        width: 100%;
        height: 100vh;    
        margin: auto;        
        background-image: url("../images/panels.jpg");    
        background-repeat: no-repeat;
        background-size: 100%;        
    }   
    
    .productFrame
    {
        position: relative;
        margin-top: 100px;
        width: 100%;             
        text-align: center;
    }

    .products
    {        
        width: 100%;
        position: relative;
        top: 100px;    
        text-align: center;
        text-decoration: none;
        font-family: Agency FB, Times, serif;
        font-weight: bold;
        font-size: 40px;    
        color: #118c34;      
        margin: auto;
    }
    
    .productType
    {        
        width: 100%;
        position: relative;      
        font-size: 40px;
        font-weight: bolder;            
        color: #118c34;
        text-transform: uppercase;        
    }

    .solarPanelImage1
    {            
        position: relative;
        top: 50px;                    
        width: 25%;
    }
    
    .solarPanelImage2
    {            
        position: relative;
        vertical-align: top;         
        top: 50px;
        padding-left: 30px;
        width: 25%;        
    }
    
    .solarPanelImage3
    {            
        position: relative;
        vertical-align: top;
        top: 50px;            
        padding-left: 30px;
        width: 25%;
    }

    .offgridinverter
    {            
        position: relative;
        top: 0px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }

    .ongridinverter
    {            
        position: relative;
        top: 0px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }
    
    .hybridinverter
    {            
        position: relative;
        top: 50px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }
    
    .accoupledinverter
    {            
        position: relative;
        top: 150px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }
    
    .batteryFrame
    {
        position: relative;
        top: 400px;
        width: 100%;             
        text-align: center;
    }
    
    .contactusFrame
    {
        position: relative;
        top: 700px;
        width: 100%;             
        text-align: center;
        background: #208d7b;
    }
    
    .contactusFrame .contactus
    {        
        padding-top: 30px;
        width: 100%;
        position: relative;      
        font-size: 40px;
        font-weight: bolder;            
        color: #fff;
        text-transform: uppercase;        
    }
    
    .contactusFrame .text
    {        
        width: 60%;
        text-align: center;
        margin: auto;
        position: relative;      
        font-size: 20px;
        font-weight: bolder;            
        color: #fff;        
        padding: 30px;
    }
    
    .contactusFrame .emailForm
    {
        position: relative;   
        margin: auto;    
    }

    .contactusFrame .inputName
    {
        position: relative;   
        margin: auto;    
        text-decoration: none;
        font-weight: bold;
        font-family: Century Gothic, Times, serif;
        font-size: 14px;    
        color: #fff;        
        padding-top: 20px;
        padding-bottom: 5px;
    }

    .contactusFrame .inputField
    {
        text-decoration: none;
        font-family: Century Gothic, Times, serif;
        font-size: 13px;
        padding: 5px 5px;    
        color: #888;    
        border-radius: 5px;
        margin: 0px;    
    }

    .contactusFrame .submitButton
    {    
        margin-top: 30px;
        background-color: #61bb22; /* Green */
        border: none;
        color: white;
        padding: 20px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 13px;
        border-radius: 5px;
    }
    
    .contactusFrame .compName
    {        
        width: 60%;
        text-align: center;
        margin: auto;
        position: relative;      
        font-size: 30px;
        font-weight: bolder;            
        color: #ddd;        
        padding-top: 50px;
    }
    
    .contactusFrame .address
    {        
        width: 60%;
        text-align: center;
        margin: auto;
        position: relative;      
        font-size: 14px;
        font-weight: bolder;            
        color: #bbb;
        padding-bottom: 60px;
    }

    .lvbattery
    {            
        position: relative;
        top: 50px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }
    
    .lvstackbattery
    {            
        position: relative;
        top: 100px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }
    
    .lvrackbattery
    {            
        position: relative;
        top: 200px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }
    
    .hvlithiumbattery
    {            
        position: relative;
        top: 200px;            
        margin: auto;
        width: 75%;
        text-align: center;
    }  

    a
    {
        color: #157fda;
        text-decoration: none;
        font-weight: bold;
    }

    a:visited
    {
        color: #157fda;
        text-decoration: none;
        font-weight: bold;
    }
}