@charset "utf-8";

@font-face {
    font-family: robobold;
    src: url(../RobotoCondensed-Bold.ttf);
}
@font-face {
    font-family: cambria;
    src: url(../ufonts.com_cambria.ttf);
}
body{ font-family:cambria;}
#sliderhold{
	background-repeat:repeat-x;
	height:400px;
}

#sliderhold1{
	background-repeat:repeat-x;
}
#sliderhold1 h1{ color:#fff;}
#sliderhold h1{ color:#4CAF50; font-size:50px;}
#sliderhold h3{ color:#FFF; font-size:30px;}
#shortabout{ background-color:#FFF;
 background-image:url(../../images/bg.png);
 font-family:cambria;
 color:#999;
 }
 #mobiletreace{ background-color:#FFF;
 background-image:url(../../images/bg.png);
 font-family:cambria;
 color:#999;
 font-size:20px;
 display:none;
 }
#mobiletreace .items{  border-bottom:1px solid #e9e7e8; padding-top:15px;padding-bottom:15px;}
 #mobiletreace .fa{ color:#4CAF50; font-size:17px;}
 #mobiletreace a{ color:#999;font-family:robobold;}
#mobiletreace .ico{ position: relative;
  width: 35px;
  height: 35px;
  line-height:35px;
  border: 1px solid #4CAF50;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  margin: 0 auto;
  -webkit-transition: -webkit-transform ease-out 0.2s, background 0.3s;
  -moz-transition: -moz-transform ease-out 0.2s, background 0.3s;
  transition: transform ease-out 0.2s, background 0.3s;}
#haveq{
	background-image:url(../../images/ban-bg.png);
	background-color:#666;	
}
#haveq .container{ 
	
}
#mobhead{display:none;}
#sliderbox{
	background-image:url(../../images/ban-bg.png);
	background-color:#333;	
}
#haveq,#company h3{
	font-family:robobold;
}
#haveq p{
	font-family:cambria;
	font-size:16px;
}
#haveq .thumbnail{
	min-height:480px;
}
.conmaintext h1{
	text-align:center;
	color:#fff;
	padding:10px 10px 20px 10px;
	font-size:30px;
	text-shadow: 5px 1px 6px rgba(150, 150, 150, 1);
	font-family:robobold;
}
.custtumb h3{ text-align:center; margin-top:0px; color:#007f00;}
.custtumb p{ text-align:justify;}
#team{
	padding:20px;
	background-color:#FFF;
}
.teamtext h1{
	text-align:center;
	color:#444;
	padding:10px 10px 20px 10px;
	font-size:35px;
	font-family:robobold;}
#team .name{
	font-size:22px;
	font-family:robobold;
}
#team .post{
	font-size:14px;
	color:#333;
}
#team .social i{
	font-size:22px;
	padding:5px;
}
#team .fb:hover{
	color:#0066ff;
}
#team .tw:hover{
	color:#1dcaff;
}
#testimonial{
	background-color:#666;
	background-image:url(../../images/ban-bg.png);
}
#product{
	background-color:#fff;
	margin-top:0px;
	font-size:16px;
}
#aboutimg{ background-image:url(../../images/about-house.jpg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
height:350px;
}
#company{
	background-image:url(../../images/tintwhite.jpg);
	background-repeat:repeat;
	font-family:cambria;
}
#company .thumbnail{ min-height:441px;}
#company p{ font-size:16px;}
#aboutcon{
	background-color:#FFF;
}
#aboutcon p,ul{ font-size:17px;}
	

.track{   font-family: robobold; font-size:16px;}
#top{ box-shadow:0px 0px 4px rgba(0, 0, 0, 0.4);}
#leftwhite{ background-color:#FFF; border-radius:5px; box-shadow:0px 0px 4px rgba(0, 0, 0, 0.4); padding:5px 10px 10px 10px; }

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}
input[readonly] {
  background-color: white !important;
  cursor: text !important;
}

#output{
	padding: 5px;
	font-size: 12px;
}
#output img {
	border: 1px solid #DDD;
	padding: 5px;
}
.leftbar{
	padding:10px;
	font-size:18px;
}
.qualityol { font-size:25px;}
.qualityol li{ padding-left:10px;}
.qualityol .lihead{ font-family:robobold;}
.qualityol .libody{ font-size:16px; font-family:cambria;}
.headm{ font-family:robobold;}
#mainbody{
	background-color:#F4F0EA;
	min-height:600px;
}
.paddleftfifty{ padding-left:50px;}
#mainbody hr{ border-color:rgba(197, 187, 187, 0.3);}
#tracknav{ padding-top:10px;}
select {
    width: 250px;
    color: #333;
    font-weight: normal;
    font-size: 16px;
    line-height:1.2em;
    margin: 0 0 10px;
    padding: 12px 10px;
    border: 1px solid #bdbdbd;
    cursor: pointer;
    text-indent: 0.01px;
    text-overflow: "";
    background: url('../../images/arrow.png') no-repeat 100% 4px #fff; /* add your own arrow image */
    *background-image:none; /* turn bg image for IE7 */
    background: url('../../images/arrow.png') no-repeat 100% 0px #fff; /* fallback bg image*/
    background: url('../../images/arrow.png') no-repeat 100% 0px, -webkit-linear-gradient(top, #fff, #fff);
    background: url('../../images/arrow.png') no-repeat 100% 0px, -moz-linear-gradient(top, #fff, #fff);
    background: url('../../images/arrow.png') no-repeat 100% 0px, -ms-linear-gradient(top, #fff, #fff);
    background: url('../../images/arrow.png') no-repeat 100% 0px, -o-linear-gradient(top, #fff, #fff);
    background: url('../../images/arrow.png') no-repeat 100% 0px, linear-gradient(top, #fff, #fff);
    -webkit-appearance: none; /* gets rid of default appearance in Webkit browsers*/
    -moz-appearance: none; /* Get rid of default appearance for older Firefox browsers */
    -ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/
    appearance: none;
}
select option {
    background: #fff; 

}

.margleft{ padding-left:33px;}/*for home menu */
.margleftlogo{ padding-left:27px;}/*for home menu */
.margadall{padding-left:33px; padding-right:33px;}
/* progress bar style */
#progressbox {
	border: 1px solid #92C8DA;
	padding: 1px; 
	position:relative;
	width:400px;
	border-radius: 3px;
	margin: 10px;
	display:none;
	text-align:left;
}
#progressbar {
	height:20px;
	border-radius: 3px;
	background-color: #77E0FA;
	width:1%;
}
#statustxt {
	top:3px;
	left:50%;
	position:absolute;
	display:inline-block;
	color: #000000;
}
.shadowthumb{-webkit-box-shadow: 1px 1px 22px -9px rgba(0,0,0,1);
-moz-box-shadow: 1px 1px 22px -9px rgba(0,0,0,1);
box-shadow: 1px 1px 22px -9px rgba(0,0,0,1);}
#distributor h2{
	color:#4CAF50;
	font-weight:bolder;
	font-size:18px;
}
#distributor .detail{
	color:#333;
	font-size:16px;
}
.spinner {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
}

#progressbox {
	position:relative;
 height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
	display:none;
	text-align:left;
}
#progressbar {
	height:20px;
	border-radius: 3px;
	width:1%;
}
#statustxt {
	top:3px;
	left:50%;
	position:absolute;
	display:inline-block;
	color: #000000;
}

.container1 > div, .container2 > div, .container3 > div {
  width: 10px;
  height: 10px;
  background-color: #4CAF50;

  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

@media(max-width:400px) {
	#tracknav{ display:none;}
	.features .title{ text-align:center; margin-bottom:20px;}
	#feats .row h3{ text-align:center; padding-top:10px; padding-bottom:5px; color:#4CAF50;}
	#aboutimg{ background-image:none; display:none;}
	#haveq .thumbnail{
	min-height:inherit;
	}
	#company .thumbnail{ min-height:inherit;}
	
	}
@media(max-width:500px) {
	#aboutimg{ background-image:none; display:none;}
	#sliderbox{ display:none;}
	.margleft{ padding-left:15px;}
	.margadall{padding-left:10px; padding-right:10px;}
	.links{ margin-left:-40px;}
.sizeabletable{ width:100%;}
	#haveq .thumbnail{
	min-height:inherit;
}
#company .thumbnail{ min-height:inherit;}
	#mobiletreace{ display:block;}
	#shortabout{ display:none;}
}

@media(max-width:980px) {
	#tracknav{ display:none;}
	#feats .row h3{ text-align:center; padding-top:10px; padding-bottom:5px; color:#4CAF50;}
	.features .title{ text-align:center; margin-bottom:20px;}
.paddleftfifty{ padding-left:13px;}
#maincont ol{ margin-left:-40px;}
.centerproduct h3{ text-align:center;}
.detaildistru{ padding-left:50px;}
}

/*banana page css */
.banna-banner{
	background-color:#357d00;
	margin-top:0px !important;
}
.banna-banner div{
	position:absolute;
	top: 150px; 
	width:100%;
   	text-align:center;
	font-size:60px;
	color:#fff;
	font-family:robobold;
}
.banna-title span{ font-size:5px !important;}
.banna-Natural .title{ 
}
.productline{
	padding:20px 0px 20px 0px;
}
.custome_br{
	padding:4px 0px 4px 0px;
}
.milkshake{
padding-top:3px; font-size:22px;
}
#mobiledivisor{
	display:none;
}/* banana css ends*/
/* mobile banana cs*/

@media(max-width:480px) {
	.banna-banner img{
		width:100%;
	}
	#slide1 img{
		width:150px;	
	}#slide2 img{
		width:150px;	
	}#slide4 img{
		width:300px;	
	}
	.productinfo h3{
		margin:0px;
		padding-top:10px;
		font-size:25px !important;
	}
	.productinfo{
		padding-top:10px !important;
	}
	.productinfo .pinfo{
		font-size:14px !important;
	}
	.custome_br{
		display:none;
	padding:0px 0px 0px 0px;
	}
	hr{
		margin:0px;
	}
	.banna-Natural{
		padding:10px 0px !important;
	}
	.banna-Natural .title{
		font-size:24px !important;
	}
	.mobtoper{
		margin-top:20px;
	}
	#consumption-pattern{
		padding:10px !important;
	}
	#consumption-pattern h3{
		font-size:28px !important;
	}
	#consumption-pattern #innertext{
		font-size:15px !important;
	}#consumption-pattern #innertext .ll{
		padding-bottom:10px !important; 
	}
	#Storagentips h3{
		font-size:25px !important;
	}
	#Storagentips img{
		width:100px;
	}#Storagentips h4{
		font-size:15px !important;
	}.milkshake{
		font-size:16px !important;
	}
	#benifit-box h3{
		margin-top:5px !important;
	}#mobiledivisor{
	display:block;
}
#minfo1,#minfo2,#minfo3,#minfo4,#minfo5,#minfo6,#minfo7{ display:none; font-size:14px !important;}
}

/* mobile banana css end*/