body {

  margin:0px;
  padding:0px;
  color: #fff;
  font-family: sans-serif;
  animation: fadeInAnimation ease 3s; 
   animation-iteration-count: 1; 
   animation-fill-mode: forwards; 
        } 
        @keyframes fadeInAnimation { 
            0% { 
                opacity: 0; 
            } 
            100% { 
                opacity: 1; 
            } 
        } 
 
 

h4
{ color:#f49c34;
font-weight:bold;
}
.container {
  max-width:90%;
  margin: 0 auto;

}
article {
  padding: 1em;
  margin-bottom: 20px;
}
header
{
  background-color: #f5f5f5;
  /* padding:10px; */
  margin:0px;
}
.menu{
		 background-color:#575658;
  padding: 1em;
  color:#fff;
}
.slide
{
background: url(../img/banner.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
footer {
  background-color: #3c3c3c;
  padding:0px;
  margin:0px;
  height: auto;
  color:#fff;
  padding:20px;

}
.main
{
	 width: calc(1000vw -40);
  background-color:#fff;
  padding: 1em;
   text-align: justify;
  text-justify: inter-word;
   color:#7f7f82;
  
}
.content {
  width: calc(1000vw -40);
  background-color:#f5f5f5;
  padding: 1em;
  border-top-style:solid;
  border-top-color: #ebebeb;
  border-top-width:thin;
    border-bottom-style:solid;
  border-bottom-color: #ebebeb;
  border-bottom-width:thin;
  color:#7f7f82;
  text-align: justify;
  text-justify: inter-word;
   
}
.navbottom {
  width: calc(1000vw -40);
  background-color:#f5f5f5;
  padding: 1em;
  text-align: justify; 
  color:#f49c34; 
  background:#fff;
  text-justify: inter-word;
 }
 .navbottom h2
 {
	 color:#6c6c6c;
	 font-weight: 98;
 }
  .navbottom a
  {
	  text-decoration:none;
	  color:#f49c34;
  }
  .navbottom a:hover
  {
	  text-decoration:underline;
	  color:#349745;
  }
header {
  grid-area: header;
}
footer {
  grid-area: footer;
}
.grid-wrapper {
  display: grid;
  grid-template-columns: calc(50vw -40) calc(50vw-40) ;
  grid-template-rows: 1;
  grid-gap: 20px;
  grid-template-areas: "left-half right-half";
}
.half-left {
  grid-area: left-half;
  background-color: #9ACD32;
}
.half-right {
  grid-area: right-half;
  background-color: #9ACD32;
}
.grid-wrapper-equal-thirds {
  display: grid;
  grid-template-columns: calc(33vw -50) calc(33vw-50) calc(33vw-50) ;
  grid-template-rows: 1;
  grid-gap: 20px;
  grid-template-areas: "left-third middle-third right-third";
}
.left-third, .middle-third, .right-third {
  background-color: #1E90FF;
  padding: 1em;
  margin-bottom: 20px;
}
.grid-wrapper-two-thirds {
  display: grid;
  grid-template-columns: 
    66% calc(33% - 10px);
  grid-template-rows: 1;
  grid-gap: 20px;
  grid-template-areas: "left-two-thirds right-one-third";
}
.left-two-thirds, .right-one-third {
  background-color: #FF6347;
  padding: 1em;
  margin-bottom: 20px;
}

@media screen and (max-width: 700px) {
	.grid-wrapper {
		grid-template-areas: "left-half" "right-half";
		grid-template-columns: 100%;
		grid-template-rows: 100px 
							100px;
      grid-row-gap: 0;
	}
  .left-half, .right-half {
    margin: 0px;
  }
	.grid-wrapper-equal-thirds {
		grid-template-areas: "left-third" "middle-third" "right-third";
		grid-template-columns: 100%;
		grid-template-rows: 100px 100px 100px;
      grid-gap: 20;
	}
  .left-third, .middle-third {
    margin: 0px;
  }
.grid-wrapper-two-thirds {
		grid-template-areas: "left-two-thirds" "right-one-third";
		grid-template-columns: 100%;
		grid-template-rows: 100px 100px;
      grid-gap: 20;
	}
  .left-two-thirds {
    margin: 0;
  }
  .right-one-third {
    margin-bottom: 20px;
  }
}


.demo{ background: #fff; margin:15px; }
.serviceBox{
    padding: 50px 35px;
    background: #fff;
    border: 1px solid #eee;
    border-bottom-color: #f49c34;
    text-align: center;
    position: relative;
    transition: all 0.5s ease 0s;
	
}

.serviceBox:hover{ border: 1px solid #f49c34; }
.serviceBox:before,
.serviceBox:after{
    content: "";
    width: 70%;
    height: 5px;
    background: #f49c34;
    opacity: 0;
    position: absolute;
    top: -3px;
    left: 35%;
    transform: translateX(-50%);
    transition: all 0.5s ease 0s;
}
.serviceBox:hover:before,
.serviceBox:hover:after{
    opacity: 1;
    left: 50%;
}
.serviceBox:after{
    top: auto;
    bottom: -3px;
}
.serviceBox .service-icon{
    width: 65px;
    height: 65px;
    line-height: 65px;
    border-radius: 50%;
    background: #f49c34;
    margin: 0 auto 20px;
    font-size: 36px;
    color: #fff;
}
.serviceBox .title{
    font-size: 20px;
    font-weight: bold;
    color: #252525;
    margin: 0 0 10px 0;
    transition: all 0.5s ease 0s;
}
.serviceBox:hover .title{ opacity: 0; }
 
.description{
    font-size: 14px;
    color: #7a7a7a;
    line-height: 25px;
    margin: 0;
    transition: all 0.5s ease 0s;
	word-wrap: break-word;
	text-align:justify;
}
.serviceBox:hover .description{
    margin-top: -20px;
    padding-bottom: 20px;
}
.tbl
{
	padding:50px;
}
.tbl td
{
	padding:10px;
}
.tbl tr:hover
{
	background:#fffcf5;
	color:#ffb303;
}
.tbl td, .tbl th {
  border: 1px solid #ddd;
  padding: 8px;
}
.tbl  th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #e67905;
  color: white;
}
.download
{
	padding:5px 10px;
	background:#349745;
	color:#fff;
	font-size:12px;
	border:none;
}
.download:hover
{
		background:#0f5c1c;
}
.address p
{
	line-height:10px;
}
.address a
{
	color:#e67905;
}

/* form starting stylings ------------------------------- */
.group 			  { 
  position:relative; 
  margin-bottom:45px; 
}
input 				{
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:350px;
  border:none;
  border-bottom:1px solid #fac27d;
}
input:focus 		{ outline:none; }


/* LABEL ======================================= */
label 				 {
  color:#999; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  left:5px;
  top:10px;

  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color:#f79836;
  border:none;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:350px; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#f79836; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}

.submitbtn
{
	padding:10px 25px;
	background:#f79836;
	color:#fff;
	font-size:16px;
	border:none;
}
.submitbtn:hover
{
	border:1px solid #f79836;
	background:#fff;
	color:#f79836;
}

@media only screen and (max-width:990px){
    .serviceBox{ margin-bottom: 30px; }
}
.preloader{background-color:#f7f7f7;width:100%;height:100%;position:fixed;top:0;left:0;right:0;bottom:0;z-index:999999;-webkit-transition:.6s;-o-transition:.6s;transition:.6s;margin:0 auto}
.preloader .preloader-circle{width:100px;height:100px;position:relative;border-style:solid;border-width:3px;border-top-color:#ff656a;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent;z-index:10;border-radius:50%;-webkit-box-shadow:0 1px 5px 0 rgba(35,181,185,0.15);box-shadow:0 1px 5px 0 rgba(35,181,185,0.15);background-color:#ffffff;-webkit-animation:zoom 2000ms infinite ease;animation:zoom 2000ms infinite ease;-webkit-transition:.6s;-o-transition:.6s;transition:.6s}
.preloader .preloader-circle2{border-top-color:#0078ff}
.preloader .preloader-img{position:absolute;top:50%;z-index:200;left:0;right:0;margin:0 auto;text-align:center;display:inline-block;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);padding-top:6px;-webkit-transition:.6s;-o-transition:.6s;transition:.6s}
.preloader .preloader-img img{max-width:55px}
.preloader .pere-text strong{font-weight:800;color:#dca73a;text-transform:uppercase}@-webkit-keyframes zoom{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.6s;-o-transition:.6s;transition:.6s}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:.6s;-o-transition:.6s;transition:.6s}}@keyframes zoom{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.6s;-o-transition:.6s;transition:.6s}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:.6s;-o-transition:.6s;transition:.6s}}