/* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 736px) {


.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 15px;
}


        
        /*navbar custom espuna*/
.navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center; min-height: 60px; margin-top: 0px; 
    margin: auto; background: url("../img/espuna-logo-xs.svg") no-repeat center 5px ;
}
        
  
        
        
        .nav > li > a {
    position: relative;
    display: block;
    padding: 10px 35px;
}
        
   
        
body#homePage a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
 text-decoration: none; 
    background: none;
    white-space: nowrap;
    padding-bottom: 15px;
}
 
  .carousel-wrapper {
    position: relative; width: 320px; margin: 0 auto;
}  
        
        
#homePage #stage1 h2,
#homePage #stage3 h2,
#homePage #stage5 h2 {
    font-size: 36px;
    line-height: 50px;
    top: 294px;
}        
        
 .separador {margin: 0 auto; max-width: 320px; height: 100px; background-size: 80%;  background: url(../img/separador.svg) center center no-repeat}       
   
        
        .carousel-indicators li {
    display: none;
}
     
        
        #homePage #stage2, #homePage #stage4 {

    height: 500px;

}
        
        
   #homePage #stage6 {
height: 900px;

}
        

      #homePage #stage4 {
    padding-top: 20px;
}  
        
        #homePage #stage2 p, #homePage #stage4 p {
    color: #ede9cc;
    text-align: center;
    font-family: 'Droid Serif', serif;
    font-size: 22px;
    line-height: 26px;
    position: relative;
    top: 40px;
}
  
        
        
        
        
        #homePage #stage1 {
  
    height: 700px;
  
}
     .carousel-caption-btn {

    bottom: 0px;
  
}   
   
        
       #products, #hist, #contact {
    text-align: center;
    margin-top: 70px;
}
        
        #historia h2, #productos h2 {
    font-size: 28px;
    color: #ede9cc;
    text-align: center;
}
        
        
        
}





    
/* Smartphones (landscape) ----------- */
    @media only screen and (min-width : 415px) and (max-width : 736px) {
        .navbar .container {
    padding: 0 10px;
}
  
    }
/* Smartphones (portrait) ----------- */
    @media only screen and (max-width : 414px) {
        
    }
/* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.navbar .navbar-header {
    height: 90px;
}
 .navbar .container {
    padding: 0 60px;
}
.navbar-nav > li > a {
    padding-top: 45px;
    padding-bottom: 15px;
}        
        
      .navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    top: 20;
    text-align: center; min-height: 100px; margin-top: 20px; 
    margin: auto; background: url("../img/espuna-logo-md.svg") no-repeat center 30px ;
}  
    

          .carousel-wrapper {
    position: relative; width: 80%; margin: 0 auto;
} 

}
    
/* iPads (landscape) ----------- */
    @media only screen and (min-device-width : 750px) and (max-device-width : 1024px) and (orientation : landscape) {
  .navbar .container {
    padding: 0 120px;
      
}
        

    }
/* iPads (portrait) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
   

/* iPads (portrait) ----------- */
    @media only screen and (min-device-width : 1024px){
        
    
}















/* Responsive Styles */

header .btn-navbar {
    background: none repeat scroll 0 0 #464646;
    display: none;
    float: left;
    height: 50px;
    margin: 22px 0 0 20px;
    padding: 0 10px;
    width: 30px;
}

header .btn.btn-navbar:hover,
header .btn.btn-navbar:active {
    background: none repeat scroll 0 0 #464646;
}

header .btn-navbar .icon-bar {
    background: none repeat scroll 0 0 #b17c57;
    display: block;
    height: 5px;
    margin: 8px 0;
    width: 100%;
}
header ul .theTitle {
    padding: 60px 0 0;
    text-align: center;
}
header ul .theTitle img{
    width: 385px;
}
#page-error header ul li p,
#usPage header ul li p,
header ul li p{
    color: #262526;
    font-family: oswaldlight;
    font-size: 18px;
    line-height: 24px;
    padding: 0 20px;
}


@media screen and (max-width: 1380px) {
    .container,
    #contactPage .mainContainer .container{
        padding: 0;        
    }
    #searchPage .mainContainer .container,
    #recipePage .mainContainer .container,
    #recipeDetailPage .mainContainer .container,
    #productsPage .mainContainer .container,
    #productsDetailPage .mainContainer .container,
    #tagsPage .mainContainer .container{
        padding: 0 0 60px;
    }

    #recipeDetailPage .theBreadcrumb,
    /*#recipeDetailPage .theImg,*/
    #recipeDetailPage .recipeContainer,
    #recipeDetailPage .theTags{
        margin: 20px auto;
        width: 95%;
    }
    #recipeDetailPage .theBreadcrumb{
        margin: 70px auto 20px;
    }
    #productsDetailPage .relatedProds{
        width: 90%;
    }
}
@media screen and (max-width: 1200px) {
    #recipeDetailPage .recipeContainer h1{
        width: 80%;
    }

    #productsDetailPage .prodDetailBlock .theImg {
        height: auto;
        min-height: 560px;
        width: 49%;
    }
    #productsDetailPage .prodDetailBlock .theImg img {
        width: 80%;
    }
    #productsDetailPage .prodDetailBlock .theDesc {
        padding: 0 4% 0 0;
        width: 44%;
    }
    #recipePage .recipesContainer,
    #tagsPage .recipesContainer{
        text-align: center;
    }
    #page-error footer p, #usPage footer p, footer p, footer a{
        font-size: 10px;
    }

}
@media screen and (max-width: 980px) {
    header a.logo{
        margin: 0;
    }
    header a.logo img{
        width: 180px;
    }
    header .searchField input[type="search"],
    header .searchField input[type="search"]:focus{
        background-position: right bottom;
        font-size: 16px;
        width: 100px;
    }
    #searchPage .productsResults,
    #searchPage .recipesResults{
        text-align: center;
    }
    header ul li a{
        font-size: 18px;
        margin: 0 12px;
    }
    footer{
        height: auto;
    }
    footer .blockLeft,
    footer .blockRight{
        float: none;
        text-align: center;
    }
    #recipeDetailPage .theBreadcrumb{
        margin: 40px auto 10px;
    }
}
@media screen and (max-width: 768px) {
    body{
        padding: 0;
    }
    #productsDetailPage .relatedProds{
        width: 80%;
    }
}
@media screen and (max-width: 720px) {
    header ul li a {
        font-size: 18px;
        margin: 0 3px;
    }

}
@media screen and (max-width: 700px) {
    #recipePage .recipesContainer .recipeBlock.mallmannRecipe{
        width: 92%;
    }
}
@media screen and (max-width: 630px) {
    header .btn-navbar {
        display: block;
    }
    header a.logo{
        left: 0;
        margin: 0 auto;
        position: absolute;
        right: 0;
        text-align: center;
        width: 220px;
        z-index: 1;
    }
    header a.logo img{
        width: auto;
    }
    header .btn-navbar{
        background: none no-repeat scroll 0 0 #010101;
        border: medium none;
        border-radius: 0;
        box-shadow: none;
    }
    header .btn.btn-navbar:hover,
    header .btn.btn-navbar:active,
    header .btn.btn-navbar.open {
        background: none no-repeat scroll 0 0 #ebe0d2;
    }
    header ul{
        background: url("../../bundles/paladinifrontendtheme/img/bg-menuMobile.png") no-repeat scroll center bottom #f6ebdc;
        clear: both;
        height: 0;
        margin: 0;
        overflow: hidden;
        position: absolute;
        top: 70px;
        transition: height 500ms linear 0s;
        width: 100%;
    }
    header ul.open {
        height: 660px;
    }
    header ul li{
        /*border-bottom: 1px dotted white;*/
        display: block;
    }
    header ul li.theTitle{
        display: block;
    }
    header ul li a{
        display: block;
        font-size: 38px;
        line-height: 45px;
        text-indent: 16px;
    }
    header ul li p{
        display: block;
    }
    #recipeDetailPage .theBreadcrumb{
        margin: 60px auto 10px;
    }

}
@media screen and (max-width: 550px) {
  
}

@media screen and (max-width: 480px) {
    header {
        background: none no-repeat scroll 0 0 #010101;
        height: 60px;
    }
    header ul{
        top: 60px;
    }
    header a.logo{
        margin: 0 auto;
        width: 130px;
        z-index: 2;
    }
    header a.logo .desktop{
        display: none;
    }
    header a.logo .mobile{
        display: block;
    }
    header .btn-navbar{
        margin: 10px 0 0 20px;
    }
    #homePage .mainContainer .parallaxContainer{
        background: none no-repeat scroll 0 0 #000000;
    }
    header .searchField{
        height: 40px;
        margin: 10px 20px;
        text-align: center;
        position: relative;
        width: 40px;
    }
    header a.logo .mobile,
    header .searchField .mobile{
        display: block;
    }
    
    header ul .theTitle{
        padding: 20px 0 0;
    }
    .mainContainer,
    footer{
        top: 60px;
    }



    #homePage .mainContainer #theSlider .slideDesc{
        width: 310px;
    }
    #homePage .mainContainer #theSlider .slideDesc .title{
        font-size: 30px;
        line-height: 34px;
    }
    #homePage .mainContainer #theSlider .slideDesc .slideDescSeparator{
        margin: 6px auto;
    }
    #homePage .mainContainer #theSlider .slideDesc .desc{
        font-size: 16px;
        line-height: 16px;
    }

    #homePage #stage2 .leftBlock,
    #homePage #stage2 .rightBlock,
    #homePage #stage4 .leftBlock,
    #homePage #stage4 .rightBlock,
    #homePage #stage6 .leftBlock,
    #homePage #stage6 .rightBlock{
        height: 290px;
        width: 100%;
    }

    #homePage #stage3 h2, #homePage #stage5 h2{
        top: 110px;
    }

    #homePage #stage2 .rightBlock img,
    #homePage #stage6 .rightBlock img{
        height: 230px;
        margin: 30px auto;
        width: auto;
    }
    #homePage #stage3,
    #homePage #stage5{
        height: 420px;
    }
    #homePage #stage3 h2,
    #homePage #stage5 h2{
        font-size: 42px;
        line-height: 48px;
    }
    
}
@media screen and (max-width: 410px) {
   
    .navbar .container {padding: 0;}
}
@media screen and (max-width: 322px) {
    .navbar .container {padding: 0 ;}
    
    #homePage #stage2 h3{
        margin: 20px 0 10px;
    }

    #homePage .mainContainer #theSlider .slideDesc {
        width: 300px;
    }

    #page-error h1 {
        font-size: 36px;
        margin: 0 auto 30px;
    }

}