/******************************************************************
Site Name: Zest Catering
Author: Lando Tornabene

Stylesheet: Custom Styles

******************************************************************/

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);

body{font-family: 'Lato', sans-serif;}

h1, h2, h3, h4, h5, h6 {color: #6e6c23;}

h1{font-size: 36px;}

h2{font-size: 26px;}

p{color: #6d6e71; font-size: 14px; line-height: 20px;}

.carousel-caption p{font-size: 14px; line-height: 20px;}

.menu h3{margin: 0px;}


a{color: #6e6c23;}

a:hover, a:focus{color: #6e6c23; text-decoration: underline;}

.breadcrumb{background-color: transparent;}

ul.subnav{list-style: none; margin-bottom: 50px;}

ul.subnav li{float: left;}

ul.subnav li a{color: #6e6c23; padding: 10px 15px; font-size: 18px;}

ul.subnav li a:hover, ul.subnav li a:focus{text-decoration: underline;}

/*******************************
Page Divider
********************************/

.mrdivider {
    display: block;
    min-height: 1px;
	border-bottom: 1px solid #6e6c23;
	margin: 20px 0px;
    clear: both;
}

/*
body.home{background: url('http://zest.fusio.net/wp-content/uploads/2015/09/home_bg.jpg') no-repeat center center scroll; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
*/
/*

.homebanner{margin-top: 400px;}

.homebanner .container .row .col-md-6{background-color: rgba(255, 255, 255, 0.6); padding: 40px;}
*/

/*.homebanner img{width: 100%; max-width: 100%; height: auto;}*/

header.header{height: 0px;}

.navbar{background-color: rgba(110, 108, 35, 0.8); top: 80px; z-index: 1;}

.navbar-brand{position: relative; top: -80px;}

#footer{background-color: #727027; border: none;}

.carousel-caption{left: 5%; right: 45%; bottom: 20px; text-align: left; text-shadow: none; background-color: rgba(255, 255, 255, 0.6); padding: 0px 40px 10px;}

.nav > li > a{color: #ffffff; font-size: 15px; padding: 10px 15px;}

.nav > li > a:hover, .nav > li > a:focus{color: #ffffff; background-color: transparent; text-decoration: underline;}

.navbar-nav > li > a{padding-top: 0px; padding-bottom: 30px;}

img.home{padding-right: 30px; margin-right: 30px; border-right: 1px solid #eaeaea; max-width: 100%; height: auto;}

#footer p{color: #ffffff; font-size: 14px;}

#footer p a{color: #ffffff;}

/* iPad Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
      
      .navbar, .navbar-brand{top: 0px;}
      
      .navbar-brand img{max-width: 150px;}
      
      .navbar-nav > li > a{font-size: 14px; padding: 10px 5px;}
      
      .carousel-caption{left: 0%; right: 0%;}
      
      h1{font-size: 30px;}
      
      .carousel-caption p{font-size: 12px; line-height: 20px;}
      
}

/* iPad Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
      
      .navbar-brand img{max-width: 150px;}
      
      .navbar-brand{top: -50px;}
      
      .navbar{top: 100px;}

}

/* iPhone Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
      
      ul.subnav li{float: none;}
      
      img{width: 100%; max-width: 100%; height: auto;}
      
      header.header{height: auto;}
      
       .navbar, .navbar-brand{top: 0px;}
      
      .navbar-brand{float: left;}
      
      .navbar-toggle .icon-bar{background-color: #222222;}
      
      .navbar-brand img{max-width: 100px;}
      
      .nav > li > a{font-size: 14px;}
      
      .carousel-caption{left: 0%; right: 0%; position: relative;}
      
      h1{font-size: 30px;}
      
      .carousel-caption p{font-size: 12px; line-height: 20px;}
      
      .nav{float: right; text-align: right;}
      
      img.home{border: none; padding: 0px; margin: 0px;}
      
}

/* iPhone Portrait */
@media only screen 
  and (min-width: 320px) 
  and (max-width: 480px){
      
      ul.subnav li{float: none;}
      
      img{width: 100%; max-width: 100%; height: auto;}
      
      header.header{height: auto;}
      
       .navbar, .navbar-brand{top: 0px;}
      
      .navbar-brand{float: left;}
      
      .navbar-toggle .icon-bar{background-color: #222222;}
      
      .navbar-brand img{max-width: 100px;}
      
      .nav > li > a{font-size: 14px;}
      
      .carousel-caption{left: 0%; right: 0%; position: relative;}
      
      h1{font-size: 30px;}
      
      .carousel-caption p{font-size: 12px; line-height: 20px;}
      
      .nav{float: right; text-align: right;}
      
      img.home{border: none; padding: 0px; margin: 0px;}
      
}

/* ----------- Galaxy S3 ----------- */

@media screen 
    and (device-width: 320px) 
    and (device-height: 640px) 
    and (-webkit-device-pixel-ratio: 2){
        
        ul.subnav li{float: none;}
        
        img{width: 100%; max-width: 100%; height: auto;}
    
      header.header{height: auto;}
      
       .navbar, .navbar-brand{top: 0px;}
      
      .navbar-brand{float: left;}
      
      .navbar-toggle .icon-bar{background-color: #222222;}
      
      .navbar-brand img{max-width: 100px;}
      
      .nav > li > a{font-size: 14px;}
      
      .carousel-caption{left: 0%; right: 0%; position: relative;}
      
      h1{font-size: 30px;}
      
      .carousel-caption p{font-size: 12px; line-height: 20px;}
      
      .nav{float: right; text-align: right;}
      
      img.home{border: none; padding: 0px; margin: 0px;}    
    
    }

/* ----------- Galaxy S4 ----------- */


/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {
      
      ul.subnav li{float: none;}
      
      img{width: 100%; max-width: 100%; height: auto;}
      
      header.header{height: auto;}
      
       .navbar, .navbar-brand{top: 0px;}
      
      .navbar-brand{float: left;}
      
      .navbar-toggle .icon-bar{background-color: #222222;}
      
      .navbar-brand img{max-width: 100px;}
      
      .nav > li > a{font-size: 14px;}
      
      .carousel-caption{left: 0%; right: 0%; position: relative;}
      
      h1{font-size: 30px;}
      
      .carousel-caption p{font-size: 12px; line-height: 20px;}
      
      .nav{float: right; text-align: right;}
      
      img.home{border: none; padding: 0px; margin: 0px;}

}

/* ----------- Nokia N9 ----------- */


/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 1) 
  and (orientation: portrait) {
      
      ul.subnav li{float: none;}
      
      img{width: 100%; max-width: 100%; height: auto;}
      
      header.header{height: auto;}
      
       .navbar, .navbar-brand{top: 0px;}
      
      .navbar-brand{float: left;}
      
      .navbar-toggle .icon-bar{background-color: #222222;}
      
      .navbar-brand img{max-width: 100px;}
      
      .nav > li > a{font-size: 14px;}
      
      .carousel-caption{left: 0%; right: 0%; position: relative;}
      
      h1{font-size: 30px;}
      
      .carousel-caption p{font-size: 12px; line-height: 20px;}
      
      .nav{float: right; text-align: right;}
      
      img.home{border: none; padding: 0px; margin: 0px;}

}

/* ----------- Nexus 5 ----------- */

@media screen 
    and (device-width: 360px) 
    and (device-height: 592px) 
    and (-webkit-device-pixel-ratio: 3) {
        
        ul.subnav li{float: none;}
        
        img{width: 100%; max-width: 100%; height: auto;}
    
      header.header{height: auto;}
      
       .navbar, .navbar-brand{top: 0px;}
      
      .navbar-brand{float: left;}
      
      .navbar-toggle .icon-bar{background-color: #222222;}
      
      .navbar-brand img{max-width: 100px;}
      
      .nav > li > a{font-size: 14px;}
      
      .carousel-caption{left: 0%; right: 0%; position: relative;}
      
      h1{font-size: 30px;}
      
      .carousel-caption p{font-size: 12px; line-height: 20px;}
      
      .nav{float: right; text-align: right;}
      
      img.home{border: none; padding: 0px; margin: 0px;}
    
    }

/* Android(Samsung Galaxy) in portrait 380 X 685 ----------- */
@media only screen
and (min-width: 375px)
and (max-width: 385px){

        ul.subnav li{float: none;}
        
        img{width: 100%; max-width: 100%; height: auto;}
    
      header.header{height: auto;}
      
       .navbar, .navbar-brand{top: 0px;}
      
      .navbar-brand{float: left;}
      
      .navbar-toggle .icon-bar{background-color: #222222;}
      
      .navbar-brand img{max-width: 100px;}
      
      .nav > li > a{font-size: 14px;}
      
      .carousel-caption{left: 0%; right: 0%; position: relative;}
      
      h1{font-size: 30px;}
      
      .carousel-caption p{font-size: 12px; line-height: 20px;}
      
      .nav{float: right; text-align: right;}
      
      img.home{border: none; padding: 0px; margin: 0px;}
    
}

/* ----------- Nexus 7 ----------- */

@media screen 
    and (device-width: 601px) 
    and (device-height: 906px) 
    and (-webkit-min-device-pixel-ratio: 1.331) 
    and (-webkit-max-device-pixel-ratio: 1.332) {
        
        ul.subnav li{float: none;}
        
        img{width: 100%; max-width: 100%; height: auto;}
    
      header.header{height: auto;}
      
       .navbar, .navbar-brand{top: 0px;}
      
      .navbar-brand{float: left;}
      
      .navbar-toggle .icon-bar{background-color: #222222;}
      
      .navbar-brand img{max-width: 100px;}
      
      .nav > li > a{font-size: 14px;}
      
      .carousel-caption{left: 0%; right: 0%; position: relative;}
      
      h1{font-size: 30px;}
      
      .carousel-caption p{font-size: 12px; line-height: 20px;}
      
      .nav{float: right; text-align: right;}
      
      img.home{border: none; padding: 0px; margin: 0px;}
    
    }


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
    
    .navbar{position: absolute; width: 100%;}
    
}