#banner {background:url(../images/services.jpg)  0px no-repeat; background-position:100% 100%; height:520px;}

#banner .box{margin: auto; padding: 10px; background: rgba(0, 0, 0, 0.39);

width: 37%;  margin-top: 26%; }





#banner  h2{  

    color: #fff;

    font-weight: 600;

    font-family: helvetica,sans-serif;

    text-align: center;margin-top: 0px;margin-bottom: 0px;}



#banner  p{color:#fff; width: 100%;font-size: 18px;}

#banner .container-fluid{width: 88%;}





#top-content {

    position: absolute;

    z-index: 9;

    width: 100%;

    background: rgba(255, 255, 255, 0.8);

    height: 60px;

    margin-top: 3%;

}













	.services3 .text{ line-height:33px; font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;}

	.services3  a{ font-size:18px;color:#414141;font-family: 'roboto-medium', Arial, sans-serif;   line-height: 40px;}

	.services3 .text{margin-top:45px; font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;}

	



	.services3 { margin-top:100px; margin-bottom:20px;font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;} 

	.services3 h1 {text-align:center; margin-top: 0px; font-weight:600;  font-size: 24px; color:#414141; text-transform:uppercase;font-family: 'roboto-medium', Arial, sans-serif;}

	.services3 h2 {text-align:center;margin:auto;width:50%; line-height:30px; color: #3c8a4b; font-size: 19px; width: 55%; font-weight:500;      font-family: 'roboto-medium', Arial, sans-serif; margin-bottom:2%;}

	.services3 .top{margin-top:40px;}



	.services3 p{color: #606060; font-size: 22px; width: 30%; font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;} 





	 #owl-demo {margin-top:70px;}  

	 

	

	.services3 a:hover{color:#e1b936;cursor:pointer;font-weight:600;}

	.services3 img{margin-top:53px;}

	.services3 .all{font-size:14px; width:55%;border:2px solid #00a94f;margin-left: 157px; cursor:pointer;}

	.services3 .all:hover{border:0px solid #00a94f; background:#00a94f; padding:2px; color:#fff;}

	.services3 .all:hover a{color:#fff;}

	.services3 .wide p{width:100%;font-size:16px;line-height:26px;}

	.services3 .wide h3{color:#414141;font-size:20px;    margin-top: 45px; font-weight:600;}

	.services3 .wide h2{color:#414141;font-size:20px;    text-align:left;margin-left:0px;font-weight:600;margin-bottom:5px;}

	.services3 .wide h4{color:#3c8a4b; font-weight:600;}

	.services3 .wide .download a{    font-size: 16px;

    color: #414141;

    font-family: 'roboto-medium', Arial, sans-serif;

    line-height: 22px;    float: left;    border-radius: 5px;    margin-top:45px;}

    .services3 .new img{margin-top: 0px; width:20%;    margin-right: 10px;}

	

	#service-content{padding-bottom:100px;    padding-top: 30px;}

	#service-content .container-fluid{width:80%;}

	#service-content h3{padding:10px; border:1px solid #c8c8c8;color:#414141; color:#3c8a4b;font-weight:100;font-size:17px; text-align:center;}

	#service-content .box{background:#d3d3d3;padding:25px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}

	#service-content h4{text-align:center;  color:#3c8a4b;font-size:20px;margin-top:0px;margin-bottom:0px; font-weight:bold;}

	#service-content .top{margin-top:2%;}

	

.buttonDownload {

	display: inline-block;

	position: relative;

	

    padding: 7px 14px;

  

	background-color: #3c8a4b;

	color: white!important;

  

	font-family: sans-serif;

	text-decoration: none;

	font-size: 0.9em;

	text-align: center;

	text-indent: 15px;

	    float: right;

}



.buttonDownload:hover {

	background-color: #e1b936;

	color: white!important;

}



.buttonDownload:before, .buttonDownload:after {

	content: ' ';

	display: block;

	position: absolute;

	left: 15px;

	top: 52%;

}



/* Download box shape  */

.buttonDownload:before {

	width: 10px;

	height: 2px;

	border-style: solid;

	border-width: 0 2px 2px;

}



/* Download arrow shape */

.buttonDownload:after {

	width: 0;

	height: 0;

	margin-left: 1px;

	margin-top: -7px;

  

	border-style: solid;

	border-width: 4px 4px 0 4px;

	border-color: transparent;

	border-top-color: inherit;

	

	animation: downloadArrow 2s linear infinite;

	animation-play-state: paused;

}



.buttonDownload:hover:before {

	border-color: #4CC713;

}



.buttonDownload:hover:after {

	border-top-color: #4CC713;

	animation-play-state: running;

}



/* keyframes for the download icon anim */

@keyframes downloadArrow {

	/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */

	0% {

		margin-top: -7px;

		opacity: 1;

	}

	

	0.001% {

		margin-top: -15px;

		opacity: 0;

	}

	

	50% {

		opacity: 1;

	}

	

	100% {

		margin-top: 0;

		opacity: 0;

	}

}





	

	

button{

  display: inline-block;

  position: relative;

  background: none;

  border: none;

  color: #fff;

  font-size: 18px;

  cursor: pointer;

  width: 100%;

}



button::before, button::after{

  content:"";

  width: 0;

  height: 2px;

  position: absolute;

  transition: all 0.2s linear;

  background: #3c8a4b;

}



span::before, span::after{

  content:"";

  width:2px;

  height:0;

  position: absolute;

  transition: all 0.2s linear;

  background: #3c8a4b;

}

button:hover::before, button:hover::after{

  width: 100%;

}

button:hover span::before, button:hover span::after{

  height: 100%;

}

/*----- button 1 -----*/

.btn-1::before, .btn-1::after{

  transition-delay: 0.2s;

}

.btn-1 span::before, .btn-1 span::after{

  transition-delay: 0s;

}

.btn-1::before{

  right: 0;

  top: 0;

}

.btn-1::after{

  left: 0;

  bottom: 0;

}

.btn-1 span::before{

  left: 0;

  top: 0;

}

.btn-1 span::after{

  right: 0;

  bottom: 0;

}

.btn-1:hover::before, .btn-1:hover::after{

  transition-delay: 0s;

}

.btn-1:hover span::before, .btn-1:hover span::after{

  transition-delay: 0.2s;

}



/*--- Button 2 -------*/





.btn-2::before, .btn-2::after{

  transition-delay: 0s;

}

.btn-2 span::before, .btn-2 span::after{

  transition-delay: 0.2s;

}

.btn-2::before{

  right: 0;

  top: 0;

}

.btn-2::after{

  left: 0;

  bottom: 0;

}

.btn-2 span::before{

  left: 0;

  top: 0;

}

.btn-2 span::after{

  right: 0;

  bottom: 0;

}

.btn-2:hover::before, .btn-2:hover::after{

  transition-delay: 0.2s;

}

.btn-2:hover span::before, .btn-2:hover span::after{

  transition-delay: 0s;

}





/*----- button 3 -----*/

.btn-3::after{

  left: 0;

  bottom: 0;

  transition-delay: 0.6s;

}

.btn-3 span::after{

  transition-delay: 0.4s;

  right: 0;

  bottom: 0

}

.btn-3::before{

  right: 0;

  top: 0;

  transition-delay: 0.2s;

}

.btn-3 span::before{

  transition-delay: 0s;

  left: 0;

  top: 0;

}



.btn-3:hover::after{

  transition-delay: 0s;

}

.btn-3:hover span::after{

  transition-delay: 0.2s;

}

.btn-3:hover::before{

  transition-delay: 0.4s;

}

.btn-3:hover span::before{

  transition-delay: 0.6s;

}



/*----- button 4 -----*/

.btn-4::after{

  right:0;

  bottom: 0;

  transition-duration: 0.4s;

}

.btn-4 span::after{

  right:0;

  bottom: 0;

  transition-duration: 0.4s;

}

.btn-4::before{

  left: 0;

  top: 0;

  transition-duration: 0.4s;

}

.btn-4 span::before{

  left: 0;

  top: 0;

  transition-duration: 0.4s;

}



/*----- button 5 -----*/

.btn-5::after{

  left:0;

  bottom: 0;

  transition-duration: 0.4s;

}

.btn-5 span::after{

  right:0;

  top: 0;

  transition-duration: 0.4s;

}

.btn-5::before{

  right: 0;

  top: 0;

  transition-duration: 0.4s;

}

.btn-5 span::before{

  left: 0;

  bottom: 0;

  transition-duration: 0.4s;

}



/*----- button 6 -----*/

.btn-6::before{

  left: 50%;

  top: 0;

  transition-duration: 0.4s;

}

.btn-6::after{

  left: 50%;

  bottom: 0;

  transition-duration: 0.4s;

}

.btn-6 span::before{

  left: 0;

  top: 50%;

  transition-duration: 0.4s;

}

.btn-6 span::after{

  right: 0;

  top: 50%;

  transition-duration: 0.4s;

}

.btn-6:hover::before, .btn-6:hover::after{

  left: 0;

}

.btn-6:hover span::before, .btn-6:hover span::after{

  top: 0;

}





	

	

	

	

	

	

	

	

	

	

	



@media only screen and (min-width : 1920px) and (max-width : 2560px){}

@media only screen and (min-width : 1600px) and (max-width : 1919px){

	

	.services3 h2{width:60%;}

	.services3 .wide p {width: 100%;}



	#banner .box{width: 45%;margin-top: 19%;}

	

	

}

@media only screen and (min-width : 1440px) and (max-width : 1599px){



	.services3 h2{width:64%;}

	.services3 .all{margin-left:120px;}

	.services3 .wide p {width: 100%;}

	 

#top-content{margin-top: 4%}

#banner .box{width: 50%; margin-top: 20%;}

	

}

@media only screen and (min-width : 1366px) and (max-width : 1439px){

	

	

	.services3 h2{width:77%;line-height: 25px; font-size: 16px;}

	.services3 .all{width:61%;margin-left:98px;}

	.services3 .wide p {width: 100%;}

	#service-content h3{font-size:15px;}

	#service-content h4{font-size:17px;}

	.services3 .wide h4{font-size: 16px;}





#top-content{margin-top: 5%}

#banner .box{width: 52%; margin-top: 36%;}

	

	







}



@media only screen and (min-width : 1200px) and (max-width : 1365px){

	

	.services3 h2{width:75%;}

	.services3 .all{width:73%;margin-left: 57px;}

	#banner p{width:80%;}

	.services3 .wide p {width: 100%;}

	.services3 .wide h3{font-size:20px;}

	.services3 .wide h2{font-size:20px;}

	#service-content h3{min-height:60px;}

	#service-content h4{font-size:15px;}



	#banner .box{width: 60%;margin-top: 41%;}

#top-content{margin-top: 5%;}

	.services3 .new img{    width: 15%;}
	.services3 .wide h4{font-size: 15px;}
	.services3 .wide .download a{    margin-top: 20px;}

	

}

@media only screen and (min-width : 1024px) and (max-width : 1199px){

	

	.services3 h2{width:90%;}

	.services3 .all{width:89%;margin-left:18px;}



	#banner p{width:92%;}

	.services3 .wide h3{margin-top:30px; font-size:20px;}

	.services3 .wide h2{ font-size:20px;}

	.services3 .wide p {width: 100%;}

	#service-content h3{min-height:60px;font-size:16px;margin-top: 0px;}

	.services3 .wide h4{font-size:15px;}

	.container-fluid2 {width: 90%;}

	#service-content .container-fluid {width: 90%;}

	#service-content .box{padding:20px;}

	#service-content h4{font-size:15px;}





#banner .box{width: 71%;margin-top: 50%;}

#top-content{margin-top: 6%}


.services3 .new img{    width: 15%;
}

.services3 .wide h4{font-size: 13px;
}
	
	.services3 .wide .download a{    margin-top: 15px;}
	.services3 .wide .download a{font-size: 12px;}
}

@media only screen and (min-width : 768px) and (max-width :1023px){



	.services3 h2{width:100%;} 

	.services3 img{margin-left:0px;}

	#banner p{width:100%;}



	.services3 .wide p {width: 100%;}

	.services3 img {margin-top: 25px;}

	#service-content h3{min-height:60px;}

	.services3 {margin-top: 70px;}

	#service-content {padding-bottom: 70px;}

	#service-content h4{font-size:15px;}

	

#banner .box{width: 100%;margin-top: 67%;}

#top-content {margin-top: 8%; height: 50px;}

.services3 .new img{    width: 15%;}
.services3 .wide .download a{    margin-top: 27px;}





	

}

@media only screen and (min-width : 150px) and (max-width : 767px){





#top-content {height: 53px; margin-top: 7%;}





#banner .box{width:100%;margin-top: 75%;}

#banner h2{font-size:23px;}

#banner p{    display: none;width:100%;line-height:24px;font-size: 16px;}

#banner{height:350px;}





	.services3 h2{width:100%;}

	.services3 img{margin-left:0px;}

	.services3 .text{text-align:left;     margin-top: 30px;}

	.services3 .all{margin-left:0px;}

	

	.services3 {margin-top: 50px;     margin-bottom: 5px;}

	.services3 h1{font-size:20px;}

	.services3 h2{font-size:16px;line-height:24px;text-align:justify;}

	.services3 a {font-size: 17px;    line-height: 30px;}

	.services3 img {margin-top: 10px;}

	.services3 .wide h3{font-size:20px;margin-top:25px;}

	.services3 .wide h2{font-size:20px;}

	.services3 .wide p {width: 100%;text-align:justify;}

	#service-content h3{min-height:78px;}

	#service-content {

    padding-bottom: 60px;}

	#service-content .top {margin-top: 5%;}

	#service-content h4{font-size:17px;}

	#banner .container-fluid {width: 90%;}

.services3 .wide .download a{font-size: 10px;    margin-top: 17px;    line-height: 15px;}
.services3 .new img{    width: 15%;}
.services3 .wide h4{font-size: 14px;}

	

}





@media only screen and (max-width : 375px){

#service-content h3{font-size:14px;}

	

	 #banner h2{font-size:20px;}

    #banner p{width:100%;line-height:24px;}

    #banner .box{margin-top:85%;}

	

	

	

	

}



@media only screen and (max-width : 320px){

	#top-content img{width:100%;}

	#service-content h3 { padding: 5px;}

	  #banner h2 {font-size: 20px;}

    #banner p{line-height:24px;font-size:15px;}

    #banner .box {margin-top: 105%;}
.services3 .wide .download a{float: right;
}
	

	

	

	

}