@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 }
}