* {
  font-family:Questrial;
  font-size: 20px;
  margin: 0;
  padding:0;
}

b {
  letter-spacing: 2px;
  font-size:inherit;
}

body {
  background:url('../images/bglarge2.jpg') repeat;
  background-size: cover;
}

sup {
  font-size:0.5em;
  line-height:1em;
}
img.images {
  max-height:100%;
  width:100%;
  object-fit: cover;
  border:1px solid #000;
}
img.images_small15 {
  margin-left:auto;
  margin-right:auto;
  width:15%;
  object-fit: cover;
  border:1px solid #000;
}
img.images_small30 {
  margin-left:auto;
  margin-right:auto;
  width:30%;
  object-fit: cover;
  border:1px solid #000;
}

img.product {
  height:100%;
  width:auto;
  border:3px solid transparent;
}
img.product:hover {
  border:3px solid #FF9933;
}

img.block {
  margin:0px;
}
img.block2 {
  margin:0px;
  visibility:hidden;
  width:0%;
}

.hidden		{ display:none; visibility:hidden; }

input.join 	{
  background:rgba(0,0,0,0.7);
  border:1px solid #000;
  color:#FFF;
  width:50%;
  font-size:20px;
  line-height:35px;
  margin: 5px 0px 5px;
  box-sizing: content-box;
  padding:10px;
}
.messagebox	{
  background:rgba(0,0,0,0.7);
  color:#FFF;
  border: 1px solid #000;
  width:50%;
  height:100px;
  margin: 5px 0px 5px;
  box-sizing: content-box;
  padding:10px;
}

input.send 	{
  background-color:#FF9933;
  border:1px solid #000;
  color:#000;
  line-height:50px;
  font-weight:bold;
  width:51.5%;
  margin: 5px 0px 5px;
  padding:10px;
}

.send:hover	{ color:#000; background-color:#0099CC; }

.quote	 	{
  background:rgba(0,0,0,0.6);
  font-size:20px;
  margin:20px;
  overflow:hidden;
  padding:0px;
  padding-right:10px;
  padding-left:20px;
  color:#FFF;
  vertical-align:top;
  text-align:left;
  width:50%;
  border:1px solid #202020; }


.grid {
  background:none;
  display:grid;
  grid-template-columns: 0.3fr 2.1fr;
  grid-template-rows: 120px 260px 350px auto;
  grid-template-areas:
  "title content"
  "titlelogo content"
  "header content"
  "footer content";
}

.title {
  grid-area: title;
  width: auto;
  color:#C0C0C0;
    background-color: #202020;
    border-left:2px solid #000;
    border-right: 2px solid #000;
    border-bottom:2px solid #000;
    text-align:center;
    font-weight:bold;
    letter-spacing:1px;
}

.title2 {
  display:none;
  color:#C0C0C0;
  text-align:center;
  font-weight:bold;
  letter-spacing:1px;
}

.titlelogo {
  grid-area: titlelogo;
  width: auto;
  height:inherit;
    background-color: #FFF;
    border-bottom:2px solid #000;
    border-left:2px solid #000;
    border-right: 2px solid #000;
    vertical-align: middle;
}

.header {
  grid-area: header;
  max-height:350px;
    background:url('../images/bglarge.jpg') repeat;
    border-left:2px solid #000;
    border-right:2px solid #000;
    border-bottom:none;
    padding-top:15px;
}

.content {
  grid-area: content;
    height:inherit;
    background:none;
    background-size: cover;
    letter-spacing:1px;
}

.footer {
  grid-area: footer;
  height:260px;
  border:2px solid #000;
}
.footer {
  background-color: #202020;
  color:#808080;
  vertical-align: text-top;
  text-align: center;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.1fr 0.1fr 0.1fr;
  grid-template-areas:
  "title2"
  "call"
  "social"
  "information";
}
.title2 {
  grid-area:title2;
  font-size: 1em;
  text-align: center;
}
.call {
  grid-area:call;
  font-size: 1em;
  text-align: center;
}
.social {
  vertical-align: top;
  grid-area:social;
  grid-gap: 10px;
}
.information {
  grid-area:information;
  font-size: 14px;
}

.maingrid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(0.3fr, 1fr));
  grid-template-rows: auto;
  grid-template-areas:
  "mainbody mainbody mainbody mainbody"
  "maintitle2 maintitle2 maintitle2 maintitle2"
  "service1 service1 service2 service2"
  "service3 service3 service4 service4"
  "maintitle3 maintitle3 maintitle3 maintitle3"
  "mainfaq mainfaq mainfaq mainfaq";
  grid-row-gap:5px;
  grid-column-gap:5px;
  margin:5px;
}
.maingrid2 {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(0.3fr, 1fr));
  grid-auto-rows: auto;
  grid-template-areas:
  "maintitle maintitle"
  "reviewgrid reviewgrid2";
  grid-row-gap:5px;
  grid-column-gap:5px;
  margin:5px;
}
.thankgrid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(0.3fr, 1fr));
  grid-auto-rows: auto;
  grid-template-areas:
  "maintitle"
  "mainbody"
  "maintitle3"
  "mainfaq";
  grid-row-gap:5px;
  grid-column-gap:5px;
  margin:5px;
}
.commgrid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(0.3fr, 1fr));
  grid-auto-rows: auto;
  grid-template-areas:
  "maintitle"
  "mainbody"
  "mainbody2";
  grid-row-gap:5px;
  grid-column-gap:5px;
  margin:5px;
}
.prodgrid  {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(334px, 1fr));
  grid-row-gap:5px;
  grid-column-gap:5px;
  margin:5px;
  }
.faqgrid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(0.3fr, 1fr));
  grid-auto-rows: auto ;
  grid-template-areas:
  "maintitle maintitle maintitle maintitle maintitle maintitle"
  "faq1 faq1 faq1 faq1 faq1 faq1"
  "faq2 faq2 faq3 faq3 faq4 faq4"
  "faq5 faq5 faq5 faq5 faq5 faq5";
  grid-row-gap:5px;
  grid-column-gap:5px;
  margin:5px;
  letter-spacing:1px;
}
  .quotegrid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(0.3fr, 1fr));
    grid-auto-rows: auto;
    grid-template-areas:
    "maintitle"
    "mainbody"
    "maintitle2"
    "mainbody2"
    "maintitle3"
    "mainbody3";
    grid-row-gap:5px;
    grid-column-gap:5px;
    margin:5px;
  }

}
.maintitle {
  grid-area:maintitle;
}
.maintitle2 {
  grid-area:maintitle2;
}
.maintitle3 {
  grid-area:maintitle3;
}
.maintitle4 {
  grid-area:maintitle4;
}
.maintitle, .maintitle2, .maintitle3 {
  font-size:1.5em;
  line-height:1.5em;
  color:#000000;
  border:2px solid #000;
  padding: 10px;
  letter-spacing: 2px;
  background-color: rgba(255, 255, 255, 0.5);
}
.reviewtitle {
  grid-area:reviewtitle;
  font-size:1.5em;
  line-height:1.5em;
  color:#000000;
  border:2px solid #000;
  padding: 10px;
  letter-spacing: 2px;
  background-color: rgba(255, 255, 255, 0.5);
  margin:5px;
}
.maintitle4 {
  color:#FFF;
  border:2px solid #000;
  padding: 10px;
  background-color: rgba(0,0,0, 0.5);
}
.mainbody {
  grid-area:mainbody;
  height: inherit;
  padding-bottom: 10px;
}
.mainbody2 {
  grid-area:mainbody2;
  height: inherit;
}
.mainbody3 {
  grid-area:mainbody3;
  height: inherit;
}
.mainfaq {
  grid-area:mainfaq;
  height: inherit;
}
  .mainbody, .mainbody2, .mainbody3, .mainfaq {
  display:grid;
  background-color: rgba(0, 0, 0, 0.6);
  border:2px solid #000;
  padding: 10px;
  color:#FFFFFF;
  width:inherit;
  text-align: justify;
}
.service1{
    grid-area:service1;
}
.service2{
    grid-area:service2;
}
.service3{
    grid-area:service3;
}
.service4{
    grid-area:service4;
}
.service5{
    grid-area:service5;
}
.service1, .service2, .service3, .service4, .service5 {
  display:grid;
  background: rgba(0, 0, 0, 0.6);
  border:2px solid #000;
  padding: 10px;
  color:#FFFFFF;
  height: inherit;
  width: inherit;
}
.faq1{
    grid-area:faq1;
}
.faq2{
    grid-area:faq2;
}
.faq3{
    grid-area:faq3;
}
.faq4{
    grid-area:faq4;
}
.faq5{
    grid-area:faq5;
}
.faq1, .faq2, .faq3, .faq4, .faq5 {
  display:grid;
  background: rgba(0, 0, 0, 0.6);
  border:2px solid #000;
  padding: 10px;
  color:#FFFFFF;
  height: inherit;
  width: inherit;
  text-align: justify;
}
.image1 {
    grid-area:image1;
}
.image1 {
  background: rgba(0, 0, 0, 0.6);
  border:2px solid #000;
  margin: 10px;
  padding: 10px;
  color:#FFFFFF;
  height: 100%;
  width: inherit;
}

.show {
  display:none;
  width:100%;
}
@media screen and (max-width: 767px)
  {

      b {
        letter-spacing: 1px;
        font-size:inherit;
        text-align:center;
      }

  img.product {
    margin-left: auto;
    margin-right: auto;
  }

    img.logo {
      width: 100%;
      height: auto;
      display:block;
      margin-left: auto;
      margin-right: auto;
    }
      img.block2 {
        visibility:visible;
        width:auto;
      }
  input.join, .messagebox {
    width:95%;
  }
  input.send {
    width:100%;
  }
  .grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
  "titlelogo header"
  "content content"
  "footer footer";
}

  .mainbody, .mainbody2, .mainbody3, .mainfaq,
  .faq1, .faq2, .faq3, .faq4, .faq5 {
    text-align:left;
  }
  .hide {
    display:none;
  }
  .show {
    display:initial;
    }
  .title {
      display: none;
      border-left: none;
      }
    .title2 {
        display: grid;
        border-left: none;
        }
      .titlelogo {
          border-left: none;
              border-right: none;
              padding-top:50%;
              padding-bottom:auto;
          }
  .header {
    border-right: none;
    border-bottom:2px solid #000;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .footer {
    padding-top:0px;
  }

  .maintitle, .maintitle2, .maintitle3, .reviewtitle {
    text-align:center;
  }
  .maingrid {
    display:grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-template-areas:
    "mainbody"
    "maintitle2"
    "service1"
    "service2"
    "service3"
    "service4"
    "maintitle3"
    "mainfaq";
  }
  .maingrid2 {
    display:grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-template-areas:
    "maintitle"
    "reviewgrid"
    "reviewgrid"
    "reviewgrid2"
    "reviewgrid2";
    margin: 5px;
  }
  .mainfaq {
    height:auto;
  }
  .commgrid {
    display:grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-template-areas:
    "maintitle"
    "mainbody"
    "mainbody2";
  }
  .faqgrid {
    display:grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-template-areas:
    "maintitle"
    "faq1"
    "faq2"
    "faq3"
    "faq4"
    "faq5";
  }
  .prodgrid {
    padding-left:5px;
  }
  .quotegrid {
    display:grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-template-areas:
    "maintitle3"
    "mainbody3"
    "maintitle"
    "mainbody"
    "maintitle2"
    "mainbody2";
    grid-row-gap:5px;
    grid-column-gap:5px;
    margin:5px;
  }
  .image1 {
    display:none;
  }
  .footer {
    height:100%;
  }
}

A.menuhome:link, A.menuhome:visited, A.menuhome:active, A.menuservices:link, A.menuservices:visited, A.menuservices:active, A.menucommercial:link, A.menucommercial:visited, A.menucommercial:active, A.menureviews:link, A.menureviews:visited, A.menureviews:active, A.menuproducts:link, A.menuproducts:visited,
A.menuproducts:active, A.menufaq:link, A.menufaq:visited, A.menufaq:active, A.menucontact:link, A.menucontact:visited, A.menucontact:active, A.menugallery:link, A.menugallery:visited, A.menugallery:active, A.menuinstallations:link, A.menuinstallations:visited, A.menuinstallations:active
			{  display:block; line-height:35px; text-align:center; color:#FFF; text-decoration:none; }

A.menuhome2:link, A.menuhome2:visited, A.menuhome2:active, A.menuservices2:link, A.menuservices2:visited, A.menuservices2:active, A.menucommercial2:link, A.menucommercial2:visited, A.menucommercial2:active, A.menureviews2:link, A.menureviews2:visited, A.menureviews2:active, A.menuproducts2:link, A.menuproducts2:visited,
A.menuproducts2:active, A.menufaq2:link, A.menufaq2:visited, A.menufaq2:active, A.menucontact2:link, A.menucontact2:visited, A.menucontact2:active, A.menugallery2:link, A.menugallery2:visited, A.menugallery2:active, A.menuinstallations2:link, A.menuinstallations2:visited, A.menuinstallations2:active
			{  display:block; line-height:35px; text-align:center; color:#FF9933; text-decoration:none; }

A.menuhome:hover, A.menuservices:hover, A.menucommercial:hover, A.menureviews:hover, A.menuproducts:hover, A.menufaq:hover, A.menucontact:hover, A.menuhome2:hover, A.menuservices2:hover, A.menucommercial2:hover, A.menuproducts2:hover, A.menufaq2:hover, A.menucontact2:hover,
A.menugallery:hover, A.menuinstallations:hover
			{ color:#0099CC; text-decoration:none; }

      A.img_link:link, A.img_link:visited, A.img_link:active {
      		padding-left:10px; text-decoration:none; opacity:1.0; color:#EDD333; }
      A.img_link:hover {
      		opacity:0.6; }

          A.product_link:link, A.product_link:visited, A.product_link:active {
          		text-decoration:none; }
          A.product_link:hover {
            	text-decoration:none; }

      A.smallorange:link, A.smallorange:visited, A.smallorange:active {
        	display:block; text-align: right;vertical-align: middle;text-decoration:underline; opacity:1.0; color:#FF9933; width:100%; }
      A.smallorange:hover {
         color:#0099CC;
          text-decoration:underline;}