/* Article CTAs */
article.card {
    display: block;
    position: relative;
    float: left;
    clear: none;
    font-size: 15px;
    margin: 0;
}
article .card-wrapper {
    display: table;
    width: 100%;
}
article.card-split-cta {
    text-align: left;
    font-weight: 300;
}
article.card-split-cta.large {
    font-size: 16px;
}
article.card .card-outer {
    display: table-row;
    height: 270px;
}
article.card-split-cta.large .card-outer {
    height: 360px;
}
article.card .card-inner {
    display: table-cell;
    vertical-align: middle;
    padding: 0 21px;
}
article.card.intel .card-inner {
    padding: 0 70px;
}
article.card-split-cta .content {
    color: #fff;
}
article.card-split-cta.white .content {
    color: #555;
}
article.card-split-cta .cta-header {
    font-weight: 600;
    letter-spacing: 0.1em;
    font-size: 1.1em;
    text-transform: uppercase;
    line-height: 1.3;
}
article.card-split-cta.large .cta-header {
    font-size: 1.6em;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin-top: 0.5em;
    margin-bottom: 0.25em;
}
article.card-split-cta .image-wrapper {
    width: 100%;
    overflow: hidden;
}
article.card-split-cta .image-wrapper img {
    width: 100%;
}
article.card-split-cta:hover .image-wrapper img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    transition: all 0.42s;
}
article.card-split-cta .cta-link a {
    background: transparent;
    display: inline-block;
    text-transform: uppercase;
    padding: 0.5em 2.5em;
    border: solid thin #fff;
    font-weight: 100;
    color: #fff;
    transition: background-color 0.42s,color 0.42s,border-color 0.42s;
    margin-top: 2.2em;
}
article.card-split-cta.large .cta-link a {
    padding: 0.8em 2.2em;
}
article.card-split-cta.white .cta-link a {
    border: solid thin #555;
    color: #555;
}
article.card-split-cta:hover .cta-link a {
    background: #fff;
    color: #273849;
}
article.card-split-cta.white:hover .cta-link a {
    background: #6c7d90;
    color: #fff;
    border: solid thin #6c7d90;
}
article.card-split .card-inner:after {
    content: '';
    position: absolute;
    top: 3em;
    border: solid 1.1em transparent;
    border-top-width: 0.75em;
    border-bottom-width: 0.75em;
    z-index: 9;
}
article.card-split-cta.large .card-inner:after {
    border-top-width: 1em;
    border-bottom-width: 1em;
}
article.card-split.content-left .card-inner:after {
    right: -2em;
    border-left-color: #fff;
}
article.card-split.content-right .card-inner:after {
    left: -2em;
    border-right-color: #fff;
}
article.card-image {
  background: #000;
}
article.card-image .card-inner {
    padding: 0;
}
article.card-image .card-image-wrapper {
    width: 100%;
    overflow: hidden;
    height: 270px;
}
article.card-image .card-image-wrapper img {
    width: 100%;
    transition: all 0.42s;
    max-width: 100%;
    height: auto;
    vertical-align: top;
}
article.card-image:hover .card-image-wrapper img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    transition: all 0.42s;
}
article.card-image .card-image-wrapper a:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 1vw;
    left: 1vw;
    width: 3.6rem;
    height: 4.068rem;
    line-height: 11vw;
    font-size: 5vw;
    z-index: 1;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    opacity: 0.84;
    transition: opacity 0.42s;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: url('../images/ui/icon-photo.png');
    z-index: 9;
}
article.card-full-cta h2 {
    margin-bottom: 0;
    font-weight: 300;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(39,56,73,0.8);
    height: 3.1em;
    line-height: 3.1em;
    overflow: hidden;
}
article.card-full-cta h2.playlist-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 2em;
}
article.card-intel {

}
.double-row {
    overflow: hidden;
    max-height: 37.4vw;
}
.card-double {
    position: relative;
    overflow: hidden;
    height: auto;
    float: left;
}
article.card-intel {
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    overflow: hidden;
}
 article.card-intel .card-background {
    width: 100%;
}
 article.card-intel .card-background img {
    width: 100%;
    transition: all 0.42s;
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

 article.card-intel .card-bottom {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    bottom: -1px;
    text-align: left;
}
 article.card-intel .card-bottom .text-wrapper {
    background: rgba(39,56,73,0.8);
    color: #fff;
    padding: 0.3em 1.3em;
    line-height: 3em;
    vertical-align: middle;
    font-weight: 300;
}
 article.card-intel .card-bottom .text-wrapper img.inline-icon {
    max-height: 2em;
    width: auto;
    vertical-align: middle;
    margin: -1px 0.42em 0 0;
    display: inline-block;
}
 article.card-intel:hover .card-image img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    transition: all 0.42s;
}
@media screen and (max-width: 1440px) {
  article.card {
    font-size: 1.05vw;
  }
  article.card .card-outer {
    height: 18.7vw;
  }
  article.card-split-cta.large .card-outer {
    height: 25vw;
  }
  article.card .card-inner {
    padding: 0 1.5vw;
    position: relative;
  }
  article.card.intel .card-inner {
    padding: 0 5vw;
    position: relative;
  }
  article.card-split-cta .cta-header  {
    font-weight: 600;
    letter-spacing: 0.1em;
    font-size: 1.1em;
    line-height: 1.3;
  }
  article.card-split-cta.large .cta-header {
    font-size: 1.7vw;
  }
  article.card-split-cta.large .cta-body-copy {
    font-size: 1.1vw;
  }
  article.card-split-cta.white .cta-link a {
    font-size: 1.1vw;
  }
  article.card-image .card-inner {
    padding: 0;
  }
  article.card-image .card-inner .content {
    width: 100.5%;
  }
  article.card-image .card-image-wrapper {
    height: 18.7vw;
  }
  article.card-full-cta h2 {
    font-size: 1.1vw;
  }
}
@media screen and (max-width: 890px) {
  article.card-split-cta .cta-body-copy {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  article.card {
    width: 100%;
    max-width: none;
    flex: auto;
  }
  article.card .card-outer {
    height: 56.2vw;
  }
  article.card-split-cta.large .card-outer {
    height: 50vw;
  }
  article.card .card-inner {
    padding: 0 3vw;
  }
  article.card-split-cta .cta-header {
    font-size: 1.1rem;
  }
  article.card-split-cta.large .cta-header {
    font-size: 4vw;
  }
  article.card-split-cta.large .cta-body-copy {
    display: block;
  }
  article.card-split-cta.large .cta-body-copy {
    font-size: 2vw;
  }
  article.card-split-cta .cta-link a {
    font-size: 2.5vw;
  }
  article.card-split-cta.large .cta-link a {
    font-size: 2vw;
  }
  article.card-split .card-wrapper:after {
    content: '';
    position: absolute;
    top: 3em;
    border: solid 1.1em transparent;
    border-top-width: 0.75em;
    border-bottom-width: 0.75em;
    z-index: 9;
    right: -10px;
    border: solid 2.8em transparent;
    border-top-width: 2em;
    border-bottom-width: 2em;
    right: -5.6em;
  }
  article.card-split.large .card-wrapper:after {
    top: 2em;
    border: solid 1.2em transparent;
    border-top-width: .8em;
    border-bottom-width: .8em;
    right: -2.2em;
  }
  article.card-split .card-inner:after {
    display: none;
  }
  article.card-image .card-inner {
    padding: 0;
  }
  article.card-image .card-image-wrapper {
    height: 56.2vw
  }
  article.card-full-cta h2 {
    font-size: 3.8vw;
    margin-bottom: 0;
    font-weight: 300;
  }
  .double-row {
    max-height: none;
  }
  .card-double {
    float: none;
    width: 100%;
    max-width: none;
  }
  article.card-intel .card-bottom .text-wrapper {
    font-size: 16px;
  }
}
@media screen and (max-width: 480px) {
  article.card-split-cta .cta-link a {
    font-size: 0.8rem;
    font-weight: 300;
  }
  article.card-split-cta.large .cta-link a {
    font-size: 3vw;
    font-weight: 300;
  }
  article.card-split-cta.large .cta-body-copy {
    display: none;
  }
  article.card-intel .card-bottom .text-wrapper {
    font-size: 3.5vw;
  }
}

/* Countdown */
#countdown-initiate {
  display: none;
}
article.card.countdown {
    background-image: url('../images/background/countdown-background.jpg');
    -webkit-background-size: cover;
    background-size: cover;
}
.countdown-wrapper {
    text-transform: uppercase;
}
.countdown-message {
    color: #edb752;
    font-weight: 700;
    font-size: 1.1em;
    text-align: center;
}
#countdown {
    /*zoom: 0.75;
    -moz-transform: scale(0.75)*/
}
.flip-clock-wrapper {
    text-align: center;
    position: relative;
    width: 100%;
    margin: 0 1em 1em;
}
.flip-clock-wrapper ul {
    margin-bottom: 0.5rem;
    border-radius: 0;
    width: 2.7rem;
    height: 4.05rem;
    margin: 0 5px 5px;
}
.flip-clock-wrapper ul li {
    line-height: 60px;
}
.flip-clock-wrapper ul li a div.down {
    border-radius: 0;
}
.flip-clock-wrapper ul li a div div.inn {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 200%;
    color: #d09b4a;
    font-size: 3.2rem;
    font-weight: 500;
    text-shadow: 0 1px 2px #000;
    text-align: center;
    background: #202020;
    background-image: url('../../img/home/countdown/countdown-digits.jpg');
    -webkit-background-size: cover;
    background-size: cover;
    border-radius: 0;
}
.flip-clock-divider {
    color: #c2c2c2;
    left: -15px;
    top: -5px;
}
.flip-clock-label {
    color: #fff;
    font-size: 0.7rem;
    font-weight: 400;
    display: block;
    line-height: 1;
}
.flip-clock-dot {
    display: block;
    background: #c2c2c2;
    width: 6px;
    height: 6px;
    position: absolute;
    border-radius: 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    left: 5px;
}
.flip-clock-dot.top {
    bottom: 25px;
}
.flip-clock-dot.bottom {
    bottom: 45px;
}
.flip-clock-divider .flip-clock-label {
    top: -60px;
}
.clock-group {
    display: inline-block;
    margin-right: 15px;
}
.clock-group#seconds {
    margin-right: 0;
}
.flip-clock-divider.days,
.flip-clock-divider.seconds {
    display: none;
}
@media screen and (max-width: 1440px) {
  .flip-clock-wrapper {
    margin: 1em;
  }
  .flip-clock-wrapper .flip {
    width: 2.2rem;
    height: 3.3rem;
  }
  .flip-clock-wrapper ul li {
    line-height:  50px;
  }
  .flip-clock-wrapper ul li a div div.inn {
    font-size: 2.5rem;
  }
  .flip-clock-dot.top {
    top: 20px;
  }
  .flip-clock-dot.bottom {
    bottom: 40px;
  }
  .flip-clock-divider {
    height: 80px;
  }
}
@media screen and (max-width: 1200px) {
  .flip-clock-wrapper .flip {
    width: 1.6rem;
    height: 2.4rem;
  }
  .flip-clock-wrapper ul li {
    line-height:  35px;
  }
  .flip-clock-wrapper ul li a div div.inn {
    font-size: 1.8rem;
  }
  .flip-clock-dot {
    height: 5px;
    width: 5px;
  }
  .flip-clock-dot.top {
    top: 16px;
  }
  .flip-clock-dot.bottom {
    bottom: 48px;
  }
  .flip-clock-label {
    font-size: 0.6rem;
  }
}
@media screen and (max-width: 1024px) {
  .flip-clock-wrapper {
    margin: 0.5rem 0;
  }
  .flip-clock-wrapper .flip {
    width: 1.4rem;
    height: 2.1rem;
  }
  .flip-clock-wrapper ul {
    margin: 0 2px 5px;
  }
  .flip-clock-wrapper ul li {
    line-height:  35px;
  }
  .flip-clock-wrapper ul li a div div.inn {
    font-size: 1.4rem;
  }
  .flip-clock-divider {
    height: 60px;
  }
  .flip-clock-dot {
    height: 4px;
    width: 4px;
  }
  .flip-clock-dot.top {
    top: 16px;
  }
  .flip-clock-dot.bottom {
    bottom: 32px;
  }
  .flip-clock-label {
    font-size: 0.5rem;
  }
}
@media screen and (max-width: 768px) {
  article.countdown  .card-wrapper {
    margin: 0 auto;
  }
  .flip-clock-wrapper .flip {
    width: 2.7rem;
    height: 4.05rem
  }
  .flip-clock-wrapper ul li {
    line-height: 60px;
  }
  .flip-clock-wrapper ul li a div div.inn {
    font-size: 3.2rem;
  }
  .flip-clock-divider {
    height: 100px;
  }
  .flip-clock-divider.seconds {
    display: inline-block;
  }
  .flip-clock-dot {
    height: 6px;
    width: 6px;
  }
  .flip-clock-dot.top {
    top: 25px;
  }
  .flip-clock-dot.bottom {
    bottom: 45px;
  }
  .flip-clock-label {
    font-size: 0.7rem;
  }
  .countdown-message {
    font-size: 1.1rem;
  }
}
@media screen and (max-width: 525px) {
  .flip-clock-wrapper .flip {
    width: 1.8rem;
    height: 2.7rem
  }
  .flip-clock-wrapper ul li {
    line-height: 45px;
  }
  .flip-clock-wrapper ul li a div div.inn {
    font-size: 1.8rem;
  }
  .flip-clock-divider {
    height: 60px;
  }
  .flip-clock-divider.seconds {
    display: inline-block;
  }
  .flip-clock-dot {
    height: 5px;
    width: 5px;
  }
  .flip-clock-dot.top {
    top: 18px;
  }
  .flip-clock-dot.bottom {
    bottom: 24px;
  }
  .flip-clock-label {
    font-size: 0.5rem;
  }
  .countdown-message {
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 400px) {
  .flip-clock-wrapper .flip {
    width: 1.6rem;
    height: 2.4rem
  }
  .flip-clock-wrapper ul li {
    line-height: 38px;
  }
  .flip-clock-dot.top {
    top: 18px;
  }
  .flip-clock-dot.bottom {
    bottom: 28px;
  }
}
@media screen and (max-width: 320px) {
  .flip-clock-wrapper .flip {
    width: 1.4rem;
    height: 2.1rem
  }
  .flip-clock-wrapper ul li {
    line-height: 35px;
  }
  .flip-clock-wrapper ul li a div div.inn {
    font-size: 1.5rem;
  }
  .flip-clock-divider {
    height: 60px;
  }
  .flip-clock-divider.seconds {
    display: inline-block;
  }
  .flip-clock-dot {
    height: 4px;
    width: 4px;
  }
  .flip-clock-dot.top {
    top: 16px;
  }
  .flip-clock-dot.bottom {
    bottom: 32px;
  }
  .flip-clock-label {
    font-size: 0.5rem;
  }
  .countdown-message {
    font-size: 0.7rem;
  }
}
