html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body{
  background: #fff;
  font:15px/1.5em azo-sans-web, Arial, Helvetica, sans-serif;
  color:#222;
  position:relative;
}

body label { cursor: initial; }
:root {
  --link-color: #4cc3e9;
  --def-color: #000;
  --page-width: 1100px;
  --alt-bg: #f5f5f5;
  --alt-color: #787878;
}

h1 { font-size: 3.0rem; line-height: 1.2em; font-weight: 900; }
h2 { font-size: 2.0rem; line-height: 1.2em; }
h3 { font-size: 1.7rem; line-height: 1.2em; }
section { position: relative; }

.post-edit-link { padding-top: 20px; display: block; }

#page, header, footer { min-width: var(--page-width); }

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

.boxed { width: var(--page-width); margin: auto; }
.boxed .inner-narrow { width: 78%; margin: auto; }
header.boxed { margin: 30px auto 70px auto; }
header.not-front.boxed { margin-bottom: 30px; }
footer .boxed { padding: 70px 0; }

nav .home-logo-name, nav .home-logo , nav .opts { vertical-align: middle; }
nav .home-logo-name { text-align: left; }
nav .home-logo-name img {
  width: auto;
  height: 60px;
}

nav .home-logo { text-align: left; }
header.front nav .home-logo { text-align: center; }
nav .home-logo img {
  max-height: 110px;
  height: 100%;
  width: auto;
}
header.not-front nav .home-logo img { max-height: 90px; }
.home-logo a { display: inline-block; }
.home-logo a img { opacity: 1; transition: all 0.4s; }
.home-logo a:hover img { opacity: 0; }
.home-logo a:hover { background-size: contain; background-position: center center; }
.home-logo a {
  background-image: url(../img/logo-black-text-mouseover.png);
  background-size: 1500%;
  background-position: left top;
}

nav { text-align: right; line-height: 1.5em; }
nav a { text-decoration: none; display: inline-block}
nav .menu-footer a,
nav .menu-primary a { transition: all 0.5s; }
/*
nav .menu-footer a::before,
nav .menu-primary a::before {
  content: '';
  width: 0px;
  height: 2px;
  display: block;
  background: var(--link-color);
  transition: 300ms;
}
nav .menu-footer a:hover::before,
nav .menu-primary a:hover::before { width: 100%; }
*/

nav .menu-social a:hover { color: var(--def-color); }

/*
nav ul.menu-footer li:not(:last-child),
nav ul.menu-primary li:not(:last-child) { padding-right: 25px; }
*/
nav .menu-footer,
nav .menu-primary { margin-bottom: 10px; }
nav .menu-footer a,
nav .menu-primary a { color: #000; }
nav .menu-social a { color: var(--link-color); }
nav ul { font-size: 12px; text-transform: uppercase; font-weight: 700; }
nav ul.menu-social { font-size: 17px; }
nav ul li { display: inline; }

.front nav ul.menu-footer,
.front nav ul.menu-primary { position: relative; right: -16px; }
/* .not-front */ nav ul.menu-footer li:not(:last-child),
/* .not-front */ nav ul.menu-primary li:not(:last-child) { padding-right: 10px; }
/* .not-front */ nav .menu-footer a,
/* .not-front */ nav .menu-primary a { padding: 3px 16px; }
/* .not-front */ nav .menu-footer a:hover,
/* .not-front */ nav .menu-primary a:hover,
.single-casestudy nav .menu-footer li.work a,
.single-casestudy nav .menu-primary li.work a,
.single-project nav .menu-footer li.work a,
.single-project nav .menu-primary li.work a,
.single-post nav .menu-footer li.blog a,
.single-post nav .menu-primary li.blog a,
.single-staff nav .menu-footer li.about a,
.single-staff nav .menu-primary li.about a,
/* .not-front */ nav .menu-footer li.current_page_item a,
/* .not-front */ nav .menu-primary li.current_page_item a {
  background-color: #000; color: var(--link-color);
}

.altbg { background-color: var(--alt-bg); color: var(--alt-color); }
.altbg h1 { color: #000; }
.altbg h2 { color: #000; }
.altbg h3 { color: #000; }
.altbg h4 { color: #000; }

footer { background-color: var(--alt-bg); font-size: 10px; color: var(--alt-color); font-weight: 700; line-height: 1.3em; }
footer .copyright { text-align: right; }
footer nav .menu-footer { text-align: left; font-size: 11px; line-height: 1.5em; }
footer nav .menu-social { margin-bottom: 15px; }

.front_feature { margin-bottom: 50px; }
.front_feature > div { display: inline-block; vertical-align: top; }
.front_feature .casestudies { width: 69.7%; margin-right: 1.0%; position: relative; }
.front_feature .projects { width: 29.3%; position: relative; }
.front_feature .projects .item { background: #000; position: relative; }
.front_feature .projects .item .title { position: absolute; bottom: 0; color: #fff; background: rgba(0, 0, 0, 0.65);  width: 100%; }
.front_feature .projects .item .title .text { padding: 20px; font-weight: 900; font-size: 24px;  }
.front_feature .projects .item a { text-decoration: none; }
label.box {
  color: #000;
  background-color: var(--link-color);
  padding: 15px;
  display: inline-block;
  margin-bottom: 10px;
}
label.box a { color: #000; text-decoration: none; }
label.shadow-br { filter: drop-shadow(10px 10px 0px #000); }
label.shadow-bl { filter: drop-shadow(-10px 10px 0px #000); }
label.absolute { 
  position: absolute;
  top: -10px; left: 0;
  z-index: 10;
  margin-bottom: 0;
}
label.bold { font-weight: 700; }
label.uc { text-transform: uppercase; }
label.box.onblack {
  background-color: #000;
  color: #fff;
}
label.box.onblack a { color: #fff; }
label.box.onblack.shadow-br { filter: drop-shadow(10px 10px 0px var(--link-color)); }
label.box.onblack.shadow-bl { filter: drop-shadow(-10px 10px 0px var(--link-color)); }

.columns-2 {
  width: 70%;
  margin: 20px auto;
  column-count: 2;
  column-gap: 30px;
  column-rule: 0px solid #333;
}

.columns-3 {
  width: 78%;
  margin: 20px auto;
  column-count: 3;
  column-gap: 30px;
  column-rule: 0px solid #333;
}

figcaption { font-style: italic; }

.post_links { font-size: 11px; font-weight: 700; padding-bottom: 20px; }
.post_links a { color: #000; text-decoration: none; }
.post_links a i { color: var(--link-color); font-size: 0.7em; display: inline-block; vertical-align: middle; }


.header_image img { width: 100%; height:auto; }

.home_content { background: var(--alt-bg); padding: 30px 0; font-weight: 700; color: var(--alt-color); }
ul.clientlist li { text-indent: -15px; list-style: none; }
.clientlist strong, .clientlist em { font-style: normal; font-weight: 700; }
.clientlist em::before { content: "\2022"; display: inline-block; color: var(--link-color); font-family: serif; }
.clientlist strong::before { content: "\2022"; display: inline-block; color: var(--alt-bg); font-family: serif; }
.legend em::before { content: "\2022"; display: inline-block; color: var(--link-color); font-family: serif; }
ul.legend li { text-indent: -15px; padding-left: 15px; list-style: none; margin-left: 15px; }

section.impact_report { padding: 50px 0; line-height: 1.5em; }
section.impact_report .big_number { font-weight: 900; font-size: 70px; line-height: 1em; padding-bottom: 10px;}
section.impact_report .number { font-weight: 900; font-size: 25px; line-height: 1.2em; }

.standout {
  display: inline-block;
  background-color: var(--link-color);
  color: #000;
  padding: 5px 15px;
  position: relative;
  left: -15px;
}

a.pill_link {
  display: inline-block;
  background-color: var(--link-color);
  color: #000;
  padding: 9px 15px;
  line-height: 1em;
  border-radius: 10px;
  text-decoration: none;
  font-size: 1.0em;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.2s;
}
a.pill_link:hover { color: #fff; background-color: #000; }

.tags a {
  display: inline-block;
  background-color: var(--link-color);
  color: #000;
  padding: 3px 15px;
  line-height: 1em;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.6em;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.2s;
}
.tags a:not(:last-child) { margin-right: 10px; }
.tags a:hover { color: #fff; background-color: #000; }

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-container embed, .video-container iframe, .video-container object {
  position:absolute;top:0;left:0;width:100%;height:100%;
}

/* ALL SINGLE PAGES: START */
body.single nav.navigation a .text { color: #000; font-size: 12px; vertical-align: middle; }
body.single nav.navigation .nav-next,
body.single nav.navigation .nav-previous {
  display: inline-block;
}
body.single nav.navigation .nav-previous { padding-right: 20px; }
body.single nav.navigation i { vertical-align: middle; }
/* ALL SINGLE PAGES: END */

/* CASE STUDY: START */
.single-casestudy nav.navigation { margin-bottom: 20px; }
.single-casestudy h2, .single-casestudy h3 { line-height: 1em; }
.single-casestudy h2 { font-size: 1.5rem; font-weight: normal; }
.single-casestudy h3 { font-weight: 900; }
.single-casestudy .headline {
  display: inline-block;
  width: calc(70% - 120px);
  vertical-align: bottom;
  margin-left: 120px;
}
.single-casestudy .impact {
  display: inline-block;
  width: 30%;
  text-align: right;
  vertical-align: bottom;
}
.single-casestudy ul {
  margin-left: 20px;
  /* text-indent: -20px; */
  list-style-position: outside;
  list-style: disclosure-closed;
}
/*
.single-casestudy ul li::before {
  content: "\2022";
  display: inline-block;
  color: var(--link-color);
  font-family: serif;
  font-size: 20px;
}
*/
.single-casestudy .header_image { margin: 20px 0; }
.single-casestudy .tags { margin: 10px 0; }
.single-casestudy p { margin: 10px 0; }

.flex-group p { margin: 15px 0; }
.flex-group .text { margin: 20px 0; }
.flex-group .video-text,
.flex-group .image-text { margin: 40px 0; }
.flex-group .video-text .text,
.flex-group .image-text .text { 
  width: 37.5%;
  display: inline-block;
  vertical-align: middle;
}
.flex-group .text .inside { line-height: 1.7em; }
.flex-group .video,
.flex-group figure { display: inline-block; vertical-align: middle; width: 100%; }
.flex-group figure img {  width: 100%; height: auto; }
.flex-group .video-text-alignright .video,
.flex-group .image-text-alignright figure { text-align: right; width: 50%; margin-left: 12.5%; }
.flex-group .video-text-alignleft .video,
.flex-group .image-text-alignleft figure { text-align: left; width: 50%; margin-right: 12.5%; }
.single-casestudy .results {
  clear:both;
  margin: 40px 0;
  padding: 40px 0;
  background: #000;
  color: #fff;
  font-size: 0.8em;
}
.single-casestudy .results .standout { margin-bottom: 20px; }
.single-casestudy .results ul li { margin: 0; padding: 0; line-height: 1.4em; font-size: 1.1em;}
.single-casestudy .results ul { margin: 15px 0; }
.single-casestudy .results .left { display: inline-block; width: 50%; margin-right: 5%; vertical-align: middle; }
.single-casestudy .results .results_link { display: inline-block; width: 45%; vertical-align: middle; }
/* CASE STUDY: END */

/* PROJECT: START */
.single-project .descr,
.single-project .tags { padding-top: 10px; }
.single-project .boxed .inner-narrow { width: 81%; }
.single-project .header_image { margin: 0 0 20px 0; }
/* PROJECT: END */

/* ABOUT: START */
.page-about .page_content { padding: 50px 0; width: 70%;  }

.testimonials { padding: 30px 0; }
.testimonials h3 { width: 81%; font-size: 1.6em; margin: auto; }
.testimonials .quotes { width: 81%; margin: 50px auto 20px auto; text-align: center;}
.testimonials .item {
  display: inline-block;
  vertical-align: top;
  width: 32%;
  position: relative;
}
/* .testimonials .item:not(:last-child) { margin-right: 1%; } */
.testimonials .item { margin: 0 0.5%; }
.testimonials .item .thumb img { width: 100%; height: auto; }
.testimonials .item .quote {
  font-size: 12px;
  text-align: left;
  font-style: italic;
  line-height: 1.2em;
  min-height: 160px; /*130px; */
  background-color: #fff;
  padding: 20px 15px;
}
.testimonials .item .name {
  /*
  z-index: 10;
  position: absolute;
  bottom: 0; left: 0;
  */
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  width: 100%;
  background-color: #000;
}
.testimonials .item .name .inside { padding: 3px 10px; }

.page-about .services,
.page-about .contact { width: 70%; margin: 0 auto; text-align: center; }
.page-about .services h3,
.page-about .contact h3 { font-size: 1.6em; font-weight: 900; }
.page-about .services label.box a,j
.page-about .contact label.box a { padding: 0 20px; }

.page-about .team { background-color: #000; color:#fff; padding: 40px 0; }
.page-about .team h3 { font-size: 1.6em; font-weight: 700; }
.page-about .team .staff_list { padding: 30px 0; text-align: center; }
.page-about .team .staff_list .item {
  vertical-align: top;
  width: 32%;
}
.page-about .team .staff_list .item:not(:last-child) { margin-right: 1%; }
.staff_list .item { display: inline-block; position: relative; text-align: center; }
.staff_list .item figure img { width: 100%; height: auto; }
.staff_list .item .name { text-transform: uppercase; padding-top: 20px; text-align:center; font-weight: 700; }
.staff_list .item .position { text-transform: uppercase; font-size: 11px; font-weight: 300; }
.staff_list .item .bio { text-transform: uppercase; font-size: 11px; font-weight: 300; }
.page-about .partners { padding: 100px 9.5%; background-color: var(--alt-bg); }
.page-about .partners h3 { padding-bottom: 30px; }
.page-about .partners .partner-text { width: 81%; padding-bottom: 20px;  }
.page-about .partners .category {
  display: inline-block;
  vertical-align: top;
  width: 30%;
  margin-right: 1%;
}
/* ABOUT: END */

/* STAFF SINGLE: START */
.single-staff .featured_image {
  display: inline-block;
  vertical-align: middle;
  width: 40%;
}
.single-staff .featured_image img { width: 100%; height: auto; }
.single-staff .details { display: inline-block; vertical-align: middle; width: 56%; margin-left: 3%; }
.single-staff .details h2 { font-style: italic; font-size: 1.6em; }
.single-staff .details h3.links { font-weight: normal; font-size: 22px; padding-top: 5px;}
.single-staff .details h3.links a { text-decoration: none; padding-right: 5px; }
.single-staff .details h3.links a:hover { color: #000; }
.single-staff .content { margin-top: 30px; }
.single-staff .content p { margin: 10px 0; }
.single-staff .staff_list { padding: 30px 0; }
.single-staff .staff_list .item { width: 18%; display: inline-block; vertical-align: top; font-size: 12px; line-height: 1.3em; }
.single-staff .staff_list .item:not(:last-child) { margin-right: 20px; }
.single-staff .staff_list .item .name { padding-top: 10px; }
.single-staff .staff_list .item .position { font-size: 9px; }
/* STAFF SINGLE: END */

/* WORK: START */
.page-work .projects { padding: 50px 0; }
.page-work .item { position: relative; display: inline-block; width: 45%; vertical-align: top; margin-bottom: 20px; margin-right: 5%; }
.page-work .item .image { width: 30%; display: inline-block; vertical-align: middle; position: relative; }
.page-work .item .image a i { position: absolute; padding: 5px; top: 0; right:0;/*top: 5px; right: 5px; */ z-index: 10; color: #fff; transition: all 0.3s; }
.page-work .item .image a .cs_over { font-size: 10px; padding: 1px 5px; top: -4px; left: -4px; filter: drop-shadow(4px 4px 0px #000); }
.page-work .item .image a:hover i { color: var(--link-color); background: #000; }
.page-work .item .info { width: 70%; display: inline-block; vertical-align: middle; }
.page-work .item .info .inside { padding: 10px 5px 10px 10px; }
.page-work .item img { width: 100%; height: auto; }
.page-work .item .info .headline { text-transform: uppercase; font-weight: 700; line-height: 1.3em; }
.page-work .item .info .subhead { font-size: 0.8em; line-height: 1em; }
.page-work .item .info .descr { font-weight: 700; font-size: 0.8em; line-height: 1.4em; margin: 10px 0; }
/* WORK: END */

article {
  ul { list-style-type: disc; }
}

/* BLOG: START */
.single-post nav.navigation { margin-bottom: 20px; }
body.blog article {
  width: 80%;
  margin: auto;
  padding-bottom: 50px;

  .image { width: 40%; display: inline-block; vertical-align: middle; margin-right: 10%; }
  .image img { width: 100%; height: auto;  }
  .details { display: inline-block; vertical-align: middle; width: 50%; }
  .details h2 { font-size: 1.2em; text-transform: uppercase; }
  .details { font-size: 0.8em; line-height: 1.5em;}
  .details .teaser { padding: 5px 0 10px 0; font-weight: 700; }
  .details label {
    padding-top: 5px; padding-bottom: 5px; 
    filter: drop-shadow(5px 5px 0px #000);
  }
  p, dl { margin: 10px 0; }
}

body.single-post article { padding-bottom: 50px; }
body.single-post article .featured_image { padding: 20px 0; }
body.single-post article .featured_image img { max-width: 60%; }
body .yarpp-related { margin: 40px 0; }
.yarpp-related .related_posts h3 { font-size: 1.0em; padding-bottom: 15px; }
.related_posts li { list-style: none; display:inline-block; width: 15%; vertical-align: top; }
.related_posts li:not(:last-child) { margin-right: 1%; }
.related_posts a { color: #000; }
.related_posts .title { text-transform: uppercase; font-size: 12px; line-height: 1.3em; padding-top: 10px; }
.related_posts img { width: 100%; height: auto; }
.related_posts .date { font-size: 0.7em; font-weight: normal; }
/* BLOG: END */

/* SERVICES: START */
.page-services .service_block { margin: 50px 0; }
.page-services .service_block .services-tagline {
  font-weight: 900;
  display: inline-block;
  vertical-align: middle;
  width: 45%;
  font-size: 1.8em;
  line-height: 1.2em;
}
.page-services .service_block .services-tagline .inside {
  padding-left: 80px;
}
.page-services .service_block .services-cta {
  display: inline-block;
  vertical-align: middle;
  font-style: italic;
  background: var(--link-color);
  color: #fff;
  text-align: right;
  width: 54%;
  font-size: 1.8em;
  font-weight: 100;
}
.page-services .service_block .services-cta .inside {
  padding: 100px 15px 15px 15px;
}
.page-services .service_type { margin-left: 80px; margin-bottom: 50px; }
.page-services .service_type .service_info { display: inline-block; width: 45%; vertical-align: bottom; }
.page-services .service_type .service_image { position: relative; display: inline-block; width: 55%; vertical-align: bottom; }
.page-services .service_type .service_image img { height: 400px; width: auto; border: 1px solid; padding: 10px; }
.page-services .service_type .service_title { font-weight: 700; font-size: 1.7em; padding: 10px 0;  }
.page-services .service_type .service_desc { font-size: 1em; line-height: 1.4em; font-weight: 700; padding: 10px 10px 10px 0;  }
.page-services .service_type .service_callouts { 
  text-transform: uppercase;
  font-weight: 700;
}
.page-services .service_type .service_callouts li {
  display: block;
  margin: 10px 0;
}
.page-services .service_type .service_callouts li .name {
  display: inline-block;
  width: 70%;
  border-bottom: 1px solid var(--link-color);
}
.page-services .service_type .service_callouts li i.fas {
  color: var(--link-color);
  font-size: 1.3em;
}
.page-services .service_type .service_selected_work { background: var(--alt-bg); padding: 10px 0; margin-left: -80px; padding-left: 80px; }
.page-services .service_type .service_selected_work_head { font-size: 1.2em; font-weight: 700; padding: 5px 0; }
.page-services .service_block:last-child { margin-left: 80px; }
/* SERVICES: END */

/* CATEGORY: START */
body.category {
  .navigation { margin-bottom: 10px; }
  article {
    margin-bottom: 20px; 
    h2 { font-size: 1.3em; }
    time { font-style: italic; font-size: 0.8em; }
    .post_type { text-transform: uppercase; font-size: 0.7em; line-height: 1.5em;  }
    .thumbnail {
      display: inline-block;
      height: 150px; width: 150px;
      vertical-align: middle;
      margin-right: 10px; 
      img { max-height: 100%; width: auto; }
    }
    .content {
      display: inline-block;
      width: calc(100% - 165px);
    }
  }
}
/* CATEGORY: END */

/* mobile */
@media screen and (max-device-width: 480px) {
  :root {
    --page-width: 500px;
  }
}