/*
Theme Name:   Kalsi Davids
Theme URI:    https://www.liquidthought.co.za
Description:  Theme for Kalsi Davids
Author:  Liquid Thought
Author URI:  https://www.liquidthought.co.za
Version:  1.0.0
Text Domain:  kalsi-davids
*/

:root {
    --ivory: #FCFAF5;
    --charcoal: #222222;
    --sage: #989B8A;
    --bone: #EBE6E1;
    --charcoal-20: rgba(34, 34, 34, 0.2);
    --charcoal-40: rgba(34, 34, 34, 0.4);
    --error: #D10606;
}

*,a,div,ul,li{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
article,aside,details,figcaption,figure,footer,header,nav,section,summary{display:block}
img {max-width:100%;height:auto;display:block;}

html, body {margin:0px;padding:0px;height:100%;font-size:20px;line-height:1.6em;}

body {color:var(--charcoal);background:var(--ivory);-webkit-font-smoothing:antialiased;font-smoothing:antialiased;font-family: neue-haas-grotesk-display, sans-serif;font-weight:500;font-size: 16px;}

input {font-family: neue-haas-grotesk-display, sans-serif;font-weight:500;font-size: 16px;-webkit-appearance:none;outline:none;}

h1, h2, h3, h4, h5, h6 {margin:0px;}
p {line-height:1.75em;letter-spacing:0.32px;margin:0px;}

h2 {font-size:48px;line-height:1.33em;letter-spacing: 0.96px;font-weight:500;}
h3, h1 {font-size:40px;line-height:1.33em;letter-spacing: 0.8px;font-weight:500;}
h4 {font-size:32px;line-height:1.33em;letter-spacing: 0.64px;font-weight:500;}
h5 {font-size:28px;line-height:1.33em;letter-spacing: 0.48px;font-weight:500;}
h6 {font-size:24px;line-height:1.5em;letter-spacing: 0.48px;font-weight:500;}


@font-face {
  font-family: 'kalsi-davids';
  src: url('fonts/icons/kalsi-davids.eot?48719702');
  src: url('fonts/icons/kalsi-davids.eot?48719702#iefix') format('embedded-opentype'),
       url('fonts/icons/kalsi-davids.woff2?48719702') format('woff2'),
       url('fonts/icons/kalsi-davids.woff?48719702') format('woff'),
       url('fonts/icons/kalsi-davids.ttf?48719702') format('truetype'),
       url('fonts/icons/kalsi-davids.svg?48719702#stachion-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icons, .social a {font-family: "kalsi-davids";font-style: normal;font-weight: normal;speak: never;}


/* General ------------------------------------ */
    

.main-width {padding:0px 100px;}
.title {display:flex;justify-content: space-between;font-size:11px;letter-spacing:1.76px;padding:0px 100px;text-transform: uppercase;}
.button {display:inline-flex;height:40px;padding:0px 30px;justify-content: center;align-items: center;font-size:12px;text-decoration:none;transition:.3s linear;text-transform: uppercase;letter-spacing: 1.44px;line-height:1em;backround:none;border-radius:none;border-radius:0px;}
.button.button-primary {border:1px solid var(--charcoal);color:var(--charcoal);}
.button.button-primary:hover {border:1px solid var(--sage);background:var(--sage);color:white;}
.button.button-secondary {border:1px solid var(--charcoal);background:var(--charcoal);color:white;}
.button.button-secondary:hover {border:1px solid var(--sage);background:var(--sage);color:white;}
.text-right {text-align:right;}    


@media screen and (max-width:1024px){
   .title {padding:0px 20px;}
}
 
@media screen and (max-width:768px){
    .main-width {padding:0px 20px;}
    h2 {font-size: 34px;line-height: 1.17em;letter-spacing: 0.34px;}
    h3, h1 {font-size: 30px;line-height: 1.33em;letter-spacing: 0.6px;}
    h4 {font-size: 26px;line-height: 1.30em;letter-spacing: 0.52px;}
    h5 {font-size: 22px;line-height: 1.45em;letter-spacing: 0.44px;}
    h6 {font-size:24px;line-height:1.5em;letter-spacing: 0.48px;font-weight:500;}  
}    
    
    
/* Header ------------------------------------- */    
body.noscroll {position: fixed;overflow-y: scroll;width: 100%;}
body.hidescroll {overflow:hidden;padding-left:15px;}   
header {padding:20px;display:flex;justify-content: space-between;position:fixed;width:100%;z-index:20;top: 0;left:0;} 
header>div {position:relative;z-index:50;}  
header img {width:80px;}    
header .hamburger {width:32px;height:32px;position:relative;display:block;} 
header .hamburger:before {content:"";width:100%;height:1px;background:var(--charcoal);position:absolute;top:10px;left:0px;transition:all .3s ease-out;}
header .hamburger:after {content:"";width:100%;height:1px;background:var(--charcoal);position:absolute;top:20px;left:0px;transition:all .3s ease-out;}
header .hamburger:hover:before {background:var(--sage);}
header .hamburger:hover:after {background:var(--sage);}

header .nav-holder {position:fixed;left:0;top:0;width:100%;height:100vh;height: calc(100vh - env(safe-area-inset-bottom));height: calc(100vh - constant(safe-area-inset-bottom));background:var(--sage);z-index:49;display:flex;justify-content: center;align-items: center;opacity:0;pointer-events: none;transition:.3s linear .5s;}    
header .nav {margin:0px;padding:0px;list-style:none;text-align:center;}   
header .nav a {color:white;font-size:40px;line-height:1em;letter-spacing:0.8px;margin:30px auto;display:inline-block;text-decoration:none;position:relative;}
header .nav a:after {content:"";position:absolute;top:calc(100% + 5px);left:0;width:100%;height:1px;background:white;opacity:0;transition:.2s linear;}  
header .nav a:hover:after {transform:translateY(0px);opacity:1;}
header.open .hamburger:before {background:white;top:50%;left:50%;transform-origin:center center;transform:translate(-50%,-50%) rotate(45deg);transition:.2s linear .1s;}
header.open .hamburger:after {background:white;top:50%;left:50%;transform-origin:center center;transform:translate(-50%,-50%) rotate(135deg);transition:.2s linear .1s;}
header.open .hamburger:hover:before {background:black;}
header.open .hamburger:hover:after {background:black;}

header.open .nav-holder {pointer-events:all;opacity:1;transition:all .3s ease-out;}
header .nav {transform:translateY(50px);opacity:0;transition:all .3s ease-out;} 
header.open .nav {transform:translateY(0px);opacity:1;transition:all .3s ease-out .3s;} 
    
    
@media screen and (max-width:768px){
    header {padding:8px;align-items: center;}
    header img {width: 48px;}
    header .nav a {font-size:30px;margin:25px;}
}    

/* Intro -------------------------------------- */
    
.section-intro {/*padding:160px 0 154px 0;*/padding:280px 0 154px 0;text-align:center;} 
.section-intro h1 {margin-top:44px;} 
.section-intro img {margin:0px auto;}

@media screen and (max-width:768px){
.section-intro h1 {margin-top: 24px;}
.section-intro {padding: 150px 0 64px 0;} 
.section-intro .main-width {padding:0px 100px;} 
}    
  
@media screen and (max-width:480px){
.section-intro .main-width {padding:0px 20px;}    
}    
  

    
/* Full width image --------------------------- */
    
.section-full-width {padding:0px 20px;position:relative;}
.img-height-800 img {height:800px;width:100%;object-fit: cover;}
.section-full-width img.arrow {position:absolute;width:20px;top:-30px;right:20px;height: auto;}
    
@media screen and (max-width:1440px){
   .img-height-800 img {height:auto;} 
}

@media screen and (max-width:768px){
    .section-full-width img.arrow {width:17px;top:-27px;}
}
    
/* About us --------------------------- */
.section-about {margin:285px 0 0 0;}
.about-intro {padding:55px 0 120px 0;text-align:center;}   
.about-intro h2 {max-width:860px;margin:0px auto;}   
.about-intro p {max-width:610px;margin:0px auto;margin-top:50px;}    

.about-images {display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: auto;column-gap: 80px;}
.about-images>div:nth-of-type(1) {grid-column: 1;grid-row: 1 / span 2;}
.about-images>div:nth-of-type(1) img {height:850px;display:block;object-fit: cover;width:100%;}
.about-images>div:nth-of-type(2) {grid-column: 2;grid-row: 1;align-self: center;height: 455px;display: flex;}
.about-images>div:nth-of-type(2) * {margin:auto 0;max-width:370px;}
.about-images>div:nth-of-type(3) {grid-column: 2;grid-row: 2;align-self: end;}
.about-images>div:nth-of-type(3) img {height:394px;display:block;object-fit: cover;width:100%;}

.about-outro h2 {margin:106px auto 0 auto;max-width:816px;text-align:center;}   
  
@media screen and (max-width:980px){
.section-about {margin: 95px 0 0 0;} 
.about-intro {padding: 43px 20px 25px 20px;} 
.about-intro p {text-align:left;margin-top: 31px;}  
    
.about-images {column-gap: 20px;}    
.about-images>div:nth-of-type(1) {grid-column: 1 / span 1;grid-row: 1}
.about-images>div:nth-of-type(2) {grid-column: 1 / span 2;grid-row: 2;height: auto;padding: 30px 0px;text-align: center;margin: auto;}
.about-images>div:nth-of-type(3) {grid-column: 2 / span 1;grid-row: 1;height: auto;}
    
.about-images>div:nth-of-type(1) img {height: auto;} 
.about-images>div:nth-of-type(3) img {height: auto;} 
.about-outro h2 {margin: 0px auto 0 auto;}    
}      

@media screen and (max-width:480px){
.about-intro {padding: 43px 0px 25px 0px;}
}
    
/* Featured work --------------------- */
.section-work {margin:285px 0 0 0;}
.section-work img {height:620px;width:100%;object-fit: cover;margin-top:70px;}
    
.section-project {padding:110px 0px 120px 0px;display:grid;grid-template-columns: 1fr 1fr;grid-template-rows: auto;column-gap: 50px;grid-row-gap: 115px;}
.section-project img {margin:0px;height:397px;width:100%;}
    
.project-detail ul {max-width:400px;margin:0px auto;list-style:none;padding:0px;font-size: 10px;line-height: 1em;letter-spacing: 1.2px;text-transform: uppercase;}
.project-detail ul li {border-bottom:1px solid var(--charcoal-20);display:flex;justify-content: space-between;padding:18px 0;}   
.project-detail ul li>div:nth-of-type(1){color:var(--charcoal-40);}    
.project-overview * {max-width:400px;margin:0px auto;}
.project-overview p {margin-top:10px;}
    
.project-button {text-align:center;}
    

@media screen and (max-width:1440px){
    .section-work img {height: auto;width: 100%;}   
}      
    
@media screen and (max-width:768px){
.section-work {margin: 101px 0 0 0;} 
.section-work img {margin-top: 40px;}  
.section-project {padding: 30px 0px 30px 0px;grid-row-gap: 30px;column-gap: 20px;}
.project-detail, .project-overview {grid-column:1 / span 2;}   
.section-project img {margin:auto;}    
.section-project .project-detail ul, .section-project .project-overview * {max-width:100%;padding:0px 24px;} 
.section-project .project-detail ul, .section-project .project-overview span {padding:0px;}   
}      

@media screen and (max-width:480px){
.project-button {text-align:left;}
.section-project .project-detail ul, .section-project .project-overview * {padding:0px;}     
}      
   
.modal {position:fixed;left:0;top:0;background:var(--ivory);width:100%;height:100vh;z-index:60;opacity:0;pointer-events: none;transition:all .3s linear;overflow-y: scroll;}
.modal.open {opacity:1;pointer-events: all;transition:all .3s linear;}
.modal .modal-header {padding:20px 20px 0 20px;display:flex;justify-content: space-between;position:absolute;left:0px;top:0px;width:100%;} 
.modal .modal-header>div {position:relative;z-index:50;}  
.modal .modal-header img {width:80px;}    
.modal .modal-header .hamburger {width:32px;height:32px;position:relative;display:block;} 
.modal .modal-header .hamburger:before {content:"";width:100%;height:1px;background:var(--charcoal);position:absolute;top:10px;left:0px;transition:all .3s ease-out .3s;}
.modal .modal-header .hamburger:after {content:"";width:100%;height:1px;background:var(--charcoal);position:absolute;top:20px;left:0px;transition:all .3s ease-out .3s;}
.modal .modal-header .hamburger:before {background:var(--charcoal);top:50%;left:50%;transform-origin:center center;transform:translate(-50%,-50%) rotate(45deg);transition:.2s linear .1s;}
.modal .modal-header .hamburger:after {background:var(--charcoal);top:50%;left:50%;transform-origin:center center;transform:translate(-50%,-50%) rotate(135deg);transition:.2s linear .1s;} 
    
.work-card-holder {padding:100px 200px 100px 100px;} 
.work-card {display:grid;grid-template-columns: 600px 1fr;gap:125px;}    
.work-card>div {min-height:600px;}    
.work-card .featured-image img {width:100%;height:100%;position:relative;object-fit: cover;}    
    
.work-card .featured-detail .section-project {display:block;padding:0;}    
.work-card .featured-detail .section-project .project-overview *, .work-card .featured-detail .section-project .project-detail ul {max-width:none;}
.work-card .featured-detail .slide {color:var(--charcoal-40);padding-top: 16px;display: block;}   
.work-card .featured-detail .section-project .project-overview h6 {margin: 13px 0 17px 0;}    
.work-card .featured-detail .section-project .project-detail ul {margin-top:25px;}
   
.work-individuals {display:none;}
.work-individuals.open {display:block;}

.featured-thumbs {display:grid;grid-template-columns: 3fr 3fr 3fr;gap:20px;margin-top:50px;}
.featured-thumbs a {display:block;padding-top:10px;border-top:1px solid rgba(255,255,255,0);position:relative;} 
.featured-thumbs a:nth-last-of-type(1) {padding-right:0px;}
.featured-thumbs a.highlight:before {content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--charcoal);} 
.featured-thumbs a img {display:block;}    
.featured-thumbs .slick-arrow {display:none !important;} 
    
.featured-detail .nav {display:flex;justify-content: space-between;}
.featured-detail .nav a {color:var(--charcoal);transition:.3s linear;text-underline-offset: 6px;text-decoration: underline;text-decoration-color:rgba(255,255,255,0);} 
.featured-detail .nav a:hover {color:var(--sage);text-underline-offset: 6px;text-decoration: underline;} 
.slick-dots li {width:auto;margin:0;}
.slick-dots li button {width:auto;} 
.slick-dots li button:before {display:none;} 
.slick-dots li button:after {content:"";display:block;width: 32px;height:1px;background:var(--charcoal-20);}  
.slick-dots li.slick-active button:after {background:var(--charcoal);}    
    

@media screen and (max-width:1440px){
.work-card {display:grid;grid-template-columns: 1.5fr 1fr;}  
}

@media screen and (max-width:1200px){
    .work-card-holder {padding:150px 50px;} 
     .work-card { grid-template-columns: 1fr 1fr;gap: 50px;}
    .work-card .featured-image img {height:auto;}
}      
      
@media screen and (max-width:768px){
    .modal .modal-header {padding:8px;align-items: center;}
    .modal .modal-header img {width: 48px;}
    .work-card-holder {padding:80px 20px;overflow-x:hidden;} 
    .work-card .featured-image  {display:none;}
    .work-card {grid-template-columns: 1fr;gap:0px;}
    .work-card .featured-detail {display:grid;gap:0px;grid-template-columns:1fr 1fr;}
    .work-card .featured-detail .nav {grid-column: 2 / span 1;grid-row: 1;text-align: right;justify-content: flex-end;}
    .work-card .featured-detail .nav a {margin-left:20px;font-size:16px;}
    .work-card .featured-detail .slide {grid-column:1 / span 1;grid-row:1;padding:0;}
    .work-card .featured-detail .project-overview {grid-column:2 / span 2;order:3;}
    .work-card .project-detail {grid-column:2 / span 2;order:3;}
    .work-card .featured-detail .section-project {grid-column:1 / span 2;order:4;display: flex;flex-direction: column-reverse;}
    .work-card .featured-detail .featured-thumbs {grid-column:1 / span 2;order:3;margin-top: 10px;display:block;/*margin-right: -20px;*/}
    .work-card .featured-thumbs a {padding-top:0px;border:none;padding-right:5px;}
    .work-card .featured-detail .section-project .project-overview h6 {margin-top:8px;}
    .work-card .featured-thumbs a.highlight:before {display:none;} 
    .work-card .slick-list {overflow:visible;}
    .work-card .slick-dots li {width:auto;margin:0;}
    .work-card .slick-dots li button {width:auto;}
}      
    
@media screen and (min-width:768px){
    .slick-dotted.slick-slider {margin-bottom: 0}
}    

@media screen and (min-width:480px){
.work-card .featured-detail .section-project .project-detail ul {margin-top: 5px;}
}
    
/* Artisans --------------------- */
.section-artisans {margin:290px 0 0 0;}
.section-artisans img {height:620px;width:100%;object-fit: cover;margin-top:70px;}
    
.artisan-people {margin-top:120px;padding:0px 30px;display:grid;grid-template-columns: repeat(3, 1fr);gap:120px;}  
.artisan-people h3  {text-align:center;line-height:1.16em;}
.artisan-people span {text-align:center;display:block;font-size:10px;letter-spacing: 1.2px;margin-top:15px;margin-bottom:40px;line-height:1em;text-transform:uppercase;}
    
 @media screen and (max-width:1440px){
.section-artisans img {height:auto;}  
}    
 @media screen and (max-width:1200px){
   .artisan-people {gap: 80px;}  
}
@media screen and (max-width:1024px){
   .artisan-people {    grid-template-columns: repeat(1, 1fr);}  
}    
 
@media screen and (max-width:1380px){
.artisan-people {gap:unset;justify-content: space-between;grid-template-columns: repeat(3, 292px);}   
.artisan-people span {padding: 0px 30px;}    
}  

@media screen and (max-width:1210px){
   .artisan-people {grid-template-columns: repeat(1, 1fr);gap: 80px;}  
}  


@media screen and (max-width:768px){
.section-artisans {margin: 98px 0 0 0;} 
.section-artisans img {margin-top: 40px;}
.artisan-people {margin-top: 33px;gap: 36px;padding: 0px 20px;}  
.artisan-people span {margin-bottom: 10px;}    
}    
 
@media screen and (max-width:480px){
.artisan-people p {font-size:14px;}
}
    
/* Quote  --------------------- */  
.section-quote {padding:0px 20px;margin-top:115px;}    
.section-quote>div {background:var(--bone);padding:120px 20px;text-align:center;}    
.section-quote span {display:block;font-size:10px;letter-spacing: 1.2px;margin-top:10px;margin-bottom:40px;line-height:1em;text-transform:uppercase;}    
.section-quote h4 {max-width:610px;margin:0px auto;}    

@media screen and (max-width:768px){    
    .section-quote {margin-top: 95px;} 
    .section-quote>div {padding: 40px 20px;}
}
    
/* Contact --------------------- */
.section-contact {margin:290px 0 0 0;}  
.section-contact h2 {text-align: center;margin-top: 69px;}    
.contact-columns {display:grid;grid-template-columns: 1fr 1fr;gap:126px;margin-top:120px;padding:0px 100px;} 
.contact-columns>div {}  
.contact-columns ul {margin:0px;padding:0px;list-style: none;}
.contact-columns ul li {padding-bottom:20px;}
.contact-columns ul li:nth-last-of-type(2) {padding-bottom:25px;}
.contact-columns ul a {color: var(--charcoal);font-size: 24px;line-height: 1.5em;letter-spacing: 0.48px;transition:.3s linear;text-underline-offset: 6px;text-decoration: underline;text-decoration-color:rgba(255,255,255,0);}
.contact-columns ul a:hover {color: var(--sage);text-decoration: underline;}
.social {display:flex;padding-top:10px;}    
.social a {margin-right:40px;}    
.social a.facebook:before {content:'\e800';}    
.social a.instagram:before {content:'\e801';}    
.contact-columns ul .social a:hover {text-decoration-color:rgba(255,255,255,0);}

.contact-form .row-holder {position:relative;padding-top:10px;} 
.contact-form .input-general {position:relative;font-family: neue-haas-grotesk-display;color: var(--charcoal);font-size: 16px;font-weight: 500;
line-height: 1em;letter-spacing: 0.32px;display:flex;height:54px;align-items: center;width:100%;border:none;-webkit-appearance:none;border-bottom:1px solid var(--charcoal-20);background:none;outline:none;border-radius:none;margin-bottom:55px;padding:0px;transition:.2s linear;} 
.contact-form .input-general:focus {border-color:var(--charcoal);}
.contact-form textarea.input-general {padding-top:12px;height:110px;}  
.contact-form .input-general.error {border-color:var(--error);}    
.contact-form .row-holder label {font-size: 16px;font-weight: 500;letter-spacing: 0.32px;position:absolute;transition:.2s linear;line-height:1em;top:30px;left:0px;pointer-events: none;} 
.contact-form .row-holder label {}   
.contact-form .row-holder .input-general:focus ~ label, 
.contact-form .row-holder .input-general.has-content ~ label {text-transform:uppercase;font-size:10px;letter-spacing: 1.2px;top:0px;}
input.button.button-secondary {adding-top:2px;cursor:pointer;font-weight:600;}
.contact-form .row-holder p {position: absolute;top: calc(100% + 9px);color: var(--error);font-size: 14px;line-height: 1em;letter-spacing: 0.28px;}

.loader {width: 40px;height: 40px;border: 1px solid var(--charcoal);border-bottom-color: transparent;border-radius: 50%;display: none;box-sizing: border-box;animation: rotation 1s linear infinite;}

@keyframes rotation {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
} 

.contact-form.processing .loader {display:inline-block;} 
.contact-form.processing .row-holder, .contact-form.done .row-holder {display:none;}
.contact-form .thank-you {display:none;}
.contact-form.done .thank-you {display:block;}
  

@media screen and (max-width:1200px){
   .contact-columns {padding:0px 20px;} 
}


@media screen and (max-width:980px){
   .contact-columns {grid-template-columns: 1fr;gap: 40px;margin-top: 40px;padding:0px 20px;} 
   .contact-columns>div:nth-of-type(1){text-align:center;}  
   .social {justify-content: center;} 
   .social a:nth-last-of-type(1) {margin-right:0;}  
}

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

.section-contact {margin: 95px 0 0 0;}
.section-contact h2 {margin-top: 42px;}
.contact-form .input-general {margin-bottom:40px;}
.contact-form .row-holder.text-right {padding:0px;}
.contact-columns>div:nth-of-type(1){text-align:left;}      
.social {justify-content: flex-start;}      
}      

@media screen and (max-width:768px){
.contact-columns {padding:0px;} 
}
    
/* Footer --------------------- */  
footer{padding:0px 20px 20px 20px;margin-top:300px;text-align:center;}
footer img {width:340px;margin:40px auto;max-width:80%;}
footer p {font-size:14px;line-height:1em;letter-spacing:0.28px;}   
footer>div {background:var(--bone);padding:111px 20px 117px 20px;text-align:center;}  
    
@media screen and (max-width:768px){
footer {margin-top: 100px;}  
footer>div {padding: 43px 20px 48px 20px;}    
}      
    
.grecaptcha-badge {opacity:0;pointer-events:none;}