@charset "UTF-8";

/* Start HEADER  */
@-webkit-keyframes static-header__img--animate {
  0%    { opacity: 1; }
  45%   { opacity: 1; }
  55%   { opacity: 0; }
  100%  { opacity: 0; }
}
@keyframes static-header__img--animate {
  0%    { opacity: 1; }
  45%   { opacity: 1; }
  55%   { opacity: 0; }
  100%  { opacity: 0; }
}

@keyframes fade-in {
  from {
    opacity: 0; 
    transform: scale(.8,.8)
  }
  to {
    opacity: 1;
  }
}
.content-page--fade-in-element {
  animation: fade-in 1.4s;
}

@media all and (min-width: 1024px) {
  .content-page--404 {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    width: 100%;
    max-width: 1500px;
  }  
  .content-page__images.content-page__images--main,
  .content-page__main-content {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 50%;
    max-width: 50%;
  }
  .content-page__main-content {
    margin: 0 20px;
  }  
}
@media all and (min-width: 1400px) {
  .content-page__images.content-page__images--main {
    width:55vw;
    max-width:inherit;
  }
  .content-page__main-content {
    width: 45vw;
    max-width:620px;
    margin: 0 34px;
  }
}
.content-page--hidden {
  opacity: 0;
}
.content-page * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.content-page {
  max-width: 1500px;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  border: 0;
  clear: both;
  position: relative;
}   
.content-page__header {
  clear: both;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  margin: 0 auto 12px;
}
.content-page__header-lock-up,
.content-page__collection__card {
  position: relative;
  margin: 30px auto 8px;
}
.content-page__header-lock-up .content-page__404 {
    position: absolute;
    top: -68px;
    right: 5px;
}
@media all and (max-width: 768px) {
      .content-page__header-lock-up {
          padding: 0 20px;
      }
    }
@media all and (min-width: 1024px) {
    .content-page__header-lock-up {
      margin: 40px auto 8px;
    }  
}
@media all and (min-width: 1200px) {
    .content-page__header-lock-up {
      margin: 60px auto 8px;
    }  
}

.content-page__images {
    width: 100%;
    margin: 0 auto;
    height: auto;
    position: relative;
}
.content-page__img {
  width: 100%;
  margin: 0 auto;
  height: auto;
}

.content-page__links {
  text-align: left;
}

.content-page__heading,
.content-page__text,
.content-page__404,
.content-page-text-intro {
  color: #000;  
  text-align: left;
  letter-spacing: 0;  
}

.content-page__heading,
.content-page__text, 
.content-page__text--intro {  
  font: 18px/1 "Portrait Web";
}
.content-page__text {
  padding: 0 20px;
  margin: 0 auto;
}

.content-page__heading {
  font-weight: 600;
  line-height: 1em;
}
.content-page__heading--level-1 {
    position: relative;
    font: normal bold 27px/1 "PortraitBold",serif;
    font-weight: 400;
    margin: 30px auto 0;
    padding: 0;
    width: 100%;
    z-index: 1;
}
.content-page__heading--sub {
  color: #333;
  font: normal bold 18px/1 "PortraitBold",serif;
  margin: 11px 0;
  display: block;
}
.content-page__text.content-page__text--intro {
  font: normal normal 16px/21px "PortraitRegular",serif;
  line-height: 22px;
  color: #333;
}

.content-page__heading.content-page__heading--level-2 {
  font: normal bold 18px/20px "PortraitBold",serif;
}

@media all and (min-width: 769px) {
  .content-page__heading--level-1 {
    font: 32px/1 "Portrait Web";
    margin: 30px auto 0 16px;
  }

  .content-page__text {
    padding: 0 16px;
  }
  .content-page__heading--sub {
    font: 22px/1 "Portrait Web";
  }

  .content-page__text.content-page__text--intro {
    font: 14px/22px "Portrait Text Web", Georgia,Times, serif;
  }

  .content-page__heading.content-page__heading--level-2 {
    font: 18px/20px "Portrait Web";
    margin: 12px auto;
  }
}

.content-page__404 {
  font: normal bold 24vw/1 "PortraitBold",serif;
  color: #919191;  
  text-align: left;
  letter-spacing: 0;  
  text-transform: uppercase;
  z-index: 1;
}

@media all and (min-width: 380px) {
  .content-page__header-lock-up .content-page__404 {
    font-size: 90px;
  }
}

@media all and (min-width: 480px) {
  .content-page__header-lock-up .content-page__404 {
    font: 110px/1 "Portrait Web";
    top: -61px;
    right: -5px;
  }
}

@media all and (min-width: 769px) {
  .content-page__text {
    font-size: 17px;
  }
  
  .content-page__header-lock-up .content-page__404 {
    top: -47px;
  }
}


/* Cards - link blocks */
.content-page__collection {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  clear: both;
  margin: 0 20px;
}
.content-page__collection__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; 
  width: calc(50% - 4px);
  margin: 24px 0 0 0;
}
.content-page__collection__card--double {
  display: block;
  width: 100%;
  padding: 0 20px;
}

@media all and (min-width: 480px) and (max-width: 769px) {
  .content-page__collection__card--double {
     padding: 0 16px;
  }
}

.content-page__img--card {
  width: 100%;
  max-width: 450px;
  margin: 0;
}
@media all and (min-width: 480px) {
  .content-page__collection {
     margin: 0 16px;
  }
}
@media all and (min-width: 641px) and (max-width: 1023px) {
  .content-page__collection__card:not(.content-page__collection__card--double) {
    width: calc(50% - 8px);
  }
}

  
/* Images */
.content-page__images {
  margin: 0;
}

/* Link lists */
.content-page__ctas-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: left;
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-page__ctas-list-item {
  margin: 0;
  padding: 0;
  width: initial;
}
.content-page__cta {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid #DDD;
  border-radius: 3px;
  font: normal normal 12px/20px "PortraitRegular",serif;
  color: #333;
  background-color: #F3F3F3;
  text-decoration: none;
  line-height: 1;
  letter-spacing: 0;
  padding: 0.3em 0.5em;
  margin: 0 8px 8px 0;
  transition: 0.3s;
  text-align: center;
  width: inherit;
  text-transform: uppercase;
}

@media all and (min-width: 769px) {
    .content-page__cta {
        font: 11px/1 "Darby Sans Text Web Bold";
    }
}
    
.content-page__cta:hover,
.content-page__cta:focus {
  border-color: #000;
  background-color: #000;
  color: #fff;
}


/* Hide sale / skinny banner*/
#skinny-banner-header {
  display: none;
}