@import 'base';

.dp-content-slot {

@include desktop {
  overflow: hidden;
  clear: both;
}

}

.dp-content-pixel-tracker-slot {

line-height: 0px;

}

.dp-content-slot–transparent {

opacity: 0.8;

}

.dp-content-slot-inner > .dp-content-slot–buffet-component:empty, .dp-content-slot-inner > .dp-content-slot–buffet-component:-moz-only-whitespace {

margin: 0;
@include desktop {
  margin: 0;
}

}

.dp-content-slot-inner > .dp-content-slot–buffet-component:first-child:not(:empty) {

margin-top: 50px;

} .dp-content-slot-inner > .dp-content-slot–buffet-component:last-child:not(:empty) {

margin-bottom: 50px;

}

.dp-content-slot-inner > .dp-content-slot–buffet-component {

margin-bottom: 30px;
@include desktop {
  margin-bottom: 50px;
}

}

.dp-content-slot:nth-child(odd) {

background: $background-color-light;

}

.dp-content-slot–left {

.dp-content-slot-img-wrapper {
  right: -2%;
  left: auto;
}

}

.dp-content-slot–right {

.dp-content-slot-img-wrapper {
  left: -2%;
  right: auto;
}

.dp-content-slot-copy-wrapper {
  float: right;
}

}

.dp-content-slot-inner {

@include desktop {
  max-width: $desktop-large;
  padding: 0 50px;
  position: relative;
}

}

.dp-content-slot-img-wrapper {

max-width: 600px;
position: absolute;
bottom: 0;
display: none;

@include desktop {
  display: block;
}

}

.dp-content-slot-category {

color: inherit;
text-transform: uppercase;
font-weight: 300;
margin-bottom: 8px;
display: inline-block;
font-size: $font-size-small;

@include desktop {
  font-size: $font-size-base;
}

}

.dp-content-slot-title-wrapper {

overflow: hidden;

}

.dp-content-slot-title-img {

float: left;
max-width: 32px;
margin-right: 8px;

@include desktop {
  max-width: 48px;
}

}

.dp-content-slot-title-img–large {

@include desktop {
  max-width: 60px;
  margin-right: 16px;
  margin-bottom: 14px;
}

}

.dp-content-slot-title {

color: inherit;
margin-bottom: 10px;
padding-bottom: 0;
font-size: 28px;

@include desktop {
  font-size: 48px;
  font-weight: 300;
}

}

.dp-content-slot-title–small {

color: inherit;
font-size: 28px;
font-weight: 400;

@include desktop {
  font-size: 34px;
  font-weight: 300;
}

}

.dp-content-slot {

p, a, li {
  line-height: 150%;
}

p a {
  text-decoration: none;
}

ul {
  color: inherit;
  font-weight: $font-weight-light;
}

}

.dp-callout-list {

margin: 24px 0;
padding: 0;

li {
  list-style-type: none;
  padding: 16px 0;
}

}

.dp-callout-list-item {

list-style: none;
overflow: hidden;
padding: 16px 0;
border-top: 1px solid $navBorderColor;
font-weight: 300;

@include desktop {
  padding: 24px 0;
  border-top: none;
}

}

.dp-callout-thumb-container {

width: 64px;
position: absolute;

}

.dp-callout-copy-container {

overflow: hidden;

}

.dp-callout-thumb-container + .dp-callout-copy-container {

margin-left: 80px;

@include desktop {
  margin-left: 17.666666%;
}

}

.dp-callout-copy-title {

color: inherit;
font-weight: 500;
margin-bottom: 8px;

@include desktop {
  line-height: 100%;
  font-size: 28px;
  font-weight: 300;
}

}

a.dp-callout-copy-link {

color: inherit;
&:hover {
  text-decoration: none;
}

}

.dp-callout-copy-description {

line-height: 150%;

}

.dp-callout-list–grid {

.dp-callout-list-item {
  line-height: 175%;

  @include desktop {
    width: 48%;
    display: inline-block;
    padding-right: 20px;
    vertical-align: top;
  }
}

.dp-callout-thumb-container + .dp-callout-copy-container {
  margin-left: 80px;

  @include desktop {
    margin-left: 39%;
  }
}

}

.dp-content-slot-aside {

@include mobile-only {
  margin-top: 16px;
}

}

.dp-content-slot-aside-img {

width: 100%;

}

.dp-content-slot {

@include desktop {
  display: table;
  width: 100%;
}

}

.dp-text-cta {

font-weight: 300;
transition: color 0.15s linear;

}

.dp-content-hr {

height: 0;
margin-top: 36px;
border-top: 1px solid $navBorderColor;
padding-top: 36px;
margin-bottom: 0;

@include desktop {
  margin-top: 50px;
  padding-top: 40px;
}

}

.dp-list-columns-list {

margin-bottom: 30px;

}

.dp-list-columns-list-title {

font-weight: bolder;
text-transform: uppercase;
margin-bottom: 8px;

}

.dp-list-columns-list-link {

font-size: $font-size-small;
line-height: 175%;
display: inline-block;
padding: 3.5px 0;
transition: color 0.15s linear;

}

.dp-content-slot–l2-component {

h1, h2, h3 {
  margin-bottom: 8px;

  @include desktop {
    margin-bottom: 16px;
  }
}

p {

  &:last-child {
    margin-bottom: 14px;

    @include desktop {
      margin-bottom: 24px;
    }
  }

  @include desktop {
    margin-bottom: 24px;
  }
}

.media-wrapper {
  margin-bottom: 24px;
}

.media-wrapper--video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

img {
  width: 100%;
}

}

.col-overflow {

.col-overflow-copy {

  @include desktop {
    max-width: 58.3333%;
  }
}

.col-overflow-media {
  margin-bottom: 16px;

  @include desktop {
    width: 58.3333%;
  }
}

.col-overflow-media--right {

  @include desktop {
    float: right;
    margin-left: 32px;
  }
}

.col-overflow-media--left {

  @include desktop {
    float: left;
    margin-right: 32px;
  }
}

}

.dp-text-with-image-image-margin {

@include mobile-only {
  height:30px;
}

@include desktop {
  height:36px;  
}

}

.dp-text-with-image-description {

text-align:left;

}

.dp-subsction-middle-image-clear {

clear: both;

}

.dp-text-with-image-description h2{

text-align: center;

}

.dp-text-with-image-margin-auto {

@include desktop {
  float: none;
  margin-left: auto;
  margin-right: auto;  
}

}

.dp-content-slot-background-white {

background-color: #fff !important;
@extend .dp-content-slot-background-light-font;
@extend .dp-content-slot-background-light-link;

}

.dp-content-slot-background-light-font {

color: #111111;

}

.dp-content-slot-background-dark-font {

color: #ffffff;

}

.dp-content-slot-background-light-link {

a:link, a:visited {
  color: #0066c0;
}
a:hover {
  color: #e37825;
}

}

.dp-content-slot-background-dark-link {

a:link, a:visited {
  color: #00c2e0;
}
a:hover {
  color: #e37825;
}

}

.dp-content-slot-background-light-grey {

background-color: #f6f6f6 !important;
@extend .dp-content-slot-background-light-font;
@extend .dp-content-slot-background-light-link;

}

.dp-content-slot-background-dark-grey1 {

background-color: #404951 !important;
@extend .dp-content-slot-background-dark-font;
@extend .dp-content-slot-background-dark-link;

}

.dp-content-slot-background-dark-grey2 {

background-color: #495159 !important;
@extend .dp-content-slot-background-dark-font;
@extend .dp-content-slot-background-dark-link;

}

.dp-content-slot-background-devportal-orange {

background-color: #e37825 !important;
@extend .dp-content-slot-background-dark-font;
@extend .dp-content-slot-background-dark-link;

}

.dp-content-slot-background-fireos-orange {

background-color: #ef6426 !important;
@extend .dp-content-slot-background-dark-font;
@extend .dp-content-slot-background-dark-link;

}

.dp-content-slot-background-alexa-blue {

background-color: #0068a8 !important;
@extend .dp-content-slot-background-dark-font;
@extend .dp-content-slot-background-dark-link;

}

.dp-content-slot-background-twitch-purple {

background-color: #6441a5 !important;
@extend .dp-content-slot-background-dark-font;
@extend .dp-content-slot-background-dark-link;

}

.dp-content-slot-background-drs-cyan {

background-color: #07cbda !important;
@extend .dp-content-slot-background-dark-font;
@extend .dp-content-slot-background-dark-link;

}

.dp-content-slot-background-amazon-orange {

background-color: #ff9900 !important;
@extend .dp-content-slot-background-dark-font;
@extend .dp-content-slot-background-dark-link;

}

.dp-content-slot {

 h1, h2, h3, h4, h5, h6, .h1,.h2,.h3,.h4,.h5,.h6 {
  @include dp-content-slot--headers
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  @include dp-content-slot--header-padding
}

}