@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@100;200;400;800&family=Fira+Sans:ital,wght@0,300;0,500;1,300;1,500&family=Open+Sans:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Ultra&display=swap');

:root {
  
    height: 100%;

	--f-family:'Fira Sans', sans-serif;
  --f-family-headline: 'Bitter', serif;
  --f-family-open:'Open Sans', sans-serif;

	--background-clr: #333;
	--link-clr: #ccc;

  --gradient1: linear-gradient(35, 47, 29, 1, yellow);
  --gradient2: linear-gradient(red, yellow);
  
 --primary-clr: hsla(216, 54%, 23%, 1);
	--secondary-clr:hsla(216, 54%, 57%, 1);
	--bgGrey1: hsla(0, 0%, 87%, 0.5);
	--bgGrey2: hsla(0, 0%, 77%, 0.5);
  }
  

  
  ::before, 
  *::after, 
  *, 
  * {
  box-sizing: border-box;
  
  }
  
  * {
  margin: 0;
  padding: 0;
  font: inherit;
  }
  
  img, picture, svg, video{
  display:block;
  max-width: 100%;
  }


  
  
  body{
  display: flex;
  flex-direction: column;
  font-family: var(--f-family);
  font-size: 14px;
  position: relative;
  height: 100%;

  }

#content {
  flex: 1 0 auto;
}
  
a{
  text-decoration: none;
  
}
  
  li {
  list-style: none;
  }
  


/* personal page */

  .personal-flex{
  display:flex;
  justify-content: space-between;
  gap: 1em;

}

.personal-item{
width: 100%;
background-color: #ccc;
  margin-top: 1em;
aspect-ratio: 1/1.2;
 
  border: solid #fff 1px;
  border-radius: 5px;
  
  font-size: 1.4em;
  line-height: 1.2;
   color: #fff;
  text-align: center;
padding: .75em;
}

.dark{
  color: var(--primary-clr);
  font-weight: 500;
  
}

.personal-item:hover{
opacity:.9;

}


.personal-flex > a:nth-child(1) > div:nth-child(1){
  background: url(../images/personal-image01.jpg) 0 -1.5em no-repeat, url(../images/personal-image02.jpg) bottom no-repeat;
  background-repeat: no-repeat;
  background-size: 100%;
}

.personal-flex > a:nth-child(2) > div:nth-child(1){
  background: url(../images/personal-image01.jpg) 0 -1.5em no-repeat, url(../images/personal-image03.jpg) bottom no-repeat;
  background-repeat: no-repeat;
  background-size: 100%;
}

.personal-flex > a:nth-child(3) > div:nth-child(1){
  background: url(../images/personal-image01.jpg) 0 -1.5em no-repeat, url(../images/personal-image04.jpg) bottom no-repeat;
  background-repeat: no-repeat;
  background-size: 100%;
}

.personal-flex > a:nth-child(4) > div:nth-child(1){
  background: url(../images/ATW-Cover500px.jpg) 0 -1.5em no-repeat, url(../images/personal-image05.jpg) bottom no-repeat;
  background-repeat: no-repeat;
  background-size: 100%;
}

.personal-date{
  font-size: 1.2em;
  color: #fff;
  opacity: .6;
  font-family: 'Ultra', serif;
  display:block;

}

.personal-flex a{
 width: 100%;
}

.personal-flex p a{
 color: #fff;
}

div.personal-intro-content p a{
  color: #fff;
  margin-top: 1em;
  display: block;
  font-weight: 500;
  font-size: 1em;
  
}

.personal-intro-content ul li a {
  color: #fff;
  font-weight: 400;
  display:block;
  margin-top: 1em;
  
}

.personal-intro-content  {

  place-self: center; 
  line-height: 1.8;
  color: #fff;
  font-weight: 300;
  text-align: left;
  font-family: var(--f-family-headline);
  opacity: 0;
  animation: 1s ease-out .5s 1 slideInLeft;
  animation-fill-mode: forwards;
}

.personal-intro-content h1{
  font-size: clamp(2em, 2.5vw, 3em);

}

.personal-main-area {
  padding-top: 8em;
  padding-bottom: 5em;
  background: url(../images/personal01.jpg) no-repeat center center; 
  background-size: cover;

  display: grid;
}


@media (max-width: 850px) {
  
    .personal-flex{
  display:block;
}
  
  .personal-item{
height: 4em;

}
  
  .personal-intro-content  {
    max-width: 60%;
    
  }
  
  
}

@media (max-width: 450px) {
  
.personal-intro-content  {
  max-width: 90%;
  
}


}


/* regular pages */

.main-area {
  background: url(../images/hero-meeting.jpg) no-repeat center center; 
  background-size: cover;
  height: 60vh;
  min-height: 400px;
  display: grid;
}

.intro-content {
  width: 60%;
  place-self: center; 
  font-size: clamp(1.2em, 2vw, 1.8em);
  color: #fff;
  font-weight: 300;
  text-align: center;
  font-family: var(--f-family-headline);
  opacity: 0;
  animation: 1s ease-out 1s 1 slideInLeft;
  animation-fill-mode: forwards;
}

/* keyframes for teh intro content slide in */

@keyframes slideInLeft {
      0% {
        transform: translateX(-100%); opacity: 0;
      }
      100% {
        transform: translateX(0); opacity: 1;
      }
    }


.content-area{
	margin: 0 auto;
	display:flex;
	justify-content: space-between; /*here's the magic*/

}

.three {
  padding: 1em 0;
	flex-basis:100%;
  text-align: center;
  background: linear-gradient( rgba(70,83,60, 0.5), rgba(35,47,29, 0.5) ), url(../images/texture-bg.jpg)no-repeat center center;
  background-size: cover;
  color: #fff;
  height: 32vh;

}

.content-area > a:nth-child(2) > div:nth-child(1) {
    background: linear-gradient( rgba(83,66,55, 0.9), rgba(123,98,85, 0.5) ), url(../images/texture-bg.jpg)no-repeat center center;
  background-size: cover;

}


.three img {
  padding-bottom: .5em;
  width: clamp(25%, 2vw, 50em);
  margin: 0 auto;
  /* display: none; */
  
}

.content-area > a:nth-child(2) > div:nth-child(1) > img:nth-child(1){
  width: 20%;
    height: auto;
}

.three h2{
  font-size: clamp(1em, 2.2vw, 2em);
  font-family: var(--f-family-headline);
  font-weight: 100;
}

.three p{
  max-width: 75%;
  margin: 0 auto;
  margin-top: .5em;
  font-size: clamp(.85em, 1.2vw, 1.25em);
  line-height: 1.5em;

}

footer{
  background-color: #000;
  /* background: radial-gradient(circle at 50% 100%, #111, #444); */
  padding: 2em 12em;
  color: #666;
  text-align: center;
  flex-shrink: 0;
}

.footer-three{
  display:flex;
width: 100%;
  margin: 0 auto; 
justify-content: center;

}

footer p,
footer a {
  font-weight: 300;
  color: #666;
  font-size: .85em;
}

footer a:hover{
  color: #fff;
}

.footer-item{
  flex-basis: 100%; 

}

.footer-item img{
  display:inline;
  z-index: -100;
  opacity: .3;
}
.footer-item img:hover{
  display:inline;
  opacity: 1;
}

.footer-item:nth-child(1){
  text-align: left;
}

.footer-item:nth-child(3){
  text-align: right
}



.title{
  font-family: var(--f-family-headline);
  font-weight: 300;
  font-size: 1.2em;
}

.photo-credit{
  font-size: .65em;
  padding-top: 1em;
}



 @media (max-width: 850px) {
   
footer{
    padding: 2em 4em;

}
}



 @media (max-width: 650px) {

       .main-area{
      height: 30em;

      /* background: linear-gradient( rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3) ), url(../images/revised-hello.jpg)no-repeat center center;  */


    }
   
   .intro-content{
   width: 70%;
     padding: 5em 0;
}

   .content-area{
	display:block;
}
   
   .three {
  min-height: 20em;
     padding: 2em;
}
   
   .three img {
  width: 30%;
}
   
   .three h2{
      font-size: 2em;
     
   }
   
   .three p{
     font-size: .85em;
   }
   
footer{
display:block;
  
}
   
   .footer-item {
     width: 100%;
     text-align: center!important;
     margin-bottom: 1em;
    
   }
   
   .footer-item img{
width: 80%;
}

   
   footer p{
     line-height: 1.5em;
     font-size: 1em;

     
   }

   .footer-three{
    display:block;
    
  
  }
  
  .footer-item{
    width: 100%; 
  
  }

   
  }  

  /* copywriting */


.intro-section{
  width: 90%;
  max-width: 950px;
  margin: 0 auto;
padding-top: 8em;
	padding-bottom: 3em;

}

.intro-section h1{
	font-family: var(--f-family-headline);
	font-size: 3em;
	padding-bottom: .25em;
  line-height: .85em;
  color: var(--primary-clr);
	
}

.intro-section p{
	font-family: var(--f-family-headline);
	font-size: 1.4em;
  font-weight: 200;
	
}


.copywriting h2{
	color: var(--primary-clr);
	font-size: 2rem;
	font-weight: 200;
	letter-spacing: -1px;
padding-bottom:.2em;
		font-family: var(--f-family-headline);
	
}

.copywriting h3{
		font-size: 1rem;
	font-weight: 200;
	letter-spacing: -1px;
	padding-bottom: 1.5em;
}

.copywriting h4{
		font-size: .85rem;
	font-weight: 400;
	letter-spacing: -.5px;
	padding-bottom: 3em;
	font-family:var(--f-family-open);
	font-weight: 700;
	font-style: normal;

}


.copywriting p{
		font-size: .85rem;
	font-weight: 200;
	padding-bottom: .5em;

	
}

.copywriting {
  width: 90%;
  max-width: 950px;
  margin: 0 auto;
  background-color: var(--bgGrey1);
	margin-bottom: 1em;
	padding: 1.5em;
  
  transition: opacity 0.4s ease-in;
  -webkit-transition: opacity 0.4s ease-in;


}

.copywriting:nth-child(odd){
	background-color: var(--bgGrey2);

}

.outerWrapper{
	width: 100%;
	display:flex;
	justify-content: space-between; /*here's the magic*/
	gap: 2em;
  column-gap: 2em;
  -webkit-column-gap: 2em;

}

.copywriting img{
	width: 100%;
}


.copywriting .two:first-of-type {
	flex-basis: 50%;
}

.copywriting .two:nth-of-type(2) {
	flex-basis: 200%;
}


.fadeOut { 
  opacity: 0; 
  -webkit-opacity: 0;
}

.fadeIn { 
  opacity: 1; 
  -webkit-opacity: 1;
}


.samples{
  width: 90%;
  max-width: 950px;
  margin: 0 auto;
padding: 1em 0em;
	font-size: 1em;
}

.instructions{
display: inline;
font-weight: 200;
  font-size: .85em;
  font-family: var(--f-family);
  font-weight: 400;
 color: #666;

}


@media only screen and (max-width : 650px) {
	
  .copywriting .outerWrapper {
	display:block;
}

.copywriting .outerWrapper div{
	display:block;
	 margin-bottom:3em;
}
	

}

/* the pop up image pages */

#background{
  width: 100%;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left:0;
  bottom:0;
  right:0;
  opacity: .7;
  background-color: #000;
 display:none;
  
}

#popup-wrapper{
display: grid;
background-image: linear-gradient(#7d99b2, #fff );
width: 95%;
max-width: 950px;
margin: 0em auto 3em auto;
padding:3rem;


}


.grid{
width: 100%;
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
  cursor: pointer;

}

.grid img:hover{
  opacity: .8;
  
}


.lightbox{
  background-color: #fff;
  border: solid #000 1px;
  padding: 2em;
height: 83vh;
 aspect-ratio: 1/1.45;
 max-width: 95vw;
 position: fixed;
  margin-top: 5vh;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display:none;
  z-index: 10;

    animation: fadeIn .8s ease-in;

}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.active{
  display:block!important;
  object-position: cover;

}


.lightbox-title {
  color: #666;
   font-size: 1.3em;
  font-family: var(--f-family-headline);
  margin: .5em 0;
  font-weight:200;
}


.lightbox-caption {
 font-size: .75em;
  font-weight: 400;
  
}

.lightbox-close{
  font-weight: 900;
  padding: 5px 10px;
  position: absolute;
  left: 95%;
  top: -1em;
border: solid 1px none;
  border-radius: 100%;
  background-color: red;
  color: #fff;
  cursor: pointer;
  
}


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

.lightbox{
  padding: 1em;
height: 80%;
}
  
 .active{
    padding-bottom: 1em;
    
  }
  
  .lightbox img{
    max-height: 70%;
    margin: 0 auto;
    border: solid 1px #000;    
  }
  
  
  .lightbox-caption {
 font-size: .65em;


  
}
  
}

/* case studies */


.case-study-wrapper{
	width:90%;
	max-width: 950px;
	margin: 0 auto 6em auto;
	
}

.case-study-wrapper img{
	width:100%;
	border:none;
	border-radius:0;


}
.case-study-wrapper .case-Layer {
	display: flex;
	justify-content: space-between;
	padding-bottom:1em;
  gap: 2em;
	
}


.case-study-wrapper .case-item{
	flex-basis:100%;
	display:block;

}

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

  .case-study-wrapper .case-Layer {
    display: block;
    
  }
  
  .case-study-wrapper .case-item{
	margin-bottom: 2em;

}



}

/* case study individual pages */

.case-study{
  display:block;
    padding: 2em;
    width: 75%;
    max-width: 750px;
    margin: 6em auto 0 auto;

}

.case-study-container {
display:block;
    position: relative;
    padding: 2em;
    width: 75%;
    max-width: 750px;
    margin: 0 auto;


}

.case-study-container h3{
  font-weight:300;
  padding-bottom:.5em;
   color: var(--primary-clr);
  font-family: var(--f-family-headline);
  font-size: 2em;
  
 
}

.case-study-container img{
  border-radius:0;

}

.case-study-container p{
  padding-bottom:2em;
font-family: var(--f-family);
  font-weight: 300;
  font-size: 1.1em;
  color: #666;

}

 .case-study-container li{
   padding-bottom:1em;
font-family: var(--f-family);
  font-weight: 500;
  font-size: 1.1em;
  color: #666;
}


.case-study-container p strong{
   font-weight: 500;
  
  
}

.case-study-container h6{
  letter-spacing:1em;
    color:#c3c3c3;

  }

.post-title {
    font-size: 2em;
    color: #F97303;
    margin-top: .5em;
 margin-bottom: .5em;
line-height:1em;
}


.hero{
margin-bottom: 2em;
  width:100%;
  height:auto;
}


.alignleft-none{
float:left;
margin-right:2em;
  margin-top:0em;
  width:30%;
}

.alignright-none{
float:right;
margin-left:1em;
   margin-top:0em;
  width:30%;

}




.alignleft{
float:left;
margin-right:2em;
  /* margin-top:2em; */
  width:30%;
  border: solid 1px #666;
}

.alignright{
float:right;
margin-left:1em;
   /* margin-top:2em; */
  width:30%;
  border: solid 1px #666;

}


.threeItems {
  width:100%;
    display:flex;
    margin-top:2em;
    margin-bottom:2em;
gap: 2em;
 
  }

.three-left, .three-middle, .three-right {
  width: 100%;
    border: solid 1px #666;

  }
 

@media only screen and (max-width : 550px) {
  
  
  .case-study{
    padding: 1em;
    width: 90%;
    margin: 6em auto 0 auto;

}

.case-study-container {
    padding: 1em;
    width: 90%;

}
  
  .case-study-container p, .case-study-container li{
  font-size:.90em;
     line-height: 1.8em;

}
  
.alignleft, .alignleft-none{
  display:block;
width:100%;
  margin: 1em 0em;
}

.alignright, .alignright-none{
  display:block;
width:100%;
   margin: 1em 0em;

}
  
  .threeItems {
  width:100%;
    display:block;
    margin-top:2em;
    margin-bottom:2em;
 
  }
  
  
  .three-left, .three-middle, .three-right, .alignleft, .alignright {
  width: 100%;
    border: solid 1px #666;
  margin:1em auto;

  }


}

@media (max-width: 850px) {

.three {
  height: 22vh;

}
}