/* video chart toggle */
#performance .chart-toggle { height: 440px; }

#performance .chart-toggle .nav { position: relative; margin-bottom: 35px; }

#performance .chart-toggle .nav .trigger { overflow: hidden; cursor: pointer; }

#performance .chart-toggle .first-panel, #performance .chart-toggle .second-panel { -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; }

#performance .chart-toggle .first-panel, #performance .chart-toggle .second-panel { visibility: hidden; }

#performance .chart-toggle.first .first-panel, #performance .chart-toggle.second .second-panel { visibility: visible; }

#performance .chart-toggle.enhanced .first-panel, #performance .chart-toggle.enhanced .second-panel { visibility: visible; opacity: 0; }

#performance .chart-toggle.first.enhanced .first-panel, #performance .chart-toggle.second.enhanced .second-panel { opacity: 1; }

html.desktop { /* hero section  */ /* ipad portrait */ /* ipad landscape */ /* main content */ /* sections */ /* video chart toggle */ /* interstitials */ /* charts */ /* fade in on */ }
html.desktop, html.desktop body, html.desktop #performance #wrapper, html.desktop #performance #hero { height: 100%; width: 100%; min-height: 583px; }
html.desktop #performance #hero { top: 20px; position: relative; min-width: 980px; z-index: 2; height: 100%; margin: 0 0 0px 0; }
html.desktop #performance #hero .stage { position: relative; height: 72%; width: 100%; overflow: hidden; }
html.desktop #performance #hero .title { position: absolute; z-index: 3; top: 50%; left: 50%; margin: -59px 0 0 -490px; }
html.desktop #performance #hero .manifesto { position: relative; z-index: 3; height: 40%; width: 100%; min-height: 250px; margin: 0; padding: 0 0 20px 0; }
html.desktop #performance #hero .manifesto .copy { position: absolute; top: 50%; left: 50%; margin: -126px 0 0 -491px; }
html.desktop #performance #hero .background .inner { overflow: hidden; height: 100%; width: 3000px; position: absolute; left: 50%; margin: 0 -1500px; }
html.desktop #performance #hero .background .inner .imagery.ir { display: none; }
html.desktop #performance #hero .background .inner .imagery { display: block; margin: 0 auto; height: 100%; width: auto; }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { html.desktop #performance #hero .stage { height: 891px; }
  html.desktop #performance #hero .background .inner .imagery { width: 891px; } }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { html.desktop #performance #hero .stage { height: 483px; }
  html.desktop #performance #hero .background .inner .imagery { width: 483px; } }
html.desktop #performance #main, html.desktop #performance .sosumi, html.desktop #performance .footer-wrapper { position: relative; top: 150px; }
html.desktop #performance .row { position: relative; width: 897px; padding-left: 83px; margin: 64px auto 110px; }
html.desktop #performance .row .copy { width: 525px; margin-bottom: 55px; }
html.desktop #performance .row .copy h3, html.desktop #performance .row .copy p { font-size: 1.333em; line-height: 1.6875; }
html.desktop #performance .row .callouts { width: 281px; position: absolute; top: 137px; right: 0; }
html.desktop #performance .row .callouts .callout { font-size: 1.1em; margin-bottom: 60px; border-radius: 0; width: 142px; padding-top: 7px; border-top: 1px solid #999; }
html.desktop #performance .row .callouts .callout h3 { width: 134px; color: #f0f0f0; margin-bottom: 10px; }
html.desktop #performance .row .callouts .callout .data { margin-bottom: 10px; }
html.desktop #performance .row .title { margin-bottom: 80px; }
html.desktop #performance .row .chart .title { margin-bottom: 35px; }
html.desktop #performance .row .chart .text-value { color: #fff; }
html.desktop #performance .row .chart .text-value .data-subdued { color: #999999; padding-left: 5px; }
html.desktop #performance #video .callouts .callout { margin-bottom: 64px; }
html.desktop #performance #video .callouts .callout h3 { margin-bottom: 25px; }
html.desktop #performance #video .callouts .gpu { padding-top: 0; border-top: 0; }
html.desktop #performance #video .callouts .gpu .dualgpus { margin-left: -6px; }
html.desktop #performance #video .callouts .gpu .icon { margin-bottom: 14px; }
html.desktop #performance #video .callouts .displays .fourk.ir { margin: -15px 0 0 0; }
html.desktop #performance #video .charts { position: relative; }
html.desktop #performance #video .charts #video-chart { position: absolute; z-index: 5; }
html.desktop #performance #video .chart .title { margin-left: -8px; }
html.desktop #performance .chart-toggle .title { display: none; }
html.desktop #performance .chart-toggle .nav { margin-bottom: 35px; }
html.desktop #performance .chart-toggle .nav .trigger { display: block; float: left; margin: 16px 40px 16px 0; }
html.desktop #performance .chart-toggle .nav .trigger { -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; }
html.desktop #performance .chart-toggle .nav .trigger { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=31)"; filter: alpha(opacity=31); opacity: 0.31; }
html.desktop #performance .chart-toggle .trigger.active { cursor: default; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }
html.desktop #performance .chart-toggle .nav .underline { display: block; position: absolute; height: 1px; width: 201px; border-top: 1px solid white; -webkit-transition: left 0.5s ease-out; -moz-transition: left 0.5s ease-out; transition: left 0.5s ease-out; }
html.desktop #performance .chart-toggle.first .nav .underline { left: 0; }
html.desktop #performance .chart-toggle.second .nav .underline { left: 210px; }
html.desktop #performance #modeling .callouts .gbs .value { margin: -17px 0 -4px -2px; }
html.desktop #performance #modeling .callouts .teraflops .value { margin: -17px 0 -3px 0; }
html.desktop #performance #photography .callouts .callout.thunderbolt .data { margin: -4px 0 -2px 0; }
html.desktop #performance #photography .callouts .callout { border-top: none; padding-top: 0; }
html.desktop #performance #photography .callouts .callout .description { border-top: 1px solid #999; padding-top: 8px; }
html.desktop #performance #photography .callouts .callout .value { margin: -10px 0 -1px 0; }
html.desktop #performance #photography .callouts .callout.thunderbolt .name { margin-left: -2px; }
html.desktop #performance #audio .callouts .bandwidth .value { margin: -16px 0 0 0; }
html.desktop #performance #science .callouts .callout { float: left; }
html.desktop #performance #science .callouts .callout h3 { padding-top: 0; border: none; width: auto; }
html.desktop #performance #science .callouts .callout.processor { margin-right: 45px; }
html.desktop #performance #science .callouts .callout.daisychain .value { margin: -20px 0 -2px 0; }
html.desktop #performance #science .callouts .callout.gpus { padding-top: 7px; border-top: 0; }
html.desktop #performance #science .callouts .callout.gpus .value { margin: -15px 0 -4px 0; }
html.desktop #performance #science .callouts .callout.gpus .name { margin: 0 0 8px 0; }
html.desktop #performance #science .callouts .callout.gpus .description { padding-top: 10px; border-top: 1px solid #999; }
html.desktop #performance .interstitial { width: 100%; margin: 0 auto; height: 500px; min-height: 425px; max-height: 650px; background: #1b1b1b; overflow: hidden; position: relative; -webkit-transform: translateZ(0); }
@media only screen and (max-device-width: 768px) { html.desktop #performance .interstitial { -webkit-transform: none; } }
html.desktop #performance .interstitial .imagery { position: absolute; top: 0; left: 50%; margin-left: -580px; -webkit-transform: translateZ(0); }
html.desktop #performance .interstitial.brand .imagery { margin-left: -684px; }
html.desktop #performance .static-interstitial .interstitial.brand .imagery { margin-top: -100px; }
html.desktop #performance .interstitial.fan .imagery { margin-left: -666px; }
html.desktop #performance .interstitial.heatcore .imagery { margin-left: -875px; }
html.desktop #performance .static-interstitial .interstitial.heatcore .imagery { margin-top: 40px; }
html.desktop #performance .interstitial.design { background: url(https://www.apple.com/v/mac-pro/b/images/design_bg.png) repeat-y 60%; background: -webkit-linear-gradient(left, #1b1b1b 60%, black 60%, black 100%); background: -moz-linear-gradient(left, #1b1b1b 60%, black 60%, black 100%); background: -ms-linear-gradient(left, #1b1b1b 60%, black 60%, black 100%); background: -o-linear-gradient(left, #1b1b1b 60%, black 60%, black 100%); background: linear-gradient(to right, #1b1b1b 60%, black 60%, black 100%); }
html.desktop #performance .static-interstitial .interstitial.design .imagery { margin-top: -120px; }
html.desktop #performance .interstitial.design .imagery { margin-left: -670px; }
html.desktop #performance .interstitial.boards .imagery { margin-left: -622px; }
html.desktop #performance .interstitial.back .imagery { margin-left: -653px; }
html.desktop #performance .static-interstitial .interstitial.boards .imagery { margin-top: -360px; }
html.desktop #performance .static-interstitial .interstitial.back .imagery { margin-top: -40px; }
html.desktop #performance .row .chart .bar .text-value { white-space: nowrap; opacity: 0; }
html.desktop #performance .row .chart .visual-label { position: absolute; left: -180px; top: -11px; opacity: 0; }
html.desktop #performance .chart .caption-value, html.desktop #performance .chart .bar-caption, html.desktop #performance .chart .data-value { display: none; }
html.desktop #performance .row .chart.animate .bar .text-value, html.desktop #performance .row .chart.animate .visual-label { opacity: 1; }
html.desktop #performance .row .chart .bar.blue { border-top: 3px solid #70bce2; }
html.desktop #performance .row .chart .bar.orange { border-top: 3px solid #f59000; }
html.desktop #performance .row .chart { width: 450px; }
html.desktop #performance .row .chart .bars { padding-top: 11px; }
html.desktop #performance .row .chart .bar { position: relative; left: 100px; margin: 0 0 28px 0; padding-top: 6px; width: 0%; opacity: 1; -webkit-transition-property: all; -moz-transition-property: all; transition-property: all; -webkit-transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1); -moz-transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1); transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1); -webkit-transition-duration: .4s; -moz-transition-duration: .4s; transition-duration: .4s; }
html.desktop #performance .row .chart .bar .text-value, html.desktop #performance .row .chart .visual-label { -webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; -webkit-transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1); -moz-transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1); transition-timing-function: cubic-bezier(0.28, 0.11, 0.32, 1); -webkit-transition-duration: .2s; -moz-transition-duration: .2s; transition-duration: .2s; }
html.desktop #performance .row .chart .bar.one, html.desktop #performance .row .chart .bar.one .text-value, html.desktop #performance .row .chart .bar.one .visual-label { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; }
html.desktop #performance .row .chart .bar.two, html.desktop #performance .row .chart .bar.two .text-value, html.desktop #performance .row .chart .bar.two .visual-label { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; transition-delay: 0.1s; }
html.desktop #performance .row .chart .bar.three, html.desktop #performance .row .chart .bar.three .text-value, html.desktop #performance .row .chart .bar.three .visual-label { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; }
html.desktop #performance .row .chart .bar.four, html.desktop #performance .row .chart .bar.four .text-value, html.desktop #performance .row .chart .bar.four .visual-label { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; }
html.desktop #performance .row .chart .bar.five, html.desktop #performance .row .chart .bar.five .text-value, html.desktop #performance .row .chart .bar.five .visual-label { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; }
html.desktop #performance .row .chart .bar, html.desktop #performance .row .chart .bar .text-value, html.desktop #performance .row .chart .bar .visual-label { -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition-delay: 0.5s; }

html.mobile #performance { width: inherit; }
html.mobile #performance #hero { padding-top: 58px; }
html.mobile #performance #hero .stage { position: relative; padding-bottom: 141px; }
html.mobile #performance #hero .stage .title { display: none; }
html.mobile #performance #hero .stage .inner img { display: none; }
html.mobile #performance #hero .manifesto { padding-bottom: 182px; }
html.mobile #performance #main { /* Shared */ /* Interstitials */ /* Toggle-Chart */ /* Sections */ }
html.mobile #performance #main p { color: #999; }
html.mobile #performance #main .callout p { color: #FFF; }
html.mobile #performance #main .callout .ir { padding-top: 0; margin-top: 0; }
html.mobile #performance #main .copy h3 { padding-top: 100px; margin-top: -30px; }
html.mobile #performance #main .interstitial { margin-left: -58px; margin-right: -58px; }
html.mobile #performance #main .interstitial.brand { background-color: #212121; padding-top: 40px; }
html.mobile #performance #main .interstitial.fan { background-color: #1A1A1A; padding-top: 140px; }
html.mobile #performance #main .interstitial.heatcore { background-color: #1B1B1B; padding-top: 140px; }
html.mobile #performance #main .interstitial.design { background-color: #1B1B1B; padding-top: 10px; }
html.mobile #performance #main .interstitial.boards { background-color: #151515; padding-bottom: 160px; }
html.mobile #performance #main .interstitial.top { background-color: #1B1B1B; padding-top: 80px; }
html.mobile #performance #main .chart-toggle { position: relative; }
html.mobile #performance #main .chart-toggle nav { position: absolute; bottom: 0; width: 924px; left: 50%; margin-left: -462px; text-align: center; }
html.mobile #performance #main .chart-toggle nav .ir { text-indent: 0; }
html.mobile #performance #main .chart-toggle nav ul { text-align: center; }
html.mobile #performance #main .chart-toggle nav .trigger { margin: 40px 0; width: 49%; font-size: .8em; display: inline-block; color: #FFF; line-height: 2.8; background-color: #242424; }
html.mobile #performance #main .chart-toggle nav .trigger span { display: none; }
html.mobile #performance #main .chart-toggle nav .trigger.active { background-color: #404040; }
html.mobile #performance #main .chart-toggle nav .trigger:first-child { border-radius: 10px 0 0 10px; margin-right: -5px; }
html.mobile #performance #main .chart-toggle nav .trigger:last-child { border-radius: 0 10px 10px 0; margin-left: -5px; }
html.mobile #performance #main .chart-toggle .chart { position: absolute; top: 0; left: 0; }
html.mobile #performance #main .chart-toggle .title { position: absolute; }
html.mobile #performance #main section > .title, html.mobile #performance #main section .chart > .title, html.mobile #performance #main section > .copy > .title { margin-top: 107px; margin-bottom: 44px; }
html.mobile #performance #main #video { margin-top: 4px; }
html.mobile #performance #main #video .copy { margin-bottom: 70px; }
html.mobile #performance #main #video .visual-label.one { right: 0; }
html.mobile #performance #main #video .chart-toggle { height: 940px; }
html.mobile #performance #main #video .chart-toggle .chart { top: 84px; }
html.mobile #performance #main #video .callout:first-child { border-top: none; }
html.mobile #performance #main #video .callout:first-child h3 { margin-top: 45px; }
html.mobile #performance #main #photography .callouts { margin-top: 160px; }
html.mobile #performance #main #audio { margin-bottom: 107px; }
html.mobile #performance #main #science { margin-bottom: 107px; }
html.mobile #performance #main #science .callouts { margin-top: 150px; }
html.mobile #performance #main #science .callouts .callout:first-child br { display: block; }

.desktop #performance { /* Graphs */ /* Interstitials */ }
.desktop #performance .bars-container .visual-label { text-indent: 9999px; width: 147px; height: 31px; }
.desktop #performance .interstitial.brand .imagery { background-image: url(https://www.apple.com/v/mac-pro/b/images/interstitial_brand.jpg); width: 1368px; height: 769px; }
.desktop #performance .interstitial.fan .imagery { background-image: url(https://www.apple.com/v/mac-pro/b/images/interstitial_fan.jpg); width: 2392px; height: 550px; }
.desktop #performance .interstitial.heatcore .imagery { background-image: url(https://www.apple.com/v/mac-pro/b/images/interstitial_heatcore.jpg); width: 1740px; height: 549px; }
.desktop #performance .interstitial.design .imagery { background-image: url(https://www.apple.com/v/mac-pro/b/images/interstitial_design.jpg); width: 1196px; height: 733px; }
.desktop #performance .interstitial.boards .imagery { background-image: url(https://www.apple.com/v/mac-pro/b/images/interstitial_boards.jpg); width: 1244px; height: 1031px; }
.desktop #performance .interstitial.back .imagery { background-image: url(https://www.apple.com/v/mac-pro/b/images/interstitial_back.jpg); width: 1307px; height: 933px; }

html.mobile #performance { /* Graphs */ /* Interstitials */ }
html.mobile #performance .bars-container .visual-label { text-indent: 9999px; width: 71px; height: 31px; }
html.mobile #performance #video .callouts .callout.first .icon { background-image: url(https://www.apple.com/v/mac-pro/b/images/mobile/video_gpu_icon_2x.jpg); width: 316px; height: 192px; }
html.mobile #performance .interstitial.brand .imagery { background-image: url(https://www.apple.com/v/mac-pro/b/images/mobile/interstitial_film_2x.jpg); width: 1024px; height: 700px; }
html.mobile #performance .interstitial.fan .imagery { background-image: url(https://www.apple.com/v/mac-pro/b/images/mobile/interstitial_fan_2x.jpg); width: 1024px; height: 600px; }
html.mobile #performance .interstitial.heatcore .imagery { background-image: url(https://www.apple.com/v/mac-pro/b/images/mobile/interstitial_heatcore_2x.jpg); width: 1024px; height: 600px; }
html.mobile #performance .interstitial.design .imagery { background-image: url(https://www.apple.com/v/mac-pro/b/images/mobile/interstitial_design_2x.jpg); width: 1024px; height: 730px; }
html.mobile #performance .interstitial.boards .imagery { background-image: url(https://www.apple.com/v/mac-pro/b/images/mobile/interstitial_boards_2x.jpg); width: 1024px; height: 642px; }
html.mobile #performance .interstitial.back .imagery { background-image: url(https://www.apple.com/v/mac-pro/b/images/mobile/interstitial_back_2x.jpg); width: 1024px; height: 740px; }