@charset "utf-8";
/* CSS Document */

body {
	font-weight:400;
	font-family: 'Open Sans';
}
a {
}
a:hover {
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	text-decoration:none !important;
}
p {
	color:#656464;
}
.ht10 {
	height:10px;
}
.ht20 {
	height:20px;
}
.ht30 {
	height:30px;
}
.ht40 {
	height:40px;
}
.ht50 {
	height:50px;
}
.ht80 {
	height:80px;
}
.ht90 {
	height:90px;
}
.ht100 {
	height:100px;
}
.ht120 {
	height:120px;
}
.ht150 {
	height:150px;
}
.ht180 {
	height:180px;
}
.ht200 {
	height:200px;
}
.ht220 {
	height:220px;
}
.ht250 {
	height:250px;
}
.ht300 {
	height:300px;
}
.fr {
	float:right;
}
.fl {
	float:left;
}
.tc {
	text-align:center;
}
.hm-sec {
	padding-bottom:22px;
}
.hm-sec strong {
	font:bold 50px "Roboto";
	color:#5ba921;
}
.hm-sec span {
	font:400 42px "Roboto";
	color:#5ba921;
	padding-left:5px;
}
.fa-truck, .fa-flask, .fa-globe {
	color: #5ba921!important;
}
/* Float Shadow */
.hvr-float-shadow {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}
.hvr-float-shadow:before {
	pointer-events: none;
	position: absolute;
	z-index: -1;
	content: '';
	top: 100%;
	left: 5%;
	height: 10px;
	width: 90%;
	opacity: 0;
	background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0) 80%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0) 80%);
	/* W3C */
  -webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform, opacity;
	transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);/* move the element up by 5px */
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
	opacity: 1;
	-webkit-transform: translateY(5px);
	transform: translateY(5px);/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}
.para {
	font:300 16px "Roboto";
	text-align: justify;
	line-height: 24px;
	color:#b7b7b7;
}
.rotatei {
	-webkit-transform: rotateY(180deg) !important;
	transform: rotateY(180deg);
}
.wctagline {
	text-align:center;
}
.wchd {
	color:#3e3e3e;
	font:400 20px 'Open Sans';
	line-height:32px;
}
.wctagline h4 {
	color:#5ba921;
	font:400 20px "Roboto";
}
#sec-prod {
	background:url(../images/images-sec-bg.png) no-repeat top center;
	background-size:cover;
	color:#FFF;
	padding:100px 0px;
}
.blankyellow {
	padding:20px 10px;
	background:transparent;
}
.midyellow {
	padding:20px 10px;
	background:#f4d434;
	margin:-15px;
	padding:50px 20px;
}
.lightyellow {
	padding:20px 10px;
	background:#FFBD13;
	margin:-15px;
	padding:50px 20px;
}
.darkyellow {
	padding:20px 10px;
	background:#ddbc1a;
	margin:-15px;
	padding:50px 20px;
}
.blankyellow h3 {
	font: bold 50px "Roboto";
	padding:35px 10px;
	text-transform:uppercase;
	color: #FFF;
}
.midyellow h3, .lightyellow h3, .darkyellow h3 {
	font:100 30px "Roboto" !important;
	margin:0px;
}
.midyellow h4, .lightyellow h4, .darkyellow h4 {
	font:300 22px "Roboto";
	margin:0px;
}
.midyellow h6, .lightyellow h6, .darkyellow h6 {
	font:300 18px "Roboto";
	margin:0px;
	padding-bottom: 15px;
}
.midyellow a, .lightyellow a, .darkyellow a {
	font:300 15px "Roboto";
	padding:5px 12px;
	color: #fff;
	background:rgba(0,0,0,0.80);
	border:2px dotted transparent;
}
.midyellow a:hover, .lightyellow a:hover, .darkyellow a:hover {
	color:#4E4100;
	background:transparent;
	border:2px dotted #fff;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#sec-say h2 {
	font: bold 40px "Roboto";
	color:#000;
	text-align: center;
}
#sec-say p {
	font:400 17px "Roboto";
	color:#898989;
	text-align: center;
}
.sliderimg .item {
	height:850px;
}
.top-footer {
	background:#303030;
	padding:30px 0px;
	color:#afafaf;
}
.top-footer h3 {
	color:#FFF;
}
.top-footer p a {
	color:#afafaf;
	font:400 14px "Open Sans";
}
.sitemap {
	margin-left:-35px;
}
.sitemap li {
	list-style:none;
	line-height:35px;
	border-bottom:1px solid #4d4d4d;
}
.sitemap li i {
	font-size:10px;
}
.sitemap li a {
	color:#c2c2c2;
	line-height:24px;
	font:400 12px "Open Sans";
}
.sitemap li a {
	color:#c2c2c2;
	line-height:24px;
	font:400 12px "Open Sans";
}
.socialicon a {
	padding-left:10px;
	color:#FFF;
}
.socialicon a:hover {
	color:#F7F7F7;
}
.wdd {
	float:right;
	color:#fff;
}
.wdd a {
	color:#fff;
}
.wdd a:hover {
	color: #3EDCFD;
}
.bottom-footer {
	background:#595959;
	padding:10px 0px 0px 0px;
}
.bottom-footer p {
	color:#fff;
	font:400 12px "Open Sans";
}
.offsset-1 {
	margin-left:8.33333333%;
}
#innerhead {
	background: #F9F9F9;
	padding:0px 0px;
}
#innerhead h2 {
	font: 600 30px "Roboto";
	color: #303030;
	text-transform: uppercase;
	margin: 0px;
	padding: 10px 0px;
}
.jpclogoftr {
	margin-top:35px;
}
.aboutsectinner {
	border-top:2px dotted #EFEFEF;
}
.aboutsectinner h3 {
	margin:-20px 0px 20px 0px;
	padding:0px;
	font:400 20px "Roboto";
}
.graylight {
	background:rgba(0,0,0,0.01);
	border:1px solid #F1F1F1;
	padding:5px 15px;
	text-align:center;
	margin-bottom:25px;
}
.graylight h2 {
	padding:5px;
	font:bold 65px "Roboto";
}
.graylight h3 {
	padding:5px;
	font:400 16px "Roboto";
	height: 85px;
}
.aboutsectinner p {
	font:300 14px "Roboto";
	text-align:justify;
	line-height:24px;
}
.graylight:hover {
	box-shadow: inset 0px 0px 15px -15px #DADADA, 5px 2px 35px 1px #E8E8E8;
	-webkit-box-shadow: inset 0px 0px 15px -15px #DADADA, 5px 2px 35px 1px #E8E8E8;
	-moz-box-shadow: inset 0px 0px 15px -15px #DADADA, 5px 2px 35px 1px #E8E8E8;
	-o-box-shadow: inset 0px 0px 15px -15px #DADADA, 5px 2px 35px 1px #E8E8E8;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	cursor:pointer;
}
.whyus h3 {
	padding:20px 0px 5px 0px;
	font:400 25px "Roboto";
	border-bottom:1px solid #FC9D1D;
	display:inline-block;
}
.whyus ul {
	margin-left:-30px;
}
.whyus ul li {
	list-style:none;
	line-height:30px;
}
.whyus ul li i {
	padding-right:10px;
}
.productdiv {
	padding-top:10px;
}
.productgallery {
	margin-top:35px;
}
.productgallery li {
	list-style: none;
	border: 1px solid #ECECEC;
	margin: 0px;
	padding: 5px;
}
.productgallery li:hover {
	border: 1px solid #71E100;
}
.productpage h3 {
	font:400 25px "Roboto";
	color:#ffba00;
	text-align:center;
	border-bottom:5px double #F2F2F2;
	padding-bottom:10px;
	text-transform:uppercase
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
	color:#4A4A4A;
}
.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {
	text-align:left;
}
.abt-banner { width:100%; height:auto; }
/*===========================================================================  1280 END ===========================================================================*/
@media(max-width:1920px) {
.sliderimg .item {
	height:850px;
}
}
 @media(max-width:1366px) {
.sliderimg .item {
	height:600px;
}
}

/*===========================================================================  1280 END ===========================================================================*/

@media(max-width:1280px) {
}

/*===========================================================================  1280 END ===========================================================================*/

@media(max-width:1024px) {
.sliderimg .item {
	height:460px;
}
.carousel-control {
	top:170px !important;
}
.blankyellow h3 {
	font: bold 40px "Roboto";
	padding: 50px 0px;
}
.wctagline h4 {
	font: 400 18px "Roboto";
}
.midyellow h3, .lightyellow h3, .darkyellow h3 {
	font: 300 25px "Roboto";
}
}
/*===========================================================================  1024 END ===========================================================================*/

@media(max-width:768px) {
.wdd {
	float:none;
	color:#fff;
	text-align:center;
}
.bottom-footer {
	text-align:center;
}
.blankyellow h3 {
	font: bold 55px "Roboto";
	padding: 30px 10px;
}
.wctagline h4 {
	font: 400 18px "Roboto";
}
.midyellow h3, .lightyellow h3, .darkyellow h3 {
	font: 300 35px "Roboto";
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
	margin-left:175px !important;
}
.navbar-inverse .navbar-nav>li>a {
	font:400 16px "Roboto"; !important;
}
.col-xs-offset-1 {
	margin-left:0%;
}
.navbar-wrapper {
	margin-top: 20px;
}
.navbar-nav {
	margin: 40px 100px 20px 0px !important;
}
.hm-sec {
    padding: 10px;
    text-align: center;
}
#sec-prod {
	text-align:center;
}
.offsset-1 {
	margin-left:0px;
}
.sliderimg .item {
	height:350px;
}
.carousel-control {
	top:180px!important;
}
.thumbnail a>img, .thumbnail>img {
	height:160px;
}
.abt-banner { width:100%; height:280px!important; }
.aboutsectinner p {
    line-height: 27px;
    padding: 0px 30px;
}
}
/*===========================================================================  768 END ===========================================================================*/

@media(max-width:480px) {
.hm-sec strong {
	padding-left:15px;
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    margin-left: 70px !important;
    margin-top: 0px !important;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
	top:20% !important;
}
.hm-sec strong {
	font: bold 38px "Roboto";
}
.top-footer {
	text-align:center !important;
}
.fl, .fr {
	text-align: center;
}
.sliderimg .item {
	height:230px;
}
.navbar-inverse .navbar-nav>li>a {
	font:400 16px "Roboto"; !important;
}
.abt-banner { width:100%; height:150px!important; }

.aboutsectinner h3 {
    margin: -40px 0px 20px 0px;
    padding: 0px 25px;
    font: 300 18px "Roboto";
    text-align: center;
}
}
/*===========================================================================  480 END ===========================================================================*/

@media(max-width:360px) {
.abt-banner { width:100%; height:150px!important; }
.carousel-control {
	top:170px !important;
}
.navbar-inverse .navbar-nav>li>a {
	font:400 16px "Roboto"; !important;
}
}
/*===========================================================================  360 END ===========================================================================*/

@media(max-width:320px) {

.abt-banner { width:100%; height:150px!important; }

.sliderimg .item img {
	height:225px;
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
	margin-left: -20px !important;
    margin-top: -50px !important;
}
.carousel-control {
	top:170px !important;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
	top:15% !important;
}
.navbar-brand>img {
	width: 85%;
}
.navbar-nav {
	margin: 40px 0px 0px 0px !important;
}
.fl, .fr {
	text-align: center;
}
.navbar-inverse .navbar-nav>li>a {
	font:400 16px "Roboto"; !important;
}
section {
	padding-top: 0px;
	padding-bottom: 30px;
}
.blankyellow h3 {
	font: bold 35px "Roboto";
	padding: 50px 0px 50px 0px;
}
.darkyellow h3 {
	font: 300 27px "Roboto";
}
}
/*===========================================================================  320 END ===========================================================================*/