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



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

width: 50%;  margin-top: 25%;  text-align: center;}





#banner  h2{  

    color: #fff;

    font-weight: 600;

    font-family: helvetica,sans-serif;

    margin-top: 0px;margin-bottom: 0px;}



#banner  p{color:#fff; text-align:left; 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%;} 





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

#product{padding-top:10px; padding-bottom:10px;}

#product  h2{font-weight:500; text-transform:uppercase;font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;} 

#product  span{color:#3d8b4d; font-weight:600;font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;}



#product .top-line .breadcrumb {padding-top:35px;  background:none;margin:0;font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;}  .breadcrumb li a{color:#333;}

 .now .breadcrumb li a:hover {color:#000;font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;}

#product .top-line .breadcrumb li a, .breadcrumb li.active{    color: #969492;

    font-weight: 400;

    font-size: 18px;

    text-align: left;

    margin: 0;font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;

}

#product .top-line .breadcrumb li a:hover{color: #3d8b4d;}

#product .top-line .breadcrumb li.active { color: #3d8b4d;

    font-weight: 400;

    font-size: 18px;

    text-align: left;

    margin: 0;font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;

}



#pro-img  .container-fluid{width:80%;}







* {

  box-sizing: border-box;

}



.row > .column {

  padding: 10px 8px;

}



.row:after {

  content: "";

  display: table;

  clear: both;

}



.column {

  float: left;

  width: 25%;

}



/* The Modal (background) */

.modal {

  display: none;

  position: fixed;

  z-index: 1;

  padding-top: 100px;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: black;

}



/* Modal Content */

.modal-content {

  position: relative;

  background-color: #fefefe;

  margin: auto;

  padding: 0;

  width: 90%;

  max-width: 650px;

}



/* The Close Button */

.close {

  color: white;

  position: absolute;

  top: 10px;

  right: 25px;

  font-size: 35px;

  font-weight: bold;

}



.close:hover,

.close:focus {

  color: #999;

  text-decoration: none;

  cursor: pointer;

}



.mySlides {

  display: none;

}



.cursor {

  cursor: pointer

}



/* Next & previous buttons */

.prev,

.next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  margin-top: -50px;

  color: white;

  font-weight: bold;

  font-size: 20px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

  -webkit-user-select: none;

}



/* Position the "next button" to the right */

.next {

  right: 0;

  border-radius: 3px 0 0 3px;

}



/* On hover, add a black background color with a little bit see-through */

.prev:hover,

.next:hover {

  background-color: rgba(0, 0, 0, 0.8);

}



/* Number text (1/3 etc) */

.numbertext {

  color: #f2f2f2;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}



img {

  margin-bottom: -4px;

}



.caption-container {

  text-align: center;

  background-color: black;

  padding: 2px 16px;

  color: white;

}



.demo {

  opacity: 0.6;

}



.active,

.demo:hover {

  opacity: 1;

}



img.hover-shadow { transition: 0.3s}



.hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)}







.zoom { transition: transform .2s; margin: 0 auto;}



.zoom img {width: 100%; max-height: 200px; min-height: 200px;}



.zoom:hover {

    -ms-transform: scale(1.5); /* IE 9 */

    -webkit-transform: scale(1.5); /* Safari 3-8 */

    transform: scale(1.5); 

}



.services-section1 .marg{margin-top:4%;    margin-bottom: 3%;}

.services-section1 .marg h1{text-align:center; margin:auto; color:#414141;margin-bottom:10px; font-weight:600;    font-family: 'roboto-medium', Arial, sans-serif;}

.services-section1 .marg p{text-align:center; margin:auto; font-size:17px;margin:auto; width:90%; color:#3c8a4b;line-height: 28px;}

.news{display:none;}





 /* services section*/ 



.intro-section1 {  text-align: center;  } #myCarousel{margin-bottom: 160px;}

.services-section1 { padding-bottom:100px;border-bottom:1px solid #e5e5e5;} 

.services-section1 h1 { margin-top: 0px; font-weight:600;  font-size: 24px; color:#000; text-transform:uppercase;    font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;}

.services-section1 h2 { line-height:32px; color: #3c8a4b; font-size: 30px; width: 30%; font-weight:600;  text-transform:uppercase;margin-top:0px;    font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;}

.services-section1 .top{margin-top:40px;}



.services-section1 p{color: #606060; font-size: 17px;    font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;}  #owl-demo {margin-top:70px;}  

 

.services-section1 h4{color:#3c8b4c; position:absolute; top:115%; text-transform:uppercase;

 -moz-transform: rotate(270deg);  /* FF3.5+ */

    -o-transform: rotate(270deg);  /* Opera 10.5 */

    -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */ left:0%;     font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;}



	

	

	













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

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

	#banner .box{width: 42%;margin-top: 18%;}



#banner{height: 535px}

	

	

}

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

	

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

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





	    

}

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

	

	.services-section1 .marg p{width:100%; font-size: 16px;line-height: 25px;}



	



#banner .box{width: 69%; margin-top: 38%;}

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



   





}



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

		.services-section1 .marg p{width:90%; }

		.services-section1 .marg h1{font-size:20px;}





#banner .box {width: 65%; margin-top: 42%;}

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

	

}

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

		.services-section1 .marg p{width:100%;}

		.services-section1 .marg h1{font-size:20px;}



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

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







}

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

	

	 .services-section1 {padding-bottom: 70px;}

	 	.services-section1 .marg p{width:100%;}

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





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

.column{width: 33%;}





	

}

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





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























	.services-section1 {padding-bottom: 50px;}

	

	#product .top-line .breadcrumb li.active{font-size:16px;}

	#banner .box{width:100%;}

	.services-section1 .marg p{width:100%;    font-size: 16px;text-align: justify;}

	.services-section1 .marg h1{font-size:20px;}

	#banner{height:350px;}

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

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

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

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

  .column{width: 100%}

	

}



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

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

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

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

	

	

}

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

	



	#product .top-line .breadcrumb li.active {font-size: 14px;}

	#product .top-line .breadcrumb li a, .breadcrumb li.active{font-size:14px;}

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

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

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

	

}