._3rQuG {
margin: 16px 0;
}
._33sEJ {
width: 82%;
margin: 0 auto;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 4px 0;
}
.LHnbC {
width: 82%;
margin: 0 auto 5px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
color: #df2c2c;
-ms-flex-order: 4;
order: 4;
}
.dpp0b {
font-weight: bold;
}
.Gdnz9 {
margin: 0 auto;
}
._2893N {
}
._3lzVV:after {
background-color: hsl(196, 90%, 31%);
}
._3lzVV:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
._3lzVV:focus {
outline: none;
}/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
.no-js div[class*='articleBlock-module_panelPreview'] {
max-height: 2000px;
}
.no-js div[class*='articleBlock-module_showFade'] {
visibility: hidden;
}
.no-js span[class*='articleBlock-module_expandBtn'] {
visibility: hidden;
}
article._3_PmP {
max-width: 1376px;
margin: 0;
padding: 24px;
padding-bottom: 0;
border-top: 1px solid hsl(0, 0%, 90%);
background-color: hsl(0, 0%, 100%)
}
@media (min-width: 1408px) {
article._3_PmP {
margin: 40px auto;
border-radius: 8px;
border: 1px solid hsl(0, 0%, 90%);
}
}
/* the following root styles are copied from preformatted.css */
._3_PmP {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
._3_PmP p {
color: hsl(0, 0%, 40%);
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
font-size: 14px;
line-height: 1.5;
margin-bottom: 16px;
padding: 0;
}
._3_PmP a {
color: hsl(196, 90%, 31%);
}
._3_PmP a:hover, ._3_PmP a:focus {
color: hsl(196, 89%, 26%);
}
._3_PmP h2, ._3_PmP h3, ._3_PmP h4, ._3_PmP h5, ._3_PmP h6 {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
font-weight: 700;
line-height: 1.2;
color: hsl(0, 0%, 30%);
margin-bottom: 8px;
padding: 0;
}
._3_PmP h2 {
font-size: 20px;
}
._3_PmP h3 {
font-size: 16px;
}
._3_PmP h4 {
font-size: 16px;
}
._3_PmP h5 {
font-size: 16px;
}
._3_PmP h6 {
font-size: 16px;
}
._3_PmP small {
color: hsl(0, 0%, 50%);
font-size: 12px;
}
._3_PmP ol, ._3_PmP ul {
font-size: 14px;
margin-bottom: 16px;
padding-left: 24px;
}
._3_PmP ol:last-child, ._3_PmP ul:last-child {
margin-bottom: 0;
}
._3_PmP ol {
list-style-type: decimal;
}
._3_PmP ul {
list-style: disc;
}
._1d6Q5 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: hsl(0, 0%, 20%);
padding-bottom: 8px;
}
._1-LNr {
position: relative;
padding-bottom: 2em;
}
._3lzVV {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
font-size: 14px;
position: absolute;
bottom: 1em
}
._3lzVV:hover {
text-decoration: none;
}
._3lzVV:hover:after, ._3lzVV:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
._2eslE {
position: relative;
max-height: 100px;
overflow: hidden;
transition: max-height 0.2s ease;
}
.gyTfV {
max-height: 4000px;
margin-bottom: 2em;
transition: max-height 0.5s ease;
}
.PbO7H {
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0),
hsl(0, 0%, 100%) 75%
);
height: 60px;
margin-top: -60px;
position: relative;
}
._1nO83 {
margin-top: 0;
}
._1cBaD {
display: none;
width: 0;
height: 0;
}
._2Lx80 {
width: 46px;
height: 46px;
}
._2horf:after {
background-color: hsl(0, 0%, 20%);
}
._2horf:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
._2horf:focus {
outline: none;
}/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._1gQ5o {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.wOWiP {
width: 210px;
-ms-flex-negative: 0;
flex-shrink: 0;
background: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 90%);
border-radius: 4px;
margin: 0 8px;
margin-bottom: 8px;
padding: 16px;
text-align: center
}
.wOWiP:first-child {
margin-left: 0;
}
._2WJKW {
width: 100%;
min-height: 80px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
margin: 8px 0;
line-height: 2;
text-decoration: none;
color: hsl(0, 0%, 20%)
}
._2WJKW:hover, ._2WJKW:focus {
text-decoration: underline;
}
._2qjCc {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-top: auto;
color: hsl(0, 0%, 20%);
font-size: 16px;
word-break: break-word;
line-height: 1.5;
margin-top: 8px;
font-weight: 700;
}
._2horf {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
font-size: 14px;
color: hsl(0, 0%, 20%)
}
._2horf:hover {
text-decoration: none;
}
._2horf:hover:after, ._2horf:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
._2dFPF {
width: 30px;
height: 30px;
background: hsl(0, 0%, 80%);
border-radius: 50%;
position: absolute;
display: none;
top: 50%;
transform: translateY(-50%);
margin-top: -10px;
padding: 8px;
cursor: pointer
}
._2dFPF:hover, ._2dFPF:focus {
background: hsl(0, 0%, 60%);
}
._2vWws {
left: 0;
}
._1YnR4 {
right: 0;
}
._2dFPF._18aJo {
display: none;
}
@media (min-width: 640px) {
._2dFPF {
display: block;
}
}
._29V6v:first-child:before {
content: none
}
._29V6v:after {
background-color: hsl(196, 90%, 31%)
}
._29V6v:before {
content: '';
border-left: 1px solid hsl(0, 0%, 90%);
padding: 18px 0;
position: absolute;
left: -16px;
top: -8px
}
._29V6v:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%
}
._29V6v:focus {
outline: none
}/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._30sqP {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
font-size: 14px;
color: hsl(0, 0%, 30%);
-ms-flex-align: baseline;
align-items: baseline
}
@media (min-width: 960px) {
._30sqP {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap
}
}
._2o81r {
margin: -8px;
}
.KKuXw {
background: hsl(0, 0%, 95%);
padding: 8px 16px;
display: inline-block;
text-decoration: none;
color: hsl(0, 0%, 20%);
border-radius: 4px;
transition: color 0.2s, background 0.2s;
margin: 8px
}
.KKuXw:hover, .KKuXw:focus {
color: hsl(0, 0%, 100%);
background: hsl(196, 90%, 31%)
}
._3Bmuv {
display: -ms-flexbox;
display: flex;
padding-right: 16px;
}
._3vfBK ._3Bmuv {
margin-bottom: 24px;
}
._29V6v {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
color: hsl(196, 90%, 31%);
margin: 0 16px;
cursor: pointer
}
._29V6v:hover {
text-decoration: none
}
._29V6v:hover:after, ._29V6v:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0)
}
@media (max-width: 831px) {
._37J6z {}
._37J6z._7JhbN {
margin: 0 4px;
padding: 12px 24px
}
}
@media (min-width: 832px) {
._37J6z {}
._37J6z._7JhbN {
margin: 0 8px;
padding: 10px 32px
}
}
._37J6z.wDnab {
min-width: 180px
}
._37J6z._7JhbN:hover, ._37J6z._7JhbN:focus {
border-color: hsl(196, 90%, 31%);
color: hsl(196, 90%, 31%)
}
._37J6z._7JhbN {
box-shadow: none;
background-color: hsl(0, 0%, 100%);
border: 2px solid hsl(0, 0%, 90%);
border-radius: 24px;
font-weight: 700;
color: hsl(0, 0%, 20%);
font-size: 12px
}
._37J6z._1FdMH {
color: hsl(0, 0%, 100%);
background-color: hsl(87, 58%, 45%);
box-shadow: 0 2px 0 hsl(87, 58%, 35%)
}/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._37J6z {
display: inline-block;
border-radius: 4px;
box-shadow: 0 2px 0 hsl(0, 0%, 70%);
position: relative;
border: none;
background-color: hsl(0, 0%, 90%);
-webkit-font-smoothing: antialiased;
color: hsl(0, 0%, 40%);
text-align: center;
text-decoration: none;
cursor: pointer;
margin: 0 10px;
line-height: 1.5;
transition: all 0.5s;
padding: 5px 20px;
font-size: 14px
}
._37J6z._3ypzk {
padding: 10px 20px;
font-size: 16px
}
.SjPtw {
margin: 16px auto;
max-width: 1004px;
padding-left: 10px;
padding-right: 10px;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._2D2KF {
margin: 0 -10px;
}
.qF50j {
display: inline-block;
margin-bottom: 8px
}
@media (min-width: 832px) {
.qF50j {
margin-bottom: 16px;
}
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._2xv2N {
max-width: 1379px;
}
.ItLky {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 20px;
color: hsl(0, 0%, 20%);
margin-bottom: 24px;
}
/* 187 / 4 */
.RXRPc {
animation: _2bs6O 1.4s linear infinite;
}
@keyframes _2bs6O {
0% { transform: rotate(0deg); }
100% { transform: rotate(270deg); }
}
.GsHm5 {
stroke-dasharray: 187;
stroke-dashoffset: 0;
transform-origin: center;
animation:
_3pGIj 1.4s ease-in-out infinite;
}
@keyframes _3pGIj {
0% { stroke-dashoffset: 187; }
50% {
stroke-dashoffset: 46.75;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform:rotate(450deg);
}
}
._7KuIY {
display: none;
}
.js ._7KuIY {
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
background: rgba(255, 255, 255, 1);
text-align: center;
padding-top: 44px;
}
._1jZqv {
position: relative;
}
._2e6Ul {
height: 50px;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto,
Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif;
font-size: 14px;
background-color: hsl(196, 90%, 31%);
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0 8px;
text-align: center;
}
._3GAuD {
color: hsl(0, 0%, 100%);
}
._3ciPJ {
background: hsl(0, 0%, 98%);
overflow: hidden;
}
._3ciPJ > * + * {
margin: 40px auto;
padding: 0 16px;
max-width: 1408px;
position: relative;
}
._3Dupa {
width: 35px;
height: 35px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
pointer-events: none;
}
._1scd5 {
width: 50px;
height: 50px;
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._1wR7U {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
margin-right: 8px;
}
._1hvkl {
width: 100%;
height: 36px;
position: relative;
cursor: -webkit-grab;
cursor: grab;
}
._1hvkl:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
._3L_Dm {
position: absolute;
top: 50%;
right: 1px;
background: hsl(87, 58%, 40%);
padding: 0 5px;
height: 20px;
line-height: 20px;
font-weight: 500;
font-size: 12px;
color: white;
pointer-events: none;
transform: translateY(-50%);
}
._1K2DN {
width: 30px;
height: 30px;
color: hsl(0, 0%, 80%);
cursor: pointer;
display: block;
}
._3wjDU {
outline: none;
border: 0;
padding: 0;
padding-right: 8px;
background-color: transparent;
}
._2fgTD {
color: hsl(0, 0%, 20%);
font-weight: 700;
margin-left: 4px;
min-width: 40px;
}
._3_y9M {
margin-right: 4px;
border-radius: 3px;
}
._3sCIY {
display: -ms-flexbox;
display: flex;
}
._39lcp {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
}
._20mbH {
margin: 0 4px 0 0;
}
._3cmX0 ._2a08F:after {
border-top-color: hsl(0, 0%, 100%);
}
._1u9h6 ._2a08F:after {
border-top-color: hsl(0, 0%, 40%);
}
._2a08F:before,
._2a08F:after {
left: 50%;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
._2a08F:after {
border-width: 7px;
margin-left: -7px;
}/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Tooltips
--------------------------------------------------------------------*/
._3vems {
cursor: pointer;
position: relative;
display: inline-block;
}
._3vems:hover ._2a08F, ._3vems:focus ._2a08F {
opacity: 1;
visibility: visible;
}
._2a08F {
position: absolute;
z-index: 1;
display: inline-block;
left: 50%;
transform: translateX(-50%);
transition: all 0.45s ease;
text-align: left;
border-radius: 2px;
border: 1px solid;
font-size: 12px;
padding: 8px;
box-shadow: 3px 2px 7px 0 rgba(0, 0, 0, .08);
opacity: 0;
visibility: hidden
}
._2a08F:before {
border-width: 8px;
margin-left: -8px;
}
._1u9h6 ._2a08F {
background-color: hsl(0, 0%, 40%);
color: hsl(0, 0%, 100%);
border-color: hsl(0, 0%, 50%)
}
._1u9h6 ._2a08F:before {
border-top-color: hsl(0, 0%, 50%);
}
._3cmX0 ._2a08F {
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 40%);
border-color: hsl(0, 0%, 90%)
}
._3cmX0 ._2a08F:before {
border-top-color: hsl(0, 0%, 90%);
}
._2DAu1 ._2a08F {
white-space: nowrap;
}
._201iG ._2a08F {
bottom: calc(100% + 8px)
}
._201iG ._2a08F:before,
._201iG ._2a08F:after {
top: 100%;
}
._2RaN2 ._2a08F {
top: calc(100% + 8px)
}
._2RaN2 ._2a08F:before,
._2RaN2 ._2a08F:after {
bottom: 100%;
transform: rotate(180deg);
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._2j1rF {
white-space: nowrap;
min-width: 110px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
}
._1wYnq {
display: inline-block;
margin: 8px 0 0 48px;
}
._2wa80 {
margin-right: 8px;
}
._3ZdH2 {
color: hsl(0, 0%, 20%);
font-weight: 700;
}
._3mUIO {
border-bottom: 1px dotted hsl(0, 0%, 10%);
}
._1bjPQ,
._1bjPQ ._3ZdH2 {
color: hsl(0, 0%, 90%);
margin-right: 6px;
}
@media (max-width: 639px) {
._2j1rF {
display: inline-block;
margin: 8px 0 0 48px;
}
}
._3IDuB,
._3IDuB ._3lCzm {
animation-duration: 0.8s;
animation-timing-function: cubic-bezier(0.17, 0.89, 0.32, 1.49);
}
._3IDuB {
animation-name: nbvT8
}
._3IDuB ._3lCzm {
fill: hsl(0, 0%, 0%);
animation-name: _10b30;
}
@keyframes _10b30 {
50% {
transform: scale(1.1);
opacity: 1;
}
}
@keyframes nbvT8 {
20% {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
}
._1yJR9,
._1yJR9 ._1UJnU {
animation-duration: 0.8s;
animation-timing-function: cubic-bezier(0.17, 0.89, 0.32, 1.49);
}
._1yJR9 {
animation-name: _3HUDA
}
._1yJR9 ._1UJnU {
fill: #ff6966;
animation-name: XzVf_;
}
@keyframes XzVf_ {
50% {
transform: scale(1.1);
opacity: 1;
}
}
@keyframes _3HUDA {
20% {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
.oKU4K {
text-align: right;
}
.-Vcje {
display: inline-block;
fill: hsl(0, 0%, 60%);
padding: 8px;
box-sizing: content-box;
width: 20px;
height: 20px;
}
._255P_ {
display: inline-block;
fill: hsl(0, 0%, 60%);
padding: 8px;
box-sizing: content-box;
width: 20px;
height: 20px;
border-left: 1px solid hsl(0, 0%, 90%);
}
._1wuTE {
display: inline-block;
fill: hsl(0, 0%, 60%);
padding: 8px;
box-sizing: content-box;
width: 20px;
height: 20px;
border-right: 1px solid hsl(0, 0%, 90%);
border-left: 1px solid transparent;
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
.zS0k1 {
background: #fdf2d1;
}
._1ePdA {
font-weight: 700;
color: hsl(0, 0%, 30%);
}
.R8zaM:after {
background-color: hsl(0, 0%, 60%);
}
.R8zaM:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
.R8zaM:focus {
outline: none;
}
._2Pk9X:after {
background-color: hsl(0, 0%, 30%);
}
._2Pk9X:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
._2Pk9X:focus {
outline: none;
}/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._25ygu {
line-height: 1.3;
}
._25ygu._1OE9d {
display: -ms-flexbox;
display: flex;
-ms-flex-align: baseline;
align-items: baseline;
overflow: hidden;
}
._2WWZB {
max-height: 40px;
overflow: hidden;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._2Pk9X {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
color: hsl(0, 0%, 30%);
font-size: 14px
}
._2Pk9X:hover {
text-decoration: none;
}
._2Pk9X:hover:after, ._2Pk9X:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
.JHf2a {
color: hsl(0, 0%, 60%);
height: 18px;
font-size: 12px;
line-height: 18px;
max-height: 18px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
._1OE9d .JHf2a {
margin-left: 4px;
}
.R8zaM {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
color: hsl(0, 0%, 60%);
font-weight: 500
}
.R8zaM:hover {
text-decoration: none;
}
.R8zaM:hover:after, .R8zaM:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
@media (max-width: 639px) {
.JHf2a {
margin-bottom: 16px;
}
._25ygu._1OE9d {
max-width: 100%;
display: block;
}
._25ygu._1OE9d .JHf2a {
margin-left: 0;
}
}
@media (min-width: 640px) and (max-width: 831px) {
._25ygu._1OE9d {
max-width: 270px;
}
}
@media (min-width: 832px) and (max-width: 959px) {
._25ygu._1OE9d {
max-width: 150px;
}
}
@media (min-width: 960px) and (max-width: 1151px) {
._25ygu._1OE9d {
max-width: 290px;
}
}
@media (min-width: 1152px) and (max-width: 1408px) {
._25ygu._1OE9d {
max-width: 500px;
}
}
@media (min-width: 1408px) {
._25ygu._1OE9d {
max-width: 660px;
}
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._2LasS {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
._3OjyH,
._2_c5O {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
}
._3Rcrn {
display: block;
}
._2_c5O {
-ms-flex-align: end;
align-items: flex-end;
}
._3-J79 {
white-space: nowrap;
position: relative;
padding: 8px 0;
margin-bottom: 16px;
border-bottom: 1px solid hsl(0, 0%, 90%);
}
._2mAo8 {
position: absolute;
top: -24px;
right: 0;
}
._2Uxpg {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
margin-top: 8px;
}
._25iBS {
-ms-flex-align: start;
align-items: flex-start;
overflow: hidden;
}
._25iBS > * {
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
._3AN3p {
display: -ms-flexbox;
display: flex;
margin: 0 8px;
}
._25iBS ._3AN3p {
margin: 0 16px 8px 8px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
@media (max-width: 639px) {
._2_c5O {
-ms-flex-align: center;
align-items: center;
white-space: nowrap;
position: relative;
padding: 8px 0 0;
margin-bottom: 8px;
border-bottom: 1px solid hsl(0, 0%, 90%);
}
._3OjyH {
display: block;
}
.Jr7Gc {
position: absolute;
top: -24px;
right: 0;
}
._2Uxpg {
-ms-flex-align: start;
align-items: flex-start;
width: 100%;
}
._2Uxpg > * {
display: inline-block;
}
._2Uxpg ._3AN3p {
margin: 0 16px 8px 8px;
}
._3-J79 {
padding: 8px 0 0;
}
}
._3tfm8.lpgPF:hover, ._3tfm8.lpgPF:focus {
color: hsl(0, 0%, 100%);
background-color: hsl(87, 58%, 45%);
border-color: hsl(87, 58%, 45%)
}._3tfm8._3uUpH:hover, ._3tfm8._3uUpH:focus {
border-color: hsl(87, 58%, 40%)
}._3tfm8._3uUpH,
._3tfm8.lpgPF {
color: hsl(87, 58%, 45%);
border-color: hsl(87, 58%, 45%)
}._3tfm8._2e6J8 {
color: hsl(0, 0%, 100%);
border-color: hsl(87, 58%, 45%);
background-color: hsl(87, 58%, 45%)
}._3tfm8.Pq41l {
padding: 5px 20px 6px;
font-size: 14px
}._3tfm8 {
display: inline-block;
border: 1px solid hsl(0, 0%, 80%);
background-color: transparent;
-webkit-font-smoothing: antialiased;
color: hsl(0, 0%, 70%);
text-align: center;
cursor: pointer;
margin: 1px 4px 0;
line-height: 1.5;
padding: 7px 12px;
font-size: 12px;
font-weight: 700;
text-decoration: none;
border-radius: 2px
}._3tfm8:hover, ._3tfm8:focus {
border-color: hsl(0, 0%, 70%)
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
.wrc8W {
height: 40px;
display: -ms-flexbox;
display: flex;
font-size: 14px;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-direction: column;
flex-direction: column;
margin: 0;
}
._3AccQ {
width: 100%;
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
.-DeRq {
line-height: 28px;
color: hsl(0, 0%, 30%);
font-size: 18px;
font-weight: 700;
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._1I1Wt {
line-height: 20px;
font-size: 12px;
padding-right: 8px;
}
._3yoIm {
display: inline-block;
margin: 0 4px 0 0
}
._3yoIm svg {
width: 14px;
height: 14px;
margin-bottom: 3px;
}
._2jw0T {
position: relative;
}
._3QV9M {
line-height: 20px;
color: hsl(0, 0%, 60%);
font-size: 12px;
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._3doHW {
position: relative;
height: 100%;
}
._3X-YD {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
height: 100%;
}
._24GHy {
display: -ms-flexbox;
display: flex;
}
._22AMM {
display: inline-block;
margin: 4px 0 8px 0;
}
.tZyd2 {
margin: 0;
}
._1vl5N {
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: end;
align-self: flex-end;
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._23cwA {
width: 100%;
height: 100%;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
._2c7Nc {
position: relative;
padding: 0;
font-size: 12px;
color: hsl(0, 0%, 60%);
border-radius: 4px;
box-shadow: hsl(0, 0%, 80%) 0 0 16px;
background-color: hsl(0, 0%, 100%);
display: -ms-flexbox;
display: flex;
}
@media (min-width: 640px) {
._3WU_T ._2c7Nc {
padding: 16px;
-ms-flex-direction: column;
flex-direction: column;
margin: 16px;
-ms-flex-positive: 1;
flex-grow: 1;
}
}
@media (min-width: 640px) {
._2p-ZO ._2c7Nc {
margin: 24px 16px 0;
-ms-flex-direction: row;
flex-direction: row;
height: 107px;
padding: 16px;
}
._2p-ZO ._2jo8F {
width: 200px;
min-width: 175px;
margin-left: 16px;
padding-left: 16px;
display: -ms-flexbox;
display: flex;
border-left: 1px solid hsl(0, 0%, 90%);
-ms-flex-direction: column;
flex-direction: column;
}
}
@media (max-width: 639px) {
._23cwA {
padding: 16px;
}
._2c7Nc {
-ms-flex-direction: column;
flex-direction: column;
padding: 16px;
}
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
.rZARQ {
line-height: 20px;
color: hsl(0, 0%, 30%);
font-size: 14px;
margin-bottom: 8px;
list-style-type: none;
}
._2aHOn {
font-weight: 500;
}
._3B04h {
color: hsl(0, 0%, 60%);
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._1GUiN {
font-size: 14px;
color: hsl(0, 0%, 30%);
font-weight: 500;
}
._2AerH {
display: inline-block;
white-space: nowrap;
color: hsl(0, 0%, 40%);
font-size: 12px;
background-color: hsl(0, 0%, 95%);
border-radius: 2px;
padding: 0 8px;
margin: 8px 8px 0 0;
}
._248WO:after {
background-color: hsl(0, 0%, 60%);
}
._248WO:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
._248WO:focus {
outline: none;
}/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._343Ow {
color: hsl(0, 0%, 60%);
font-size: 12px;
}
._3Q47d {
overflow: hidden;
text-overflow: ellipsis;
margin-right: 4px;
}
._3OY-2 {
white-space: nowrap;
display: -ms-flexbox;
display: flex;
}
._248WO {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
cursor: pointer;
color: hsl(0, 0%, 60%)
}
._248WO:hover {
text-decoration: none;
}
._248WO:hover:after, ._248WO:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._1jcKT {
margin-top: 8px;
}
@media (min-width: 640px) {
._1jcKT {
display: none;
}
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
.GeySM {
line-height: 20px;
color: hsl(0, 0%, 60%);
font-size: 12px;
}
._2g_QW,
._3TIJT {
display: inline-block;
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._3ePxY {
height: 40px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0 4px 0 0;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: auto;
flex-basis: auto;
text-decoration: none;
padding: 7px 16px;
color: hsl(0, 0%, 40%)
}
._3ePxY:hover, ._3ePxY:focus {
color: hsl(0, 0%, 100%);
border-color: hsl(0, 0%, 80%);
background-color: hsl(0, 0%, 80%)
}
.nrkj-:after {
background-color: hsl(0, 0%, 60%);
}
.nrkj-:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
.nrkj-:focus {
outline: none;
}/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._2D2lC {
-ms-flex-positive: 1;
flex-grow: 1;
}
.GBZ1M {
display: inline-block;
}
._2xqFO {
display: block;
}
.WuoXV {
padding: 8px 8px 0 0;
display: inline-block;
cursor: pointer;
}
.nrkj- {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none
}
.nrkj-:hover {
text-decoration: none;
}
.nrkj-:hover:after, .nrkj-:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
.Jhd4X,
.XvxbR,
._2bSMY,
._31alT {
display: -ms-flexbox;
display: flex;
}
.Jhd4X,
.XvxbR {
-ms-flex-positive: 1;
flex-grow: 1;
}
.XvxbR,
._2bSMY {
-ms-flex-direction: column;
flex-direction: column;
}
._2bSMY {
-ms-flex-pack: end;
justify-content: flex-end;
}
._1VJk4 {
padding-top: 16px;
display: none;
}
._4zAGT {
display: none;
}
@media (max-width: 639px) {
._1VJk4._2DBwx {
display: block;
}
._2xqFO {
display: none;
}
._3PpSK {
display: block;
padding-top: 2px;
}
._1VJk4 {
border-top: 1px solid hsl(0, 0%, 95%);
padding-top: 16px;
margin-top: 16px;
}
._4zAGT {
display: block;
padding-bottom: 10px;
}
}
@media (min-width: 640px) {
._2DGi- {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
._2DGi- .vfsyA {
height: 48px;
}
.U157g .Jhd4X {
display: none;
}
._2DGi- ._1VJk4 {
display: none;
}
.U157g ._1VJk4 {
display: block;
}
._3PpSK {
display: none;
}
}
.RMY9P {
max-width: 100%;
width: 100%;
position: absolute;
top: 0;
z-index: 1;
}
._2_3rp::before {
animation-delay: 0.35s;
background: linear-gradient(
to right,
hsl(0, 0%, 80%),
hsl(0, 0%, 90%)
)
}._2_3rp {
position: relative;
background: hsl(0, 0%, 80%);
background-size: 900%;
overflow: hidden;
transform: translate3d(0, 0, 0)
}._2_3rp::after,
._2_3rp::before {
content: '';
background: linear-gradient(
to left,
hsl(0, 0%, 80%),
hsl(0, 0%, 90%)
);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation: _129Zx 1.5s linear infinite
}
@keyframes _129Zx {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._3XNMI {
position: relative;
width: 100%;
overflow: hidden;
display: block
}
._3XNMI:hover, ._3XNMI:focus {}
._3XNMI:hover ._2d6mL, ._3XNMI:focus ._2d6mL {
background: hsla(0, 0%, 20%, .6)
}
._3XNMI:hover ._2d6mL:hover, ._3XNMI:focus ._2d6mL:focus {
background: hsl(0, 0%, 20%)
}
._1xvs1 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition-duration: 0.5s;
transition-property: left;
z-index: 1;
}
._2d6mL {
width: 38px;
height: 56px;
position: absolute;
top: calc(50% - 28px);
padding: 13px;
color: hsl(0, 0%, 100%);
cursor: pointer;
transition: 0.4s;
outline-color: hsl(0, 0%, 100%);
}
._3GbfI {
left: 0;
z-index: 2;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: drop-shadow(0px 0px 2px hsl(0, 0%, 10%));
filter: drop-shadow(0px 0px 2px hsl(0, 0%, 10%));
}
._14f75 {
right: 0;
z-index: 2;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: drop-shadow(0px 0px 2px hsl(0, 0%, 10%));
filter: drop-shadow(0px 0px 2px hsl(0, 0%, 10%));
}
._2crSy {
border: none;
cursor: pointer;
background: none;
color: inherit;
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._38RZ6 {
height: 32px;
padding-top: 14px;
}
._1CDxH {
margin-left: auto;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: end;
justify-content: flex-end;
}
.TTfHg {
width: 20px;
height: 20px;
padding: 0;
display: inline-block;
fill: hsl(0, 0%, 100%);
opacity: 0.8;
margin-bottom: 16px;
pointer-events: auto;
margin-left: 14px;
margin-right: 14px;
}
.TTfHg:hover, .TTfHg:focus {
opacity: 1;
}
._2SumI {
width: 20px;
height: 20px;
padding: 0;
display: inline-block;
fill: hsl(0, 0%, 100%);
opacity: 0.8;
margin-bottom: 16px;
pointer-events: auto;
margin-left: 14px;
margin-right: 14px;
}
._2SumI:hover, ._2SumI:focus {
opacity: 1;
}
._1VDCl {
width: 20px;
height: 20px;
padding: 0;
display: inline-block;
fill: hsl(0, 0%, 100%);
opacity: 0.8;
margin-bottom: 16px;
pointer-events: auto;
margin-left: 14px;
margin-right: 14px;
margin-right: 12px;
margin-left: 4px;
}
._1VDCl:hover, ._1VDCl:focus {
opacity: 1;
}
.s3ESh {
width: 20px;
height: 20px;
padding: 0;
display: inline-block;
fill: hsl(0, 0%, 100%);
opacity: 0.8;
margin-bottom: 16px;
pointer-events: auto;
margin-left: 14px;
margin-right: 14px;
width: 14px;
height: 14px;
}
.s3ESh:hover, .s3ESh:focus {
opacity: 1;
}
._1VDCl path {
fill: hsl(0, 0%, 100%);
opacity: 0.8;
}
.s3ESh path {
fill: hsl(0, 0%, 100%);
opacity: 0.8;
}
._1xwpN {
}
._1xwpN:after {
content: '';
width: 1px;
height: 24px;
display: inline-block;
background-color: hsl(0, 0%, 90%);
opacity: 0.4;
position: absolute;
top: 12px;
}
.azvuP {
background: none;
border: none;
cursor: pointer;
padding: 2px 0;
position: absolute;
left: 0;
}
.lldqj {
width: 20px;
height: 20px;
padding: 0;
display: inline-block;
fill: hsl(0, 0%, 100%);
opacity: 0.8;
margin-bottom: 16px;
pointer-events: auto;
margin-left: 14px;
margin-right: 14px;
width: 16px;
height: 16px;
}
.lldqj:hover, .lldqj:focus {
opacity: 1;
}
button:focus {
outline: none;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._1SQpT {
width: 100%;
display: block;
opacity: 0;
transition: opacity 0.4s ease;
position: relative;
margin-top: -140px;
height: 140px;
padding: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, .4) 0%,
rgba(0, 0, 0, 0) 57%
);
}
.KFSGT {
width: 100%;
height: 100%;
display: block;
}
._3cDcj {
position: absolute;
bottom: 16px;
right: 16px;
}
.p4v9H ._1SQpT {
opacity: 1;
}
.HogM0 {
display: none;
}
@media (min-width: 640px) {
._2imXI ._1SQpT {
display: none;
}
._2imXI .HogM0 {
margin-top: 16px;
display: block;
}
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._9q1LS {
-ms-flex-positive: 1;
flex-grow: 1;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
._3dJU8 {
height: 32px;
}
._7H2LP {
padding-top: 8px;
text-align: center;
}
.VRlLl {
padding: 16px 0 0 0;
bottom: 16px;
right: 16px;
display: -ms-flexbox;
display: flex;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._2sT86 {
width: 100%;
height: 100%;
display: -ms-flexbox;
display: flex;
}
._3Oe1A {
padding: 0;
font-size: 12px;
color: hsl(0, 0%, 60%);
border-radius: 4px;
box-shadow: hsl(0, 0%, 80%) 0 0 16px;
overflow: hidden;
background-color: hsl(0, 0%, 100%);
display: -ms-flexbox;
display: flex;
width: 100%;
}
._25Upe {
position: relative;
}
@media (min-width: 640px) {
._1fLGj._2sT86 {
min-width: 320px;
}
._1fLGj ._3Oe1A {
-ms-flex-direction: column;
flex-direction: column;
margin: 16px;
}
._1fLGj .hypZf {
padding: 16px;
display: -ms-flexbox;
display: flex;
-ms-flex-positive: 1;
flex-grow: 1;
}
._1fLGj ._38ivw {
display: none;
}
}
@media (min-width: 640px) {
.EurVi ._3Oe1A {
margin: 24px 16px 0;
-ms-flex-direction: row;
flex-direction: row;
}
.EurVi ._25Upe {
width: 39%;
padding: 16px;
}
.EurVi .hypZf {
width: calc( 100% - 187px - 39% - 16px );
max-width: calc( 100% - 187px - 39% - 16px );
padding: 16px 16px 16px 0;
}
.EurVi ._38ivw {
width: 187px;
margin: 16px 0;
padding: 0 0 0 16px;
display: -ms-flexbox;
display: flex;
border-left: 1px solid hsl(0, 0%, 90%);
-ms-flex-direction: column;
flex-direction: column;
}
}
@media (min-width: 960px) {
.EurVi ._25Upe {
width: 39%;
}
.EurVi .hypZf {
width: calc( 100% - 22% - 39% - 16px );
}
.EurVi ._38ivw {
-ms-flex-positive: 1;
flex-grow: 1;
padding-right: 16px;
}
}
@media (max-width: 639px) {
._2sT86 {
padding: 16px;
}
._3Oe1A {
-ms-flex-direction: column;
flex-direction: column;
}
.hypZf {
padding: 16px;
-ms-flex-positive: 1;
flex-grow: 1;
}
._38ivw {
display: none;
}
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._1e3be {
width: 100%;
display: block;
opacity: 0;
transition: opacity 0.4s ease;
position: relative;
margin-top: -140px;
height: 140px;
padding: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, .4) 0%,
rgba(0, 0, 0, 0) 57%
);
}
.LNbXP {
width: 100%;
height: 100%;
display: block;
}
._2S_U_ {
position: absolute;
bottom: 16px;
right: 16px;
}
._2EpjJ ._1e3be {
opacity: 1;
}
@media (min-width: 640px) {
._1koxn ._1e3be {
display: none;
}
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._1-ldP {
width: 100%;
height: 100%;
display: -ms-flexbox;
display: flex;
}
._26T_6 {
width: 100%;
padding: 0;
font-size: 12px;
color: hsl(0, 0%, 60%);
border-radius: 4px;
box-shadow: hsl(0, 0%, 80%) 0 0 16px;
overflow: hidden;
background-color: hsl(0, 0%, 100%);
display: -ms-flexbox;
display: flex;
}
._1PGxX {
position: relative;
}
@media (min-width: 640px) {
._5cWiD ._26T_6 {
-ms-flex-direction: column;
flex-direction: column;
margin: 16px;
}
._5cWiD ._3C52K {
padding: 16px;
display: -ms-flexbox;
display: flex;
-ms-flex-positive: 1;
flex-grow: 1;
}
._5cWiD ._2VmsK {
display: none;
}
}
@media (min-width: 640px) {
._1NkAJ ._26T_6 {
margin: 24px 16px 0;
-ms-flex-direction: row;
flex-direction: row;
}
._1NkAJ ._1PGxX {
width: 205px;
padding: 16px 0 16px 16px;
}
._1NkAJ ._3C52K {
width: calc( 100% - 155px - 205px );
padding: 16px;
}
._1NkAJ ._2VmsK {
width: 155px;
margin: 16px 0;
padding: 0 16px;
display: -ms-flexbox;
display: flex;
border-left: 1px solid hsl(0, 0%, 90%);
-ms-flex-direction: column;
flex-direction: column;
}
}
@media (min-width: 960px) {
._1NkAJ ._1PGxX {
width: 232px;
}
._1NkAJ ._3C52K {
width: calc( 100% - 24% - 232px );
}
._1NkAJ ._2VmsK {
width: 24%;
}
}
@media (max-width: 639px) {
._1-ldP {
padding: 16px;
}
._30pDT {
opacity: 1;
}
._26T_6 {
-ms-flex-direction: column;
flex-direction: column;
}
._3C52K {
padding: 16px;
-ms-flex-positive: 1;
flex-grow: 1;
}
._2VmsK {
display: none;
}
}
._3fhOj:hover,
._3fhOj:focus {
text-decoration: underline
}
._3fhOj:after {
background-color: hsl(0, 0%, 70%)
}
._3fhOj:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%
}
._3fhOj:focus {
outline: auto 5px -webkit-focus-ring-color
}
.pA3D8 ._2tTBZ {
opacity: 1;
transform: none
}
.pA3D8 ~ ._2gYrN ._3TTc2 {
opacity: 1
}
._1h2Hl:hover ._2tTBZ, ._1h2Hl:focus ._2tTBZ {
opacity: 1;
transform: none
}
._1h2Hl:hover ~ ._2gYrN ._3TTc2, ._1h2Hl:focus ~ ._2gYrN ._3TTc2 {
opacity: 1
}
._3CWNX:hover ._1h2Hl, ._3CWNX:focus ._1h2Hl {
box-shadow: 0 1px 20px hsla(0, 0%, 0%, .2)
}
._3CWNX:hover ._2tTBZ, ._3CWNX:focus ._2tTBZ {
opacity: 1;
transform: none
}
._3CWNX:hover ._2gYrN ._3TTc2, ._3CWNX:focus ._2gYrN ._3TTc2 {
opacity: 1
}/*--------------------------------------------------------------------
*
* PhotoDune Item Card
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Item Card: Container
--------------------------------------------------------------------*/
._3CWNX {
position: relative
}
._3CWNX:hover, ._3CWNX:focus {}
._3CWNX:hover .CyZ8n, ._3CWNX:focus .CyZ8n {
opacity: 1;
transform: none
}
._1h2Hl {
display: block;
background: linear-gradient(
125.41deg,
rgba(255, 255, 255, .5) 0%,
rgba(0, 0, 0, .21) 100%
);
border-radius: 3px;
position: relative;
background-size: contain;
overflow: hidden;
box-shadow: 0 1px 10px hsla(0, 0%, 0%, .07);
transition: box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1)
}
._1h2Hl:hover,
._1h2Hl:focus {
box-shadow: 0 1px 20px hsla(0, 0%, 0%, .2)
}
._1h2Hl:hover ~ .CyZ8n, ._1h2Hl:focus ~ .CyZ8n {
opacity: 1;
transform: none
}
.pA3D8 {
box-shadow: 0 1px 20px hsla(0, 0%, 0%, .2);
}
.pA3D8 ~ .CyZ8n {
opacity: 1;
transform: none
}
/*--------------------------------------------------------------------
* Item Card: Inner container with hover gradient
--------------------------------------------------------------------*/
._2tTBZ {
display: -ms-flexbox;
display: flex;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: all 0.2s ease;
background-size: 100% 144px;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, .6) 100%
);
border-radius: 0 0 3px 3px;
-ms-flex-align: end;
align-items: flex-end;
padding: 16px;
opacity: 0;
transform: translateY(15px);
cursor: pointer;
}
/*--------------------------------------------------------------------
* Item Card: Item Name
--------------------------------------------------------------------*/
._2F-bX {
color: hsl(0, 0%, 100%);
font-size: 14px;
line-height: 1.25;
display: block;
margin-bottom: 4px;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
._2F-bX:hover, ._2F-bX:focus {
color: hsl(0, 0%, 100%);
text-decoration: none
}
/*--------------------------------------------------------------------
* Item Card: User name
--------------------------------------------------------------------*/
._23x1v {
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
color: hsl(0, 0%, 20%);
-webkit-font-smoothing: subpixel-antialiased;
color: hsl(0, 0%, 70%);
font-size: 12px;
font-weight: 500;
}
._3fhOj {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
color: hsl(0, 0%, 70%)
}
._3fhOj:hover {
text-decoration: none
}
._3fhOj:hover:after, ._3fhOj:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0)
}
/*--------------------------------------------------------------------
* Item Card: Price
--------------------------------------------------------------------*/
._2Jnxy {
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
color: hsl(0, 0%, 20%);
-webkit-font-smoothing: subpixel-antialiased;
color: hsl(0, 0%, 100%);
font-weight: 500;
width: 100%;
text-align: right;
}
/*--------------------------------------------------------------------
* Item Card: Item Meta Data Wrapper
--------------------------------------------------------------------*/
.CyZ8n {
position: absolute;
padding-right: 8px;
left: 16px;
bottom: 16px;
opacity: 0;
transform: translateY(15px);
transition: all 0.2s ease;
width: calc(100% - 32px);
}
/*--------------------------------------------------------------------
* Item Card: Item Actions Wrapper (Price + Favorite)
--------------------------------------------------------------------*/
._2gYrN {
position: absolute;
top: 16px;
right: 16px;
}
._3TTc2 {
opacity: 0;
transition: opacity 0.2s ease;
}
._1cL9k {
opacity: 1;
}
._2X-mh {
display: block;
width: 100%;
}
._2WLJg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
.e-YfF {
width: 100%;
}
._3bM8k {
color: hsl(0, 0%, 40%);
}
.Ck5w- {
margin-bottom: 4px;
list-style-type: none;
font-size: 14px;
font-weight: 400;
padding-left: 16px;
position: relative
}
.Ck5w-:before {
content: '• ';
position: absolute;
color: hsl(0, 0%, 60%);
left: 0;
}
._2A5Ov {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
._2BVnX {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
cursor: pointer;
background-color: transparent;
border: none;
outline: none;
}
._378El {
cursor: none;
}
.gqDVI {
width: 100%;
background-color: rgba(0, 0, 0, .6);
height: 44px;
color: hsl(0, 0%, 100%);
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
}
.rn0Vm {
color: hsl(0, 0%, 100%);
}
.FeKDc {
height: 100%;
background: none;
border: none;
cursor: pointer;
padding: 0 16px;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._1b2jG {
width: 100%;
height: 100%;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
._1b2jG .video-player {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.x1KYn .N2_mi {
height: 100%;
}
.-ae6B {
position: relative;
height: 100%;
}
.N2_mi {
display: block;
position: relative;
background: hsl(0, 0%, 0%);
/* Set 16:9 aspect ratio (56.25% = 9/16 * 100%) */
/* Empty container for the absolutely positioned video to fill */
padding-bottom: calc(9 / 16 * 100% - 1px);
height: 0px;
overflow: hidden;
}
._2OyY- {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
._2ot00 {
width: 100%;
height: 8px;
position: absolute;
bottom: 0;
background: rgba(26, 26, 26, .5);
opacity: 0;
transition: opacity 0.4s ease;
cursor: pointer;
}
._2O6s- {
height: 8px;
background: hsl(87, 58%, 40%);
}
._2cjwm {
opacity: 0;
transition: opacity 0.4s ease;
position: relative;
padding: 0;
width: 100%;
bottom: 8px
}
._2cjwm:before {
margin-top: -140px;
width: 100%;
height: 140px;
display: block;
position: absolute;
content: '';
pointer-events: none;
background: linear-gradient(
to top,
rgba(0, 0, 0, .4) 0%,
rgba(0, 0, 0, 0) 57%
);
}
._2WLhU {
position: absolute;
bottom: 16px;
right: 4px;
left: 4px;
pointer-events: none;
}
._3aGLO ._2cjwm,
._3aGLO ._2ot00 {
opacity: 1;
}
._21JsS {
position: fixed;
left: 0;
right: 0;
bottom: 8px;
}
._2BzEX {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
pointer-events: none;
}
@media (max-width: 831px) {
._2ot00 {
opacity: 1;
}
._2cjwm {
opacity: 1;
}
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._34pX_ {
width: 100%;
display: -ms-flexbox;
display: flex;
}
._3vRW9 {
padding: 0;
font-size: 12px;
color: hsl(0, 0%, 60%);
border-radius: 4px;
box-shadow: hsl(0, 0%, 80%) 0 0 16px;
background-color: hsl(0, 0%, 100%);
display: -ms-flexbox;
display: flex;
width: 100%;
min-width: 0;
}
._2acJh {
position: relative;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
overflow: hidden;
}
.s5Z8s {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 8px;
min-height: 48px;
}
._2xrpQ {
display: -ms-flexbox;
display: flex;
}
._1hb1b {
-ms-flex-item-align: end;
align-self: flex-end;
}
._2DHhv {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
}
._3AjOk {
overflow: hidden;
padding-right: 16px;
}
._2xjt0 {
white-space: nowrap;
background: hsl(0, 0%, 95%);
-ms-flex-item-align: start;
align-self: flex-start;
font-size: 9px;
padding: 4px;
text-align: center;
color: hsl(0, 0%, 30%);
-ms-flex-preferred-size: 40px;
flex-basis: 40px;
}
@media (min-width: 640px) {
._3vRW9 {
-ms-flex-direction: column;
flex-direction: column;
margin: 16px;
}
._3vRW9:hover ._24IEM, ._3vRW9:focus ._24IEM {
opacity: 1;
}
._1IVNG {
padding: 16px;
}
}
@media (max-width: 639px) {
._34pX_ {
padding: 16px;
}
._3vRW9 {
-ms-flex-direction: column;
flex-direction: column;
}
._1IVNG {
padding: 16px;
-ms-flex-positive: 1;
flex-grow: 1;
}
}
._1cn3x {
-ms-flex: 1 0 320px;
flex: 1 0 320px;
min-width: 0;
}
._2tY3C {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center
}
._2tY3C.yOn4a {
display: block;
margin: 0 auto;
max-width: 1104px
}
@supports (display: grid) {
._2tY3C {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(320px, 1fr))[auto-fill];
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr))
}
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
section._3_-Ua {
background: hsl(0, 0%, 90%);
max-width: 100%;
padding: 16px 0;
}
._10Wuw {
max-width: 1408px;
margin: 0 auto;
}
._1vXD- {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 16px;
margin-top: 32px;
text-align: center;
-ms-flex-direction: column;
flex-direction: column;
}
._1Mh6G {
font-size: 24px;
line-height: 30px;
margin-bottom: 16px;
color: hsl(0, 0%, 20%);
}
._2usCy {
margin-top: 4px;
margin-bottom: 48px;
font-size: 14px;
color: hsl(0, 0%, 40%);
}
._29cgl {
text-decoration: none;
padding: 16px 24px;
font-size: 14px;
}
a._29cgl {
padding: 8px 32px;
}
._3X08u {
-ms-flex-positive: 1;
flex-grow: 1;
margin-left: -16px;
margin-right: -16px;
display: none;
}
@media(min-width: 640px) {
._10Wuw {
text-align: left;
-ms-grid-column-align: stretch;
justify-items: stretch;
}
._1vXD- {
text-align: left;
-ms-flex-direction: row;
flex-direction: row;
}
._29cgl {
-ms-flex-item-align: start;
align-self: flex-start;
}
._3X08u {
display: -ms-flexbox;
display: flex;
}
._3X08u ul li {
display: none;
}
._3X08u ul li:first-child {
display: block;
}
}
@media(min-width: 960px) {
._1gMY4 {
grid-column: 1 / -1;
}
._2usCy {
margin-bottom: 0;
}
}
@media(min-width: 1300px) {
._1gMY4 {
-ms-grid-column: span 1;
grid-column: span 1;
}
._2usCy {
margin-bottom: 48px;
}
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
.SSOjY {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
text-decoration: none;
box-shadow: 1px 8px 16px rgba(0, 0, 0, .08);
border-radius: 4px;
transition: transform .2s;
overflow: hidden
}
.SSOjY:hover, .SSOjY:focus {
transform: translateY(-2px)
}
._92MLl {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 24px;
}
._2Aihr {
font-size: 24px;
margin-bottom: 8px;
line-height: 1.2;
}
.ZVPx9 {
opacity: 0.8;
font-size: 16px;
line-height: 1.2;
}
._3m4ul {
padding: 8px 24px;
-ms-flex-item-align: start;
align-self: flex-start;
cursor: pointer;
border-radius: 2px;
margin-top: 16px;
font-size: 12px;
}
.P0OuO {
position: relative;
-ms-flex-positive: 1;
flex-grow: 1;
display: none;
}
.a4D8X {
width: 100%;
}
@media(min-width: 640px) {
.P0OuO {
display: -ms-flexbox;
display: flex;
}
}
@media(min-width: 960px) {
.SSOjY {
-ms-flex-direction: row;
flex-direction: row;
}
._92MLl {
width: 50%;
padding: 48px;
}
.P0OuO {
overflow: hidden;
width: 50%;
}
.a4D8X {
-o-object-fit: cover;
object-fit: cover;
}
}
/*--------------------------------------------------------------------
*
* PhotoDune Similar Photos
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Item Details: Text
--------------------------------------------------------------------*/
._2xJJM {
@mixin textDefault;
font-size: 14px;
color: hsl(0, 0%, 100%);
}
/*--------------------------------------------------------------------
* Similar Photos: Photo
--------------------------------------------------------------------*/
._2dFu5 {
}
@media (max-width: 831px) {
._2dFu5 {
display: none;
}
}
._3Gv31 {
display: -ms-flexbox;
display: flex;
}
.A53vt {
width: 11.4%;
margin: 8px;
}
._2cs3p {
}
._1ogG1 {
width: 100%;
cursor: pointer;
display: block;
}
._3q4KO {
position: relative;
padding-bottom: 100%;
}
._3X1E4 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
._3X1E4 {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
color: hsl(0, 0%, 50%);
text-decoration: none;
background-color: hsl(0, 0%, 20%);
}
._3gNcQ {
-ms-flex-positive: 1;
flex-grow: 1;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
margin: 0 auto
}
._3gNcQ svg {
display: block;
margin: 0 auto;
}
._2EyWI {
-ms-flex-positive: 1;
flex-grow: 1;
text-align: center;
}
._3X8XJ {
border: 1px solid hsl(0, 0%, 90%);
}
._2710s {
font-size: 18px;
margin-left: 8px;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
* Item Details: Button Icons
--------------------------------------------------------------------*/
.JTXlL {
color: hsl(0, 0%, 50%);
cursor: pointer
}
@media (max-width: 639px) {
.JTXlL {
color: hsl(0, 0%, 100%)
}
}
._1arls {
position: absolute
}
@media (max-width: 639px) {
._1arls {
display: block;
border-radius: 100%;
background-color: rgba(153, 153, 153, .7);
height: 32px;
width: 32px;
text-align: center;
padding-top: 2px
}
}
._1CEPD {
width: 16px;
height: 16px;
}
._3QFLu {
top: 16px;
right: 16px;
}
._2syCw,
._1_GiI {
position: absolute;
top: 50%;
width: 15px;
height: 24px;
margin-top: -12px /* half of the icon height */
}
@media (max-width: 639px) {
._2syCw,
._1_GiI {
display: none
}
}
._2syCw {
left: 16px;
}
._1_GiI {
right: 16px;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Item Details: Text
--------------------------------------------------------------------*/
._1vYp3 {
@mixin textDefault;
font-size: 14px;
color: hsl(0, 0%, 100%);
}
/*--------------------------------------------------------------------
*
* PhotoDune Item Details containers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Item Details containers: Info Section
--------------------------------------------------------------------*/
._29Evz {
padding-bottom: 16px;
border-bottom: 1px solid hsl(0, 0%, 20%)
}
._29Evz:last-of-type {
margin-top: 16px;
margin-bottom: 16px;
}
/*--------------------------------------------------------------------
* Item Details: Triangle pointer
--------------------------------------------------------------------*/
._3E9TS {
height: 0;
width: 0;
margin: -4px 0 0 calc(50% - 0.5 * 9px);
border: solid transparent;
border-bottom-color: hsl(0, 0%, 10%);
border-width: 9px;
}
/*--------------------------------------------------------------------
* Item Details: Containers
--------------------------------------------------------------------*/
._2NiBd {
padding: 16px 32px;
position: relative;
background-color: hsl(0, 0%, 10%)
}
@media (max-width: 639px) {
._2NiBd {
width: auto !important; /* Override the styles set in gridStyles */
margin-left: auto !important; /* Override the styles set in gridStyles */
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 3;
padding: 0;
overflow-y: auto;
}
}
.qPgmx {
display: -ms-flexbox;
display: flex;
padding: 16px 24px
}
@media (max-width: 639px) {
.qPgmx {
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
}
}
.mM-Nz {
padding-right: 32px;
width: 60%;
margin-bottom: 16px;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center
}
@media (max-width: 639px) {
.mM-Nz {
padding: 0;
width: 100%;
display: block;
}
}
@media (min-width: 640px) {
.mM-Nz {
display: -ms-flexbox;
display: flex;
}
}
._2t7kJ {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: column;
flex-direction: column;
}
._1ZQhj {
}
@media (min-width: 1152px) {
._1ZQhj {
height: 500px;
}
}
@media (min-width: 831px) and (max-width: 1151px) {
._1ZQhj {
height: 400px;
}
}
@media (min-width: 640px) and (max-width: 830px) {
._1ZQhj {
height: 350px;
}
}
._2USQX {
}
@media (min-width: 1152px) {
._2USQX {
height: 450px;
}
}
@media (min-width: 640px) and (max-width: 1151px) {
._2USQX {
height: 350px;
}
}
._2vhdk {
position: relative;
}
._34XSb {
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
/*--------------------------------------------------------------------
* Item Details: Image
--------------------------------------------------------------------*/
.MxLRn {
display: block;
border-radius: 2px;
max-width: 100%;
max-height: 100%
}
@media (max-width: 639px) {
.MxLRn {
width: 100vw;
max-height: 450px;
-o-object-fit: contain;
object-fit: contain;
}
}
/*--------------------------------------------------------------------
* Item Details: Buttons
--------------------------------------------------------------------*/
._31WY6 {
position: absolute;
top: 16px;
right: 16px;
color: hsl(0, 0%, 30%)
}
@media (max-width: 639px) {
._31WY6 {
left: 16px;
}
}
/*--------------------------------------------------------------------
* Item Details: Item Name
--------------------------------------------------------------------*/
.MxyP6 {
font-size: 18px;
}
/*--------------------------------------------------------------------
* Item Details: Error Message
--------------------------------------------------------------------*/
.xYe2b {
color: hsl(1, 61%, 44%);
}
.r9uXR {
font-size: 70%;
-webkit-font-smoothing: subpixel-antialiased;
color: hsl(0, 0%, 70%);
display: inline-block;
border-radius: 50%;
background-color: hsl(0, 0%, 20%);
padding: 0 0.4em;
vertical-align: middle;
}
._7s5os:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
._7s5os:focus {
outline: none;
}
._2ey2Z:checked + :after {
border-radius: 11px;
width: 6px;
height: 6px;
position: absolute;
top: 11px;
left: 5px;
content: ' ';
background: hsl(196, 89%, 26%);
}
._2ey2Z:checked + :before {
border-color: hsl(196, 89%, 26%);
}/*--------------------------------------------------------------------
*
* PhotoDune Item License
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Item Details: Text
--------------------------------------------------------------------*/
._2Mh4A {
@mixin textDefault;
font-size: 14px;
color: hsl(0, 0%, 100%);
}
/*--------------------------------------------------------------------
*
* PhotoDune Item Details containers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Item Details containers: Info Section
--------------------------------------------------------------------*/
._2gcYg {
padding-bottom: 16px;
border-bottom: 1px solid hsl(0, 0%, 20%)
}
._2gcYg:last-of-type {
margin-top: 16px;
margin-bottom: 16px;
}
/*--------------------------------------------------------------------
* Item License: Radio
--------------------------------------------------------------------*/
._2ey2Z {
display: none
}
._2ey2Z + :before {
content: ' ';
display: inline-block;
position: relative;
top: 4px;
margin: 0 12px 0 0;
width: 16px;
height: 16px;
border-radius: 11px;
border: 1px solid hsl(0, 0%, 80%);
background-color: hsl(0, 0%, 100%);
}
.pEUlE {
display: block;
position: relative;
margin-bottom: 4px;
}
._3Y8fQ {
font-size: 14px;
margin-bottom: 8px;
}
._2ilg0 {
color: hsl(0, 0%, 70%);
}
._7s5os {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
color: hsl(196, 89%, 26%);
}
._7s5os:hover {
text-decoration: none;
}
._7s5os:hover:after, ._7s5os:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
._5StuW:after {
background-color: hsl(0, 0%, 70%);
}
._5StuW:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
._5StuW:focus {
outline: auto 5px -webkit-focus-ring-color;
}/*--------------------------------------------------------------------
*
* PhotoDune Item Tags
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Item Details: Text
--------------------------------------------------------------------*/
._2FhLh {
@mixin textDefault;
font-size: 14px;
color: hsl(0, 0%, 100%);
}
/*--------------------------------------------------------------------
* The font-family and line-height are necessary to correctly
* calculate the scrollHeight to detect overflows for the showMore
* component.
* https://github.com/envato/market-shopfront/pull/1319#discussion_r140126356
--------------------------------------------------------------------*/
._1ICNH {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.5;
}
._2Spe2,
._1xfrN {
display: inline-block;
margin-right: 4px;
}
._2Spe2 {
font-size: 14px;
}
._1xfrN {
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
color: hsl(0, 0%, 20%);
-webkit-font-smoothing: subpixel-antialiased;
color: hsl(0, 0%, 100%);
font-size: 14px;
}
._5StuW {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
color: hsl(0, 0%, 70%)
}
._5StuW:hover {
text-decoration: none;
}
._5StuW:hover:after, ._5StuW:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
@media (max-width: 639px) {
.N9cGW {
display: none;
}
}
.N9cGW:after {
background-color: hsl(0, 0%, 70%);
}
.N9cGW:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
.N9cGW:focus {
outline: auto 5px -webkit-focus-ring-color;
}
@media (max-width: 959px) {
._3c_ZY {
height: 50px;
padding: 0 8px;
width: 100%;
}
}
@media (min-width: 960px) {
._3c_ZY {
width: 320px;
height: 40px;
padding: 0 4px;
}
}
@media (min-width: 1152px) {
._3c_ZY {
width: 336px;
height: 40px;
}
}
._3XK1R[disabled]:hover, ._3XK1R[disabled]:focus {
background-color: hsl(0, 0%, 50%);
}
@media (max-width: 639px) {
._3XK1R {
display: none;
}
}
._3XK1R[disabled] {
background-color: hsl(0, 0%, 50%);
cursor: default;
color: hsl(0, 0%, 90%);
}
._3XK1R:active {
box-shadow: inset 1px 1px 3px 0 hsla(0, 0%, 0%, .2);
background-color: hsl(0, 0%, 30%);
}
._2av8K[disabled]:hover, ._2av8K[disabled]:focus {
background-color: hsl(87, 58%, 45%);
}
@media (min-width: 960px) {
._2av8K {
margin-right: 16px;
}
}
._2av8K[disabled] {
background-color: hsl(87, 58%, 45%);
cursor: default;
color: hsl(0, 0%, 90%);
}
._2av8K:active {
background-color: #538320;
box-shadow: inset 1px 1px 3px 0px hsla(0, 0%, 0%, .2);
}
@media (max-width: 959px) {
._2av8K,
._3XK1R {
width: 100%;
height: 50px;
}
}
@media (min-width: 960px) {
._2av8K,
._3XK1R {
width: 152px;
height: 40px;
}
}
@media (min-width: 1152px) {
._2av8K,
._3XK1R {
width: 160px;
height: 40px;
}
}
._2wjUX:after {
background-color: hsl(0, 0%, 70%);
}
._2wjUX:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
._2wjUX:focus {
outline: auto 5px -webkit-focus-ring-color;
}/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Item Details: Text
--------------------------------------------------------------------*/
._1aPde {
@mixin textDefault;
font-size: 14px;
color: hsl(0, 0%, 100%);
}
/*--------------------------------------------------------------------
*
* PhotoDune Item Details containers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Item Details containers: Info Section
--------------------------------------------------------------------*/
._3Fl6G {
padding-bottom: 16px;
border-bottom: 1px solid hsl(0, 0%, 20%)
}
._3Fl6G:last-of-type {
margin-top: 16px;
margin-bottom: 16px;
}
/*--------------------------------------------------------------------
* Checkout Form: Containers
--------------------------------------------------------------------*/
._1fn9Y {
width: 40%
}
@media (max-width: 639px) {
._1fn9Y {
-ms-flex-direction: column;
flex-direction: column;
padding: 8px 16px;
width: 100%;
}
}
._1ytY3 {
display: -ms-flexbox;
display: flex;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-pack: justify;
justify-content: space-between
}
@media (max-width: 639px) {
._1ytY3 {
-ms-flex-align: start;
align-items: flex-start;
}
}
.uCG2l {
margin-right: 16px;
}
._2J-XL {
min-height: 124px;
padding-top: 16px;
}
.aGi_v {
-ms-flex-align: start;
align-items: flex-start;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-top: 16px;
min-height: 80px;
}
/*--------------------------------------------------------------------
* Checkout Form: Text fields
--------------------------------------------------------------------*/
.-dYC3 {
font-weight: bold;
font-size: 20px;
text-align: right;
}
.bNS9O {
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
color: hsl(0, 0%, 20%);
-webkit-font-smoothing: subpixel-antialiased;
font-size: 18px;
color: hsl(0, 0%, 100%);
text-decoration: none
}
.bNS9O:hover, .bNS9O:focus {
text-decoration: underline;
}
._2z8xL {
margin-top: 16px;
}
._1KAMe {
color: hsl(0, 0%, 70%);
}
._2wjUX {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
color: hsl(0, 0%, 70%)
}
._2wjUX:hover {
text-decoration: none;
}
._2wjUX:hover:after, ._2wjUX:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
.QkD8V {
color: hsl(1, 61%, 44%);
}
/*--------------------------------------------------------------------
* Checkout Form: Buttons
--------------------------------------------------------------------*/
._2av8K,
._3XK1R {
border: none;
border-radius: 2px;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 14px;
transition: all 0.2s ease-in;
box-shadow: 1px 1px 3px -1px hsl(0, 0%, 90%);
margin-bottom: 16px
}
._2av8K:focus, ._3XK1R:focus {
outline: auto 5px -webkit-focus-ring-color;
}
._2av8K {
box-shadow: 1px 1px 3px 0 hsla(0, 0%, 0%, .07);
background-color: #6ba229;
color: hsl(0, 0%, 100%)
}
._2av8K:hover {
background-color: #6dad29;
}
._3XK1R {
box-shadow: 1px 1px 3px 0 hsla(0, 0%, 0%, .07);
background-color: hsl(0, 0%, 40%);
color: hsl(0, 0%, 100%)
}
._3XK1R:hover {
background-color: hsl(0, 0%, 50%);
}
/*--------------------------------------------------------------------
* Checkout Form: Notification
--------------------------------------------------------------------*/
._3c_ZY {
border: none;
border-radius: 2px;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 14px;
transition: all 0.2s ease-in;
box-shadow: 1px 1px 3px -1px hsl(0, 0%, 90%);
-ms-flex-align: center;
align-items: center;
background: hsl(0, 0%, 95%);
color: hsl(0, 0%, 40%);
cursor: default;
display: -ms-flexbox;
display: flex;
font-size: 12px;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 8px
}
._3c_ZY:focus {
outline: none;
}
._3M_rn {
color: hsl(87, 58%, 40%);
margin-right: 4px;
}
/*--------------------------------------------------------------------
* Item Details: Show More Tags Link
--------------------------------------------------------------------*/
.N9cGW {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
font-size: 14px;
color: hsl(0, 0%, 70%)
}
.N9cGW:hover {
text-decoration: none;
}
.N9cGW:hover:after, .N9cGW:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
._1DdGU {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
overflow-anchor: none;
}
._1DHBs {
margin-bottom: 16px;
}
.U5Hzq {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
border-radius: 3px;
}
._1Lh3n {
display: none;
height: 200px;
margin-left: -100%;
left: 0;
background: red;
width: 100%;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
.J3oia {
-ms-flex: 1 1;
flex: 1 1;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._2YyJk {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
._3FLCC {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: start;
align-items: flex-start;
}
.VSO4u {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 20px;
color: hsl(0, 0%, 20%);
padding-bottom: 8px;
line-height: 1.25;
}
._1dAAS {
color: hsl(0, 0%, 20%);
text-decoration: none;
}
._2fSmH {
width: calc(100% + 32px);
margin-left: -16px;
margin-right: -16px;
margin-bottom: -16px;
}
._2_6ar {
display: none;
text-decoration: none;
white-space: nowrap;
}
@media (min-width: 832px) {
._3bx9n {
width: auto;
-ms-flex-order: 0;
order: 0;
}
._3FLCC {
-ms-flex-align: baseline;
align-items: baseline;
}
._2_6ar {
display: block;
padding: 4px 16px !important; /* override foundation small button size */
}
}
@media(min-width: 960px) {
.E88Fo ul li:last-child {
display: none;
}
}
@media(min-width: 1280px) {
.E88Fo ul li:last-child {
display: block;
}
}
.yk-LI:after {
background-color: hsl(0, 0%, 60%);
}
.yk-LI:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
.yk-LI:focus {
outline: none;
}/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._2bBTu {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
._26GdY {
background: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
border-radius: 4px;
text-decoration: none;
box-shadow: hsl(0, 0%, 80%) 0 0 16px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
transition: transform 0.2s;
padding: 16px
}
._26GdY:hover, ._26GdY:focus {
transform: translateY(-2px);
}
._26GdY.aMJad {
background: hsl(0, 0%, 10%);
color: hsl(0, 0%, 100%);
}
._26GdY:last-of-type {
margin-top: 16px;
}
._1C811 {
-ms-flex-negative: 0;
flex-shrink: 0;
}
._2Opl_ {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-direction: column;
flex-direction: column;
padding: 0 16px;
padding-bottom: 16px;
margin-top: 16px;
}
._3chhr {
font-size: 28px;
line-height: 1.25;
margin-bottom: 16px;
}
._2vF8N {
color: hsl(0, 0%, 60%);
}
._2vF8N g {
fill: hsl(0, 0%, 60%);
}
.yk-LI {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
font-size: 16px;
color: hsl(0, 0%, 60%);
margin-right: 4px
}
.yk-LI:hover {
text-decoration: none;
}
.yk-LI:hover:after, .yk-LI:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
@media(min-width: 960px) {
._2bBTu {
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
justify-content: space-between;
}
._26GdY {
-ms-flex-direction: row;
flex-direction: row;
width: calc(50% - 16px);
padding: 0;
}
._26GdY:last-of-type {
margin-top: 0;
}
._1C811 {
padding: 16px;
}
._2Opl_ {
margin-top: 0;
padding: 48px 24px;
padding-left: 0;
-ms-flex-direction: column;
flex-direction: column;
}
}
._2Jqw2 {
position: relative;
min-height: 140px;
display: block;
}
.c-l23:after {
background-color: hsl(163, 46%, 38%);
}
.c-l23:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
.c-l23:focus {
outline: none;
}/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*---------------------------------------------------------------------------------------
* Photodune Search Survey Banner
* Temporary solution
* These styles should be replaced with appropriate Survey Component styles by Sept 2017
----------------------------------------------------------------------------------------*/
._3FvIl {
width: 100%;
}
._3L-Xw {
background-color: hsl(0, 0%, 40%) !important;
}
.g8GtY {
color: hsl(0, 0%, 10%);
font-size: 14px;
}
.c-l23 {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
color: hsl(163, 46%, 38%);
font-size: 14px;
-ms-flex: 1 0;
flex: 1 0
}
.c-l23:hover {
text-decoration: none;
}
.c-l23:hover:after, .c-l23:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
._2G_vx {
color: hsl(0, 0%, 50%);
margin-left: 8px;
}
._3OBD5 {
-ms-flex: 1 0;
flex: 1 0;
}
._2C75c {
background-color: hsl(163, 40%, 90%) !important;
border: 1px solid hsl(163, 46%, 38%) !important;
border-radius: 4px;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-align: center;
align-items: center;
margin-bottom: 16px;
margin-top: 16px;
padding: 16px 19px;
text-align: left;
}
._2i-5A {
margin-right: 16px;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
display: block;
text-align: left;
font-size: 14px
}
@media (max-width: 831px) {
._2i-5A {
display: none;
}
}
/*--------------------------------------------------------------------
*
* PhotoDune Pagination Styles
* Design Reference: https://envato.invisionapp.com/share/ZJC07ZSY2#/237137380_PAGINATION---Desktop---States
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Pagination - Wrapper element
--------------------------------------------------------------------*/
.rKk-w {
margin: 24px auto;
text-align: center;
}
/*--------------------------------------------------------------------
* Pagination - Single Page Link
--------------------------------------------------------------------*/
._200rh {
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
color: hsl(0, 0%, 20%);
text-decoration: none;
cursor: pointer;
border-radius: 2px;
width: 30px;
height: 30px;
vertical-align: middle;
display: table-cell
}
._200rh:hover, ._200rh:focus {
background-color: hsl(0, 0%, 95%);
}
/*--------------------------------------------------------------------
* Pagination - Ellipsis gap between the pages
--------------------------------------------------------------------*/
._1zLsF {
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
color: hsl(0, 0%, 20%);
}
/*--------------------------------------------------------------------
* Pagination - Single Page Currently Selected
--------------------------------------------------------------------*/
._24O42 {
border: 1px solid hsl(0, 0%, 80%);
color: hsl(0, 0%, 60%)
}
._24O42:hover, ._24O42:focus {
background-color: hsl(0, 0%, 100%);
cursor: not-allowed;
}
/*--------------------------------------------------------------------
* Pagination - List element containing the page
--------------------------------------------------------------------*/
.pIPk0 {
display: table;
float: left;
margin-right: 8px;
}
/*--------------------------------------------------------------------
* Pagination - Pagination controls: Left and Right Chevrons
--------------------------------------------------------------------*/
.k89zG {
display: block;
color: hsl(0, 0%, 80%);
padding: 0 8px;
stroke-width: 2;
position: relative;
top: 1px
}
.k89zG:hover, .k89zG:focus {
color: hsl(0, 0%, 60%);
}
._19ILs {
margin-left: 8px;
}
.riG7A {
margin-left: 8px;
}
._360un {
margin: 0 auto;
overflow: hidden;
display: inline-block;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* PhotoDune Pages containers
*
--------------------------------------------------------------------*/
.wZ5nK {
}
@media (max-width: 831px) {
.wZ5nK {
border-top: 0;
}
}
@media (max-width: 1151px) {
.wZ5nK {
margin: 0 16px;
padding: 16px 0 16px 0;
}
}
@media (min-width: 1152px) {
.wZ5nK {
max-width: 1408px;
margin: 0 auto 8px;
padding: 16px 16px 0 16px;
}
}
.TTG-m {
display: -ms-flexbox;
display: flex;
margin-top: 8px;
}
.BNYKr {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-top: 24px;
border-top: 2px solid hsl(0, 0%, 90%);
}
._32VAW {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 2px 0
}
@media (min-width: 832px) {
._32VAW {
-ms-flex-order: 3;
order: 3;
}
}
._1o7LM {
width: 100%;
height: 100%;
min-width: 0;
}
._3zLU4 {
width: 100%;
min-height: 500px;
text-align: center;
margin-top: 32px;
padding-top: 32px;
}
._47ahp {
margin: 0 -16px;
}
.cUuZI,
._20J4V {
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-item-align: baseline;
align-self: baseline;
}
._20J4V {
}
@media (max-width: 639px) {
._20J4V {
-ms-flex-direction: column;
flex-direction: column;
}
}
._2LyRT {
color: hsl(0, 0%, 40%);
-ms-flex-item-align: baseline;
align-self: baseline;
font-size: 12px;
margin-right: 24px;
-ms-flex-order: 2;
order: 2;
height: 42px;
line-height: 40px
}
@media (max-width: 831px) {
._2LyRT {
-ms-flex-order: 1;
order: 1;
width: 100%;
}
}
@media (min-width: 640px) {
._2LyRT {
-ms-flex-pack: end;
justify-content: flex-end;
margin-left: auto;
}
}
._3yYOJ ._3Fxu- {
animation-name: _3cV2X
}
._3yYOJ ._1A3u9 {
animation-name: _3obOl
}
._3yYOJ ._36iK0 {
animation-name: _1IYFW
}
._3yYOJ ._1xGcT {
animation-name: dBL_T
}
._3yYOJ ._3Os_n {
animation-name: _PyCG
}
._3yYOJ .QDdL6 {
animation-name: _32GBB
}
._1ODGX ._3Fxu- {
animation-name: _1DzyN
}
._1ODGX ._1A3u9 {
animation-name: _1L0al
}
._1ODGX ._36iK0 {
animation-name: Csqv7
}
._1ODGX ._1xGcT {
animation-name: dBs8Y
}
._1ODGX ._3Os_n {
animation-name: _1P3LC
}
._1ODGX .QDdL6 {
animation-name: _1kFcy
}/*--------------------------------------------------------------------
*
* PhotoDune Filter Group
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Filter Group: Container
--------------------------------------------------------------------*/
.JMiTG {
display: block
}
@media (max-width: 831px) {
.JMiTG {
position: fixed;
left: 0;
right: 0;
bottom: 0;
overflow: scroll;
z-index: 4;
transition-property: top;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
background: hsl(0, 0%, 100%)
}
}
/*--------------------------------------------------------------------
* Filter Group: Container Open
--------------------------------------------------------------------*/
._3Gfh4 {
}
@media (max-width: 831px) {
._3Gfh4 {
top: 100%
}
}
@media (min-width: 832px) {
._3Gfh4 {
width: 280px;
margin-right: 24px
}
}
._1ccGe {
}
@media (max-width: 831px) {
._1ccGe {
top: 0
}
}
@media (min-width: 832px) {
._1ccGe {
display: none
}
}
._2FXmX {
}
@media (max-width: 831px) {
._2FXmX {
top: 0
}
}
@media (min-width: 832px) {
._2FXmX {
width: 280px;
margin-right: 24px
}
}
._2ylP0 {
}
@media (max-width: 831px) {
._2ylP0 {
top: 100%
}
}
@media (min-width: 832px) {
._2ylP0 {
display: none
}
}
/*--------------------------------------------------------------------
* Filter Group: Container Toggle
--------------------------------------------------------------------*/
._2YVIw {
display: -ms-flexbox;
display: flex
}
@media (min-width: 832px) {
._2YVIw {
margin: 0 auto 8px 0
}
}
@media (max-width: 831px) {
._2YVIw {
display: -ms-flexbox;
display: flex;
background-color: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 90%);
border-radius: 2px;
height: 34px;
margin-top: 2px;
margin-right: 8px
}
}
.ZLSF6 {
border: none;
border-radius: 2px;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 14px;
transition: all 0.2s ease-in;
box-shadow: 1px 1px 3px -1px hsl(0, 0%, 90%);
background-color: transparent;
border: none;
padding: 8px 8px 8px 0;
color: hsl(0, 0%, 40%);
box-shadow: none;
display: -ms-flexbox;
display: flex;
width: 160px;
}
.ZLSF6:focus {
outline: auto 5px -webkit-focus-ring-color
}
@media (max-width: 831px) {
.ZLSF6 {
width: 84px;
line-height: 18px;
padding: 7px 2px;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
}
._3wJqg {
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
color: hsl(0, 0%, 20%);
-webkit-font-smoothing: subpixel-antialiased;
font-weight: 600
}
@media (max-width: 831px) {
._3wJqg {
font-size: 14px;
font-weight: 400
}
}
@media (min-width: 832px) {
._3wJqg {
margin-left: 8px;
margin-right: 0
}
}
._3wJqg:last-child {
}
@media (min-width: 832px) {
._3wJqg:last-child {
margin-left: 4px
}
}
._2pUcL {
}
@media (max-width: 831px) {
._2pUcL {
display: none
}
}
._3VkCv {
}
@media (min-width: 832px) {
._3VkCv {
display: none
}
}
._2CX5O {
max-width: 12px;
}
/*--------------------------------------------------------------------
* Filter Group: SVG icon animations
--------------------------------------------------------------------*/
@media (min-width: 832px) {
._1brOV ._3Fxu- {
animation-name: _3cV2X
}
._1brOV ._1A3u9 {
animation-name: _3obOl
}
._1brOV ._36iK0 {
animation-name: _1IYFW
}
._1brOV ._1xGcT {
animation-name: dBL_T
}
._1brOV ._3Os_n {
animation-name: _PyCG
}
._1brOV .QDdL6 {
animation-name: _32GBB
}
._3riWF ._3Fxu- {
animation-name: _1DzyN
}
._3riWF ._1A3u9 {
animation-name: _1L0al
}
._3riWF ._36iK0 {
animation-name: Csqv7
}
._3riWF ._1xGcT {
animation-name: dBs8Y
}
._3riWF ._3Os_n {
animation-name: _1P3LC
}
._3riWF .QDdL6 {
animation-name: _1kFcy
}
._3riWF {
}
._3riWF .QDdL6,
._3riWF ._3Os_n,
._3riWF ._1xGcT,
._3riWF ._36iK0,
._3riWF ._1A3u9,
._3riWF ._3Fxu- {
animation-fill-mode: forwards;
animation-duration: 0.3s;
transform-origin: center center
}
._1brOV {
}
._1brOV .QDdL6,
._1brOV ._3Os_n,
._1brOV ._1xGcT,
._1brOV ._36iK0,
._1brOV ._1A3u9,
._1brOV ._3Fxu- {
animation-fill-mode: forwards;
animation-duration: 0.3s;
animation-direction: reverse;
transform-origin: center center
}
}
@media (max-width: 831px) {
._1brOV ._3Fxu- {
animation-name: _1DzyN
}
._1brOV ._1A3u9 {
animation-name: _1L0al
}
._1brOV ._36iK0 {
animation-name: Csqv7
}
._1brOV ._1xGcT {
animation-name: dBs8Y
}
._1brOV ._3Os_n {
animation-name: _1P3LC
}
._1brOV .QDdL6 {
animation-name: _1kFcy
}
._3riWF ._3Fxu- {
animation-name: _3cV2X
}
._3riWF ._1A3u9 {
animation-name: _3obOl
}
._3riWF ._36iK0 {
animation-name: _1IYFW
}
._3riWF ._1xGcT {
animation-name: dBL_T
}
._3riWF ._3Os_n {
animation-name: _PyCG
}
._3riWF .QDdL6 {
animation-name: _32GBB
}
._3riWF {
}
._3riWF .QDdL6,
._3riWF ._3Os_n,
._3riWF ._1xGcT,
._3riWF ._36iK0,
._3riWF ._1A3u9,
._3riWF ._3Fxu- {
animation-fill-mode: forwards;
animation-duration: 0.3s;
animation-direction: reverse;
transform-origin: center center
}
._1brOV {
}
._1brOV .QDdL6,
._1brOV ._3Os_n,
._1brOV ._1xGcT,
._1brOV ._36iK0,
._1brOV ._1A3u9,
._1brOV ._3Fxu- {
animation-fill-mode: forwards;
animation-duration: 0.3s;
transform-origin: center center
}
}
._1ODGX {
}
._1ODGX .QDdL6,
._1ODGX ._3Os_n,
._1ODGX ._1xGcT,
._1ODGX ._36iK0,
._1ODGX ._1A3u9,
._1ODGX ._3Fxu- {
animation-fill-mode: forwards;
animation-duration: 0.3s;
transform-origin: center center
}
._3yYOJ {
}
._3yYOJ .QDdL6,
._3yYOJ ._3Os_n,
._3yYOJ ._1xGcT,
._3yYOJ ._36iK0,
._3yYOJ ._1A3u9,
._3yYOJ ._3Fxu- {
animation-fill-mode: forwards;
animation-duration: 0.3s;
animation-direction: reverse;
transform-origin: center center
}
@keyframes _1kFcy {
0% {
transform: translateY(0);
}
50% {
transform: translateY(4px) translateX(-4px);
}
100% {
transform: translateY(4px) translateX(-4px) rotate(45deg);
}
}
@keyframes _1P3LC {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes dBs8Y {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-3px) translateX(-4px);
}
100% {
transform: translateY(-3px) translateX(-4px) rotate(-45deg);
}
}
@keyframes Csqv7 {
0% {
transform: translateY(0);
}
50% {
transform: translateY(5px);
opacity: 1;
}
51% {
width: 50%;
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes _1L0al {
50% {
opacity: 1;
}
51% {
width: 50%;
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes _1DzyN {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
55% {
width: 50%;
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes _32GBB {
0% {
transform: translateY(0);
}
50% {
transform: translateY(4px) translateX(-4px);
}
100% {
transform: translateY(4px) translateX(-4px) rotate(45deg);
}
}
@keyframes _PyCG {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes dBL_T {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-3px) translateX(-4px);
}
100% {
transform: translateY(-3px) translateX(-4px) rotate(-45deg);
}
}
@keyframes _1IYFW {
0% {
transform: translateY(0);
}
50% {
transform: translateY(5px);
opacity: 1;
}
51% {
width: 50%;
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes _3obOl {
50% {
opacity: 1;
}
51% {
width: 50%;
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes _3cV2X {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
55% {
width: 50%;
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._31Giv {
margin-bottom: 16px;
}
@media (min-width: 832px) {
._1GTDM::-webkit-scrollbar-thumb {
height: 24px;
background-color: hsl(0, 0%, 70%);
}
._1GTDM {
margin-top: 8px;
margin-bottom: 24px;
overflow-y: auto;
overflow-x: hidden;
max-height: 231px;
}
._1GTDM::-webkit-scrollbar {
width: 8px;
background-color: hsl(0, 0%, 90%);
}
}
.lb8Bs {
color: hsl(0, 0%, 80%);
width: 14px;
height: 14px;
margin: 6px 4px 12px 0px;
}
._1SXRP {
display: -ms-flexbox;
display: flex;
line-height: 32px
}
@media (max-width: 831px) {
._1SXRP {
margin: 8px 0;
}
}
._1kd89 {
font-size: 12px;
color: hsl(0, 0%, 60%);
-ms-flex: 1 0 auto;
flex: 1 0 auto;
text-align: right;
padding-right: 24px;
}
._1OYwR {
font-size: 14px;
color: hsl(0, 0%, 20%);
text-decoration: none;
-ms-flex: 3 0 auto;
flex: 3 0 auto;
}
.fXC7e,
._2tIrr,
._1HFue {
font-weight: 700;
}
.fXC7e {
}
._2tIrr {
}
._1HFue {
margin-left: 4px;
}
._1Y9yS {
margin-left: 16px;
}
.Y2LSz {
position: absolute;
top: -42px;
left: -20px;
border: 1px solid hsl(0, 0%, 90%);
border-radius: 8px;
white-space: nowrap;
padding: 3px 6px;
font-size: 12px;
font-weight: normal;
line-height: 20px;
min-width: 36px;
text-align: center;
._1p2zD:last-child & {
left: auto;
left: initial;
right: -20px;
}
}
.Y2LSz::after {
content: "";
position: absolute;
background: hsl(0, 0%, 98%);
border: 1px solid hsl(0, 0%, 90%);
border-left: 0;
border-top: 0;
transform: rotate(45deg);
width: 8px;
height: 8px;
left: 14px;
top: 23px;
}
._1uIXP {
color: black;
font-size: 12px;
font-weight: bold;
line-height: 1;
}
._3Qw12 {
margin: 50px 0 16px 0;
height: 50px;
padding: 0 16px;
-ms-flex: 1;
flex: 1;
}
._1SNkk {
top: 24px;
position: absolute;
transform: translateX(-50%);
font-size: 12px;
}
._29zXj {
background-color: hsl(0, 0%, 90%);
width: 4px;
height: 14px;
border-radius: 4px;
}
._2RmVf {
top: 50%;
transform: translateY(-50%);
}
._3zBlA {
background-color: hsl(168, 76%, 42%);
}
._3Qw12 .rheostat {
margin: 0 8px;
position: relative;
}
._3Qw12 .DefaultBackground {
background: hsl(168, 76%, 42%);
height: 8px;
border-radius: 8px;
margin-left: -24px;
margin-right: -24px;
}
._3Qw12 .DefaultProgressBar_progressBar {
background-color: hsl(0, 0%, 90%);
position: absolute;
height: 8px;
top: 0
}
._3Qw12 .DefaultProgressBar_progressBar:before {
content: "";
left: -24px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
position: absolute;
height: 8px;
background-color: hsl(0, 0%, 90%);
width: 24px;
display: block;
}
._3Qw12 .resolutionHandle {
z-index: 2;
height: 26px;
width: 26px;
border-radius: 26px;
background: hsl(0, 0%, 100%);
box-shadow: 1px 1px 4px 0px hsl(0, 0%, 80%);
border: 1px solid hsl(0, 0%, 80%);
transform: translateX(-50%) translateY(-17px);
}
/*--------------------------------------------------------------------
*
* PhotoDune Checkbox Group Filter
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._3kFGv {
margin-top: 8px;
margin-bottom: 24px;
}
._3Iuwi {
display: -ms-flexbox;
display: flex;
line-height: 32px;
margin-right: 24px;
-ms-flex-pack: justify;
justify-content: space-between
}
@media (max-width: 831px) {
._3Iuwi {
margin-top: 8px;
margin-bottom: 8px;
}
}
/* No scrolling for mobile */
@media (min-width: 832px) {
._3kFGv::-webkit-scrollbar-thumb {
height: 24px;
background-color: hsl(0, 0%, 70%);
}
._3kFGv {
margin-top: 8px;
margin-bottom: 24px;
overflow-y: auto;
overflow-x: hidden;
max-height: 231px;
}
._3kFGv::-webkit-scrollbar {
width: 8px;
background-color: hsl(0, 0%, 90%);
}
}
._2kkyX {
color: hsl(0, 0%, 60%);
font-size: 12px;
}
._12dTO {
color: hsl(0, 0%, 60%);
font-size: 14px;
}
._3VE_Q {
text-decoration: none;
line-height: 32px;
color: hsl(0, 0%, 20%);
font-size: 14px;
}
._1HBLP {
display: inline-block;
position: relative;
}
._1HBLP:before {
content: " ";
display: inline-block;
position: relative;
top: 3px;
margin: 0 12px 0 0;
width: 16px;
height: 16px;
border: 1px solid hsl(0, 0%, 80%);
background-color: transparent;
border-radius: 2px;
}
._3IkF1:before {
border-color: #075e7d;
}
._3IkF1:after {
width: 8px;
height: 5px;
position: absolute;
left: 6px;
top: 14px;
content: " ";
border-left: 2px solid #030303;
border-bottom: 2px solid #075e7d;
transform: rotate(-45deg) translateY(-50%);
}
.NcPVp {
padding-bottom: 24px;
}
._1tu4A {
display: -ms-flexbox;
display: flex;
line-height: 32px;
margin-right: 24px;
-ms-flex-pack: justify;
justify-content: space-between;
}
._3hyRl {
color: hsl(0, 0%, 60%);
font-size: 12px;
}
._1BYx5:checked + :after {
border-radius: 11px;
width: 6px;
height: 6px;
position: absolute;
top: 14px;
left: 5px;
content: ' ';
background: hsl(196, 89%, 26%)
}
._1BYx5:checked + :before {
border-color: hsl(196, 89%, 26%)
}
._1BYx5 + :before {
content: ' ';
display: inline-block;
position: relative;
top: 4px;
margin: 0 12px 0 0;
width: 16px;
height: 16px;
border-radius: 11px;
border: 1px solid hsl(0, 0%, 80%);
background-color: transparent
}/*--------------------------------------------------------------------
*
* PhotoDune Radio Filter
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._3Rn0u {
display: -ms-flexbox;
display: flex;
line-height: 32px;
margin-right: 24px;
-ms-flex-pack: justify;
justify-content: space-between
}
@media (max-width: 831px) {
._3Rn0u {
margin-top: 8px;
margin-bottom: 8px
}
}
._2l-TL {
margin-top: 8px;
margin-bottom: 24px;
}
/* No scrolling for mobile */
@media (min-width: 832px) {
._2l-TL::-webkit-scrollbar-thumb {
height: 24px;
background-color: hsl(0, 0%, 70%)
}
._2l-TL {
margin-top: 8px;
margin-bottom: 24px;
overflow-y: auto;
overflow-x: hidden;
max-height: 231px;
}
._2l-TL::-webkit-scrollbar {
width: 8px;
background-color: hsl(0, 0%, 90%)
}
}
._1BYx5 {
display: none;
}
._1BYx5 + * {
position: relative;
color: hsl(0, 0%, 20%);
font-size: 14px;
cursor: pointer;
white-space: nowrap;
display: inline-block
}
._3RQES {
color: hsl(0, 0%, 60%);
font-size: 12px;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._2jhY7 {
margin-bottom: 16px;
line-height: 32px;
}
@media (min-width: 832px) {
._2jhY7::-webkit-scrollbar-thumb {
height: 24px;
background-color: hsl(0, 0%, 70%);
}
._2jhY7 {
margin-top: 8px;
margin-bottom: 24px;
overflow-y: auto;
overflow-x: hidden;
max-height: 231px;
}
._2jhY7::-webkit-scrollbar {
width: 8px;
background-color: hsl(0, 0%, 90%);
}
}
._2PIXy {
width: 24px;
height: 22px;
padding: 2px 8px 2px 0px;
cursor: pointer;
display: inline-block;
line-height: 14px;
}
._28l19 {
display: inline-block;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 20%);
border: 1px solid hsl(0, 0%, 60%);
font-weight: normal;
text-align: center;
width: 16px;
height: 16px;
font-size: 11px;
border-radius: 2px;
}
.CCAmX {
opacity: 0;
}
._1td6d {
transform: rotate(90deg);
}
._1bSix {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 831px) {
._1bSix {
margin: 8px 0;
}
}
.grx9u {
display: -ms-flexbox;
display: flex;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
font-size: 14px;
color: hsl(0, 0%, 20%);
text-decoration: none;
}
._1TEBc {
font-size: 12px;
color: hsl(0, 0%, 60%);
-ms-flex: 1 0 auto;
flex: 1 0 auto;
text-align: right;
padding-right: 24px;
font-weight: 400;
}
._28D-j {
padding-left: 0;
}
._12wdP {
padding-left: 8px;
margin-left: 24px;
}
._1tbqU {
display: none;
}
._2Uvaf {
font-weight: 700;
}
._1iIqw {
font-weight: 700;
color: hsl(196, 90%, 31%);
}
._3WEcW:active {
box-shadow: inset 1px 1px 3px 0 hsla(0, 0%, 0%, .2);
background-color: hsl(0, 0%, 80%);
}
._3WEcW:hover {
background-color: hsl(0, 0%, 95%);
}/*--------------------------------------------------------------------
*
* PhotoDune Price Filter
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Price Filter: Spacer between inputs
--------------------------------------------------------------------*/
._2zSyE {
margin: 0 8px;
}
/*--------------------------------------------------------------------
* Price Filter: Price inputs and wrappers
--------------------------------------------------------------------*/
._3BYKu {
position: relative;
}
._25r2q {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-bottom: 24px;
}
._1hMyj {
position: absolute;
top: 8px;
left: 8px;
}
._1hMyj,
._2zSyE {
font-size: 12px;
color: hsl(0, 0%, 10%);
}
._3yPNI::-webkit-input-placeholder {
color: hsl(0, 0%, 60%);
}
._3yPNI:-ms-input-placeholder {
color: hsl(0, 0%, 60%);
}
._3yPNI::placeholder {
color: hsl(0, 0%, 60%);
}
._3yPNI {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 16px;
color: hsl(0, 0%, 10%);
border: 2px solid hsl(0, 0%, 90%);
background-color: hsl(0, 0%, 100%);
-webkit-appearance: none;
font-size: 12px;
border-width: 1px;
border-radius: 2px;
padding: 8px;
padding-left: 16px;
width: 104px;
height: 32px;
}
._3yPNI:focus {
outline: none;
border-color: hsl(0, 0%, 80%);
}
/*--------------------------------------------------------------------
* Price Filter: Button
--------------------------------------------------------------------*/
._3WEcW {
border: none;
border-radius: 2px;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 14px;
transition: all 0.2s ease-in;
box-shadow: 1px 1px 3px -1px hsl(0, 0%, 90%);
background-color: hsl(0, 0%, 90%);
color: hsl(0, 0%, 40%);
width: 32px;
height: 32px;
margin-left: 8px;
text-align: center;
}
._3WEcW:focus {
outline: none;
}
.rC2QR:active {
box-shadow: inset 1px 1px 3px 0 hsla(0, 0%, 0%, .2);
background-color: hsl(0, 0%, 80%);
}
.rC2QR:hover {
background-color: hsl(0, 0%, 95%);
}/*--------------------------------------------------------------------
*
* Simple Filter
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Simple Filter: inputs and wrappers
--------------------------------------------------------------------*/
._1yHf9 {
position: relative;
width: 100%;
}
.fDFx2 {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-bottom: 24px;
}
._3fvq4::-webkit-input-placeholder {
font-size: 12px;
color: hsl(0, 0%, 60%);
}
._3fvq4:-ms-input-placeholder {
font-size: 12px;
color: hsl(0, 0%, 60%);
}
._3fvq4::placeholder {
font-size: 12px;
color: hsl(0, 0%, 60%);
}
._3fvq4 {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 16px;
color: hsl(0, 0%, 10%);
border: 2px solid hsl(0, 0%, 90%);
background-color: hsl(0, 0%, 100%);
-webkit-appearance: none;
font-size: 12px;
border-width: 1px;
border-radius: 2px;
padding: 8px;
padding-left: 16px;
width: 100%;
height: 32px;
}
._3fvq4:focus {
outline: none;
border-color: hsl(0, 0%, 80%);
}
/*--------------------------------------------------------------------
* Simple Filter: Button
--------------------------------------------------------------------*/
.rC2QR {
border: none;
border-radius: 2px;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 14px;
transition: all 0.2s ease-in;
box-shadow: 1px 1px 3px -1px hsl(0, 0%, 90%);
background-color: hsl(0, 0%, 90%);
color: hsl(0, 0%, 40%);
width: 32px;
height: 32px;
margin-left: 8px;
text-align: center;
}
.rC2QR:focus {
outline: none;
}
/*--------------------------------------------------------------------
*
* PhotoDune Search Selected Filters: Single Item
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Selected Filters - Single Item Container
--------------------------------------------------------------------*/
._3g6eY {
margin-right: 8px;
margin-bottom: 8px;
background-color: hsl(0, 0%, 100%);
position: relative;
cursor: pointer;
display: -ms-flexbox;
display: flex;
text-decoration: none;
border-radius: 4px
}
._3g6eY:hover,
._3g6eY:active,
._3g6eY:focus {
border-color: hsl(0, 0%, 80%);
background-color: hsl(0, 0%, 95%);
border-radius: 4px
}
._3YFXw {
}
._3YFXw:hover, ._3YFXw:focus {
background: none
}
/*--------------------------------------------------------------------
* Selected Filters - Filter Name
--------------------------------------------------------------------*/
._1x3ky {
display: -ms-flexbox;
display: flex;
padding: 4px 8px;
border: 1px solid hsl(0, 0%, 90%);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.bFVnA {
}
@media (max-width: 831px) {
.bFVnA {
border: 0;
padding: 0
}
.bFVnA:hover, .bFVnA:focus {
border: 0
}
}
.wcg2R {
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
color: hsl(0, 0%, 20%);
-webkit-font-smoothing: subpixel-antialiased;
font-size: 12px;
font-weight: 500;
}
._1xgM6 {
color: hsl(0, 0%, 60%);
font-size: 12px;
}
/*--------------------------------------------------------------------
* Selected Filters - Filter Remove Icon and Link
--------------------------------------------------------------------*/
.deTU3 {
padding: 0 8px;
border: 1px solid hsl(0, 0%, 90%);
border-left: none;
display: block;
color: hsl(0, 0%, 60%);
text-align: center;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px
}
.deTU3:hover, .deTU3:focus {
background: hsl(0, 0%, 95%);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px
}
.s8ScO {
}
@media (max-width: 831px) {
.s8ScO {
display: inline-block
}
}
._61rqe svg {
transition: all 0.4s ease-out;
transform: rotate(0deg);
}
@media (max-width: 831px) {
._1loc3 {
padding-left: 24px;
padding-right: 24px;
}
}/*--------------------------------------------------------------------
*
* PhotoDune Filter Container
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Filter: Heading
--------------------------------------------------------------------*/
._3vvh6 {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 16px;
color: hsl(0, 0%, 30%);
font-weight: 500;
}
/*--------------------------------------------------------------------
* Filter: Container
--------------------------------------------------------------------*/
._1loc3 {
margin-bottom: 16px;
border-bottom: 1px solid hsl(0, 0%, 90%)
}
._1loc3:last-of-type {
border-bottom: none;
}
/*--------------------------------------------------------------------
* Filter: Heading and Collapse Button container
--------------------------------------------------------------------*/
._1HhXF {
margin-top: 4px;
margin-bottom: 16px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
._61rqe {
border: none;
border-radius: 2px;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 14px;
transition: all 0.2s ease-in;
box-shadow: 1px 1px 3px -1px hsl(0, 0%, 90%);
background-color: transparent;
border: none;
color: hsl(0, 0%, 70%);
box-shadow: none;
padding: 0;
width: 100%;
display: block
}
._61rqe:focus {
outline: none;
}
.XLw0c svg {
transform: rotate(180deg);
}
._2Zwwb {
display: none;
}
._1m4HX {
}
@media (max-width: 831px) {
._1m4HX {
opacity: 0.5;
}
._1m4HX:after {
content: '';
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
}
._1hmAR {
}
@media (max-width: 831px) {
._1hmAR {
width: 100%;
-ms-flex-order: 2;
order: 2;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 4px;
text-align: left;
}
}
@media (min-width: 832px) {
._1hmAR {
display: none;
}
}
._1y-cL {
}
@media (max-width: 831px) {
._1y-cL {
max-height: 20000px;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}
}
._3pOVV {
}
@media (max-width: 831px) {
._3pOVV {
max-height: 200px;
overflow: hidden;
}
}
._3eeKY {
}
@media (min-width: 832px) {
._3eeKY {
display: none;
}
}
@media (max-width: 831px) {
._3eeKY {
display: block;
margin: 0 -24px;
padding: 14px 0;
color: hsl(196, 90%, 31%);
font-size: 14px;
text-align: center;
cursor: pointer;
}
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._1-BRi {
display: none;
}
@media (max-width: 831px) {
._1-BRi {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: end;
justify-content: flex-end;
background: hsl(0, 0%, 98%);
padding: 24px;
border-bottom: 2px solid hsl(0, 0%, 90%);
margin-bottom: 16px;
}
._3KLon {
width: calc(100% - 160px);
}
._3SCbi {
font-size: 16px;
font-weight: 400;
}
._1tD-6 {
font-size: 12px;
color: hsl(0, 0%, 60%);
}
._2xFAY {
width: 80px;
height: 40px;
background: #6ba229;
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .07);
border: 0;
border-radius: 2px;
font-size: 14px;
color: hsl(0, 0%, 100%);
}
._3Xng6 {
width: 80px;
height: 40px;
display: block;
margin-right: 10px;
color: hsl(196, 90%, 31%);
font-size: 14px;
text-align: center;
text-decoration: none;
line-height: 40px;
}
}
.cjNU_ {
font-weight: 700;
margin: 8px 0;
}
.xflLS {
font-size: 14px;
font-weight: lighter;
color: hsl(0, 0%, 40%);
cursor: pointer;
display: inline;
-ms-flex-align: center;
align-items: center;
}
.xflLS:hover, .xflLS:focus {
color: hsl(196, 90%, 31%);
}
._2mGzc {
margin: 12px 0;
}
._2mGzc .rheostat {
margin: 0 8px;
width: 120px;
position: relative;
}
._2mGzc .DefaultBackground {
background: hsl(0, 0%, 90%);
height: 4px;
border: none;
}
._2mGzc .DefaultProgressBar_progressBar {
background-color: hsl(87, 58%, 40%);
transform: translateY(-4px);
height: 4px;
border: none;
}
.volumeHandle {
height: 14px;
width: 14px;
border-radius: 14px;
padding: 0;
border: none;
transform: translateX(-25%) translateY(-9px);
}
._1dkVk .volumeHandle {
background: hsl(0, 0%, 70%);
}
.di4kC .volumeHandle {
background: hsl(87, 58%, 40%);
}
._2uDl3 {
display: -ms-flexbox;
display: flex;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: right;
height: 16px;
}
._1pT2C {
font-weight: 700;
margin: 8px;
}
._1_j9J {
font-size: 14px;
font-weight: lighter;
color: #666666;
cursor: pointer;
display: inline;
-ms-flex-align: center;
align-items: center;
}
._1_j9J:hover, ._1_j9J:focus {
color: #0084B4;
}
._3-dJO {
padding-left: 4px;
line-height: 18px;
}
.bmiV0:active,
.bmiV0:hover,
.bmiV0:focus {
opacity: 1
}.bmiV0:link,
.bmiV0:visited {
color: hsl(0, 0%, 100%);
text-decoration: none
}.bmiV0:active:after {
opacity: 0.2;
transform: translateY(1px)
}.bmiV0:active {
color: hsl(0, 0%, 50%)
}.bmiV0:hover:after, .bmiV0:focus:after {
opacity: 1;
transform: translateY(-3px) translateZ(0)
}.bmiV0 {
display: inline-block;
position: relative;
transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1)
}.bmiV0:after {
background-color: hsl(0, 0%, 100%);
content: "";
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._1Kng9 {
width: 20%;
list-style: none;
margin-bottom: 24px;
padding: 0
}
@media (max-width: 959px) {
._1Kng9 {
width: 33.33%
}
}
@media (max-width: 639px) {
._1Kng9 {
width: 100%
}
}
._2sXdq {
display: inline-block;
width: 100%;
white-space: nowrap;
margin-bottom: 8px;
}
._37Rqk {
display: inline-block;
width: 100%;
white-space: nowrap
}
@media (max-width: 639px) {
._37Rqk:last-child:after {
content: ''
}
._37Rqk {
width: auto
}
._37Rqk:after {
content: ',';
opacity: 0.5;
margin-right: 5px
}
}
._1wPuv {
}
._1wPuv:link,
._1wPuv:visited {
margin-bottom: 8px;
opacity: 0.5
}
/*--------------------------------------------------------------------
*
* QuickLinksFooter: General styles
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* QuickLinksFooter: General wrapper styles
--------------------------------------------------------------------*/
._2QhhJ {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
background-color: hsl(0, 0%, 20%);
color: hsl(0, 0%, 100%);
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
font-size: 12px
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3) {
._2QhhJ {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
}
@media only screen and (-o-min-device-pixel-ratio: 13 / 10) {
._2QhhJ {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 120dpi) {
._2QhhJ {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
}
/*--------------------------------------------------------------------
* QuickLinksFooter: Container
--------------------------------------------------------------------*/
._3i0JJ {
max-width: 1408px;
padding-left: 10px;
padding-right: 10px;
margin-left: auto;
margin-right: auto;
}
.q36gF {
padding-left: 8px;
padding-right: 8px;
}
/*--------------------------------------------------------------------
* QuickLinksFooter: Title
--------------------------------------------------------------------*/
.LE8dC {
border-top: 2px solid #454545;
padding-top: 24px;
padding-bottom: 24px;
}
/*--------------------------------------------------------------------
* QuickLinksFooter: Toggle text and icon
--------------------------------------------------------------------*/
.d8ozT {
cursor: pointer;
display: inline;
}
.MH_x8 {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
margin-right: 16px
}
.MH_x8:before,
.MH_x8:after {
content: '';
position: absolute;
background: gray;
transition: 200ms all ease-out;
top: 4px;
left: 0;
right: 0;
height: 2px
}
._33dI9:before {
transform: rotate(-90deg);
}
._2Y6M5 {
text-transform: uppercase;
font-weight: bold;
}
.rK2U6 {
opacity: 0.5
}
.rK2U6:before {
content: ' - '
}
/*--------------------------------------------------------------------
* QuickLinksFooter: Content
--------------------------------------------------------------------*/
._3J-xO {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
max-height: 1500px;
overflow: hidden;
opacity: 1;
transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
}
.i3yMF {
max-height: 0;
opacity: 0;
}
@media (max-width: 959px) {
.gNZTp {
margin-left: 32px
}
}
@media (max-width: 639px) {
.gNZTp {
margin-left: 0
}
}/*--------------------------------------------------------------------
*
* Footer: Marketplace stats component
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._2Hrzv {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row
}
@media (max-width: 959px) {
._2Hrzv {
margin-left: 24px;
margin-top: 0
}
}
@media (max-width: 639px) {
._2Hrzv {
margin-left: 0;
margin-right: auto;
margin-top: 16px
}
}
.gNZTp {
list-style: none;
padding: 0
}
.gNZTp:not(:first-child) {
margin-left: 16px
}
@media (max-width: 639px) {
.gNZTp:not(:first-child) {
margin-left: 32px
}
}
._3zD21 {
color: hsl(0, 0%, 100%);
display: block;
font-size: 16px;
font-weight: 700;
}
.EXPIw {
padding: 32px 0;
}
._6s-Lx {
max-width: 1004px;
padding-left: 10px;
padding-right: 10px;
margin-left: auto;
margin-right: auto;
}
.BaJb8 {
border-top: 1px solid hsl(0, 0%, 90%);
}
._3wjYB {
background: hsl(0, 0%, 95%);
}
._1Z36o {
margin-bottom: 32px;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._3Dqqh {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.5;
margin-bottom: 16px;
font-weight: 700;
font-size: 28px;
color: #454545;
padding: 0;
}
._1KXLd {
text-align: center;
}
._1sSaG {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
margin-bottom: 16px;
padding: 0;
text-align: center;
}
._2mbAl {
text-align: center;
}
@media (max-width: 639px) {
._2eR5r {
display: none;
}
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
.UpKkW {
text-align: center;
margin-top: 5px;
margin-bottom: 32px;
}
._3KBZE {
width: 100%;
}
@media (max-width: 639px) {
._3KBZE {
display: none;
}
}
.iBjMO {
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: center;
align-items: center;
background: hsl(0, 0%, 10%);
box-shadow: 0px 0px 1px 1px hsl(0, 0%, 20%);
background: linear-gradient(to top, #4c4e5a 0%, #2c2d33 100%);
padding: 2px 4px 2px 2px;
}
._3wNTc {
background-color: transparent;
color: hsl(0, 0%, 27%);
border: none;
outline: none;
padding: 0;
margin-right: 2px;
display: -ms-flexbox;
display: flex;
place-items: center;
}
._2BxOF {
width: 100%;
height: 6px;
background: hsl(76, 60%, 47%);
padding: 2px;
}
._2YTZK {
height: 100%;
position: relative;
}
._2YTZK:after {
content: '';
position: absolute;
width: 6px;
height: 12px;
background: hsl(0, 0%, 100%);
top: -5px;
right: -4px;
border: hsl(0, 0%, 20%) 1px solid;
}
._2TQSm {
width: 14px;
height: 14px;
color: hsl(76, 60%, 47%);
}
._2TQSm:hover, ._2TQSm:focus {
cursor: pointer;
color: hsl(0, 0%, 100%);
}
._3Mo_k {
color: hsl(0, 0%, 100%);
}
@keyframes _38Doa{
from {
transform:rotate(0);
}
to {
transform:rotate(360deg);
}
}
._2vrId {
animation: _38Doa 1s linear infinite;
}
._2wXs_ {
display: block;
height: 80px;
width: 80px;
margin: 0 auto;
}
._1GOiK {
position: absolute;
width: 100%;
padding: 4px 6px;
top: 50px;
}
._24FTO {
width: 80px;
height: 80px;
}
/*--------------------------------------------------------------------
*
* US Dollars Notice Component
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._23OGJ {
font-size: 12px;
color: hsl(0, 0%, 50%);
display: inline-block;
margin: 8px 0;
min-width: 120px;
}
/*--------------------------------------------------------------------
*
* Footer: General styles
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
* Footer: General footer wrapper styles
--------------------------------------------------------------------*/
._1Pb5I {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
background-color: hsl(0, 0%, 10%);
color: hsl(0, 0%, 100%);
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
font-size: 13px;
padding-bottom: 32px;
padding-top: 32px
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3) {
._1Pb5I {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
}
@media only screen and (-o-min-device-pixel-ratio: 13 / 10) {
._1Pb5I {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 120dpi) {
._1Pb5I {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
}
/*--------------------------------------------------------------------
* Footer: Grid Container
--------------------------------------------------------------------*/
._1s697 {
max-width: 1408px;
padding-left: 16px;
padding-right: 16px;
margin-left: auto;
margin-right: auto;
}
/*--------------------------------------------------------------------
* Footer: Container
--------------------------------------------------------------------*/
._3J3Xl {
display: -ms-flexbox;
display: flex;
padding-bottom: 16px;
padding-left: 8px;
padding-right: 8px;
padding-top: 32px
}
@media (max-width: 959px) {
._3J3Xl {
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
padding-top: 16px
}
}
._3J3Xl:last-child {
}
@media (min-width: 640px) and (max-width: 959px) {
._3J3Xl:last-child {
-ms-flex-direction: row;
flex-direction: row
}
}
/*--------------------------------------------------------------------
* Footer: Visual separator (
)
--------------------------------------------------------------------*/
.VBCSb {
background-color: #262626;
border: none;
display: block;
height: 2px;
margin: 0 auto;
padding: 0;
}
._17XDy {
margin-bottom: 32px
}
@media (min-width: 960px) {
._17XDy {
display: none !important
}
}
._1eqUd {
margin-top: 24px
}
@media (min-width: 640px) {
._1eqUd {
display: none !important
}
}
/*--------------------------------------------------------------------
* Footer: Text link
--------------------------------------------------------------------*/
._3t5SY {
}
._3t5SY:link,
._3t5SY:visited {
opacity: 0.5
}
._229R0:link,
._229R0:visited {
opacity: 1;
}
/*--------------------------------------------------------------------
* Footer: Icon link
--------------------------------------------------------------------*/
._1HTgw {
display: inline-block;
transition: 0.1s cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform
}
._1HTgw:hover,
._1HTgw:active,
._1HTgw:focus {
opacity: 0.8;
transform: translateY(-3px)
}
/*--------------------------------------------------------------------
* Footer: Company Links Container
--------------------------------------------------------------------*/
.URBwv {
margin-right: 32px
}
@media (max-width: 959px) {
.URBwv {
margin-top: 8px
}
}
@media (max-width: 639px) {
.URBwv {
margin-top: 16px;
margin-right: 0;
text-align: center
}
}
._1Euek {
padding: 0;
margin: 0;
}
/*--------------------------------------------------------------------
* Footer: Single list item
--------------------------------------------------------------------*/
.Ro6CP {
display: inline-block
}
.Ro6CP:not(:first-child) {
margin-left: 24px
}
@media (max-width: 639px) {
.Ro6CP:not(:first-child) {
margin-left: 16px
}
}
/*--------------------------------------------------------------------
* Footer: Copyright text
--------------------------------------------------------------------*/
.n1aMi {
display: block;
color: hsl(0, 0%, 60%);
font-size: inherit;
margin-top: 12px
}
@media (min-width: 640px) and (max-width: 959px) {
.n1aMi {
max-width: 380px
}
}
@media (max-width: 639px) {
.n1aMi {
margin-top: 24px
}
}
/*--------------------------------------------------------------------
* Footer: Navigation container
--------------------------------------------------------------------*/
._2ruF4 {
width: 100%
}
@media (max-width: 959px) {
._2ruF4 {
margin-top: 32px
}
}
@media (max-width: 639px) {
._2ruF4 {
margin-top: 24px
}
}
/*--------------------------------------------------------------------
* Footer: Links list container
--------------------------------------------------------------------*/
._1isW- {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
list-style: none;
max-width: 620px;
width: 100%;
margin: 0;
padding: 0
}
@media (max-width: 959px) {
._1isW- {
max-width: 600px
}
}
@media (max-width: 400px) {
._1isW- {
-ms-flex-direction: column;
flex-direction: column
}
}
._1a8GI:not(:first-child) {
margin-left: 16px
}
@media (max-width: 400px) {
._1a8GI:not(:first-child) {
margin-left: 0;
margin-top: 16px
}
}
/*--------------------------------------------------------------------
* Footer: Social media container
--------------------------------------------------------------------*/
._5akfd {
margin-left: auto;
margin-top: 8px
}
@media (min-width: 640px) and (max-width: 959px) {
._5akfd {
white-space: nowrap
}
}
@media (max-width: 639px) {
._5akfd {
-ms-flex-item-align: end;
align-self: flex-end;
margin-bottom: 8px;
margin-left: auto;
margin-right: auto;
margin-top: 16px
}
}
/*--------------------------------------------------------------------
* Footer: Social media singular item
--------------------------------------------------------------------*/
.un_MZ {
display: inline-block
}
.un_MZ:not(:first-child) {
margin-left: 16px
}
/*--------------------------------------------------------------------
* Footer: Social media icons
--------------------------------------------------------------------*/
._3Ie-f {
display: inline-block;
height: 32px;
width: 32px;
}
/*--------------------------------------------------------------------
* Footer: Stats container
--------------------------------------------------------------------*/
._1E0b_ {
color: gray;
margin-left: auto;
padding-left: 32px;
white-space: nowrap
}
@media (max-width: 959px) {
._1E0b_ {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
margin-left: 0;
padding-left: 0
}
}
@media (max-width: 639px) {
._1E0b_ {
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 0;
margin-top: 0
}
}
/*--------------------------------------------------------------------
* Footer: Envato logo
--------------------------------------------------------------------*/
._39Wh1 {
display: block;
height: 20px;
margin-bottom: 16px;
transform: translateY(-4px);
width: auto
}
@media (max-width: 959px) {
._39Wh1 {
margin-bottom: 0
}
}
/*--------------------------------------------------------------------
* Footer: Sublist
--------------------------------------------------------------------*/
._10fbW {
list-style: none;
margin: 0;
padding: 0
}
._10fbW:not(:first-child) {
margin-left: 16px
}
.mkT_W {
padding: 0;
display: block;
list-style: none;
margin-bottom: 16px;
white-space: nowrap;
}
.iovEC {
font-weight: 700;
height: 24px;
margin-bottom: 16px;
text-transform: uppercase;
}
/*--------------------------------------------------------------------
*
* Global Header
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Categories Menu: List
--------------------------------------------------------------------*/
._2Fj-e {
font-size: 12px;
float: left;
list-style: none;
padding: 7px 0 0;
margin: 0;
}
/*--------------------------------------------------------------------
* Categories Menu: Single Item
--------------------------------------------------------------------*/
.LHU1s {
float: left;
position: relative;
}
.LHU1s:hover > ._3GLrZ, .LHU1s:focus > ._3GLrZ {
display: block;
}
/*--------------------------------------------------------------------
* Categories Menu: Dropdown Container
--------------------------------------------------------------------*/
._3GLrZ {
display: none;
left: 0;
position: absolute;
top: 34px;
width: 210px;
}
/*--------------------------------------------------------------------
* Categories Menu: Hub Dropdown
--------------------------------------------------------------------*/
._19fnb {
box-shadow: 0 3px 10px hsl(0, 0%, 30%);
list-style: none;
padding: 0;
}
._19fnb a {
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 40%);
display: block;
padding: 8px;
text-decoration: none;
}
._19fnb a:hover,
._19fnb a:focus {
background-color: hsl(0, 0%, 90%);
text-decoration: none;
}
._19fnb a > i {
float: right;
opacity: 0.5;
}
.Fs8au {
border-top: 1px solid hsl(0, 0%, 90%);
}
.SWhEv {
border-bottom: 1px solid hsl(0, 0%, 90%);
}
/*--------------------------------------------------------------------
* Categories Menu: Links
--------------------------------------------------------------------*/
._3cJ2E,
._3cJ2E:hover {
line-height: 35px;
height: 35px;
text-decoration: none;
}
._1u5OJ {
float: left;
position: relative;
border-left: 1px solid #dedede;
margin: 6px 10px 6px 10px;
min-height: 24px;
}
._3cJ2E,
._31nSV {
border-radius: 4px 4px 0 0;
color: hsl(0, 0%, 40%);
display: block;
padding: 0 10px;
white-space: nowrap;
}
._3cJ2E:hover,
._31nSV:hover,
._3cJ2E:focus,
._31nSV:focus {
text-decoration: none;
}
._1D-nP {
padding-top: 8px;
padding-bottom: 7px;
}
.LHU1s:hover > ._3cJ2E,
.LHU1s:hover > ._31nSV,
.LHU1s:focus > ._3cJ2E,
.LHU1s:focus > ._31nSV {
background-color: hsl(0, 0%, 60%);
color: hsl(0, 0%, 100%);
}
._31nSV {
border-radius: 4px;
}
._3hzQB:after {
display: inline-block;
padding-left: 2px;
content: url("data:image/svg+xml;utf8,");
}
.LHU1s:hover ._3hzQB:after, .LHU1s:focus ._3hzQB:after {
content: url("data:image/svg+xml;utf8,");
}
/*--------------------------------------------------------------------
* Categories Menu: Label
--------------------------------------------------------------------*/
.C7iWC {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 12px;
line-height: 12px;
padding: 4px 4px 3px;
border-radius: 3px;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
background-color: #dedede;
color: hsl(0, 0%, 30%);
}
.C7iWC:hover,
.C7iWC:active,
.C7iWC:focus {
text-decoration: none;
}
._2eBCI {
display: -ms-flexbox;
display: flex;
}
._1d_UY {
display: -ms-flexbox;
display: flex;
-ms-flex: 1 auto;
flex: 1 auto;
min-width: 0;
}
._30y17 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid hsl(0, 0%, 80%);
border-radius: 8px 0 0 8px;
border-right: 0;
box-sizing: border-box;
color: #808080;
-ms-flex: 1;
flex: 1;
font-size: 14px;
min-width: 0;
outline: none;
padding: 8px 8px 6px;
}
._30y17::-webkit-input-placeholder {
color: hsl(0, 0%, 80%);
opacity: 1; /* Work around for firefox displaying the current color due to it being so light */
}
._30y17:-ms-input-placeholder {
color: hsl(0, 0%, 80%);
opacity: 1; /* Work around for firefox displaying the current color due to it being so light */
}
._30y17::placeholder {
color: hsl(0, 0%, 80%);
opacity: 1; /* Work around for firefox displaying the current color due to it being so light */
}
._3XESm {
background-color: hsl(0, 0%, 100%);
border-radius: 0 8px 8px 0;
border: 1px solid hsl(0, 0%, 80%);
border-left: none;
color: hsl(0, 0%, 60%);
-ms-flex: 0 0 30px;
flex: 0 0 30px;
font-size: 14px;
padding: 3px 0 5px;
transition: background-color 0.2s;
}
._2R_th {
display: inline;
margin: 0;
padding: 0;
}
._3eoRa ._30y17,
._3eoRa ._3XESm {
border: none;
}
._2qHCb {
text-decoration: none;
}
._3gTzf {
float: right;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Site Header: Categories Header Wrapper
--------------------------------------------------------------------*/
._3pINo {
z-index: 4;
position: relative;
}
.TO5En {
}
@media (max-width: 1023px) {
.TO5En {
display: none !important;
}
}
._1E__T {
background-color: #f5f5f5;
border-bottom: 1px solid #e1e8ed;
height: 48px;
}
._25xlk {
max-width: 1408px;
padding-left: 6px;
padding-right: 6px;
margin-left: auto;
margin-right: auto;
}
._2pyhP {
margin: 15px;
overflow: hidden;
}
._2C2Po {
border-left: thin solid hsl(0, 0%, 90%);
float: left;
width: 160px;
margin-left: 8px;
margin-top: 8px;
padding-left: 16px;
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._19LyD {
background-color: hsl(0, 0%, 100%);
display: block;
text-align: center;
color: hsl(0, 0%, 60%);
font-weight: 300;
padding: 16px 0;
font-size: 14px;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._1FR26 {
width: 80px;
height: 80px;
}
._14dwp {
display: block;
width: 80px;
text-align: center;
font-size: 11px;
margin-top: -5px;
}
@media (max-width: 831px) {
._3y-sz {
display: none;
}
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
.fUdLq {
display: -ms-flexbox;
display: flex;
}
._1fB3r {
margin-right: 18px;
text-align: center;
}
._1fB3r:last-child {
margin-right: 0;
}
@media (max-width: 831px) {
.fUdLq {
overflow-x: auto;
}
._1fB3r {
margin-bottom: 5px;
}
}
@media (min-width: 832px) {
.fUdLq {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
._1fB3r {
margin-bottom: 20px;
}
._1zlUi {
-ms-flex-pack: center;
justify-content: center;
}
._2A76d {
-ms-flex-pack: end;
justify-content: flex-end;
}
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
.j0bMQ {
-webkit-font-smoothing: antialiased;
}
@media (max-width: 639px) {
.j0bMQ {
display: none;
}
}
._4zt8 {
display: -ms-flexbox;
display: flex;
}
._1pp8f {
-ms-flex: 1;
flex: 1;
display: -ms-flexbox;
display: flex;
}
._3H6a7 {
color: hsl(0, 0%, 30%);
text-decoration: none;
margin-left: 16px;
display: inline-block;
font-size: 24px;
line-height: 1.2;
}
._11UT3 {
margin-top: 8px;
}
._25zj5 {
width: 80px;
height: 80px;
}
._36DsC {
}
._1p591 {
margin-left: 16px;
font-size: 14px;
}
.NuZX8 {
margin-top: 8px;
margin-left: 16px;
}
._1Qy-P {
-ms-flex: 1;
flex: 1;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._2VLO8 {
padding-bottom: 32px;
background: whitesmoke;
padding: 32px 0;
margin: 0 auto;
}
._1lEL9 {
margin-bottom: 16px;
}
._1tnqM {
text-align: center;
margin-top: 5px;
}
._3YpG4 {
text-align: center;
margin-top: 5px;
}
.vMxJj {
text-align: center;
}
.CC2vX {
display: block;
font-weight: bold;
color: hsl(0, 0%, 40%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
._2UjxQ {
height: 133px;
margin-bottom: 24px;
}
.gdPNO {
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._3hAZK {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
}
._1f4Lx {
width: calc(1 / 3 * 100% - 0.666666666666667 * 32px * 2);
}
@media (max-width: 639px) {
._28uwx {
display: none;
}
}
/*--------------------------------------------------------------------
*
* New Items Section
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._3XGnp {
padding-bottom: 32px;
position: relative;
}
._3q17a {
position: absolute;
height: 100%;
width: 100%;
top: 0;
display: block;
cursor: progress;
opacity: 0.4;
background-color: hsl(0, 0%, 100%);
}
._2RLoA {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.5;
margin-bottom: 16px;
font-weight: 700;
font-size: 28px;
color: #454545;
padding: 0;
}
._3ea0z {
margin-bottom: 16px;
}
._3bUU1 {
margin-bottom: 16px;
}
._2NhUI {
background-color: hsl(0, 0%, 90%);
border-radius: 7px;
color: hsl(0, 0%, 40%);
display: block;
border: none;
font-weight: normal;
height: 34px;
line-height: 34px;
padding: 0 10px;
position: relative;
text-align: left;
width: 100%;
}
._3Y1jv {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
display: inline-block;
margin: 0;
border: none;
border-radius: 4px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: center;
text-decoration: none;
cursor: pointer;
background-color: transparent;
color: #0084b4;
margin: 0 0 5px 0;
padding: 5px
}
._3Y1jv:hover, ._3Y1jv:focus {
text-decoration: underline;
}
.ga94t {
background: hsl(0, 0%, 90%);
border-radius: 4px;
text-decoration: none;
}
@media (max-width: 831px) {
._3ea0z {
display: none;
}
._3bUU1 {
margin-bottom: 16px;
width: 100%;
}
}
@media (min-width: 640px) and (max-width: 831px) {
._3bUU1 ._2NhUI {
width: 200px;
}
}
@media (min-width: 832px) {
._3bUU1 {
display: none;
}
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._196DJ {
padding: 32px;
margin: 8px;
border-radius: 4px;
border: 1px solid hsl(0, 0%, 90%);
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
overflow: hidden;
}
._2OJS2 {
width: 100%;
height: 100%;
max-width: 250px;
display: block;
}
._22Ywn {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center
}
@media (max-width: 639px) {
._22Ywn {
max-width: 250px;
}
}
._1aFlg {
display: block;
font-weight: bold;
text-decoration: none;
color: hsl(0, 0%, 20%)
}
._1aFlg:hover, ._1aFlg:focus {
text-decoration: underline;
color: hsl(0, 0%, 50%);
}
._3oHOs {
font-size: 12px;
color: hsl(0, 0%, 40%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (max-width: 639px) {
.N_n13 {
display: none;
}
}
.lnIOb {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
}
._2BSER {
padding: 32px 8px;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
.Dp6Zx,
.TN6YB {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.Dp6Zx {
text-align: center;
}
.TN6YB {
font-weight: 400;
margin-bottom: 24px;
text-align: center;
}
@media (max-width: 831px) {
.Dp6Zx {
font-size: 28px;
}
.TN6YB {
font-size: 18px;
}
}
@media (min-width: 832px) {
.Dp6Zx {
font-size: 36px;
}
.TN6YB {
font-size: 20px;
}
}
@media(max-width: 639px) {
._1MegD {
width: 45px;
}
}
@media (min-width: 640px) {
._1MegD {
width: 80px;
font-size: 26px;
}
}
@media (min-width: 1152px) {
._1MegD {
padding: 7px;
font-size: 20px;
}
}
._1MegD:focus {
background-color: hsl(0, 0%, 100%);
}
._1MegD._2qmuw:hover:before, ._1MegD._2qmuw:focus:before {
color: hsl(346, 84%, 36%);
}
._1MegD._1HlPg:hover:before, ._1MegD._1HlPg:focus:before {
color: hsl(185, 82%, 33%);
}
._1MegD._1KoAY:hover:before, ._1MegD._1KoAY:focus:before {
color: hsl(196, 57%, 44%);
}
._1MegD.jvsCg:hover:before, ._1MegD.jvsCg:focus:before {
color: hsl(76, 60%, 47%);
}
._1MegD._3K1dO:hover:before, ._1MegD._3K1dO:focus:before {
color: hsl(43, 98%, 46%);
}
._1MegD._3bSnL:hover:before, ._1MegD._3bSnL:focus:before {
color: hsl(28, 79%, 55%);
}
._1MegD.qfSa4:hover:before, ._1MegD.qfSa4:focus:before {
color: hsl(168, 76%, 42%);
}
@media (min-width: 640px) {
._2p767 {
padding: 20px;
}
}
@media (min-width: 1152px) {
._2p767 {
padding: 10px 5px 10px 20px;
}
}
._2p767:focus {
outline: 0;
}
._2p767::-webkit-input-placeholder {
color: hsl(0, 0%, 70%);
}
._2p767:-ms-input-placeholder {
color: hsl(0, 0%, 70%);
}
._2p767::placeholder {
color: hsl(0, 0%, 70%);
}/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._1qqC9 {
display: -ms-flexbox;
display: flex;
position: relative;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
._1boPp {
left: 0;
background: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 90%);
border-bottom-color: hsl(0, 0%, 80%);
border-top: 0;
box-shadow: 0 2px 3px rgba(0, 0, 0, .09);
color: hsl(0, 0%, 60%);
max-width: 100%;
overflow: hidden;
text-align: left;
z-index: 100;
border-radius: 0 0 7px 7px;
}
._1Qe5A {
border-top: 1px solid hsl(0, 0%, 90%);
}
._3rOXi {
border-top: 1px solid hsl(0, 0%, 90%);
}
._3zE61 {
background-color: hsl(0, 0%, 95%);
}
._35PFZ {
color: #545454;
display: block;
font-size: 14px;
padding: 8px 16px;
position: relative;
}
.WAVBi {
color: hsl(0, 0%, 50%);
margin-left: 5px;
}
._2sBDI {
font-weight: bold;
}
._2p767 {
-ms-flex: 1 auto;
flex: 1 auto;
box-sizing: border-box;
border: 0;
border-radius: 7px 0 0 7px;
color: gray;
font-size: 16px;
line-height: normal;
height: 100%;
padding: 10px 5px 10px 20px
}
._2p767::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
._2p767[type=search] {
-webkit-appearance: none;
}
._1MegD {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 60%);
border-radius: 0 7px 7px 0;
padding: 5px 1%;
border: 0;
cursor: pointer
}
._1MegD:hover {
background-color: hsl(0, 0%, 95%);
}
._1qqC9 {
height: 60px;
margin-bottom: 16px;
max-width: 550px;
}
._1MegD {
font-size: 26px;
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._1Rc5W {
position: relative;
z-index: 1;
}
.ec0Tg {
font-weight: 700;
margin: 8px;
}
._24YfB {
font-size: 14px;
font-weight: lighter;
color: #666666;
cursor: pointer;
display: inline;
-ms-flex-align: center;
align-items: center;
}
._24YfB:hover, ._24YfB:focus {
color: #0084B4;
}
._3Gd9v {
padding-left: 4px;
line-height: 18px;
}
._3hv7- {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: end;
justify-content: flex-end;
font-size: 14px;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* PhotoDune Pages containers
*
--------------------------------------------------------------------*/
._3hE34 {
}
@media (max-width: 831px) {
._3hE34 {
border-top: 0
}
}
@media (max-width: 1151px) {
._3hE34 {
margin: 0 16px;
padding: 16px 0 16px 0
}
}
@media (min-width: 1152px) {
._3hE34 {
max-width: 1408px;
margin: 0 auto 8px;
padding: 16px 16px 0 16px
}
}
._1X0WU {
-ms-flex-item-align: baseline;
align-self: baseline;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
color: hsl(0, 0%, 20%);
-webkit-font-smoothing: subpixel-antialiased;
font-weight: 400;
font-size: 14px;
color: hsl(0, 0%, 30%);
margin-right: 8px !important;
line-height: 32px
}
@media (max-width: 831px) {
._1X0WU {
display: none
}
}
._3HYTF {
font-weight: 700;
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._1cD1- {
margin-right: 8px !important;
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
}
._2OYn5 {
margin: 0 4px;
}
._3LDhC {
color: hsl(0, 0%, 20%);
font-weight: 300;
}
._2OqIW {
display: inline;
}
._3o55k {
font-weight: 300;
}
.GlMar:after {
background-color: hsl(196, 89%, 26%)
}/*--------------------------------------------------------------------
*
* PhotoDune Search Selected Filters
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Selected Filters - Container
--------------------------------------------------------------------*/
._1bTly {
display: -ms-flexbox;
display: flex;
-ms-flex-align: baseline;
align-items: baseline
}
@media (max-width: 831px) {
._1bTly {
display: none
}
}
._3rUJ8 {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: baseline;
align-items: baseline;
}
._2rHkX {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: baseline;
align-items: baseline;
margin: 0 8px 0 0;
}
._2FpDo {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
/*--------------------------------------------------------------------
* Selected Filters - Clear All Link
--------------------------------------------------------------------*/
.GlMar {
display: block;
color: hsl(0, 0%, 20%);
font-size: 12px;
margin: 0 8px;
text-decoration: underline
}
.GlMar:hover, .GlMar:focus {
color: hsl(196, 89%, 26%)
}
._2oteb {
margin-left: auto;
margin-bottom: 0;
display: block;
min-width: 100px;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._1UmTF {
width: 80px;
text-align: center;
display: inline-block
}
@media (min-width: 832px) {
._1UmTF {
border-left: 1px solid hsl(0, 0%, 90%)
}
}
._2d9NF {
}
@media (max-width: 831px) {
._2d9NF {
display: none
}
}
._1WPp9:hover, ._1WPp9:focus {
background: hsl(0, 0%, 95%);
}
._2s17p:focus {
outline: auto 5px -webkit-focus-ring-color;
}/*--------------------------------------------------------------------
*
* PhotoDune Sort By Dropdown Styles
*
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Utilities
*
--------------------------------------------------------------------*/
@define-mixin visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*--------------------------------------------------------------------
* Sort By - Hidden Label
--------------------------------------------------------------------*/
._35LYV {
font-size: 14px;
margin-right: 4px;
}
/*--------------------------------------------------------------------
* Sort By - Wrapper
--------------------------------------------------------------------*/
._1mVg7 {
position: relative;
display: inline-block;
-ms-flex-item-align: baseline;
align-self: baseline;
}
@media (max-width: 959px) {
._1mVg7 {
-ms-flex-item-align: end;
align-self: flex-end;
}
}
@media (max-width: 831px) {
._1mVg7 {
-ms-flex-item-align: start;
align-self: flex-start;
}
}
/*--------------------------------------------------------------------
* Sort By - Select
--------------------------------------------------------------------*/
._2s17p {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 14px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
background-color: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 90%);
padding: 8px 16px;
border-radius: 2px;
cursor: pointer;
}
._2s17p::-ms-expand {
display: none;
}
@media (min-width: 832px) {
._2s17p {
padding-right: 40px ;
}
}
@media (max-width: 831px) {
._2s17p {
border: 1px solid hsl(0, 0%, 90%);
border-radius: 2px;
background-color: hsl(0, 0%, 100%);
font-size: 14px;
padding-left: 6px;
padding-right: 20px;
}
}
/*--------------------------------------------------------------------
* Sort By - Iconography
--------------------------------------------------------------------*/
._2D6hF {
position: absolute;
top: calc(50% - 3px);
right: 16px;
pointer-events: none
}
@media (max-width: 831px) {
._2D6hF {
right: 2px;
}
}
/*--------------------------------------------------------------------
* Sort By - Segmented
--------------------------------------------------------------------*/
._2VZec {
display: none;
border: 2px solid hsl(0, 0%, 90%);
border-radius: 4px;
overflow: hidden;
}
._1WPp9 {
background: hsl(0, 0%, 100%);
color: hsl(0, 0%, 20%);
padding: 8px 16px;
cursor: pointer;
border: none;
border-right: 2px solid hsl(0, 0%, 90%);
transition: background .2s, color .2s;
font-weight: 700;
font-size: 12px
}
._1WPp9:last-of-type {
border-right: none;
}
._3RfX3 {
background: hsl(0, 0%, 20%);
color: hsl(0, 0%, 100%)
}
._3RfX3:hover, ._3RfX3:focus {
background: hsl(0, 0%, 20%);
}
.ogwO6 {
margin-left: 4px;
}
.fwICw {
transform: rotate(180deg);
}
.KJMn5 polygon {
fill: hsl(0, 0%, 70%);
}
@media (min-width: 960px) {
._3zS3G {
display: none;
}
._2VZec {
display: -ms-flexbox;
display: flex;
}
}
.Fl5SH:after {
background-color: hsl(196, 90%, 36%);
}
.Fl5SH:hover {
color: hsl(196, 90%, 36%);
}
.Fl5SH:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
.Fl5SH:focus {
outline: none;
}/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._2oKeI {
margin-bottom: 16px;
}
._2uwx2 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 18px;
font-weight: 400;
margin-bottom: 8px;
}
.LSdVQ {
font-weight: 700;
}
._32Zj_ {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.QX6-O {
width: 50%;
}
.Fl5SH {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
color: hsl(196, 90%, 31%);
font-size: 14px;
font-weight: 400;
text-decoration: none;
-moz-osx-font-smoothing: grayscale
}
.Fl5SH:hover {
text-decoration: none;
}
.Fl5SH:hover:after, .Fl5SH:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
.e8Y3F {
width: 100%;
text-align: center;
}
._20Lxi {
padding: 10px;
max-width: 100%;
width: 300px;
}
.JlgbC {
font-size: 24px;
margin-bottom: 8px;
font-weight: 700;
}
.Cxy4C {
color: hsl(0, 0%, 60%);
font-size: 18px;
font-weight: 400;
padding-bottom: 32px;
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._1f_1u {
border-top: 1px solid #e1e8ed;
background: hsl(0, 0%, 95%);
}
._1Vs6v {
max-width: 1104px;
margin: 20px auto;
}
._1Cz6s {
max-width: 1408px;
margin: 0 auto;
padding: 8px 16px 32px;
}
._1ZcIi {
padding: 16px 16px 8px;
}
._1q3Hf {
background: hsl(0, 0%, 98%);
}
._1VNXM {
max-width: 1408px;
margin: 0 auto 8px;
padding: 16px 16px 0 16px;
}
._1Kc_O {
box-shadow: inset 0px 10px 20px -10px hsl(0, 0%, 95%);
}
.Az38N {
background-color: hsl(0, 0%, 95%);
border: 1px solid hsl(0, 0%, 90%);
text-align: center;
border-radius: 4px;
min-width: 112px;
padding-bottom: 24px;
}
._3Csu7 {
border-bottom: 1px solid hsl(0, 0%, 90%);
padding: 16px;
}
.DvgXK {
font-size: 18px;
}
._1DTLH {
font-size: 16px;
}
._39X1z {
text-decoration: none;
color: hsl(0, 0%, 10%);
}
._2SeNb {
width: 80px;
height: 80px;
display: inline-block;
}
._3ss5- {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
}
._1479N {
margin: 16px;
}
._30SCR:after {
background-color: hsl(0, 0%, 30%)
}
._30SCR:hover {
color: hsl(0, 0%, 30%)
}
._30SCR:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%
}
._30SCR:focus {
outline: none
}/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._30SCR {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
color: hsl(0, 0%, 30%)
}
._30SCR:hover {
text-decoration: none
}
._30SCR:hover:after, ._30SCR:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0)
}
._29_QV:after {
background-color: hsl(196, 89%, 26%)
}
._29_QV:hover {
color: hsl(196, 89%, 26%)
}
._29_QV:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%
}
._29_QV:focus {
outline: none
}/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._29_QV {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none
}
._29_QV:hover {
text-decoration: none
}
._29_QV:hover:after, ._29_QV:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0)
}
._2N-OY:hover {
color: hsl(0, 0%, 70%);
}
._2O-ZB:active {
background-color: #538320;
box-shadow: inset 1px 1px 3px 0px hsla(0, 0%, 0%, .2);
}
._2O-ZB:hover {
background-color: #6dad29;
}/*--------------------------------------------------------------------
*
* PhotoDune Search Bar and Autosuggest styles
* Design Reference: https://envato.invisionapp.com/d/main/#/console/11200263/237137376/preview
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
* Autosuggest - Search Input
--------------------------------------------------------------------*/
.Vd9D9 {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 16px;
color: hsl(0, 0%, 10%);
border: 2px solid hsl(0, 0%, 90%);
background-color: hsl(0, 0%, 100%);
-webkit-appearance: none;
padding: 16px 24px;
-ms-flex: 1;
flex: 1;
height: 56px;
}
.Vd9D9:focus {
outline: none;
border-color: hsl(0, 0%, 80%);
}
.Vd9D9[type='search'] {
-webkit-appearance: none;
}
/*--------------------------------------------------------------------
* Autosuggest - Search Button
--------------------------------------------------------------------*/
._2O-ZB {
border: none;
border-radius: 2px;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 14px;
transition: all 0.2s ease-in;
box-shadow: 1px 1px 3px -1px hsl(0, 0%, 90%);
box-shadow: 1px 1px 3px 0 hsla(0, 0%, 0%, .07);
background-color: #6ba229;
color: hsl(0, 0%, 100%);
padding: 16px 0;
margin-left: -2px;
width: 160px;
}
._2O-ZB:focus {
outline: auto 5px -webkit-focus-ring-color;
}
._1i8Qj.ptGbo ._2O-ZB {
width: 56px;
}
._1i8Qj.ptGbo ._2MKh_ {
display: none;
}
._1i8Qj.ptGbo ._1PQSW {
display: inline;
display: initial;
}
@media (max-width: 639px) {
._2O-ZB {
width: 56px;
}
._2MKh_ {
display: none;
}
}
@media (min-width: 640px) {
._1PQSW {
display: none;
}
}
/*--------------------------------------------------------------------
* Autosuggest - Search Input and Button Wrapper
--------------------------------------------------------------------*/
._1i8Qj {
position: relative;
display: -ms-flexbox;
display: flex;
}
/*--------------------------------------------------------------------
* Autosuggest - Suggestions Dropdown Wrapper
--------------------------------------------------------------------*/
._1vS3a {
left: 0;
border: 2px solid hsl(0, 0%, 80%);
background-color: hsl(0, 0%, 100%);
box-shadow: 2px 2px 5px 0 hsla(0, 0%, 0%, .07);
z-index: 1;
}
/*--------------------------------------------------------------------
* Autosuggest - Suggestion Link
--------------------------------------------------------------------*/
._1rDLb {
display: block;
padding: 8px 24px;
color: hsl(0, 0%, 10%);
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
text-decoration: none;
}
/*--------------------------------------------------------------------
* Autosuggest - Suggestions List
--------------------------------------------------------------------*/
._1nasb {
padding: 16px 0;
}
._3t1Rz {
background-color: hsl(0, 0%, 95%);
}
/*--------------------------------------------------------------------
* Autosuggest - Close Button in the Search Input
--------------------------------------------------------------------*/
._2N-OY {
border: none;
border-radius: 2px;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 14px;
transition: all 0.2s ease-in;
box-shadow: 1px 1px 3px -1px hsl(0, 0%, 90%);
box-shadow: none;
position: absolute;
top: 18px;
right: 62px;
color: hsl(0, 0%, 80%);
background-color: hsl(0, 0%, 100%)
}
._2N-OY:focus {
outline: auto 5px -webkit-focus-ring-color;
}
@media (min-width: 640px) {
._1i8Qj:not(.ptGbo) ._2N-OY {
right: 184px;
}
}
/*--------------------------------------------------------------------
* Autosuggest - Expand Icon in Suggestion List on Mobile
--------------------------------------------------------------------*/
._3vjAO {
display: none;
float: right;
color: hsl(0, 0%, 70%)
}
@media (max-width: 831px) {
._3vjAO {
display: block;
}
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._1IXrL {
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
}
._1IXrL ._1_7fE:last-child ._3a18Y {
color: hsl(0, 0%, 70%);
cursor: default;
}
._1W1G8 {
margin: 0 4px;
color: hsl(87, 58%, 40%);
}
._1VsJR {
color: hsl(0, 0%, 20%);
font-weight: 500;
text-decoration: none;
}
._1_7fE {
display: inline;
font-size: 12px;
padding: 4px
}
._1_7fE:first-child {
padding-left: 0;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._3R7y5 {
max-width: 1408px;
margin: 0 auto;
padding: 16px;
padding-top: 4px;
}
._3Gfft {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 28px;
line-height: 1.25;
color: hsl(0, 0%, 20%);
}
._2DpPf {
font-size: 16px;
color: hsl(0, 0%, 50%);
font-weight: 400;
margin-top: 8px;
}
@media (min-width: 832px) {
._3Gfft {
font-size: 32px;
}
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
.N6Vyl {
background: hsl(0, 0%, 100%);
box-shadow: 0 0 8px hsl(0, 0%, 90%);
position: relative;
z-index: 2;
}
._3-Dmi {
max-width: 1408px;
margin: 0 auto
}
@media (min-width: 1024px) {
._3-Dmi {
display: -ms-flexbox;
display: flex;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-pack: center;
justify-content: center;
}
}
._1wd3a {
background: hsl(0, 0%, 100%);
-ms-flex-positive: 1;
flex-grow: 1;
}
._1_9dc {
max-width: 1408px;
margin: 0 auto;
padding: 16px;
padding-bottom: 4px;
}
._1d4CX {
max-width: 1408px;
margin: 0 auto;
padding: 24px 16px 16px
}
@media (min-width: 1024px) {
._1d4CX {
min-width: 360px;
margin: 0;
}
}
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._13CBG {
font-size: 24px;
font-weight: 400;
margin-bottom: 24px;
margin-top: 24px;
}
._2jJsB {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: baseline;
align-items: baseline;
}
._1h2uw {
display: -ms-flexbox;
display: flex;
}
.M-7pU {
display: -ms-flexbox;
display: flex;
}
.A-oQV {
margin-left: 32px;
margin-top: 16px;
min-width: 250px;
-ms-flex: 0 0;
flex: 0 0;
}
@media (max-width: 639px) {
._13CBG {
margin-bottom: 8px;
margin-top: 8px;
}
._2jJsB {
margin-top: 8px;
margin-bottom: 8px;
}
._1h2uw {
margin-bottom: 8px;
}
}
@media (max-width: 959px) {
._1R_K5 {
display: block;
}
.A-oQV {
display: none;
}
}
._2s-pR:last-child {
margin-right: 0
}._2s-pR {
margin-right: 24px;
font-size: 12px;
color: hsl(0, 0%, 80%);
margin-bottom: 4px
}._2s-pR:before {
content: '+';
margin-right: 4px
}
._3CGW1 {
text-decoration: none;
font-weight: 700;
color: hsl(196, 90%, 36%)
}
._3CGW1:hover, ._3CGW1:focus {
color: hsl(196, 90%, 51%)
}
._13N3e {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
._3mfS3 {
text-align: center;
width: 100%;
padding: 44px;
height: 200px;
}
._1kIkz {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: none;
background-color: transparent;
cursor: pointer;
border-bottom: 2px solid hsl(0, 0%, 90%);
padding: 16px;
text-decoration: none;
color: hsl(0, 0%, 70%);
font-weight: 700;
font-size: 14px;
margin-bottom: -2px;
}
._1kIkz:hover, ._1kIkz:focus {
color: hsl(0, 0%, 50%);
}
._235XR {
color: hsl(0, 0%, 40%);
border-bottom-color: hsl(0, 0%, 40%);
}
.Ie1gr {
display: -ms-flexbox;
display: flex;
white-space: nowrap;
border-bottom: 2px solid hsl(0, 0%, 90%);
}
.UCDRw .UPT4X {
border-bottom: none;
}/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._1yrg2 {
margin-bottom: 24px;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.UPT4X {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex: 1;
flex: 1;
border-bottom: 2px solid hsl(0, 0%, 90%);
padding-left: 16px;
}
._3k5CZ {
font-size: 12px;
margin: 8px 0;
}
.UCDRw {
}
.UCDRw ._1yrg2 {
margin-bottom: 16px;
}
._9rX5A {
}
._9rX5A ._3k5CZ {
width: 100%;
}
.Lyen2 {
display: -ms-flexbox;
display: flex;
}
._2i_lX {
margin-left: 32px;
margin-top: 16px;
min-width: 250px;
-ms-flex: 0 0;
flex: 0 0;
}
@media (max-width: 639px) {
._1yrg2 {
-ms-flex-direction: column;
flex-direction: column;
}
.UPT4X {
border-bottom: none;
}
}
@media (min-width: 640px) {
.UCDRw {
}
.UCDRw ._1yrg2 {
-ms-flex-align: baseline;
align-items: baseline;
}
}
@media (max-width: 959px) {
._2i_lX {
display: none;
}
}
._3jAFs {
max-width: 1408px;
margin: 0 auto;
padding: 16px;
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/* dirty, temporary fix for pagination, should be removed after introducing design system */
.pagination__list > li {
margin-right: 5px;
}
.pagination__list .pagination__previous {
margin-right: 3px;
}
/* backward compatibility with monolith banners injected html code */
@media(max-width: 639px) {
.is-hidden-phone {
display: none !important;
}
}
@media(min-width: 832px) {
.is-hidden-tablet-and-above {
display: none !important;
}
}
.banner-root {
max-height: 50px;
transition: max-height 0.3s ease-in-out;
}
.banner-slide-up {
max-height: 0;
overflow-y: hidden;
}
.search-facet-boolean__label {
position: relative;
-ms-flex: 1 1 1%;
flex: 1 1 1%;
overflow: hidden;
white-space: nowrap;
}
.search-facet-boolean > input {
position: relative;
top: 1px;
margin-right: 10px;
}
.search-facet-boolean > span {
font-size: 14px;
display: inline-block;
}
.placeit-promo__button-wrapper {
margin-top: 16px;
@media (min-width: 960px) {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
text-align: center;
}
}
.placeit-promo__button {
background-color: #43267f;
padding: 6px 26px;
color: hsl(0, 0%, 100%);
border-radius: 20px;
cursor: pointer;
text-decoration: none;
display: inline-block;
text-align: center;
&:hover, &:focus {
background-color: lighten(#43267f, 20%);
}
}
.placeit-promo__button {
background: #43267f;
}
.placeit-promo__text {
color: #c8c0dd;
}
.placeit-promo__heading {
margin-top: 10px;
color: hsl(0, 0%, 100%);
}
.elements-promo .elements-heading {
color: hsl(0, 0%, 100%);
}
.elements-promo__button-wrapper {
margin-top: 16px;
@media (min-width: 960px) {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
text-align: center;
}
}
.elements-promo__button {
background-color: #f93d66;
padding: 6px 16px;
color: hsl(0, 0%, 100%);
font-size: 10px;
border-radius: 6px;
cursor: pointer;
text-decoration: none;
font-weight: 600;
display: inline-block;
letter-spacing: 3px;
text-align: center;
text-transform: uppercase;
&:hover, &:focus {
background-color: darken(#f93d66, 20%);
}
}
.elements-promo__logo {
display: inline-block;
text-indent: -9999px;
height: 26px;
width: 170px;
background: url(//public-assets.envato-static.com/assets/header/EnvatoElements-logo-93296989e268af4b90133a4016d66fa11eeab8340c5c90d9a172427209e8d492.svg);
background-size: 170px 26px;
@media (min-width: 960px) {
-ms-flex-item-align: baseline;
align-self: baseline;
}
@media (min-width: 640px) {
margin-bottom: 16px;
display: block;
}
}
.elements-promo__courses-illustration {
display: inline-block;
text-indent: -9999px;
height: 26px;
width: 297px;
background: url(//public-assets.envato-static.com/assets/cross-promos/elements-courses-f9b6f7f393c43b1702cee65b0773dcc8855363ae8042442aa9ade4d6dd349306.svg);
background-size: 297px 26px;
@media (min-width: 960px) {
margin-bottom: 16px;
}
@media (min-width: 640px) {
margin-bottom: 24px;
display: block;
}
}
.studio-recommendations__logo {
display: inline-block;
height: 15px;
width: 120px;
@media (max-width: 639px) {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
}
.search-field.-border-none button.search-field__button {
border: none;
}
.search-field.-border-light {
& button.search-field__button {
border-color: #dedede;
}
}
@media (min-width: 640px) {
.search-field {
}
.search-field.-size-xl {
}
.search-field.-size-xl button.search-field__button {
-ms-flex-preferred-size: 80px;
flex-basis: 80px;
font-size: 26px;
}
}
.search-field.-border-none {
& button.search-field__button {
border: none;
}
}
@media (min-width: 640px) {
.search-field {
}
.search-field.-size-l {
}
.search-field.-size-l button.search-field__button {
-ms-flex-preferred-size: 70px;
flex-basis: 70px;
font-size: 24px;
}
}
.search-field.-size-xl {
& button.search-field__button {
-ms-flex-preferred-size: 45px;
flex-basis: 45px;
font-size: 20px;
}
}
.search-field.-size-l {
& button.search-field__button {
-ms-flex-preferred-size: 45px;
flex-basis: 45px;
font-size: 20px;
}
}
.search-field.-theme-videohive {
& button.search-field__button:hover, & button.search-field__button:focus {
color: hsl(43, 98%, 46%);
}
}
.search-field.-theme-themeforest {
& button.search-field__button:hover, & button.search-field__button:focus {
color: hsl(168, 76%, 42%);
}
}
.search-field.-theme-photodune {
& button.search-field__button:hover, & button.search-field__button:focus {
color: hsl(185, 82%, 33%);
}
}
.search-field.-theme-graphicriver {
& button.search-field__button:hover, & button.search-field__button:focus {
color: hsl(196, 57%, 44%);
}
}
.search-field.-theme-codecanyon {
& button.search-field__button:hover, & button.search-field__button:focus {
color: hsl(28, 79%, 55%);
}
}
.search-field.-theme-audiojungle {
& button.search-field__button:hover, & button.search-field__button:focus {
color: hsl(76, 60%, 47%);
}
}
.search-field.-theme-3docean {
& button.search-field__button:hover, & button.search-field__button:focus {
color: hsl(346, 84%, 36%);
}
}
.search-field.-border-light {
& input.search-field__input-field {
border-color: #dedede;
}
}
.search-field.-size-m {
font-size: 14px;
height: 40px;
}
.search-field.-size-l {
font-size: 16px;
height: 50px;
}
.grid-container.-layout-videohive .sidebar-s {
margin-top: 29px;
}/* Colors */
/* Breakpoints and spacing */
/* Fonts */
._root_en8qh_3 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
cursor: pointer;
border: 1px solid;
border-radius: 2px;
-webkit-font-smoothing: antialiased;
transition: 0.1s;
text-align: center
}
._root_en8qh_3:active,
._root_en8qh_3._active_en8qh_13 {
outline: none;
}
._appearancePrimary_en8qh_18 {
background-color: hsl(87, 60%, 40%);
border-color: hsl(87, 60%, 40%);
color: hsl(0, 0%, 100%);
border-radius: 2px
}
._appearancePrimary_en8qh_18:hover, ._appearancePrimary_en8qh_18:focus {
background-color: hsl(87, 58%, 45%);
border-color: hsl(87, 58%, 45%);
}
._appearancePrimary_en8qh_18:active,
._appearancePrimary_en8qh_18._active_en8qh_13 {
background-color: hsl(88, 60%, 35%);
border-color: hsl(88, 60%, 35%);
box-shadow: inset 1px 1px 3px 0px hsl(88, 60%, 35%);
}
._appearanceSecondary_en8qh_37 {
background-color: hsl(0, 0%, 100%);
border-color: hsl(0, 0%, 90%);
color: hsl(0, 0%, 40%);
box-shadow: 1px 1px 3px -1px hsl(0, 0%, 90%)
}
._appearanceSecondary_en8qh_37:hover, ._appearanceSecondary_en8qh_37:focus {
box-shadow: 1px 1px 3px -1px hsl(0, 0%, 80%);
border-color: hsl(0, 0%, 80%);
}
._appearanceSecondary_en8qh_37:active,
._appearanceSecondary_en8qh_37._active_en8qh_13 {
box-shadow: inset 1px 1px 3px 0px hsl(0, 0%, 90%);
}
._appearanceDark_en8qh_54 {
background-color: hsl(0, 0%, 40%);
color: hsl(0, 0%, 100%)
}
._appearanceDark_en8qh_54:hover, ._appearanceDark_en8qh_54:focus {
background-color: hsl(0, 0%, 50%);
}
._appearanceDark_en8qh_54:active,
._appearanceDark_en8qh_54._active_en8qh_13 {
background-color: hsl(0, 0%, 30%);
box-shadow: inset 1px 1px 3px 0px hsl(0, 0%, 20%);
}
._appearanceLight_en8qh_69 {
background-color: hsl(0, 0%, 90%);
border-color: hsl(0, 0%, 90%);
color: hsl(0, 0%, 40%);
border-radius: 2px
}
._appearanceLight_en8qh_69:hover, ._appearanceLight_en8qh_69:focus {
border-color: hsl(0, 0%, 95%);
background-color: hsl(0, 0%, 95%);
box-shadow: 1px 1px 3px -1px hsl(0, 0%, 80%);
}
._appearanceLight_en8qh_69:active,
._appearanceLight_en8qh_69._active_en8qh_13 {
background-color: hsl(0, 0%, 85%);
border-color: hsl(0, 0%, 85%);
box-shadow: inset 1px 1px 3px 0px hsl(0, 0%, 80%);
}
._tag_en8qh_89 {
border: 1px solid hsl(0, 0%, 90%);
border-radius: 100px
}
._tag_en8qh_89._sizeSmall_en8qh_93 {
font-size: 12px;
padding: 8px 16px;
}
._tag_en8qh_89._sizeMedium_en8qh_98 {
font-size: 14px;
padding: 16px 16px;
}
._tag_en8qh_89._sizeLarge_en8qh_103 {
font-size: 18px;
padding: 24px 32px;
}
._tag_en8qh_89._appearanceSecondary_en8qh_37 {
transition: 0.2s;
box-shadow: none
}
._tag_en8qh_89._appearanceSecondary_en8qh_37:hover, ._tag_en8qh_89._appearanceSecondary_en8qh_37:focus {
border-color: hsl(196, 90%, 36%);
color: hsl(196, 90%, 36%);
}
._tag_en8qh_89._appearanceSecondary_en8qh_37:active,
._tag_en8qh_89._appearanceSecondary_en8qh_37._active_en8qh_13 {
box-shadow: none;
}
._sizeSmall_en8qh_93 {
font-size: 14px;
padding: 8px 16px;
}
._sizeMedium_en8qh_98 {
font-size: 18px;
padding: 16px 24px;
}
._sizeLarge_en8qh_103 {
font-size: 20px;
padding: 16px 32px;
}
/* Colors */
/* Breakpoints and spacing */
/* Fonts */
._invalid_qou0f_3 {
font-size: 12px;
text-align: left;
margin-bottom: 4px;
color: hsl(1, 61%, 49%);
}
/* Colors */
/* Breakpoints and spacing */
/* Fonts */
._root_y8n1j_3 {
width: 490px;
position: relative;
margin: 0 auto;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
._header_y8n1j_14 {
padding: 24px 0;
background-color: hsl(0, 0%, 15%);
color: hsl(0, 0%, 100%);
text-align: center;
border-radius: 4px 4px 0 0;
}
._section_y8n1j_22 {
background-color: hsl(0, 0%, 100%);
box-sizing: border-box;
width: 100%;
padding: 24px 0 8px;
}
._footer_y8n1j_29 {
background-color: hsl(0, 0%, 100%);
text-align: center;
font-size: 14px;
padding: 16px;
border-radius: 0 0 4px 4px;
color: hsl(0, 0%, 60%);
font-weight: 400;
padding-bottom: 32px;
}
._link_y8n1j_40 {
color: hsl(196, 90%, 36%);
}
/* Colors */
/* Breakpoints and spacing */
/* Fonts */
._greeting_scd5p_3 {
}
._header_scd5p_6 {
margin-bottom: 16px;
}
._description_scd5p_10 {
color: hsl(0, 0%, 60%);
font-size: 14px;
line-height: 1.5;
margin-bottom: 16px;
}
._field_scd5p_17 {
margin-bottom: 8px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
._label_scd5p_23 {
font-size: 14px;
font-weight: bold;
text-align: left;
margin-bottom: 4px;
}
._input_scd5p_30 {
box-sizing: border-box;
width: 100%;
font-size: 14px;
outline: 0;
border-radius: 4px;
background: white;
border: 1px solid #bababa;
padding: 4px 8px;
margin: 0 0 4px 0;
}
._link_scd5p_42 {
color: hsl(196, 90%, 36%);
}
._invalidInput_scd5p_46 {
color: hsl(1, 61%, 49%);
border: hsl(1, 61%, 49%) 1px solid;
}
/* Colors */
/* Breakpoints and spacing */
/* Fonts */
._greeting_scd5p_3 {
}
._header_scd5p_6 {
margin-bottom: 16px;
}
._description_scd5p_10 {
color: hsl(0, 0%, 60%);
font-size: 14px;
line-height: 1.5;
margin-bottom: 16px;
}
._field_scd5p_17 {
margin-bottom: 8px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
._label_scd5p_23 {
font-size: 14px;
font-weight: bold;
text-align: left;
margin-bottom: 4px;
}
._input_scd5p_30 {
box-sizing: border-box;
width: 100%;
font-size: 14px;
outline: 0;
border-radius: 4px;
background: white;
border: 1px solid #bababa;
padding: 4px 8px;
margin: 0 0 4px 0;
}
._link_scd5p_42 {
color: hsl(196, 90%, 36%);
}
._invalidInput_scd5p_46 {
color: hsl(1, 61%, 49%);
border: hsl(1, 61%, 49%) 1px solid;
}
/* Colors */
/* Breakpoints and spacing */
/* Fonts */
._root_1hqvo_3 {
width: 100%;
text-align: center;
}
._section_1hqvo_8 {
padding: 0 60px;
}
._pagination_1hqvo_12 {
padding: 0 32px;
margin-bottom: 16px;
}
._paginationLink_1hqvo_17 {
margin: 0;
padding: 0;
border: none;
font: inherit;
color: inherit;
background: none;
cursor: pointer;
width: 50%;
border-bottom: 1px solid hsl(0, 0%, 100%);
}
._paginationText_1hqvo_29 {
display: inline-block;
padding: 4px 0;
margin: 0 4px;
color: hsl(0, 0%, 50%);
text-align: left;
}
._active_1hqvo_37 {
border-bottom: 1px solid hsl(196, 90%, 36%);
}
._button_1hqvo_41 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
border: none;
text-align: center;
box-shadow: 0 2px 0 hsl(87, 60%, 40%);
font-size: 16px;
padding: 8px 24px;
box-sizing: border-box;
background-color: hsl(87, 58%, 45%);
color: hsl(0, 0%, 100%);
border-radius: 4px;
cursor: pointer;
text-decoration: none;
line-height: 1.5;
width: 100%;
}
/* Colors */
/* Breakpoints and spacing */
/* Fonts */
._root_buqei_3 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
background-color: hsl(0, 0%, 95%);
padding: 16px;
font-size: 14px;
color: hsl(0, 0%, 40%);
-webkit-font-smoothing: antialiased;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
}
._typeError_buqei_15 {
border-left: 6px solid hsl(1, 61%, 49%);
}
._typeWarning_buqei_19 {
border-left: 6px solid hsl(23, 85%, 63%);
}
._typeSuccess_buqei_23 {
border-left: 6px solid hsl(87, 58%, 45%);
}
._icon_buqei_27 {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
margin-right: 8px;
}
._main_buqei_34 {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
._dismiss_buqei_39 {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
}
/* Colors */
/* Breakpoints and spacing */
/* Fonts */
*,
:after,
:before {
box-sizing: inherit;
}
._root_1n0id_11 {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
font-size: 16px;
line-height: 1.5;
color: hsl(0, 0%, 30%);
box-sizing: border-box;
display: -ms-flexbox;
display: flex;
line-height: 32px;
margin-right: 24px;
-ms-flex-pack: justify;
justify-content: space-between;
}
._checkboxWrapper_1n0id_23 {
line-height: 1.5;
white-space: inherit;
display: inline-block;
}
._checkbox_1n0id_23 {
display: none
}
._checkbox_1n0id_23 + * {
position: relative;
color: hsl(0, 0%, 20%);
font-size: 14px;
cursor: pointer;
}
._checkbox_1n0id_23 + :before {
content: ' ';
display: inline-block;
position: absolute;
top: 3px;
margin: 0 12px 0 0;
width: 16px;
height: 16px;
border: 1px solid hsl(0, 0%, 80%);
background-color: transparent;
border-radius: 2px;
}
._checkbox_1n0id_23:checked + :before {
border-color: hsl(196, 89%, 26%);
}
._checkbox_1n0id_23:checked + :after {
width: 8px;
height: 5px;
position: absolute;
top: 7px;
left: 4px;
content: ' ';
border-left: 2px solid hsl(196, 89%, 26%);
border-bottom: 2px solid hsl(196, 89%, 26%);
transform: rotate(-45deg);
}
._checkboxText_1n0id_69 {
color: hsl(0, 0%, 20%);
display: inline-block;
padding-left: 30px;
}
._checkboxColor_1n0id_75 + :before {
border: none;
background-color: currentColor;
}
._checkboxColor_1n0id_75:checked + :after {
border-left: 2px solid hsl(0, 0%, 100%);
border-bottom: 2px solid hsl(0, 0%, 100%);
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Core.css
* Import index file for core styles.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Animations
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Spin
*
--------------------------------------------------------------------*/
@keyframes spin {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
/*--------------------------------------------------------------------
*
* Fade in and out
*
--------------------------------------------------------------------*/
@keyframes fade-in-out {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Modals
* Includes no inner content styling
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/* imports */
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Mixins
* Contains common mixins used in various places across the app. All
* mixins should be placed within this file.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* button-3d-dropshadow
* Adds a dropshadow to an element ands 'presses' on pseudo :active state trigger
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* font-smoothing
* Applies browser-specific font-smoothing
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* typography-link
* Applies default typography link style
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* glyphs-base
* Applies default styles for glyphs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* visually-hidden
* Visually hide while still being accessible to screen readers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* f-defaults
* Default styles for form inputs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* clearfix
* Applies clearfix to an element
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* table-cell-fill-smallest-width
* Hack to shrink table cell to its smallest possible width
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* scrollbar
* Controls scrollbar appearance in all major browsers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Shame colors
* This is a temporary directory containing color variables that need to
* be updated to align with new color naming restrictions. They have
* currently just been ported directly over form market.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
.fds-c-modal {
position: relative;
margin: 20px auto
/*--------------------------------------------------------------------
*
* Width
*
--------------------------------------------------------------------*/
}
.fds-c-modal.-width-xs {
max-width: 360px;
}
.fds-c-modal.-width-s {
max-width: 490px;
}
.fds-c-modal.-width-m, .fds-c-modal {
max-width: 600px;
}
.fds-c-modal.-width-l {
max-width: 970px;
}
/*--------------------------------------------------------------------
*
* Section
*
--------------------------------------------------------------------*/
.fds-c-modal__section, .fds-c-modal__header, .fds-c-modal__footer {
overflow: auto;
margin-top: -1px /* Offset double borders */
/*--------------------------------------------------------------------
*
* Background
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Padding
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Border radius
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Height
*
--------------------------------------------------------------------*/
}
.fds-c-modal__section.-background-light, .fds-c-modal__section, .fds-c-modal__header.-background-light, .fds-c-modal__header, .fds-c-modal__footer.-background-light, .fds-c-modal__footer {
background-color: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 87%);
}
.fds-c-modal__section.-background-mid, .fds-c-modal__header.-background-mid, .fds-c-modal__footer.-background-mid {
background-color: hsl(0, 0%, 96%);
border: 1px solid hsl(0, 0%, 87%);
}
.fds-c-modal__section.-background-dark, .fds-c-modal__header.-background-dark, .fds-c-modal__footer.-background-dark {
background-color: hsl(0, 0%, 15%);
border: none;
color: hsl(0, 0%, 100%);
}
.fds-c-modal__section.-padding-s, .fds-c-modal__section, .fds-c-modal__header.-padding-s, .fds-c-modal__header, .fds-c-modal__footer.-padding-s, .fds-c-modal__footer {
padding: 16px;
}
.fds-c-modal__section.-padding-m, .fds-c-modal__header.-padding-m, .fds-c-modal__footer.-padding-m {
padding-top: 24px;
padding-bottom: 24px;
}
.fds-c-modal__section.-padding-l, .fds-c-modal__header.-padding-l, .fds-c-modal__footer.-padding-l {
padding-top: 32px;
padding-bottom: 32px;
}
.fds-c-modal__section.-padding-none, .fds-c-modal__header.-padding-none, .fds-c-modal__footer.-padding-none {
padding: 0;
}
.fds-c-modal__section.-radius-none, .fds-c-modal__header.-radius-none, .fds-c-modal__footer.-radius-none {
border-radius: 0;
}
.fds-c-modal__section.-radius-all, .fds-c-modal__header.-radius-all, .fds-c-modal__footer.-radius-all {
border-radius: 4px;
}
.fds-c-modal__section.-radius-top, .fds-c-modal__header.-radius-top, .fds-c-modal__footer.-radius-top {
border-radius: 4px 4px 0 0;
}
.fds-c-modal__section.-radius-bottom, .fds-c-modal__header.-radius-bottom, .fds-c-modal__footer.-radius-bottom {
border-radius: 0 0 4px 4px;
}
.fds-c-modal__section.-height-scroll, .fds-c-modal__header.-height-scroll, .fds-c-modal__footer.-height-scroll {
overflow-y: auto;
overflow-x: hidden;
max-height: 250px;
}
.fds-c-modal__section.-height-scroll::-webkit-scrollbar, .fds-c-modal__header.-height-scroll::-webkit-scrollbar, .fds-c-modal__footer.-height-scroll::-webkit-scrollbar {
-webkit-appearance: none;
}
.fds-c-modal__section.-height-scroll::-webkit-scrollbar:vertical, .fds-c-modal__header.-height-scroll::-webkit-scrollbar:vertical, .fds-c-modal__footer.-height-scroll::-webkit-scrollbar:vertical {
width: 11px;
}
.fds-c-modal__section.-height-scroll::-webkit-scrollbar:horizontal, .fds-c-modal__header.-height-scroll::-webkit-scrollbar:horizontal, .fds-c-modal__footer.-height-scroll::-webkit-scrollbar:horizontal {
height: 11px;
}
.fds-c-modal__section.-height-scroll::-webkit-scrollbar-thumb, .fds-c-modal__header.-height-scroll::-webkit-scrollbar-thumb, .fds-c-modal__footer.-height-scroll::-webkit-scrollbar-thumb {
border: 2px solid hsl(0, 0%, 96%);
background-color: rgba(0, 0, 0, .4);
}
.fds-c-modal__section.-height-scroll::-webkit-scrollbar-thumb:hover, .fds-c-modal__header.-height-scroll::-webkit-scrollbar-thumb:hover, .fds-c-modal__footer.-height-scroll::-webkit-scrollbar-thumb:hover, .fds-c-modal__section.-height-scroll::-webkit-scrollbar-thumb:focus, .fds-c-modal__header.-height-scroll::-webkit-scrollbar-thumb:focus, .fds-c-modal__footer.-height-scroll::-webkit-scrollbar-thumb:focus {
background-color: rgba(0, 0, 0, .6);
}
.fds-c-modal__section.-height-scroll::-webkit-scrollbar-track, .fds-c-modal__header.-height-scroll::-webkit-scrollbar-track, .fds-c-modal__footer.-height-scroll::-webkit-scrollbar-track {
background-color: hsl(0, 0%, 96%);
}
@media screen and (min-height: 700px) {
.fds-c-modal__section.-height-scroll, .fds-c-modal__header.-height-scroll, .fds-c-modal__footer.-height-scroll {
max-height: 400px;
}
}
/*--------------------------------------------------------------------
*
* Header
*
--------------------------------------------------------------------*/
.fds-c-modal__header {
padding-top: 0.8em;
padding-bottom: 0.8em;
border-radius: 4px 4px 0 0;
}
/*--------------------------------------------------------------------
*
* Footer
*
--------------------------------------------------------------------*/
.fds-c-modal__footer {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
border-radius: 0 0 4px 4px;
}
.fds-c-modal__footer-cta {
-ms-flex: 1 100px;
flex: 1 100px
/*--------------------------------------------------------------------
*
* Alignment
*
--------------------------------------------------------------------*/
}
.fds-c-modal__footer-cta.-align-left, .fds-c-modal__footer-cta {
text-align: left;
}
.fds-c-modal__footer-cta.-align-right {
text-align: right;
}
.fds-c-modal__footer-cta.-align-center {
text-align: center;
}
/*--------------------------------------------------------------------
*
* Close Button
*
--------------------------------------------------------------------*/
.fds-c-modal__close {
position: absolute;
top: 0;
right: 0;
padding: 8px 16px;
cursor: pointer;
}
/*--------------------------------------------------------------------
*
* No Flexbox Support (<= IE9)
*
--------------------------------------------------------------------*/
.no-flexbox {
}
.no-flexbox .fds-c-modal__footer {
display: block;
}
.no-flexbox .fds-c-modal__footer-cta {
float: left;
}
.no-flexbox .fds-c-modal__footer-cta.-align-right {
float: right;
}
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Buttons
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/* imports */
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Mixins
* Contains common mixins used in various places across the app. All
* mixins should be placed within this file.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* button-3d-dropshadow
* Adds a dropshadow to an element ands 'presses' on pseudo :active state trigger
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* font-smoothing
* Applies browser-specific font-smoothing
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* typography-link
* Applies default typography link style
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* glyphs-base
* Applies default styles for glyphs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* visually-hidden
* Visually hide while still being accessible to screen readers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* f-defaults
* Default styles for form inputs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* clearfix
* Applies clearfix to an element
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* table-cell-fill-smallest-width
* Hack to shrink table cell to its smallest possible width
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* scrollbar
* Controls scrollbar appearance in all major browsers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Shame colors
* This is a temporary directory containing color variables that need to
* be updated to align with new color naming restrictions. They have
* currently just been ported directly over form market.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
.fds-c-button, .fds-c-button--3d, .fds-c-button--outline {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
display: inline-block;
margin: 0;
border: none;
border-radius: 4px;
font-family: -apple-system,BlinkMacSystemFont,“Segoe UI”,Roboto,Oxygen-Sans,Ubuntu,Cantarell,“Helvetica Neue”,sans-serif;
text-align: center;
text-decoration: none;
cursor: pointer
/*--------------------------------------------------------------------
*
* Color
*
--------------------------------------------------------------------*/
/* TODO: See if can be deprecated */
/*--------------------------------------------------------------------
*
* Width
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Sizes
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Border
*
--------------------------------------------------------------------*/
}
.fds-c-button:hover, .fds-c-button:focus, .fds-c-button--3d:hover, .fds-c-button--3d:focus, .fds-c-button--outline:hover, .fds-c-button--outline:focus {
text-decoration: none;
outline: none
}
.fds-c-button[disabled]
.fds-c-button[data-state=disabled], .fds-c-button.is-disabled, .fds-c-button--3d[disabled]
.fds-c-button--3d[data-state=disabled], .fds-c-button--3d.is-disabled, .fds-c-button--outline[disabled]
.fds-c-button--outline[data-state=disabled], .fds-c-button--outline.is-disabled {
background-color: hsl(0, 0%, 73%) !important;
color: hsl(0, 0%, 87%) !important;
box-shadow: none !important;
cursor: not-allowed !important
}
.fds-c-button.-color-default, .fds-c-button, .fds-c-button--3d.-color-default, .fds-c-button--3d, .fds-c-button--outline.-color-default, .fds-c-button--outline {
background-color: hsl(0, 0%, 50%);
color: hsl(0, 0%, 100%)
}
.fds-c-button.-color-default:hover, .fds-c-button.-color-default:focus, .fds-c-button.-color-default:active, .fds-c-button:hover, .fds-c-button:focus, .fds-c-button:active, .fds-c-button--3d.-color-default:hover, .fds-c-button--3d.-color-default:focus, .fds-c-button--3d.-color-default:active, .fds-c-button--3d:hover, .fds-c-button--3d:focus, .fds-c-button--3d:active, .fds-c-button--outline.-color-default:hover, .fds-c-button--outline.-color-default:focus, .fds-c-button--outline.-color-default:active, .fds-c-button--outline:hover, .fds-c-button--outline:focus, .fds-c-button--outline:active {
background-color: hsl(0, 0%, 47%)
}
.fds-c-button.-color-primary, .fds-c-button--3d.-color-primary, .fds-c-button--outline.-color-primary {
background-color: #82b440
}
.fds-c-button.-color-primary:hover, .fds-c-button.-color-primary:focus, .fds-c-button.-color-primary:active, .fds-c-button--3d.-color-primary:hover, .fds-c-button--3d.-color-primary:focus, .fds-c-button--3d.-color-primary:active, .fds-c-button--outline.-color-primary:hover, .fds-c-button--outline.-color-primary:focus, .fds-c-button--outline.-color-primary:active {
background-color: #7aa93c
}
.fds-c-button.-color-secondary, .fds-c-button--3d.-color-secondary, .fds-c-button--outline.-color-secondary {
background-color: #0084b4
}
.fds-c-button.-color-secondary:hover, .fds-c-button.-color-secondary:focus, .fds-c-button.-color-secondary:active, .fds-c-button--3d.-color-secondary:hover, .fds-c-button--3d.-color-secondary:focus, .fds-c-button--3d.-color-secondary:active, .fds-c-button--outline.-color-secondary:hover, .fds-c-button--outline.-color-secondary:focus, .fds-c-button--outline.-color-secondary:active {
background-color: #00719b
}
.fds-c-button.-color-warning, .fds-c-button--3d.-color-warning, .fds-c-button--outline.-color-warning {
background-color: #f39c12
}
.fds-c-button.-color-warning:hover, .fds-c-button.-color-warning:focus, .fds-c-button.-color-warning:active, .fds-c-button--3d.-color-warning:hover, .fds-c-button--3d.-color-warning:focus, .fds-c-button--3d.-color-warning:active, .fds-c-button--outline.-color-warning:hover, .fds-c-button--outline.-color-warning:focus, .fds-c-button--outline.-color-warning:active {
background-color: #ea940c
}
.fds-c-button.-color-destructive, .fds-c-button--3d.-color-destructive, .fds-c-button--outline.-color-destructive {
background-color: #df2c2c
}
.fds-c-button.-color-destructive:hover, .fds-c-button.-color-destructive:focus, .fds-c-button.-color-destructive:active, .fds-c-button--3d.-color-destructive:hover, .fds-c-button--3d.-color-destructive:focus, .fds-c-button--3d.-color-destructive:active, .fds-c-button--outline.-color-destructive:hover, .fds-c-button--outline.-color-destructive:focus, .fds-c-button--outline.-color-destructive:active {
background-color: #ce2424
}
.fds-c-button.-color-light, .fds-c-button--3d.-color-light, .fds-c-button--outline.-color-light {
background-color: hsl(0, 0%, 90%);
border: 1px solid hsl(0, 0%, 87%);
color: hsl(0, 0%, 40%)
}
.fds-c-button.-color-light:hover, .fds-c-button.-color-light:focus, .fds-c-button--3d.-color-light:hover, .fds-c-button--3d.-color-light:focus, .fds-c-button--outline.-color-light:hover, .fds-c-button--outline.-color-light:focus {
background-color: hsl(0, 0%, 88%)
}
.fds-c-button.-color-dark, .fds-c-button--3d.-color-dark, .fds-c-button--outline.-color-dark {
background-color: hsl(0, 0%, 20%)
}
.fds-c-button.-color-dark:hover, .fds-c-button.-color-dark:focus, .fds-c-button.-color-dark:active, .fds-c-button--3d.-color-dark:hover, .fds-c-button--3d.-color-dark:focus, .fds-c-button--3d.-color-dark:active, .fds-c-button--outline.-color-dark:hover, .fds-c-button--outline.-color-dark:focus, .fds-c-button--outline.-color-dark:active {
background-color: hsl(0, 0%, 15%)
}
.fds-c-button.-color-muted, .fds-c-button--3d.-color-muted, .fds-c-button--outline.-color-muted {
background-color: hsl(0, 0%, 67%)
}
.fds-c-button.-color-transparent, .fds-c-button--3d.-color-transparent, .fds-c-button--outline.-color-transparent {
background-color: transparent;
color: hsl(0, 0%, 27%)
}
.fds-c-button.-color-transparent:hover, .fds-c-button.-color-transparent:focus, .fds-c-button.-color-transparent:active, .fds-c-button.-color-transparent.is-active, .fds-c-button--3d.-color-transparent:hover, .fds-c-button--3d.-color-transparent:focus, .fds-c-button--3d.-color-transparent:active, .fds-c-button--3d.-color-transparent.is-active, .fds-c-button--outline.-color-transparent:hover, .fds-c-button--outline.-color-transparent:focus, .fds-c-button--outline.-color-transparent:active, .fds-c-button--outline.-color-transparent.is-active {
background-color: transparent;
color: #0084b4
}
.fds-c-button.-width-full, .fds-c-button--3d.-width-full, .fds-c-button--outline.-width-full {
box-sizing: border-box;
width: 100%
}
.fds-c-button.-size-xs, .fds-c-button--3d.-size-xs, .fds-c-button--outline.-size-xs {
font-size: 12px;
padding: 7px 10px;
line-height: 1
}
.fds-c-button.-size-s, .fds-c-button, .fds-c-button--3d.-size-s, .fds-c-button--3d, .fds-c-button--outline.-size-s, .fds-c-button--outline {
font-size: 14px;
padding: 5px 20px;
line-height: 1.5
}
.fds-c-button.-size-m, .fds-c-button--3d.-size-m, .fds-c-button--outline.-size-m {
font-size: 16px;
padding: 10px 20px
}
.fds-c-button.-size-l, .fds-c-button--3d.-size-l, .fds-c-button--outline.-size-l {
font-size: 18px;
padding: 14px 20px
}
.fds-c-button.-size-xl, .fds-c-button--3d.-size-xl, .fds-c-button--outline.-size-xl {
font-size: 24px;
padding: 24px 36px
}
.fds-c-button.-border-none, .fds-c-button--3d.-border-none, .fds-c-button--outline.-border-none {
border: none
}
/*--------------------------------------------------------------------
*
* 3D
*
--------------------------------------------------------------------*/
.fds-c-button--3d {
box-shadow: 0 2px 0 rgb(87, 87, 87);
position: relative
}
.fds-c-button--3d:active {
top: 1px;
box-shadow: 0 (2px - 1px) 0 rgb(87, 87, 87)
}
.fds-c-button--3d.-color-primary {
box-shadow: 0 2px 0 rgb(111, 153, 54);
position: relative
}
.fds-c-button--3d.-color-primary:active {
top: 1px;
box-shadow: 0 (2px - 1px) 0 rgb(111, 153, 54)
}
.fds-c-button--3d.-color-warning {
box-shadow: 0 2px 0 rgb(199, 126, 10);
position: relative
}
.fds-c-button--3d.-color-warning:active {
top: 1px;
box-shadow: 0 (2px - 1px) 0 rgb(199, 126, 10)
}
.fds-c-button--3d.-color-destructive {
box-shadow: 0 2px 0 rgb(175, 31, 31);
position: relative
}
.fds-c-button--3d.-color-destructive:active {
top: 1px;
box-shadow: 0 (2px - 1px) 0 rgb(175, 31, 31)
}
.fds-c-button--3d.-color-secondary {
box-shadow: 0 2px 0 rgb(0, 112, 153);
position: relative
}
.fds-c-button--3d.-color-secondary:active {
top: 1px;
box-shadow: 0 (2px - 1px) 0 rgb(0, 112, 153)
}
.fds-c-button--3d.-color-light {
box-shadow: 0 2px 0 rgb(158, 158, 158);
position: relative;
border: none
}
.fds-c-button--3d.-color-light:active {
top: 1px;
box-shadow: 0 (2px - 1px) 0 rgb(158, 158, 158)
}
/*--------------------------------------------------------------------
*
* Outlined
*
--------------------------------------------------------------------*/
.fds-c-button--outline {
border: 1px solid hsl(0, 0%, 73%);
color: hsl(0, 0%, 50%);
padding: 4px 20px
}
.fds-c-button--outline, .fds-c-button--outline.-color-primary, .fds-c-button--outline.-color-warning, .fds-c-button--outline.-color-destructive, .fds-c-button--outline.-color-secondary, .fds-c-button--outline.-color-light {
background-color: transparent
}
.fds-c-button--outline:hover, .fds-c-button--outline:focus, .fds-c-button--outline:active, .fds-c-button--outline.-color-primary:hover, .fds-c-button--outline.-color-primary:focus, .fds-c-button--outline.-color-primary:active, .fds-c-button--outline.-color-warning:hover, .fds-c-button--outline.-color-warning:focus, .fds-c-button--outline.-color-warning:active, .fds-c-button--outline.-color-destructive:hover, .fds-c-button--outline.-color-destructive:focus, .fds-c-button--outline.-color-destructive:active, .fds-c-button--outline.-color-secondary:hover, .fds-c-button--outline.-color-secondary:focus, .fds-c-button--outline.-color-secondary:active, .fds-c-button--outline.-color-light:hover, .fds-c-button--outline.-color-light:focus, .fds-c-button--outline.-color-light:active {
color: hsl(0, 0%, 100%);
border-color: hsl(0, 0%, 50%);
background-color: hsl(0, 0%, 50%)
}
.fds-c-button--outline.-color-primary {
border-color: #82b440;
color: #7aa93c
}
.fds-c-button--outline.-color-primary:hover, .fds-c-button--outline.-color-primary:focus, .fds-c-button--outline.-color-primary:active {
background-color: #82b440;
border-color: #82b440
}
.fds-c-button--outline.-color-warning {
border-color: #f39c12;
color: #f39c12
}
.fds-c-button--outline.-color-warning:hover, .fds-c-button--outline.-color-warning:focus, .fds-c-button--outline.-color-warning:active {
background-color: #f39c12;
border-color: #f39c12
}
.fds-c-button--outline.-color-destructive {
border-color: #df2c2c;
color: #df2c2c
}
.fds-c-button--outline.-color-destructive:hover, .fds-c-button--outline.-color-destructive:focus, .fds-c-button--outline.-color-destructive:active {
background-color: #df2c2c;
border-color: #df2c2c
}
.fds-c-button--outline.-color-secondary {
border-color: #0084b4;
color: #0084b4
}
.fds-c-button--outline.-color-secondary:hover, .fds-c-button--outline.-color-secondary:focus, .fds-c-button--outline.-color-secondary:active {
background-color: #0084b4;
border-color: #0084b4
}
.fds-c-button--outline.-color-light {
border-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 100%)
}
.fds-c-button--outline.-color-light:hover, .fds-c-button--outline.-color-light:focus, .fds-c-button--outline.-color-light:active {
background-color: hsl(0, 0%, 100%);
border-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 50%)
}
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Inputs
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/* imports */
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Mixins
* Contains common mixins used in various places across the app. All
* mixins should be placed within this file.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* button-3d-dropshadow
* Adds a dropshadow to an element ands 'presses' on pseudo :active state trigger
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* font-smoothing
* Applies browser-specific font-smoothing
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* typography-link
* Applies default typography link style
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* glyphs-base
* Applies default styles for glyphs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* visually-hidden
* Visually hide while still being accessible to screen readers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* f-defaults
* Default styles for form inputs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* clearfix
* Applies clearfix to an element
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* table-cell-fill-smallest-width
* Hack to shrink table cell to its smallest possible width
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* scrollbar
* Controls scrollbar appearance in all major browsers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Shame colors
* This is a temporary directory containing color variables that need to
* be updated to align with new color naming restrictions. They have
* currently just been ported directly over form market.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
.fds-c-form-input {
font-size: 13px;
font-weight: normal;
outline: 0;
height: 30px;
line-height: 1;
border-radius: 4px;
color: hsl(0, 0%, 50%);
background: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 73%);
padding: 5px 8px
/*--------------------------------------------------------------------
*
* Font
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Size
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Width
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Validation
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Validation: valid
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Validation: invalid
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Validation: warning
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Validation: pending
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Cross-browser fixes
*
--------------------------------------------------------------------*/
}
.fds-c-form-input.is-invalid, .fds-c-form-input.is-error {
color: #df2c2c;
border: currentColor 1px solid
}
.fds-c-form-input[disabled] {
background: hsl(0, 0%, 93%);
cursor: not-allowed
}
.fds-c-form-input.is-read-only {
cursor: text;
border-style: dashed
}
.fds-c-form-input:focus, .fds-c-form-input.is-focussed {
transition: box-shadow 0.30s ease-in-out;
box-shadow: 0 0 5px #9ecaed;
border-color: #9ecaed
}
.fds-c-form-input.-font-monospace {
font-family: 'Source Code Pro',Consolas,'Andale Mono WT','Andale Mono','Lucida Console','Lucida Sans Typewriter','DejaVu Sans Mono','Bitstream Vera Sans Mono','Liberation Mono','Nimbus Mono L',Monaco,'Courier New',Courier,monospace
}
.fds-c-form-input.-size-m {
height: 40px;
font-size: 20px
}
.fds-c-form-input.-width-full {
width: 100%
}
.fds-c-form-input[data-icon="true"] {
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: right 5px center
}
.fds-c-form-input[data-status="valid"], .fds-c-form-input.is-valid {}
.fds-c-form-input[data-status="valid"][data-icon="true"], .fds-c-form-input.is-valid[data-icon="true"] {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%22-223%2025%20512%20512%22%20enable-background%3D%22new%20-223%2025%20512%20512%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.st0%7Bfill%3A%2382B541%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M-16.2%20458.8c-2%201.6-4.3%202.6-6.8%202.6-2.6%200-4.8-1.1-6.8-2.6l-161.6-161.4c-3.6-3.6-3.6-10%200-13.7l66.5-66.5c3.6-3.6%2010-3.6%2013.7%200l88.1%2088.6%20202-202.5c3.6-3.6%2010-3.6%2013.7%200l66.5%2066.5c3.6%203.6%203.6%2010%200%2013.7.2%200-275.3%20275.3-275.3%20275.3z%22%2F%3E%3C%2Fsvg%3E')
}
.fds-c-form-input[data-status="invalid"], .fds-c-form-input[data-status="error"], .fds-c-form-input.is-error, .fds-c-form-input.is-invalid {
color: #df2c2c;
border: currentColor 1px solid
}
.fds-c-form-input[data-status="invalid"]:focus, .fds-c-form-input[data-status="invalid"].is-focussed, .fds-c-form-input[data-status="error"]:focus, .fds-c-form-input[data-status="error"].is-focussed, .fds-c-form-input.is-error:focus, .fds-c-form-input.is-error.is-focussed, .fds-c-form-input.is-invalid:focus, .fds-c-form-input.is-invalid.is-focussed {
box-shadow: 0 0 5px currentColor
}
.fds-c-form-input[data-status="invalid"][data-icon="true"], .fds-c-form-input[data-status="error"][data-icon="true"], .fds-c-form-input.is-error[data-icon="true"], .fds-c-form-input.is-invalid[data-icon="true"] {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%22-223%2025%20512%20512%22%20enable-background%3D%22new%20-223%2025%20512%20512%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.st0%7Bfill%3A%23DF2C2C%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M215.8%20405.8c4.8%204.8%207.2%2010.3%207.2%2016.4%200%206.1-2.4%2011.7-7.2%2016.4l-24.9%2025.4c-4.8%204.8-10.3%207.2-16.8%207.2s-12-2.4-16.5-7.2l-124.5-124.9-125.2%20124.8c-4.8%204.8-10.3%207.2-16.4%207.2-6.2%200-11.7-2.4-16.4-7.2l-24.8-24.7c-4.8-4.8-7.2-10.3-7.2-16.8%200-6.3%202.3-12%207.2-16.7l125.7-126.1-125.6-123.6c-4.8-4.8-7.2-10.3-7.2-16.7s2.3-12%207.2-16.7l24.8-24.8c4.7-4.8%2010.3-7.1%2016.8-7.1s12%202.3%2016.5%207.2l124.4%20124.8%20124.7-124.7c4.8-4.8%2010.3-7.2%2016.7-7.2s12%202.3%2016.7%207.2l24.8%2024.8c4.8%204.8%207.2%2010.3%207.2%2016.8s-2.4%2012-7.2%2016.5l-125.6%20126.1%20125.6%20123.6z%22%2F%3E%3C%2Fsvg%3E')
}
.fds-c-form-input[data-status="warning"], .fds-c-form-input.is-warning {
color: #efa506;
border: currentColor 1px solid
}
.fds-c-form-input[data-status="warning"]:focus, .fds-c-form-input[data-status="warning"].is-focussed, .fds-c-form-input.is-warning:focus, .fds-c-form-input.is-warning.is-focussed {
box-shadow: 0 0 5px currentColor
}
.fds-c-form-input[data-status="warning"][data-icon="true"], .fds-c-form-input.is-warning[data-icon="true"] {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%22-223%2025%20512%20512%22%20enable-background%3D%22new%20-223%2025%20512%20512%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.st0%7Bfill%3A%23EFA506%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M-16.4%20109.7c-1.6-16.3%207.4-28.7%2022.6-28.7h55.2c15.2%200%2024.2%2012.4%2022.6%2028.8l-24.3%20211.6c-1.7%2015.2-11.8%2024.7-25.9%2024.7s-24.2-9.6-25.9-24.7l-24.3-211.7zm50.1%20273.7c28.1%200%2048.9%2020.8%2048.9%2047.9v1.1c0%2027-20.8%2047.9-48.9%2047.9s-48.9-20.8-48.9-47.9v-1.1c0-27.1%2020.8-47.9%2048.9-47.9z%22%2F%3E%3C%2Fsvg%3E')
}
.fds-c-form-input[data-status="pending"], .fds-c-form-input.is-pending {}
.fds-c-form-input[data-status="pending"][data-icon="true"], .fds-c-form-input.is-pending[data-icon="true"] {
background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22loading%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%233a383a%22%3E%0A%20%20%3Cpath%20opacity%3D%22.1%22%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(0%2016%2016)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20begin%3D%220%22%2F%3E%0A%20%20%3C%2Fpath%3E%0A%20%20%3Cpath%20opacity%3D%22.1%22%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(45%2016%2016)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20begin%3D%220.125s%22%2F%3E%0A%20%20%3C%2Fpath%3E%0A%20%20%3Cpath%20opacity%3D%22.1%22%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(90%2016%2016)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20begin%3D%220.25s%22%2F%3E%0A%20%20%3C%2Fpath%3E%0A%20%20%3Cpath%20opacity%3D%22.1%22%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(135%2016%2016)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20begin%3D%220.375s%22%2F%3E%0A%20%20%3C%2Fpath%3E%0A%20%20%3Cpath%20opacity%3D%22.1%22%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(180%2016%2016)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20begin%3D%220.5s%22%2F%3E%0A%20%20%3C%2Fpath%3E%0A%20%20%3Cpath%20opacity%3D%22.1%22%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(225%2016%2016)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20begin%3D%220.675s%22%2F%3E%0A%20%20%3C%2Fpath%3E%0A%20%20%3Cpath%20opacity%3D%22.1%22%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(270%2016%2016)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20begin%3D%220.75s%22%2F%3E%0A%20%20%3C%2Fpath%3E%0A%20%20%3Cpath%20opacity%3D%22.1%22%20d%3D%22M14%200%20H18%20V8%20H14%20z%22%20transform%3D%22rotate(315%2016%2016)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22opacity%22%20from%3D%221%22%20to%3D%22.1%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20begin%3D%220.875s%22%2F%3E%0A%20%20%3C%2Fpath%3E%0A%3C%2Fsvg%3E')
}
.fds-c-form-input::-ms-clear, .fds-c-form-input::-ms-reveal {
width: 0;
height: 0
}
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Radio
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/* imports */
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Mixins
* Contains common mixins used in various places across the app. All
* mixins should be placed within this file.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* button-3d-dropshadow
* Adds a dropshadow to an element ands 'presses' on pseudo :active state trigger
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* font-smoothing
* Applies browser-specific font-smoothing
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* typography-link
* Applies default typography link style
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* glyphs-base
* Applies default styles for glyphs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* visually-hidden
* Visually hide while still being accessible to screen readers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* f-defaults
* Default styles for form inputs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* clearfix
* Applies clearfix to an element
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* table-cell-fill-smallest-width
* Hack to shrink table cell to its smallest possible width
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* scrollbar
* Controls scrollbar appearance in all major browsers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Shame colors
* This is a temporary directory containing color variables that need to
* be updated to align with new color naming restrictions. They have
* currently just been ported directly over form market.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
.fds-c-form-radio {
font-size: 13px;
}
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Forms
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/* imports */
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Mixins
* Contains common mixins used in various places across the app. All
* mixins should be placed within this file.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* button-3d-dropshadow
* Adds a dropshadow to an element ands 'presses' on pseudo :active state trigger
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* font-smoothing
* Applies browser-specific font-smoothing
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* typography-link
* Applies default typography link style
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* glyphs-base
* Applies default styles for glyphs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* visually-hidden
* Visually hide while still being accessible to screen readers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* f-defaults
* Default styles for form inputs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* clearfix
* Applies clearfix to an element
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* table-cell-fill-smallest-width
* Hack to shrink table cell to its smallest possible width
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* scrollbar
* Controls scrollbar appearance in all major browsers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Shame colors
* This is a temporary directory containing color variables that need to
* be updated to align with new color naming restrictions. They have
* currently just been ported directly over form market.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
.fds-c-form {
-ms-flex-align: baseline;
align-items: baseline;
font-size: 13px;
}
/*--------------------------------------------------------------------
*
* Layout
*
--------------------------------------------------------------------*/
.fds-c-form {
}
.fds-c-form, .fds-c-form.-layout-vertical {
}
.fds-c-form .fds-c-form__label, .fds-c-form.-layout-vertical .fds-c-form__label {
-ms-flex-order: 1;
order: 1;
-ms-flex: 1 100%;
flex: 1 100%;
margin-bottom: 2px;
}
.fds-c-form .fds-c-form__group, .fds-c-form.-layout-vertical .fds-c-form__group {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
width: 100%;
position: relative;
margin-bottom: 8px;
}
.fds-c-form .fds-c-form__input, .fds-c-form.-layout-vertical .fds-c-form__input {
-ms-flex: 1 100%;
flex: 1 100%;
-ms-flex-order: 2;
order: 2;
margin-bottom: 5px;
}
.fds-c-form .fds-c-form__response, .fds-c-form.-layout-vertical .fds-c-form__response {
-ms-flex: 1 100%;
flex: 1 100%;
-ms-flex-order: 3;
order: 3;
margin-bottom: 5px;
}
.fds-c-form .fds-c-form__response:empty, .fds-c-form.-layout-vertical .fds-c-form__response:empty {
display: none !important;
}
.fds-c-form.-layout-vertical-inline {
.fds-c-form__label {
-ms-flex-order: 1;
order: 1;
-ms-flex: 0 auto;
flex: 0 auto;
margin: 0 10px 2px 0;
}
}
.fds-c-form.-layout-vertical-inline .fds-c-form__hint {
-ms-flex-order: 2;
order: 2;
-ms-flex: auto;
flex: auto;
}
.fds-c-form.-layout-vertical-inline .fds-c-form__input {
-ms-flex-order: 3;
order: 3;
}
.fds-c-form.-layout-vertical-inline .fds-c-form__response {
-ms-flex-order: 4;
order: 4;
}
.fds-c-form.-layout-horizontal {
}
@media (min-width: 1025px) {
.fds-c-form.-layout-horizontal {
position: relative;
}
.fds-c-form.-layout-horizontal .fds-c-form__group {
padding-left: 200px;
}
.fds-c-form.-layout-horizontal .fds-c-form__group .fds-c-form__label {
position: absolute;
left: 0;
width: 190px;
}
}
/*--------------------------------------------------------------------
*
* UX Rules
*
--------------------------------------------------------------------*/
.fds-c-form {
}
.fds-c-form.-layout-vertical, .fds-c-form.-layout-horizontal {
}
.fds-c-form.-layout-vertical .fds-c-form__response:not(:empty) + .fds-c-form__hint:not(:empty), .fds-c-form.-layout-horizontal .fds-c-form__response:not(:empty) + .fds-c-form__hint:not(:empty) {
display: none;
}
.fds-c-form__base-errors {
width: 100%;
color: #df2c2c;
margin-bottom: 16px;
margin-top: 16px
}
.fds-c-form__base-errors:empty {
display: none !important;
}
.fds-c-form__base-errors a {
color: currentColor;
text-decoration: underline;
}
.fds-c-form__base-errors a:hover, .fds-c-form__base-errors a:focus {
text-decoration: none;
}
.fds-c-form__base-errors li {
list-style-type: disc;
margin-left: 20px;
}
.fds-c-form__base-errors li:only-child {
list-style-type: none;
margin-left: 0;
}
.fds-c-form__label {
font-weight: bold
}
.fds-c-form__label label {
font-family: -apple-system,BlinkMacSystemFont,“Segoe UI”,Roboto,Oxygen-Sans,Ubuntu,Cantarell,“Helvetica Neue”,sans-serif;
}
.fds-c-form__label label.is-required {
}
.fds-c-form__label label.is-required:after {
content: " *";
color: #df2c2c;
}
.fds-c-form__label abbr {
border-bottom: none;
color: #df2c2c;
}
.fds-c-form__response {
color: #df2c2c
}
.fds-c-form__response a {
color: currentColor;
}
.fds-c-form__response a:hover, .fds-c-form__response a:focus {
text-decoration: none;
}
/*--------------------------------------------------------------------
*
* Validation states
*
--------------------------------------------------------------------*/
.fds-c-form {
}
.fds-c-form.is-valid, .fds-c-form[data-status="valid"] {
color: #82b541;
}
.fds-c-form.is-warning, .fds-c-form[data-status="warning"] {
color: #efa506;
}
.fds-c-form.is-pending, .fds-c-form[data-status="pending"] {
color: hsl(0, 0%, 60%);
}
.fds-c-form .fds-c-form__hint {
-ms-flex-order: 4;
order: 4;
-ms-flex: 1 100%;
flex: 1 100%;
margin-bottom: 5px;
color: hsl(0, 0%, 47%);
}
.fds-c-form .fds-c-form__hint a {
color: #0084b4;
}
.fds-c-form .fds-c-form__hint a:hover, .fds-c-form .fds-c-form__hint a:focus {
color: #00719b;
}
/*--------------------------------------------------------------------
*
* No Flexbox Support (<= IE9)
*
--------------------------------------------------------------------*/
.no-flexbox {
}
.no-flexbox .fds-c-form__group, .no-flexbox .fds-c-form__label, .no-flexbox .fds-c-form__input, .no-flexbox .fds-c-form__hint, .no-flexbox .fds-c-form__response {
display: block;
width: 100%;
}
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Selects
* Please do not make any changes without consulting #design-system1
*
--------------------------------------------------------------------*/
/* imports */
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Mixins
* Contains common mixins used in various places across the app. All
* mixins should be placed within this file.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* button-3d-dropshadow
* Adds a dropshadow to an element ands 'presses' on pseudo :active state trigger
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* font-smoothing
* Applies browser-specific font-smoothing
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* typography-link
* Applies default typography link style
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* glyphs-base
* Applies default styles for glyphs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* visually-hidden
* Visually hide while still being accessible to screen readers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* f-defaults
* Default styles for form inputs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* clearfix
* Applies clearfix to an element
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* table-cell-fill-smallest-width
* Hack to shrink table cell to its smallest possible width
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* scrollbar
* Controls scrollbar appearance in all major browsers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Shame colors
* This is a temporary directory containing color variables that need to
* be updated to align with new color naming restrictions. They have
* currently just been ported directly over form market.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
.fds-c-form-select {
font-size: 13px;
font-weight: normal;
outline: 0;
height: 30px;
padding: 5px 8px;
border-radius: 4px;
background: hsl(0, 0%, 100%);
color: hsl(0, 0%, 20%);
border: 1px solid hsl(0, 0%, 73%)
/*--------------------------------------------------------------------
*
* Type
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Size
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Width
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Validation: invalid
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Validation: warning
*
--------------------------------------------------------------------*/
}
.fds-c-form-select.is-invalid, .fds-c-form-select.is-error {
color: #df2c2c;
border: currentColor 1px solid
}
.fds-c-form-select[disabled] {
background: hsl(0, 0%, 93%);
cursor: not-allowed
}
.fds-c-form-select.is-read-only {
cursor: text;
border-style: dashed
}
.fds-c-form-select:focus, .fds-c-form-select.is-focussed {
transition: box-shadow 0.30s ease-in-out;
box-shadow: 0 0 5px #9ecaed;
border-color: #9ecaed
}
.fds-c-form-select.-type-multi {
height: 100px
}
.fds-c-form-select.-size-l {
height: 50px;
font-size: 25px
}
.fds-c-form-select.-width-full {
width: 100%
}
.fds-c-form-select[data-status="invalid"], .fds-c-form-select[data-status="error"], .fds-c-form-select.is-error, .fds-c-form-select.is-invalid {
color: #df2c2c;
border: currentColor 1px solid
}
.fds-c-form-select[data-status="invalid"]:focus, .fds-c-form-select[data-status="invalid"].is-focussed, .fds-c-form-select[data-status="error"]:focus, .fds-c-form-select[data-status="error"].is-focussed, .fds-c-form-select.is-error:focus, .fds-c-form-select.is-error.is-focussed, .fds-c-form-select.is-invalid:focus, .fds-c-form-select.is-invalid.is-focussed {
box-shadow: 0 0 5px currentColor
}
.fds-c-form-select[data-status="warning"], .fds-c-form-select.is-warning {
color: #efa506;
border: currentColor 1px solid
}
.fds-c-form-select:focus, .fds-c-form-select.is-focussed {
box-shadow: 0 0 5px currentColor
}
/*--------------------------------------------------------------------
*
* Globally applicable helper styles only!
* These helpers are to reduce repetitive css throughout our modules
* when they are not always needed Helpers can break the MP law of
* chaining non-related classes. e.g `.box.fds-u-clearfix`
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/* imports */
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Mixins
* Contains common mixins used in various places across the app. All
* mixins should be placed within this file.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* button-3d-dropshadow
* Adds a dropshadow to an element ands 'presses' on pseudo :active state trigger
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* font-smoothing
* Applies browser-specific font-smoothing
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* typography-link
* Applies default typography link style
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* glyphs-base
* Applies default styles for glyphs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* visually-hidden
* Visually hide while still being accessible to screen readers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* f-defaults
* Default styles for form inputs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* clearfix
* Applies clearfix to an element
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* table-cell-fill-smallest-width
* Hack to shrink table cell to its smallest possible width
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* scrollbar
* Controls scrollbar appearance in all major browsers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Shame colors
* This is a temporary directory containing color variables that need to
* be updated to align with new color naming restrictions. They have
* currently just been ported directly over form market.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
.fds-u-clearfix {
}
.fds-u-clearfix:after {
content: "";
display: table;
clear: both;
}
.fds-u-clear {
clear: both;
}
.fds-u-clickable {
cursor: pointer;
}
.fds-u-no-bullet {
list-style: none
}
.fds-u-hr {
border: none;
display: block;
background-color: hsl(0, 0%, 87%);
height: 1px;
margin-top: 16px;
margin-bottom: 16px;
}
/*--------------------------------------------------------------------
*
* Flow
*
--------------------------------------------------------------------*/
.fds-u-pull-right {
float: right;
}
.fds-u-pull-left {
float: left;
}
.fds-u-pull-none {
float: none !important;
}
.fds-u-display-block {
display: block !important;
}
.fds-u-display-inlineblock {
display: inline-block !important;
}
/*--------------------------------------------------------------------
*
* Positioning
*
--------------------------------------------------------------------*/
.fds-u-position-absolute {
position: absolute;
}
.fds-u-position-relative {
position: relative;
}
.fds-u-position-fixed {
position: fixed;
}
/*--------------------------------------------------------------------
*
* Text
*
--------------------------------------------------------------------*/
.fds-u-text-align-center {
text-align: center;
}
.fds-u-text-align-left {
text-align: left;
}
.fds-u-text-align-right {
text-align: right;
}
.fds-u-word-wrap {
word-wrap: break-word;
}
.fds-u-strikethrough {
text-decoration: line-through;
}
.fds-u-text-truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*--------------------------------------------------------------------
*
* Width
*
--------------------------------------------------------------------*/
.fds-u-full-width {
width: 100%;
}
.fds-u-flexible {
max-width: 100%;
}
/*--------------------------------------------------------------------
*
* Images
*
--------------------------------------------------------------------*/
.fds-u-image-svg {
line-height: 0;
display: block;
}
/*--------------------------------------------------------------------
*
* Responsive iFrame / Video
*
--------------------------------------------------------------------*/
.fds-u-flex-video {
height: 0;
overflow: hidden;
padding-bottom: 56.2%;
position: relative
}
.fds-u-flex-video iframe, .fds-u-flex-video video {
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Spacing
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Spacing - Margins
*
--------------------------------------------------------------------*/
.fds-u-m0 {
margin: 0px !important;
}
.fds-u-mt0 {
margin-top: 0px !important;
}
.fds-u-mr0 {
margin-right: 0px !important;
}
.fds-u-mb0 {
margin-bottom: 0px !important;
}
.fds-u-ml0 {
margin-left: 0px !important;
}
.fds-u-mx0 {
margin-left: 0px !important;
margin-right: 0px !important;
}
.fds-u-my0 {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.fds-u-m1 {
margin: 8px !important;
}
.fds-u-mt1 {
margin-top: 8px !important;
}
.fds-u-mr1 {
margin-right: 8px !important;
}
.fds-u-mb1 {
margin-bottom: 8px !important;
}
.fds-u-ml1 {
margin-left: 8px !important;
}
.fds-u-mx1 {
margin-left: 8px !important;
margin-right: 8px !important;
}
.fds-u-my1 {
margin-top: 8px !important;
margin-bottom: 8px !important;
}
.fds-u-m2 {
margin: 16px !important;
}
.fds-u-mt2 {
margin-top: 16px !important;
}
.fds-u-mr2 {
margin-right: 16px !important;
}
.fds-u-mb2 {
margin-bottom: 16px !important;
}
.fds-u-ml2 {
margin-left: 16px !important;
}
.fds-u-mx2 {
margin-left: 16px !important;
margin-right: 16px !important;
}
.fds-u-my2 {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.fds-u-m3 {
margin: 24px !important;
}
.fds-u-mt3 {
margin-top: 24px !important;
}
.fds-u-mr3 {
margin-right: 24px !important;
}
.fds-u-mb3 {
margin-bottom: 24px !important;
}
.fds-u-ml3 {
margin-left: 24px !important;
}
.fds-u-mx3 {
margin-left: 24px !important;
margin-right: 24px !important;
}
.fds-u-my3 {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.fds-u-m4 {
margin: 32px !important;
}
.fds-u-mt4 {
margin-top: 32px !important;
}
.fds-u-mr4 {
margin-right: 32px !important;
}
.fds-u-mb4 {
margin-bottom: 32px !important;
}
.fds-u-ml4 {
margin-left: 32px !important;
}
.fds-u-mx4 {
margin-left: 32px !important;
margin-right: 32px !important;
}
.fds-u-my4 {
margin-top: 32px !important;
margin-bottom: 32px !important;
}
.fds-u-mxa {
margin-left: auto !important;
margin-right: auto !important;
}
.fds-u-mya {
margin-bottom: auto !important;
margin-top: auto !important;
}
/*--------------------------------------------------------------------
*
* Spacing - Padding
*
--------------------------------------------------------------------*/
.fds-u-p0 {
padding: 0px !important;
}
.fds-u-pt0 {
padding-top: 0px !important;
}
.fds-u-pr0 {
padding-right: 0px !important;
}
.fds-u-pb0 {
padding-bottom: 0px !important;
}
.fds-u-pl0 {
padding-left: 0px !important;
}
.fds-u-px0 {
padding-left: 0px !important;
padding-right: 0px !important;
}
.fds-u-py0 {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.fds-u-p1 {
padding: 8px !important;
}
.fds-u-pt1 {
padding-top: 8px !important;
}
.fds-u-pr1 {
padding-right: 8px !important;
}
.fds-u-pb1 {
padding-bottom: 8px !important;
}
.fds-u-pl1 {
padding-left: 8px !important;
}
.fds-u-px1 {
padding-left: 8px !important;
padding-right: 8px !important;
}
.fds-u-py1 {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.fds-u-p2 {
padding: 16px !important;
}
.fds-u-pt2 {
padding-top: 16px !important;
}
.fds-u-pr2 {
padding-right: 16px !important;
}
.fds-u-pb2 {
padding-bottom: 16px !important;
}
.fds-u-pl2 {
padding-left: 16px !important;
}
.fds-u-px2 {
padding-left: 16px !important;
padding-right: 16px !important;
}
.fds-u-py2 {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
.fds-u-p3 {
padding: 24px !important;
}
.fds-u-pt3 {
padding-top: 24px !important;
}
.fds-u-pr3 {
padding-right: 24px !important;
}
.fds-u-pb3 {
padding-bottom: 24px !important;
}
.fds-u-pl3 {
padding-left: 24px !important;
}
.fds-u-px3 {
padding-left: 24px !important;
padding-right: 24px !important;
}
.fds-u-py3 {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.fds-u-p4 {
padding: 32px !important;
}
.fds-u-pt4 {
padding-top: 32px !important;
}
.fds-u-pr4 {
padding-right: 32px !important;
}
.fds-u-pb4 {
padding-bottom: 32px !important;
}
.fds-u-pl4 {
padding-left: 32px !important;
}
.fds-u-px4 {
padding-left: 32px !important;
padding-right: 32px !important;
}
.fds-u-py4 {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
/*--------------------------------------------------------------------
*
* Utilities > Visibility > Responsive
* For hiding and showing elements at certain breakpoints
*
--------------------------------------------------------------------*/
/* imports */
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Show and hide ranges
*
--------------------------------------------------------------------*/
@media (min-width: 640px) {
.fds-u-hide-small-and-above {
display: none !important;
}
}
@media (min-width: 832px) {
.fds-u-hide-medium-and-above {
display: none !important;
}
}
@media (min-width: 960px) {
.fds-u-hide-large-and-above {
display: none !important;
}
}
@media (min-width: 1152px) {
.fds-u-hide-extra-large-and-above {
display: none !important;
}
}
@media (max-width: 639px) {
.fds-u-hide-small-and-below {
display: none !important;
}
}
@media (max-width: 831px) {
.fds-u-hide-medium-and-below {
display: none !important;
}
}
@media (max-width: 959px) {
.fds-u-hide-large-and-below {
display: none !important;
}
}
@media (max-width: 1151px) {
.fds-u-hide-extra-large-and-below {
display: none !important;
}
}
/*--------------------------------------------------------------------
*
* Visibility State
*
--------------------------------------------------------------------*/
.fds-u-is-visually-hidden, .js .fds-u-is-visually-hidden--js {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.fds-u-hidden, .fds-u-is-hidden, .no-js .fds-u-is-hidden--no-js, .js .fds-u-is-hidden--js {
display: none !important;
}
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Reset
* Custom reset and normalize.css
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/* imports */
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
/* Document
========================================================================== */
html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article, aside, footer, header, nav, section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption, figure, main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active, a:hover, a:focus {
outline-width: 0;
}
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b, strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b, strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code, kbd, samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio, video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button, input, optgroup, select, textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button, input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button, select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button, html [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"], [type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
* {
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
font-family: -apple-system,BlinkMacSystemFont,“Segoe UI”,Roboto,Oxygen-Sans,Ubuntu,Cantarell,“Helvetica Neue”,sans-serif;
font-size: 16px;
line-height: 1.5;
color: hsl(0, 0%, 33%);
box-sizing: border-box
}
@media (max-width: 1024px) {
html {
height: 100%;/* Fills browser height when off-canvas */
}
}
body {
}
@media (max-width: 1024px) {
body {
height: 100%;/* Fills browser height when off-canvas */
}
}
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, figure, p, pre {
margin: 0;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
iframe {
border: 0;
}
ol, ul {
list-style: none;
margin: 0;
padding: 0;
}
/*--------------------------------------------------------------------
*
* Suppress the focus outline on links that cannot be accessed via keyboard.
* This prevents an unwanted focus outline from appearing around elements that
* might still respond to pointer events.
*
--------------------------------------------------------------------*/
[tabindex="-1"]:focus {
outline: none !important;
}
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Typography - Body
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/* imports */
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Mixins
* Contains common mixins used in various places across the app. All
* mixins should be placed within this file.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* button-3d-dropshadow
* Adds a dropshadow to an element ands 'presses' on pseudo :active state trigger
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* font-smoothing
* Applies browser-specific font-smoothing
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* typography-link
* Applies default typography link style
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* glyphs-base
* Applies default styles for glyphs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* visually-hidden
* Visually hide while still being accessible to screen readers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* f-defaults
* Default styles for form inputs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* clearfix
* Applies clearfix to an element
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* table-cell-fill-smallest-width
* Hack to shrink table cell to its smallest possible width
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* scrollbar
* Controls scrollbar appearance in all major browsers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Shame colors
* This is a temporary directory containing color variables that need to
* be updated to align with new color naming restrictions. They have
* currently just been ported directly over form market.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
.fds-c-text-body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: -apple-system,BlinkMacSystemFont,“Segoe UI”,Roboto,Oxygen-Sans,Ubuntu,Cantarell,“Helvetica Neue”,sans-serif;
line-height: 1.5;
margin-bottom: 16px;
padding: 0;
a {
color: #0084b4
}
a:hover, a:focus {
color: #00719b
}
/*--------------------------------------------------------------------
*
* Size
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Color
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Style
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Weight
*
--------------------------------------------------------------------*/
}
.fds-c-text-body.-size-xl {
font-size: 20px
}
.fds-c-text-body.-size-l {
font-size: 18px
}
.fds-c-text-body.-size-m, .fds-c-text-body {
font-size: 16px
}
.fds-c-text-body.-size-s {
font-size: 14px
}
.fds-c-text-body.-size-xs {
font-size: 12px
}
.fds-c-text-body.-color-dark, .fds-c-text-body {
color: hsl(0, 0%, 40%)
}
.fds-c-text-body.-color-mid {
color: hsl(0, 0%, 60%)
}
.fds-c-text-body.-color-light {
color: hsl(0, 0%, 100%)
}
.fds-c-text-body.-color-inherit {
color: inherit
}
.fds-c-text-body.-color-danger {
color: #df2c2c
}
.fds-c-text-body.-color-success {
color: #82b541
}
.fds-c-text-body.-color-warning {
color: #efa506
}
.fds-c-text-body.-style-italic {
font-style: italic
}
.fds-c-text-body.-weight-regular, .fds-c-text-body {
font-weight: 400
}
.fds-c-text-body.-weight-bold {
font-weight: 700
}
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Typography - Heading
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/* imports */
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Mixins
* Contains common mixins used in various places across the app. All
* mixins should be placed within this file.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* button-3d-dropshadow
* Adds a dropshadow to an element ands 'presses' on pseudo :active state trigger
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* font-smoothing
* Applies browser-specific font-smoothing
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* typography-link
* Applies default typography link style
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* glyphs-base
* Applies default styles for glyphs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* visually-hidden
* Visually hide while still being accessible to screen readers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* f-defaults
* Default styles for form inputs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* clearfix
* Applies clearfix to an element
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* table-cell-fill-smallest-width
* Hack to shrink table cell to its smallest possible width
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* scrollbar
* Controls scrollbar appearance in all major browsers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Shame colors
* This is a temporary directory containing color variables that need to
* be updated to align with new color naming restrictions. They have
* currently just been ported directly over form market.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
.fds-c-text-heading {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: -apple-system,BlinkMacSystemFont,“Segoe UI”,Roboto,Oxygen-Sans,Ubuntu,Cantarell,“Helvetica Neue”,sans-serif;
font-weight: 700;
line-height: 1.2;
margin-bottom: 16px;
padding: 0; /* TODO: remove this when global typography styles are removed */
a {
color: #0084b4;
}
a:hover, a:focus {
color: #00719b;
}
/*--------------------------------------------------------------------
*
* Size
*
--------------------------------------------------------------------*/
/* TO-DO: don't use! deprecate as legacy.*/
/*--------------------------------------------------------------------
*
* Color
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Weight
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Spacing
*
--------------------------------------------------------------------*/
}
.fds-c-text-heading.-size-xxl {
font-size: 36px;
}
.fds-c-text-heading.-size-xl {
font-size: 32px;
}
.fds-c-text-heading.-size-l {
font-size: 28px;
}
.fds-c-text-heading.-size-m {
font-size: 24px;
}
.fds-c-text-heading.-size-s {
font-size: 20px;
}
.fds-c-text-heading.-size-xs {
font-size: 18px;
}
.fds-c-text-heading.-size-xxs {
font-size: 14px;
}
.fds-c-text-heading.-size-inherit {
font-size: inherit;
}
.fds-c-text-heading.-color-dark, .fds-c-text-heading {
color: hsl(0, 0%, 27%);
}
.fds-c-text-heading.-color-mid {
color: hsl(0, 0%, 33%);
}
.fds-c-text-heading.-color-light {
color: hsl(0, 0%, 100%);
}
.fds-c-text-heading.-color-inherit {
color: inherit;
}
.fds-c-text-heading.-color-highlight {
color: #82b440;
}
.fds-c-text-heading.-weight-normal {
font-weight: 400;
}
.fds-c-text-heading.-weight-light {
font-weight: 300;
}
.fds-c-text-heading.-margin-none {
margin: 0;
}
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Typography - Link
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/* imports */
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Mixins
* Contains common mixins used in various places across the app. All
* mixins should be placed within this file.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* button-3d-dropshadow
* Adds a dropshadow to an element ands 'presses' on pseudo :active state trigger
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* font-smoothing
* Applies browser-specific font-smoothing
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* typography-link
* Applies default typography link style
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* glyphs-base
* Applies default styles for glyphs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* visually-hidden
* Visually hide while still being accessible to screen readers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* f-defaults
* Default styles for form inputs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* clearfix
* Applies clearfix to an element
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* table-cell-fill-smallest-width
* Hack to shrink table cell to its smallest possible width
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* scrollbar
* Controls scrollbar appearance in all major browsers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Shame colors
* This is a temporary directory containing color variables that need to
* be updated to align with new color naming restrictions. They have
* currently just been ported directly over form market.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
.fds-c-text-link {
color: #0084b4;
text-decoration: underline /* Remove when typography global resets are cleaned */
/*--------------------------------------------------------------------
*
* Color
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Decoration
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Weight
*
--------------------------------------------------------------------*/
}
.fds-c-text-link:hover, .fds-c-text-link:focus {
color: #00719b
}
.fds-c-text-link:hover {
text-decoration: none
}
.fds-c-text-link.-color-dark {
color: hsl(0, 0%, 27%)
}
.fds-c-text-link.-color-dark:hover, .fds-c-text-link.-color-dark:focus {
color: hsl(0, 0%, 47%)
}
.fds-c-text-link.-color-light {
color: hsl(0, 0%, 100%)
}
.fds-c-text-link.-color-light:hover, .fds-c-text-link.-color-light:focus {
color: hsl(0, 0%, 96%)
}
.fds-c-text-link.-color-default {
color: #0084b4
}
.fds-c-text-link.-color-default:hover, .fds-c-text-link.-color-default:focus {
color: #00719b
}
.fds-c-text-link.-color-inherit {
color: currentColor
}
.fds-c-text-link.-decoration-reversed {
text-decoration: none
}
.fds-c-text-link.-decoration-reversed:hover, .fds-c-text-link.-decoration-reversed:focus {
text-decoration: underline
}
.fds-c-text-link.-decoration-none {
text-decoration: none
}
.fds-c-text-link.-decoration-none:hover, .fds-c-text-link.-decoration-none:focus {
text-decoration: none
}
.fds-c-text-link.-weight-bold {
font-weight: 700
}
.fds-c-text-link.-weight-normal {
font-weight: 400
}
.fds-c-text-link.-weight-light {
font-weight: 300
}
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Typography - List
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/* imports */
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Shame colors
* This is a temporary directory containing color variables that need to
* be updated to align with new color naming restrictions. They have
* currently just been ported directly over form market.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
.fds-c-text-list {
list-style: disc;
margin-left: 32px
/*--------------------------------------------------------------------
*
* Style
*
--------------------------------------------------------------------*/
}
.fds-c-text-list.-style-none {
list-style: none;
margin-left: 0
}
.fds-c-text-list.-style-decimal {
list-style: decimal
}
.fds-c-text-list.-style-alpha {
list-style: lower-alpha
}
.fds-c-text-list.-style-lower-roman {
list-style: lower-roman
}
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Typography - Currency
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/* imports */
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Mixins
* Contains common mixins used in various places across the app. All
* mixins should be placed within this file.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* button-3d-dropshadow
* Adds a dropshadow to an element ands 'presses' on pseudo :active state trigger
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* font-smoothing
* Applies browser-specific font-smoothing
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* typography-link
* Applies default typography link style
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* glyphs-base
* Applies default styles for glyphs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* visually-hidden
* Visually hide while still being accessible to screen readers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* f-defaults
* Default styles for form inputs
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* clearfix
* Applies clearfix to an element
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* table-cell-fill-smallest-width
* Hack to shrink table cell to its smallest possible width
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* scrollbar
* Controls scrollbar appearance in all major browsers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Envato Foundation Design System: Shame colors
* This is a temporary directory containing color variables that need to
* be updated to align with new color naming restrictions. They have
* currently just been ported directly over form market.
* Please do not make any changes without consulting #design-system
*
--------------------------------------------------------------------*/
.fds-c-text-currency {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
font-weight: inherit;
line-height: 1
}
.fds-c-text-currency::first-letter {
margin-right: 0.05em;
font-size: 12px;
line-height: 1.25em;
font-weight: 400;
vertical-align: top
}
/*--------------------------------------------------------------------
*
* https://bugzilla.mozilla.org/show_bug.cgi?id=385615
* Firefox has lots of troubles with ::first-letter pseudo class
*
--------------------------------------------------------------------*/
@-moz-document url-prefix() {
.fds-c-text-currency::first-letter {
float: left;
}
}
/*--------------------------------------------------------------------
*
* CORE - IE10 message
* Styles for IE10 incompatibility message.
*
--------------------------------------------------------------------*/
.alert-ie {
position: fixed;
top: 0;
left: 0;
color: white;
width: 100%;
padding: 15px 0;
background-color: red;
text-align: center;
z-index: 10
}
.alert-ie a {
color: white;
text-decoration: underline;
}
/*--------------------------------------------------------------------
*
* CORE - BUTTONS
* Styles for buttons.
*
--------------------------------------------------------------------*/
.btn-square {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
border: none;
border-radius: 4px;
color: hsl(0, 0%, 100%);
cursor: pointer;
display: inline-block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
margin: 0;
padding: 5px 20px;
text-align: center;
text-decoration: none;
line-height: 1;
padding: 6px;
background-color: hsl(0, 0%, 20%);
}
.btn-square:hover,
.btn-square:focus,
.btn-square:focus {
background-color: #0084b4;
text-decoration: none;
outline: none;
}
.btn-search-switch {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
border: none;
cursor: pointer;
display: inline-block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
margin: 0;
text-align: center;
text-decoration: none;
background-color: transparent;
color: hsl(0, 0%, 70%);
border-radius: 0;
padding: 5px;
margin-right: 1px;
}
.btn-search-switch:hover,
.btn-search-switch:focus,
.btn-search-switch:focus,
.btn-search-switch.is-active {
background-color: transparent;
color: hsl(0, 0%, 30%);
text-decoration: none;
outline: none;
}
.btn-group {
height: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
font-size: 0;
}
.btn-search-switch:first-child {
border-radius: 4px 0 0 4px;
}
.btn-search-switch:last-child {
border-radius: 0 4px 4px 0;
margin-right: 0;
}
/*--------------------------------------------------------------------
*
* CORE - GRID
* Styles for am-Grid.
*
--------------------------------------------------------------------*/
[am-Grid] {
float: left;
width: 100%;
}
[am-Grid]:after {
content: "";
display: table;
clear: both;
}
@media (max-width: 639px) {
[am-Grid] [am-Grid-Col~="s:1"] {
width: 20.3125%;
float: left;
margin-right: 6.25%;
}
[am-Grid] [am-Grid-Col~="s:pre1"] {
margin-left: 26.5625%;
}
[am-Grid] [am-Grid-Col~="s:2"] {
width: 46.875%;
float: left;
margin-right: 6.25%;
}
[am-Grid] [am-Grid-Col~="s:pre2"] {
margin-left: 53.125%;
}
[am-Grid] [am-Grid-Col~="s:3"] {
width: 73.4375%;
float: left;
margin-right: 6.25%;
}
[am-Grid] [am-Grid-Col~="s:pre3"] {
margin-left: 79.6875%;
}
[am-Grid] [am-Grid-Col~="s:4"] {
width: 100%;
float: left;
margin-right: 6.25%;
}
[am-Grid] [am-Grid-Col~="s:pre4"] {
margin-left: 106.25%;
}
[am-Grid] [am-Grid-Row~="s:end"] {
margin-right: 0;
clear: right;
}
[am-Grid] [am-Grid-Row~="s:start"] {
clear: left;
}
}
@media (min-width: 640px) and (max-width: 1151px) {
[am-Grid] [am-Grid-Col~="m:1"] {
width: 9.84848%;
float: left;
margin-right: 3.0303%;
}
[am-Grid] [am-Grid-Col~="m:pre1"] {
margin-left: 12.87879%;
}
[am-Grid] [am-Grid-Col~="m:2"] {
width: 22.72727%;
float: left;
margin-right: 3.0303%;
}
[am-Grid] [am-Grid-Col~="m:pre2"] {
margin-left: 25.75758%;
}
[am-Grid] [am-Grid-Col~="m:3"] {
width: 35.60606%;
float: left;
margin-right: 3.0303%;
}
[am-Grid] [am-Grid-Col~="m:pre3"] {
margin-left: 38.63636%;
}
[am-Grid] [am-Grid-Col~="m:4"] {
width: 48.48485%;
float: left;
margin-right: 3.0303%;
}
[am-Grid] [am-Grid-Col~="m:pre4"] {
margin-left: 51.51515%;
}
[am-Grid] [am-Grid-Col~="m:5"] {
width: 61.36364%;
float: left;
margin-right: 3.0303%;
}
[am-Grid] [am-Grid-Col~="m:pre5"] {
margin-left: 64.39394%;
}
[am-Grid] [am-Grid-Col~="m:6"] {
width: 74.24242%;
float: left;
margin-right: 3.0303%;
}
[am-Grid] [am-Grid-Col~="m:pre6"] {
margin-left: 77.27273%;
}
[am-Grid] [am-Grid-Col~="m:7"] {
width: 87.12121%;
float: left;
margin-right: 3.0303%;
}
[am-Grid] [am-Grid-Col~="m:pre7"] {
margin-left: 90.15152%;
}
[am-Grid] [am-Grid-Col~="m:8"] {
width: 100%;
float: left;
margin-right: 3.0303%;
}
[am-Grid] [am-Grid-Col~="m:pre8"] {
margin-left: 103.0303%;
}
[am-Grid] [am-Grid-Row~="m:end"] {
margin-right: 0;
clear: right;
}
[am-Grid] [am-Grid-Row~="m:start"] {
clear: left;
}
}
@media (min-width: 1152px) {
[am-Grid] [am-Grid-Col~="l:1"] {
width: 6.5%;
float: left;
margin-right: 2%;
}
[am-Grid] [am-Grid-Col~="l:pre1"] {
margin-left: 8.5%;
}
[am-Grid] [am-Grid-Col~="l:2"] {
width: 15%;
float: left;
margin-right: 2%;
}
[am-Grid] [am-Grid-Col~="l:pre2"] {
margin-left: 17%;
}
[am-Grid] [am-Grid-Col~="l:3"] {
width: 23.5%;
float: left;
margin-right: 2%;
}
[am-Grid] [am-Grid-Col~="l:pre3"] {
margin-left: 25.5%;
}
[am-Grid] [am-Grid-Col~="l:4"] {
width: 32%;
float: left;
margin-right: 2%;
}
[am-Grid] [am-Grid-Col~="l:pre4"] {
margin-left: 34%;
}
[am-Grid] [am-Grid-Col~="l:5"] {
width: 40.5%;
float: left;
margin-right: 2%;
}
[am-Grid] [am-Grid-Col~="l:pre5"] {
margin-left: 42.5%;
}
[am-Grid] [am-Grid-Col~="l:6"] {
width: 49%;
float: left;
margin-right: 2%;
}
[am-Grid] [am-Grid-Col~="l:pre6"] {
margin-left: 51%;
}
[am-Grid] [am-Grid-Col~="l:7"] {
width: 57.5%;
float: left;
margin-right: 2%;
}
[am-Grid] [am-Grid-Col~="l:pre7"] {
margin-left: 59.5%;
}
[am-Grid] [am-Grid-Col~="l:8"] {
width: 66%;
float: left;
margin-right: 2%;
}
[am-Grid] [am-Grid-Col~="l:pre8"] {
margin-left: 68%;
}
[am-Grid] [am-Grid-Col~="l:9"] {
width: 74.5%;
float: left;
margin-right: 2%;
}
[am-Grid] [am-Grid-Col~="l:pre9"] {
margin-left: 76.5%;
}
[am-Grid] [am-Grid-Col~="l:10"] {
width: 83%;
float: left;
margin-right: 2%;
}
[am-Grid] [am-Grid-Col~="l:pre10"] {
margin-left: 85%;
}
[am-Grid] [am-Grid-Col~="l:11"] {
width: 91.5%;
float: left;
margin-right: 2%;
}
[am-Grid] [am-Grid-Col~="l:pre11"] {
margin-left: 93.5%;
}
[am-Grid] [am-Grid-Col~="l:12"] {
width: 100%;
float: left;
margin-right: 2%;
}
[am-Grid] [am-Grid-Col~="l:pre12"] {
margin-left: 102%;
}
[am-Grid] [am-Grid-Row~="l:end"] {
margin-right: 0;
clear: right;
}
[am-Grid] [am-Grid-Row~="l:start"] {
clear: left;
}
}
/*--------------------------------------------------------------------
*
* CORE - GRID CONTAINER
* Styles for the Susy grid container.
*
--------------------------------------------------------------------*/
.grid-container {
max-width: 1004px;
padding-left: 10px;
padding-right: 10px;
margin-left: auto;
margin-right: auto
}
.grid-container.-layout-wide {
max-width: 1152px;
}
.grid-container:after {
content: "";
display: table;
clear: both;
}
@media (min-width: 1152px) {
.grid-container.-layout-videohive {
max-width: 1400px
}
.grid-container.-layout-videohive .sidebar-s {
margin-top: 21px;
}
}
/*--------------------------------------------------------------------
*
* CORE - MEDIA
* Styles for media elements.
*
--------------------------------------------------------------------*/
.media {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
@media (min-width: 640px) {
.media {
-ms-flex-flow: nowrap;
flex-flow: nowrap;
}
}
.media>div:first-child {
margin-right: 1em;
}
.media__item {
-ms-flex: 0 auto;
flex: 0 auto;
}
.media__item>a {
display: block;
line-height: 0;
}
.media__item img {
display: block;
}
.media__body {
-ms-flex: 1 0;
flex: 1 0;
-ms-flex-item-align: start;
align-self: flex-start
};
/*--------------------------------------------------------------------
*
* CORE - TEXT LABEL
* Styles for text labels.
*
--------------------------------------------------------------------*/
.e-text-label {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
text-align: center;
text-decoration: none;
}
.e-text-label:hover,
.e-text-label:active,
.e-text-label:focus {
text-decoration: none;
}
.e-text-label {
padding: 7px 10px;
border-radius: 5px;
font-size: 12px;
line-height: 12px;
}
.e-text-label.-size-s {
padding: 4px 4px 3px;
border-radius: 3px;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
}
.e-text-label {
background-color: hsl(0, 0%, 60%);
color: hsl(0, 0%, 100%);
}
.e-text-label.-color-grey-light {
background-color: #dedede;
color: #545454;
}
/*--------------------------------------------------------------------
*
* CORE - CANVAS
* Styles for the container for all on-canvas layout elements.
*
--------------------------------------------------------------------*/
.canvas {
position: relative;
}
/*--------------------------------------------------------------------
*
* CORE - CONTENT
* Styles for content area.
*
--------------------------------------------------------------------*/
.content-main--basic {
min-height: 300px;
height: 100%;
}
@media (min-width: 1152px) {
.content-main--basic {
min-height: 590px;
}
}
@media (min-width: 1152px) {
.content-l {
float: left;
width: 766px;
}
.content-l.-size-scale-tablet.-layout-wide {
width: 100%;
}
}
@media (min-width: 640px) {
.content-l.-size-scale-tablet {
float: left;
width: 350px;
width: calc(100% - 218px);
}
.content-centre.-size-scale-tablet {
float: none;
}
}
@media (min-width: 1152px) {
.content-right {
float: right;
}
.content-centre {
margin: 0 auto;
}
}
/*--------------------------------------------------------------------
*
* CORE - OFF CANVAS
* Styles for off canvas navigation.
*
--------------------------------------------------------------------*/
.off-canvas-category-link--empty,
.off-canvas-category-link {
background-color: hsl(0, 0%, 20%);
color: hsl(0, 0%, 100%);
display: block;
padding: 15px;
}
.off-canvas-category-link--empty:hover,
.off-canvas-category-link:hover,
.off-canvas-category-link--empty:focus,
.off-canvas-category-link:focus {
text-decoration: none;
}
.off-canvas-category-link--sub {
color: hsl(0, 0%, 100%);
display: block;
padding: 15px 15px 15px 25px;
}
.off-canvas-category-link--sub:hover, .off-canvas-category-link--sub:focus {
text-decoration: none;
}
.off-canvas-category-spacer {
min-height: 6px;
}
.off-canvas-left ul {
list-style: none;
margin: 0;
padding: 0;
}
.off-canvas-left a {
font-size: 13px;
text-decoration: none;
}
.off-canvas-left__top {
padding: 15px 0 17px;
}
.off-canvas-left__top > a {
display: block;
height: 15px;
margin: 0 auto;
text-indent: -9999px;
width: 177px;
}
.off-canvas-left__top > a {
background: url('/assets/images/logo-envato-market.svg');
background-size: 177px 15px;
}
.off-canvas-left__site {
background-color: hsl(0, 0%, 20%);
overflow: hidden;
padding-left: 2px;
display: block;
}
.off-canvas-left__site > i {
color: hsl(0, 0%, 100%);
float: right;
font-size: 12px;
padding-right: 5px;
padding-top: 13px;
}
.off-canvas-left__site-logo--3docean,
.off-canvas-left__site-logo--audiojungle,
.off-canvas-left__site-logo--codecanyon,
.off-canvas-left__site-logo--graphicriver,
.off-canvas-left__site-logo--photodune,
.off-canvas-left__site-logo--themeforest,
.off-canvas-left__site-logo--videohive {
float: left;
text-indent: -9999px;
}
.off-canvas-left__site-logo--3docean {
background-image: url('/assets/images/sprite-logos.png');
background-position: -285px -196px;
width: 119px;
height: 40px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.off-canvas-left__site-logo--3docean {
background-image: url('/assets/images/sprite-logos@2x.png');
background-size: 577px 449px;
background-position: -285px -196px;
height: 40px;
width: 119px;
}
}
.off-canvas-left__site-logo--audiojungle {
background-image: url('/assets/images/sprite-logos.png');
background-position: -163px -272px;
width: 143px;
height: 40px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.off-canvas-left__site-logo--audiojungle {
background-image: url('/assets/images/sprite-logos@2x.png');
background-size: 577px 449px;
background-position: -163px -272px;
height: 40px;
width: 143px;
}
}
.off-canvas-left__site-logo--codecanyon {
background-image: url('/assets/images/sprite-logos.png');
background-position: 0px -332px;
width: 147px;
height: 40px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.off-canvas-left__site-logo--codecanyon {
background-image: url('/assets/images/sprite-logos@2x.png');
background-size: 577px 449px;
background-position: 0px -332px;
height: 40px;
width: 147px;
}
}
.off-canvas-left__site-logo--graphicriver {
background-image: url('/assets/images/sprite-logos.png');
background-position: -167px -332px;
width: 139px;
height: 40px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.off-canvas-left__site-logo--graphicriver {
background-image: url('/assets/images/sprite-logos@2x.png');
background-size: 577px 449px;
background-position: -167px -332px;
height: 40px;
width: 139px;
}
}
.off-canvas-left__site-logo--photodune {
background-image: url('/assets/images/sprite-logos.png');
background-position: -444px 0px;
width: 133px;
height: 40px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.off-canvas-left__site-logo--photodune {
background-image: url('/assets/images/sprite-logos@2x.png');
background-size: 577px 449px;
background-position: -444px 0px;
height: 40px;
width: 133px;
}
}
.off-canvas-left__site-logo--themeforest {
background-image: url('/assets/images/sprite-logos.png');
background-position: 0px -272px;
width: 143px;
height: 40px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.off-canvas-left__site-logo--themeforest {
background-image: url('/assets/images/sprite-logos@2x.png');
background-size: 577px 449px;
background-position: 0px -272px;
height: 40px;
width: 143px;
}
}
.off-canvas-left__site-logo--videohive {
background-image: url('/assets/images/sprite-logos.png');
background-position: -150px -68px;
width: 114px;
height: 40px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.off-canvas-left__site-logo--videohive {
background-image: url('/assets/images/sprite-logos@2x.png');
background-size: 577px 449px;
background-position: -150px -68px;
height: 40px;
width: 114px;
}
}
.off-canvas-left__current-site {
overflow: hidden;
padding-left: 3px;
}
.off-canvas-left__current-site.-color-3docean {
background-color: hsl(346, 84%, 36%);
}
.off-canvas-left__current-site.-color-audiojungle {
background-color: hsl(76, 60%, 47%);
}
.off-canvas-left__current-site.-color-codecanyon {
background-color: hsl(28, 79%, 55%);
}
.off-canvas-left__current-site.-color-graphicriver {
background-color: hsl(196, 57%, 44%);
}
.off-canvas-left__current-site.-color-photodune {
background-color: hsl(185, 82%, 33%);
}
.off-canvas-left__current-site.-color-themeforest {
background-color: hsl(168, 76%, 42%);
}
.off-canvas-left__current-site.-color-videohive {
background-color: hsl(43, 98%, 46%);
}
.off-canvas-left__current-site-toggle {
box-shadow: 0 2px 0 #a8a8a8;
position: relative;
background-color: #dedede;
border-radius: 4px;
color: #454545;
float: right;
margin: 5px 10px 0;
padding: 5px 7px;
font-size: 13px;
}
.off-canvas-left__current-site-toggle:active {
top: 1px;
box-shadow: 0 1px 0 #a8a8a8;
}
.off-canvas-left__current-site-toggle:hover, .off-canvas-left__current-site-toggle:focus {
text-decoration: none;
}
.off-canvas-left__search {
margin: 15px;
overflow: hidden;
}
.off-canvas-right {
background-color: #262626;
}
.off-canvas-right > ul {
list-style: none;
margin: 0;
padding: 0;
}
.off-canvas-right > ul a {
text-decoration: none;
}
.off-canvas-right__top {
padding: 10px;
position: relative;
}
.off-canvas-right__avatar {
border-radius: 25px;
display: block;
width: 45px;
}
.off-canvas-right__username {
color: hsl(0, 0%, 100%);
display: inline-block;
font-size: 13px;
line-height: 15px;
font-weight: bold;
margin-bottom: 5px;
text-decoration: none;
}
.off-canvas-right__username:hover, .off-canvas-right__username:focus {
text-decoration: underline;
}
.off-canvas-right__balance {
background-color: hsl(0, 0%, 20%);
border-radius: 4px;
color: #d4d4d4;
display: inline-block;
font-size: 11px;
line-height: 12px;
padding: 4px 7px;
}
.off-canvas-right__cart {
position: absolute;
right: 10px;
top: 10px;
}
.off-canvas-right__section-heading {
background-color: #dedede;
color: #262626;
display: block;
padding: 15px 10px;
text-transform: capitalize;
}
.off-canvas-right__link,
.off-canvas-right__link--cart,
.off-canvas-right__link--logout {
background-color: hsl(0, 0%, 20%);
border-bottom: 1px solid #454545;
color: #dedede;
display: block;
font-size: 13px;
line-height: 15px;
padding: 15px 10px;
text-decoration: none;
}
.off-canvas-right__link > i,
.off-canvas-right__link--cart > i,
.off-canvas-right__link--logout > i {
float: right;
}
.off-canvas-right__link--cart {
background-color: #262626;
border-bottom: none;
}
.off-canvas-right__link--cart > div {
float: right;
}
.off-canvas-right__link--logout {
background-color: #df2c2c;
color: hsl(0, 0%, 100%);
border-bottom: none;
}
.off-canvas {
padding-top: 15px;
padding-bottom: 50px;
}
.off-canvas__title {
display: block;
padding: 0 20px;
}
.off-canvas__search {
margin: 10px 0;
padding: 0 20px;
}
.shopping-cart-summary {
color: hsl(0, 0%, 100%);
}
.shopping-cart-summary.is-empty {
color: grey;
}
.shopping-cart-summary.is-empty span {
display: none;
}
.shopping-cart-summary__count {
box-sizing: border-box;
background: #82b541;
display: inline-block;
padding: 2px 7px 3px 7px;
font-size: 12px;
font-weight: 700;
color: #f5f5f5;
line-height: 1;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
border-radius: 10px;
}
/*--------------------------------------------------------------------
*
* CORE - PAGE
* Styles for page specific layout.
*
--------------------------------------------------------------------*/
@media (max-width: 831px) {
.mobileScrollLock {
overflow: hidden;
position:fixed;
}
}
.page {
height: 100%;
position: relative;
}
@media (min-width: 1152px) {
.page {
min-width: 1004px;
}
}
@media (max-width: 1151px) {
.page--is-off-canvas {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
overflow: hidden;
}
}
.page__canvas {
box-shadow: 0 0 15px -1px hsl(0, 0%, 40%);
position: relative;
z-index: 2;
min-height: 100%;
}
@media (min-width: 1152px) {
.page__canvas {
box-shadow: none;
}
}
@media (min-width: 1152px) {
.page__canvas .page__canvas--is-off-canvas-right,
.page__canvas .page__canvas--is-off-canvas-left {
left: 0;
right: 0;
}
}
@media (max-width: 1151px) {
.page__canvas--is-off-canvas-right {
right: 260px;
}
}
@media (max-width: 1151px) {
.page__canvas--is-off-canvas-left {
left: 260px;
}
}
.page__off-canvas--left,
.page__off-canvas--right {
display: none;
width: 260px;
z-index: 3;
}
.page__off-canvas--left::-webkit-scrollbar,
.page__off-canvas--right::-webkit-scrollbar {
-webkit-appearance: none;
}
.page__off-canvas--left::-webkit-scrollbar:vertical,
.page__off-canvas--right::-webkit-scrollbar:vertical {
width: 11px;
}
.page__off-canvas--left::-webkit-scrollbar:horizontal,
.page__off-canvas--right::-webkit-scrollbar:horizontal {
height: 11px;
}
.page__off-canvas--left::-webkit-scrollbar-thumb,
.page__off-canvas--right::-webkit-scrollbar-thumb {
border: 2px solid #f5f5f5;
background-color: hsl(0, 0%, 40%);
}
.page__off-canvas--left::-webkit-scrollbar-thumb:hover,
.page__off-canvas--right::-webkit-scrollbar-thumb:hover,
.page__off-canvas--left::-webkit-scrollbar-thumb:focus,
.page__off-canvas--right::-webkit-scrollbar-thumb:focus {
background-color: hsl(0, 0%, 60%);
}
.page__off-canvas--left::-webkit-scrollbar-track,
.page__off-canvas--right::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
@media (max-width: 1151px) {
.page__off-canvas--left,
.page__off-canvas--right {
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
top: 0;
bottom: 0;
background-color: #262626;
}
}
.page__off-canvas--left {
left: 0;
}
.page__off-canvas--right {
right: 0;
}
.page__off-canvas--is-active {
display: block;
}
@media (min-width: 1152px) {
.page__off-canvas--is-active {
display: none;
}
}
.page__overlay--is-active {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
cursor: pointer;
}
@media (min-width: 1152px) {
.page__overlay--is-active {
display: none;
}
}
.page-section {
padding: 24px 0;
}
@media (min-width: 640px) {
.page-section {
padding: 32px 0;
}
}
.page-section.-size-xcompact {
padding: 0;
}
.page-section[class*='-theme-'] {
color: hsl(0, 0%, 100%);
position: relative;
}
.page-section__background {
height: 100%;
left: 0;
position: absolute;
right: 0;
z-index: -10;
background-color: inherit;
background-size: 480px;
background-image: url('/assets/images/bg-page-section-light.png');
}
.page-section.-color-grey-light {
background: hsl(0, 0%, 98%);
}
.page-section.-border-top {
border-top: 1px solid #e1e8ed;
}
.page-section.-border-bottom {
border-bottom: 1px solid #e1e8ed;
}
@supports (background-blend-mode: overlay) {
.page-section__background {
background-blend-mode: overlay;
background-image: url('/assets/images/bg-page-section.png');
}
}
.-theme-themeforest .page-section__background {
background-color: hsl(171, 72%, 43%);
}
.-theme-codecanyon .page-section__background {
background-color: hsl(28, 79%, 55%);
}
.-theme-videohive .page-section__background {
background-color: hsl(38, 88%, 53%);
}
.-theme-audiojungle .page-section__background {
background-color: hsl(83, 56%, 45%);
}
.-theme-graphicriver .page-section__background {
background-color: hsl(196, 57%, 44%);
}
.-theme-photodune .page-section__background {
background-color: hsl(185, 82%, 33%);
}
.-theme-3docean .page-section__background {
background-color: hsl(346, 75%, 40%);
}
/*--------------------------------------------------------------------
*
* CORE - SIDEBAR
* Styles for sidebar.
*
--------------------------------------------------------------------*/
@media (min-width: 1152px) {
.sidebar-s {
float: left;
margin-right: 18px;
width: 200px;
}
}
@media (min-width: 640px) {
.sidebar-s.-size-fixed-tablet {
float: left;
margin-right: 18px;
width: 200px;
}
}
/*--------------------------------------------------------------------
*
* CORE - iframes
* Styles for GA iframes.
*
--------------------------------------------------------------------*/
iframe[name=google_conversion_frame] {
display: none;
}
/*--------------------------------------------------------------------
*
* CORE - SEARCH FIELD
* Styles for search field in off canvas mobile navigation.
*
--------------------------------------------------------------------*/
.search-field {
display: -ms-flexbox;
display: flex
}
.search-field.-size-xl {
font-size: 16px;
height: 60px;
}
.search-field,
.search-field.-size-s {
font-size: 16px;
height: 30px;
}
@media (min-width: 1152px) {
.search-field,
.search-field.-size-s {
font-size: 13px;
}
}
.search-field__input {
-ms-flex: 1 auto;
flex: 1 auto;
display: -ms-flexbox;
display: flex;
min-width: 0;
}
input.search-field__input-field {
-ms-flex: 1;
flex: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
padding: 5px 8px 6px;
border: 1px solid #bababa;
border-radius: 7px 0 0 7px;
border-right: 0;
color: gray;
-webkit-appearance: none;
outline: none;
min-width: 0;
}
@media (min-width: 1152px) {
.search-field.-size-xl input.search-field__input-field {
padding: 5px 20px;
}
}
@media (min-width: 1152px) {
.search-field.-size-l input.search-field__input-field {
padding: 5px 15px;
}
}
.search-field {
}
.search-field.-border-none {
}
.search-field.-border-none input.search-field__input-field {
border: none;
}
@media (min-width: 1152px) {
input.search-field__input-field.is-autosuggest-visible {
border-bottom-left-radius: 0;
}
}
button.search-field__button {
-ms-flex: 0 0 30px;
flex: 0 0 30px;
padding: 3px 0 2px;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 60%);
border: 1px solid #bababa;
border-left: none;
border-radius: 0 7px 7px 0;
border-left: none;
font-size: 14px;
transition: background-color 0.2s;
}
button.search-field__button:hover {
background-color: #f5f5f5;
}
button.search-field__button:hover:before, button.search-field__button:focus:before {
color: hsl(0, 0%, 20%);
}
button.search-field__button:focus {
background-color: hsl(0, 0%, 100%);
}
button.search-field__button:active {
background-color: #ededed;
}
/*--------------------------------------------------------------------
*
* CORE - BREADCRUMBS
* Styles for breadcrumb navigation.
*
--------------------------------------------------------------------*/
.breadcrumbs {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0 0 8px 0;
}
.breadcrumbs a {
position: relative;
color: hsl(0, 0%, 40%);
font-size: 12px;
line-height: 1;
text-decoration: none;
}
.breadcrumbs a:hover, .breadcrumbs a:focus {
text-decoration: none;
color: #454545;
}
.breadcrumbs a:last-of-type:after {
display: none;
}
.breadcrumbs a:only-of-type:after {
display: inline-block;
}
.breadcrumbs a.is-complete:before:hover, .breadcrumbs a.is-complete:before:focus {
color: #82b541;
}
.breadcrumbs a.is-last {
cursor: default;
}
.breadcrumbs a.is-active {
color: #454545;
}
.breadcrumbs a.is-active:hover, .breadcrumbs a.is-active:focus {
color: #454545;
cursor: default;
}
.breadcrumbs a.is-disabled:hover, .breadcrumbs a.is-disabled:focus {
color: #bababa;
cursor: default;
}
.breadcrumbs.-color-light a {
color: hsl(0, 0%, 100%);
opacity: 0.8;
}
.breadcrumbs.-color-light a:hover, .breadcrumbs.-color-light a:focus {
opacity: 1;
}
.breadcrumbs.-color-light a:after {
color: hsl(0, 0%, 100%);
opacity: 0.3;
}
.breadcrumbs.-color-dark a {
color: hsl(0, 0%, 0%);
}
.breadcrumbs.-color-dark a:after {
color: #787878;
}
.breadcrumbs.-size-s a {
font-size: 12px;
}
.breadcrumbs.-line-wrap {
overflow: visible;
white-space: normal;
}
.breadcrumbs.-line-wrap a {
line-height: 1.5;
}
.breadcrumbs__count {
padding-left: 5px;
color: #d4d4d4;
}
.breadcrumbs__icon {
margin: 0 4px 2px 4px;
}
/*--------------------------------------------------------------------
*
* CORE - PAGINATION
* Styles for pagination navigation.
*
--------------------------------------------------------------------*/
.pagination {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: table;
font-weight: bold;
margin-bottom: 20px;
width: 100%;
}
@media (min-width: 1152px) {
.pagination {
display: block;
text-align: right;
width: auto;
}
}
.pagination__list {
list-style: none;
display: table-row;
}
.pagination__list > li {
display: table-cell;
}
.pagination__list > li:first-child,
.pagination__list > li:last-child {
width: 30px;
}
@media (min-width: 1152px) {
.pagination__list {
display: block;
}
.pagination__list > li {
display: inline-block;
}
.pagination__list > li:first-child,
.pagination__list > li:last-child {
width: auto;
}
.pagination__list > li:last-child {
margin-right: -4px;
}
}
.pagination__page,
.pagination__page--current,
.pagination__summary,
.pagination__gap,
.pagination__next,
.pagination__next--disabled,
.pagination__previous,
.pagination__previous--disabled {
border-radius: 4px;
display: none;
font-size: 14px;
height: 32px;
line-height: 30px;
text-align: center;
}
@media (min-width: 1152px) {
.pagination__page,
.pagination__page--current,
.pagination__summary,
.pagination__gap,
.pagination__next,
.pagination__next--disabled,
.pagination__previous,
.pagination__previous--disabled {
display: block;
font-size: 12px;
height: 30px;
padding: 0 9px;
}
}
.pagination__page {
color: hsl(0, 0%, 60%);
text-decoration: none;
}
.pagination__page:hover, .pagination__page:focus {
background: #e1e8ed;
color: #454545;
text-decoration: none;
}
.pagination__page--current {
background: #ededed;
border: 1px solid #e1e8ed;
color: #454545;
}
.pagination__summary {
display: block;
color: hsl(0, 0%, 60%);
font-size: 13px;
}
@media (min-width: 1152px) {
.pagination__summary {
display: none;
}
}
@media (min-width: 1152px) {
.pagination__gap {
font-size: 12px;
color: hsl(0, 0%, 60%);
padding: 0 2px;
}
}
.pagination__next,
.pagination__next--disabled,
.pagination__previous,
.pagination__previous--disabled {
display: block;
text-decoration: none;
background: #454545;
border: 1px solid #454545;
color: hsl(0, 0%, 100%);
padding: 0 25px;
position: relative;
}
@media (min-width: 1152px) {
.pagination__next,
.pagination__next--disabled,
.pagination__previous,
.pagination__previous--disabled {
padding: 0 10px;
}
}
.pagination__next:hover,
.pagination__next--disabled:hover,
.pagination__previous:hover,
.pagination__previous--disabled:hover,
.pagination__next:focus,
.pagination__next--disabled:focus,
.pagination__previous:focus,
.pagination__previous--disabled:focus {
background: #0084b4;
border: 1px solid #0084b4;
color: hsl(0, 0%, 100%);
text-decoration: none;
}
.pagination__next b,
.pagination__next--disabled b,
.pagination__previous b,
.pagination__previous--disabled b {
display: none;
}
.pagination__next--disabled,
.pagination__previous--disabled {
visibility: hidden;
}
@media (min-width: 1152px) {
.pagination__next--disabled,
.pagination__previous--disabled {
display: none;
}
}
.pagination__next,
.pagination__next--disabled {
margin-right: 4px;
}
.pagination__previous,
.pagination__previous--disabled {
position: relative;
left: 4px;
}
.pagination__previous.-arrows-only {
left: 0;
}
.recently-viewed-items.cross-sell {
margin-top: 0;
}
.cross-sell {
background-color: hsl(0, 0%, 20%);
padding-bottom: 32px;
padding-top: 32px;
}
.cross-sell__list {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between
}
@media (max-width: 639px) {
.cross-sell__list {
-ms-flex-direction: column;
flex-direction: column;
}
}
.cross-sell__list-item {
background-color: hsl(0, 0%, 100%);
border-radius: 5px;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
overflow: hidden;
margin: 32px 8px;
max-width: 320px;
transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}
@media (max-width: 639px) {
.cross-sell__list-item {
-ms-flex-preferred-size: auto;
flex-basis: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 50%;
}
}
@media (max-width: 639px) {
.cross-sell__list-item {
width: 100%;
}
}
.cross-sell__list-item:hover, .cross-sell__list-item:active, .cross-sell__list-item:focus {
transform: translateY(-6px);
}
.cross-sell__image {
display: block;
height: auto;
width: 100%;
transition: -webkit-filter 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: filter 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: filter 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-filter 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
will-change: filter;
}
.cross-sell__image .cross-sell__list-item:hover, .cross-sell__image .cross-sell__list-item:focus {
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: brightness(120%) hue-rotate(45deg);
filter: brightness(120%) hue-rotate(45deg);
}
.cross-sell__text-container {
color: #454545;
padding: 16px;
}
.cross-sell__text {
color: gray;
font-weight: 500;
}
.cross-sell__text .cross-sell__list-item:hover, .cross-sell__text .cross-sell__list-item:focus {
color: #545454;
}
.cross-sell__link {
border-radius: 5px;
display: block;
overflow: hidden
}
.cross-sell__link:link, .cross-sell__link:visited {
text-decoration: none;
}
/*--------------------------------------------------------------------
*
* CORE - SOCIAL LINKS
* Styles for social links.
*
--------------------------------------------------------------------*/
.social-links {
list-style: none;
padding: 0;
margin: 0;
}
.social-links li {
display: inline-block;
padding: 0px 2px;
}
/*--------------------------------------------------------------------
*
* CORE - REACT MODALS
* Generic styles for modals.
*
--------------------------------------------------------------------*/
@media (min-width: 640px) {
/* Prevent modal widths from flickering due to native React behavior */
.modal {
min-width: 600px;
}
}
/* Remove scroll on the body when react-modal is open
This one is default from react-modal and can not be modified */
.ReactModal__Body--open {
overflow: hidden;
}
/* Custom style for modal, class name can be configured */
.ReactModal__Overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1042;
background-color: rgba(51, 51, 51, .5);
overflow: hidden;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
.ReactModal__Content {
z-index: 1045;
}
/*--------------------------------------------------------------------
*
* CORE - CART MODAL
* Styles for the cart modal
*
--------------------------------------------------------------------*/
.cart-modal__thumbnail {
display: none;
}
.cart-modal__core-info,
.cart-modal__variant-info {
width: 100%;
float: left;
}
.cart-modal__variant-selector {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.cart-modal__item-support {
background: hsl(0, 0%, 98%);
border: 1px solid #e1e8ed;
border-radius: 3px;
padding: 10px;
position: relative;
font-size: 13px;
}
.cart-modal__item-support:hover, .cart-modal__item-support:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 1px #9ecaed;
}
@media (min-width: 640px) {
.cart-modal__thumbnail {
display: block;
float: left;
width: 95px
}
.cart-modal__thumbnail img {
max-width: 80px;
}
.cart-modal__core-info {
width: 233px;
}
.cart-modal__variant-info {
width: 235px;
margin-top: 0;
}
}
/*--------------------------------------------------------------------
*
* CORE - COLLECTION MODAL
* Styles for the collection modal
*
--------------------------------------------------------------------*/
.collection__list {
min-height: 100px;
}
/* TODO: Remove this file in favour of '@envato-foundation/foundation-design-system-components-text/dist/preformatted';
The above file, which is part of the Foundation Design System NPM package, has not been flattened. So for now
I'm just copying this flatten contents to this file. Once the package has been updated we should remove this file.
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
.fds-c-text-preformatted {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fds-c-text-preformatted p {
color: #666666;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
margin-bottom: 16px;
padding: 0;
}
.fds-c-text-preformatted p a {
color: #0084b4;
}
.fds-c-text-preformatted p a:hover, .fds-c-text-preformatted p a:focus {
color: #00719b;
}
.fds-c-text-preformatted h1 {
display: none;
}
.fds-c-text-preformatted h2, .fds-c-text-preformatted h3, .fds-c-text-preformatted h4, .fds-c-text-preformatted h5, .fds-c-text-preformatted h6 {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
font-weight: 700;
line-height: 1.2;
color: #454545;
margin-bottom: 8px;
padding: 0;
}
.fds-c-text-preformatted h2 a, .fds-c-text-preformatted h3 a, .fds-c-text-preformatted h4 a, .fds-c-text-preformatted h5 a, .fds-c-text-preformatted h6 a {
color: #0084b4;
}
.fds-c-text-preformatted h2 a:hover, .fds-c-text-preformatted h3 a:hover, .fds-c-text-preformatted h4 a:hover, .fds-c-text-preformatted h5 a:hover, .fds-c-text-preformatted h6 a:hover, .fds-c-text-preformatted h2 a:focus, .fds-c-text-preformatted h3 a:focus, .fds-c-text-preformatted h4 a:focus, .fds-c-text-preformatted h5 a:focus, .fds-c-text-preformatted h6 a:focus {
color: #00719b;
}
.fds-c-text-preformatted small {
color: #909090;
font-size: 12px;
}
.fds-c-text-preformatted ol, .fds-c-text-preformatted ul {
font-size: 14px;
margin-bottom: 16px;
padding-left: 25px;
}
.fds-c-text-preformatted ol:last-child, .fds-c-text-preformatted ul:last-child {
margin-bottom: 0;
}
.fds-c-text-preformatted ol {
list-style-type: decimal;
}
.fds-c-text-preformatted ul {
list-style: disc;
}
.fds-c-text-preformatted table {
margin-bottom: 16px;
max-width: 100%;
overflow: auto;
}
.fds-c-text-preformatted img {
max-width: 100%;
}
.fds-c-text-preformatted blockquote {
border-left: 1px solid #454545;
color: #777777;
font-size: 14px;
font-style: italic;
margin-bottom: 16px;
padding-left: 16px;
}
.fds-c-text-preformatted pre {
font-size: 14px;
margin-bottom: 16px;
}
/*--------------------------------------------------------------------
*
* CORE - STATE
* Styles for different states the elements can be in.
*
--------------------------------------------------------------------*/
.is-disabled-loading {
position: relative;
cursor: wait
}
.is-disabled-loading:before {
content: "";
background-color: hsl(0, 0%, 100%);
opacity: 0.4;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
/*--------------------------------------------------------------------
*
* SEARCH ITEM RATING
* Styles for star item rating.
*
--------------------------------------------------------------------*/
.star-rating,
.star-rating--search {
display: inline-block;
line-height: 1;
}
.star-rating > a,
.star-rating--search > a,
.star-rating > b,
.star-rating--search > b {
display: inline-block;
}
.star-rating > b,
.star-rating--search > b {
cursor: default;
}
.star-rating__star,
.star-rating__star--full,
.star-rating__star--half,
.star-rating__star--empty {
position: relative;
color: #dedede;
text-decoration: none !important;
font-size: 0;
}
.star-rating__star:hover,
.star-rating__star--full:hover,
.star-rating__star--half:hover,
.star-rating__star--empty:hover,
.star-rating__star:active,
.star-rating__star--full:active,
.star-rating__star--half:active,
.star-rating__star--empty:active,
.star-rating__star:focus,
.star-rating__star--full:focus,
.star-rating__star--half:focus,
.star-rating__star--empty:focus {
text-decoration: none;
}
/*--------------------------------------------------------------------
*
* SEARCH ITEM MAGNIFIER
* Styles for item magnifier popover.
*
--------------------------------------------------------------------*/
.magnifier {
color: hsl(0, 0%, 100%);
background: hsl(0, 0%, 20%);
border: 1px solid hsl(0, 0%, 0%);
box-sizing: content-box;
box-sizing: initial;
position: relative;
z-index: 9100;
padding: 0px 10px 7px;
text-align: left;
}
.magnifier .size-limiter {
margin-top: 10px;
background: #565656;
overflow: hidden
}
.magnifier .size-limiter img,
.magnifier .size-limiter video {
max-width: 100%;
}
/* This is a hack to fix the loader spinner position on List View. */
.magnifier .size-limiter .video-player {
position: relative;
}
/* Will fix this up soon (Jordan - July 25th 2017) */
.magnifier strong {
padding-top: 7px;
font: 16px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: hsl(0, 0%, 100%);
font-weight: bold;
display: block;
}
.magnifier .info,
.footer {
color: #686868;
font-size: 11px;
line-height: 18px;
overflow: hidden;
width: 100%;
}
.magnifier .author-category {
float: left;
}
.magnifier .price {
float: right;
margin-left: 20px;
font: 40px/40px 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: bold;
color: hsl(0, 0%, 100%);
}
.magnifier .price-period {
font-size: 12px;
font-weight: normal;
color: hsl(0, 0%, 70%);
}
.magnifier .price sup {
font-size: 23px;
top: 0;
vertical-align: 10px;
}
.magnifier .footer {
display: -ms-flexbox;
display: flex;
color: hsl(0, 0%, 70%);
}
.magnifier .category {
width: 50%;
}
.magnifier .gst-notice {
width: 50%;
text-align: right;
}
/*--------------------------------------------------------------------
*
* SEARCH ITEM GRID
* Styles for item grid layout.
*
--------------------------------------------------------------------*/
.product-grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 0 10px;
border: 1px solid #ededed;
border-width: 1px 0 0 1px;
border-bottom: 0;
height: 100%;
}
@media (min-width: 1152px) {
.product-grid {
border-width: 1px;
margin: 0 0 20px;
padding: 15px 0 0;
background: #f5f5f5;
border-radius: 4px;
}
}
.product-grid > li {
-ms-flex: 1 0;
flex: 0 0 50%;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
list-style: none;
position: relative;
text-align: center;
border: 1px solid #ededed;
border-width: 0 1px 1px 0;
padding: 10px 5px;
}
@media (min-width: 640px) {
.product-grid > li {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
}
.product-grid.product-grid--squeezed > li {
-ms-flex-preferred-size: 33.33333%;
flex-basis: 33.33333%;
}
}
@media (min-width: 832px) {
.product-grid > li {
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
}
.product-grid.product-grid--squeezed > li {
-ms-flex-preferred-size: 33.33333%;
flex-basis: 33.33333%;
}
}
@media (min-width: 960px) {
.product-grid > li {
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
}
.product-grid.product-grid--squeezed > li {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
}
}
@media (min-width: 1152px) {
.product-grid > li {
padding: 15px 5px 15px 5px;
border: 0;
border-bottom: 1px solid #e0e0e0;
-ms-flex-preferred-size: 12.5%;
flex-basis: 12.5%;
}
.product-grid.product-grid--squeezed > li {
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
}
}
.site-photodune .product-grid > li {
-webkit-align-items: flex-end;
-ms-flex-align: end;
-ms-grid-row-align: flex-end;
align-items: flex-end;
}
.product-grid__inside {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.product-grid__item-thumbnail-actions {
-ms-flex-order: 20;
order: 20;
}
@media (min-width: 1152px) {
.product-grid__item-thumbnail-actions {
-ms-flex-order: 2;
order: 2;
margin: 5px auto;
}
}
.product-grid__heading {
-ms-flex-order: 3;
order: 3;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 130px;
padding: 0;
font-weight: 700;
margin: 5px auto 0;
font-size: 12px;
color: hsl(0, 0%, 0%);
}
.product-grid__rating {
-ms-flex-order: 4;
order: 4;
}
.product-grid__price {
border-left: 1px solid #e0e0e0;
display: inline-block;
margin-bottom: 5px;
margin-left: 5px;
padding-left: 10px;
}
.product-grid__footer {
-ms-flex-order: 5;
order: 5;
margin-top: 5px;
}
.product-grid__footer a {
color: #ababab;
font-size: 12px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.product-grid__footer a:before {
background-image: url('/assets/images/sprite.png');
background-position: -154px -97px;
width: 14px;
height: 14px;
content: '';
display: inline-block;
position: relative;
top: 3px;
left: -5px;
}
/*--------------------------------------------------------------------
*
* SEARCH ITEM LIST
* Styles for item list layout.
*
--------------------------------------------------------------------*/
.product-list {
margin-bottom: 20px;
}
@media (min-width: 1152px) {
.product-list {
background: #f5f5f5;
border: 1px solid #ededed;
border-radius: 4px;
}
}
.product-list > li {
border-bottom: 1px solid #ededed;
list-style: none;
position: relative;
padding-top: 20px;
}
@media (min-width: 1152px) {
.product-list > li {
padding: 20px;
border-bottom: 1px solid #ededed;
}
}
.product-list > li:last-child {
border-bottom: none;
}
.product-list__columns-container {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
margin: 0 10%;
}
.product-list--squeezed .product-list__columns-container {
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0;
}
.product-list__column-detail {
-ms-flex: 1 0;
flex: 1 0;
}
@media (min-width: 1152px) {
.product-list__column-detail {
-ms-flex: 2 0;
flex: 2 0;
}
}
.product-list__column-category {
display: none;
}
@media (min-width: 1152px) {
.product-list__column-category {
display: block;
-ms-flex: 2 0;
flex: 2 0;
margin: 0 20px;
}
}
.product-list__column-price {
display: none;
}
@media (min-width: 1152px) {
.product-list__column-price {
display: block;
text-align: center;
-ms-flex: 1 0;
flex: 1 0;
min-width: 100px;
}
}
.product-list__item-thumbnail {
float: left;
line-height: 1;
margin-right: 10px;
}
@media (min-width: 1152px) {
.product-list__item-thumbnail {
margin: 0 20px 5px 0;
}
}
.product-list__adjacent-thumbnail {
float: left;
width: 50%;
width: calc(100% - 91px);
}
@media (min-width: 1152px) {
.product-list__adjacent-thumbnail {
width: calc(100% - 101px);
}
}
.product-list__heading,
.product-list__price {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
color: hsl(0, 0%, 0%);
overflow: hidden;
text-overflow: ellipsis;
}
@media (min-width: 640px) {
.product-list__heading,
.product-list__price {
font-size: 16px;
}
}
.product-list__heading {
padding-top: 0;
font-weight: bold;
line-height: 1.3;
position: relative;
top: -4px;
}
@media (min-width: 1152px) {
.product-list__price {
display: none;
}
}
.product-list__info {
float: left;
clear: left;
width: 100%;
font-size: 12px;
}
.product-list__info-author,
.product-list__info-rating,
.product-list__info-sale {
color: #ababab;
padding: 0 5px 5px 0;
}
@media (min-width: 1152px) {
.product-list__info-rating,
.product-list__info-sale {
display: none;
}
}
.product-list__info-sale {
position: relative;
top: -3px;
}
.product-list__info-sale-glyph {
display: inline-block;
margin-right: 4px;
}
.product-list__item-thumbnail-actions {
max-width: 200px;
margin-left: 70px;
}
@media (min-width: 1152px) {
.product-list__item-thumbnail-actions {
max-width: none;
margin-left: 0;
}
}
.product-list__price-desktop {
display: none;
}
@media (min-width: 1152px) {
.product-list__price-desktop {
display: block;
font-size: 32px;
line-height: 1;
padding: 0;
color: hsl(0, 0%, 0%);
}
}
.product-list__info-desktop {
display: none;
}
@media (min-width: 1152px) {
.product-list__info-desktop {
display: block;
margin-top: 10px;
font-size: 12px;
}
}
.product-list__sales-desktop {
margin-top: 5px;
}
/*--------------------------------------------------------------------
*
* SEARCH ITEM THUMBNAIL
* Styles for item thumbnail.
*
--------------------------------------------------------------------*/
.item-thumbnail {
position: relative;
display: inline-block;
}
.item-thumbnail_image img {
display: block;
max-width: 80px;
width: 80px;
height: 80px;
}
.site-photodune .item-thumbnail_image img {
width: auto;
height: auto;
}
.item-thumbnail__image {
position: relative;
overflow: hidden;
width: 80px;
height: 80px;
}
.item-thumbnail__link {
display: -ms-flexbox;
display: flex;
}
.item-thumbnail__preview-link {
font-size: 10px;
display: block;
}
.site-photodune .item-thumbnail__image {
width: auto;
height: auto;
}
.item-thumbnail__preview {
background: #82b541;
text-align: center;
position: absolute;
bottom: -25px;
right: 0;
left: 0;
transition: bottom 0.13s cubic-bezier(0.55, 0.085, 0.68, 0.53);
display: none;
}
@media (min-width: 1152px) {
.item-thumbnail__preview {
display: block;
}
}
.item-thumbnail__preview a {
color: hsl(0, 0%, 100%);
font-size: 10px !important;
text-decoration: none;
text-transform: uppercase;
padding: 5px 0;
white-space: nowrap;
}
.item-thumbnail__image:hover .item-thumbnail__preview, .item-thumbnail__image:focus .item-thumbnail__preview {
bottom: 0;
}
.item-thumbnail__image:hover .item-thumbnail__preview:hover, .item-thumbnail__image:focus .item-thumbnail__preview:focus {
background-color: #729d38;
}
.item-thumbnail-actions {
position: relative;
display: table;
width: 80px;
color: #bababa;
border-radius: 4px;
}
.item-thumbnail-actions .js-favorite-widget,
.item-thumbnail-actions .js-collection-widget {
transition: opacity, 2s;
opacity: 0;
}
.item-thumbnail-actions .js-favorite-widget.is-initialized,
.item-thumbnail-actions .js-collection-widget.is-initialized {
opacity: 1;
}
.item-thumbnail-actions.-color-inverted {
color: hsl(0, 0%, 100%);
background-color: transparent;
}
.item-thumbnail-actions.-video-search {
width: 90px;
}
.item-thumbnail-actions.-width-full {
margin: 0;
}
@media (max-width: 1151px) {
.item-thumbnail-actions.-width-full {
float: left;
margin: 0 0 5px;
width: 100%;
}
}
/*--------------------------------------------------------------------
*
* SEARCH ITEM LIST - BIG PREVIEW
* Styles for item list layout.
*
--------------------------------------------------------------------*/
.product-list--big-preview .meta-categories {
display: block;
margin: 20px 0;
}
.product-list--big-preview>li {
padding: 24px 0;
}
.product-list--big-preview .product-list__item-thumbnail-actions {
margin-left: 0;
}
.product-list--big-preview .product-list__adjacent-thumbnail {
width: calc(100% - 161px);
}
.product-list--big-preview .product-list__columns-container {
margin: 0;
}
@media (min-width: 960px) {
.product-list--big-preview .product-list__adjacent-thumbnail {
width: calc(100% - 311px);
}
}
.product-list--big-preview .item-thumbnail-actions {
font-size: 16px;
}
@media (max-width: 1151px) {
.product-list--big-preview>li:first-child {
padding-top: 0;
}
.product-list--big-preview .item-thumbnail-actions {
background: hsl(0, 0%, 95%);
}
}
@media (min-width: 1152px) {
.product-list--big-preview>li {
padding: 24px;
}
.product-list--big-preview .product-list__column-detail {
-ms-flex: 5 0;
flex: 5 0;
}
.product-list--big-preview .product-list__column-category {
margin: 0;
}
.product-list--big-preview .product-list__adjacent-thumbnail {
width: calc(100% - 321px);
}
}
/*--------------------------------------------------------------------
*
* SEARCH ITEM THUMBNAIL - BIG PREVIEW
* Styles for item thumbnail.
*
--------------------------------------------------------------------*/
.product-list--big-preview .item-thumbnail__link {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
color: transparent;
height: 100%;
width: 100%;
}
.product-list--big-preview .item-thumbnail__screenshot .item-thumbnail__link {
background-color: hsl(0, 0%, 10%);
}
.product-list--big-preview .item-thumbnail__marketing .item-thumbnail__link {
background-color: transparent;
}
.product-list--big-preview .item-thumbnail__marketing img {
border: 1px solid hsl(0, 0%, 60%);
}
.product-list--big-preview .item-thumbnail__screenshot.item-thumbnail__image {
border: 1px solid hsl(0, 0%, 60%);
}
.product-list--big-preview .item-thumbnail__screenshot {
width: 150px;
height: 140px;
}
.product-list--big-preview .item-thumbnail__marketing {
width: 150px;
height: 76px;
}
.product-list--big-preview .item-thumbnail__image img {
max-width: 100%;
max-height: 100%;
}
@media (min-width: 960px) {
.product-list--big-preview .item-thumbnail__screenshot {
width: 300px;
height: 280px;
}
.product-list--big-preview .item-thumbnail__marketing {
width: 300px;
height: 153px;
}
}
.studio-recommendations {
border: 1px solid hsl(0, 0%, 90%);
background-color: hsl(0, 0%, 95%);
border-radius: 4px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column
}
.studio-recommendations__list {
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.elements-promo {
margin-bottom: 52px;
margin-top: 60px;
background-color: #f93d66;
background: linear-gradient(
145deg,
#4772d9,
#5be0e0
);
border-radius: 4px
}
.elements-promo__wrapper {
padding: 20px;
background-color: hsl(0, 0%, 100%);
}
@media (min-width: 960px) {
.elements-promo__wrapper {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media (max-width: 639px) {
.elements-promo__wrapper {
text-align: center;
}
}
.elements-promo__copy-wrapper {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
margin: 16px 0;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
}
.elements-promo__image {
display: none;
}
@media (min-width: 960px) {
.elements-promo__image {
display: block;
}
}
.elements-promo__logo-white {
display: inline-block;
height: 22px;
width: 146px;
}
.elements-promo__content {
padding: 20px 35px;
}
.placeit-promo {
background-color: #5c28a7;
background-position: right center;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 52px;
margin-top: 60px;
border-radius: 4px
}
.placeit-promo__content {
padding: 25px 35px;
}
@media (max-width: 639px) {
.placeit-promo__content {
text-align: center;
}
}
.placeit-promo-gr {
}
@media (min-width: 1152px) {
.placeit-promo-gr {
background-image: url(/images/cross-promos/placeit-background-gr.jpg);
}
}
.placeit-promo-vh {
}
@media (min-width: 1152px) {
.placeit-promo-vh {
background-image: url(/images/cross-promos/placeit-background-vh.jpg);
}
}
.search-page-content-article__text-section {
color: hsl(0, 0%, 40%);
display: block;
}
.search-page-content__sidebar-spacer {
height: 1px;
}
.search-related-posts__post_list {
list-style: none;
max-width: 100%;
}
.search-related-posts__post {
position: relative;
float: left;
margin-right: 20px;
border: 1px solid #e1e8ed;
border-radius: 4px;
display: block;
margin-bottom: 15px;
}
.search-related-posts__post:last-child {
margin-right: 0px;
}
@media (min-width: 960px) {
.search-related-posts__post {
margin-bottom: 10px;
width: 242px;
min-height: 295px;
}
}
.search-related-posts__post-container {
width: 100%;
top: 0;
bottom: 0;
}
.search-related-posts__post-header {
display: block;
}
.search-related-posts__post-preview-link {
display: block;
width: 100%;
text-align: center;
overflow: hidden;
margin: 0 auto;
line-height: 0;
max-height: 207px;
width: 100%;
}
@media (min-width: 960px) {
.search-related-posts__post-preview-link {
max-height: 160px;
}
}
.search-related-posts__post-image {
border-bottom: 1px solid #e1e8ed;
border-radius: 4px 4px 0 0;
width: 100%;
}
@media (min-width: 960px) {
.search-related-posts__post-image {
height: 160px;
}
}
.search-related-posts__post-preview-title-link {
display: block;
margin: 10px 15px 0;
height: 80px;
max-height: 80px;
text-decoration: none;
}
.search-related-posts__post-details {
font-size: 12px;
line-height: 1.5;
}
.search-related-posts__post-teaser {
width: 100%;
padding: 0px 15px 0px 15px;
}
@media (min-width: 960px) {
.search-related-posts__post-teaser {
height: 160px;
overflow-y: hidden;
padding: 15px;
}
}
.search-related-posts__post-footer {
padding: 0px 5px 0px 5px;
bottom: 5px;
left: 0;
width: 100%;
min-height: 20px;
}
.search-related-posts__post-publication-meta {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
width: 100%;
}
.search-related-posts__post-author_photo {
height: 32px;
width: 32px;
border-radius: 50px;
}
.search-related-posts__post-details {
display: inline-block;
padding-left: 5px;
}
.search-related-posts__post-author {
display: block;
font-style: normal;
line-height: 1em;
}
.search-related-posts__post-author-link {
display: inline-block;
max-width: 175px;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-related-posts__post-author-link .fds-c-text-link {
display: inline-block;
}
.search-related-posts__post-primary-category {
float: right;
margin-top: -25px;
max-width: 85px;
text-align: right;
right: 23px;
color: #38a29f;
font-size: 12px;
text-transform: uppercase;
}
/*--------------------------------------------------------------------
*
* SEARCH FILTER CONTAINER
* Styles for search filter container box
*
--------------------------------------------------------------------*/
.search-facet-refine {
margin: 6px 0 12px;
color: #787878;
font-size: 14px;
}
@media (min-width: 1152px) {
.search-facet-refine {
margin-top: 0;
}
}
.search-facet,
.search-facet--no-margin {
margin-bottom: 20px;
position: relative;
}
.search-facet--no-margin {
margin-bottom: 0;
}
.search-facet-header,
.search-facet-header--horizontal {
position: relative;
}
.search-facet-header > h2,
.search-facet-header--horizontal > h2 {
display: inline-block;
pointer-events: none;
position: absolute;
top: 10px;
left: 10px;
padding: 0 0 10px;
font-size: 14px;
font-weight: bold;
line-height: normal;
color: #454545;
}
.search-facet-header > h2 > span,
.search-facet-header--horizontal > h2 > span {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.search-facet-header--horizontal > h2 {
top: 5px;
left: 0;
}
.search-facet-result-count {
color: hsl(0, 0%, 70%);
font-size: 12px;
}
.search-facet-box,
.search-facet-box--start,
.search-facet-box--end {
padding-top: 15px;
background: #f5f5f5;
border: 1px solid #e0e0e0;
border-top-width: 0;
}
.search-facet-box--start {
border-top-width: 1px;
border-radius: 5px 5px 0 0;
}
.search-facet-box--end {
border-radius: 0 0 5px 5px;
}
.search-facet-box input,
.search-facet-box--start input {
font-size: 14px;
}
.search-facet-box__heading {
font-size: 14px;
font-weight: 400;
margin-bottom: 10px;
}
.search-facet-box__heading > i {
color: #454545;
}
.search-facet-box__inner {
padding: 0 10px 15px;
}
.search-facet-horizontal-form {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1152px) {
.search-facet-horizontal-form {
margin-top: -7px;
}
}
.search-facet-layout-switcher {
display: inline-block;
height: 100%;
}
.search-facet-boolean {
display: -ms-flexbox;
display: flex;
-ms-flex-align: baseline;
align-items: baseline;
padding: 10px;
border-radius: 4px;
color: #666;
cursor: pointer
}
.search-facet-boolean:hover, .search-facet-boolean:focus {
background: hsl(0, 0%, 90%);
}
._3DXap:after, ._2tqY8:after {
background-color: hsl(196, 90%, 36%);
}
._3DXap:hover, ._2tqY8:hover {
color: hsl(196, 90%, 36%);
}
._3DXap:after, ._2tqY8:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
._3DXap:focus, ._2tqY8:focus {
outline: none;
}
._1ueYh:after {
background-color: hsl(196, 90%, 36%);
}
._1ueYh:hover {
color: hsl(196, 90%, 36%);
}
._1ueYh:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
._1ueYh:focus {
outline: none;
}/*--------------------------------------------------------------------
*
* PhotoDune Hero Text
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
._1B7oV,
._V6qk {
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
color: hsl(0, 0%, 20%);
-webkit-font-smoothing: subpixel-antialiased;
font-size: 14px;
color: hsl(0, 0%, 40%);
margin-top: 16px;
}
._32DSt {
margin-top: 16px;
}
._2AqEv,
._3hUzI {
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
color: hsl(0, 0%, 20%);
-webkit-font-smoothing: subpixel-antialiased;
margin: 16px 8px 0 0;
font-size: 14px;
color: hsl(0, 0%, 40%);
font-weight: 400;
}
._2AqEv,
._3hUzI,
._1ueYh {
display: inline;
}
.THBgq {
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
color: hsl(0, 0%, 20%);
-webkit-font-smoothing: subpixel-antialiased;
margin: 16px 8px 0 0;
font-size: 14px;
color: hsl(0, 0%, 40%);
font-weight: 400;
}
._1ueYh {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
color: hsl(196, 90%, 31%);
font-size: 14px;
font-weight: 400;
text-decoration: none;
-moz-osx-font-smoothing: grayscale
}
._1ueYh:hover {
text-decoration: none;
}
._1ueYh:hover:after, ._1ueYh:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
._3DXap,
._2tqY8 {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
color: hsl(196, 90%, 31%)
}
._3DXap:hover, ._2tqY8:hover {
text-decoration: none;
}
._3DXap:hover:after, ._2tqY8:hover:after, ._3DXap:focus:after, ._2tqY8:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
.NkhlX {
z-index: 2;
position: relative
}
@media (max-width: 1151px) {
.NkhlX {
margin: 0 16px;
padding: 32px 0 8px 0
}
}
@media (min-width: 1152px) {
.NkhlX {
max-width: 1408px;
margin: 0 auto 8px;
padding: 32px 16px 0 16px
}
}
/*--------------------------------------------------------------------
*
* PhotoDune Pages containers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._1kv1j {
}
@media (max-width: 831px) {
._1kv1j {
border-top: 0
}
}
@media (max-width: 1151px) {
._1kv1j {
margin: 0 16px;
padding: 16px 0 16px 0
}
}
@media (min-width: 1152px) {
._1kv1j {
max-width: 1408px;
margin: 0 auto 8px;
padding: 16px 16px 0 16px
}
}
._1k_ws:after {
content: '';
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transform: translateY(1px);
transition: 0.15s all cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: opacity, transform;
width: 100%;
}
._1k_ws:focus {
outline: none;
}/*--------------------------------------------------------------------
*
* Custom-tokens.css
* Custom tokens (variables) for PhotoDune redesign.
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* PhotoDune Pages containers
*
--------------------------------------------------------------------*/
/*--------------------------------------------------------------------
*
* Custom-media.css
* Custom media queries.
*
--------------------------------------------------------------------*/
/*
breakpoint--s 640px
breakpoint--m 832px
breakpoint--l 960px
breakpoint--xl 1152px
breakpoint--xxl 1408px
NOTE: Variables currently do not work with @custom-media. Hardcoding values for now;
*/
._3Zhwu {
}
@media (max-width: 831px) {
._3Zhwu {
border-top: 0;
}
}
@media (max-width: 1151px) {
._3Zhwu {
margin: 0 16px;
padding: 16px 0 16px 0;
}
}
@media (min-width: 1152px) {
._3Zhwu {
max-width: 1408px;
margin: 0 auto 8px;
padding: 16px 16px 0 16px;
}
}
._3aKCG {
background-color: hsl(0, 0%, 98%);
}
._3xc9G {
}
@media (max-width: 639px) {
._3xc9G {
overflow: hidden;
}
}
._1Dz4s {
margin-top: 5px;
margin-bottom: 10px;
}
._1k_ws {
font-family: -apple-system, BlinkMacSystemFont, segoe ui,
avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, arial,
sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: underline;
color: hsl(0, 0%, 70%);
cursor: pointer;
position: relative;
display: inline-block;
text-decoration: none;
font-size: 14px;
color: hsl(0, 0%, 60%);
font-weight: 700;
}
._1k_ws:hover {
text-decoration: none;
}
._1k_ws:hover:after, ._1k_ws:focus:after {
opacity: 1;
transition-delay: 0.2s;
transition-duration: 0.15s;
transform: translateY(-3px) translateZ(0);
}
.jZJpc {
margin-left: 10px;
}
._2nZ4X {
max-width: 1408px;
margin: 0 auto;
padding: 8px 16px 0 16px;
}
.-XCzH {
position: absolute;
display: block;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: hsl(0, 0%, 100%);
min-height: 500px;
text-align: center;
margin-top: 32px;
padding-top: 32px;
}
.no-js .loadingContainer {
display: none;
}
/*# sourceMappingURL=styles-02ca655749359157f86a.css.map*/
/*css chen them*/
.zoom-image:hover, .zoom-image:focus {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.2);
transition: .5s;
}