/*
//Sundrop Fruit Juice SDN BHD website 
//Custom CSS
//Create: 27 Aug 2015
//Last update 22 Sep 2015
//by- PH.Lai
*/
/**/

/*----------------General size-----------------*/
/*Entire body*/
body {
  padding-bottom: 40px;
 // color: #5a5a5a;
 //background-image:url("../img/green.png");
background-size:cover;
background-attachment:fixed;

  //  background: -webkit-linear-gradient(90deg, #82FA58, #64FE2E); /* For Safari 5.1 to 6.0 */
   // background: -o-linear-gradient(90deg, #82FA58, #64FE2E); /* For Opera 11.1 to 12.0 */
   // background: -moz-linear-gradient(90deg, #82FA58, #64FE2E); /* For Firefox 3.6 to 15 */
    //background: linear-gradient(90deg, #82FA58, #64FE2E); /* Standard syntax (must be last) */ 

}

.modal-footer{
border-width: 0;
}

.Vlink{
height:100px;
	max-height:100px auto;
	min-height:1px;
	max-width: 320px;
	margin:5px auto;
text-align: center;
}
/*Footer*/
footer{
	margin-top:100px;
	background:rgba(3,3,3,0.1);
}
.footword{
	color:#000;
}

/*container*/
.container2{
	margin-top:100px;
	//margin-right:5px;
}
.container3{
	margin-left:10px;
	margin-right:10px;
	margin-top:-30px;
	text-align:center:
}

.container4{
	margin-top:100px;
}

.carouselItem{

}
.link{
margin-top:-20px;
}
/*------------Home page banner image with fade slide show ------------*/
.t1{
background-color:rgba(255, 255, 255, 0.2);
text-align:justify;
}
.cat{
 border: 1px groove;
 border-color: #A9D0F5;
}
.mainimg{
	width:100%;

}
.tblcartlist>table, .tblcartlist>table>tr, .tblcartlist>table>tr>th, .tblcartlist>table>tr>td, td, th, tbody{
border:1px solid black;
}
th{
border:1px solid black;
}
.emailtbl>table, .emailtbl>table>tr, .emailtbl>table>tr>th, .emailtbl>table>tr>td, td, th, tbody{
border:1px solid black;
}

table{
width:100%;
}
#slideshow {
    position:relative;
    height:550px;
	margin-bottom:-200px;
	
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

/*-------------Home page youtube1 section----------------------------*/
.youtube{

	background-color:#000;
	height:320px;
	max-width: 600px;
	margin-left:15px;
	margin-right:15px;

}
/*-------Product image-----------*/
.pimg{
height:300px;
width:230px;
}
.pimg2{
height:300px;
width:280px;
margin-left:-50px;
}
.pimg3{
height:90px;
width:70px;
}
.pimg4{
height:200px;
width:180px;
margin-left:-50px;
}


/*----------------------CUSTOMIZE THE NAVBAR-------------------------------- */
.collapse{
	display:none;
}
.nav .navbar-nav> .active > a:hover{
	color:red;
	background-color:#4169E1;
}
/*--------*/
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
	background-color:#4169E1;
	border-radius:8px;
}
.navbar-inverse .navbar-nav>.active>.lang, .navbar-inverse .navbar-nav>.active>.lang:focus, .navbar-inverse .navbar-nav>.active>.lang:hover{
	color:#000;
	background-color:#ff8b00;
	background-transparent:100%;
}

.navbar-nav > li > a, .navbar-brand {
	margin-top:1px;
    padding-top:6px !important; 
    padding-bottom:0 !important;
    height: 30px;
}
.navbar {
	min-height:32px !important;
	margin-top:10px;
}

.navbar-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 20;  
}
.navbar-header{
	//background-color:#2ECCFA;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar .container {
  width: auto;
}


/*--------------------------CUSTOMIZE THE CAROUSEL------------------------- */
.jcarousel{
//background-color:#555;
background-transparent:0.1;
background-color:rgba(0,0,255,0.2);
border:none;
margin-top:-2px;

}
.jcarousel-wrapper{
margin-top:-5px;
border-width:2px;
border-color:#4169E1;
//margin-bottom:-50px;
}

.jcarousel ul li{
border:none;
}

/* Carousel base class */
.carousel {
	height: 120px;
	margin-bottom: 60px;
	margin-top:42px;
	margin-left:0;
	background:url("../img/slide3.jpg");

}
.carousel-indicators{
	margin-bottom:-15px;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
margin-top:500px;
  z-index: 10;
  }

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 120px;


}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  
  margin-left:15px;
  margin-right:15px;
  margin-bottom:10px;
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

.formtitle{
text-align:center;
}

/*-------------(min-width: 120px )---------------*/

@media (min-width: 120px) {
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\ Carousel caption h1\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
	.carousel-caption h1 {
		margin-bottom: -20px;
		font-size: 35px;
	  }
}

/*-------------(min-width: 250px )---------------*/
@media(min-width:250px){
/*\\\\\\\\\\\\\\\\\\\\\\\\\\\ Navbar\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
	.navbar-wrapper .navbar {
		padding-right: 0;
		padding-left: 0;
		background-color:#ff8b00;
	  }
	.navbar-inverse .navbar-nav > li > a {
		color:white;
	}
	.navbar .brand, .navbar .nav > li > a:hover {
		color:#000;
		background-color: #ff8b00;
		border-radius:8px;
	}
	.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus{
color:#000;
background-color:#fff;
}
.dropdown-menu > li > a {
background-color:#fff;
}


  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
	border-bottom:0px;
	margin-left:50px;
  }

  /* Bump up size of carousel content */
  .carousel-caption h1 {

    margin-bottom: -20px;
    font-size: 35px;
    //line-height: 2.8;
  }

  .featurette-heading {
    font-size: 50px;
  }
}




/*-------------(min-width: 768px)---------------*/
@media (min-width: 768px) {
 /*\\\\\\\\\\\\\\\\\\\\\\\\\\\ Navbar\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
	.navbar-wrapper {
		margin-top: 20px;	
  }
	.navbar-wrapper .container {
		padding-right: 15px;
		padding-left: 15px;	
	}
	.navbar-wrapper .navbar {
		padding-right: 0;
		padding-left: 0;
		color:white;
		background-color:#ff8b00;	
	}
	.navbar-inverse .navbar-nav > li > a {
		color:white;
	}
}

/*-------------(min-width: 970px) ---------------*/
@media(min-device-width::970px){
 /*\\\\\\\\\\\\\\\\\\\\\\\\\\\ Navbar\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
	.navbar-nav > li > a, .navbar-brand {
		margin-top:1px;
		padding-top:6px !important; 
		padding-bottom:0 !important;
		height: 30px;
	}
	.navbar {
		min-height:32px !important;
		margin-top:10px;
	}
}

/*-------------(min-width: 992px) ---------------*/
@media (min-width: 992px) {

	.featurette-heading {
		margin-top: 120px;
	}
}
@media (min-width: 991px) {
.mainimg{
width:100%;
}
}

/*-------------(min-width: 1020px) ---------------*/
@media (min-width: 1020px) {

fieldset{
 display: block; 
	margin-bottom:10px;
    padding-top: 0.35em;
	margin-bottom:15px;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 0px groove;
	border-color: #A9D0F5;
	text-align:center;
	border-radius:8px;
}
.productInfo{
	display: block;
    margin-left:-50px;
    margin-right: 2px;
	margin-bottom:2px;
	//margin-top:50px;
    //padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 0px groove;
	border-color: #A9D0F5;
	text-align:center;
	border-radius:8px;
	

}
.productImg{
display:block;
margin-left: 2px;
margin-right: 2px;
margin-bottom:2px;
margin-top:5px;
text-align:center;
  border: 0px groove;
}

.productInfo1{
	display: block;
    margin-left:-50px;
    margin-right: 2px;
	margin-bottom:2px;
	//margin-top:50px;
    //padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 0px groove;
	border-color: #A9D0F5;
	text-align:center;
	border-radius:8px;
	

}
.productImg1{
display:block;
margin-left: 10px;
margin-right: 5px;
margin-bottom:2px;
margin-top:5px;
text-align:center;
border: 0px groove;
}
}

/*-------------(max-width: 1020px) ---------------*/
@media (max-width: 1020px) {

    .navbar-header {
        float: none;		
    }
    .navbar-toggle {
        display: block;
		height:10px;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;

		
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
	
    .collapsing {
        overflow: hidden!important;
    }
	.lang{
	background-color:#ff8b00;
	}
	
	.navbar-inverse .navbar-nav>.active>.lang, .navbar-inverse .navbar-nav>.active>.lang:focus, .navbar-inverse .navbar-nav>.active>.lang:hover
			{
			color:#000;
			background-color:#ff8b00;		
			}
	
	.navbar-toggle .icon-bar {
		margin-top:-7px;
		display: block;
		width: 20px;
		height: 2px;
		border-radius: 1px;
	}
	fieldset{
			display: block; 
			margin-bottom:10px;
			padding-top: 0.35em;
			margin-bottom:15px;
			padding-bottom: 0.625em;
			padding-left: 0.75em;
			padding-right: 0.75em;
			border: 0px groove;
			border-color: #A9D0F5;
			text-align:center;
			border-radius:8px;
		}
		.productInfo{
			display: block;
			margin-left:2px;
			margin-right: 2px;
			margin-bottom:2px;
			margin-top:5px;
			padding-top: 0.35em;
			padding-bottom: 0.625em;
			padding-left: 0.75em;
			padding-right: 0.75em;
			border: 0px groove;
			border-color: #A9D0F5;
			text-align:center;
			border-radius:8px;

		}
		.productImg{
		display:block;
		margin-left: 2px;
		margin-right: 2px;
		margin-bottom:2px;
		margin-top:5px;
		text-align:center;
		  border: 0px groove;
		}
	.productInfo1{
			display: block;
			margin-left:2px;
			margin-right: 2px;
			margin-bottom:2px;
			margin-top:5px;
			padding-top: 0.35em;
			padding-bottom: 0.625em;
			padding-left: 0.75em;
			padding-right: 0.75em;
			border: 0px groove;
			border-color: #A9D0F5;
			text-align:center;
			border-radius:8px;

		}
		.productImg1{
		display:block;
		margin-left: 2px;
		margin-right: 2px;
		margin-bottom:2px;
		margin-top:5px;
		text-align:center;
		  border: 0px groove;
		}
}

/*--------------------------------------carousel fade test-------------------------------*/
.carousel1-fade .carousel1-inner .item {
  opacity: 10;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}
.carousel1-fade .carousel1-inner .active {
  opacity: 10;
}
.carousel1-fade .carousel1-inner .active.left,
.carousel1-fade .carousel1-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 9;
}
.carousel1-fade .carousel1-inner .next.left,
.carousel1-fade .carousel1-inner .prev.right {
  opacity: 1;
}
.carousel1-fade .carousel1-control {
  z-index: 10;
}

.carousel1 {
	height:auto;
	margin-bottom: 60px;
	margin-top:42px;
	margin-left:0;
}


/* Declare heights because of positioning of img element */
.carousel1 .item {
height: 400px;
margin: 0 auto; 
margin-bottom:0px auto;
}
.carousel1-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  height:auto;
  margin-left:0px;
  margin-bottom:10px auto;
}

.youtube1{
	background-color:#000;
	height:400px;
	max-height:400px auto;
	min-height:10px;
	max-width: 1200px;
	margin: 5px auto;
	
}
.youtube2{
background-color:#000;
	height:380px;
	max-height:380px auto;
	min-height:10px;
	max-width: 600px;
	margin: 5px auto;
	align:justify;
	
}
.mainimg1{
	height:320px;
	max-height:320px auto;
	min-height:1px;
	max-width: 1200px;
	margin: 5px auto;
text-align: center;

	
}

.mainimg2{
	height:600px;
	max-height:600px auto;
	min-height:1px;
	max-width: 600px;
	margin: 5px auto;
	margin-bottom:150px;
}

@media (max-width: 500px) {
.Vlink{
text-align:center;
	height:30px;
	max-height:50px auto;
	min-height:1px;
	max-width: 120px;
	margin: 5px auto;

}

	.mainimg1{
	height:150px;
	max-height:200px auto;
	min-height:1px;
	max-width: 320px;
	margin: 5px auto;
}
.mainimg2{
	height:300px;
	max-height:300px auto;
	min-height:1px;
	max-width: 300px;
	margin: 5px auto;
	margin-bottom:150px;
}
}

.disimg1{
width:70%;
}
.productdata{
color:#08088A;
font-family:Times New Roman;
font-size:1.2em;
text-align:justify;
}
.productdata2{
color:#08088A;
font-family:KaiTi;
font-size:1.4em;
text-align:justify;
}


h4{
color:#FC7600;
text-align:justify;
}
.chP{
font-family:KaiTi;
font-size:1.6em;
font-weight: bold;
}
.ch{
font-family:KaiTi;
}
.required{
color:#ff0000;
}
.productHeader{
color:#565;
}
.contact label{
font-size:1.2em;
font-wedth:bold;
}

strong{
color:#08088A;
}
.companyname{
color:#500;
}

.icon{
color:#ff8b00;
}

.contactdetails>p{
color:#500;
}
.contactdata{
color:#533;
}
.contactdatainput{
width:100%;
}
.btnGroup{
text-align:center;
}