/* Font :- font-family: 'Nunito', sans-serif; */
@import url('https://fonts.googleapis.com/css?family=Nunito:200,300,400,400i,600,700,800,900');
/*
extra-light 200			light 300			regular 400			regular 400 Italic			semi-bold 600
bold 700				extra-bold 800		black 900
*/
::-webkit-scrollbar { display: none; }

html, body { width: 100%; height: 100%; }

body { font-family: 'Nunito', sans-serif; font-size: 16px; color: #666666; font-weight: 400; }
h2 { font-size: 26px; margin: 0 0 20px; padding: 0 0 15px; color: #0077c1; font-weight: 700; position: relative; letter-spacing: 0.50px; }
h2:after { content: " "; width: 100px; height: 3px; background: #71bf44; position: absolute; bottom: 0; left: 0; }
h3 { font-size: 22px; margin: 0 0 20px; padding: 0 0 15px; color: #71bf44; font-weight: 700; position: relative; letter-spacing: 0.50px; }
h3:after { content: " "; width: 100%; height: 1px; background: rgba(0,119,193,0.3); position: absolute; bottom: 0; left: 0; }
p { line-height: 30px; margin-bottom: 15px; }
.color-green { color: #71bf44; }
.m-t-30 { margin-top: 30px; }
.m-t-20 { margin-top: 20px; }
.white-bg { background: #FFF !important; }

.btn-success { color: #fff; background-color: #71bf44; border-color: #71bf44; }

.wrapper { width: 100%; height: 100%; padding: 30px 30px; }
.inner-wrapper { width: 100%; height: 100%; position: relative; background: #f2f2f2; }

.header { width: 100%; position: absolute;left: 0; top: 60px; }
.header .logo-img { display: inline-block; padding: 10px 10px; background: #FFF; position: relative; left: -15px; z-index: 1000	; border: 2px solid #71bf44; text-align: center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=0, Color=#000000)"; -moz-box-shadow: 0 0 15px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 15px 2px rgba(0,0,0,0.2); box-shadow: 0 0 15px 2px rgba(0,0,0,0.2); filter: progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=135, Color=#000000); }
.menu-icon-text { float: right; position: relative; right: 10px; z-index: 100000; }
.menu-icon-text p{ position: absolute; top: 0px; right: -20px; font-size: 12px; font-weight: 900; color: #333; display: inline-block; margin: 0;
    -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }
.menu-link-main { width: 50%; height: 100%; position: absolute; top: 0; right: 0; z-index: 10000; background: rgba(0,0,0,0.8); display: table; }
.menu-link-inner { display: table-cell; vertical-align: middle; text-align: center; }
.menu-link-inner ul { list-style-type: none; padding: 0; margin: 0; }
.menu-link-inner ul li a { font-size: 22px; color: #FFF; font-weight: 600; display: inline-block; width: 100%; padding: 5px 15px; }
.menu-link-inner ul li a:hover, .menu-link-inner ul li a:focus { text-decoration: none; color: #71bf44; }
.menu-link-inner ul li.pro-catlog a { color: #71bf44; }

.banner { width: 100%; height: 100%; }
#ninja-slider, .slider-inner, #ninja-slider ul { width: 100%; height: 100% !important; }

.footer { font-size: 12px; color: #333; font-weight: 600; margin-top: 7px; }
.footer a { color: #0077c1; }

.about-banner { background: url('../images/about-banner.jpg') center center; background-size: cover; }
.service-banner { background: url('../images/service-banner.jpg') center center; background-size: cover; }
.contact-banner { background: url('../images/contact-banner.jpg') center center; background-size: cover; }
.product-banner { background: url('../images/product-banner.jpg') center center; background-size: cover; }

.inner-page-wrapper { width: 100%; height: 100%; display: inline-block; }
.inner-page-wrapper .inner-page-left,
.inner-page-wrapper .inner-page-right { width: 50%; height: 100%; float: left; position: relative; }
.inner-page-wrapper .inner-page-right { background: url('../images/background-img.jpg'); background-size: cover; overflow: auto; padding: 95px 30px 30px 30px; }
.product-list-link { text-decoration: none; color: #71bf44; font-size: 22px; display: inline-block; border: 1px solid #71bf44; padding: 15px 20px; border-radius: 5px; }

.address-title { font-size: 19px; margin: 0 0 10px; padding: 0; color: #71bf44; font-weight: 700; position: relative; letter-spacing: 0.50px; }
.contact-address { line-height: 30px; }
.contact-address span { color: #333; font-weight: 700; }

.pro-listing-link { width: auto; max-width: 430px; margin: 0; padding: 0; list-style-type: none; position: absolute; top: 15px; left: 30px; }
.pro-listing-link li { display: inline-block; }
.pro-listing-link li a { width: 120px; position: relative; display: inline-block; color: #71bf44; font-size: 14px; font-weight: 600; margin-right: 15px; }
.pro-listing-link li a:after	{ content: " "; height: 2px; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; background: #71bf44; }
.pro-listing-link li a.active-pro, .pro-listing-link li a:hover { color: #0077c1; text-decoration: none; cursor: pointer; }
.pro-listing-link li a.active-pro:after, .pro-listing-link li a:hover:after { background: #0077c1; }
.pro-listing-link li:nth-child(1) a:after { width: calc(100% - 57px); }
.pro-listing-link li:nth-child(2) a:after { width: calc(100% - 88px); }
.pro-listing-link li:nth-child(3) a:after { width: calc(100% - 52px); }
.pro-listing-link li:nth-child(4) a:after { width: calc(100% - 70px); }
.pro-listing-link li:nth-child(5) a:after { width: calc(100% - 41px); }
.pro-listing-link li:nth-child(6) a:after { width: calc(100% - 47px); }
.pro-listing-link li:nth-child(7) a:after { width: calc(100% - 47px); }
.pro-listing-link li:nth-child(8) a:after { width: calc(100% - 74px); }
.pro-listing-link li:nth-child(9) a:after { width: calc(100% - 74px); }
.pro-listing-link li:nth-child(10) a:after { width: calc(100% - 54px); }
.pro-listing-box { width: 100%; display: inline-block; }
.pro-listing-box h4 { font-size: 16px; font-weight: 600; color: #666; margin: 0 0 5px; padding: 0 0 5px; border-bottom: 1px solid #d2d2d2; }

.pro-detail { display: none; width: calc(100% - 20px); height: calc(100% - 140px); padding: 00px 0 0; background: #FFF; position: absolute; bottom: 10px; left: 0; right: 0; margin: 0 auto; overflow-y: scroll; }
.pro-detail .title { font-size: 20px; font-weight: 700; padding: 5px 5px; color: #0077c1; background: #e2e2e2; margin-bottom: 15px; }
.pro-listing-box { cursor: pointer; }

.preload_img { width: 100%; }

.pro-detail-close { position: absolute; top: 10px; right: 10px; color: #71bf44; cursor: pointer; }

@media(max-width: 767px){
	html, body { overflow-x: hidden; }
	body { font-size: 14px; }

	h2 { font-size: 24px; margin: 0 0 10px; padding: 0 0 10px; }

	.wrapper { padding: 10px 10px 21px; }
	.header { top: 25px; }
	.menu-icon-text { right: -5px; }
	.menu-link-main { position: fixed; width: calc(100% - 20px); height: calc(100% - 31px); top: 10px; right: 0; left: 0; margin: auto; }
	.inner-page-wrapper .inner-page-right { padding: 20px 15px; }
	.footer { font-size: 9px; margin-top: 5px; }

	.pro-detail { position: fixed; right: 8px; width: calc(100% - 40px); z-index: 1000; top: 20%; bottom: auto; height: auto; margin: auto;
		-webkit-box-shadow: 0px 0px 60px 6px rgba(0,0,0,0.4); -moz-box-shadow: 0px 0px 60px 6px rgba(0,0,0,0.4); box-shadow: 0px 0px 60px 6px rgba(0,0,0,0.4); }
	.pro-listing-link { position: relative; width: 100%; max-width: inherit; top: 0; left: 0; }
	.pro-listing-link li a { width: 110px; }

}
@media (min-width: 768px) and (max-width: 900px) {
	.pro-detail { z-index: 1000; top: 20%; bottom: auto; height: auto; margin: auto; position: fixed; width: 70%;
		-webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.5); box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.5); }
}

@media(max-width: 990px){
	.inner-wrapper { overflow: auto; }
	.inner-page-wrapper .inner-page-left { width: 100%; height: 30%; }
	.inner-page-wrapper .inner-page-right { width: 100%; height: auto; min-height: 75%; }
}

@media(min-width: 768px){ }

@media(min-width: 992px){
	body, html { width: 100%; height: 100%; overflow: hidden; }
}

@media(min-width: 1200px){ }

/*==================================================*/
/* Extra CSS */
/*==================================================*/

/* Menu Icon */
.menu-icon { width: 45px; height: 30px; position: relative; 
	-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; }
.menu-icon span { display: block; position: absolute; height: 5px; width: 100%; background: #1a8bd3; border-radius: 9px; opacity: 1; right: 0; 
	-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
.menu-icon span:nth-child(1) { top: 0px; width: 100%; }
.menu-icon span:nth-child(2) { top: 13px; width: 75%; }
.menu-icon span:nth-child(3) { top: 25px; width: 90%; }
.menu-icon.open span:nth-child(1) { top: 12px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }
.menu-icon.open span:nth-child(2) { opacity: 0; right: 40px; }
.menu-icon.open span:nth-child(3) { top: 12px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); }

/* Progress bar */
.progress_bar { width: 0px; height: 3px; position: relative; background: rgba(0,0,0,0.5); position: absolute; bottom: 0; z-index: 1000; }

/* Form control */
input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label { top: -2.25rem; -webkit-transition: all 0.125s ease; transition: all 0.125s ease; }
.styled-input { width: 100%; display: inline-block; margin: 0 0 25px; position: relative; }
.styled-input label { font-size: 13px; color: #333; padding: 0 10px; margin: 0; line-height: 40px; position: absolute; top: 0; left: 0; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; pointer-events: none; }
.styled-input.wide { width: 100%; }
input, textarea { padding: 0 10px; border: 0; width: 100%; height: 40px; line-height: 40px; font-size: 14px; border-bottom: 2px solid #0077c1; }
input ~ span, textarea ~ span { display: block; width: 0; height: 2px; background: #71bf44; position: absolute; bottom: 0; left: 0; -webkit-transition: all 0.125s ease; transition: all 0.125s ease; }
input:focus, textarea:focus { outline: 0; }
input:focus ~ span, textarea:focus ~ span { width: 100%; -webkit-transition: all 0.075s ease; transition: all 0.075s ease; }
textarea { width: 100%; min-height: 15em; }

/* 360 image rotate */
#jquery-script-menu { position: fixed; height: 90px; width: 100%; top: 0; left: 0; border-top: 5px solid #316594; background: #fff; -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16); -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16); box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16); z-index: 999999; padding: 10px 0; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; }
.jquery-script-center { width: 960px; margin: 0 auto; }
.jquery-script-center ul { width: 212px; float:left; line-height:45px; margin:0; padding:0; list-style:none; }
.jquery-script-center a { text-decoration:none; }
.jquery-script-ads { width: 728px; height:90px; float:right; }
.jquery-script-clear { clear:both; height:0; }
.pro-rotate-imgs { width: 100%; max-width: 500px; height: auto; overflow: hidden; }
.pro-rotate-imgs img { display: block; max-width: 100%; height: auto; }
#view_overlay { opacity: 0 !important; left: 0 !important; }