/* ==========================================================================
   General styles
   ========================================================================== */

body{
    font: 300 15px/24px 'Roboto', sans-serif;
    color: #282828;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}


h1,
h2,
h3,
h4{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

img{
    max-width: 100%;
    height: auto;
}

a:link,
a:visited{
    text-decoration: none;
}

.section-contents{
    padding: 30px 0;
}


/*************************************************************
 Header
**************************************************************/
a.logo{
    display: inline-block;
    width: 250px;
}

.navbar{
    padding: 0;
    background: #f0e4b6;
    background: -webkit-linear-gradient(left, #f7f0de, #f0e4b6); /* Safari 5.1-6.0 */
    background: -o-linear-gradient(right, #f7f0de, #f0e4b6); /* For Opera 11.6-12.0 */
    background: -moz-linear-gradient(right, #f7f0de, #f0e4b6); /* For Firefox 3.6-15 */
    background: linear-gradient(to right, #f7f0de, #f0e4b6); /* Standard syntax */
    margin-bottom: 0;
    border-radius: 0;
   
}

.nav > li > a{
    font-size: 16px;
    font-weight: 300;
    color: #464646;
    text-transform: uppercase;
    padding: 8px 15px; 
}

.nav > li > a:hover,
.nav > li > a.current,
.nav > li > a:focus {
    background-color: transparent;
    color: #f1a922;
}


.navbar-toggle .icon-bar{
    background: #f1a922;
}

.navbar-toggle{
    padding: 0px;
    border: none;
    top: 8px;
}


li.book-btn{
    padding-top: 5px;
    margin-left: 10px;
}

li.book-btn a{
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    background: #f1a922;
    padding: 10px 14px;
    cursor: pointer;    
    font-weight: 300;
}

li.book-btn a:hover{
    background: #e5a121;
}



/*************************************************************
 Home Page
**************************************************************/

.section-banner h2{
    font-weight: 100;
    margin: 30px auto;
}

.section-banner h1{
    text-transform: uppercase;
    color: #f1a922;
    margin-bottom: 25px;
}
.section-banner img{
    display: inline-block;
}


/*************************************************************
 Bio-page
**************************************************************/



/*************************************************************
 Services-page
**************************************************************/
.services-text  h2{
   text-transform: uppercase;
   font-weight: 100;
}

.services-text strong{
   text-transform: uppercase;
   display: block;
   margin-top: 30px;
}

/*************************************************************
 Contact-page
**************************************************************/
.contact-text h2{
    font-weight: 100;
}

.contact-text strong{
    display: inline-block;
}


/*************************************************************
 Responsive styles
**************************************************************/
@media screen and (max-width: 767px){
    .nav{
        padding-bottom: 15px;
    }
    li.book-btn{
        padding-top: 15px;
    }
    
}


@media screen and (min-width: 768px){
    body{
        font-size: 18px;
        line-height: 30px;       
    }
    .section-contents{
        padding: 50px 0;
    }   
  
    .nav{
        margin-top: 19px;
    }
   
  
   .section-banner h1{
        margin-top: 0;
        font-size: 60px;
    }
    
    img.home-img1,
    img.home-img2{
        display: inline-block;
    }
    img.home-img1{
        float: left;
        width: 69.5%;
    }
    img.home-img2{
        width: 29.5%;
        float: right;
    }

    .section-bio p:first-child{
        padding: 50px 0 30px;
    }

    .services-text{
        padding: 30px 50px;
    }

    .contact-text{
        padding: 100px;
    }

}
@media screen and (min-width: 768px) and (max-width: 991px){
    .navbar .container{
        width: 100%;
    }
    .nav{
        margin-top: 4px;
    }

    .nav > li > a{
        font-size: 14px;
    }
}


@media screen and (min-width: 991px){
    a.logo{
        width: 400px;
    }
    .contact-text{
        padding: 100px 200px;
    }
}