/* Reset */

body {margin-top: 40px;}
body {overflow-x:hidden;}

/* navigation bar */
.navbar-left {margin:0; padding: 2px 0px 0px 0px; border:0;}
.navbar-inverse {background: #9a9a9a; border: 0;}
.navbar-inverse .navbar-nav li a {color: #fff; font-size: 18px; }
.navbar-inverse .navbar-nav li a:hover {background: #900000;}
.navbar-inverse .navbar-nav li a:active {background-color: #fff;}
.active a {background-color:#4d4d4d !important;}
        
/* tab color */
.nav-tabs>li>a {background-color: #9a9a9a; border: 0px; color:#fff;}
.nav-tabs>li>a:hover {background-color: #900000; border: 0px; color:#fff}

/* active tab color */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
  color: #fff; background-color: #4d4d4d; border: 0px;}
        

/* home section */
#home {padding-top:50px; margin-top:-40px;} /* ensures srolling stops at right point  */
#home {padding-bottom:40px; margin-bottom:0px;}
#home h3 {padding:20px 100px 0px 100px; line-height:30px;}


/* about section */
#about h2 {font-size:30px; color:#5D5D5D; font-weight:700; padding:30px 0px 30px 0px; text-transform: uppercase;}
#about .col-sm-4 h4 {color:#5D5D5D;}
#about .bg-grey {background-color: #eee;}
#about .container-fluid{padding:0px 0px 70px 0px;}
#about .col-sm-4{padding-top:0px;}

/* carousel caption colours */
.carousel-caption {top: 150px; bottom: auto;}
.carousel-indicators li {background-color: #669966; width:30px; height:10px;}
.carousel-indicators .active {background-color: #900000;}
.carousel-indicators {bottom:-40px; }
.carousel-caption h4 {color: #fff;}

/* carousel fading */
.carousel-fade .carousel-inner .item {-webkit-transition-property: opacity; transition-property: opacity;}
.carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {opacity: 0;}
.carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {opacity: 1;}
.carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {left: 0; -webkit-transform: translate3d(0, 0, 0); 
 transform: translate3d(0, 0, 0);}
.carousel-fade .carousel-control {z-index: 2;}

/* carousel darkening  */
.overlay {position:absolute; width: 900px; height: 100%; background: #000; opacity: 0.3; transition: all 0.2s ease-out;}

/* slide animation  */
.slideanim {visibility:hidden;}
.slide {animation-name: slide; -webkit-animation-name: slide; animation-duration: 1s; -webkit-animation-duration: 1s; visibility: visible;}

@keyframes slide {0% {opacity: 0; transform: translateY(70%);} 
    100% {opacity: 1; transform: translateY(0%);}}
  
@-webkit-keyframes slide {0% {opacity: 0; -webkit-transform: translateY(70%);} 
    100% {opacity: 1; -webkit-transform: translateY(0%); }}


/* products  */
#products {padding-top:50px; margin-top:-40px;} /* ensures srolling stops at right point  */
#products .col-sm-4 h4 {color:#5D5D5D;}
#products .container-fluid {padding:0;}
#products h2 {font-size:30px; color:#5D5D5D; font-weight:700; padding:30px 0px 30px 0px; text-transform: uppercase;}

/* footer  */
footer {background-color: #2d2d2d; color: #f5f5f5; padding: 10px 0px 10px 0px;}
.glyphicon-chevron-up {font-size:1.8em;}
  
  
/* contact form  */
#contact {margin-top:80px;}
#contact-form {margin-top:30px;}
#contact label {color: #5D5D5D;}
.btn-send {font-weight: 300; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px;}


/* main recipe page  */
#recipesMain {padding-top:50px; margin-top:-40px;} /* ensures srolling stops at right point  */
#recipesMain .row{margin:20px 0px 10px 0px;}
#recipesMain p{font-size:16px; line-height:22px;}
#recipesMain h2{font-size:30px; color:#5D5D5D; font-weight:700; text-transform: uppercase;}
#recipesMain h3{font-size:20px; color:#5D5D5D; font-weight:700; }
#recipesMain #curryTypes{padding-top:15px;}

#recipesMain .tab-content img{border: 4px solid #e8e8e8; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);}


/* template for all recipes pages  */
#recipes {padding-top:80px; margin-top:-40px;} /* ensures srolling stops at right point  */
#recipes .row {margin:0px 0px 0px 0px;}   

#recipes #topRow h2{font-size:24px; padding-bottom:20px; margin:0px; color: #5D5D5D; font-weight:700;}
#recipes #topRow img{padding: 0px 10px 0px 20px; vertical-align:text-bottom;}
#recipes #topRow p{font-size:16px; background-color:#eeeeee;}

#recipes #topRow2 {padding:0px; margin:40px 0px 0px -10px;}
#recipes #topRow2 h3{font-size:20px; color:#5D5D5D; font-weight:600; padding:0px; margin:0px;}
#recipes #topRow2 p{background-color:#ffffff;}

#recipes #topRow3 {padding:0px; margin:20px 0px 0px -10px;}
#recipes #topRow3 img{padding: 0px 0px 0px 0px;}
#recipes #topRow3 p{margin:0px 0px 0px -10px; background-color:#ffffff;}

#recipes #ingrRow {margin:50px 0px 0px 0px;}   
#recipes #ingrRow ul li{font-size: 16px; padding: 10px 10px 0px 0px; color:#5D5D5D;}
#recipes #ingrRow #title{height:36px; background-color:#000000;}
#recipes #ingrRow #title h4 {font-size 20px; font-weight:700px; color:#ffffff; line-height:36px; text-align: center;}
#recipes #ingrRow #list{background-color:#eeeeee; padding:5px 0px 10px 0px;}
#recipes hr {width:95%;}

/* recipe carousel caption colours */
#welcomeCarouselTwo .carousel-indicators li {background-color: #669966; width:20px; height:10px;}
#welcomeCarouselTwo .carousel-indicators .active {background-color: #900000;}
#welcomeCarouselTwo .carousel-indicators {bottom:-20px;}

/* recipe carousel fading */
#welcomeCarouselTwo .carousel-fade .carousel-inner .item {-webkit-transition-property: opacity; transition-property: opacity;}
#welcomeCarouselTwo .carousel-fade .carousel-inner .item, #welcomeCarouselTwo .carousel-fade .carousel-inner .active.left,
#welcomeCarouselTwo .carousel-fade .carousel-inner .active.right {opacity: 0;}
#welcomeCarouselTwo .carousel-fade .carousel-inner .active, #welcomeCarouselTwo .carousel-fade .carousel-inner .next.left,
#welcomeCarouselTwo .carousel-fade .carousel-inner .prev.right {opacity: 1;}
#welcomeCarouselTwo .carousel-fade .carousel-inner .next, #welcomeCarouselTwo .carousel-fade .carousel-inner .prev, #welcomeCarouselTwo .carousel-fade .carousel-inner .active.left,
#welcomeCarouselTwo .carousel-fade .carousel-inner .active.right {left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
#welcomeCarouselTwo .carousel-fade .carousel-control {z-index: 2;}
#welcomeCarouselTwo #caption p{font-size:16px; padding-top:10px; text-align:center;}


hr {display: block; border-style: inset; border-color: 4d4d4d; border-width: 1px;}
#twitterRecipe {margin:300px 0px 0px 60px; text-align:right;}


@media screen and (max-width: 767px) {/* tablets and up */
   #home {padding-top:50px; margin-top:-40px;}
   #home.jumbotron{padding-top:80px; padding-bottom:20px; margin-bottom:0px;}
   #home h3{font-size:16px; padding: 20px 5px 0px 5px; line-height:20px; }
   
   #about h2 {font-size:20px; padding:10px 0px 10px 0px;}
   #about {padding-top:30px;}
   #about .container-fluid{padding:0px 0px 30px 0px;}
   #about .col-sm-4{padding-bottom:30px;} /* to leave a gap between the columns*/
     
   #products h2 {font-size:20px; padding:10px 0px 10px 0px;}
   #products .col-sm-4 {padding-bottom:30px;}
   #products .container-fluid {padding-bottom:30px;}
   #products .col-sm-12 img {margin-top:0px; width:15%;}
   #products .col-sm-12 h4 {margin-top:-20px;}

   #recipesMain {padding:65px 0px 0px 0px; margin-top:-40px;}
   #recipesMain .row{margin:0px; padding:0px;}
   #recipesMain #masala h2 {font-size:20px; padding:0px;}
   #recipesMain #masala h3 {font-size:18px; padding:0px; margin:0px;}
   #recipesMain #masala p {font-size:14px; padding:0px;}
   #recipesMain .tab-content {padding:20px 0px 20px 0px;}
   #recipesMain #imgBox{padding:10px 0px 10px 0px;}
   #recipesMain #masalaInfo{padding:10px 0px 0px 0px;}
   #recipesMain #curryTypes{padding-top:0px;}
   
   #recipesMain #thumbnails h2{font-size:20px; padding:0px 0px 0px 0px;}
   #recipesMain #thumbnails .col-sm-6 col-lg-3{margin:15px;}
   #recipesMain #imgBox2{padding:0px 0px 20px 0px;}
 
  
   footer {padding: 10px 0px 5px 0px;}
   #contact h1 {padding-top:20px; font-size: 18pt;}
   #contact .col-lg-8 {margin:0px 10px;}
   #contact {margin-top:50px;}
  
   #recipes {padding:65px 0px 0px 0px; margin-top:-40px;}
   #recipes .row {margin:0px 0px 0px 0px;}   
   #recipes #topRow h2 {font-size:18px; padding:10px 0px 5px 0px; font-weight:bold;}
   #recipes #topRow img {padding: 10px 0px 0px 0px; vertical-align:text-bottom;}
   #recipes #topRow p {font-size:11px; padding:0px; margin:0px;}
   #recipes #ingrRow {margin:20px 0px 0px 0px;} 
   #recipes .col-sm-4 {padding-bottom:20px;}
   #recipes #ingrRow #title{height:30px; background-color:#000000;}
   #recipes #ingrRow #title h4{font-size:16px; font-weight:normal;}
   #recipes #ingrRow ul li{font-size: 14px; padding: 5px 0px 0px 0px; margin:0px; color: #5D5D5D;}
   #recipes #topRow2 {padding:0px; margin:20px 0px 0px -15px;}
   #recipes #topRow2 h3{font-size:18px; color:#5D5D5D; font-weight:600; padding:0px; margin:0px;}
   #recipes #topRow2 p{font-size:14px; background-color:#ffffff;}

   #recipes #topRow3 {padding:0px; margin:10px 0px 0px -10px;}
   #recipes #topRow3 img {padding: 0px;}
   #recipes #topRow3 p {font-size:14px;}


}


/* increase size at which nav bar collapese to prevent overlap */
 @media (max-width: 990px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}