@charset "utf-8";

/* CSS Document */



body {

  margin: 0;

  padding: 0;

	font-family: 'Exo 2', sans-serif;

}





/*header*/



/*.header{position: relative}

*/





















strong{font-weight: 600;}

/*SLide*/





.btn {

  display: inline-block;

  padding: 13px 20px;

  color: #fff;

  text-decoration: none;

  position: relative;

  background: transparent;

  border: 1px solid #e1e1e1;

  font: 12px/1.2 "Oswald", sans-serif;

  letter-spacing: 0.4em;

  text-align: center;

  text-indent: 2px;

  text-transform: uppercase;

  transition: color 0.1s linear 0.05s;

}

.btn::before {

  content: "";

  display: block;

  position: absolute;

  top: 50%;

  left: 0;

  width: 100%;

  height: 1px;

  background: #e1e1e1;

  z-index: 1;

  opacity: 0;

  transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;

}

.btn::after {

  transition: border 0.1s linear 0.05s;

}

.btn .btn-inner {

  position: relative;

  z-index: 2;

}

.btn:hover {

  color: #373737;

  transition: color 0.1s linear 0s;

}

.btn:hover::before {

  top: 0;

  height: 100%;

  opacity: 1;

  transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;

}

.btn:hover::after {

  border-color: #373737;

  transition: border 0.1s linear 0s;

}



.slideshow {

  overflow: hidden;

  position: relative;

  width: 100%;

  height: 100vh;

  z-index: 1;

}

.slideshow .slideshow-inner {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.slideshow .slides {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

}

.slideshow .slide {

  display: none;

  overflow: hidden;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

  opacity: 0;

  transition: opacity 0.3s ease;

}

.slideshow .slide.is-active {

  display: block;

}

.slideshow .slide.is-loaded {

  opacity: 1;

}

.slideshow .slide .caption {

  padding: 25px 35px;

    position: absolute;

    left: 55%;

    top: 70%;

    background: #017ac98c;width: 40%;

}

.slideshow .slide .image-container {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-position: center;

  z-index: 1;

  background-size: cover;

  image-rendering: optimizeQuality;

}

.slideshow .slide .image-container::before {

  content: "";

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0);

}

.slideshow .slide .image {

  width: 100%;

  object-fit: cover;

  height: 100%;

}

.slideshow .slide-content {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 2;

  color: #fff;

  text-align: left;

  display: flex;

  justify-content: center;

  align-items: center;

}

.slideshow .slide .title {

  margin: 0 auto 15px;

  max-width: 1000px;

  font-size: 2.5rem;

	font-weight: 500;

  letter-spacing: 0em;

  text-transform: uppercase;

	    font-family: 'Exo 2', sans-serif;

}

.slideshow .slide .text-inn {

  margin: 0 auto;

  max-width: 1000px;

  font-size: 18px;

  line-height: 1.4;

}

.slideshow .slide .text-inn p{color: #fff;}

.slideshow .slide .btn {

  margin: 15px 0 0;

  border-color: #fff;

}

.slideshow .slide .btn::before {

  background: #fff;

}

.slideshow .pagination {

  position: absolute;

  bottom: 60px;

  left: 5%;

  width: 100%;

  height: 12px;

  cursor: default;

  z-index: 2;

  text-align: center;

}

.slideshow .pagination .item {

  display: inline-block;

  padding: 15px 5px;

  position: relative;

  width: 25px;

  height: 32px;

  cursor: pointer;

  text-indent: -999em;

  z-index: 1;

}

.slideshow .pagination .item + .page {

  margin-left: -2px;

}

.slideshow .pagination .item::before {

  content: "";

  display: block;

  position: absolute;

  top: 15px;

  left: 5px;

  width: 20px;

  height: 20px;

  transition: background 0.2s ease; border-radius: 50%;    border: 2px solid #017ac9;

}

.slideshow .pagination .item::after {

  width: 0;

  background: #017ac9;

  z-index: 2;

  transition: width 0.2s ease;

}

.slideshow .pagination .item:hover::before, .slideshow .pagination .item.is-active::before {

  background-color: #017ac9;

}

.slideshow .arrows .arrow {

  margin: -33px 0 0;

  padding: 15px 20px;

  position: absolute;

  top: 80%;

  cursor: pointer;

  z-index: 3; background: #017ac9;

	padding-top: 23px;

}

.slideshow .arrows .prev {

  left: 5%;

}

.slideshow .arrows .prev:hover .svg {

  left: -10px;

}

.slideshow .arrows .next {

  left: 9%;

}

.slideshow .arrows .next:hover .svg {

  left: 10px;

}

.slideshow .arrows .svg {

  position: relative;

  left: 0;

  width: 14px;

  height: 26px;

  fill: #fff;

  transition: left 0.2s ease;

}













#about-banner{background: url(../img/about-banner.png) center top no-repeat;

    min-height: 100vh;

    background-size: cover;

    margin-top: 0%;

    background-position: 100%;}





 .catpion{width: 30%;    position: absolute;

    z-index: 999;

    bottom: 20%;

    left: 10%;}

 .catpion h2{font-size: 4rem; font-weight: 500; position: relative; color: #fff;}



 .catpion h2:after{width: 53%; height: 4px; border-top:2px solid #fff;border-bottom:2px solid #fff;content: "";position: absolute;

    left: 0%;

    bottom: 3px;}













.about-cont{padding-top: 100px; padding-bottom: 100px;}

.about-cont .container-fluid{width:80%;}



.about-cont p{font-size: 16px; color: #737272; line-height: 26px;}

.about-cont h3{font-size: 2rem; color: #737272; }

.about-cont ul{    margin-top: 20px;list-style-type: circle;    color: #017ac9; }

.about-cont ul li p{ font-size: 16px;   color: #737272; }





.about-cont h1{text-align: left;}



.about-cont .top {

    margin-top: 2%;

}



.col-5s {

    width: 20%;

    padding-right: 15px;

    padding-left: 15px;

    float: left;

    position: relative;

	

}

.col-5s img{width: 100%;}

.col-5s p {

    font-size: 14px;

    color: #494b42;

    margin: 0 0 0rem;

    margin-top: 5px; text-align: center;

}



.col-5s h4 {font-size:18px; text-transform: uppercase; color: #494b42;

    margin: 0 0 0rem;

    margin-top: 5px; text-align: center;}







.tr .col-5s{margin-bottom: 5%;}









.expert:after {

    width: 4px;

    height: 100%;

    border-left: 1px solid #017ac9;

    border-right: 1px solid #017ac9;

    content: "";

    position: absolute;

    right: 6%;

    top: 5px; 

}



.expert{padding-right: 20px; position: relative;/*height: 100%;*/ padding-bottom: 5px;}



.expert .reach{ }

.expert .reach img{width: 70%; }

.expert .reach h3{font-size:1.2rem; color: #017ac9; font-weight: 500; position: relative; margin-bottom: 20px;}

.expert .reach h3:after{width:170px; height: 4px; border-top:1px solid #017ac9;border-bottom:1px solid #017ac9;content: "";position: absolute;

    left: 0%;

    bottom: -3px;}

.expert .reach h6 {

    color: #017ac9;

    text-align: left;

    font-size: 18px;

    text-transform: uppercase;

    margin-bottom: 0px;

    margin-top: 10px;

}







.expert .reach p {

    line-height: 20px;

    font-size: 15px;

    color: #494b42;

    text-align: left;

    letter-spacing: -0.0rem;

	margin-top: 0px;}

.expert .reach p a {

    line-height: 20px;

    font-size: 14px;

    color: #494b42;

    text-align: left;

    letter-spacing: -0.0rem;

    margin-top: 0px;

}

 .expert .reach p a:hover {

    color: #017ac9;

}









.expert .intrest{ }

.expert .intrest h3{font-size:1.2rem; color: #017ac9; font-weight: 500; position: relative; margin-bottom: 20px;}

.expert .intrest h3:after{width:170px; height: 4px; border-top:1px solid #017ac9;border-bottom:1px solid #017ac9;content: "";position: absolute;

    left: 0%;

    bottom: -3px;}

.expert .intrest h6 {

    color: #017ac9;

    text-align: left;

    font-size: 18px;

    text-transform: uppercase;

    margin-bottom: 0px;

    margin-top: 10px;

}







.expert .intrest button, input, select, textarea {

    background: transparent;

    padding: 10px!important;

    border: 1px solid #017ac9;

    font-size: 13px;

    width: 100%;

    color: #5e5e5e;

}

:focus-visible{outline: -webkit-focus-ring-color auto 0px;}

.expert .intrest .padd {

    padding-left: 0px;

	margin-bottom: 10px;

}

.expert .intrest input[type=button], input[type=reset], input[type=submit] {

    border: 0px solid #017ac9;

    width: 50%;

    background: #017ac9;

    color: #fff;

    padding: 10px!important;

    margin-bottom: 10px;

    margin-top: 10px;

}





.expert .intrest h4 {

    font-size: 14px;

    color: #494b42;

    text-align: left;

	margin-top: 0px;

}

.expert .intrest p {

    line-height: 20px;

    font-size: 15px;

    color: #494b42;

    text-align: left;

    letter-spacing: -0.0rem;

	margin-top: 0px;}

.expert .intrest p a {

    line-height: 20px;

    font-size: 14px;

    color: #494b42;

    text-align: left;

    letter-spacing: -0.0rem;

    margin-top: 0px;

}





 .expert .intrest p a:hover {

    color: #017ac9;

}











.expert .download{margin-top: 25px; width: 90%;}

.expert .download h3{font-size:1.2rem; color: #017ac9; font-weight: 500; position: relative; margin-bottom: 20px;}

.expert .download h3:after{width: 145px; height: 4px; border-top:1px solid #017ac9;border-bottom:1px solid #017ac9;content: "";position: absolute;

    left: 0%;

    bottom: -3px;}

.expert .download h6 {

    color: #017ac9;

    text-align: left;

    font-size: 18px;

    text-transform: uppercase;

    margin-bottom: 0px;

    margin-top: 10px;

}







.expert .download p a i{color: red; font-size: 15px;margin-left: 0em; margin-right: .5em;}

.expert .download p {

    line-height: 20px;

    font-size: 15px;

    color: #494b42;

    text-align: left;

    letter-spacing: -0.0rem;

	margin-top: 0px;}

.expert .download p a {

    line-height: 20px;

    font-size: 14px;

    color: #494b42;

    text-align: left;

    letter-spacing: -0.0rem;

    margin-top: 0px;

}

 .expert .download p a:hover {

    color: #017ac9;

}





















































.page1 {

  height: 100vh;

  background-color: white;

  position: relative;

}



.page2 {

  height: 100vh;

  background-color: white;

  position: relative;

}



.page3 {

  height: 100vh;

  background-color: #017ac9;

  position: relative;

}



.page4 {

  background-color: white;

  position: relative;

}



/*.page5 {

  height: 100vh;

  background-color: white;

  position: relative;

}*/











.w3-padding-16{font-size: 20px;color: #484849;font-weight: 600;line-height: 22px; margin-top: 10px;}





.spc {margin-bottom: 30px}



































/*social*/

@keyframes bg-move{0%,to{/* background-position:0 50% */}50%{/* background-position:100% 70% */}}@keyframes border-move{0%,100%{border-radius:51% 49% 34% 66%/39% 66% 34% 61%}10%{border-radius:39% 61% 38% 62%/53% 54% 46% 47%}20%{border-radius:56% 44% 52% 48%/57% 35% 65% 43%}30%{border-radius:41% 59% 45% 55%/33% 56% 44% 67%}40%{border-radius:46% 54% 60% 40%/55% 74% 26% 45%}50%{border-radius:44% 56% 22% 78%/31% 74% 26% 69%}60%{border-radius:31% 69% 32% 68%/31% 71% 29% 69%}70%{border-radius:44% 56% 60% 40%/63% 36% 64% 37%}80%{border-radius:46% 54% 38% 62%/44% 48% 52% 56%}90%{border-radius:66% 34% 57% 43%/49% 51%}}





/* developed by - Bigleap */



/*Rasponsive Code*/

/*1920*/

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

 .slideshow .arrows .next {

    left: 8%;

}

	 

	 .expert .reach h3:after{}

	 

}



/*1600*/

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

	.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery{width: 12%;}

	

	

	

}



/*1500*/

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

  

}



/*1440*/

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

 

}



/*1440*/

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



	.slider .illustration img{width:70%;}

	.product .section-image-1 picture img{width: 430px;}

	.product .section-image-1 picture::before {width: 240px; height: 210px;}

	.product .section-image-1 picture::after {width: 250px;height: 240px;}

	

}



/*1366*/

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



	.text h2{font-size: 2.5rem;}

	.text .soci {margin-top: 40%;}

	.container-slider .next {top: 98%;}

	.container-slider .prev {top: 98%;}

	.trail {bottom: 1%;}

	

		.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery{width: 15%;}

	.about-cont h3 {font-size: 1.5rem;}

}



/*1280*/

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

	.slider .illustration img {width: 70%;}

.text h2 {font-size: 2.5rem;}

.text .soci {margin-top: 45%;}

	.slider .box .details{width: 86%;}

	

	.product .section-image-1 picture img{width: 430px;margin-top: 10%;}

	.product .section-image-1 picture::before {width: 240px; height: 210px;right: -210px;top: -45px;}

	.product .section-image-1 picture::after {width: 250px;height: 240px;}

	.product .supl a{width: 17%;}

	

	

	

	

	

	.slideshow .arrows .next {

    left: 10%;

}

	.slideshow .slide .title{font-size: 2rem;}

	

	.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery{width: 18%;}

	.about-cont h3 {font-size: 1.5rem;}

	

}



/*1200*/

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



	.slider .illustration img {width: 70%;}

.text h2 {font-size: 2rem;}

	.text strong::after {left: 1%;bottom: 0px;width: 94%;}

.text .soci {margin-top: 65%;}

	.slider .box .details{width: 86%;}

	

	.product .section-image-1 picture img{width: 430px;margin-top: 10%;}

	.product .section-image-1 picture::before {width: 220px; height: 189px; right: -140px; top: -35px;}

	.product .section-image-1 picture::after {width: 230px;height: 220px;right: -140px;}

	.product .supl a{width: 17%;}

	.about p{width: 92%;}

	

	

	

	.slideshow .arrows .next {

    left: 10%;

}

	.slideshow .slide .title{font-size: 2rem;}

	

	

	.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery{width: 15%;}

	.about-cont h3 {font-size: 1.5rem;}

	

	

}



/*1024*/

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



		.slider .illustration img {width: 70%;}

.text h2 {font-size: 2rem;}

	.text strong::after {left: 1%;bottom: 0px;width: 94%;}

.text .soci {margin-top: 75%;}

	.slider .box .details{width: 86%;}

	.text::after{right: -15%;}

	.product .section-image-1 picture img{width: 330px;margin-top: 10%;}

	.product .section-image-1 picture::before {width: 190px; height: 170px; right: -140px; top: -35px;}

	.product .section-image-1 picture::after {width: 200px;height: 190px;right: -140px;}

	.product .supl a{width: 20%;margin-right: 10px;}

	.about p{width: 92%;}

	.product h4 {font-size: 2rem;}

	.product {padding-top: 50px; height: 77vh;}

	.chemical h4 {font-size: 2rem;}

	.about {padding-top: 80px;height: 80vh;}

	.about .scroll-downs {bottom: -30px;}

	.chemical {padding-top: 70px; padding-bottom: 70px;}

	.w3-content .full-vi{padding: 40px;}

	#newsfeeds .container .min .ico {width: 10%;}

	#newsfeeds .container .min h3 {font-size: .8rem;}

	#newsfeeds .container .min p {font-size: 10px;}

	#newsfeeds .container .min .date {font-size: 10px;}

	#newsfeeds .bolgsd .read{width: 60%;padding: 15px 0px;}

	.slider .box{padding-top: 110px;}

	.product strong::after {bottom: 0px;}

	

	

	.slideshow .slide .caption{left: 42%;width: 50%;}

	.slideshow .arrows .next {  left: 12%;}

	.slideshow .slide .title{font-size: 1.7rem;}

	

	.about-cont .container-fluid {  width: 95%;}

	

	

	

	

	.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery{width: 15%;}

	.about-cont h3 {font-size: 1.5rem;}

	

	

	

	

	

	

	

}





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



}



/*tab*/

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

.page1 {height: 100%;}

	.text{margin-top: 10%;}

	.text h2 {font-size: 2rem;}

	.text h2 br{display: none;}

	

	.text strong::after{bottom: 0px;}

	.text button{margin-top: 1%;}

	.text .soci{margin-top: 1%;}

	

	.slideshow .slide .caption{left: 5%; width: 90%; top: 40%;}

	

	.slideshow .arrows .next { left: 13%;}

	

	.expert .reach img {

    width: 50%;

}

	

	.about-cont ul.tab{margin-top: 0px;}

	.expert:after {

    width: 4px;

    height: 100%;

    border-left: 0px solid #017ac9;

    border-right: 0px solid #017ac9;

    content: "";

    position: absolute;

    right: 6%;

    top: 5px;

}

	

	

	.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery{width: 18%;}

	.about-cont h3 {font-size: 1.5rem;}

	

	

	

	.col-5s {width: 30%;}

	

	

	

	

	

}







/*mobile*/

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



	.slideshow .slide .caption{left: 5%; width: 90%; top: 40%;}

	.slideshow .slide .title{font-size: 2rem;}

	.slideshow .arrows .next { left: 20%;}

	

	.expert .reach img {

    width: 50%;

}

	

	.about-cont ul.tab{margin-top: 0px;}

	.expert:after {

    width: 4px;

    height: 100%;

    border-left: 0px solid #017ac9;

    border-right: 0px solid #017ac9;

    content: "";

    position: absolute;

    right: 6%;

    top: 5px;

}

	

	

	

	.about-cont {

    padding-top: 50px;

    padding-bottom: 50px;

}

	

	

	

	.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery{width: 18%;    display: contents;}

	.about-cont h3 {font-size: 1.5rem;}

	

	.ce-textpic p{margin-top: -18px;}

	

	.about-cont h1{font-size: 2em;}

	.col-5s {width: 100%;}

	

	

	

}



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

 

 }



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



 }



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



	.slideshow .slide .title {font-size: 1.5rem;}

	.slideshow .arrows .next { left: 21%;}

	

	

} 



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

.slideshow .slide .title {font-size: 1rem;}

	.slideshow .arrows .next { left: 25%;}

}