*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

/* Reset
-------------------------------------------------------------- */
html, body, br, hr, 
div, span, a,
object, iframe,
ul, ol, dl, li, dt, dd,
h1, h2, h3, h4, h5, h6,
p, blockquote, q, address,
small, big, cite, dfn, ins, del, 
i, em, b, strong, sup, sub, strike,
pre, code, samp, kbd, var, tt,
form, fieldset, legend, label,
input, textarea, option, .nobox{
	background: transparent;
	border: 0;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	margin-top: 0px;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 1.4em;
}
caption,
th,
td {
  text-align: center;
  font-weight: 400;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}
blockquote,
q {
  quotes: inherit;
}
a img {
  border: none;
}

/* Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  zoom: 1;
  margin: 0.8em 0;
} /* For IE 6/7 (trigger hasLayout) */



/*---- Colors -----
#b1212b  (red)
#5c4e3a (bg dark grey)
#ffedce (off white)
#000000 (Black)
*/


/* --- NEW GLOBAL HEADING LINE-HEIGHT --- */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.5; /* Adjust this value (e.g., 1.3 or 1.4) to increase spacing */
}
/* -------------------------------------- */


body{
    padding:0;
    margin:0 auto;
    /* --- Font confirmed as Source Sans Pro for all body text --- */
    font-family: 'Source Sans Pro', sans-serif;
    line-height: 1.5;
    color:#212120;
    background:#fff;
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    text-align: center;
    /* Setting font-weight to normal (400) if you had a global bold setting */
    font-weight: normal; 
    font-size:20px;
}
  
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
       }
}


/* -------  TEXT ------*/

p {line-height: 1.5; margin-bottom:5px;}

.centered{text-align: center;}

.quote{
    font-size:18px; 
    line-height: 1.5;
    color:#212120; 
    text-align:center;
    margin:3% 0;
}
a {
    color:#212120;
    text-decoration: none;
    border: 0px solid #212120;
    background: #fff;
    padding: 5px 12px 6px;
    /* Ensuring links are not overly bold */
    font-weight: normal; 
    transition: all .15s ease-in-out;
}
/* --- a:hover{
    color:#c28c3d;
    border: none
    background: transparent;
}-----------------*/

a.text {
    color:#212120;
    text-decoration: none;
    border-bottom: 1px solid #212120;
    background:#fff;
    padding: 2px;
transition: all .15s ease-in-out;
}
a.text:hover{
    color:#212120;
    border-bottom: 1px solid #212120;
    background:#fff;
    
}

a.button, input.button {
  background:#000;
    border:#000 1px solid;
    color: #fff;
    padding:5px 15px 7px;
    text-align:center;
    font-size: 18px;
    /* Ensuring buttons are not overly bold */
    font-weight: normal; 
}
a.button:hover, input.button:hover {
  background:#fff;
    border:#000 1px solid;
    color: #000;
    text-decoration: none;
    margin-left:2px;
}



.faded {opacity: .5;}
img {width:100%; margin:0 auto; padding:0;}





/* ------------------  STRUCTURE -----------------*/
.wrapper{
    width:100%; 
    margin:2% auto 2%;
}
.page{
    width:100%; 
    margin:0 auto 5%;
}

.intro{
    width:100%; 
    margin:2% auto 2%;
}
.intro-small{ 
    width:100%; 
    margin:4% auto 2%;
    margin:2% auto 2%;}

.heading{
    /*padding 0%*/
    text-align:center;
    margin:0 5% 1%; 
}
    .logo {padding-top:1px;}

.heading-small{height:100px;}
.page-heading{
    padding:3% 2%;
    text-align:center;
}

.hdr-work {margin-top:5%;}

.container{
    display:flex;
    flex-wrap:wrap;
    flex-direction: row;
    justify-content: center;
}

.text-block {
    width:85%; 
    margin:1.5% auto 1%;
    /* --- ADDED BORDERS ABOVE AND BELOW --- */
    border-top: 1px solid #9a9a82; 
    border-bottom: 1px solid #9a9a82;
    /* You might want to add some padding inside the block so text doesn't touch the lines */
    padding: 10px 0; 
}
 .text-block a:hover{
     color: #c28c3d !important;
     background: transparent;
    border: none;
    transition: color 0.3s ease; 
}

.image-block {
    display:flex;
    flex-wrap:wrap;
    flex-direction: row;
    justify-content: center;
    margin:2% auto 5%;
}
    .item{
        margin:5px;
        border:#f3f0eb 0px solid;
        background: #fff;

        -ms-flex: 30%; /* IE10 */
        flex: 30%;
        padding: 10px 20px;
        color:#9a9a82;
    }

    .item p{margin:0% 0 2%;}

    .image{width:100%;}
    .image-small{width:40%; float:left; margin:5%;}
    .caption{text-align: center;}
    
    .item-wide{
      margin:5px 5px 20px;
      border:#f3f0eb 0px solid;
      background: #fff;

      -ms-flex: 45%; /* IE10 */
      flex: 45%;
      padding: 10px 20px;
      color:#9a9a82;
  }

  .list-item{
    width:100%;
    margin:20px 0;
    border-bottom: 1px solid #9a9a82;
  }
  
  .done h3, .done h4, .done p {color: #ccc;}
    
.category{
    flex:30%; 
    height:100%;
    margin:1%; 
    padding:20px; 
    text-align:center;
    
}

.apotheca img, .studio img, .residence img{ 
   display:block;
   width:100%;
   height:100%;
}

/* .apotheca {background-image: url("images/motherland_storefront.jpg");}
.studio {background-image: url("images/motherland_storefront.jpg");}
.residence {background-image: url("images/motherland_storefront.jpg");} */



.category .background {width:100%; margin:0 auto;}

.category .title{
  margin:0% auto;
}

    .title{
        font-size: 18px;
        font-family: 'Trebuchet', sans-serif;
        text-align: center;
    }



.full .title{
  display: block;
  width:50%;
  border-bottom:1px solid #fff;
  border-width: 1px;
    transition: all .15s ease-in-out;
} 

.full:hover .title{
  border-bottom:1px solid #c28c3d;
  border-width: 1px;
  
} 
.full .background {opacity: 0.5;}
.full:hover .background {
  opacity: 1;
    transition: all .15s ease-in-out;
}

/*-----------------    PORTFOLIO -----------------*/

.projects {
  display:flex;
  flex-wrap:wrap;
  flex-direction: row;
  justify-content: center;

  max-width:1400px; width:90%;
  margin:2% auto 10%;
}
  .project{
      margin:5px;
      border:#f3f0eb 0px solid;
      background: #fff;

      -ms-flex: 32%; /* IE10 */
      flex: 32%;
      padding: 0px 0px;
      color:#9a9a82;
      position:relative;
  }

.project img {
width:100%;
margin:0 auto;
} 

.project > a {
display: block;
padding:0;
border:1px solid #fff;
background:#fff;
color:#51463a;
    transition: all .15s ease-in-out;

}

.project a:hover{
border:1px solid #B1A9A1;
background-color:#fff;
}

.project a img{
  opacity:1;
  display:block;
      transition: all .15s ease-in-out;
}

.project a:hover img{opacity:0;}

.project .link{
font-size:24px;
text-align:center;

opacity:0;  
display:block; 
  width:98%;
top:35%;
position:absolute;
z-index:999;
      transition: all .2s ease-in-out;
}

.project a:hover .link{
opacity:1;
} 

.caption {
	margin:0 auto;
	padding: 0px;
	color:#B1A9A1;
	font-size:18px;
}


/*----------------- -----------------*/

.callout{
  width:60%;
  margin:3% auto 1%;
  padding:20px;
  text-align: center;
}


.mail{
    background: transparent url("images/icon_mail.svg") no-repeat 0 0;
    width:20px;
    height:20px;
    margin:0px 8px 0 0;
    display:inline-block;
    background-repeat: no-repeat;
    background-position: bottom 0rem center;
    background-size: 20px 15px;
  }
.phone{
    background: transparent url("images/icon_call.svg") no-repeat 0 0;
    width:20px;
    height:15px;
    margin:0px 8px 0 0;
    display:inline-block;
    background-repeat: no-repeat;
    background-position: right 0rem center;
    background-size: 18px 20px;
  } 
  .insta{
    background: transparent url("images/instagram.png") no-repeat 0 0;
    width:20px;
    height:15px;
    margin:0px 8px 0 0;
    display:inline-block;
    background-repeat: no-repeat;
    background-position: right 0rem center;
    background-size: 15px 15px;
  } 

.divider{
    max-width:500px;
    height:1px;
    background:#9a9a82;
    background: rgb(191, 206, 200);
    margin:5% auto;
}
hr {color: #aaa; background:#aaa;}

/*------------------ FORMs -----------------------*/
/*mailchimp*/
#mc_embed_signup h2 {font-size: 30px; font-weight: normal;}
#mc_embed_signup .button{
    background:#c28c3d;
    border:#c28c3d 1px solid;
    color: #fff;
    padding:5px 15px 7px;
    text-align:center;
    font-size: 18px;
    font-family: 'Walker-Thin';
}
#mc_embed_signup .button:hover {color:#c28c3d; background: #fff;}
#mc_embed_signup .asterisk {
  color: #c28c3d;
  font-size: 130%;
  font-weight: normal;
  position: relative;
  top: 5px;
}

#mc_embed_signup #mce-success-response {
  color: #9a9a82;
  font-style: italic;
  display: none;
}
#mc_embed_signup .response {
  margin: 1em 0;
  padding: 0;
  font-weight: bold;
  float: left;
  top: -1.5em;
  z-index: 1;
  width: 80%;
}


/*------------------ FOOTER -----------------------*/
.footer{
    text-align: center;
    max-width: 500px;
    margin:5% auto 10%;
    padding:20px 0;
    border-top:1px solid #9a9a82;

}
.footer p{
    text-align: center; 
    font-size:16px; 
    color: #9a9a82;
    letter-spacing: 1px;
}
.footer a:hover {
    color: #c28c3d; 
    /* You can also remove the transition property if you want a faster change */
    transition: color 0.2s ease-in-out; 
}

.golden{background:#c28c3d;}
.rasp{background:#ab3a66;}
.cream{background:#f7e9d5;}


/*------------------ NAVIGATION -----------------------*/
.nav{
    /*position:absolute;*/
    position: fixed;
    z-index:10;
    cursor: pointer;
    color:#fff;
    background:#c28c3d;
    top: 4%;
    right: 4%;
    font-size: 24px;
    margin-left: 50px;
    padding:14px 15px;
    border-radius: 50%;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    background-color: #c28c3d;
    overflow-x: hidden;
    transition: 0.5s;
    padding: 10% 0 0;
  }
  
  .sidenav a {
    padding: 20px 8px 8px 40px;
    text-decoration: none;
    font-size: 36px;
    letter-spacing: 3px;
    color: #fff;
    display: block;
    transition: 0.3s;
    text-align:center;
    border:none;

  }
  
  .sidenav a:hover {
    color: #5f6259;
  }
  .sidenav a:visited {
    color: #F6E8D4;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }

.subnav a {padding:0 15px; display:inline-block;}



/*============= ===========    MOBILE =========== ==================*/
@media (max-width: 1000px){

}



@media (max-width: 880px) {
.container{flex-direction: column;}
/* Removed font-weight: bold from h1, h2, h3 for a lighter look */
h1{font-size:36px; font-weight: normal;}
h2{font-size:30px; font-weight: normal;}
h4{font-size:24px; letter-spacing: 2px;}

.intro{width:90%;}
.text-block {width:90%; margin:2% auto 2%;}

.category{width:90%; height:100px; margin: 1% auto;}

.column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
  .item{
    -ms-flex: 45%; /* IE10 */
    flex: 45%;
    padding: 10px 10px;
    margin:5px auto;
}
.project{
  margin:5px;
  border:#f3f0eb 0px solid;
  background: #fff;

  -ms-flex: 48%; /* IE10 */
  flex: 48%;
  padding: 0px 0px;
  color:#9a9a82;
  position:relative;
}

}

@media screen and (max-width: 600px) {
  
    .intro{margin:15% auto 1%;}
    .heading {width:90%;}
    .column {
      -ms-flex: 100%;
      flex: 100%;
      max-width: 100%;
    }
    p{font-size: 21px;}
    .quote{font-size: 21px;}
    .text-block p{margin:1% 0 5%;}
    .divider{margin: 8% auto;}
    .item{
      -ms-flex: 80%; /* IE10 */
      flex: 80%;
      padding: 10px 10px;
      margin:5px auto;
  }
    .callout{width:100%;}
  }

  @media screen and (max-width: 450px) {
    /* Removed explicit h1 bolding/size that might interfere */
    h1 {font-size: 36px; font-weight: normal;} 
    p {font-size:16px;}
    .nav{
      top: 2%;
      right: 2%;
    }
    .intro{margin:30% auto 1%;}

    .project{
      margin:5px;
      border:#f3f0eb 0px solid;
      background: #fff;
  
      -ms-flex: 98%; /* IE10 */
      flex: 98%;
      padding: 0px 0px;
      color:#9a9a82;
      position:relative;
  }
    
    /*.sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}*/
  }
  .site-header {
      display: flex;
      justify-content: center;
      align-items: center;
  width: 100%;
    margin: 0 auto;
}

.logo-container {
  flex: 0 1 auto;
}

.logo {
  width: 200px;
  height: auto;
  display: block;
  margin: 0 auto;
}