#product-banner{background: url(../images/career.jpg) center top no-repeat; height: 420px; margin-top:0%; position: relative; background-size: cover;}
#product-banner .chevron {position: absolute; width: 10px; height: 2px; opacity: 0; transform: scale3d(0.5, 0.5, 0.5); animation: move 3s ease-out infinite;}
#product-banner .chevron:first-child {animation: move 3s ease-out 1s infinite;}
.chevron:nth-child(2) {animation: move 3s ease-out 2s infinite;}
#product-banner .chevron:before,

#product-banner .chevron:after {content: ' '; position: absolute; top: 0; height: 100%; width: 51%; background: #fff;}
#product-banner .chevron:before {left: 0; transform: skew(0deg, 30deg);}
#product-banner .chevron:after {right: 0; width: 50%; transform: skew(0deg, -30deg);}



@keyframes move {

  25% {

    opacity: 1;



  }

  33% {

    opacity: 1;

    transform: translateY(30px);

  }

  67% {

    opacity: 1;

    transform: translateY(40px);

  }

  100% {

    opacity: 0;

    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);

  }

}







@keyframes pulse {

  to {

    opacity: 1;

  }

}





#product-banner .container-fluid{width: 80%;}
#product-banner h2 {color: white!important; margin-top: 180px; font-weight: 400; font-size: 2.5em; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #00a94f; display: inline-block;}
#product-banner h2 a {color: white!important;}

#content .container-fluid{width:75%;background: #ffffff87; padding: 50px; border: 1px solid #cccccc;}
#content{padding-top: 0px; padding-bottom: 100px; background: #f6f6f6;}
#content h4{text-align: center;color: #1f1d1d; margin-top: 20px; font-weight: 400; text-transform: capitalize;}
#content .top h4{text-align: left;color: #1f1d1d; margin-top: 20px; margin-bottom: 20px; font-size: 1.5em; font-weight: 500; text-transform: uppercase;}
#content .top{margin-top: 50px;}

.read-more-state {display: none;}
.read-more-target {opacity: 0; max-height: 0; font-size: 0; transition: .25s ease;}
.read-more-state:checked ~ .read-more-wrap .read-more-target {opacity: 1; font-size: inherit; max-height: 999em;}
.read-more-state ~ .read-more-trigger:before {content: 'Show more';}
.read-more-state:checked ~ .read-more-trigger:before {content: 'Show less';}
.read-more-trigger {cursor: pointer; display: inline-block; padding: 0 .5em; color: #666; font-size: .9em; line-height: 2; border: 5px solid #00a94f; border-radius: .25em; margin-bottom: -2px;}

.snip1305 {position: relative; overflow: hidden; width: 100%; color: #000000; text-align: center;}
.snip1305 * {-webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.6s ease; transition: all 0.6s ease;}
.snip1305 img {opacity: 1; width: 100%;}
.snip1305:after,
.snip1305:before {background: #000; width: 0; height: 0; position: absolute; content: ''; opacity: 0.5; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; z-index: 1;}
.snip1305:after {top: 0; left: 0;}
.snip1305:before {right: 0; bottom: 0;}
.snip1305 figcaption {position: absolute; top: 40%; left: 0; width: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 2;}
.snip1305 h2,
.snip1305 p {margin: 0; width: 100%; opacity: 0;}
.snip1305 p {padding:5px; font-size: 13px!important; text-align: center!important; margin-top: 0px!important; background: #00a94f; width: 50%; margin: auto; color: white!important;}
.snip1305 a{color: white;text-decoration: none!important;}
.snip1305 a {left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 2;}

.snip1305:hover img,
.snip1305.hover img {-webkit-filter: grayscale(100%); filter: grayscale(100%);}

.snip1305:hover:after,
.snip1305.hover:after,
.snip1305:hover:before,
.snip1305.hover:before {width: 100%; height: 100%;}

.snip1305:hover figcaption h2,
.snip1305.hover figcaption h2,
.snip1305:hover figcaption p,
.snip1305.hover figcaption p {-webkit-transition-delay: 0.2s; transition-delay: 0.2s;}

.snip1305:hover figcaption h2,
.snip1305.hover figcaption h2 {opacity: 1;}

.snip1305:hover figcaption p,
.snip1305.hover figcaption p {opacity:1;}



#top .container-fluid{width: 75%;}
#top .pro-w{width: 40%; float: left; margin-top: 20px;}
#top .pro-w a{margin-right: 8px}
#top .pro-w a.r-d-j{margin-left: 8px}
#top .pro-arr{width: 40%; float: right; margin-top:8px;}
#top .pro-arr .left-ar{background: url(../images/arw-lft.png)center top no-repeat; width: 15px; height: 30px; float: right; background-size: cover; margin-right: 20px;}
#top .pro-arr .riht-ar{background: url(../images/arw-rgt.png)center top no-repeat; width: 15px; height: 30px; float: right; background-size: cover;}
#top .pro-arr .left-ar:hover{background: url(../images/arw-rgt-1.png)center top no-repeat; width: 15px;height: 30px;background-size: cover;}
#top .pro-arr .riht-ar:hover{background: url(../images/arw-lft-1.png)center top no-repeat; width: 15px;height: 30px;background-size: cover;}
#top{ background: #fff; color:#00a94f;; padding-top: 40px; padding-bottom: 20px}
#top img{float: right; margin: 0px 10px}

.fis{width: 100%;border-radius: 20px; height: 400px!important;}
.scr-ll{ height: 400px!important; overflow-y:scroll;}

#content h6{margin-top: 15px; font-weight: 500; font-size: 1.1em; text-align: left; color: #1f1d1d; line-height: 1.4; margin-bottom: 15px;}
#content button.bo-sx-g{border: 1px solid #e2e2e2; padding: 12px 20px; color: #252525; margin: 0px 10px 10px 0px; background: transparent; border-radius: 10px }
#content button.bo-sx-g:hover{border: 1px solid #00a94f; color: #ffffff; background: #00a94f;}
#content  h2{text-align: left;color: #1f1d1d; margin-top: 20px; font-weight: 500; text-transform: capitalize; font-size: 2em; margin-bottom: 26px;}
#content h2 strong{text-transform: capitalize; font-weight: 600; font-size: 1em;  padding: 0px; border-radius: 10px 1px 10px 10px;}
#content p{font-weight: 400!important; line-height: 28px; font-size: 14px; margin-top: 10px; text-align: justify;}

#top a{color:#1f1d1d ; text-decoration: none; font-weight: 400; font-size: 1em;}
#top a:hover{color: #00a94f;}
#top .active{color: #00a94f; background-color:transparent;}

.job h5{min-height: 30px; margin-top: 100px; font-size: 46px; color: #525252; margin-bottom: 50px}
.tab {border: 0px solid #ccc; background-color: transparent; box-shadow: 0 0rem 0rem #00000080; padding: 0px; float: left; width: 75%;}
.tab button {display: inherit; background: inherit; border: 0px solid #00a94f; border-radius: 0px; color: #525252; padding: 10px 15px 20px 30px; width: 100%; position: relative; outline: none; text-align: left; cursor: pointer; transition: 0.3s; font-size: 20px; border-radius: 0px; border-bottom: 1px solid #00a94f; margin-bottom: 10px; font-weight: 500; font-family: 'Open Sans', sans-serif!important;}
.tab button:hover {}

.tab button.active {background-color: #fff; margin-bottom: 0px; border-bottom: 0px solid rgba(224,232,240,.3); border-radius: 5px 5px 0px 0px;}
.tab .tablinks:before{content: ""; width: 8px; height: 1px; position: absolute; top: 24px; left: 0px; background: #525252; -webkit-transform: rotate(-45deg) translate(-5px, 1px); transform: rotate(-45deg) translate(1px, -6px);}
.tab .tablinks:after{content: ""; width: 1px; height: 8px; position: absolute; top: 19px; left: 6px; background: #525252; -webkit-transform: rotate(-45deg) translate(-6px, -2px); transform: rotate(-45deg) translate(-6px, -2px);}
.tab .tablinks.active:before{width: 8px; height: 2px; -webkit-transform: rotate(0deg) translate(2px, 0px); transform: rotate(0deg) translate(2px, 0px);}
.tab .tablinks.active:after{width: 0px; height: 0px;}
.tab .tablinks.remove:before{width: 0px; height:0px;}
.tab .tablinks.remove:after{width: 0px; height: 0px;}
.tab .tablinks.remove{ border-bottom: 0px solid rgba(224,232,240,.3);}
.tab .tablinks.add{background-color: #00a94f;}
.tab .tablinks.add:hover{background-color:  rgba(27, 31, 43, 0.8);}*/

.tabcontent {width: 100%; padding: 0px 0px; border: 0px solid rgba(224,232,240,.3); overflow-y: scroll; border-left: none;border-radius: 5px; height: 200px; margin-bottom: 10px; background: #fff; border-top: 0px solid rgba(224,232,240,.3); border-radius: 0px 0px 0px 0px ;}
.tabcontent ul{list-style-type: none; padding: 0px; margin-bottom: 0px;}
.tabcontent ul li {display: block; padding: 15px 15px 15px 50px; font-size: 16px; color: rgb(82, 82, 82); line-height: 18px; position: relative; cursor: pointer; font-family: 'Open Sans', sans-serif!important;}
.tabcontent ul li:hover{ background-color: #00a94f; color: #fff;}
.tabcontent ul li.active{ background-color: #41434a!important; color: #fff!important; }
.tabcontent::-webkit-scrollbar {width: .2em;}
.tabcontent::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);}
.tabcontent::-webkit-scrollbar-thumb {background-color: #fff; outline: 1px solid slategrey; border-radius: 50px;}

.quick{float: left;width: 70%; margin-left: 40px;position: relative;}
.quick .enq{float: left; width:77%;}
.quick h3{margin-top: 0px; border-left: 5px solid #00a94f; padding: 10px; padding-left: 20px; color: #191919; font-weight: 500; margin-bottom: 15px; float: left;width:77%;}
.quick input {width: 100%; border: solid #cbd7de 1px; border-radius: 4px; padding: 10px; margin-bottom: 5px; margin-top: 5px;}
.quick textarea {width: 100%; border: solid #cbd7de 1px; border-radius: 4px; padding: 10px; margin-bottom: 20px; margin-top: 5px; height: 100px;}
.quick .btn-default {position: absolute; color: #fff; background-color: #00a94f; border-color: #00a94f; top: 300px; right: 3%;}
.quick .btn {display: inline-block; padding: 10px 25px; margin-bottom: 0; font-size: 17px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; font-family: 'Open Sans', sans-serif!important;}


.quick .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
color: #fff; background-color: #05793b; border-color: #05793b;}


#myImg {filter: gray; -webkit-filter: grayscale(1); -webkit-transition: all .8s ease-in-out;  }
#myImg:hover {filter: none; -webkit-filter: grayscale(0); -webkit-transform: scale(1.01);cursor: crosshair;}

.modal {display: none; position: fixed;  z-index: 1; padding-top: 60px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto;  background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9);}
.modal-content {margin: auto; display: block; width: 100%; max-width: 900px;}
#caption {margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px;}
.modal-content, #caption {-webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; height: 540px; background: transparent;}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.modal .close {position: absolute; top: 90px; right: 275px; color: #00a94f!important; font-weight: bold; transition: 0.3s; font-size: 50px!important; opacity: 1; z-index: 9;}

.modal .close:hover,
.modal .close:focus {color: #bbb; text-decoration: none; cursor: pointer;}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {width: 100%;}
}




.mySlides {display: none}
img {vertical-align: middle;}

.slideshow-container {max-width: 1000px; position: relative; margin: auto;}
.prev, .next {cursor: pointer; position: absolute; top: 96%!important; width: auto; padding: 8px; margin-top: -22px; color: #ccc!important; font-weight: 400; font-size: 22px!important; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;}
.next {right: 0; border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {color: #00a94f!important;}
.text {color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center;}
.numbertext {color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}
.dot {cursor: pointer; height: 10px; width: 10px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}
.dood .active, .dot:hover {background-color: #00a94f;}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;opacity: 1;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}


/*imlZFX*/
.mySlides .modal {z-index:1; display:none; padding-top:10px; position:fixed; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.8)}
.mySlides .modal-content{margin: auto; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.mySlides .modal-hover-opacity {opacity:1; filter:alpha(opacity=100); -webkit-backface-visibility:hidden}
.mySlides .modal-hover-opacity:hover {opacity:0.80; filter:alpha(opacity=60); -webkit-backface-visibility:hidden}
.mySlides .close {text-decoration:none; float:right; font-size:24px; font-weight:bold; color:white}
.mySlides .modal-content, #caption {-webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s;}


@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}










.button {font-size: 1em; padding: 10px; color: #fff; border: 2px solid #06D85F; border-radius: 20px/50px; text-decoration: none; cursor: pointer; transition: all 0.3s ease-out;}
.button:hover {background: #06D85F;}

.overlay {-webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;}
.overlay {position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; z-index: 999; width: 100%; height: 100%;}
.overlay:target {visibility: visible; opacity: 1; -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;}

.popup {margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out; -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s;}
.popup h2 {margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif;}
.popup .close {position: absolute; top: 20px!important; right: 30px; transition: all 200ms; font-size: 30px!important; font-weight: bold; text-decoration: none; color: #333!important;  margin-top: 0px!important; opacity: .5;}
.popup .close:hover {color: #06D85F;}
.popup .content {max-height: 30%; overflow: auto;}

@media screen and (max-width: 700px){
  .box{width: 70%;}
  .popup{width: 70%;}
}









.modal-container {margin: 60px auto; padding-top: 0px; position: relative; width: 160px;}
.modal-container .modal-btn {
  display: block;
  margin: 0 auto;
  color: #fff;
  width: 160px;
  height: 50px;
  line-height: 50px;
  background: #446CB3;
  font-size: 22px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 5px 5px -5px #333;
  transition: background 0.3s ease-in;
}
.modal-container .modal-btn:hover {background: #365690;}
.modal-container .modal-content,
.modal-container .modal-backdrop {
  height: 0;
  width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.2s ease-in;
}
.modal-container .modal-close {
  color: #aaa;
  position: absolute;
  right: 5px;
  top: 5px;
  padding-top: 3px;
  background: #fff;
  font-size: 16px;
  width: 25px;
  height: 25px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
.modal-container .modal-close:hover {color: #333;}
.modal-container .modal-content-btn {
  position: absolute;
  text-align: center;
  cursor: pointer;
  bottom: 20px;
  right: 30px;
  background: #446CB3;
  color: #fff;
  width: 50px;
  border-radius: 2px;
  font-size: 14px;
  height: 32px;
  padding-top: 9px;
  font-weight: normal;
}
.modal-container .modal-content-btn:hover {color: #fff; background: #365690;}
.modal-container #modal-toggle {display: none;}
.modal-container #modal-toggle.active ~ .modal-backdrop, .modal-container #modal-toggle:checked ~ .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease-in;
}
.modal-container #modal-toggle.active ~ .modal-content, .modal-container #modal-toggle:checked ~ .modal-content {
  opacity: 1;
  background-color: #fff;
  max-width: 400px;
  width: 400px;
  height: 280px;
  padding: 10px 30px;
  position: fixed;
  left: calc(50% - 200px);
  top: 12%;
  border-radius: 4px;
  z-index: 999;
  pointer-events: auto;
  cursor: auto;
  visibility: visible;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);
}
@media (max-width: 400px) {
  .modal-container #modal-toggle.active ~ .modal-content, .modal-container #modal-toggle:checked ~ .modal-content {left: 0;}
}




#reqiurment {padding-bottom: 100px; padding-top: 0px}
#reqiurment .box{padding: 60px;}
#reqiurment .box h3{text-transform: uppercase; font-size: 3em; text-align: center;}

.hero-cluster {max-width: 1440px; padding-right: 200px; padding-left: 200px; position: relative; margin: 0 auto 24px; height: 543px;}
.hero-cluster__background {position: absolute; top: 50%; right: 16%; bottom: -32px; left: 0; background-color: #ddd; left: 0%;}
.hero-cluster__imageWrap {position: absolute; top: 0; right: 9%; width: 60%; background: #00a94f; padding: 40px;}
.hero-cluster__image {max-height: 543px; display: block; width: 100%; float: right;}
.hero-cluster__image p{ color: #fff!important;text-align: justify; font-size: 14px;}
.hero-cluster__panel {position: absolute; top: 30%; width: 528px; padding: 56px 64px 56px 88px; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);left: 7%;}
.hero-cluster__panel__snipe {font-size: 18px; line-height: 1.44444; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-weight: 500; display: none;}
.hero-cluster__panel__title {min-height: 30px; margin-top: 24px; font-size: 46px;}
.btn__std {font-size: 16px; line-height: 1.375; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; cursor: pointer; display: inline-block; margin-top: 24px; padding: 12px 32px; color: #fff; background-color: #007e82; border-radius: 4px; font-weight: 600;}
.btn__std {margin-top: 24px;}

.hero-cluster__background1 {position: absolute; top: 50%; right: 12.5%; bottom: -32px; left: 0; background-color: #ddd; left: 6%;}
.hero-cluster2 {height: 250px;}
.hero-cluster__imageWrap1 {position: absolute; top: 0; right: 9%; width: 60%; background: #00a94f; padding: 40px; left: 0%;}
.hero-cluster__image1 {max-height: 543px;display: block; width: 100%; float: right;}
.hero-cluster__image1 p{color: #fff!important;text-align: justify; font-size: 14px;}
.hero-cluster__panel1 {position: absolute; top: 30%; width: 528px; padding: 56px 64px 56px 88px; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);left: 58%;}
.hero-cluster__panel__snipe1 {font-size: 18px; line-height: 1.44444; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-weight: 500; display: none;}
.hero-cluster__panel__title1 {min-height: 30px; margin-top: 24px; font-size: 46px;}

#reqiurment .liv{width: 80%; margin: auto; padding-top: 30px;padding-bottom: 60px;}
#reqiurment .liv h4{min-height: 30px; margin-top: 24px; font-size: 46px; text-align: center;}
#reqiurment .liv p{font-size: 15px; text-align: center; width: 70%; margin: auto;margin-top: 40px; }
#reqiurment .liv ul{display: block; list-style-type: none; width: 70%; margin:auto;}
#reqiurment .liv ul li{width: 20%;display: inline-block; margin: 20px 10px}
#reqiurment .liv ul li h2{font-size: 14px; text-align: center;}
#reqiurment .liv ul li i{font-size: 40px ; color: #00a94f;}

.panels {background: #00a94f; box-shadow: 0 0.5rem 0.5rem #00000029; transform: skew(-25deg); width: 100%; max-width: 200px; border-radius: 0px; overflow: hidden; padding: 5px; text-align: center; margin-top: 200px; margin-left: 120px;}
.panels h4{color: #fff!important; text-align: center; transform: skew(25deg);}

.hero-cluster3 {max-width: 100%; padding-right:200px; padding-left: 200px; position: relative; margin: 0 auto 24px; height: 565px;}
.hero-cluster__background3 {position: absolute; top: 50%; right: 26%; bottom: -15px; background-color: #ddd; left: -4%;}
.hero-cluster__imageWrap3 {position: absolute; top: 200px; right: 9%; width: 70%; background: #00a94f; padding: 40px; left: 0%;}
.hero-cluster__image3 {max-height: 543px; display: block; width: 100%; float: right;}
.hero-cluster__image3 p{color: #fff!important; text-align: justify; font-size: 14px;}
.hero-cluster__panel3 {position: absolute; width: 528px; left: 0; top: 100px}
.hero-cluster__panel__snipe3 {font-size: 18px; line-height: 1.44444; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-weight: 500; display: none;}
.hero-cluster__panel__title3 {min-height: 30px; margin-top: 24px; font-size: 46px;}
.to-ban {position: absolute; margin-top: -15px; margin-left: -22px; font-size: 18px; color: #fff;}



.job{ width: 80%; margin: auto; padding-bottom: 30px;}



.tab .panels {background: #00a94f; box-shadow: 0 0.5rem 0.5rem #00000029; transform: skew(-25deg); width: 100%; max-width: 200px; border-radius: 0px; overflow: hidden; padding: 5px; text-align: center; margin-top: 0px; margin-left: 5px; }

.content label{margin-top: 10px; display: block;}
.content h3{text-align: left; padding-bottom: 10px; margin: 0;}
.content{width: 60%; margin: 0 auto; margin-top: 40px; display: block; padding-top: 50px; border-radius: 10px; box-shadow: 0 5px 10px 0 #f9faff, 0 15px 40px 0 #f1f2fa; padding: 20px 30px;}

.input-group .form-control{margin-top: 10px;}
.btn.btn-primary {border-radius: 4px; height: 48px; right: 15px; position: absolute; color: #fff; padding: 10px; background: #00a94f; background-image: none!important; outline: none; border: none!important; margin-top: 10px; font-family: 'Open Sans', sans-serif;}
.input-group .form-control, .input-group-addon, .input-group-btn{background: none!important;}
.btn.btn-primary:hover {background-color: #525252; border-color: #442f62;}
.btn.btn-primary:active, .btn.btn-primary:focus {background-color: #684895; border-color: #684895;}


#subject{margin-top: 5px;}

input[type=file]{width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 10px; font-family: 'Open Sans', sans-serif; resize: vertical; font-size: 13px;}
input[type=text], select, textarea {width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 10px; font-family: 'Open Sans', sans-serif; resize: vertical; font-size: 13px; outline: none;}
input[type=email] {width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 10px; font-family: 'Open Sans', sans-serif; resize: vertical; font-size: 13px; outline: none;}
input[type=submit] {background-color: #00a94f; color: white; padding: 10px; border: none; border-radius: 4px; cursor: pointer; font-family: 'Open Sans', sans-serif; width: 25%; text-align: center; display: block; margin: 0 auto;  outline: none;}
input[type=submit]:hover {background-color: #525252;}









@media only screen and (min-width : 1920px) and (max-width : 2560px){
.modal-content, #caption{height: 800px;}
.modal-content{max-width: 1400px;}
.modal{padding-top: 80px;}
.mySlides .close{top: 90px; right: 276px;}



}

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


}

@media only screen and (min-width : 1440px) and (max-width : 1599px){
#product-banner h2{font-size: 2em; margin-bottom: 10px;}
#content .txt p {text-align: left; line-height: 27px; font-size: 15px;}



}

@media only screen and (min-width : 1366px) and (max-width : 1439px){
#product-banner h2{font-size: 2em; margin-bottom: 10px;}

#content .txt p {text-align: left; line-height: 25px; font-size: 14px;}
#content h4{font-size: 16px;}
#content{padding-top: 0px;padding-bottom: 60px;}

#reqiurment {padding-bottom: 70px;}
#reqiurment .liv ul{width: 100%; padding: 0; padding-top: 20px;}
#reqiurment .box h3{font-size: 2.5em;}

.snip1305 p{font-size: 13px;}

.read-more-trigger{border: 3px solid #00a94f;}

.fis{height: 300px!important;}
.scr-ll{height: 350px!important;}

.tabcontent ul li{font-size: 14px; padding: 12px 15px 12px 50px;}
.tab{width: 50%;margin-top: 0%; }
.tab button{font-size: 15px;padding: 12px 15px 12px 50px;}
.tab .tablinks:before{top: 23px; left: 25px;}
.tab .tablinks:after{ top: 18px; left: 30px;}

.quick .btn{font-size: 15px; }
.quick input{ font-size: 13px;}
.quick h3{font-size: 22px;width: 70%;}
.quick .enq{width: 70%;}
.quick{width: 65%;}

.popup{width: 70%; height: 60vh;}
.popup .popup-content1{width: 30%; float: left;}
.popup .popup-content2{width: 70%; float: left;}

.hero-cluster__background{right: 18%; left: 6%;}
.hero-cluster__background1 { right: 7.5%; left: 12%;}
.hero-cluster__imageWrap1{width: 54%; left: 6%;}




} 



@media only screen and (min-width : 1200px) and (max-width : 1365px){
#product-banner h2{font-size: 1.8em; margin-bottom: 10px;}

#content .txt p {font-size: 14px; text-align: left; line-height: 24px;}
#content{padding-top: 50px;padding-bottom: 80px;}
#content h4{font-size: 15px; margin-top: 15px;}

#reqiurment {padding-bottom: 60px;}

.snip1305 p{font-size: 13px;}
.read-more-trigger{border: 3px solid #00a94f;}



}

@media only screen and (min-width : 1024px) and (max-width : 1199px){
#product-banner h2{font-size: 1.8em; margin-bottom: 10px;}
input[type=submit]{width: 35%;}

#content .txt p {font-weight: 300; text-align: left; line-height: 25px; font-size: 14px; text-align: left;}
#content h2{font-size: 26px;}
#content .txt h4 {font-size: 22px;}
#content h4{font-size: 14px; margin-top: 15px;}
#content .container-fluid{width: 85%;}
#content{padding-top: 30px; padding-bottom: 70px;}

#top .container-fluid {width: 85%;}

#reqiurment {padding-bottom: 60px;}
#reqiurment{overflow: hidden;}
#reqiurment .liv ul{width: 100%; padding: 0;}
#reqiurment .liv h4{font-size: 35px;}
#reqiurment .liv ul li h2 {font-size: 13px;}

.hero-cluster__panel{left: 2%; }
.hero-cluster__panel__title{font-size: 35px;}
.hero-cluster__panel__title1{font-size: 35px;}
.hero-cluster__imageWrap{right: 4%;}
.hero-cluster__image p{font-size: 13.5px;}
.panels{margin-left: 100px;}
.hero-cluster__imageWrap3{width: 95%;}
.hero-cluster__background3{display: none;}
.hero-cluster__panel__title3{font-size: 35px;}
.hero-cluster__image1 p {font-size: 13.5px!important;}
.hero-cluster__image3 p {font-size: 13.5px!important;}

.job h5{font-size: 35px;}
.read-more-trigger{border: 3px solid #00a94f;}
.snip1305 p{font-size: 12px;}

}

@media only screen and (min-width : 768px) and (max-width :1023px){
#product-banner h2{font-size: 1.8em; margin-bottom: 10px;}

#content p { line-height: 27px;}
#content{padding-top: 40px;padding-bottom: 50px;}
#content h4{margin-bottom: 20px;}
#content .top {margin-top: 0px;}
#content h6 {margin-top: 10px;}
#content h6{line-height: 25px;} 

#reqiurment {padding-bottom: 50px;}
#reqiurment{overflow: hidden;}
#reqiurment .liv p{width: 75%; margin-top: 30px;}
#reqiurment .liv ul{width: 100%; padding: 0;}
#reqiurment .liv ul li{margin: 20px 5px; width: 30%;}
#reqiurment .liv ul li h2{font-size: 14px;}
#reqiurment .liv h4{font-size: 36px;}
#reqiurment .liv ul li h2 {font-size: 14px; line-height: 20px;}

.hero-cluster__panel__title{font-size: 35px;}
.hero-cluster__panel{left: -5%;}
.hero-cluster__imageWrap{padding: 25px;}
.hero-cluster__panel__title1{font-size: 36px;}
.hero-cluster__panel1{left: 50%;}
.hero-cluster__image p{font-size: 14px; margin: 0 0 5px; line-height: 22px !important;}
.hero-cluster__background3{display: none;}
.hero-cluster__image3 p{font-size: 15px;}
.hero-cluster__imageWrap3{width: 100%;}
.hero-cluster__imageWrap3{ top: 35%;}
.hero-cluster__panel__title3{font-size: 35px;}
.hero-cluster__panel3{top: 20px;}
.hero-cluster3{height: 370px;}

.job h5{font-size: 35px;}
#top .container-fluid {width: 80%;}
#top img {width: 3%;}
.tab{float: inherit;}
.panels{padding: 0px; max-width: 150px; margin-left: 50px;}


}

@media only screen and (min-width : 150px) and (max-width : 767px){
#product-banner .container-fluid {width: 80%;}
#product-banner h2 {margin-top: 160px; margin-bottom: 10px; font-size: 1.8em;}
#product-banner {background: url(../images/mb-banner/career.jpg) center top no-repeat; height: 350px;}
#product-banner h2 {border: none;}

#content .txt h6 {text-align: center; font-weight: 400; font-size: 15px; text-align: left; color: #bbb7b7;}
#content p{line-height: 25px;}
#content h2{font-size: 25px;}
#content h6{line-height: 23px; margin-top: 10px;}
#content .txt h4{font-size: 22px;}
#content .txt p {text-align: justify; line-height: 24px; font-size: 13px;}
#content{padding-top: 20px;padding-bottom: 50px;}
#content .top {margin-top: 0px;}
#content h4{margin-bottom: 15px; margin-top: 15px; font-size: 17px;}
.content{width: 75%;}

#top a {font-size: 14px;}
#top img {width: 6%;}

#reqiurment{overflow: hidden;}
#reqiurment .liv h4{font-size: 32px;}
#reqiurment .liv p{font-size: 14px;     width: 100%;}
#reqiurment .liv ul{width: 100%; padding: 0;}
#reqiurment .liv ul li{width: 42%; margin: 20px 5px;}
#reqiurment .liv ul li h2{font-size: 14px;}
#reqiurment {padding-bottom: 50px;}

.tab{ width: 95%;   float: inherit;}
.job h5{font-size: 36px; margin-top: 120px; margin-bottom: 40px;}
#header {padding-bottom: 0px;}
input[type=submit]{width: 70%;}


.hero-cluster__imageWrap{right: 12%; top: 85px; padding: 25px; width: 80%;}
.hero-cluster__background{display: none;}
.hero-cluster__image p{font-size: 14px; line-height: 20px !important; margin: 0 0 5px;}
.hero-cluster__panel{top: 7%;}
.hero-cluster__panel__title{font-size: 35px;}
.hero-cluster__imageWrap3{width: 89%; left: -7%; top: 135px;}
.hero-cluster__image3 p{font-size: 14px;}
.hero-cluster__panel3{top: 25px;}
.hero-cluster__background3{display: none;}
.hero-cluster3{height: 450px;}
.hero-cluster__imageWrap1{ width: 80%;left: 7%; padding: 35px; top: 75px;}
.hero-cluster__image{height: 400px; top: 60px;overflow-y: scroll;}
.hero-cluster__image1 p{font-size: 15px;}
.hero-cluster__imageWrap1{width: 85%;}
.hero-cluster__panel__title1{ font-size: 36px; margin-bottom: 0px;}
.hero-cluster__panel1{left: 0; margin-top: 0px; padding: 35px 64px 56px 88px;top: 0%;}
.hero-cluster__background1{display: none;}
.hero-cluster2 { height: 390px; }
.hero-cluster__panel__title3{font-size: 36px;}


}

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

input[type=submit]{width: 80% ;}
#top .pro-w{    width: 45%;}
#product-banner p:after { top: 115px;}

}  

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

#product-banner p:after{top: 115px; left: 95%;}
#top .pro-w {  width: 60%;}
.hero-cluster__imageWrap1{left: 5%; width: 70%;}
.hero-cluster__imageWrap{width: 65%; right: 27%;} 
.hero-cluster__imageWrap3 {width: 67%;} 
.hero-cluster3 {height: 585px;}
.hero-cluster__panel1{padding: 35px 60px 55px 60px;}
.content { width: 80%;}
.content h3{font-size: 22px;}
.job h5{    margin-top: 210px;}

  }