/* Universal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Inter-Regular.woff2") format("woff2"),
    url("fonts/Inter-Regular.woff") format("woff");
}

@font-face {
  font-family: 'Inter-Bold';
  font-style: bold;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Inter-Bold.woff2") format("woff2"),
    url("fonts/Inter-Bold.woff") format("woff");
}

@font-face {
  font-family: 'youngserifregular';
  src: url('fonts/YoungSerif-Regular.woff2') format("woff2"),
    url('fonts/YoungSerif-Regular.woff');
}

body {
  background-color: white;
  width: 100%;
}

strong {
  font-family: 'Inter-Bold', sans-serif;
}

#site_wrapper {
  max-width: 1440px;
  margin: 0px auto;
  height: 100vh;
  padding: 110px;
  font-family: 'youngserifregular';
}

/* Typgraphy */
h1 {
  font-size: 48px;
  font-family: 'youngserifregular', serif;
  color: #121212;
  margin: 0px;
  margin-top: 80px;
  line-height: 57px;
  letter-spacing: 1px;
}

h1 span {
  /* background-color: #50D5FF; */
  background: linear-gradient(180deg, transparent 50%, #50d5ff 50%);
  /* padding: 0px 10px 1px 10px; */
  display: inline;
  box-decoration-break: clone;
}

h1 span a {
  text-decoration: none;
  color: #121212;
}

/* h1 span:hover {
  background: linear-gradient(180deg, transparent 50%, #121212 50%);
  color: #50d5ff;
  display: inline;
}

h1 span a:hover {
  color: #50d5ff;
} */

h1 span a:visted {
  color: #121212;
}

h2 {
  font-size: 24px;
  font-family: 'youngserifregular', serif;
  letter-spacing: 1px;
}

.anchor {
  display: block;
  position: relative;
  top: -80px;
  visibility: hidden;
}

/* Nav */
.home_header ul {
  padding-left: 0px;
  margin: 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style-type: none;
}

.home_header li a, .footer a {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  border-bottom: 2px solid #121212;
  color: #121212;
  padding-bottom: 2px;
  display: flex;
  flex-direction: row;
  margin-right: 20px;
  text-decoration: none;
  letter-spacing: 0px;
}

.home_header svg {
  background: #121212;
  font-family: YoungSerif-Regular;
  font-size: 20px;
  color: #FFFFFF;
  letter-spacing: 0.42px;
  text-align: left;
  line-height: 14px;
}

/* .home_header svg:hover #Rectangle {
  fill: #50d5ff;
  -webkit-transition: fill .15s ease-in;
  -moz-transition: fill .15s ease-in;
  -o-transition: fill .15s ease-in;
  transition: fill .15s ease-in;
} */

.nav_logo a {
  border-bottom: none !important;
  margin-top: 5px;
}

.home_header li a, .footer a {
  text-decoration: none !important;
}

.home_header li a:visited, .footer a:visited {
  color: #121212;
}

.home_header li a:hover, .footer a:hover {
  border-bottom-color: #50d5ff;
  color: #50d5ff;
  -webkit-transition: border-bottom-color .15s ease-in, color .15s ease-in;
  -moz-transition: border-bottom-color .15s ease-in, color .15s ease-in;
  -o-transition: border-bottom-color .15s ease-in, color .15s ease-in;
  transition: border-bottom-color .15s ease-in color .15s ease-in;
}

.far {
  padding-right: 8px;
}

.home_hr {
  border-top: 5px solid #121212;
  margin-top: 96px;
}

/* Home Work Examples */
.home_examples {
  margin-top: 96px;
}

.home_examples-grid, .content_block-grid {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 40px;
  margin-top: 40px;
  margin-bottom: 0px;
}

.card {
  background: white;
  text-decoration: none;
  color: #444;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: auto;
  border: 4px solid #121212;
  box-sizing: border-box;
  position: relative;
  top: 0;
  transition: all .25s ease-in;
}

.short_image .card {
  min-height: 0 !important;
}

.card:hover {
  top: -2px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}

.content_block-grid .card:hover {
  top: 0px;
  box-shadow: none;
  cursor: default;
}

.card article {
  padding: 20px;
}

.card h3 {
  font-size: 20px;
  margin: 0;
  color: #121212;
  letter-spacing: .5px;
}

.card span {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .05em;
  margin: 1em 0 0 0;
  font-family: 'Inter';
  line-height: 16px;
}

.card article {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card p {
  flex: 1;
  /* make p grow to fill available space*/
  line-height: 1.4;
}

.card .home_examples-image {
  height: 400px;
  background-color: #50d5ff;
  background-size: cover;
  background-position: center center;
  margin: 0px;
  padding: 0px;
  border: none;
  border-image-width: 0;
  border: none;
box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
-webkit-box-shadow: none;
}

.card .content_block-image {
  width: 100%;
  height: auto;
  background-color: #50d5ff;
}

.content_block-grid .card {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.remove_centering {
  justify-content: flex-start !important;
  background-color: #38474e;
}


.item-1 .home_examples-image {
  background-image: url('img/bvbrand/project_cover_bv.gif');
  background-color: #efefef;
  background-size:100%;
}

.item-2 .home_examples-image {
  background-image: url('img/ekata/Ekata_Header_home.png');
  background-position: center center;
  background-size:100%;
}

.item-3 .home_examples-image {
  background-image: url('img/refresh/refresh_landing.jpg');
  background-position: center top;
  background-size:100%;
}

.item-4 .home_examples-image {
  background-image: url('img/website/marketingcover.png');
  background-position: center top !important;
}

.item-5 .home_examples-image {
  background-image: url('img/ux/cmfinal.png');
}

.item-6 .home_examples-image {
  background-image: url('img/skal/skal_cover.jpg');
}

.item-7 .home_examples-image {
  background-image: url('img/ux/ps_flow_2.png');
  background-position: center top !important;
}

.footer {
  display: flex;
  justify-content: center;
  padding: 80px;
}

/* Project Pages */
.project_page-header {
  margin-top: 80px;
}

.project_page-header .bvrebrand_header {
  background-image: url('img/bvbrand/project_cover_bv.gif');
  background-size: cover;
  background-position: center center;
  background-color: #efefef;
  border: 4px solid #121212;
}

.project_page-header .skal_header {
  background-image: url('img/skal/hero_skal.png');
  background-size: contain;
  background-position: center center;
  background-color: #efefef;
  background-repeat: no-repeat;
  border: 4px solid #121212;
}

.project_page-header .bv_ui_header {
  background-image: url('img/refresh/refresh_landing.jpg');
  background-size: cover;
  background-position: left top%;
  background-color: #efefef;
  background-repeat: no-repeat;
  border: 4px solid #121212;
}

.project_page-header .reviewer_header {
  background-image: url('img/ux/cmfinal.png');
  background-size: cover;
  background-position: center top;
  background-color: #efefef;
  background-repeat: no-repeat;
  border: 4px solid #121212;
}

.project_page-header .bv_web_header {
  background-image: url('img/website/bv_site_full.png');
  background-size: cover;
  background-position: center top;
  background-color: #efefef;
  background-repeat: no-repeat;
  border: 4px solid #121212;
}


.project_page-header .ek_rebrand {
  background-image: url('img/ekata/Ekata_Header.png');
  background-size: cover;
  background-position: center center;
  background-color: #efefef;
  background-repeat: no-repeat;
  border: 4px solid #121212;
}

.project_page-header .saas_rethink {
  background-image: url('http://toddburton.me/img/ux/ps_flow_1.png');
  background-size: cover;
  background-position: center center;
  background-color: #fff;
  background-repeat: no-repeat;
  border: 4px solid #121212;
}


.project_page-header .header_image {
  width: 100%;
  height: 300px;
}

.project_page-header p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #000000;
  letter-spacing: 0.33px;
  text-align: left;
  line-height: 24px;
  padding-top: 16px;
  width: 75%;
}

.project_spacing {
  padding-top: 80px;
}

/* Responsive */
@media screen and (min-width: 500px) {
  .home_examples-grid, .content_block-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 600px) {
  #site_wrapper, .footer {
    padding: 45px;
  }

  .project_page-header, h1, .home_hr, .home_examples {
    margin-top: 45px;
  }

  h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .project_page-header p {
    width: 100%;
  }

  .project_spacing {
    padding-top: 0px;
  }

  .home_examples-grid {
    margin-top: 0px;
  }

  .card .home_examples-image {
    height: 200px;
  }

  .home_examples-grid, .content_block-grid {
    grid-template-columns: 1fr;
  }

  .home_header li a, .footer a {
    font-size: 13px;
  }

  .home_examples h2 {padding-bottom: 25px;}
  .card h3 {line-height: 26px;}


}

@media only screen and (min-width: 850px) {
  .home_examples-grid, .content_block-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .item-1 {
    grid-column: 1/ span 4;
  }

  .item-2 {
    grid-column: 1/ span 2;
  }

  .item-3 {
    grid-column: 3/ span 2;
  }

  .item-4 {
    grid-column: 1/ span 2;
  }

  .item-5 {
    grid-column: 3/ span 2
  }

  .item-6 {
    grid-column: 1/ span 2
  }

  .item-7 {
    grid-column: 3/ span 2
  }


  .content_block-grid .item-2 {
    grid-column: 1/ span 2;
  }

  .content_block-grid .item-3 {
    grid-column: 3/ span 2;
  }


  #bv_refresh_content .content_block-grid .item-1,
  #skal_content .content-block-grid .item-1,
  {
    grid-column: 1/ span 4 !important;
  }



}