#viewport-emitter { overflow: hidden; position: absolute; top: 0; left: 0; width: 0; height: 0; visibility: hidden; z-index: -1; x-content: "large"
}
#viewport-emitter::before { content: "large"
} @media only screen and (min-width: 1442px) {
#viewport-emitter { x-content: "xlarge"
}
#viewport-emitter::before { content: "xlarge"
}
} @media only screen and (max-width: 1068px) {
#viewport-emitter { x-content: "medium"
}
#viewport-emitter::before { content: "medium"
}
} @media only screen and (max-width: 735px) {
#viewport-emitter { x-content: "small"
}
#viewport-emitter::before { content: "small"
}
}
.card-hero { z-index: 1
}
.card-detail, .card-detail-content { z-index: 1
}
.card-fade { z-index: 2
}
.expand-setup .card-detail, .expand-setup .card-detail-content, .expand-complete .card-detail, .expand-complete .card-detail-content, .collapse-setup .card-detail, .collapse-setup .card-detail-content { z-index: 3
}
.card-trigger { z-index: 10
}
.card-trigger .trigger-clip { z-index: 10
}
.card-fade.exit-active { z-index: 11
}
.card { overflow: visible; background-color: transparent
}
.card-hero { overflow: visible; position: relative; width: 100%
}
.card-hero .card-hero-content { overflow: hidden
}
.card-detail { overflow: visible; position: relative; width: 100%; display: none
}
html.no-js .card-detail { display: block
}
.card-detail .card-detail-content { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; visibility: hidden; background-color: #fff
}
html.no-js .card-detail .card-detail-content { position: relative; visibility: visible
}
.card-fade { pointer-events: none; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; visibility: hidden; background-color: #000; opacity: 0
}
html.no-js .card-fade { display: none
}
html.no-css-transform3d .card-fade { display: none
}
.card-fade.exit-active { visibility: visible; -webkit-transition-property: none; transition-property: none
}
.expand-complete .card-detail, .card-detail-visible .card-detail { display: block
}
.expand-setup { overflow: visible; -webkit-transform: translateZ(0); transform: translateZ(0)
}
.expand-setup .card-detail-content { visibility: visible
}
.expand-complete .card-detail-content { position: relative; visibility: visible
}
.collapse-setup { overflow: visible; -webkit-transform: translateZ(0); transform: translateZ(0)
}
.collapse-setup .card-detail-content { position: absolute; left: 0; width: 100%; visibility: visible; -webkit-transform: translateZ(0); transform: translateZ(0)
}
.card-trigger { visibility: visible; overflow: visible; display: block; position: absolute; width: 100%; opacity: 0.999; -webkit-tap-highlight-color: transparent; -ms-touch-action: manipulation; touch-action: manipulation
}
html.no-js .card-trigger { display: none
}
html.no-css-transform3d .card-trigger { display: none
}
.card-trigger:focus .card-trigger-icon { -webkit-backdrop-filter: none; backdrop-filter: none
}
.card-trigger-label, .card-trigger-clip, .card-trigger-icon { -webkit-transition-property: opacity, -webkit-transform, color, background-color; transition-property: opacity, transform, color, background-color; -webkit-transition-duration: 1s, 1s, .35s, .35s; transition-duration: 1s, 1s, .35s, .35s; -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.48, 1), cubic-bezier(0.6, 0, 0.48, 1), linear, linear; transition-timing-function: cubic-bezier(0.6, 0, 0.48, 1), cubic-bezier(0.6, 0, 0.48, 1), linear, linear; -webkit-transition-delay: 0s; transition-delay: 0s
}
.card-trigger-label::-moz-selection, .card-trigger-clip::-moz-selection, .card-trigger-icon::-moz-selection {
color:transparent;
background-color:transparent
}
.card-trigger-label::selection, .card-trigger-clip::selection, .card-trigger-icon::selection { color: transparent; background-color: transparent
}
.card-trigger-label::-moz-selection, .card-trigger-clip::-moz-selection, .card-trigger-icon::-moz-selection {
color:transparent;
background-color:transparent
}
.card-trigger-label, .card-trigger-clip { opacity: 0.999
}
.not-engaged .card-trigger-label, .not-engaged .card-trigger-clip { -webkit-transform: translate3d(0, 35px, 1px); transform: translate3d(0, 35px, 1px); -webkit-transition: none; transition: none; opacity: 0.001
}
.card-trigger-clip, .card-trigger-icon { width: 34px; height: 34px
}
.card-trigger-label { text-align: center; margin-left: auto; margin-right: auto; font-size: 14px; line-height: 1.5; font-weight: 600; letter-spacing: -.01em; font-family: var(--camara-site-font-family); display: table; margin: 0 auto 8px; letter-spacing: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 0.999
}
.card-trigger-label:lang(ar) { letter-spacing: 0em; font-family: var(--camara-site-font-family)
}
.card-trigger-label:lang(ja) { letter-spacing: 0em; font-family: var(--camara-site-font-family)
}
.card-trigger-label:lang(ko) { letter-spacing: 0em; font-family: var(--camara-site-font-family)
}
.card-trigger-label:lang(th) { letter-spacing: 0em; font-family: var(--camara-site-font-family)
}
.card-trigger-label:lang(zh) { letter-spacing: 0em
}
.card-trigger-label:lang(zh-CN) { font-family: var(--camara-site-font-family)
}
.card-trigger-label:lang(zh-HK) { font-family: var(--camara-site-font-family)
}
.card-trigger-label:lang(zh-MO) { font-family: var(--camara-site-font-family)
}
.card-trigger-label:lang(zh-TW) { font-family: var(--camara-site-font-family)
}
.card-trigger-clip { display: block; overflow: hidden; position: relative; margin: 0 auto; border-radius: 17px; -webkit-transition-delay: 0.1s; transition-delay: 0.1s
}
.card-trigger-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center
}
.card-trigger-icon svg { width: 14px; height: 14px; -webkit-transform: rotate(0deg); transform: rotate(0deg)
}
.card-trigger-expand { bottom: 70px
} @media only screen and (max-width: 1068px) {
.card-trigger-expand { bottom: 60px
}
} @media only screen and (max-width: 735px) {
.card-trigger-expand { bottom: 50px
}
}
.card-trigger-expand .card-trigger-label { -webkit-transition-property: opacity, -webkit-transform, color; transition-property: opacity, transform, color; -webkit-transition-duration: 1s, 1s, .35s; transition-duration: 1s, 1s, .35s; -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.48, 1); transition-timing-function: cubic-bezier(0.6, 0, 0.48, 1); -webkit-transition-delay: 0s; transition-delay: 0s
}
.card-trigger-expand .card-trigger-clip { visibility: visible
}
.card-trigger-expand.card-trigger-stuck-exists .card-trigger-label, .card-trigger-expand.card-trigger-stuck-exists .card-trigger-icon { opacity: 0.001
}
.card-trigger-collapse { pointer-events: none; display: none; top: 36px; padding-top: 16px; padding-bottom: 16px; opacity: 0.001
} @media only screen and (max-width: 1068px) {
.card-trigger-collapse { top: 21px
}
} @media only screen and (max-width: 735px) {
.card-trigger-collapse { top: 21px
}
}
.card-trigger-collapse .card-trigger-clip, .card-trigger-collapse .card-trigger-icon { -webkit-transition: opacity, -webkit-transform, color, background-color; transition: opacity, transform, color, background-color; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.48, 1); transition-timing-function: cubic-bezier(0.6, 0, 0.48, 1); -webkit-transition-delay: 0s; transition-delay: 0s
}
.card-trigger-collapse .card-trigger-label { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0
}
.card-trigger-collapse .card-trigger-clip { -webkit-transform: translate3d(0, -156px, 0); transform: translate3d(0, -156px, 0)
} @media only screen and (max-width: 1068px) {
.card-trigger-collapse .card-trigger-clip { -webkit-transform: translate3d(0, -131px, 0); transform: translate3d(0, -131px, 0)
}
} @media only screen and (max-width: 735px) {
.card-trigger-collapse .card-trigger-clip { -webkit-transform: translate3d(0, -121px, 0); transform: translate3d(0, -121px, 0)
}
}
.card-trigger-collapse .card-trigger-fixed-placeholder { position: fixed
}
html.no-css-backdrop-filter .card-trigger-collapse { left: 50%; width: 66px; margin-left: -33px
}
.expand-animation-ready .card-trigger-expand .card-trigger-label, .expand-complete .card-trigger-expand .card-trigger-label, .collapse-setup:not(.collapse-animation-ready) .card-trigger-expand .card-trigger-label { -webkit-transform: translate3d(0, -40px, 0); transform: translate3d(0, -40px, 0); opacity: 0.001
}
.expand-animation-ready .card-trigger-collapse .card-trigger-clip, .expand-start .card-trigger-collapse .card-trigger-clip, .expand-complete .card-trigger-collapse .card-trigger-clip { pointer-events: auto; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)
}
html.no-css-backdrop-filter .expand-animation-ready .card-trigger-collapse, html.no-css-backdrop-filter .expand-start .card-trigger-collapse, html.no-css-backdrop-filter .expand-complete .card-trigger-collapse { pointer-events: auto
}
.expand-setup .card-trigger-expand .card-trigger-clip, .expand-complete .card-trigger-expand .card-trigger-clip, .collapse-setup .card-trigger-expand .card-trigger-clip, .collapse-start .card-trigger-expand .card-trigger-clip { visibility: hidden; -webkit-transition: none; transition: none
}
.expand-setup .card-trigger-expand .card-trigger-icon, .expand-complete .card-trigger-expand .card-trigger-icon, .collapse-setup .card-trigger-expand .card-trigger-icon, .collapse-start .card-trigger-expand .card-trigger-icon { -webkit-backdrop-filter: none; backdrop-filter: none
}
.expand-setup .card-trigger-collapse, .expand-complete .card-trigger-collapse, .collapse-setup .card-trigger-collapse, .collapse-start .card-trigger-collapse { opacity: 0.999
}
.expand-setup .card-trigger-collapse .card-trigger-clip, .expand-complete .card-trigger-collapse .card-trigger-clip, .collapse-setup .card-trigger-collapse .card-trigger-clip, .collapse-start .card-trigger-collapse .card-trigger-clip { -webkit-transition: opacity, -webkit-transform, background-color; transition: opacity, transform, background-color; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.48, 1); transition-timing-function: cubic-bezier(0.6, 0, 0.48, 1); -webkit-transition-delay: 0s; transition-delay: 0s
}
.expand-setup .card-trigger-collapse .card-trigger-icon svg, .expand-complete .card-trigger-collapse .card-trigger-icon svg, .collapse-setup .card-trigger-collapse .card-trigger-icon svg, .collapse-start .card-trigger-collapse .card-trigger-icon svg { -webkit-transition: -webkit-transform fill; transition: transform fill; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.48, 1); transition-timing-function: cubic-bezier(0.6, 0, 0.48, 1); -webkit-transition-delay: 0s; transition-delay: 0s
}
.expand-setup .card-trigger-collapse.card-trigger-transition-start, .expand-complete .card-trigger-collapse.card-trigger-transition-start, .collapse-setup .card-trigger-collapse.card-trigger-transition-start, .collapse-start .card-trigger-collapse.card-trigger-transition-start { -webkit-transition: opacity 0.2s linear 0s; transition: opacity 0.2s linear 0s; opacity: 0.001
}
.expand-start .card-trigger-collapse .card-trigger-icon svg, .expand-complete .card-trigger-collapse .card-trigger-icon svg { -webkit-transform: rotate(45deg); transform: rotate(45deg)
}
.expand-complete .card-trigger-expand { display: none
}
.expand-complete .card-trigger-collapse { display: block
}
.expand-complete .card-trigger-collapse .card-trigger-icon { -webkit-clip-path: circle(17px at 17px 17px); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px)
}
.expand-setup .card-trigger-collapse { display: block
}
.collapse-setup .card-trigger-expand, .collapse-setup .card-trigger-collapse { display: block
}
.collapse-animation-ready .card-trigger-expand .card-trigger-label, .collapse-start .card-trigger-expand .card-trigger-label { -webkit-transition-duration: .78s; transition-duration: .78s; -webkit-transition-delay: 0.22s; transition-delay: 0.22s
}
.collapse-animation-ready .card-trigger-collapse.card-trigger-stuck-top, .collapse-animation-ready .card-trigger-collapse.card-trigger-stuck-bottom, .collapse-start .card-trigger-collapse.card-trigger-stuck-top, .collapse-start .card-trigger-collapse.card-trigger-stuck-bottom { opacity: 0.001
}
html.touch .collapse-animation-ready .card-trigger-collapse .card-trigger-clip, html.touch .collapse-start .card-trigger-collapse .card-trigger-clip { -webkit-transition-delay: 0.9s; transition-delay: 0.9s
}
.expand-start .card-trigger.card-trigger-collapse .card-trigger-icon, .expand-complete .card-trigger.card-trigger-collapse .card-trigger-icon { background-color: rgba(210,210,210,0.8)
}
.expand-start .card-trigger.card-trigger-collapse .card-trigger-icon svg, .expand-complete .card-trigger.card-trigger-collapse .card-trigger-icon svg { fill: #fff
}
html.css-backdrop-filter .expand-start .card-trigger.card-trigger-collapse .card-trigger-icon, html.css-backdrop-filter .expand-complete .card-trigger.card-trigger-collapse .card-trigger-icon { background-color: rgba(150,150,150,0.3)
}
.expand-complete .card-trigger.card-trigger-stuck-top, .collapse-setup .card-trigger.card-trigger-stuck-top { position: fixed; top: 57px
} @media only screen and (max-width: 1068px) {
.expand-complete .card-trigger.card-trigger-stuck-top, .collapse-setup .card-trigger.card-trigger-stuck-top { top: 57px
}
} @media only screen and (max-width: 735px) {
.expand-complete .card-trigger.card-trigger-stuck-top, .collapse-setup .card-trigger.card-trigger-stuck-top { top: 53px
}
}
.expand-complete .card-trigger.card-trigger-stuck-bottom, .collapse-setup .card-trigger.card-trigger-stuck-bottom { position: absolute; top: auto; bottom: 54px
} @media only screen and (max-width: 1068px) {
.expand-complete .card-trigger.card-trigger-stuck-bottom, .collapse-setup .card-trigger.card-trigger-stuck-bottom { bottom: 44px
}
} @media only screen and (max-width: 735px) {
.expand-complete .card-trigger.card-trigger-stuck-bottom, .collapse-setup .card-trigger.card-trigger-stuck-bottom { bottom: 34px
}
}
.expand-complete .card-trigger-collapse .card-trigger-clip { visibility: visible; opacity: 0.999; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: 'opacity', 'transform'; transition-property: 'opacity', 'transform'; -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.48, 1); transition-timing-function: cubic-bezier(0.6, 0, 0.48, 1)
}
.expand-complete .card-trigger-hide { visibility: hidden
}
.expand-complete .card-trigger-hide .card-trigger-clip { opacity: 0.001; -webkit-transform: translate3d(0, -88px, 0) rotate(45deg); transform: translate3d(0, -88px, 0) rotate(45deg)
} @media only screen and (max-width: 1068px) {
.expand-complete .card-trigger-hide .card-trigger-clip { -webkit-transform: translate3d(0, -73px, 0) rotate(45deg); transform: translate3d(0, -73px, 0) rotate(45deg)
}
} @media only screen and (max-width: 735px) {
.expand-complete .card-trigger-hide .card-trigger-clip { -webkit-transform: translate3d(0, -69px, 0) rotate(45deg); transform: translate3d(0, -69px, 0) rotate(45deg)
}
}
[data-card-additional-trigger] { cursor: pointer
}
.has-modal { overflow: hidden
}
.has-modal-full-viewport { position: fixed; width: 100%; height: 100%; overflow: hidden
}
.has-modal-full-viewport body { height: 100%; overflow: hidden
}
.has-modal-full-viewport:-webkit-full-screen-ancestor:not(iframe) .globalheader, .has-modal-full-viewport:-webkit-full-screen-ancestor:not(iframe) .localnav-wrapper, .has-modal-full-viewport:-webkit-full-screen-ancestor:not(iframe) .localnav {
visibility:hidden
}
.modal { position: fixed; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; visibility: hidden
}
.modal-standard { overflow: auto; padding: 54px 0; background: rgba(0,0,0,0.6)
}
.modal-standard .content-table { display: table; width: 100%; height: 100%
}
.modal-standard .content-cell { display: table-cell; vertical-align: middle
}
.modal-standard .content-wrapper { margin-left: auto; margin-right: auto; width: 980px
} @media only screen and (min-width: 1442px) {
.modal-standard .content-wrapper { margin-left: auto; margin-right: auto; width: 980px
}
} @media only screen and (max-width: 1068px) {
.modal-standard .content-wrapper { margin-left: auto; margin-right: auto; width: 692px
}
} @media only screen and (max-width: 735px) {
.modal-standard .content-wrapper { margin-left: auto; margin-right: auto; width: 87.5%
}
}
.modal-standard .content-padding { margin-left: auto; margin-right: auto; position: relative; z-index: 1; padding: 80px 8.33333%; background: #fff
} @media only screen and (max-width: 735px) {
.modal-standard .content-padding { padding-top: 60px; padding-bottom: 60px
}
} @media only screen and (max-width: 735px) {
.modal-standard .modal-close { left: 8.33333%
}
}
.modal-full-viewport { background: #fff
}
.modal-open { visibility: visible; z-index: 9999
}
.modal-close { position: absolute; z-index: 9999; top: 28px; left: 28px; margin: 0; padding: 0; font-size: 30px; line-height: 1; width: 30px; height: 30px; cursor: pointer; background: none; border: 0; color: #888
}
.modal-close:before, .modal-close:after { font-family: var(--camara-site-font-family); color: inherit; display: inline-block; font-style: normal; font-weight: inherit; font-size: inherit; line-height: 1; text-decoration: underline; position: relative; z-index: 1; alt: ''
}
.modal-close:before, .modal-close:after { text-decoration: none
}
.modal-close:before { display: none
}
.modal-close:before, .modal-close:after { content: ""
}
.modal-close::after { padding: 0; vertical-align: top
} @media only screen and (max-width: 1068px) {
.modal-close { top: 22px; left: 22px; font-size: 28px; width: 28px; height: 28px
}
}
.has-modal { overflow: hidden
}
.has-modal-full-viewport { position: fixed; width: 100%; height: 100%; overflow: hidden
}
.has-modal-full-viewport body { height: 100%; overflow: hidden
}
.has-modal-full-viewport:-webkit-full-screen-ancestor:not(iframe) .globalheader, .has-modal-full-viewport:-webkit-full-screen-ancestor:not(iframe) .localnav-wrapper, .has-modal-full-viewport:-webkit-full-screen-ancestor:not(iframe) .localnav {
visibility:hidden
}
.modal { position: fixed; z-index: -1; left: 0; right: 0; top: 0; bottom: 0; visibility: hidden
}
.modal-standard { overflow: auto; padding: 54px 0; background: rgba(0,0,0,0.6)
}
.modal-standard .content-table { display: table; width: 100%; height: 100%
}
.modal-standard .content-cell { display: table-cell; vertical-align: middle
}
.modal-standard .content-wrapper { margin-left: auto; margin-right: auto; width: 980px
} @media only screen and (min-width: 1442px) {
.modal-standard .content-wrapper { margin-left: auto; margin-right: auto; width: 980px
}
} @media only screen and (max-width: 1068px) {
.modal-standard .content-wrapper { margin-left: auto; margin-right: auto; width: 692px
}
} @media only screen and (max-width: 735px) {
.modal-standard .content-wrapper { margin-left: auto; margin-right: auto; width: 87.5%
}
}
.modal-standard .content-padding { margin-left: auto; margin-right: auto; position: relative; z-index: 1; padding: 80px 8.33333%; background: #fff
} @media only screen and (max-width: 735px) {
.modal-standard .content-padding { padding-top: 60px; padding-bottom: 60px
}
} @media only screen and (max-width: 735px) {
.modal-standard .modal-close { left: 8.33333%
}
}
.modal-full-viewport { background: #fff
}
.modal-open { visibility: visible; z-index: 9999
}
.modal-close { position: absolute; z-index: 9999; top: 28px; left: 28px; margin: 0; padding: 0; font-size: 30px; line-height: 1; width: 30px; height: 30px; cursor: pointer; background: none; border: 0; color: #888
}
.modal-close:before, .modal-close:after { font-family: var(--camara-site-font-family); color: inherit; display: inline-block; font-style: normal; font-weight: inherit; font-size: inherit; line-height: 1; text-decoration: underline; position: relative; z-index: 1; alt: ''
}
.modal-close:before, .modal-close:after { text-decoration: none
}
.modal-close:before { display: none
}
.modal-close:before, .modal-close:after { content: ""
}
.modal-close::after { padding: 0; vertical-align: top
} @media only screen and (max-width: 1068px) {
.modal-close { top: 22px; left: 22px; font-size: 28px; width: 28px; height: 28px
}
}
.b-sticky { position: -webkit-sticky; position: sticky
}
.b-sticky.shimmed-sticky.is-sticking { margin-top: 0 !important; margin-bottom: 0 !important; position: fixed
}
.b-sticky.shimmed-sticky.is-stuck { position: absolute
}
.b-placeholder-container { position: relative; z-index: -1
}
.b-placeholder-container .b-sticky-placeholder { display: block; visibility: hidden; position: absolute; z-index: -1
}
.b-placeholder-container .b-sticky-placeholder.is-holding-place.shimmed-sticky { position: static
}
.cards-wrapper { position: relative; z-index: 2
}
.ie .card-fade { display: none
}
.card-trigger-icon svg, .card-trigger-icon polygon { pointer-events: none
}
html.touch .card-trigger-expand .card-trigger-label, html.touch .card-trigger-expand .card-trigger-clip, html.touch .card-trigger-expand .card-trigger-icon { pointer-events: none
}
.card-hero { height: 102vh; min-height: 835px; background-color: #333; background-size: cover; background-position: 50% 50%; box-sizing: border-box
} @media only screen and (max-width: 1068px) {
.card-hero { min-height: 735px
}
} @media only screen and (max-width: 735px) {
.card-hero { height: auto; min-height: auto; background: -webkit-linear-gradient(top, #131313 0px, #000 80px) !important; background: linear-gradient(to bottom, #131313 0px, #000 80px) !important
}
}
.tablet .card-hero { max-height: 1024px
} @media only screen and (max-width: 735px) {
.tablet .card-hero { max-height: none
}
}
.card-hero .card-hero-content { height: 100%; position: relative
}
.ie8 .card-hero .card-hero-content { overflow: visible
} @media only screen and (max-width: 735px) {
.card-hero .card-hero-content { height: auto
}
}
.card-hero .copy-wrapper { width: 540px; top: 50%; position: absolute; padding-bottom: 148px; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #fff
} @media only screen and (min-width: 1442px) {
.card-hero .copy-wrapper { margin-left: -140px
}
} @media only screen and (max-width: 1068px) {
.card-hero .copy-wrapper { width: 400px
}
} @media only screen and (max-width: 735px) {
.card-hero .copy-wrapper { position: relative; top: auto; padding-top: 0px; -webkit-transform: translateY(0); transform: translateY(0); width: 100%
}
}
.ie8 .card-hero .copy-wrapper { top: 100px
}
.card-hero .copy-wrapper .cta { color: #fff
}
.card-hero .image-card-hero { display: none
}
.card-hero .image-card-hero+p { margin-top: 0.7em
} @media only screen and (max-width: 735px) {
.card-hero .image-card-hero { display: block; margin: 40px 0; width: 114%; margin-left: -7%; height: 0; padding-bottom: 100%; box-sizing: border-box
}
}
.card-hero .watch-the-film { color: #fff
}
.card-hero .watch-the-film:hover { color: #fff; text-decoration: underline
}
.camara-generated-service-section { --camara-service-copy-color: #fff
}
.camara-generated-service-section[data-camara-text-color="black"] { --camara-service-copy-color: #000
}
.camara-generated-service-section[data-camara-text-color="white"] { --camara-service-copy-color: #fff
}
.camara-generated-service-section .card-hero .copy-wrapper, .camara-generated-service-section .card-hero .copy-wrapper .section-headline, .camara-generated-service-section .card-hero .copy-wrapper .section-headline span, .camara-generated-service-section .card-hero .copy-wrapper .eyebrow, .camara-generated-service-section .card-hero .copy-wrapper p, .camara-generated-service-section .card-hero .copy-wrapper .cta, .camara-generated-service-section .card-hero .watch-the-film, .camara-generated-service-section .card-hero .watch-the-film:hover { color: var(--camara-service-copy-color)
} @media only screen and (max-width: 1068px) {
.camara-generated-service-section.camara-work-empty-section .card-hero { min-height: auto
}
.camara-generated-service-section.camara-work-empty-section .card-hero .copy-wrapper { padding-bottom: 0 !important
}
} @media only screen and (max-width: 735px) {
.camara-generated-service-section[data-camara-has-image="0"] .card-hero .image-card-hero { display: none; margin: 0; width: 0; height: 0; padding-bottom: 0
}
.camara-generated-service-section[data-camara-has-image="1"] .card-hero .image-card-hero { display: block
}
.page-overview .camara-generated-service-section .card-detail-content { background: #ffffff; padding-top: 0; padding-right: 0; padding-left: 0; padding-bottom: 122px
}
.camara-generated-service-section.camara-work-empty-section .card-hero .copy-wrapper { padding-bottom: 0 !important
}
.camara-generated-service-section.camara-work-empty-section .card-hero .inner > [data-card-trigger="expand"] { display: none !important
}
.page-overview .card-hero .copy-wrapper, .page-overview .card-hero .copy-wrapper .section-headline, .page-overview .card-hero .copy-wrapper .section-headline span, .page-overview .card-hero .copy-wrapper .eyebrow, .page-overview .card-hero .copy-wrapper p { color: #000
}
.page-overview .card-hero .copy-wrapper p .camara-char-block { background: transparent; color: #000; padding: 0
}
}
.card-detail-content { background: #fff; padding-top: 195px; padding-bottom: 200px
} @media only screen and (max-width: 1068px) {
.card-detail-content { padding-top: 155px; padding-bottom: 150px;
}
} @media only screen and (max-width: 735px) {
.card-detail-content { padding-top: 115px; padding-bottom: 100px;
}
}
.ie .card-detail-content { position: relative; visibility: visible
}
.card-trigger .card-trigger-label { color: #fff;
}
.card-trigger .card-trigger-icon { background-color: #fff
}
.card-trigger .card-trigger-icon svg { fill: #000
}
html.no-touch .card-trigger.card-trigger-expand:hover .card-trigger-label { color: #fff
}
html.no-touch .card-trigger.card-trigger-expand:hover .card-trigger-icon { background-color: #fff
}
@media only screen and (max-width: 735px) {
.page-overview .card-hero .copy-wrapper { background-color: #fff
}
.card-trigger .card-trigger-label { color: #636466;
}
.card-trigger .card-trigger-icon { background-color: #636466
}
.card-trigger .card-trigger-icon svg { fill: #fff
}
html.no-touch .card-trigger.card-trigger-expand:hover .card-trigger-label { color: #000
}
html.no-touch .card-trigger.card-trigger-expand:hover .card-trigger-icon { background-color: #000
}
}
html.no-touch .expand-setup .card-trigger.card-trigger-expand:hover .card-trigger-label, html.no-touch .expand-start .card-trigger.card-trigger-expand:hover .card-trigger-label, html.no-touch .collapse-setup .card-trigger.card-trigger-expand:hover .card-trigger-label, html.no-touch .collapse-start .card-trigger.card-trigger-expand:hover .card-trigger-label { color: #ff365d
}
.card-trigger .card-trigger-icon { -webkit-transition-property: opacity, -webkit-transform, color, background-color, box-shadow; transition-property: opacity, transform, color, background-color, box-shadow; -webkit-transition-duration: 1s, 1s, .35s, .35s, .35s; transition-duration: 1s, 1s, .35s, .35s, .35s
}
html.no-touch .card-trigger.card-trigger-expand:hover .card-trigger-icon { box-shadow: 0 0 0 1px #fff
}
.ie .card-trigger { display: none
}
.card-detail, .card-detail-content { z-index: 0
}
.card-fade { z-index: 1
}
#ac-globalfooter.card-animating { z-index: 2
}
.replay-btn { -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; opacity: 0; margin: 10px 0; visibility: hidden
}
.replay-btn:hover { text-decoration: underline
}
.replay-btn.animate { opacity: 1; visibility: visible
}
.replay-btn .icon-replay { margin-left: 5px
}
.center-content { display: inline-block; vertical-align: middle; float: none; position: relative
} @media only screen and (max-width: 735px) {
.center-content { float: left; display: block; vertical-align: inherit
}
}
.has-center-content { display: table; position: relative; height: 100%
}
.has-center-content .center-content { display: inline-block; vertical-align: middle; float: none; position: relative
} @media only screen and (max-width: 735px) {
.has-center-content .center-content { float: left; display: block; vertical-align: inherit
}
} @media only screen and (min-width: 1442px) {
.extended { width: 1123px
}
}
.grid#program-guide-evergreen { display: none
}
.no-js .grid#program-guide-evergreen, .ie8 .grid#program-guide-evergreen { display: block
}
.grid#program-guide-evergreen .large-12 .copy { display: table
}
.grid#program-guide-evergreen .large-12 .copy .column { display: inline-block; vertical-align: middle; float: none; position: relative
} @media only screen and (max-width: 735px) {
.grid#program-guide-evergreen .large-12 .copy .column { float: left; display: block; vertical-align: inherit
}
} @media only screen and (max-width: 735px) {
.grid { max-width: 414px; margin: 0 auto
}
}
.grid .inner { margin-bottom: 78px
} @media only screen and (max-width: 735px) {
.grid .inner { margin-bottom: 72px
}
}
.grid figure { -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px;
} @media only screen and (max-width: 735px) {
.grid figure { width: 100%; /* [disabled]height: 0; */ padding-bottom: 100%; box-sizing: border-box; /* [disabled]background-size: 100% 100%; */ background-position: center 0%;
}
}
.grid figure a.block { width: 100%; height: 100%
}
.grid img { border: 1px solid #EAEAEA
}
.grid .large-6 figure { width: 475px; height: 475px; background-size: 475px 475px
} @media only screen and (min-width: 1442px) {
.grid .large-6 figure { width: 546px; height: 546px; background-size: 546px 546px
}
} @media only screen and (max-width: 1068px) {
.grid .large-6 figure { width: 336px; height: 336px; background-size: 336px 336px
}
} @media only screen and (max-width: 735px) {
.grid .large-6 figure { width: 100%; height: 0; padding-bottom: 100%; box-sizing: border-box; background-size: 100% 100%
}
}
.grid .large-6 img { width: 475px; height: 475px
} @media only screen and (min-width: 1442px) {
.grid .large-6 img { width: 546px; height: 546px
}
} @media only screen and (max-width: 1068px) {
.grid .large-6 img { width: 336px; height: 336px
}
} @media only screen and (max-width: 735px) {
.grid .large-6 img { width: 100%; height: auto; paddingbottom: 100%
}
} @media only screen and (min-width: 1442px) {
.grid .large-12 figure { width: 1123px; height: 1600px; background-size: 100%
}
}
.grid .large-12 img { width: 980px; height: auto
} @media only screen and (min-width: 1442px) {
.grid .large-12 img { width: 1123px; height: 1600px; background-size: 100%
}
} @media only screen and (max-width: 1068px) {
.grid .large-12 img { width: 692px; height: auto
}
} @media only screen and (max-width: 735px) {
.grid .large-12 img { width: 100%; height: auto; paddingbottom: 100%
}
}
.grid .right { margin-left: 15px
} @media only screen and (max-width: 1068px) {
.grid .right { margin-left: 10px
}
} @media only screen and (max-width: 735px) {
.grid .right { margin-left: 0
}
}
.grid .more-shows { margin-top: 50px
} @media only screen and (max-width: 1068px) {
.grid .more-shows { margin-top: 0
}
}
.grid .copy { margin-top: 30px
} @media only screen and (max-width: 1068px) {
.grid .copy { margin-top: 26px
}
} @media only screen and (max-width: 735px) {
.grid .copy { margin-top: 24px
}
}
.grid .copy .hero-subhead { margin-bottom: 0
}
.grid .copy .description { font-weight: 300; margin-bottom: 0
} @media only screen and (max-width: 1068px) {
.grid .copy .description { margin-top: 4px
}
} @media only screen and (max-width: 735px) {
.grid .copy .description { margin-top: 20px
}
}
.grid .copy .description.no-eyebrow { margin-top: 9px
} @media only screen and (max-width: 1068px) {
.grid .copy .description.no-eyebrow { margin-top: 7px
}
} @media only screen and (max-width: 735px) {
.grid .copy .description.no-eyebrow { margin-top: 0
}
}
.grid .copy .station-headline { margin-bottom: 12px
}
.grid .copy .eyebrow-subsection { font-size: 22px; line-height: 1.45455; font-weight: 300; letter-spacing: .016em; font-family: var(--camara-site-font-family); margin-bottom: 6px
}
.grid .copy .eyebrow-subsection:lang(ar) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(ja) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(ko) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(th) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(zh-CN) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(zh-HK) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(zh-MO) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(zh-TW) { font-family: var(--camara-site-font-family)
} @media only screen and (max-width: 1068px) {
.grid .copy .eyebrow-subsection { font-size: 20px; line-height: 1.5; font-weight: 300; letter-spacing: .017em; font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(ar) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(ja) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(ko) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(th) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(zh-CN) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(zh-HK) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(zh-MO) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(zh-TW) { font-family: var(--camara-site-font-family)
}
} @media only screen and (max-width: 735px) {
.grid .copy .eyebrow-subsection { font-size: 19px; line-height: 1.47384; font-weight: 300; letter-spacing: .018em; font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(ar) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(ja) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(ko) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(th) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(zh-CN) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(zh-HK) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(zh-MO) { font-family: var(--camara-site-font-family)
}
.grid .copy .eyebrow-subsection:lang(zh-TW) { font-family: var(--camara-site-font-family)
}
} @media only screen and (max-width: 1068px) {
.grid .copy .eyebrow-subsection { margin-bottom: 2px
}
}
.grid .copy .cta { color: #888
}
.grid .copy .cta.icon-playcircle { margin-right: 23px
} @media only screen and (max-width: 1068px) {
.grid .copy .cta.icon-playcircle { margin-right: 18px
}
} @media only screen and (max-width: 735px) {
.grid .copy .cta.icon-playcircle { display: block
}
}
.camara-work-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start
}
.camara-work-grid:before,
.camara-work-grid:after { display: none
}
.camara-work-grid > .camara-work-item { float: none; clear: none; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%
}
.camara-work-grid > .camara-work-item .inner { width: 100%
}
.camara-work-grid .station-headline .camara-work-category,
.camara-work-grid .station-headline .camara-work-title { display: block
}
@media only screen and (max-width: 735px) {
.camara-work-grid > .camara-work-item { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%
}
}
.page-overview { background: #fff
}
.js .page-overview #ac-globalnav, .js .page-overview #ac-localnav { opacity: 0.0001
}
.page-overview .section-hero { background: #fff; padding-top: 0; padding-bottom: 0; position: relative; overflow: initial; z-index: 1
}
.page-overview .section-hero .sticky-wrapper { position: absolute; left: 0; top: 0; height: 100%; width: 100%
}
.page-overview .section-hero #hero-bg { height: 100%; width: 100%; top: 0; left: 0; opacity: 0; -webkit-transition: opacity 3s cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 3s cubic-bezier(0.77, 0, 0.175, 1); overflow: hidden; z-index: 1
}
.page-overview .section-hero #hero-bg.show { opacity: 1
}
.no-js .page-overview .section-hero #hero-bg.us-no-js { opacity: 0.9999
}
.page-overview .section-hero #hero-bg .hero-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; opacity: 0.9999; -webkit-transform: translate3d(0, 0, 0) scale3d(1.1, 1.1, 1); transform: translate3d(0, 0, 0) scale3d(1.1, 1.1, 1)
}
@-webkit-keyframes peel {
from {
opacity:0.9999;
-webkit-transform:translate3d(0, 0, 0) scale3d(1.1, 1.1, 1);
transform:translate3d(0, 0, 0) scale3d(1.1, 1.1, 1)
}
to {
opacity:0.0001;
-webkit-transform:translate3d(0, 0, 0) scale3d(1.15, 1.15, 1);
transform:translate3d(0, 0, 0) scale3d(1.15, 1.15, 1)
}
}
@keyframes peel {
from {
opacity:0.9999;
-webkit-transform:translate3d(0, 0, 0) scale3d(1.1, 1.1, 1);
transform:translate3d(0, 0, 0) scale3d(1.1, 1.1, 1)
}
to {
opacity:0.0001;
-webkit-transform:translate3d(0, 0, 0) scale3d(1.15, 1.15, 1);
transform:translate3d(0, 0, 0) scale3d(1.15, 1.15, 1)
}
}
.page-overview .section-hero #hero-bg .hero-img.hero-img-1 { background-repeat: no-repeat; -webkit-animation-name: peel; animation-name: peel; -webkit-animation-delay: 5s; animation-delay: 5s; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-iteration-count: once; animation-iteration-count: once; -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; z-index: 6
}
.ie .page-overview .section-hero #hero-bg .hero-img.hero-img-1, .large-tablet .page-overview .section-hero #hero-bg .hero-img.hero-img-1, .large-phone .page-overview .section-hero #hero-bg .hero-img.hero-img-1 { display: none
}
.page-overview .section-hero #hero-bg .hero-img.hero-img-2 { background-repeat: no-repeat; -webkit-animation-name: peel; animation-name: peel; -webkit-animation-delay: 10s; animation-delay: 10s; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-iteration-count: once; animation-iteration-count: once; -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; z-index: 5
}
.ie .page-overview .section-hero #hero-bg .hero-img.hero-img-2, .large-tablet .page-overview .section-hero #hero-bg .hero-img.hero-img-2, .large-phone .page-overview .section-hero #hero-bg .hero-img.hero-img-2 { display: none
}
.page-overview .section-hero #hero-bg .hero-img.hero-img-last { background-repeat: no-repeat; opacity: 1; z-index: 1
}
.page-overview .section-hero .hero-headline { font-weight: 300
}
.page-overview .section-hero .shade { opacity: 0.0001; will-change: opacity; -webkit-transform: translateZ(0); transform: translateZ(0); position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: #fff; z-index: 3
}
.ac-theme-dark .page-overview, .page-overview.ac-theme-dark { background: #000
}
.ac-theme-dark .page-overview .section-hero, .page-overview.ac-theme-dark .section-hero { background: #000
}
.ac-theme-dark .page-overview .section-hero .shade, .page-overview.ac-theme-dark .section-hero .shade { background: #000
}
.ie8 .page-overview .section-hero .shade { display: none
}
.page-overview .section-hero .gradient { height: 400px; width: 100%; position: absolute; bottom: 0; background: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,0.8) 100%); background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.8) 100%); z-index: 10
}
.page-overview .section-hero .section-content { z-index: 4; text-align: center; position: relative; color: #fff
}
.page-overview .section-hero .copy { padding-top: 240px; padding-bottom: 282px
} @media only screen and (max-width: 1068px) {
.page-overview .section-hero .copy { padding-top: 220px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-hero .copy { padding-top: 190px; padding-bottom: 46px
}
}
.page-overview .section-hero .copy .image-camara-logo { margin: 0 auto
} @media only screen and (max-width: 1068px) {
.page-overview .section-hero .copy .image-camara-logo { margin: 0 auto
}
}
.page-overview .section-hero .copy h1 { max-width: 610px; margin: 11px auto 16px
} @media only screen and (max-width: 1068px) {
.page-overview .section-hero .copy h1 { max-width: 560px; margin-top: 7px; margin-bottom: 14px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-hero .copy h1 { margin: 9px auto 11px
}
}
.page-overview .section-hero .copy .cta { margin-left: 5px; margin-right: 5px; color: #fff; font-size: 22px; line-height: 1.45455; font-weight: 300; letter-spacing: .016em; font-family: var(--camara-site-font-family); display: inline-block
}
.page-overview .section-hero .copy .cta:lang(ar) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(ja) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(ko) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(th) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(zh-CN) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(zh-HK) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(zh-MO) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(zh-TW) { font-family: var(--camara-site-font-family)
} @media only screen and (max-width: 1068px) {
.page-overview .section-hero .copy .cta { font-size: 20px; line-height: 1.5; font-weight: 300; letter-spacing: .017em; font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(ar) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(ja) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(ko) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(th) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(zh-CN) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(zh-HK) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(zh-MO) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(zh-TW) { font-family: var(--camara-site-font-family)
}
} @media only screen and (max-width: 735px) {
.page-overview .section-hero .copy .cta { font-size: 19px; line-height: 1.47384; font-weight: 300; letter-spacing: .018em; font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(ar) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(ja) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(ko) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(th) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(zh-CN) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(zh-HK) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(zh-MO) { font-family: var(--camara-site-font-family)
}
.page-overview .section-hero .copy .cta:lang(zh-TW) { font-family: var(--camara-site-font-family)
}
}
.page-overview .section-hero .copy .cta sup { display: inline-block
}
.page-overview .section-hero .copy .cta:hover sup { text-decoration: none
}
.page-overview .section-hero .copy .violator { margin-top: 40px; color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.4); white-space: normal
}
.page-overview .section-hero .copy .intro-wrapper { opacity: 0.0001; -webkit-transform: translateZ(0); transform: translateZ(0)
}
.ios-8 .page-overview .section-hero .copy .intro-wrapper, .ie .page-overview .section-hero .copy .intro-wrapper { opacity: 0.9999
}
.no-js .page-overview .section-hero .copy .intro-wrapper.us-no-js { opacity: 0.9999
} @media (orientation: landscape) {
.handheld .page-overview .section-hero .copy .intro-wrapper { opacity: 0.9999
}
}
.page-overview .section-hero .copy .intro { max-width: 609px; left: 50%; margin: 290px auto 0
} @media only screen and (max-width: 1068px) {
.page-overview .section-hero .copy .intro { max-width: 482px; margin-top: 200px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-hero .copy .intro { margin-top: 130px
}
}
.page-overview .section-hero .copy .intro { color: #000; font-weight: 400
}
.page-overview .section-hero .copy .intro.intro-update { max-width: 591px
}
@-webkit-keyframes fade-in {
0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes fade-in {
0% {
opacity:0
}
100% {
opacity:1
}
}
.page-overview .section-hero .copy .lockup { opacity: 0.0001; -webkit-transition: opacity 1.2s cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 1.2s cubic-bezier(0.77, 0, 0.175, 1); position: relative
}
.page-overview .section-hero .copy .lockup .inner { --camara-hero-lockup-offset-x: 0px; --camara-hero-lockup-offset-y: 0px; -webkit-transform: translate3d(var(--camara-hero-lockup-offset-x), var(--camara-hero-lockup-offset-y), 0); transform: translate3d(var(--camara-hero-lockup-offset-x), var(--camara-hero-lockup-offset-y), 0); position: relative
}
.page-overview .section-hero .copy .lockup .image-camara-logo { opacity: 0.999; -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0); -webkit-transition: -webkit-transform 2s 2.2s cubic-bezier(0.77, 0, 0.175, 1); transition: transform 2s 2.2s cubic-bezier(0.77, 0, 0.175, 1)
} @media (max-width: 320px) {
.page-overview .section-hero .copy .lockup br { display: none
}
}
.page-overview .section-hero .copy .lockup h1 { opacity: 0.0001; -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0); -webkit-transition: opacity 2s 2.4s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 2s 2.4s cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 2s 2.4s cubic-bezier(0.77, 0, 0.175, 1), transform 2s 2.4s cubic-bezier(0.77, 0, 0.175, 1)
}
.page-overview .section-hero .copy .lockup .cta { opacity: 0.0001; -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0); -webkit-transition: opacity 2s 2.6s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 2s 2.6s cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 2s 2.6s cubic-bezier(0.77, 0, 0.175, 1), transform 2s 2.6s cubic-bezier(0.77, 0, 0.175, 1)
}
.page-overview .section-hero .copy .lockup .icon-paddledown { opacity: 0.0001; position: absolute; left: 0; right: 0; display: block; margin: 0 auto; z-index: 50; text-align: center; font-size: 25px; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); -webkit-transition: opacity 2s 3.2s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 2s 3.2s cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 2s 3.2s cubic-bezier(0.77, 0, 0.175, 1), transform 2s 3.2s cubic-bezier(0.77, 0, 0.175, 1)
}
.page-overview .section-hero .copy .lockup.show { opacity: 0.9999
}
.page-overview .section-hero .copy .lockup.show .image-camara-logo, .page-overview .section-hero .copy .lockup.show h1, .page-overview .section-hero .copy .lockup.show .cta, .page-overview .section-hero .copy .lockup.show .icon-paddledown { opacity: 0.9999; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)
}
.camara-char-block { display: inline-block; white-space: pre; background: #000; color: #fff; line-height: inherit; padding: 0 .04em
}
.camara-char-token { display: inline-block; white-space: nowrap
}
.page-overview .section-membership-router, .page-overview .section-membership-router .section-headline, .page-overview .section-membership-router .section-headline span, .page-overview .section-membership-router p, .page-overview .section-membership-router p span, .page-overview .section-membership-router .camara-router-contact-headline, .page-overview .section-membership-router .camara-router-contact-headline span, .page-overview .section-membership-router .camara-router-contact-copy, .page-overview .section-membership-router .camara-router-contact-copy span { color: #636466 !important
}
.page-overview .section-membership-router [data-camara-char-typing-state] .camara-char-block { background: transparent; color: #636466; padding: 0
}
.page-overview .card-hero .copy-wrapper p[data-camara-char-typing-state="pending"] .camara-char-block, .page-overview .card-hero .copy-wrapper p[data-camara-char-typing-state="typing"] .camara-char-block, .page-overview .section-membership-router [data-camara-char-typing-state="pending"] .camara-char-block, .page-overview .section-membership-router [data-camara-char-typing-state="typing"] .camara-char-block { opacity: 0
}
.page-overview .card-hero .copy-wrapper p[data-camara-char-typing-state="typing"] .camara-char-block.is-visible, .page-overview .card-hero .copy-wrapper p[data-camara-char-typing-state="complete"] .camara-char-block, .page-overview .section-membership-router [data-camara-char-typing-state="typing"] .camara-char-block.is-visible, .page-overview .section-membership-router [data-camara-char-typing-state="complete"] .camara-char-block { opacity: 1
}
.no-js .page-overview .section-hero .copy .lockup.us-no-js { opacity: 0.9999
}
.no-js .page-overview .section-hero .copy .lockup.us-no-js .image-camara-logo, .no-js .page-overview .section-hero .copy .lockup.us-no-js h1, .no-js .page-overview .section-hero .copy .lockup.us-no-js .cta, .no-js .page-overview .section-hero .copy .lockup.us-no-js .icon-paddledown { opacity: 0.9999; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)
}
.page-overview .section-experience .mediaObject-content { position: relative; width: 264px; height: 470px
} @media only screen and (max-width: 1068px) {
.page-overview .section-experience .mediaObject-content { width: 188px; height: 336px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .mediaObject-content { width: 164px; height: 290px
}
}
.page-overview .section-experience .mediaObject-content .mediaObject-element { position: relative; top: 0; left: 0; width: 100%; height: 100%
}
.page-overview .section-experience .mediaObject-content .mediaObject-startframe, .page-overview .section-experience .mediaObject-content .mediaObject-endframe, .page-overview .section-experience .mediaObject-content .mediaObject-fallback { position: absolute; top: 0; left: 0; z-index: 2; opacity: 0
}
.page-overview .section-experience .mediaObject-content .mediaObject-endframe { position: absolute; z-index: 3
}
.page-overview .section-experience .mediaObject-content .mediaObject-startframe { opacity: 1
}
.large-phone .page-overview .section-experience .mediaObject-content .mediaObject-startframe, .ios-8 .page-overview .section-experience .mediaObject-content .mediaObject-startframe, .large-phone .page-overview .section-experience .mediaObject-content .mediaObject-endframe, .ios-8 .page-overview .section-experience .mediaObject-content .mediaObject-endframe { display: none
}
.large-phone .page-overview .section-experience .mediaObject-content .mediaObject-fallback, .ios-8 .page-overview .section-experience .mediaObject-content .mediaObject-fallback { opacity: 1
}
.page-overview .section-experience .mediaObject-content.mediaObject-enhanced .mediaObject-startframe { opacity: 0; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out
}
.page-overview .section-experience .mediaObject-content.mediaObject-enhanced .mediaObject-element { z-index: 3
}
.page-overview .section-experience .mediaObject-content.mediaObject-ended .mediaObject-endframe { opacity: 1; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out
}
.page-overview .section-experience .mediaObject-content.mediaObject-destroyed .mediaObject-fallback { z-index: 4; opacity: 1
}
.page-overview .section-experience .card-hero { background-repeat: no-repeat
}
.page-overview .section-experience .card-hero .image-card-hero { background-repeat: no-repeat; background-size: cover
}
.page-overview .section-experience .card-hero .copy-wrapper { width: 330px
} @media only screen and (max-width: 1068px) {
.page-overview .section-experience .card-hero .copy-wrapper { width: 320px
}
.page-overview .section-experience .card-hero .copy-wrapper .section-headline { padding-right: 40px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .card-hero .copy-wrapper { width: 100%
}
.page-overview .section-experience .card-hero .copy-wrapper .section-headline { padding-right: 0
}
}
.page-overview .section-experience .card-detail-content { background: #ffffff; padding: 0
}
.page-overview .section-experience .card-detail-content .hero-headline { text-align: center; padding-top: 150px; width: 690px; margin: 0 auto
} @media only screen and (max-width: 1068px) {
.page-overview .section-experience .card-detail-content .hero-headline { padding-top: 100px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .card-detail-content .hero-headline { width: 100%; text-align: left
}
}
.page-overview .section-experience .card-detail-content .description-title { font-weight: 600; margin-top: 1em; margin-bottom: 0
}
.page-overview .section-experience .card-detail-content .drop-shadow { z-index: -1; position: absolute; top: -100px; left: -130px
} @media only screen and (max-width: 1068px) {
.page-overview .section-experience .card-detail-content .drop-shadow { top: -20px; left: -80px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .card-detail-content .drop-shadow { top: -70px; left: -80px
}
}
.page-overview .section-experience .card-detail-content .screens { position: absolute; top: 77px; left: 21px
} @media only screen and (max-width: 1068px) {
.page-overview .section-experience .card-detail-content .screens { top: 55px; left: 15px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .card-detail-content .screens { top: 48px; left: 13px
}
}
.page-overview .section-experience .ui-scroll-gallery { background-color: #faf8fe; padding-top: 195px; padding-bottom: 68px
} @media only screen and (max-width: 1068px) {
.page-overview .section-experience .ui-scroll-gallery { padding-top: 155px; padding-bottom: 28px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery { padding-top: 115px; padding-bottom: 0
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery { background-color: #FFF
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery .section-content { width: 100%
}
}
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-slide { margin-top: -60px
} @media only screen and (max-width: 1068px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-slide { margin-top: -30px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-slide { margin-top: 0
}
}
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-container { display: table; position: relative
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-container { padding-top: 384px; display: block
}
}
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-content { display: table-cell; vertical-align: middle; position: relative; overflow: visible
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-content { display: block
}
}
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-content-copy { padding-right: 100px
} @media only screen and (max-width: 1068px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-content-copy { padding-right: 0px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-content-copy { position: relative; z-index: 1
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-content-media { position: absolute; top: 0
}
}
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-media-container { padding: 65px 0 95px
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-media-container { padding-top: 40px; padding-bottom: 0
}
}
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-media { left: 50%; margin-left: -153.5px; position: relative; width: 307px
} @media only screen and (max-width: 1068px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-media { left: 50%; margin-left: -109px; position: relative
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-media { left: 50%; margin-left: -94.5px; position: relative
}
}
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-media.is-supported { -webkit-transition: all 0.7s cubic-bezier(0.32, 0.07, 0.41, 1); transition: all 0.7s cubic-bezier(0.32, 0.07, 0.41, 1); -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95)
}
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-media.is-supported.animate-levitate { -webkit-transform: scale(1, 1); transform: scale(1, 1)
}
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-media.is-supported.animate-levitate .drop-shadow { opacity: 0.75; -webkit-transform: translate3d(-30px, 50px, 0); transform: translate3d(-30px, 50px, 0)
} @media only screen and (max-width: 1068px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-media.is-supported.animate-levitate .drop-shadow { -webkit-transform: translate3d(-10px, 30px, 0); transform: translate3d(-10px, 30px, 0)
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-media.is-supported.animate-levitate .drop-shadow { -webkit-transform: translate3d(-5px, 10px, 0); transform: translate3d(-5px, 10px, 0)
}
}
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-media.is-supported .drop-shadow { -webkit-transition: all 0.7s cubic-bezier(0.32, 0.07, 0.41, 1); transition: all 0.7s cubic-bezier(0.32, 0.07, 0.41, 1); opacity: 0.9999
} @media only screen and (max-width: 1068px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-media { width: 218px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-media { width: 189px
}
}
.page-overview .section-experience .ui-scroll-gallery .mediaObject-content { position: absolute; top: 77px; left: 21px
} @media only screen and (max-width: 1068px) {
.page-overview .section-experience .ui-scroll-gallery .mediaObject-content { top: 55px; left: 15px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery .mediaObject-content { top: 48px; left: 13px
}
}
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-copy { -webkit-transition: all 2s ease; transition: all 2s ease; padding: 45px 0 70px; opacity: 0.0001
}
.ios-8 .page-overview .section-experience .ui-scroll-gallery .ui-scroll-copy, .ie .page-overview .section-experience .ui-scroll-gallery .ui-scroll-copy { opacity: 0.9999
}
.no-js .page-overview .section-experience .ui-scroll-gallery .ui-scroll-copy.us-no-js { opacity: 0.9999
} @media only screen and (max-width: 1068px) {
.ie .page-overview .section-experience .ui-scroll-gallery .ui-scroll-copy { width: 100%
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-copy { text-align: center; padding: 45px 0 50px
}
} @media only screen and (max-width: 735px) and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-copy { margin-left: auto; margin-right: auto; width: 87.5%
}
}
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-copy p { margin-bottom: 0; margin-top: 20px
}
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-copy p.sub-copy { margin-top: 1px
}
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-copy.animate-ui-scroll-copy { opacity: 0.9999
}
.page-overview .section-experience .ui-scroll-gallery .ui-scroll-replay, .page-overview .section-experience .ui-scroll-gallery p { color: #555
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery #ui-scroll-slide-1 .ui-scroll-content-copy { background-color: #faf8fe
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery #ui-scroll-slide-2 .ui-scroll-content-copy { background-color: #fff6f9
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery #ui-scroll-slide-3 .ui-scroll-content-copy { background-color: #fef3f1
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery #ui-scroll-slide-4 .ui-scroll-content-copy { background-color: #fef9f4
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery #ui-scroll-slide-5 .ui-scroll-content-copy { background-color: #fdf5fb
}
}
.page-overview .section-experience .ui-scroll-gallery #ui-scroll-slide-6 .ui-scroll-content-copy { padding-right: 80px
} @media only screen and (max-width: 1068px) {
.page-overview .section-experience .ui-scroll-gallery #ui-scroll-slide-6 .ui-scroll-content-copy { padding-right: 0
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery #ui-scroll-slide-6 .ui-scroll-content-copy { background-color: #fcf1f5
}
} @media only screen and (max-width: 735px) {
.page-overview .section-experience .ui-scroll-gallery #ui-scroll-slide-7 .ui-scroll-content-copy { background-color: #fcf8ff
}
} .page-overview .section-exclusives .card-hero { background-repeat: no-repeat
}
.page-overview .section-exclusives .card-hero .image-card-hero { background-repeat: no-repeat; background-size: cover
}
.page-overview .section-exclusives .card-hero .copy-wrapper { width: 330px
} @media only screen and (max-width: 1068px) {
.page-overview .section-exclusives .card-hero .copy-wrapper { width: 320px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-exclusives .card-hero .copy-wrapper { width: 100%
}
}
.page-overview .section-exclusives .card-detail-content { padding-bottom: 122px
} @media only screen and (max-width: 1068px) {
.page-overview .section-exclusives .card-detail-content { padding-bottom: 72px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-exclusives .card-detail-content { padding-bottom: 28px
}
}
.page-overview .section-exclusives .card-detail-content .section-headline { text-align: center; margin-bottom: 94px
} @media only screen and (max-width: 1068px) {
.page-overview .section-exclusives .card-detail-content .section-headline { margin-bottom: 40px
}
} @media only screen and (max-width: 1068px) {
.page-overview .section-exclusives .card-detail-content .section-headline { margin-bottom: 36px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-exclusives .card-detail-content .section-headline { text-align: left
}
}
.page-overview .section-exclusives .card-detail-content .subsection-headline { margin-bottom: 20px
} @media only screen and (max-width: 1068px) {
.page-overview .section-exclusives .card-detail-content .subsection-headline { margin-bottom: 18px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-exclusives .card-detail-content .subsection-headline { margin-bottom: 12px
}
}
.page-overview .section-playlists .card-hero { background-repeat: no-repeat
}
.page-overview .section-playlists .card-hero .image-card-hero { background-repeat: no-repeat; background-size: cover
}
.page-overview .section-playlists .card-hero .copy-wrapper { width: 330px
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .card-hero .copy-wrapper { width: 320px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .card-hero .copy-wrapper { width: 100%
}
}
.page-overview .section-playlists .card-detail-content { padding-bottom: 20px
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .card-detail-content { padding-bottom: 0
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .card-detail-content { padding-bottom: 20px
}
}
.page-overview .section-playlists .section-heading { margin-bottom: 114px
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .section-heading { margin-bottom: 65px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .section-heading { margin-bottom: 88px
}
}
.page-overview .section-playlists .section-heading .section-headline, .page-overview .section-playlists .section-heading p { text-align: left
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .section-heading .section-headline, .page-overview .section-playlists .section-heading p { text-align: center
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .section-heading .section-headline { margin-bottom: 15px
}
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .section-heading .section-headline .wrap { white-space: nowrap
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .section-heading .section-headline .wrap { white-space: normal
}
}
.page-overview .section-playlists .section-heading .text-title { margin-top: 14px
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .section-heading .text-title { margin-top: 7px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .section-heading .text-title { margin-top: 0
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container { padding-bottom: 57px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container.reverse { background-color: #fafafa
}
}
.page-overview .section-playlists .playlist-container.reverse .playlist-title, .page-overview .section-playlists .playlist-container.reverse .playlist-text { z-index: 2
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container.reverse .playlist-images { margin-top: -18px; margin-bottom: -41px
}
}
.page-overview .section-playlists .playlist-container.reverse .phone-hardware-ui { position: absolute; left: 172px
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .playlist-container.reverse .phone-hardware-ui { top: 112px; left: 121px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container.reverse .phone-hardware-ui { margin-left: -81px; left: 54%; position: absolute; top: 81px
}
}
.page-overview .section-playlists .playlist-container.reverse .image-playlists-phone-hardware { left: 50%; margin-left: -271.5px; position: relative
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .playlist-container.reverse .image-playlists-phone-hardware { left: 50%; margin-left: -191.5px; position: relative
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container.reverse .image-playlists-phone-hardware { left: 50%; margin-left: -157px; position: relative
}
}
.page-overview .section-playlists .playlist-container.reverse .image-playlists-phone-shadow { left: 50%; margin-left: -271.5px; position: relative; position: absolute
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .playlist-container.reverse .image-playlists-phone-shadow { left: 50%; margin-left: -191.5px; position: relative
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container.reverse .image-playlists-phone-shadow { left: 50%; margin-left: -157px; position: relative
}
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .playlist-container.reverse .image-playlists-phone-shadow { position: absolute
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container.reverse .image-playlists-phone-shadow { position: absolute
}
}
.page-overview .section-playlists .playlist-container .playlist-title, .page-overview .section-playlists .playlist-container .playlist-text { font-weight: 400; position: relative
}
.page-overview .section-playlists .playlist-container .description-title { font-weight: 500; margin-bottom: 0; margin-top: 18px
}
.page-overview .section-playlists .playlist-container .playlist-images.is-supported { -webkit-transition: all 0.7s cubic-bezier(0.32, 0.07, 0.41, 1); transition: all 0.7s cubic-bezier(0.32, 0.07, 0.41, 1); -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95)
}
.page-overview .section-playlists .playlist-container .playlist-images.is-supported.animate-levitate { -webkit-transform: scale(1, 1); transform: scale(1, 1)
}
.page-overview .section-playlists .playlist-container .playlist-images.is-supported.animate-levitate .drop-shadow { opacity: 0.75; -webkit-transform: translate3d(-30px, 50px, 0); transform: translate3d(-30px, 50px, 0)
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .playlist-container .playlist-images.is-supported.animate-levitate .drop-shadow { -webkit-transform: translate3d(-10px, 30px, 0); transform: translate3d(-10px, 30px, 0)
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container .playlist-images.is-supported.animate-levitate .drop-shadow { -webkit-transform: translate3d(-5px, 10px, 0); transform: translate3d(-5px, 10px, 0)
}
}
.page-overview .section-playlists .playlist-container .playlist-images.is-supported .drop-shadow { -webkit-transition: all 0.7s cubic-bezier(0.32, 0.07, 0.41, 1); transition: all 0.7s cubic-bezier(0.32, 0.07, 0.41, 1); opacity: 0.9999
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container .playlist-images { margin-top: -18px; margin-bottom: -42px
}
}
.page-overview .section-playlists .playlist-container .playlist-title { margin-top: 150px; margin-bottom: 25px
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container .playlist-title { margin-top: 45px
}
}
.page-overview .section-playlists .playlist-container .playlist-text { margin-top: 0
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .playlist-container .playlist-text { margin-top: 0
}
}
.page-overview .section-playlists .playlist-container .image-playlists-phone-hardware { left: 50%; margin-left: -390.5px; position: relative
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .playlist-container .image-playlists-phone-hardware { left: 50%; margin-left: -275.5px; position: relative
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container .image-playlists-phone-hardware { left: 50%; margin-left: -157px; position: relative
}
}
.page-overview .section-playlists .playlist-container .image-playlists-phone-shadow { left: 50%; margin-left: -390.5px; position: relative; position: absolute
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .playlist-container .image-playlists-phone-shadow { left: 50%; margin-left: -275.5px; position: relative
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container .image-playlists-phone-shadow { left: 50%; margin-left: -187px; position: relative
}
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .playlist-container .image-playlists-phone-shadow { position: absolute
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container .image-playlists-phone-shadow { position: absolute
}
}
.page-overview .section-playlists .playlist-container .phone-hardware-ui { position: absolute; top: 158px; left: 172px
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .playlist-container .phone-hardware-ui { top: 112px; left: 121px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container .phone-hardware-ui { margin-left: -81px; left: 54%; position: absolute; top: 81px
}
}
.page-overview .section-playlists .playlist-container .top-copy { margin-top: 18px; margin-bottom: 18px
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .playlist-container .top-copy { margin-top: 15px
}
}
.page-overview .section-playlists .playlist-container .sub-copy { margin-top: 2px
}
.page-overview .section-playlists .playlist-container .tabnav ul { list-style-type: none; margin: 50px 0 29px
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .playlist-container .tabnav ul { margin-top: 42px; margin-bottom: 12px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container .tabnav ul { margin: 13px 0 25px
}
}
.page-overview .section-playlists .playlist-container .tabnav li { display: inline-block; padding-right: 20px
}
.page-overview .section-playlists .playlist-container .tabnav li:last-child { padding-right: 0
}
.page-overview .section-playlists .playlist-container .tabnav a { color: #888; text-decoration: none
}
.page-overview .section-playlists .playlist-container .tabnav a.current { color: #333; position: relative; padding-top: 18px
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .playlist-container .tabnav a.current { padding-top: 12px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-container .tabnav a.current { padding-top: 15px
}
}
.page-overview .section-playlists .playlist-container .tabnav a.current::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 2px; background-image: -webkit-linear-gradient(0deg, #d1149f 0%, #fe5c6c 100%); background-image: linear-gradient(90deg, #d1149f 0%, #fe5c6c 100%)
}
.page-overview .section-playlists .playlist-keyline { width: 80px; height: 2px; background-image: -webkit-linear-gradient(0deg, #d1149f 0%, #fe5c6c 100%); background-image: linear-gradient(90deg, #d1149f 0%, #fe5c6c 100%); margin-bottom: 46px
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .playlist-keyline { display: none
}
}
.page-overview .section-playlists .section-experts .playlist-title { margin-top: 116px
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .section-experts .playlist-title { margin-top: 41px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .section-experts .playlist-title { margin-top: 0
}
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .section-experts .playlist-images { margin-top: 124px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .section-experts .playlist-images { margin-top: -18px
}
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .section-created { margin-top: 102px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .section-created { margin-top: 0
}
}
.page-overview .section-playlists .section-created .playlist-title { margin-top: 250px
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .section-created .playlist-title { margin-top: 107px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .section-created .playlist-title { margin-top: 74px
}
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .section-moment { margin-bottom: 42px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .section-moment { margin-bottom: 0
}
}
.page-overview .section-playlists .section-moment .playlist-title { margin-top: 200px
} @media only screen and (max-width: 1068px) {
.page-overview .section-playlists .section-moment .playlist-title { margin-top: 45px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-playlists .section-moment .playlist-title { margin-top: 74px
}
}
.page-overview .section-beats-1 .card-hero { background-repeat: no-repeat; background-image: none
} @media only screen and (max-width: 1068px) {
.page-overview .section-beats-1 .card-hero { background-repeat: no-repeat; background-image: none
}
} @media only screen and (max-width: 735px) {
.page-overview .section-beats-1 .card-hero { background-repeat: no-repeat; background-image: none
}
} @media only screen and (max-width: 735px) {
.page-overview .section-beats-1 .card-hero { background-image: none
}
} @media only screen and (max-width: 735px) {
.page-overview .section-beats-1 .card-hero .image-card-hero { background-repeat: no-repeat; background-image: none; background-size: cover
}
} @media only screen and (max-width: 735px) and (max-width: 1068px) {
.page-overview .section-beats-1 .card-hero .image-card-hero { background-repeat: no-repeat; background-image: none
}
} @media only screen and (max-width: 735px) and (max-width: 735px) {
.page-overview .section-beats-1 .card-hero .image-card-hero { background-repeat: no-repeat; background-image: none
}
}
.page-overview .section-beats-1 .card-hero .copy-wrapper { width: 440px
} @media only screen and (max-width: 1068px) {
.page-overview .section-beats-1 .card-hero .copy-wrapper { width: 362px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-beats-1 .card-hero .copy-wrapper { width: 100%
}
}
.page-overview .section-beats-1 .card-hero .copy-wrapper p { padding-right: 40px
} @media only screen and (max-width: 1068px) {
.page-overview .section-beats-1 .card-hero .copy-wrapper p { padding-right: 0
}
}
.page-overview .section-beats-1 .card-detail .section-headline { text-align: center; margin-bottom: 94px
} @media only screen and (max-width: 1068px) {
.page-overview .section-beats-1 .card-detail .section-headline { margin-bottom: 40px
}
} @media only screen and (max-width: 1068px) {
.page-overview .section-beats-1 .card-detail .section-headline { margin-bottom: 36px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-beats-1 .card-detail .section-headline { text-align: left
}
}
.page-overview .section-beats-1 .card-detail .intro { margin-top: -10px; margin-bottom: 115px; text-align: center
} @media only screen and (max-width: 1068px) {
.page-overview .section-beats-1 .card-detail .intro { margin-bottom: 80px; margin-top: -3px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-beats-1 .card-detail .intro { text-align: left
}
}
.page-overview .section-beats-1 .card-detail .intro a { color: #333
}
.page-overview .section-beats-1 .card-detail #blob { height: 900px; position: relative
} @media only screen and (max-width: 1068px) {
.page-overview .section-beats-1 .card-detail #blob { height: 700px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-beats-1 .card-detail #blob { height: 500px
}
}
.no-webgl .page-overview .section-beats-1 .card-detail #blob, .ios-8 .page-overview .section-beats-1 .card-detail #blob { background-repeat: no-repeat; background-image: none; background-size: cover; background-position: 50% 50%
} @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.no-webgl .page-overview .section-beats-1 .card-detail #blob, .ios-8 .page-overview .section-beats-1 .card-detail #blob { background-image: none
}
} @media only screen and (max-width: 1068px) {
.no-webgl .page-overview .section-beats-1 .card-detail #blob, .ios-8 .page-overview .section-beats-1 .card-detail #blob { background-repeat: no-repeat; background-image: none
}
} @media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
.no-webgl .page-overview .section-beats-1 .card-detail #blob, .ios-8 .page-overview .section-beats-1 .card-detail #blob { background-image: none
}
} @media only screen and (max-width: 735px) {
.no-webgl .page-overview .section-beats-1 .card-detail #blob, .ios-8 .page-overview .section-beats-1 .card-detail #blob { background-repeat: no-repeat; background-image: none
}
} @media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
.no-webgl .page-overview .section-beats-1 .card-detail #blob, .ios-8 .page-overview .section-beats-1 .card-detail #blob { background-image: none
}
}
.no-js .page-overview .section-beats-1 .card-detail #blob.us-no-js { background-repeat: no-repeat; background-image: none; background-size: cover; background-position: 50% 50%
} @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.no-js .page-overview .section-beats-1 .card-detail #blob.us-no-js { background-image: none
}
} @media only screen and (max-width: 1068px) {
.no-js .page-overview .section-beats-1 .card-detail #blob.us-no-js { background-repeat: no-repeat; background-image: none
}
} @media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
.no-js .page-overview .section-beats-1 .card-detail #blob.us-no-js { background-image: none
}
} @media only screen and (max-width: 735px) {
.no-js .page-overview .section-beats-1 .card-detail #blob.us-no-js { background-repeat: no-repeat; background-image: none
}
} @media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
.no-js .page-overview .section-beats-1 .card-detail #blob.us-no-js { background-image: none
}
}
.page-overview .section-beats-1 .card-detail #blob .radio-title-container { position: absolute; top: 50%; left: 0; width: 100%; height: 175px; margin-top: -87px
}
.page-overview .section-beats-1 .card-detail #blob .title { position: relative; font-weight: 300; color: #fff; text-align: center; margin-bottom: 30px; opacity: 0.0001; -webkit-transform: translate3d(0px, 50px, 0px); transform: translate3d(0px, 50px, 0px); will-change: opacity, transform
}
.page-overview .section-beats-1 .card-detail #blob .title-top { -webkit-transform: translate3d(0px, 50px, 0px); transform: translate3d(0px, 50px, 0px); -webkit-transition: -webkit-transform 2s cubic-bezier(0.77, 0, 0.175, 1), opacity 2s cubic-bezier(0.77, 0, 0.175, 1); transition: transform 2s cubic-bezier(0.77, 0, 0.175, 1), opacity 2s cubic-bezier(0.77, 0, 0.175, 1)
}
.page-overview .section-beats-1 .card-detail #blob .title-middle { -webkit-transform: translate3d(0px, 100px, 0px); transform: translate3d(0px, 100px, 0px); -webkit-transition: -webkit-transform 2s cubic-bezier(0.77, 0, 0.175, 1), opacity 2s 0.2s cubic-bezier(0.77, 0, 0.175, 1); transition: transform 2s cubic-bezier(0.77, 0, 0.175, 1), opacity 2s 0.2s cubic-bezier(0.77, 0, 0.175, 1)
}
.page-overview .section-beats-1 .card-detail #blob .title-bottom { -webkit-transform: translate3d(0px, 150px, 0px); transform: translate3d(0px, 150px, 0px); -webkit-transition: -webkit-transform 2s cubic-bezier(0.77, 0, 0.175, 1), opacity 2s 0.4s cubic-bezier(0.77, 0, 0.175, 1); transition: transform 2s cubic-bezier(0.77, 0, 0.175, 1), opacity 2s 0.4s cubic-bezier(0.77, 0, 0.175, 1)
}
.page-overview .section-beats-1 .card-detail #blob .title-bottom a { color: #fff
}
.page-overview .section-beats-1 .card-detail #blob .radio-title-container.show .title-top { opacity: 0.999; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px)
}
.page-overview .section-beats-1 .card-detail #blob .radio-title-container.show .title-middle { opacity: 0.999; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px)
}
.page-overview .section-beats-1 .card-detail #blob .radio-title-container.show .title-bottom { opacity: 0.999; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px)
}
.no-js .page-overview .section-beats-1 .card-detail #blob.us-no-js .title-top, .no-js .page-overview .section-beats-1 .card-detail #blob.us-no-js .title-bottom { opacity: 0.999
}
.page-overview .radio-stations { margin-top: 154px; text-align: center
} @media only screen and (max-width: 1068px) {
.page-overview .radio-stations { margin-top: 88px
}
}
.page-overview .radio-stations .subsection-copy { margin-top: 19px; margin-bottom: 30px
} @media only screen and (max-width: 1068px) {
.page-overview .radio-stations .subsection-copy { margin-top: 16px; margin-bottom: 12px
}
} @media only screen and (max-width: 735px) {
.page-overview .radio-stations .subsection-copy { margin-top: 14px
}
}
.page-overview .radio-stations .subsection-subheadline { margin-top: 20px; margin-bottom: 16px
} @media only screen and (max-width: 1068px) {
.page-overview .radio-stations .subsection-subheadline { margin-top: 0; margin-bottom: 14px
}
} @media only screen and (max-width: 735px) {
.page-overview .radio-stations .subsection-subheadline { margin-bottom: 10px
}
}
.page-overview .radio-stations .radio-stations-container { position: relative
}
.page-overview .radio-stations .section-content { position: relative
}
.page-overview .radio-stations .station-gallery-hardware-container { padding-top: 50px; padding-bottom: 110px; position: relative; width: 306px; margin: 0 auto
}
.page-overview .radio-stations .station-gallery-hardware-container.is-supported { -webkit-transition: all 0.7s cubic-bezier(0.32, 0.07, 0.41, 1); transition: all 0.7s cubic-bezier(0.32, 0.07, 0.41, 1); -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95)
}
.page-overview .radio-stations .station-gallery-hardware-container.is-supported.animate-levitate { -webkit-transform: scale(1, 1); transform: scale(1, 1)
}
.page-overview .radio-stations .station-gallery-hardware-container.is-supported.animate-levitate .drop-shadow { opacity: 0.75; -webkit-transform: translate3d(-30px, 50px, 0); transform: translate3d(-30px, 50px, 0)
} @media only screen and (max-width: 1068px) {
.page-overview .radio-stations .station-gallery-hardware-container.is-supported.animate-levitate .drop-shadow { -webkit-transform: translate3d(-10px, 30px, 0); transform: translate3d(-10px, 30px, 0)
}
} @media only screen and (max-width: 735px) {
.page-overview .radio-stations .station-gallery-hardware-container.is-supported.animate-levitate .drop-shadow { -webkit-transform: translate3d(-5px, 10px, 0); transform: translate3d(-5px, 10px, 0)
}
}
.page-overview .radio-stations .station-gallery-hardware-container.is-supported .drop-shadow { -webkit-transition: all 0.7s cubic-bezier(0.32, 0.07, 0.41, 1); transition: all 0.7s cubic-bezier(0.32, 0.07, 0.41, 1); opacity: 0.9999
} @media only screen and (max-width: 1068px) {
.page-overview .radio-stations .station-gallery-hardware-container { width: 219px
}
} @media only screen and (max-width: 735px) {
.page-overview .radio-stations .station-gallery-hardware-container { width: 189px
}
}
.page-overview .radio-stations .drop-shadow { z-index: 0; position: absolute; top: -80px; left: -130px; z-index: -1
} @media only screen and (max-width: 1068px) {
.page-overview .radio-stations .drop-shadow { top: -20px; left: -80px
}
} @media only screen and (max-width: 735px) {
.page-overview .radio-stations .drop-shadow { top: -30px; left: -80px
}
}
.page-overview .radio-stations p { margin-bottom: 0
}
.page-overview .section-music-everywhere .card-hero { background-repeat: no-repeat; background-image: none
} @media only screen and (max-width: 1068px) {
.page-overview .section-music-everywhere .card-hero { background-repeat: no-repeat; background-image: none
}
} @media only screen and (max-width: 735px) {
.page-overview .section-music-everywhere .card-hero { background-repeat: no-repeat; background-image: none
}
} @media only screen and (max-width: 735px) {
.page-overview .section-music-everywhere .card-hero { background-image: none
}
} @media only screen and (max-width: 735px) {
.page-overview .section-music-everywhere .card-hero .image-card-hero { background-repeat: no-repeat; background-image: none; background-size: cover
}
} @media only screen and (max-width: 735px) and (max-width: 1068px) {
.page-overview .section-music-everywhere .card-hero .image-card-hero { background-repeat: no-repeat; background-image: none
}
} @media only screen and (max-width: 735px) and (max-width: 735px) {
.page-overview .section-music-everywhere .card-hero .image-card-hero { background-repeat: no-repeat; background-image: none
}
}
.page-overview .section-music-everywhere .card-hero .copy-wrapper { width: 380px
} @media only screen and (max-width: 1068px) {
.page-overview .section-music-everywhere .card-hero .copy-wrapper { width: 380px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-music-everywhere .card-hero .copy-wrapper { width: 100%
}
}
.page-overview .section-music-everywhere .section-title { padding-bottom: 165px
} @media only screen and (max-width: 1068px) {
.page-overview .section-music-everywhere .section-title { padding-bottom: 102px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-music-everywhere .section-title { padding-bottom: 35px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-music-everywhere .section-title .section-headline { padding-bottom: 19px
}
}
.page-overview .section-music-everywhere .image-everywhere-offline { left: 50%; margin-left: -1291px; position: relative
} @media only screen and (max-width: 1068px) {
.page-overview .section-music-everywhere .image-everywhere-offline { left: 50%; margin-left: -559px; position: relative
}
} @media only screen and (max-width: 735px) {
.page-overview .section-music-everywhere .image-everywhere-offline { left: 50%; margin-left: -319.5px; position: relative
}
}
.page-overview .section-music-everywhere .text-offline { margin-top: -400px
} @media only screen and (max-width: 1068px) {
.page-overview .section-music-everywhere .text-offline { margin-top: -300px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-music-everywhere .text-offline { margin-top: 0; margin-bottom: 10px
}
}
.page-overview .section-music-everywhere .text-title { margin-top: 8px
} @media only screen and (max-width: 1068px) {
.page-overview .section-music-everywhere .text-title { margin-top: 7px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-music-everywhere .text-title { margin-top: 0
}
}
.page-overview .section-music-everywhere .image-everywhere-sonos { left: 50%; margin-left: -780px; position: relative; margin-top: -310px; margin-bottom: 63px
} @media only screen and (max-width: 1068px) {
.page-overview .section-music-everywhere .image-everywhere-sonos { left: 50%; margin-left: -508.5px; position: relative
}
} @media only screen and (max-width: 735px) {
.page-overview .section-music-everywhere .image-everywhere-sonos { left: 50%; margin-left: -145.5px; position: relative
}
} @media only screen and (max-width: 1068px) {
.page-overview .section-music-everywhere .image-everywhere-sonos { margin-top: -218px; margin-bottom: 73px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-music-everywhere .image-everywhere-sonos { margin-top: 14px
}
}
.page-overview .section-music-everywhere .text-sonos { margin-top: 55px; float: none
} @media only screen and (max-width: 1068px) {
.page-overview .section-music-everywhere .text-sonos { margin-top: -15px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-music-everywhere .text-sonos { float: left; margin-top: 0; padding-top: 259px
}
}
.page-overview .section-music-everywhere .image-everywhere-airpods { display: inline-block; margin-top: -50px
} @media only screen and (max-width: 1068px) {
.page-overview .section-music-everywhere .image-everywhere-airpods { margin-top: -10px; margin-bottom: 0
}
} @media only screen and (max-width: 735px) {
.page-overview .section-music-everywhere .image-everywhere-airpods { left: 50%; margin-left: -162px; position: relative; margin-top: 68px; margin-bottom: -12px
}
} @media only screen and (max-width: 735px) and (max-width: 1068px) {
.page-overview .section-music-everywhere .image-everywhere-airpods { left: 50%; margin-left: -105.5px; position: relative
}
} @media only screen and (max-width: 735px) and (max-width: 735px) {
.page-overview .section-music-everywhere .image-everywhere-airpods { left: 50%; margin-left: -35px; position: relative
}
}
.page-overview .section-music-everywhere .violator { margin-top: 24px
}
.page-overview .section-music-everywhere .center-align { display: table
}
.page-overview .section-music-everywhere .center-content { display: table-cell; vertical-align: middle
}
.page-overview .section-membership-router { background-color: #fff; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; height: auto; position: relative; color: #231f20
}
.page-overview .section-membership-router .section-content { padding-top: 96px; padding-bottom: 88px
} @media only screen and (max-width: 1068px) {
.page-overview .section-membership-router .section-content { padding-top: 72px; padding-bottom: 68px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-membership-router .section-content { padding-top: 56px; padding-bottom: 52px
}
}
.page-overview .section-membership-router .section-headline, .page-overview .section-membership-router .section-headline span, .page-overview .section-membership-router p, .page-overview .section-membership-router p span, .page-overview .section-membership-router .camara-router-contact-headline, .page-overview .section-membership-router .camara-router-contact-headline span, .page-overview .section-membership-router .camara-router-contact-copy, .page-overview .section-membership-router .camara-router-contact-copy span, .page-overview .section-membership-router .camara-router-contact-copy a { font-family: var(--camara-site-font-family); letter-spacing: 0
}
.page-overview .section-membership-router .section-headline { margin-top: 0; margin-bottom: 18px
} @media only screen and (min-width: 736px) {
.page-overview .section-membership-router .section-headline { white-space: nowrap
}
}
.page-overview .section-membership-router .section-headline .camara-router-headline-soft { font-weight: 400
}
.page-overview .section-membership-router p { margin-top: 0
}
.page-overview .section-membership-router p[data-key="site.router.copy"] { font-size: 1.3em
}
.page-overview .section-membership-router .camara-router-brands { margin-top: 20px; padding-top: 40px; padding-bottom: 44px
}
.page-overview .section-membership-router .camara-router-brands .camara-brand-collection-host { max-width: none; margin: 0
}
.page-overview .section-membership-router .camara-router-brands .camara-brand-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; row-gap: 18px; align-items: center
}
.page-overview .section-membership-router .camara-router-brands .camara-brand-item-inner, .page-overview .section-membership-router .camara-router-brands .camara-brand-media { min-height: 56px
}
.page-overview .section-membership-router .camara-router-brands .camara-brand-item:nth-child(5n+1) .camara-brand-logo-shell { justify-content: flex-start; transform-origin: 0 50%
}
.page-overview .section-membership-router .camara-router-brands .camara-brand-logo { max-width: 100%; max-height: 28px; width: auto; height: auto; margin: 0 auto; object-fit: contain; object-position: 50% 50%
} @media only screen and (max-width: 1068px) {
.page-overview .section-membership-router .camara-router-brands { margin-top: 18px; padding-top: 32px; padding-bottom: 36px
}
.page-overview .section-membership-router .camara-router-brands .camara-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; row-gap: 18px
}
.page-overview .section-membership-router .camara-router-brands .camara-brand-item-inner, .page-overview .section-membership-router .camara-router-brands .camara-brand-media { min-height: 50px
}
.page-overview .section-membership-router .camara-router-brands .camara-brand-item:nth-child(5n+1) .camara-brand-logo-shell { justify-content: center; transform-origin: 50% 50%
}
.page-overview .section-membership-router .camara-router-brands .camara-brand-item:nth-child(3n+1) .camara-brand-logo-shell { justify-content: flex-start; transform-origin: 0 50%
}
.page-overview .section-membership-router .camara-router-brands .camara-brand-logo { max-height: 24px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-membership-router .camara-router-brands { margin-top: 16px; padding-top: 24px; padding-bottom: 28px
}
.page-overview .section-membership-router .camara-router-brands .camara-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 16px
}
.page-overview .section-membership-router .camara-router-brands .camara-brand-item-inner, .page-overview .section-membership-router .camara-router-brands .camara-brand-media { min-height: 44px
}
.page-overview .section-membership-router .camara-router-brands .camara-brand-item:nth-child(3n+1) .camara-brand-logo-shell { justify-content: center; transform-origin: 50% 50%
}
.page-overview .section-membership-router .camara-router-brands .camara-brand-item:nth-child(2n+1) .camara-brand-logo-shell { justify-content: flex-start; transform-origin: 0 50%
}
.page-overview .section-membership-router .camara-router-brands .camara-brand-logo { max-height: 22px
}
}
.page-overview .section-membership-router .camara-router-contact { margin-top: 12px
} @media only screen and (max-width: 1068px) {
.page-overview .section-membership-router .camara-router-contact { margin-top: 10px
}
} @media only screen and (max-width: 735px) {
.page-overview .section-membership-router .camara-router-contact { margin-top: 8px
}
}
.page-overview .section-membership-router .camara-router-contact-headline { margin-top: 0; margin-bottom: 12px; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: #231f20
} @media only screen and (max-width: 735px) {
.page-overview .section-membership-router .camara-router-contact-headline { font-size: 17px
}
}
.page-overview .section-membership-router .camara-router-contact-copy { max-width: 420px; font-size: 18px; line-height: 1.3; color: #231f20
} @media only screen and (max-width: 735px) {
.page-overview .section-membership-router .camara-router-contact-copy { font-size: 17px
}
}
.page-overview .section-membership-router .camara-router-contact-copy a { color: #00bfff !important; font: inherit; letter-spacing: inherit; text-decoration: none; transition: color 160ms ease
}
.page-overview .section-membership-router .camara-router-contact-copy a:hover, .page-overview .section-membership-router .camara-router-contact-copy a:focus-visible { color: #000 !important
}
.camara-brand-media { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden
}
.camara-brand-logo-shell { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform: translate(var(--camara-brand-offset-x, 0%), var(--camara-brand-offset-y, 0%)) scale(var(--camara-brand-scale, 1)); transform-origin: 50% 50%
}
.camara-brand-logo { display: block; opacity: 0.42
}
.camara-work-media { position: relative; display: block; width: 100%; min-height: 320px; overflow: hidden; background: #fff
}
.camara-work-media > .camara-work-figure,
.camara-work-media > .camara-work-video { display: block; width: 100%; min-height: 320px; margin: 0
}
.camara-work-video-shell { position: relative; width: 100%; min-height: 320px; background: #fff
}
.camara-work-media.is-video,
.camara-work-media.is-video > .camara-work-video-shell,
.camara-work-media.is-video > .camara-work-video { min-height: 0
}
.camara-work-video { display: block; width: 100%; height: auto; object-fit: contain; object-position: 50% 50%; background: #fff
}
.camara-work-play-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 62px; height: 62px; padding: 0; border: 1px solid rgba(22,28,38,.12); border-radius: 999px; background: rgba(255,255,255,.96); cursor: pointer; box-shadow: 0 10px 30px rgba(15,17,21,.12); -webkit-appearance: none; appearance: none; line-height: 0
}
.camara-work-play-icon { display: block; width: 0; height: 0; margin: 0 0 0 2px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #111
}
.camara-work-video-shell.is-playing .camara-work-play-button { opacity: 0; pointer-events: none
} @media only screen and (max-width: 735px) {
.camara-work-media,
.camara-work-media > .camara-work-figure,
.camara-work-media > .camara-work-video { min-height: 240px
}
.camara-work-video-shell { min-height: 240px
}
.camara-work-media.is-video,
.camara-work-media.is-video > .camara-work-video-shell,
.camara-work-media.is-video > .camara-work-video { min-height: 0
}
.camara-work-video { height: auto
}
.camara-work-play-button { width: 56px; height: 56px
}
}
.page-overview .section-experience .card-detail-content { background: #ffffff; padding-top: 0; padding-right: 0; padding-left: 0; padding-bottom: 122px
}