/*!
Theme Name: kealoha
Theme URI: http://rezelkealoha.com
Author: Wayfarer Design Studio
Author URI: http://wayfarerdesignstudio.com/
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kealoha

*/


/*///////// COLORS /////////*/


:root {

    --offwhite: #f5f5f5;
    --mint: #d9ded9;
    --green: #596b4d;
    --tan: #d9ccbf;
    --noir:  #1c2630;}






/*///////// FONTS + TYPOGRAPHY /////////*/

@font-face {
    font-family: freight;
    src: url(fonts/freight.otf);}
        
        
@font-face {
    font-family: freight-ital;
    src: url(fonts/freight-ital.otf);}
        
        
@font-face {
    font-family: holland;
    src: url(fonts/holland.otf);}
        
        
@font-face {
    font-family: sofia;
    src: url(fonts/sofia.otf);}






/*///////// BASIC STYLES /////////*/
        
body {
    font-size:16px;
    font-family: 'freight', sans-serif;
    color:var(--noir);}


h1 {
    font-family: 'sofia', sans-serif;}


h2 {
    font-family: 'sofia', sans-serif;
    line-height: 45px;}

h3 {
    font-family:'holland', serif;
    font-size:40px;}


h4 {
    font-family: 'sofia', sans-serif;
    text-transform:uppercase;
    letter-spacing: 2px;}


h5 {
    font-family: 'sofia', sans-serif;
    text-transform:uppercase;
    letter-spacing: 2px;
    font-size:16px;
    line-height: 25px;}


h6 {
    font-family:'freight-ital', serif;
    color:rgb(154, 154, 154);
    letter-spacing: .5px;
    line-height:24px;}


p {
    letter-spacing: .25px;
    line-height:35px;
    margin-bottom:30px;}

blockquote {
    font-family: 'sofia', sans-serif;
    font-size:26px;
    padding-left:30px;
    border-left:4px solid var(--mint);
    margin-top:50px;
    margin-bottom:50px;}

a {
    color:var(--noir);}


a:hover {
    color:var(--noir);
    text-decoration: none;
    opacity: .6!important;
    transition: all .5s ease-in-out 0s!important;
    -moz-transition: all .5s ease-in-out 0s!important;
    -webkit-transition: all .5s ease-in-out 0s!important;
    -o-transition: all .5s ease-in-out 0s!important;}


a>img:hover {
    opacity: .4!important;
    transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;}


a.btn {
    border-bottom:2px solid var(--green)!important;
    background-color:transparent;
    border-style:none;
    color:var(--green);
    font-family:'sofia', sans-serif;
    text-transform:uppercase;
    letter-spacing: 2px;
    font-size:12px;
    border-radius: 0px;
    padding-bottom:15px;}


a.btn:hover {
    opacity: .4!important;
    transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;}


p>a {
    border-bottom:2px solid var(--mint)!important;
    color:var(--noir);
    padding-bottom:3px;}

p>a:hover {
    color:var(--noir);
    opacity: .4!important;
    transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    text-decoration: none;}
        
        
        
button:focus {
outline:none!important;}



.banner {
    height:500px;
    width:100%;
    background-size:cover;
    background-position: center;}


img {
    width:100%;
    height:auto;}
        
img.img-svg {
    width:10px;
    height:auto;}

.row {
    margin-left:0px;
    margin-right:0px;
    padding:0px;}


.nav-search {
    font-family:'sofia', sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing: 2px;}


.form-inline>button {
    background-color:#f0f0f0;
    border:0px;
    border-radius:0px;
    font-family:'sofia', sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing: 2px;
    color:var(--noir);
    padding:15px;}


.form-inline>button:hover {
    background-color:#f0f0f0;
    transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    -webkit-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;}


.form-control {
    background-color:#fff;
    border:1px solid var(--mint);
    padding:15px;
    border-radius:0px;
    font-family:'sofia', sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing: 2px;}
        
.form-inline .form-control {
    width:100%;}


hr {
    width:50px;
    margin-top:20px;
    border-top:2px solid var(--mint);}











/*///////// TOP NAVIGATION /////////*/
        
.navbar {
    border-bottom:1px solid #e2e2e2;}
        
.navbar-brand {
    width:auto;}
        
.navbar-brand img {
    width:220px;
    height:auto;}
        
.bg-light {
    background-color:#fff!important;}

.navbar-toggler {
    border:0px;}

li.nav-item {
    margin-bottom:15px;}

.nav-item a {
    font-family:'sofia', sans-serif;
    color:var(--green)!important;
    font-size:18px;}

.dropdown-toggle::after {
    display:none;}

.dropdown-menu {
    border:0px;
    padding-left:0px;}

a.dropdown-item {
    padding-left:0px;
    font-family: 'freight-ital', serif;
    font-size:14px;}
        
.top-nav-social li {
    float:left;
    margin-right:20px;}
        
.top-nav-social {
    margin-bottom:50px!important;}
        
        
@media screen and (min-width:992px){
    
li.nav-active {
    border-bottom:2px solid var(--mint);}
    
    
nav {
    transition: top 0.2s ease-in-out;}
        
.nav-up {
  top: -80px; // same as header height. use variables in LESS/SASS
}

.nav-item a {
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:12px;
    text-align: center;}
    
    
.top-nav-social, .nav-search {
    float:left!important;}
    
.nav-search {
    padding-top: 28px;
    margin-right:30px;}
    
.navbar-nav {
    padding-top: 15px;}
    
.navbar {
    height:80px;}


}
        

        




        
/*////////////////////////////////////////*/        
/*/////////          HOME        /////////*/
/*////////////////////////////////////////*/  
        
        


/*///////// FEATURED POST BANNER /////////*/

.featured-post {
    padding:30px;}
        
        
        
@media screen and (min-width:768px){

.featured-post {
    padding:50px;
    height:600px;}

}
        

        






/*///////// RECENT POSTS /////////*/

.recent-posts {
    margin:40px auto;}

.fpost {
    margin-bottom:120px;}

.fpost-img {
    width:100%;
    height:110vw;
    background-size:cover;
    background-position: center;}

.fpost-text {
    margin-top:50px;}

.fpost-text h6 {
    margin-bottom:30px;}
        
        
@media screen and (min-width:768px){
    
.fpost {
    margin-bottom:80px;}   
    
.fpost-text {
    padding:50px;
    margin-top:0px;}
    
.fpost-img {
    height:70vw;}

.fpost-img, .fpost-text {
    float:left;}
    
.fpost:nth-child(2) .fpost-img {
    float:right!important;}

}
        
        
@media screen and (min-width:992px){
    
.fpost-text {
    padding:100px;}
    
}
        

        






/*///////// CATEGORY FEATURES /////////*/

.cat-features {
    margin-top:120px;
    text-align:center!important;
    margin-bottom:120px;}


.section-title {
    margin-bottom:50px;}

.cat-feat {
    margin-bottom:50px;}

.cat-feat-img {
    width:100%;
    height:110vw;
    background-size:cover;
    background-position: center;
    margin-bottom:40px;}

.cat-feat-text>h2 {
    font-size:16px;
    line-height: 23px;}
        
        
@media screen and (min-width:768px){

.cat-feat-img {
    height:35vw;}
    
}








/*///////// JOURNAL SUBCRIPTION /////////*/

.form-background {
    height:auto;
    width:100%;
    background-size:cover;
    background-position: center;
    padding:50px;}


.form-wrapper {
    background-color:#fff;
    text-align:center;
    padding:40px;}
        
        
@media screen and (min-width:992px){
    
.form-background {
    padding:100px;}
    
.form-wrapper {
    padding:80px;}
    
}








/*///////// HOME ABOUT SECTION /////////*/
        
.home-about {
    margin:40px auto;}
        
.ha-img {
    height:80vw;
    width:100%;
    background-size:cover;
    background-position: top;}
        
.ha-text {
    margin:50px auto;}
        
        
@media screen and (min-width:768px){

.home-about {
    margin:80px auto;}
    
.ha-img {
    height:45vw;}
    
.ha-text {
    padding:0px 50px;}

}
        
        
        
@media screen and (min-width:992px){
    
.ha-text {
    padding:0px 100px;}
    
}








/*///////// INSTA FEED /////////*/

.instagram {
    margin-top:50px;
    text-align: center;}

.instagram h3 {
    font-size:25px;}
        
.instagram h4 {
    font-size:16px;
    margin-top:20px;}

.instagram-feed {
    padding:0px;}

li.insta-item {
    float:left;
    height:33vw;
    width:33vw;
    background-size:cover;
    background-position: center;}
        
        
@media screen and (min-width:768px){
    
li.insta-item {
    height:16.6vw;
    width:16.6vw;}
    
}








/*///////// FOOTER NAV /////////*/

.footer-nav li a {
    font-family:'sofia', sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing: 2px;
    margin-bottom:20px;}

.footer-nav {
    padding-bottom:20px;
    border-bottom:1px solid var(--mint);}

.credits {
    padding-top:20px;}

figcaption {
    font-family:'sofia', sans-serif;
    font-size:10px!important;
    text-transform:uppercase;
    letter-spacing: 2px;}

footer {
    padding:50px 0px;}
        
        
        
        
@media screen and (min-width:992px){
    
.footer-nav li a {
    display: inline-block;
    float:left;
    margin-right:30px;}
    
.footer-nav {
    display: flex;
    padding-bottom:20px;}
    
li.back-top {
    float:right;}
    

}
        
        
        
        
        
        
        
        
        

        
        
        
/*////////////////////////////////////////*/        
/*/////////       PORTFOLIO      /////////*/
/*////////////////////////////////////////*/
        
img.header-logo {
    width:400px;
    height:auto;
    display: none;}
        
img.portfolio-header-tagline {
    margin-bottom:30px;}
        
        
.banner-links a {
    color:#fff;
    border-bottom:2px solid #fff!important;
    margin-bottom:20px;}
        
.cat-feat-text p {
    margin-top:20px;}
        
        
@media screen and (min-width:768px){
    
.portfolio-header {
    height: 500px;}
    
.header-logo-wrapper {
    margin-top:80px;}
    

    
.banner-links li {
    display: inline;}
    
.banner-links li:nth-child(1) { 
    margin-right:40px;}
 
}
        
        
        
@media screen and (min-width:992px){
    
.header-logo-wrapper {
    padding: 10px 0px;}
    
img.header-logo {
    padding: 30px 0px;
    display:block;}
    
}
        
        
        
        
        
        
        
        

        
        
        
/*////////////////////////////////////////*/        
/*/////////          POST        /////////*/
/*////////////////////////////////////////*/
        
.post-content-wrapper {
    margin:80px auto;}
        
.post-title {
    margin-bottom:50px;}
        
.post-title>h2 {
    margin-bottom:30px;}
        
.post-title>h5 {
    color:rgb(124, 124, 124);
    font-size:12px;}
        
p.p-intro {
    font-size:22px;
    font-family:'sofia', sans-serif;
    line-height:40px;}
        
.post-content img {
    margin:20px 0px;}
        
.recipe-img-l {
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height:50vw;
    width:100%;}
        
.recipe-img-p {
    margin-top:30px;
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height:120vw;
    width:100%;}
        
    
.ingredients, .method {
    padding:80px 0px;}
        
.ingredients {
    border-bottom:2px solid #ddd;}
        
        
.recipe-list li {
    margin-bottom:20px;}
        
.post-content h5 {
    margin-bottom:30px;}
        
        
@media screen and (min-width:768px){

.recipe-list {
    column-count: 2;}

}
        
        
@media screen and (min-width:992px){
    
.recipe-img-p {
    height:100vw;}

.recipe-wrapper {
    padding:100px;
    margin-bottom:0px;}

}
        

        
        
        
        
        
        
        
        

        
        
        
/*////////////////////////////////////////*/        
/*/////////          SHOP        /////////*/
/*////////////////////////////////////////*/  
        
        
.shop-wrapper {
    margin-top:150px;}
        
        
.shop-nav li {
    font-family:'sofia', sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing: 2px;
    margin-bottom:20px;}
        
        
@media screen and (min-width:768px){
    
.shop-products {
    margin-top:0px;
    padding-left:50px;}

.shop-img {
    height:60vw;}

}
        
        
@media screen and (min-width:992px){
    
.shop-wrapper {
    margin-top:80px;}
    
.shop-img {
    height:30vw;}

}
        
        
        
        

        
        
        
        
        
        
        
        

        
        
        
/*////////////////////////////////////////*/        
/*/////////          SHOP        /////////*/
/*////////////////////////////////////////*/ 
        
        

@media screen and (min-width:768px){
    
.archive-title {
    margin-bottom:80px;}

}