/* CUSTOMIZE THE THEME
-------------------------------------------------- */
.navbar-fixed-top { background: #fff}
.logo img { max-width: 50%;}
.navbar { min-height: 80px; margin-bottom: 0}
.navbar-brand { padding: 8px 0;}
.navbar-inverse { background-color: #fff; border-color:white}
.navbar-nav { float: right; margin:16px -16px 0;}
.navbar-inverse .navbar-nav>li>a:focus,.navbar-inverse .navbar-nav>li>a:hover{color:#fff;background-color:transparent}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:focus,.navbar-inverse .navbar-nav>.active>a:hover{color:#fff;background-color:transparent; font-weight:bold}
.navbar-inverse .navbar-nav>li>a { color: #fffc00}
.navbar-nav > li > a { padding: 0 15px 0;}
.navbar-nav>li { border-right: 1px solid #fffc00;}
.navbar-nav>li:last-child { border-right: none;}
.enquiry{
    float: right;
    color: #A10203;
    font-weight: bold;
    font-size: 14px;
    padding: 2px 10px 2px;
    margin: 10px 0 0;
    background: #D9D5D5;
    border-radius: 4px;
}

.bgcolor{background: #1f551f !important; border:none !important}
.header-top { line-height: 10px; background: #fffc00}
.left-header-top { float:right}
.left-header-top .top-txt { color: #000; position: relative; top: -4px}
.header-top .left-header-top ul li a{ color: #000}
.header-top .left-header-top ul { margin:0 } 
.social:hover {
     -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
     -o-transform: scale(1.1)
 }
 .social {
     -webkit-transform: scale(0.8);
     /* Browser Variations: */
     
     -moz-transform: scale(0.8);
     -o-transform: scale(0.8);
     -webkit-transition-duration: 0.5s;
     -moz-transition-duration: 0.5s;
     -o-transition-duration: 0.5s
 }


.carousel-caption h2 { font-size: 50px; color: #222; margin: 0}
.carousel-caption h1 { font-size: 65px; color: #A10203; font-weight:bold; margin: 0}

.container-fluid1 {
    width: 100%;
    padding: 20px 0 20px;
    background: #fffc00;
    min-height: 450px
}
.who h1 {
    font-size: 45px;
    color: #000;
    text-align: center;
    padding: 50px 0 0
}
.who p {
    color: #000;
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    padding: 20px 0 0;
    width: 53%;
    margin: 0 auto
}

.container-fluid2 {
    width: 100%;
    padding:0;
    background: #e9e9e9
}
.gridfruit img{
    width: 33.1%;
    display: inline-block;
    padding: 0 0px 5px 0
}


.container-fluid3 {
    width: 100%;
    padding: 20px 0 20px;
    background: #fff;
    min-height: 450px
}
.why h1 {
    font-size: 45px;
    color: #222;
    text-align: center;
}
.why p {
    color: #222;
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    padding: 20px 0 0
}
.border-rgt { }

.customers  p {
    color: #222;
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    padding: 50px 0 0; 
    width:61%;
    margin: 0 auto

}
.customers  .pad {
    color: #222;
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    padding: 130px 0 0; 
    width: 53%;
    margin: 0 auto

}

.g-recaptcha{ width: 100%;margin: 1em 0 .5em .8em;}
.succMsg{ color:#009755 ; font-size: 15px;font-weight: bold;padding-top: 15px;}
.errMsg{ color:#fb4314 ; font-size: 15px;font-weight: bold;padding-top: 15px;}

.inver1 {
    position: absolute;
    top: 100px;
    left: 300px;
    height: 60px;
    width: 60px
}
.inver1 img{
    max-width: 80%;
}
.inver2 {
    position: absolute;
	top: 300px;
    right: 320px;
    height: 60px;
    width: 60px
}
.inver2 img{ max-width: 80%}

/* HOMEPAGE ANIMATION */

.item2 {
	width:443px;
	height:350px;	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
}

.item2 .caption {
	width:100%;
	height:100%;
	background:#000;
	color:#fff;
	font-weight:bold;
		
	/* fix it at the bottom */
	position:absolute;
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=70);    /* ie  */
	-moz-opacity:0.8;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.8;    /* for really really old safari */  
	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption a {
	text-decoration:none;
	color:#0cc7dd;
	font-size:16px;	
	
	/* add spacing and make the whole row clickable*/
	padding:5px;
	display:block;
}

.item .caption p {
	padding:5px;	
	margin:0;
	font-size:10px;
}

.item img {
	border:0;
	
	/* allow javascript moves the img position*/
	position:absolute;
}

.clear {
	clear:both;	
}


/* INNER PAGE CSS
-------------------------------------------------- */
.container-fluid-inner {
    width: 100%;
    padding: 20px 0 20px;
    background: #625D5D;
    min-height: 178px
}
.heading-area { padding: 100px 0 0 15px}
.heading-area h1 { color:#fff; font-size:32px; border-right:1px solid #A10203}
.h-small { color:#fff; font-size:13px; padding: 26px 0 0; float: left}
.contact-bg {
    width: 100%;
    padding: 20px 0 20px;
    background: url(../images/contact-bg.jpg) no-repeat;
    min-height: 666px;
    background-size: 100%;
}
.trans-rec {
    width: 40%;
    min-height:490px;
    margin-top: 3%;
    background: #fff;
    opacity: 0.9
}
.contact-us-area { padding: 40px}
.contact-us-control {
    font-size: 13px;
    font-weight: bold;
    color: #000;
    background-color: #fff;
    height: 40px;
    border: none;
    -webkit-box-shadow: inset 0px 0px 4px 1px #B01111;
    box-shadow: inset 0px 0px 4px 1px #B01111;
}
.textarea-us-contact {
    height: 95px !important;
    padding: 10px;
    width: 100%;
    border: none;
     border-radius: 4px;
    -webkit-box-shadow: inset 0px 0px 4px 1px #B01111;
    box-shadow: inset 0px 0px 4px 1px #B01111;
}
.career-bg {
    width: 100%;
    padding: 0px 0 20px;
    background: url(../images/contact-bg.jpg) no-repeat;
    min-height: 666px;
    background-size: 100%;
}
.career-rec {
    width: 100%;
    min-height:490px;
    margin-top: 3%;
    background: #fff;
    opacity: 0.9
}
.career-postings {
	width: 60%;
	float: left;
	padding: 20px;
	max-height:400px;
	overflow:auto;
}
.career-tab { margin-left: 5%; }

.career-area { 
	float:right;
	width: 40%;
	padding: 20px;
}
.career-control {
    font-size: 13px;
    font-weight: bold;
    color: #000;
    background-color: #fff;
    height: 40px;
    border: none;
    -webkit-box-shadow: inset 0px 0px 4px 1px #B01111;
    box-shadow: inset 0px 0px 4px 1px #B01111;
}
.textarea-us-career {
    height: 95px !important;
    padding: 10px;
    width: 100%;
    border: none;
     border-radius: 4px;
    -webkit-box-shadow: inset 0px 0px 4px 1px #B01111;
    box-shadow: inset 0px 0px 4px 1px #B01111;
}

#box    {   width:33.3%;
		  height:350px;
		  float:left;
          background-size:cover;
		  overflow:hidden;}

#overlay    {  background:rgba(85,0,0,.75);
          text-align:center;
		  width:100%;
		  height:100%;
          opacity:0;
          -webkit-transition: opacity .25s ease;
		  -moz-transition: opacity .25s ease;}

#box:hover #overlay {
          opacity:1;}

#plus       {  font-family:Helvetica;
            font-weight:900;
            color:rgba(255,255,255,.85);
            font-size:46px;}

.form-control::-moz-placeholder{color:#222;opacity:1}.form-control:-ms-input-placeholder{color:#222}.form-control::-webkit-input-placeholder{color:#222}
.form-no-pad { padding: 0}
.center-btn { margin:0 auto; float: none}
.btn-send {
    color: #fff;
    background-color: #B01111;
    border-color: #ccc;
    width: 100%;
    font-size: 18px;
    margin: 10px auto;
    transition-property: background, box-shadow;
    transition-duration: .3s;
    transition-timing-function: linear;
    -webkit-transition-duration: .3s;
}
.btn-send:hover{color:#fff;background-color:#222;}
.btn-send:focus{color:#fff;background-color:#222;}
.up-text {color:#222; font-size:13px;  text-align: center;}


.img-title {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	text-align: center;
	opacity: 0.8; 
	display: none;
	background-color: #A10203;
	/* transition: all 0.5s ease; */
}
.img-title h5 {
	position: absolute;
	top: 35%;
	width: 100%;
	text-align: center;
	font-size: 18px;
	color: #fff;
}

.gridfruit {padding: 0px; display: inline-block}
.gridfruit .img-responsive{display: inline!important; text-align: center }
.gridfruit div{
	margin: auto;
    text-align: center;
    border: 1px solid #ccc!important;

}
.gridfruit div img{ width: 188px}


/* INNER PAGE CSS END
-------------------------------------------------- */

footer{
    width: 100%;
    margin: 40px 0 0;
    padding: 20px 0 0;
    color: #222;
    background: #E6E6E6
}
footer .foot { padding: 0 0 20px}
footer .foot-logo img { max-width: 75%}
footer strong { color: #222}
.ph-icon, .email-icon { text-align:center}
footer .ph-icon img { max-width: 15%}
footer .email-icon img { max-width: 15%}
footer .email-icon a {color: #222}

.copyright {
    line-height: 20px;
    background: #fffc00;
    font-size: 12px;
    color: #000;
    width: 100%;
    float: left;
    padding: 4px;
}
.copyright ul li a {  color: #000;}
.copyright .foot-txt {
    color: #000;
    position: relative;
    top: -4px;
}
.copyright ul { margin: 0; padding: 3px 0 0; float: right}
.copyright .pad { padding: 6px 15px}

/* Slideshow */

#slideshow { 
    margin: 20px auto; 
    position: relative; 
    width: 70%; 
    height: 300px; 
    padding: 10px; 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

/* RESPONSIVE CSS
-------------------------------------------------- */
/* MOBILE CSS
-------------------------------------------------- */
@media (min-width:320px) and (max-width:767px)  {
    .carousel-inner { margin-top: 25% !important}
    .navbar-brand {
        width: 60%;
    }

    .navbar {
        min-height: 50px;
    }

    .navbar-inverse .navbar-toggle {
        background: #A10203;
    }

    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
        background: #fff;
        border-radius: 5px;
        margin-top: 10px;
        box-shadow: inset 0 0 10px #ccc;
        overflow: visible;
        height: auto;
        border: 1px solid #ccc;
    }

    .navbar-nav {
        float: left;
        margin: 0;
    }

    .navbar-nav > li {
            border-right: none;
     }

    .navbar-nav > li > a { padding: 10px 5px 0}

    .enquiry {
        float: left;
        color: #A10203;
        font-weight: bold;
        font-size: 14px;
        padding: 10px;
        margin: 10px 0 10px;
        background: #D9D5D5;
        border-radius: 4px;
        width: 100%;
    }

    .carousel-caption h2 {
        font-size: 18px;
    }

    .carousel-caption h1 {
        font-size: 24px;
    }

    .carousel .item {
        height: 150px;
    }

    .carousel {
        height: 90px;
        margin-bottom: 0;
    }

    .who h1 {
        font-size: 18px;
        padding: 50px 0 0;
    }

    .who p {
        font-size: 13px;
        padding: 20px 0 0;
        width: 100%;
    }

    .gridfruit img {
        width: 100%;
    }

    .why h1 {
        font-size: 18px;
    }

    .why p {
        font-size: 13px;
    }

    .border-rgt {
        border-right: none;
    }

    .customers p { width:100% }

    .inver1 {
        top: 36px;
        left: -10px;
    }

    .inver2 { right: 0 }

    .customers .pad {
        font-size: 13px;
        padding: 50px 0 0;
        width: 100%;
    }

    footer .foot-logo img {
      max-width: 100%;
    }

    /* INNER PAGE CSS
-------------------------------------------------- */
.heading-area {padding: 60px 0 0 0}
.heading-area h1 {font-size: 18px; border-right: none}
.h-small { padding: 0px}
.contact-bg { background-size: cover; min-height: 495px;}
.trans-rec { width: 100%; min-height: 400px }
.contact-us-area {padding: 10px}
.btn-send { font-size: 12px }

.gridfruit { padding: 15px 0 0}
.gridfruit div img { width: 100%}
.img-title h5 {font-size: 14px !important; top: 32% !important}
.gridfruit div { line-height: 100%}


}

@media (min-width: 768px) {
    .carousel-caption {
        right: 0;
        left: 35%;
        padding-bottom: 30px;
        top: 25%;
    }
    
}

/* IPAD CSS
-------------------------------------------------- */
@media (min-width:768px) and (max-width:1024px) {
     body { overflow-x:hidden}
     .logo img { max-width: 50%  }
     .navbar-nav { margin: 0}
     .navbar-nav>li { font-size: 12px}
     .navbar-nav > li > a {padding: 0 10px 0}
     .enquiry { margin: 6px 11px 0;}
     .carousel .item { height: 372px}
     .carousel { height: 317px; margin-bottom: 0 }
     .carousel-caption h2 { font-size: 36px }
     .carousel-caption h1 { font-size: 48px }
     .container-fluid1 { min-height: 345px}
     .who h1 { font-size: 36px }
     .who p { width:100%}
     .gridfruit img { width: 32.9% }
     .why h1{ font-size: 36px }
     .inver1 { left: 25px }
     .inver2 { right: 20px }

 /* INNER PAGE CSS
-------------------------------------------------- */
.heading-area h1 {font-size: 18px }
.h-small {padding: 12px 0 0 }
.contact-bg { background-size: cover; min-height: 495px;}
.trans-rec { width:50%; min-height: 418px }
.contact-us-area {padding: 10px}
.btn-send { font-size: 15px }

.gridfruit { padding: 15px 0 0}
}

/* DESKTOP CSS
-------------------------------------------------- */
@media (min-width:992px) and (max-width:1169px) {
  .navbar-nav { margin: 0}
  .carousel .item { height: 506px}
  .carousel { height: 450px; margin-bottom: 0 }
  .carousel-caption h2 { font-size: 36px }
  .carousel-caption h1 { font-size: 48px }
  .container-fluid1 { min-height: 330px}
  .who h1 { font-size: 36px }
  .who p { width:100%}
  .gridfruit img { width: 32.9% }
  .why h1{ font-size: 36px }
  .inver1 { top: 129px; left: 55px;}

}

/* DESKTOP CSS LARGE SCREENS
-------------------------------------------------- */
@media (min-width: 1200px){
.col-lg-2 {
    width: 20%;
}

}