/* Media */

.ngk-media-block {
  position: relative;
}

.ngk-media-block .ngk-media-block-image,
.ngk-media-block .ngk-media-block-video {
  position: relative;
  display: block;
  width: 100%;
  font-size: 0;
}

.ngk-media-block .ngk-media-block-video::after {
  content: "\A";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  opacity: 0.9;
  background-image: url("../img/triangle-right-white.svg");
  background-size: 80px 100px;
  background-position: center center;
  background-repeat: no-repeat;
  transition: opacity 0.5s;
}

.ngk-media-block .ngk-media-block-video:hover::after {
  opacity: 0.8;
}

.ngk-media-block .ngk-media-block-caption {
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 5px;
}

/*
Feature Columns
*/

.ngk-block-preformatted-image-box-block span.ngk-block-background-container {
  opacity: 0.5;
  transition: opacity 1s;
}

.ngk-block-preformatted-image-box-block:hover span.ngk-block-background-container,
.ngk-block-preformatted-image-box-block:active span.ngk-block-background-container {
  opacity: 1;
}

.ngk-image-box-block {
  display: block;
  width: 100%;
  height: 100%;
}

.ngk-image-box-block span.ngk-image-box-content {
  display: block;
  flex-basis: 100%;
  flex-grow: 1;
}

.ngk-image-box-block span.ngk-image-box-content span.ngk-image-box-content-title {
  display: block;
  text-align: left;
  text-transform: uppercase;
  font-weight: bold;
}

.ngk-image-box-block span.ngk-image-box-content span.ngk-image-box-content-text {
  text-transform: none;
  font-weight: normal;
}

.ngk-image-box-block:not(.ngk-image-box-none) span.ngk-image-box-content span.ngk-image-box-content-title::after {
  display: inline-block;
  content: "\00BB";
  margin-left: 5px;
}

.ngk-image-box-block span.ngk-image-box-desktop-image,
.ngk-image-box-block span.ngk-image-box-mobile-image {
  display: block;
  position: relative;
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}

@media screen and (min-width: 769px){
  .ngk-image-box-block {
    padding: 20px;
  }

  .ngk-image-box-block.ngk-image-box-desktop-horizontal {
    display: flex;
  }

  .ngk-image-box-content {
    margin: 20px;
  }

  .ngk-image-box-block .ngk-image-box-mobile-image {
    display: none !important;
  }

  .ngk-image-box-block.ngk-image-box-desktop-horizontal {
    flex-flow: row nowrap;
  }

  .ngk-image-box-block.ngk-image-box-desktop-vertical {
    flex-flow: column nowrap;
  }

  .ngk-image-box-content-title {
    font-size: 24px;
  }

  .ngk-image-box-content-text {
    font-size: 16px;
  }
}

@media screen and (max-width: 768px){
  .ngk-image-box-block {
    padding: 10px;
  }
  
  .ngk-image-box-block.ngk-image-box-mobile-horizontal {
    display: flex;
  }
  
  .ngk-image-box-block.ngk-image-box-mobile-horizontal {
    flex-flow: row nowrap;
  }

  .ngk-image-box-block.ngk-image-box-mobile-vertical {
    flex-flow: column nowrap;
  }

  .ngk-image-box-content {
    margin: 20px;
  }

  .ngk-image-box-block .ngk-image-box-desktop-image {
    display: none !important;
  }
  
  .ngk-image-box-content-title {
    text-align: left !important;
    font-size: 20px;
  }

  .ngk-image-box-content-text,
  .ngk-image-box-content-text p {
    text-align: left !important;
    font-size: 16px;
  }

}

@media screen and (max-width: 650px){

  .ngk-image-box-content-title {
    font-size: 14px;
  }

  .ngk-image-box-content-text {
    font-size: 11px;
  }
}

/*
Banner
*/

.ngk-banner-block {
  display: block;
  padding: 10px;
  position: relative;
  z-index: 4;
  text-align: center;
}

.ngk-banner-block img.ngk-banner-image {
  display: block;
  position: absolute;
  left: 20%;
  height: 150%;
  top: -25%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.ngk-banner-block span.ngk-banner-text {
  font-size: 32px;
  text-transform: uppercase;
  font-weight: bold;
}

@media screen and (max-width: 1250px) {
  .ngk-banner-block img.ngk-banner-image {
    left: 10%;
  }
}
@media screen and (max-width: 768px) {
  .ngk-banner-block img.ngk-banner-image {
    display: none;
  }
}

/*
Breadcrumbs
*/

div.ngk-breadcrumbs {
  font-size: 12px;
}
div.ngk-breadcrumbs a {
  font-weight: normal;
  opacity: 0.6;
}

div.ngk-breadcrumbs a:hover {
  opacity: 1;
}

div.ngk-breadcrumbs a::after {
  content: "\00BB";
  margin-left: 10px;
  margin-right: 10px;
}

div.ngk-breadcrumbs a:last-child::after {
  content: "\A";
  margin: 0;
}

@media screen and (max-width: 767px) {
  div.ngk-breadcrumbs {
    display: none;
  }
}

/*
Product Details
*/

div.ngk-product-details-container {
  display: block;
  text-align: center;
  margin-top: -25em;
}

div.ngk-product-details-container div.ngk-product-details {
  display: inline-flex;
  width: 1250px;
  flex-flow: row nowrap;
}

div.ngk-product-details-container div.ngk-product-details > div {
  display: block;
  flex-basis: 50%;
  text-align: left;
  padding: 10px;
}

div.ngk-product-details-container div.ngk-product-details div.ngk-product-details-image {
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  height: 500px;
}


div.ngk-product-details-container div.ngk-product-details div.ngk-product-details-content div.ngk-product-details-content-title {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 48px;
  line-height: 1em;
}

div.ngk-product-details-container div.ngk-product-details div.ngk-product-details-content div.ngk-product-details-content-description {
  padding: 10px 0 0 0;
  font-size: 14px;
}

div.ngk-product-details-calls-to-action {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  justify-content: center;
  margin: 10px 0 0 0;
  vertical-align: middle;
}

div.ngk-product-details-calls-to-action a.ngk-product-details-call-to-action {
  flex-grow: 1;
  max-width: 20em;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 1250px) {
  div.ngk-product-details-container div.ngk-product-details {
    display: flex;
    width: auto;
  }
}

@media screen and (max-width: 768px) {
  div.ngk-product-details-container {
    top: 15px;
  }
  div.ngk-product-details-container > div.ngk-product-details > div {
    flex-basis: 100%;
  }
  div.ngk-product-details-container div.ngk-product-details div.ngk-product-details-image {
    height: auto;
  }
}

@media screen and (max-width: 767px) {
  div.ngk-product-details-container {
    margin-top: -37em;
  }
  div.ngk-product-details-container div.ngk-product-details div.ngk-product-details-content div.ngk-product-details-content-title {
    font-size: 32px;
  }
  div.ngk-product-details-container div.ngk-product-details div.ngk-product-details-content div.ngk-product-details-content-tagline {
    margin-top: 0;
  }

  div.ngk-product-details-container div.ngk-product-details {
    flex-flow: row wrap;
  }
  div.ngk-product-details-container div.ngk-product-details div.ngk-product-details-image {
    height: 200px;
  }
}

/*
 * Product highlights
 */
div.ngk-product-highlights {
  background-color: #222;
}

div.ngk-product-highlights .ngk-block-generic {
  text-align: left;
}

div.ngk-product-highlights .ngk-content-blocks .ngk-block {
  padding: 15px;
  margin: 0;
}

div.ngk-product-highlights .ngk-content-blocks .ngk-block:last-child {
  padding: 0;
}

div.ngk-product-highlights .ngk-content-blocks .ngk-block .ngk-block-columns .ngk-block-column:first-child {
  padding: 15px;
}

div.ngk-product-highlights .ngk-content-blocks .ngk-block .ngk-block-columns .ngk-block-column:last-child .ngk-feed {
  height: 100%;
}

@media screen and (max-width: 768px) {
  div.ngk-product-highlights .ngk-content-blocks .ngk-block:nth-child(2n):not(:last-child) .ngk-block-columns {
    flex-direction: column-reverse;
  }
  div.ngk-product-highlights .ngk-content-blocks .ngk-block .ngk-block-columns .ngk-block-column:first-child .ngk-feed {
    grid-auto-rows: minmax(300px, auto);
  }
  div.ngk-product-highlights .ngk-content-blocks .ngk-block .ngk-block-columns .ngk-block-column:first-child .ngk-feed .ngk-feed-item .ngk-feed-item-details-container .ngk-feed-item-details .ngk-feed-item-details-title td {
    font-size: 16px;
  }
}
@media screen and (max-width: 767px) {
  div.ngk-product-highlights .ngk-content-blocks .ngk-block .ngk-block-columns .ngk-block-column:first-child .ngk-feed {
    grid-auto-rows: minmax(175px, auto);
  }
  div.ngk-product-highlights .ngk-content-blocks .ngk-block .ngk-block-columns .ngk-block-column:first-child .ngk-feed .ngk-feed-item .ngk-feed-item-details-container .ngk-feed-item-details .ngk-feed-item-details-title td {
    font-size: 10px;
  }
  div.ngk-product-highlights .ngk-content-blocks .ngk-block .ngk-block-columns .ngk-block-column:first-child .ngk-feed .ngk-feed-item .ngk-feed-item-details-container .ngk-feed-item-details .ngk-feed-item-details-tagline td {
    font-size: 8px;
  }
}

/*
 * Forms
 */
div.ngk-block-form-block h3 {
  font-size: 24px;
}

/*
 * Resources
 */

div.ngk-resource-details {
  text-align: left;
}

div.ngk-resource-feed-post-breadcrumbs {
  margin-bottom: 5px;
}

div.ngk-resource-feed-post-image {
  height: 250px;
  background-size: cover;
  background-position: center center;
  display: block;
}

div.ngk-resource-feed-post-excerpt {
  margin: 10px 0;
}
div.ngk-resource-feed-post a.ngk-cta-button {
  width: 250px;
  margin: auto;
}