*{ margin: 0px; padding: 0px; }
@font-face { font-family: OpenSans; src: url(../fonts/OpenSans-Regular.ttf); }
@font-face { font-family: OpenSans-lite; src: url(../fonts/OpenSans-Light.ttf); }
body{ font-family: OpenSans, sans-serif; font-size: 1em; line-height: 1.5em; }
.clr{ clear: both; }
.subpage { padding-top: 60px; display: flex; flex-direction: column; min-height: 100vh; }
.subpage .header{ background-color: #54C3E1; background-image: linear-gradient(90deg, #54C3E1, #6BC378); }
.header{
    min-height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    display: block;
    width: 100%;
    position: fixed;
    top: 0px;
    color: #ffffff;
    background-color: #54C3E1;
    background-image: linear-gradient(90deg, #54C3E1, #6BC378);
}
.container{ margin: 0px auto; width: 80%;  }
.menu{ display: none; }
.banner{
    background-color: #54C3E1;
    background-image: linear-gradient(90deg, #54C3E1, #6BC378);
    height: 24em; color: #ffffff;
    overflow: hidden; z-index: -10;
}
.banner img{ width: 100%; }

.logo{ max-width: 300px; float: left; line-height: 0px; padding: 5px; }
.logo span{ font-weight: bold; }
.nav{ float: right; font-size: 14px; }
.nav a{ display:block;  text-decoration: none; float: left; margin-left: 10px; min-width: 100px; text-align: center; color: #ffffff; }
.nav a:hover{ color: #e7392c;   }
.section{ padding: 2em 0px; }
.gridbox{ margin: 0px auto; width: 80%; display: grid; grid-template-columns:repeat(3,1fr); grid-auto-rows: minmax(200px,auto); grid-column-gap: 20px; }
.article{ padding: 1em; font-family: OpenSans-lite, sans-serif; text-align: center; display: flex; flex-direction: column; }
.article h1{  color: #54C3DF; font-size: 1.4em;  }
.article p{ margin-top: 1em; color: #898989; flex: 1; } 
.article a{ text-decoration: none; color:#fff; text-transform: uppercase; background-color: #54C3DF; padding:5px 10px; display: block; width: 100px; margin: 10px auto 30px auto; } 

.servicebox{ padding: 2em 0px; background-color: #6BC378; }
.servicebox>h1{ text-align: center; padding: 30px 0px; color: #fff; font-weight: normal; font-family: 'OpenSans-lite' }
.servgrid{ margin: 0px auto; width: 80%; display: grid; grid-template-columns:repeat(4,1fr); grid-auto-rows: minmax(150px,auto); grid-column-gap: 10px; }
.servitem{ padding: 1em; font-family: OpenSans-lite, sans-serif; text-align: center; }
.servitem h1{  color: #fff; font-size: 1em;  }
.servitem p{ margin-top: 1em; color: #fff; } 
.servitem a{ text-decoration: none; color:#fff; text-transform: uppercase; border:solid 1px #fff; padding:5px 10px; display: block; width: 100px; margin: 10px auto 30px auto; } 
.servitem .img{ width:50px; height: 50px; margin: 20px auto 10px auto;}
.servitem .img img{ width: 100%; }
.servitem:hover{ background-color: rgb(98, 189, 111);}


.whybox{ padding-bottom: 2em; }
.whybox>h1{ text-align: center; padding: 30px 0px; color: #6BC379; font-weight: normal; font-family: 'OpenSans-lite' }
.ygrid{ margin: 0px auto; width: 78%; display: grid; grid-template-columns:repeat(4,1fr); grid-auto-rows: minmax(150px,auto); grid-gap: 20px; }
.yitem{ padding: 1em; font-family: OpenSans-lite, sans-serif; text-align: center; border: solid 1px #55c3de; border-radius: 0.8em; }
.yitem h1{  color:#6BC379; font-size: 1em;  }
.yitem p{ margin-top: 0.2em; font-size: 0.9em; } 
.yitem a{ text-decoration: none; color:#fff; text-transform: uppercase; border:solid 1px #fff; padding:5px 10px; display: block; width: 100px; margin: 10px auto 30px auto; } 
.yitem .img{ width:50px; height: 50px; margin: 10px auto 10px auto;}
.yitem .img img{ width: 100%; }


.main{
    color: #898989;
    line-height: 1.5em;
    min-height: 400px;
    flex:1;
}

.prodBox{ margin: 0px auto 25px auto; width: 80%; display:grid;  grid-template-columns: 1fr 1fr 1fr; grid-gap: 25px;  }
.prodBox .content{ padding: 20px; padding: 20px; border: solid 1px #e3e3e3; box-shadow: 3px 2px 8px #e4e4e4; }
.prodBox .content p{ text-align: center; font-size: .88em; }
.prodBox .content .img
{ 
    width: 50px; text-align: center; margin: 10px auto 0px auto;
    border:solid 2px #6BC378; border-radius: 50%; padding: 20px;
} 
.prodBox .content .img img{ width: 100%; } 
.prodBox a{ text-decoration: none; color:#fff; text-transform: uppercase; background-color: #54C3DF; padding:12px 10px; display: block; width: 150px; margin: 10px auto 10px auto; text-align: center; } 
.txt-center{ text-align: center; margin: 0px auto; font-size: 1.2em !important; }




.contentBox{ margin: 0px auto 25px auto; width: 80%; display:grid;  grid-template-columns: 1fr 1fr; grid-gap: 25px;  }
.contentBox .content{ padding: 20px; padding: 20px; border: solid 1px #e3e3e3; box-shadow: 3px 2px 8px #e4e4e4; }
.contentBox .content .img{ width: 60px; text-align: center; margin: 10px auto 0px auto; } 
.contentBox .content .img img{ width: 100%; } 
.txt-center{ text-align: center; margin: 0px auto; font-size: 1.2em !important; }

.content{ padding: 10px 10px 10px 10px; font-family: OpenSans-lite, sans-serif; }
.content h1
{ 
    font-size: 1.6em; padding: 15px 5px; color: #56C3DA; max-width: 400px; line-height: 1.4em;
    border-bottom: solid 1px #6AC37B; font-family: OpenSans-lite, sans-serif; font-weight: normal; 
} 
.content p{ font-size: 1em; padding: 10px 0px; line-height: 1.6em;  } 
.content ul{ padding: 10px 10px 10px 0px; margin:10px 0px; color:#6BC378; font-size: 0.95em; }
.content ul>li{padding: 10px 10px 10px 20px; list-style-position:inside; border:solid 1px #55C3DC; margin-bottom:10px; list-style:none; }
.content form{ width: 45%; height: auto; margin-top: 0px;float: left;}
.content form>input,select{ padding: 5px;  border:solid 1px #C4C4C4; max-width:405px; min-width:405px; float: left; margin-bottom: 20px;}
.content form textarea { padding: 5px; border:solid 1px #C4C4C4; min-width:300px;height: 150px; float: left; margin-bottom: 15px; }
.content form>label{font-size:12px;text-align:center;font-weight:bold;color:#007D7F; max-width:160px; min-width:200px; float: left; text-align: left;margin-bottom:10px; }

.footer{
    min-height: 150px;
    background-color: #232323;
}
.foobottom{
    padding: 15px 0px;
    background-color: #1a1a1a;
    color: #b6b6b6;
    font-size: .92em;
}

.contactData
{
    display: flex; 
    flex-direction: row; 
    gap: 50px; 
    margin-top: 20px; 
}
.footerData
{
    display:grid; grid-template-columns: repeat(4, 1fr); 
    grid-column-gap: 30px; padding: 20px 0px;
    justify-content: space-between; font-size: 14px;
}

.footerData h1{ font-size: 1.2em;  margin-bottom: 15px; border-bottom:solid 1px #444444; padding-bottom: 10px; }
.footerData a{ text-decoration:dotted; font-size: 14px; display: block; padding-left:5px; }
.footerData a:hover{ color: #6BC378 !important; }
.footerData>div{ padding:10px 0px; border-left:solid 0px #444444; }

.containerBanner{ width: 80%; margin: 0px auto; padding-top: 10px; }


@media only screen and (max-width: 500px) 
{
    .menu{ display: block; max-width: 32px; float: right; }
    .menu img{ width: 100%; margin-top: 20px; }
    .header{ background-color: #54C3E1; background-image: linear-gradient(45deg, #54C3E1, #6BC378); }
    .nav{ display: none; }
    .nav a{ width: 100%; margin: 0px; height: 3em; line-height: 3em; border-top: solid 1px rgba(255, 255, 255, 0.25); }
    .gridbox{ grid-template-columns: 1fr; width: 100%; grid-column-gap: 0px; }
    .servgrid{ grid-template-columns: 1fr; width: 100%; grid-column-gap: 0px; }
    .ygrid{ grid-template-columns: 1fr; width: 100%; grid-column-gap: 0px; }
    .contentBox{ width: 92%; grid-template-columns: 1fr; grid-column-gap: 0px; }
    .prodBox{ width: 90%; grid-template-columns: 1fr; grid-column-gap: 0px; }
    .whybox{ padding: 0em 1.5em 2em 1.5em; }
    .banner{ height: 10em; }
    .contactData{ display: block; }
    .contactData>div{ margin-bottom: 10px; }
    .footerData{ display: block; }
    .footerData>div{ margin-bottom: 10px; }
    .containerBanner{ width: 100%; padding-top: 10px; }
}

@media only screen and (min-width: 501px) 
{
    .nav{ display: block; }
}