@media (min-width:768px) 
{
	.features .col-sm-2{
		width: 12.5%;
		padding-right: 3px;
  padding-left: 3px;}
  .features .col-sm-3{
		width: 20%;}
  .tetra .col-sm-2{width: 11%; padding-right: 5px; padding-left: 5px}
  .tetra .col-sm-2 img {opacity: .8}
  .tetra .col-sm-2 img:hover {opacity: 1}
  	 .pet .col-sm-3 {width: 20%}
	.water .col-sm-3{
		width: 25%;}
.glass .col-sm-2{
		width: 14.28%;
		padding-right: 3px;
  padding-left: 3px;}
}

/* start labanita milk */
.milk {
	background-color:#6abddd;
	color: #fff;
	padding:50px 0;
	}
	.milk h1, .milk h3, .milk h4{
	color: #fff;
	}
	.milk h4{
		letter-spacing:1.5px;
	}
	.milk .img {
  padding: 50px 20px 25px;
  margin: 70px 0;
}
.milk .yellow, .milk .blue, .milk .red{
  background-color: rgba(255,255,255,.2);
}
.price-table .table{color:#fff;}
.price-table span{color: #fff;
font-size:20px;
margin-top:20px;
display:block
}
.price-table h3, .price-table h4{
	color:#fff}
	.juice-top1{
	background:url(../images/yes-top.jpg) no-repeat;
	height:250px;}
	.juice-top{
	background:url(../images/yes-top.png) no-repeat;
	height:250px;}
	
	.juice{padding:60px 0}
	.juice .carousel{padding: 10px 60px}
	.juice .carousel-inner {min-height:160px; }
  	/*padding-bottom: 40px;}
	.juice .carousel-inner h4{position: absolute;
  top: 100%;
  left:40%;}*/
.juice .carousel-indicators,  .milk .carousel-indicators{
	position:static;
	width:100%;
	margin-left:auto;
	padding-top:20px;
}
.juice .carousel-indicators li, .milk .carousel-indicators li{
	text-indent:0px;
	width:70px;
	height:70px;
	opacity:0.5;
	border: 2px solid rgb(255,255,255);
	border-radius:0; 
	overflow:hidden; /* to let the photo inside the border*/
	margin:5px;
}
.juice .carousel-indicators li.active, .milk .carousel-indicators li.active{
	opacity:1;
	width:70px;
	height:70px;
	background:none;
	border: 0px solid rgb(51,51,51);
	border-radius:0;
	overflow:hidden;
}
.juice .carousel-indicators li img, .milk .carousel-indicators li img{max-width:100%;}
.milk .carousel{padding: 10px 80px}
.milk .carousel-indicators {
  position: absolute;
  width: 25%;
  right: 0;
  top:0;
}
.milk .carousel-inner {
  width: 90%;}
  .milk .carousel-indicators li, .pet .carousel-indicators li{
	width:60px;
	height:60px;}
 .milk .carousel-indicators li.active, .pet .carousel-indicators li.active{
	width:60px;
	height:60px;
}
.glass .carousel-indicators li{
	width:50px;
	height:50px;}
.glass .carousel-indicators li.active{
	width:50px;
	height:50px;
}
.features {
  padding-bottom: 50px;}
.features .feat{overflow:hidden}
.features .row{margin-right: 0;
  margin-left: 0;
}
.feat {
  margin-bottom: 6px;
}
.features .col-sm-2{
		padding-right: 3px;
  padding-left: 3px;}
  .feat .caption{
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  background-color: #dd8e37;
  color: white;
  font-size: 16px;
  padding: 16px 26px;
  width:65%}
.glass .feat {padding: 0 70px}
.glass .caption, .pet .caption{
  opacity: 1;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: right;
  background-color: #dd8e37;
  color: white;
  font-size: 16px;
  padding: 20px 30px 20px;
  width: 65%;}
 .glass .img img, .pet .img img{position: relative;
  z-index: 100;} 
.feat:hover .caption{
	 opacity: 1}
.features .pet:hover img{
	transform: scale(1.5) translate(0, -30px);}
.features .pet img{transition: .5s ease;}
.pet-cover .img {margin-bottom: 30px}
.caption1{
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  background-color: #fff;
  color: #292929;
  font-size: 16px;
  padding: 16px 26px;
  width:100%}
  .feat:hover .caption1{
	 opacity: 1}


/* start labanita milk */
/* start about */
.about-top{
	background:url(../images/about-top.jpg) no-repeat;
	height:250px}
	.trade-top{
	background:url(../images/trade-top.jpg) no-repeat;
	height:250px}
.about-page{margin:60px 0 50px 0}
.link a{color: #292929; font-weight: 600;}
.link i{margin-right: 10px; color:#FE0002}
.green{ background-color:rgb(0,114,53)}
.green .navbar-nav > li > a, .green .top-links a{color: #fff; background-color:transparent}
.green .navbar-nav > li > a:hover, .green .top-links a:hover{
	color:#D8D8D8; 
	text-decoration:none; 
	background-color:transparent}
.hayat-top{
	background:url(../images/hayat-top.jpg) center no-repeat;
	height:250px}
.vegetable-top{
	background:url(../images/vegetable-top.jpg) center no-repeat;
	height:250px}
	.yes {padding: 40px 70px 40px 40px;
	background-color:#e1dede;
	margin-top: 30px}
	.hayat {padding: 40px 70px 40px 40px;
	margin-top: 30px}
.breadcrumb-div {
	background-color:#FSFSFS;
}
.breadcrumb {
	padding:10px 0;
	margin:0;
}
.about-us {
	padding:70px 0;
}
.about-us h1 {
	font-family: 'Raleway', sans-serif;
	letter-spacing:-3px;
	font-size:42px;
	
}
.about-us hr {
	width:70%;
}
.about-features {
	padding: 0 0 70px;
}
.about-features h3 {
	font-family: 'Raleway', sans-serif;	
}
.about-features p {
	font-family: 'Raleway', sans-serif;
	margin-bottom: 20px;
}
.ceo {
	background-color:#EEE;
	padding-top:40px;
}
.ceo h2{
	font-family: 'Raleway', sans-serif;
}
.ceo .lead{
	line-height:1.2em;
}
.ceo .btn-primary{
	background-color:#333;
	border-color:#333;
	display:inline-block;
	margin-bottom:30px;
}
/* end about */
/* start faq */
.companies .text {padding:30px; min-height:400px}
 .companies .text a{color: #292929}
.panel-group .panel-heading + .panel-collapse > .panel-body, .panel-group .panel-heading + .panel-collapse > .list-group {border: 0;}
.companies .green, .companies .green a, .green > .panel-heading{background-color:#006E64;
color:#fff}
.panel-group .panel + .panel {
  margin-top: 0;}
 .companies .yellow, .yellow > .panel-heading {background-color:#FCBC00; color:#292929;}
 .companies{color:#292929;
 margin-top:60px} 
 .companies .blue, .companies .blue a, .blue > .panel-heading {background-color: #0068A2; color:#fff}
 .companies .green2, .companies .green2 a{background-color:#007235; color:#fff}
 .companies .red, .companies .red a { background-color:#DA291C; color: #fff}
 .companies .black, .companies .black a { background-color:#1D1D1B; color: #fff}
 .panel-body {
  padding: 58px;}
.faq {padding: 40px 0;}
.faq h1{
	font-family: 'Raleway', sans-serif;
	letter-spacing:-1px;
	font-size:65px;
}
.faq hr{
	width:70%;
}
.faq-questions .panel-heading {
	padding: 20px 15px;}
.faq-questions .panel-heading a:after {
	font-family: 'Glyphicons Halflings';
	content: '\e114';
	float: right;
	color: #444;
}
.faq-questions .panel-heading a.collapsed:after {
	content: '\e080';
	color: #999;}

	
/* end faq */
@media (max-width:767px) 
{
.about-top, .juice-top{ height: 200px;}
.milk .carousel {
  padding: 10px 80px 10px 0;
}
.table{font-size: 14px}
 .juice .carousel-indicators li, .milk .carousel-indicators li {margin:0}
 .glass .feat {padding:0}
.feat .caption{
 opacity: 1;
    top: 60%;
    left: 50%;
    padding: 10px 5px;
    width: 95%;
    font-size: 10px;
	}
.features .feat .caption1 {
  opacity: 1;
  top: 80%;
  padding: 10px 5px;
  font-size: 9px;
 }
 .tetra .caption1 {
  opacity: 1;
  text-align:left;
  font-size: 10px;
  padding: 16px 5px;
  top: 100%;
  left: 0;
  transform:none}
  .tetra .feat {
  margin-bottom: 50px;
}
.tetra .col-xs-3 {padding-right: 0;
  padding-left: 0;}
  .tetra .col-xs-2 {
	  width:18%;
	  padding-right: 0;
  padding-left: 0;}
  .juice .carousel-indicators li, .milk .carousel-indicators li, .juice .carousel-indicators li.active, .milk .carousel-indicators li.active {  
  width: 60px;
  height: 60px;
}
.juice .carousel {
  padding: 10px 0;
}
.features .row {
  margin-right: 0;
  margin-left: 0;
}
.juice .carousel-inner h4{position: absolute;
  top: 123%;}
  .yes {
  padding: 40px;}
  .stats .stats2 h1 {font-size:30px}
}