/**********************************************************/
/* Misc. overrides */
/**********************************************************/

.nav-link-selected {
    color: #ff3000;
}



/**********************************************************/
/* card style overrides */
/**********************************************************/


/* Make Featured card images responsive and square! Thanks to https://spin.atomicobject.com/2015/07/14/css-responsive-square/ */
/* this is the magic that gives the article cards height! */

.card-media-wrap:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.grid-item-article-only .card:after {
  content: "";
  display: block;
  padding-bottom: 70%;
}

/*
.article-col-2 .card:after {
  content: "";
  display: block;
  padding-bottom: 70%;
}
*/

/* use fixed height for featured video card on article page */
.card-sidebar {
    height: 200px;
}
@media screen and (max-width:991px) {
    .card-sidebar {
        height: 400px;
    }    
}
@media screen and (max-width:479px) {
    .card-sidebar {
        height: 200px;
    } 
}
/* make video embed fill container */
.embed-video {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: none;    
}


/* force image cover on article cards */
.card-article-image {
   background-size: cover !important; 
   background-position: center center !important;
}


/* position video in featured cards */
.card-media-wrap iframe {
    position: absolute;
    width: 100%;
    height: 100%; 
    border: none;   
}


/* remove border lines override */
.card-source .card-tag:first-child,
.card-tag-wrap .card-tag:last-child {
	border-right: none !important;
}



/* show the correct number of article cards for each grid */
/**********************************************************/

/* hide the LAST of the 4 article cards on tablet portrait and mobile landscape */
@media screen and (max-width:991px) {
        .nested-grid a:nth-child(4) {
        display: none;
    }
}

/* show the last card again on mobile portrait */
@media screen and (max-width:479px) {
        .nested-grid a:nth-child(4) {
        display: flex;
    }
}










/**********************************************************/
/* article page overrides */
/**********************************************************/



.article-wrap p {
    margin: 30px 0;
}
@media screen and (max-width:479px) {
.article-wrap p {
    margin: 20px 0;
}
}
.article-wrap p:first-child {
	color: #303030;
    font-weight: 700;
}
.article-wrap a,
.article-wrap a:visited {
    color: #ff3000;
    text-decoration: none;
    -webkit-transition: color 200ms ease;
    transition: color 200ms ease;
}
.article-wrap .article-next-button,
.article-wrap .article-next-button:visited,
.article-wrap .article-next-button:hover {
    color: white !important;
    -webkit-transition: color 200ms ease;
    transition: color 200ms ease;  
}
.article-wrap a:hover {
	color: #333;	
}
.article-wrap img {
    display: inline-block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 10px 0 40px 0;
    padding: 0;
}
.article-wrap .placeholder-img {
	margin: 0;
}
.article-wrap blockquote {
	position: relative;
	padding-top: 40px;
}
.article-wrap blockquote:before {
    content: '';
    width: 41px;
    height: 41px;
    position: absolute;
    top:0;
    left:0;
    background-image: url("images/icon-quote-red.svg.html");
    background-repeat: no-repeat;
}
.best-of-item:last-child {
	margin-bottom: 0;
}






/**********************************************************/
/* video styles */
/**********************************************************/


/* remove any placeholder images applied in 'thehooknew.css' */
.card-media-wrap,
.card-featured-image {
    background-image: none;
}

.video-play-button {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-sizing: content-box;
  display: block;
  width: 32px;
  height: 44px;
  /* background: #fa183d; */
  border-radius: 50%;
  padding: 18px 20px 18px 28px;
}

/*
@media screen and (max-width:991px) {
    .video-play-button {
        top: 40%;  
    }
}
*/

.video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #ff3000;
  border-radius: 50%;
  animation: pulse-border 1500ms ease-out infinite;
}
.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #ff3000;
  border-radius: 50%;
  transition: all 200ms;
}
.video-play-button:hover:after {
  background-color: darken(#fa183d, 10%);
}
.video-play-button img {
  position: relative;
  z-index: 3;
  max-width: 100%;
  width: auto;
  height: auto;
}
.video-play-button span {
  display: block;
  position: relative;
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 32px solid #fff;
	border-top: 22px solid transparent;
	border-bottom: 22px solid transparent;
}
@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}
.video-play-button:hover {
}



/**********************************************************/
/* background video overrides */
/**********************************************************/

.w-background-video {
  position: relative;
  overflow: hidden;
  height: 550px;
}
@media screen and (max-width:991px) {
  .w-background-video {
    height: 400px;
  }
}
@media screen and (max-width:767px) {
  .w-background-video {
    height: 300px;
  }
}
@media screen and (max-width:479px) {
  .w-background-video {
    height: 180px;
  }
}
.w-background-video > video {
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  right: -100%;
  bottom: -100%;
  top: -100%;
  left: -100%;
  margin: auto;
  min-width: 100%;
  min-height: 100%;
  z-index: -100
}


/**********************************************************/
/* slick slider overrides */
/**********************************************************/

.slick-track{
    display: flex;
}
.slick-list {
	overflow: visible !important;
}
.slick-slide{
    display: flex !important;
    -webkit-box-direction: normal;
    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
    height: auto;
    flex-basis: 0px;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    opacity: 0.4;
    transition: all .25s ease-in-out;
    outline: none !important;
}
.slick-active.slick-center {
    opacity: 1;
    transform: scale(1.08);
    backface-visibility: hidden;  
}


/**********************************************************/
/* Originals page overrides */
/**********************************************************/

/*
.img-overlay  { 
    position:absolute;
    opacity 0.1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='3'><rect width='1' height='1' fill='rgba(0,0,0,0.2)'/></svg>");
    width:100%;
    height:100%;
}
*/

.o-featured-slider {
    height: 600px;  
}

.o-featured-slide {
    height: 100%;
    background-position: 50% 50%;
    background-size: cover;      
}

@media screen and (max-width:991px) {
    .o-featured-slider {
        height: 400px;  
    }
}

@media screen and (max-width:767px) {
    .o-featured-slider {
        height: 250px;  
    }
}

@media screen and (max-width:479px) {
    .o-featured-slider {
        height: 250px;  
    }
}



/* Originals page: the facebook videos in the hero slider get cut-off */
figure.w-lightbox-figure {
    overflow: hidden !important;
    padding-bottom: 100% !important;
    position: relative !important;
    height: 0 !important;    
}
    
    
.w-lightbox-embed {
    height: 96vh !important;
}



/* Until we can figure out how to get 1:1 videos to fit their frame, hide the lightbox nav strip and force video container full page height */
.w-lightbox-strip { display: none !important; }
.w-lightbox-content { height: 96vh !important; }


.card-media-inner-wrap {
    position: absolute;
    width: 100%;
    height: 100%;    
}

@media screen and (max-width:991px) {
    /*.card-media-inner-wrap {
        top: 22.5%;   
    }*/
    .fb-video {
        top: 22.5%;
    }
}



/**********************************************************/
/* The 'horizon swiper' is used for the scrolling tag bar */
/**********************************************************/


/*
* Horizon Swiper Base Styles
* Version 1.1.1
* Domain ( http://horizon-swiper.sebsauer.de/ )
* Copyright 2015 Sebastian Sauer ( http://www.sebsauer.de/ )
* Licensed under MIT ( https://github.com/sebsauer90/horizon-swiper/blob/master/LICENSE )
*/
.horizon-swiper,.horizon-swiper *,.horizon-swiper :after,.horizon-swiper :before{box-sizing:border-box}.horizon-swiper{position:relative;background:#fff}.horizon-swiper a:focus,.horizon-swiper button:focus{outline:0}.horizon-swiper.mouse-drag,.horizon-swiper.mouse-drag *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.horizon-swiper .horizon-outer{overflow:hidden}.horizon-swiper .horizon-inner{padding:0 0 20px;text-align:center;white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.horizon-swiper .horizon-item{display:inline-block;position:relative;white-space:nowrap}.horizon-swiper .horizon-dots{display:none;text-align:center}.horizon-swiper .horizon-dots .horizon-dot{display:inline-block;margin:0 3px}.horizon-swiper.initialized .horizon-dots{display:block}.horizon-swiper .horizon-next,.horizon-swiper .horizon-prev{display:none}.horizon-swiper.initialized .horizon-next,.horizon-swiper.initialized .horizon-prev{display:block}.horizon-swiper.first-item .horizon-prev,.horizon-swiper.last-item .horizon-next{opacity:.2}

/*
* Horizon Swiper
* Version 1.1.1
* Domain ( http://horizon-swiper.sebsauer.de/ )
* Copyright 2015 Sebastian Sauer ( http://www.sebsauer.de/ )
* Licensed under MIT ( https://github.com/sebsauer90/horizon-swiper/blob/master/LICENSE )
*/
.horizon-swiper{
	background:transparent;
}
.horizon-swiper.arrows{
	padding:0 40px;
}
@media screen and (max-width:479px) {
.horizon-swiper.arrows{
	padding:0;
}
}
.horizon-swiper .horizon-dots{
	padding:0 0 6px
}
.horizon-swiper .horizon-dots .horizon-dot {
    width:12px;
    height:12px;
    padding:0;
    font-size:0;
    line-height:1;
    background:0 0;
    border:1px solid #2c3e50;
    border-radius:50%;
    -webkit-transition:background .3s;
    transition:background .3s
}
.horizon-swiper .horizon-dots .horizon-dot.active {
    background:#2c3e50
}
.horizon-swiper .horizon-next,.horizon-swiper .horizon-prev{
    position:absolute;
    top:5px;
    bottom:5px;
    width:40px;
    border:none;
    outline:0;
    background:center no-repeat
}
@media screen and (max-width:479px) {
.horizon-swiper .horizon-next,.horizon-swiper .horizon-prev {
	top: -35px;
    bottom: 50px;
    width:50px;
}
}
.horizon-swiper .horizon-next:active,.horizon-swiper .horizon-next:focus,.horizon-swiper .horizon-next:hover,.horizon-swiper .horizon-prev:active,.horizon-swiper .horizon-prev:focus,.horizon-swiper .horizon-prev:hover{outline:0}.horizon-swiper .horizon-prev{
    left:5px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSI2NSIgdmlld0JveD0iMCAwIDI2IDY1Ij4gIDxwb2x5bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgcG9pbnRzPSIuNzU1IDYyLjc5NiAyNC4wNDUgMzEuNjUgLjc1NiAuNTA1IiB0cmFuc2Zvcm09InJvdGF0ZSgtMTgwIDEzIDMyKSIvPjwvc3ZnPg==);
}
.horizon-swiper .horizon-next {
    right:5px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSI2NSIgdmlld0JveD0iMCAwIDI2IDY1Ij4gIDxwb2x5bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgcG9pbnRzPSIuNzU1IDYyLjc5NiAyNC4wNDUgMzEuNjUgLjc1NiAuNTA1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIi8+PC9zdmc+);
}

/* use thinner arrows for mobile because they look better */
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    .horizon-swiper .horizon-next:active,.horizon-swiper .horizon-next:focus,.horizon-swiper .horizon-next:hover,.horizon-swiper .horizon-prev:active,.horizon-swiper .horizon-prev:focus,.horizon-swiper .horizon-prev:hover{outline:0}.horizon-swiper .horizon-prev{
    		background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSI2MyIgdmlld0JveD0iMCAwIDI1IDYzIj4gIDxwb2x5bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHBvaW50cz0iLjc1NSA2Mi43OTYgMjQuMDQ1IDMxLjY1IC43NTYgLjUwNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE4MCAxMi41IDMxLjUpIi8+PC9zdmc+);
    }
    
    .horizon-swiper .horizon-next{
    		background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSI2MyIgdmlld0JveD0iMCAwIDI1IDYzIj4gIDxwb2x5bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHBvaW50cz0iLjc1NSA2Mi43OTYgMjQuMDQ1IDMxLjY1IC43NTYgLjUwNSIvPjwvc3ZnPg==);
    }
}










/**********************************************************/
/* Ads */
/**********************************************************/



/* ad styles direct import from previous site */

.ad--inarticle {
  border: 1px solid #dddddd;
  margin-bottom: 20px;
  border-radius: 3px;
  position: relative;
  padding: 5px;
  overflow: hidden;
  height: auto; }
  
.ad--inarticle .ad__link {  
  text-decoration: none !important;
  color: inherit !important;
}
  

@media screen and (min-width: 30rem) {
  .ad--inarticle .ad__link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center; } }

.ad--inarticle .ad__img {
  height: 100%;
  width: 100%;
  background-image: none !important;
  background-attachment: scroll;
  background-color: grey;
  background-size: 100% auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border-radius: 2px 2px 0 0; }
  @media screen and (min-width: 30rem) {
    .ad--inarticle .ad__img {
      width: 55%;
      float: left;
      margin-bottom: 0; } }

.ad--inarticle .ad__text-wrap {
  height: 100%;
  padding: 4% 3% 2%; }
  @media screen and (min-width: 30rem) {
    .ad--inarticle .ad__text-wrap {
      padding-bottom: 4%; } }

.ad--inarticle .ad__headline-wrap {
  padding: 0;
  overflow: visible; }

.ad--inarticle .ad__headline {
  font-size: calc(112.5% + 0.5vw);
  font-weight:600 !important;
  display: block !important;
  margin-bottom: 10px !important;
  line-height: 1.2 !important; }
  @media screen and (min-width: 60.63rem) {
    .ad--inarticle .ad__headline {
      font-size: 1.4rem; } }

.ad--inarticle .ad__meta-wrap {
  position: relative; }

.ad--inarticle .ad__meta-promotor {
  position: relative;
  bottom: 0;
  left: 0; }

.ad--inarticle .str-description {
    font-weight: 300;
}

.ad--inarticle .str-title {
    font-size: 22px !important;
    line-height: 25px !important;
}



.article-next-button a,
.article-next-button a:link,
.article-next-button a:visited {
  color: white;
}