.nobreak,.nb,.nobreak-all,.nb-all,.nobreak-xs,.nb-xs { display: inline-block; white-space: nowrap } @media only screen and (min-width: 561px) { .nobreak-sm,.nb-sm { display: inline-block; white-space: nowrap } } @media only screen and (min-width: 769px) { .nobreak-md,.nb-md { display: inline-block; white-space: nowrap } } @media only screen and (min-width: 1041px) { .nobreak-lg,.nb-lg { display: inline-block; white-space: nowrap } } @media only screen and (min-width: 1441px) { .nobreak-xl,.nb-xl { display: inline-block; white-space: nowrap } } .nbsp-all:before { content: "\00a0"; display: inline } .nbsp-all:after { content: " "; display: none } .nbsp-xs:before,.nbsp-sm:before,.nbsp-md:before,.nbsp-lg:before { content: "\00a0"; display: none } .nbsp-xs:after,.nbsp-sm:after,.nbsp-md:after,.nbsp-lg:after { content: " "; display: inline } @media only screen and (max-width: 560px) { .nbsp-xs:before { content: "\00a0"; display: inline } .nbsp-xs:after { content: " "; display: none } .br-xs { display: block; white-space: nowrap } } @media only screen and (min-width: 561px) and (max-width: 768px) { .nbsp-sm:before { content: "\00a0"; display: inline } .nbsp-sm:after { content: " "; display: none } .br-sm { display: block; white-space: nowrap } } @media only screen and (min-width: 769px) and (max-width: 1040px) { .nbsp-md:before { content: "\00a0"; display: inline } .nbsp-md:after { content: " "; display: none } .br-md { display: block; white-space: nowrap } } @media only screen and (min-width: 1041px) { .nbsp-lg:before { content: "\00a0"; display: inline } .nbsp-lg:after { content: " "; display: none } .br-lg { display: block; white-space: nowrap } } html { box-sizing: border-box } * { box-sizing: inherit } *:before,*:after { box-sizing: inherit } .container { position: relative; width: calc(100% - (5px * 4)); max-width: 1000px; margin-left: auto; margin-right: auto } .grid,.stretch { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .grid { margin-right: -5px; margin-left: -5px; max-width: 1010px } .grid.vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .grid .expand,.stretch .expand { -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto }[class*="col-"].grid,.content.grid { margin-left: 0; margin-right: 0 } .gapless { margin-left: 0; margin-right: 0 } .gapless [class*="col-"] { padding-left: 0; padding-right: 0 } .content { width: 100%; margin-bottom: 10px }[class*="end-"].grid { text-align: left }[class*="col-"] { position: relative; min-height: 1px; width: 100%; padding-left: 5px; padding-right: 5px } .col-xs { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-xs-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; max-width: 8.33333% } .col-xs-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; max-width: 16.66667% } .col-xs-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-xs-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333% } .col-xs-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.66667%; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; max-width: 41.66667% } .col-xs-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-xs-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.33333%; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; max-width: 58.33333% } .col-xs-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.66667%; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667% } .col-xs-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-xs-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.33333%; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; max-width: 83.33333% } .col-xs-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.66667%; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; max-width: 91.66667% } .col-xs-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .offset-xs-0 { margin-left: 0% } .offset-xs-1 { margin-left: 8.33333% } .offset-xs-2 { margin-left: 16.66667% } .offset-xs-3 { margin-left: 25% } .offset-xs-4 { margin-left: 33.33333% } .offset-xs-5 { margin-left: 41.66667% } .offset-xs-6 { margin-left: 50% } .offset-xs-7 { margin-left: 58.33333% } .offset-xs-8 { margin-left: 66.66667% } .offset-xs-9 { margin-left: 75% } .offset-xs-10 { margin-left: 83.33333% } .offset-xs-11 { margin-left: 91.66667% } .center-xs { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .start-xs { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; text-align: start } .end-xs { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; text-align: end } .top-xs { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start } .middle-xs { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .bottom-xs { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-align-self: auto; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto } .first-xs { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1 } .last-xs { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1 } .custom-w-xs { position: relative; min-height: 1px; box-sizing: content-box; width: calc(100% - (5px * 2)); padding-left: 5px; padding-right: 5px } .hide-xs { display: none !important } .show-xs { display: block !important } .show-inline-xs { display: inline !important } @media only screen and (min-width: 561px) { .container { width: calc(100% - (5px * 8)) } .col-sm { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-sm-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; max-width: 8.33333% } .col-sm-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; max-width: 16.66667% } .col-sm-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-sm-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333% } .col-sm-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.66667%; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; max-width: 41.66667% } .col-sm-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-sm-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.33333%; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; max-width: 58.33333% } .col-sm-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.66667%; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667% } .col-sm-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-sm-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.33333%; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; max-width: 83.33333% } .col-sm-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.66667%; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; max-width: 91.66667% } .col-sm-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .offset-sm-0 { margin-left: 0% } .offset-sm-1 { margin-left: 8.33333% } .offset-sm-2 { margin-left: 16.66667% } .offset-sm-3 { margin-left: 25% } .offset-sm-4 { margin-left: 33.33333% } .offset-sm-5 { margin-left: 41.66667% } .offset-sm-6 { margin-left: 50% } .offset-sm-7 { margin-left: 58.33333% } .offset-sm-8 { margin-left: 66.66667% } .offset-sm-9 { margin-left: 75% } .offset-sm-10 { margin-left: 83.33333% } .offset-sm-11 { margin-left: 91.66667% } .start-sm { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; text-align: start } .center-sm { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .end-sm { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; text-align: end } .top-sm { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start } .middle-sm { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .bottom-sm { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-align-self: auto; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto } .first-sm { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1 } .last-sm { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1 } .custom-w-sm { position: relative; min-height: 1px; box-sizing: content-box; width: calc(100% - (5px * 2)); padding-left: 5px; padding-right: 5px } .hide-sm { display: none !important } .show-sm { display: block !important } .show-inline-sm { display: inline !important } } @media only screen and (min-width: 769px) { .col-md { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-md-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; max-width: 8.33333% } .col-md-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; max-width: 16.66667% } .col-md-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-md-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333% } .col-md-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.66667%; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; max-width: 41.66667% } .col-md-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-md-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.33333%; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; max-width: 58.33333% } .col-md-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.66667%; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667% } .col-md-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-md-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.33333%; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; max-width: 83.33333% } .col-md-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.66667%; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; max-width: 91.66667% } .col-md-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .offset-md-0 { margin-left: 0% } .offset-md-1 { margin-left: 8.33333% } .offset-md-2 { margin-left: 16.66667% } .offset-md-3 { margin-left: 25% } .offset-md-4 { margin-left: 33.33333% } .offset-md-5 { margin-left: 41.66667% } .offset-md-6 { margin-left: 50% } .offset-md-7 { margin-left: 58.33333% } .offset-md-8 { margin-left: 66.66667% } .offset-md-9 { margin-left: 75% } .offset-md-10 { margin-left: 83.33333% } .offset-md-11 { margin-left: 91.66667% } .start-md { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; text-align: start } .center-md { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .end-md { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; text-align: end } .top-md { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start } .middle-md { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .bottom-md { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-align-self: auto; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto } .first-md { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1 } .last-md { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1 } .custom-w-md { position: relative; min-height: 1px; box-sizing: content-box; width: calc(100% - (5px * 2)); padding-left: 5px; padding-right: 5px } .hide-md { display: none !important } .show-md { display: block !important } .show-inline-md { display: inline !important } } @media only screen and (min-width: 1041px) { .col-lg { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-lg-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; max-width: 8.33333% } .col-lg-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; max-width: 16.66667% } .col-lg-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-lg-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333% } .col-lg-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.66667%; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; max-width: 41.66667% } .col-lg-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-lg-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.33333%; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; max-width: 58.33333% } .col-lg-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.66667%; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667% } .col-lg-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-lg-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.33333%; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; max-width: 83.33333% } .col-lg-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.66667%; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; max-width: 91.66667% } .col-lg-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .offset-lg-0 { margin-left: 0% } .offset-lg-1 { margin-left: 8.33333% } .offset-lg-2 { margin-left: 16.66667% } .offset-lg-3 { margin-left: 25% } .offset-lg-4 { margin-left: 33.33333% } .offset-lg-5 { margin-left: 41.66667% } .offset-lg-6 { margin-left: 50% } .offset-lg-7 { margin-left: 58.33333% } .offset-lg-8 { margin-left: 66.66667% } .offset-lg-9 { margin-left: 75% } .offset-lg-10 { margin-left: 83.33333% } .offset-lg-11 { margin-left: 91.66667% } .start-lg { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; text-align: start } .center-lg { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .end-lg { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; text-align: end } .top-lg { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start } .middle-lg { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .bottom-lg { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-align-self: auto; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto } .first-lg { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1 } .last-lg { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1 } .custom-w-lg { position: relative; min-height: 1px; box-sizing: content-box; width: calc(100% - (5px * 2)); padding-left: 5px; padding-right: 5px } .hide-lg { display: none !important } .show-lg { display: block !important } .show-inline-lg { display: inline !important } } @media only screen and (min-width: 1441px) { .col-xl { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100% } .col-xl-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.33333%; -ms-flex: 0 0 8.33333%; flex: 0 0 8.33333%; max-width: 8.33333% } .col-xl-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.66667%; -ms-flex: 0 0 16.66667%; flex: 0 0 16.66667%; max-width: 16.66667% } .col-xl-3 { -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25% } .col-xl-4 { -webkit-box-flex: 0; -webkit-flex: 0 0 33.33333%; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333% } .col-xl-5 { -webkit-box-flex: 0; -webkit-flex: 0 0 41.66667%; -ms-flex: 0 0 41.66667%; flex: 0 0 41.66667%; max-width: 41.66667% } .col-xl-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50% } .col-xl-7 { -webkit-box-flex: 0; -webkit-flex: 0 0 58.33333%; -ms-flex: 0 0 58.33333%; flex: 0 0 58.33333%; max-width: 58.33333% } .col-xl-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 66.66667%; -ms-flex: 0 0 66.66667%; flex: 0 0 66.66667%; max-width: 66.66667% } .col-xl-9 { -webkit-box-flex: 0; -webkit-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75% } .col-xl-10 { -webkit-box-flex: 0; -webkit-flex: 0 0 83.33333%; -ms-flex: 0 0 83.33333%; flex: 0 0 83.33333%; max-width: 83.33333% } .col-xl-11 { -webkit-box-flex: 0; -webkit-flex: 0 0 91.66667%; -ms-flex: 0 0 91.66667%; flex: 0 0 91.66667%; max-width: 91.66667% } .col-xl-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100% } .offset-xl-0 { margin-left: 0% } .offset-xl-1 { margin-left: 8.33333% } .offset-xl-2 { margin-left: 16.66667% } .offset-xl-3 { margin-left: 25% } .offset-xl-4 { margin-left: 33.33333% } .offset-xl-5 { margin-left: 41.66667% } .offset-xl-6 { margin-left: 50% } .offset-xl-7 { margin-left: 58.33333% } .offset-xl-8 { margin-left: 66.66667% } .offset-xl-9 { margin-left: 75% } .offset-xl-10 { margin-left: 83.33333% } .offset-xl-11 { margin-left: 91.66667% } .start-xl { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; text-align: start } .center-xl { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .end-xl { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; text-align: end } .top-xl { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start } .middle-xl { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .bottom-xl { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-align-self: auto; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto } .first-xl { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1 } .last-xl { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1 } .custom-w-xl { position: relative; min-height: 1px; box-sizing: content-box; width: calc(100% - (5px * 2)); padding-left: 5px; padding-right: 5px } .hide-xl { display: none !important } .show-xl { display: block !important } .show-inline-xl { display: inline !important } } .pos-abs-xs { position: absolute } .pos-abs-xs-top { position: absolute; top: 0; bottom: auto } .pos-abs-xs-bottom { position: absolute; top: auto; bottom: 0 } .pos-abs-xs-top-10 { position: absolute; top: 10px } .pos-abs-xs-top-20 { position: absolute; top: 20px } .pos-abs-xs-top-30 { position: absolute; top: 30px } .pos-abs-xs-top-40 { position: absolute; top: 40px } .pos-abs-xs-top-50 { position: absolute; top: 50px } .pos-abs-xs-top-60 { position: absolute; top: 60px } .pos-abs-xs-top-70 { position: absolute; top: 70px } .pos-abs-xs-top-80 { position: absolute; top: 80px } .pos-abs-xs-top-90 { position: absolute; top: 90px } .pos-abs-xs-top-100 { position: absolute; top: 100px } .pos-abs-xs-bottom-10 { position: absolute; bottom: 10px } .pos-abs-xs-bottom-20 { position: absolute; bottom: 20px } .pos-abs-xs-bottom-30 { position: absolute; bottom: 30px } .pos-abs-xs-bottom-40 { position: absolute; bottom: 40px } .pos-abs-xs-bottom-50 { position: absolute; bottom: 50px } .pos-abs-xs-bottom-60 { position: absolute; bottom: 60px } .pos-abs-xs-bottom-70 { position: absolute; bottom: 70px } .pos-abs-xs-bottom-80 { position: absolute; bottom: 80px } .pos-abs-xs-bottom-90 { position: absolute; bottom: 90px } .pos-abs-xs-bottom-100 { position: absolute; bottom: 100px }[class*="pos-abs-xs"].container { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) }[class*="pos-abs-xs-bottom"].title-container { margin-bottom: 0 } .w-xs-0 { width: calc(100% * (0 / 12) - (5px * 2)) } .l-xs-0 { left: calc(100% * (0 / 12) + 5px) } .r-xs-0 { right: calc(100% * (0 / 12) + 5px) } .w-xs-1 { width: calc(100% * (1 / 12) - (5px * 2)) } .l-xs-1 { left: calc(100% * (1 / 12) + 5px) } .r-xs-1 { right: calc(100% * (1 / 12) + 5px) } .w-xs-2 { width: calc(100% * (2 / 12) - (5px * 2)) } .l-xs-2 { left: calc(100% * (2 / 12) + 5px) } .r-xs-2 { right: calc(100% * (2 / 12) + 5px) } .w-xs-3 { width: calc(100% * (3 / 12) - (5px * 2)) } .l-xs-3 { left: calc(100% * (3 / 12) + 5px) } .r-xs-3 { right: calc(100% * (3 / 12) + 5px) } .w-xs-4 { width: calc(100% * (4 / 12) - (5px * 2)) } .l-xs-4 { left: calc(100% * (4 / 12) + 5px) } .r-xs-4 { right: calc(100% * (4 / 12) + 5px) } .w-xs-5 { width: calc(100% * (5 / 12) - (5px * 2)) } .l-xs-5 { left: calc(100% * (5 / 12) + 5px) } .r-xs-5 { right: calc(100% * (5 / 12) + 5px) } .w-xs-6 { width: calc(100% * (6 / 12) - (5px * 2)) } .l-xs-6 { left: calc(100% * (6 / 12) + 5px) } .r-xs-6 { right: calc(100% * (6 / 12) + 5px) } .w-xs-7 { width: calc(100% * (7 / 12) - (5px * 2)) } .l-xs-7 { left: calc(100% * (7 / 12) + 5px) } .r-xs-7 { right: calc(100% * (7 / 12) + 5px) } .w-xs-8 { width: calc(100% * (8 / 12) - (5px * 2)) } .l-xs-8 { left: calc(100% * (8 / 12) + 5px) } .r-xs-8 { right: calc(100% * (8 / 12) + 5px) } .w-xs-9 { width: calc(100% * (9 / 12) - (5px * 2)) } .l-xs-9 { left: calc(100% * (9 / 12) + 5px) } .r-xs-9 { right: calc(100% * (9 / 12) + 5px) } .w-xs-10 { width: calc(100% * (10 / 12) - (5px * 2)) } .l-xs-10 { left: calc(100% * (10 / 12) + 5px) } .r-xs-10 { right: calc(100% * (10 / 12) + 5px) } .w-xs-11 { width: calc(100% * (11 / 12) - (5px * 2)) } .l-xs-11 { left: calc(100% * (11 / 12) + 5px) } .r-xs-11 { right: calc(100% * (11 / 12) + 5px) } .w-xs-12 { width: calc(100% * (12 / 12) - (5px * 2)) } .l-xs-12 { left: calc(100% * (12 / 12) + 5px) } .r-xs-12 { right: calc(100% * (12 / 12) + 5px) } .w-xs-50 { width: calc(50% - (5px * 2)) } .w-xs-100 { width: calc(100% - (5px * 2)) } @media only screen and (min-width: 561px) { .pos-abs-sm { position: absolute } .pos-abs-sm-top { position: absolute; top: 0; bottom: auto } .pos-abs-sm-bottom { position: absolute; top: auto; bottom: 0 } .pos-abs-sm-top-10 { position: absolute; top: 10px } .pos-abs-sm-top-20 { position: absolute; top: 20px } .pos-abs-sm-top-30 { position: absolute; top: 30px } .pos-abs-sm-top-40 { position: absolute; top: 40px } .pos-abs-sm-top-50 { position: absolute; top: 50px } .pos-abs-sm-top-60 { position: absolute; top: 60px } .pos-abs-sm-top-70 { position: absolute; top: 70px } .pos-abs-sm-top-80 { position: absolute; top: 80px } .pos-abs-sm-top-90 { position: absolute; top: 90px } .pos-abs-sm-top-100 { position: absolute; top: 100px } .pos-abs-sm-bottom-10 { position: absolute; bottom: 10px } .pos-abs-sm-bottom-20 { position: absolute; bottom: 20px } .pos-abs-sm-bottom-30 { position: absolute; bottom: 30px } .pos-abs-sm-bottom-40 { position: absolute; bottom: 40px } .pos-abs-sm-bottom-50 { position: absolute; bottom: 50px } .pos-abs-sm-bottom-60 { position: absolute; bottom: 60px } .pos-abs-sm-bottom-70 { position: absolute; bottom: 70px } .pos-abs-sm-bottom-80 { position: absolute; bottom: 80px } .pos-abs-sm-bottom-90 { position: absolute; bottom: 90px } .pos-abs-sm-bottom-100 { position: absolute; bottom: 100px }[ class*="pos-abs-sm"].container { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) }[ class*="pos-abs-sm-bottom"].title-container { margin-bottom: 0 } .w-sm-0 { width: calc(100% * (0 / 12) - (5px * 2)) } .l-sm-0 { left: calc(100% * (0 / 12) + 5px) } .r-sm-0 { right: calc(100% * (0 / 12) + 5px) } .w-sm-1 { width: calc(100% * (1 / 12) - (5px * 2)) } .l-sm-1 { left: calc(100% * (1 / 12) + 5px) } .r-sm-1 { right: calc(100% * (1 / 12) + 5px) } .w-sm-2 { width: calc(100% * (2 / 12) - (5px * 2)) } .l-sm-2 { left: calc(100% * (2 / 12) + 5px) } .r-sm-2 { right: calc(100% * (2 / 12) + 5px) } .w-sm-3 { width: calc(100% * (3 / 12) - (5px * 2)) } .l-sm-3 { left: calc(100% * (3 / 12) + 5px) } .r-sm-3 { right: calc(100% * (3 / 12) + 5px) } .w-sm-4 { width: calc(100% * (4 / 12) - (5px * 2)) } .l-sm-4 { left: calc(100% * (4 / 12) + 5px) } .r-sm-4 { right: calc(100% * (4 / 12) + 5px) } .w-sm-5 { width: calc(100% * (5 / 12) - (5px * 2)) } .l-sm-5 { left: calc(100% * (5 / 12) + 5px) } .r-sm-5 { right: calc(100% * (5 / 12) + 5px) } .w-sm-6 { width: calc(100% * (6 / 12) - (5px * 2)) } .l-sm-6 { left: calc(100% * (6 / 12) + 5px) } .r-sm-6 { right: calc(100% * (6 / 12) + 5px) } .w-sm-7 { width: calc(100% * (7 / 12) - (5px * 2)) } .l-sm-7 { left: calc(100% * (7 / 12) + 5px) } .r-sm-7 { right: calc(100% * (7 / 12) + 5px) } .w-sm-8 { width: calc(100% * (8 / 12) - (5px * 2)) } .l-sm-8 { left: calc(100% * (8 / 12) + 5px) } .r-sm-8 { right: calc(100% * (8 / 12) + 5px) } .w-sm-9 { width: calc(100% * (9 / 12) - (5px * 2)) } .l-sm-9 { left: calc(100% * (9 / 12) + 5px) } .r-sm-9 { right: calc(100% * (9 / 12) + 5px) } .w-sm-10 { width: calc(100% * (10 / 12) - (5px * 2)) } .l-sm-10 { left: calc(100% * (10 / 12) + 5px) } .r-sm-10 { right: calc(100% * (10 / 12) + 5px) } .w-sm-11 { width: calc(100% * (11 / 12) - (5px * 2)) } .l-sm-11 { left: calc(100% * (11 / 12) + 5px) } .r-sm-11 { right: calc(100% * (11 / 12) + 5px) } .w-sm-12 { width: calc(100% * (12 / 12) - (5px * 2)) } .l-sm-12 { left: calc(100% * (12 / 12) + 5px) } .r-sm-12 { right: calc(100% * (12 / 12) + 5px) } .w-sm-50 { width: calc(50% - (5px * 2)) } .w-sm-100 { width: calc(100% - (5px * 2)) } } @media only screen and (min-width: 769px) { .pos-abs-md { position: absolute } .pos-abs-md-top { position: absolute; top: 0; bottom: auto } .pos-abs-md-bottom { position: absolute; top: auto; bottom: 0 } .pos-abs-md-top-10 { position: absolute; top: 10px } .pos-abs-md-top-20 { position: absolute; top: 20px } .pos-abs-md-top-30 { position: absolute; top: 30px } .pos-abs-md-top-40 { position: absolute; top: 40px } .pos-abs-md-top-50 { position: absolute; top: 50px } .pos-abs-md-top-60 { position: absolute; top: 60px } .pos-abs-md-top-70 { position: absolute; top: 70px } .pos-abs-md-top-80 { position: absolute; top: 80px } .pos-abs-md-top-90 { position: absolute; top: 90px } .pos-abs-md-top-100 { position: absolute; top: 100px } .pos-abs-md-bottom-10 { position: absolute; bottom: 10px } .pos-abs-md-bottom-20 { position: absolute; bottom: 20px } .pos-abs-md-bottom-30 { position: absolute; bottom: 30px } .pos-abs-md-bottom-40 { position: absolute; bottom: 40px } .pos-abs-md-bottom-50 { position: absolute; bottom: 50px } .pos-abs-md-bottom-60 { position: absolute; bottom: 60px } .pos-abs-md-bottom-70 { position: absolute; bottom: 70px } .pos-abs-md-bottom-80 { position: absolute; bottom: 80px } .pos-abs-md-bottom-90 { position: absolute; bottom: 90px } .pos-abs-md-bottom-100 { position: absolute; bottom: 100px }[ class*="pos-abs-md"].container { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) }[ class*="pos-abs-md-bottom"].title-container { margin-bottom: 0 } .w-md-0 { width: calc(100% * (0 / 12) - (5px * 2)) } .l-md-0 { left: calc(100% * (0 / 12) + 5px) } .r-md-0 { right: calc(100% * (0 / 12) + 5px) } .w-md-1 { width: calc(100% * (1 / 12) - (5px * 2)) } .l-md-1 { left: calc(100% * (1 / 12) + 5px) } .r-md-1 { right: calc(100% * (1 / 12) + 5px) } .w-md-2 { width: calc(100% * (2 / 12) - (5px * 2)) } .l-md-2 { left: calc(100% * (2 / 12) + 5px) } .r-md-2 { right: calc(100% * (2 / 12) + 5px) } .w-md-3 { width: calc(100% * (3 / 12) - (5px * 2)) } .l-md-3 { left: calc(100% * (3 / 12) + 5px) } .r-md-3 { right: calc(100% * (3 / 12) + 5px) } .w-md-4 { width: calc(100% * (4 / 12) - (5px * 2)) } .l-md-4 { left: calc(100% * (4 / 12) + 5px) } .r-md-4 { right: calc(100% * (4 / 12) + 5px) } .w-md-5 { width: calc(100% * (5 / 12) - (5px * 2)) } .l-md-5 { left: calc(100% * (5 / 12) + 5px) } .r-md-5 { right: calc(100% * (5 / 12) + 5px) } .w-md-6 { width: calc(100% * (6 / 12) - (5px * 2)) } .l-md-6 { left: calc(100% * (6 / 12) + 5px) } .r-md-6 { right: calc(100% * (6 / 12) + 5px) } .w-md-7 { width: calc(100% * (7 / 12) - (5px * 2)) } .l-md-7 { left: calc(100% * (7 / 12) + 5px) } .r-md-7 { right: calc(100% * (7 / 12) + 5px) } .w-md-8 { width: calc(100% * (8 / 12) - (5px * 2)) } .l-md-8 { left: calc(100% * (8 / 12) + 5px) } .r-md-8 { right: calc(100% * (8 / 12) + 5px) } .w-md-9 { width: calc(100% * (9 / 12) - (5px * 2)) } .l-md-9 { left: calc(100% * (9 / 12) + 5px) } .r-md-9 { right: calc(100% * (9 / 12) + 5px) } .w-md-10 { width: calc(100% * (10 / 12) - (5px * 2)) } .l-md-10 { left: calc(100% * (10 / 12) + 5px) } .r-md-10 { right: calc(100% * (10 / 12) + 5px) } .w-md-11 { width: calc(100% * (11 / 12) - (5px * 2)) } .l-md-11 { left: calc(100% * (11 / 12) + 5px) } .r-md-11 { right: calc(100% * (11 / 12) + 5px) } .w-md-12 { width: calc(100% * (12 / 12) - (5px * 2)) } .l-md-12 { left: calc(100% * (12 / 12) + 5px) } .r-md-12 { right: calc(100% * (12 / 12) + 5px) } .w-md-50 { width: calc(50% - (5px * 2)) } .w-md-100 { width: calc(100% - (5px * 2)) } } @media only screen and (min-width: 1041px) { .pos-abs-lg { position: absolute } .pos-abs-lg-top { position: absolute; top: 0; bottom: auto } .pos-abs-lg-bottom { position: absolute; top: auto; bottom: 0 } .pos-abs-lg-top-10 { position: absolute; top: 10px } .pos-abs-lg-top-20 { position: absolute; top: 20px } .pos-abs-lg-top-30 { position: absolute; top: 30px } .pos-abs-lg-top-40 { position: absolute; top: 40px } .pos-abs-lg-top-50 { position: absolute; top: 50px } .pos-abs-lg-top-60 { position: absolute; top: 60px } .pos-abs-lg-top-70 { position: absolute; top: 70px } .pos-abs-lg-top-80 { position: absolute; top: 80px } .pos-abs-lg-top-90 { position: absolute; top: 90px } .pos-abs-lg-top-100 { position: absolute; top: 100px } .pos-abs-lg-bottom-10 { position: absolute; bottom: 10px } .pos-abs-lg-bottom-20 { position: absolute; bottom: 20px } .pos-abs-lg-bottom-30 { position: absolute; bottom: 30px } .pos-abs-lg-bottom-40 { position: absolute; bottom: 40px } .pos-abs-lg-bottom-50 { position: absolute; bottom: 50px } .pos-abs-lg-bottom-60 { position: absolute; bottom: 60px } .pos-abs-lg-bottom-70 { position: absolute; bottom: 70px } .pos-abs-lg-bottom-80 { position: absolute; bottom: 80px } .pos-abs-lg-bottom-90 { position: absolute; bottom: 90px } .pos-abs-lg-bottom-100 { position: absolute; bottom: 100px }[ class*="pos-abs-lg"].container { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) }[ class*="pos-abs-lg-bottom"].title-container { margin-bottom: 0 } .w-lg-0 { width: calc(100% * (0 / 12) - (5px * 2)) } .l-lg-0 { left: calc(100% * (0 / 12) + 5px) } .r-lg-0 { right: calc(100% * (0 / 12) + 5px) } .w-lg-1 { width: calc(100% * (1 / 12) - (5px * 2)) } .l-lg-1 { left: calc(100% * (1 / 12) + 5px) } .r-lg-1 { right: calc(100% * (1 / 12) + 5px) } .w-lg-2 { width: calc(100% * (2 / 12) - (5px * 2)) } .l-lg-2 { left: calc(100% * (2 / 12) + 5px) } .r-lg-2 { right: calc(100% * (2 / 12) + 5px) } .w-lg-3 { width: calc(100% * (3 / 12) - (5px * 2)) } .l-lg-3 { left: calc(100% * (3 / 12) + 5px) } .r-lg-3 { right: calc(100% * (3 / 12) + 5px) } .w-lg-4 { width: calc(100% * (4 / 12) - (5px * 2)) } .l-lg-4 { left: calc(100% * (4 / 12) + 5px) } .r-lg-4 { right: calc(100% * (4 / 12) + 5px) } .w-lg-5 { width: calc(100% * (5 / 12) - (5px * 2)) } .l-lg-5 { left: calc(100% * (5 / 12) + 5px) } .r-lg-5 { right: calc(100% * (5 / 12) + 5px) } .w-lg-6 { width: calc(100% * (6 / 12) - (5px * 2)) } .l-lg-6 { left: calc(100% * (6 / 12) + 5px) } .r-lg-6 { right: calc(100% * (6 / 12) + 5px) } .w-lg-7 { width: calc(100% * (7 / 12) - (5px * 2)) } .l-lg-7 { left: calc(100% * (7 / 12) + 5px) } .r-lg-7 { right: calc(100% * (7 / 12) + 5px) } .w-lg-8 { width: calc(100% * (8 / 12) - (5px * 2)) } .l-lg-8 { left: calc(100% * (8 / 12) + 5px) } .r-lg-8 { right: calc(100% * (8 / 12) + 5px) } .w-lg-9 { width: calc(100% * (9 / 12) - (5px * 2)) } .l-lg-9 { left: calc(100% * (9 / 12) + 5px) } .r-lg-9 { right: calc(100% * (9 / 12) + 5px) } .w-lg-10 { width: calc(100% * (10 / 12) - (5px * 2)) } .l-lg-10 { left: calc(100% * (10 / 12) + 5px) } .r-lg-10 { right: calc(100% * (10 / 12) + 5px) } .w-lg-11 { width: calc(100% * (11 / 12) - (5px * 2)) } .l-lg-11 { left: calc(100% * (11 / 12) + 5px) } .r-lg-11 { right: calc(100% * (11 / 12) + 5px) } .w-lg-12 { width: calc(100% * (12 / 12) - (5px * 2)) } .l-lg-12 { left: calc(100% * (12 / 12) + 5px) } .r-lg-12 { right: calc(100% * (12 / 12) + 5px) } .w-lg-50 { width: calc(50% - (5px * 2)) } .w-lg-100 { width: calc(100% - (5px * 2)) } } h1,h2 { color: #000 } h3 { color: #666 } p { color: #333 } body,div.pg-price,span.pg-price { font-family: "Gibson W04","Helvetica","Open Sans",sans-serif } .russian body,.russian div.pg-price,.russian span.pg-price { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .section-jump,.button,h1,h2,h3,h4 { font-family: "Sofia Pro W03","Helvetica","Open Sans",sans-serif } .chinese .section-jump,.chinese .button,.chinese h1,.chinese h2,.chinese h3,.chinese h4 { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .japanese .section-jump,.japanese .button,.japanese h1,.japanese h2,.japanese h3,.japanese h4 { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .korean .section-jump,.korean .button,.korean h1,.korean h2,.korean h3,.korean h4 { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .russian .section-jump,.russian .button,.russian h1,.russian h2,.russian h3,.russian h4 { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .product-section h1,.product-section h2,.product-section h3 { letter-spacing: -0.1rem } .product-section h1,.product-section h2 { font-size: 3.2rem; line-height: 3.4rem; font-weight: 600; text-align: center } @media only screen and (min-width: 561px) { .product-section h1,.product-section h2 { font-size: 3.4rem; line-height: 3.6rem } } @media only screen and (min-width: 769px) { .product-section h1,.product-section h2 { font-size: 3.6rem; line-height: 3.8rem } } .product-section h3 { font-size: 2.8rem; line-height: 3rem; font-weight: 300; text-align: center } @media only screen and (min-width: 561px) { .product-section h3 { font-size: 3rem; line-height: 3.2rem } } .product-section p { font-weight: 400; font-size: 1.6rem; line-height: 2.7rem } .design-sensor .sizes span { font-size: 1.2rem; font-family: "Sofia Pro W03","Helvetica","Open Sans",sans-serif } .design-connections .points li,.design-connections .points .point-heading { font-family: "Sofia Pro W03","Helvetica","Open Sans",sans-serif; font-size: 1.6rem; line-height: 1.9rem; font-weight: 600 } .design-connections .points .point-text { font-family: "Gibson W04","Helvetica","Open Sans",sans-serif; font-size: 1.5rem; line-height: 1.9rem; font-weight: 400 } .design-hand-held .icons p { line-height: 2rem } .software-adjustments .screen-text h2 { font-size: 2.8rem } @media only screen and (min-width: 561px) { .software-adjustments .screen-text h2 { font-size: 3.2rem } } .accessories-custom .rig-specs .rig-col span:first-child { font-family: "Sofia Pro W03","Helvetica","Open Sans",sans-serif; font-size: 16px; font-weight: 600 } .accessories-custom .rig-specs .rig-col span:last-child { font-family: "Gibson W04","Helvetica","Open Sans",sans-serif; font-size: 12px } html { font-size: 10px } body { overflow-x: hidden; background-color: #eaeaea } #gn-sub-placeholder { margin-bottom: 0 } .responsive .sub-menu-location { top: 15px } .responsive.jp .sub-menu { top: 0px } .responsive.jp .sub-menu-location { top: 0px } .responsive .sub-menu-location .lc-flags div { height: 38px } #gn-cart { width: 94px } @media only screen and (max-width: 1040px) { .responsive .subnav-location-changer { right: calc(((100% - 1000px)) + (1018px - 100vw)) } } .product-content { max-width: 1000px; width: 100%; margin: 0 auto; background-color: #fff } .product-section { overflow: hidden; position: relative; margin-top: 32px } .product-section.product-intro { margin-top: 0 } .lowercase { text-transform: lowercase } .uppercase { text-transform: uppercase } .autocolumns-xs { -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 2rem; column-gap: 2rem; min-height: initial } .product-section .autocolumns-xs p { text-align: left } .txt-reverse-xs h1,.txt-reverse-xs h2,.txt-reverse-xs h3,.txt-reverse-xs h4,.txt-reverse-xs p { color: #fff } .txt-left-xs h1,.txt-left-xs h2,.txt-left-xs h3,.txt-left-xs h4,.txt-left-xs p { text-align: left } .txt-right-xs h1,.txt-right-xs h2,.txt-right-xs h3,.txt-right-xs h4,.txt-right-xs p { text-align: right } .txt-center-xs,.txt-center-xs h1,.txt-center-xs h2,.txt-center-xs h3,.txt-center-xs h4,.txt-center-xs p { text-align: center } @media only screen and (min-width: 769px) { .start-md h1,.start-md h2,.start-md h3,.start-md h4 { text-align: left } } @media only screen and (min-width: 561px) { .autocolumns-sm { -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 2rem; column-gap: 2rem; min-height: initial } .product-section .autocolumns-sm p { text-align: left } .txt-reverse-sm h1,.txt-reverse-sm h2,.txt-reverse-sm h3,.txt-reverse-sm h4,.txt-reverse-sm p { color: #fff } .txt-left-sm h1,.txt-left-sm h2,.txt-left-sm h3,.txt-left-sm h4,.txt-left-sm p { text-align: left } .txt-right-sm h1,.txt-right-sm h2,.txt-right-sm h3,.txt-right-sm h4,.txt-right-sm p { text-align: right } .txt-center-sm,.txt-center-sm h1,.txt-center-sm h2,.txt-center-sm h3,.txt-center-sm h4,.txt-center-sm p { text-align: center } } @media only screen and (min-width: 769px) { .autocolumns-md { -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 2rem; column-gap: 2rem; min-height: initial } .product-section .autocolumns-md p { text-align: left } .txt-reverse-md h1,.txt-reverse-md h2,.txt-reverse-md h3,.txt-reverse-md h4,.txt-reverse-md p { color: #fff } .txt-left-md h1,.txt-left-md h2,.txt-left-md h3,.txt-left-md h4,.txt-left-md p { text-align: left } .txt-right-md h1,.txt-right-md h2,.txt-right-md h3,.txt-right-md h4,.txt-right-md p { text-align: right } .txt-center-md,.txt-center-md h1,.txt-center-md h2,.txt-center-md h3,.txt-center-md h4,.txt-center-md p { text-align: center } } @media only screen and (min-width: 1041px) { .autocolumns-lg { -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 2rem; column-gap: 2rem; min-height: initial } .autocolumns-off-lg { -webkit-column-count: auto; column-count: auto; -webkit-column-gap: auto; column-gap: auto; min-height: 0 } .product-section .autocolumns-lg p { text-align: left } .txt-reverse-lg h1,.txt-reverse-lg h2,.txt-reverse-lg h3,.txt-reverse-lg h4,.txt-reverse-lg p { color: #fff } .txt-left-lg h1,.txt-left-lg h2,.txt-left-lg h3,.txt-left-lg h4,.txt-left-lg p { text-align: left } .txt-right-lg h1,.txt-right-lg h2,.txt-right-lg h3,.txt-right-lg h4,.txt-right-lg p { text-align: right } .txt-center-lg,.txt-center-lg h1,.txt-center-lg h2,.txt-center-lg h3,.txt-center-lg h4,.txt-center-lg p { text-align: center } } @media only screen and (min-width: 1441px) { .autocolumns-xl { -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 2rem; column-gap: 2rem; min-height: initial } .product-section .autocolumns-xl p { text-align: left } .txt-reverse-xl h1,.txt-reverse-xl h2,.txt-reverse-xl h3,.txt-reverse-xl h4,.txt-reverse-xl p { color: #fff } .txt-left-xl h1,.txt-left-xl h2,.txt-left-xl h3,.txt-left-xl h4,.txt-left-xl p { text-align: left } .txt-right-xl h1,.txt-right-xl h2,.txt-right-xl h3,.txt-right-xl h4,.txt-right-xl p { text-align: right } .txt-center-xl,.txt-center-xl h1,.txt-center-xl h2,.txt-center-xl h3,.txt-center-xl h4,.txt-center-xl p { text-align: center } } .product-section img { display: block; width: 100% } .product-section img.img-static { width: auto } img.img-offset-10-xs { width: calc(100% + 20px); margin-left: -10px } img.img-offset-20-xs { width: calc(100% + 40px); margin-left: -20px } img.img-offset-30-xs { width: calc(100% + 60px); margin-left: -30px } img.img-inset { width: calc(100% - 20px); margin: 0 auto } img.img-inset-10-xs { width: calc(100% - 20px); margin: 0 auto } img.img-inset-left-10-xs { width: calc(100% - 10px); margin-left: 10px } img.img-inset-right-10-xs { width: calc(100% - 10px); margin-left: 0 } img.img-inset-20-xs { width: calc(100% - 40px); margin: 0 auto } img.img-inset-left-20-xs { width: calc(100% - 20px); margin-left: 20px } img.img-inset-right-20-xs { width: calc(100% - 20px); margin-left: 0 } img.img-scale-50-xs { width: calc(50vw - 25px); max-width: 695px; margin-left: 0; margin-top: 20px; margin-bottom: 20px } .img-crop-xs { overflow: hidden } .img-bg-top-xs { position: absolute; top: 0; bottom: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .img-bg-bottom-xs { position: absolute; top: auto; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } img.img-crop-right-xs { position: relative; left: auto; right: auto; width: auto; -webkit-transform: translateX(0); transform: translateX(0) } img.img-crop-left-xs { position: relative; left: auto; right: -100%; width: auto; -webkit-transform: translateX(-100%); transform: translateX(-100%) } img.img-crop-center-xs { position: relative; left: 50%; right: auto; width: auto; -webkit-transform: translateX(-50%); transform: translateX(-50%) } @media only screen and (min-width: 561px) { img.img-offset-0-sm { width: 100%; margin-left: 0 } img.img-offset-10-sm { width: calc(100% + 20px); margin-left: -10px } img.img-offset-20-sm { width: calc(100% + 40px); margin-left: -20px } img.img-offset-30-sm { width: calc(100% + 60px); margin-left: -30px } img.img-inset { width: calc(100% - 40px); margin: 0 auto } img.img-inset-0-sm { width: 100%; margin: 0 auto } img.img-inset-10-sm { width: calc(100% - 20px); margin: 0 auto } img.img-inset-left-10-sm { width: calc(100% - 10px); margin-left: 10px } img.img-inset-right-10-sm { width: calc(100% - 10px); margin-left: 0 } img.img-inset-20-sm { width: calc(100% - 40px); margin: 0 auto } img.img-inset-left-20-sm { width: calc(100% - 20px); margin-left: 20px } img.img-inset-right-20-sm { width: calc(100% - 20px); margin-left: 0 } img.img-scale-0-sm { width: 100%; max-width: none; margin-left: 0; margin-top: 0; margin-bottom: 0 } img.img-scale-50-sm { width: calc(50vw - 25px); max-width: 695px; margin-left: 0; margin-top: 20px; margin-bottom: 20px } .img-crop-sm { overflow: hidden } .img-bg-top-sm { position: absolute; top: 0; bottom: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .img-bg-bottom-sm { position: absolute; top: auto; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .img-bg-none-sm { position: relative; top: auto; bottom: auto; left: auto; -webkit-transform: none; transform: none } img.img-crop-none-sm { position: relative; left: auto; right: auto; width: auto; -webkit-transform: translateX(0); transform: translateX(0) } img.img-crop-right-sm { position: relative; left: auto; right: auto; width: auto; -webkit-transform: translateX(0); transform: translateX(0) } img.img-crop-left-sm { position: relative; left: auto; right: -100%; width: auto; -webkit-transform: translateX(-100%); transform: translateX(-100%) } img.img-crop-center-sm { position: relative; left: 50%; right: auto; width: auto; -webkit-transform: translateX(-50%); transform: translateX(-50%) } } @media only screen and (min-width: 769px) { img.img-offset-0-md { width: 100%; margin-left: 0 } img.img-offset-10-md { width: calc(100% + 20px); margin-left: -10px } img.img-offset-20-md { width: calc(100% + 40px); margin-left: -20px } img.img-offset-30-md { width: calc(100% + 60px); margin-left: -30px } img.img-inset-0-md { width: 100%; margin: 0 auto } img.img-inset-10-md { width: calc(100% - 20px); margin: 0 auto } img.img-inset-left-10-md { width: calc(100% - 10px); margin-left: 10px } img.img-inset-right-10-md { width: calc(100% - 10px); margin-left: 0 } img.img-inset-20-md { width: calc(100% - 40px); margin: 0 auto } img.img-inset-left-20-md { width: calc(100% - 20px); margin-left: 20px } img.img-inset-right-20-md { width: calc(100% - 20px); margin-left: 0 } img.img-scale-0-md { width: 100%; max-width: none; margin-left: 0; margin-top: 0; margin-bottom: 0 } img.img-scale-50-md { width: calc(50vw - 25px); max-width: 695px; margin-left: 0; margin-top: 20px; margin-bottom: 20px } .img-crop-md { overflow: hidden } .img-bg-top-md { position: absolute; top: 0; bottom: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .img-bg-bottom-md { position: absolute; top: auto; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .img-bg-none-md { position: relative; top: auto; bottom: auto; left: auto; -webkit-transform: none; transform: none } img.img-crop-none-md { position: relative; left: auto; right: auto; width: auto; -webkit-transform: translateX(0); transform: translateX(0) } img.img-crop-right-md { position: relative; left: auto; right: auto; width: auto; -webkit-transform: translateX(0); transform: translateX(0) } img.img-crop-left-md { position: relative; left: auto; right: -100%; width: auto; -webkit-transform: translateX(-100%); transform: translateX(-100%) } img.img-crop-center-md { position: relative; left: 50%; right: auto; width: auto; -webkit-transform: translateX(-50%); transform: translateX(-50%) } } @media only screen and (min-width: 1041px) { img.img-offset-0-lg { width: 100%; margin-left: 0 } img.img-offset-10-lg { width: calc(100% + 20px); margin-left: -10px } img.img-offset-20-lg { width: calc(100% + 40px); margin-left: -20px } img.img-offset-30-lg { width: calc(100% + 60px); margin-left: -30px } img.img-inset-0-lg { width: 100%; margin: 0 auto } img.img-inset-10-lg { width: calc(100% - 20px); margin: 0 auto } img.img-inset-left-10-lg { width: calc(100% - 10px); margin-left: 10px } img.img-inset-right-10-lg { width: calc(100% - 10px); margin-left: 0 } img.img-inset-20-lg { width: calc(100% - 40px); margin: 0 auto } img.img-inset-left-20-lg { width: calc(100% - 20px); margin-left: 20px } img.img-inset-right-20-lg { width: calc(100% - 20px); margin-left: 0 } img.img-scale-0-lg { width: 100%; max-width: none; margin-left: 0; margin-top: 0; margin-bottom: 0 } img.img-scale-50-lg { width: calc(50vw - 25px); max-width: 695px; margin-left: 0; margin-top: 20px; margin-bottom: 20px } .img-crop-lg { overflow: hidden } .img-bg-top-lg { position: absolute; top: 0; bottom: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .img-bg-bottom-lg { position: absolute; top: auto; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .img-bg-none-lg { position: relative; top: auto; bottom: auto; left: auto; -webkit-transform: none; transform: none } img.img-crop-none-lg { position: relative; left: auto; right: auto; width: auto; -webkit-transform: translateX(0); transform: translateX(0) } img.img-crop-right-lg { position: relative; left: auto; right: auto; width: auto; -webkit-transform: translateX(0); transform: translateX(0) } img.img-crop-left-lg { position: relative; left: auto; right: -100%; width: auto; -webkit-transform: translateX(-100%); transform: translateX(-100%) } img.img-crop-center-lg { position: relative; left: 50%; right: auto; width: auto; -webkit-transform: translateX(-50%); transform: translateX(-50%) } } @media only screen and (min-width: 1441px) { img.img-offset-0-xl { width: 100%; margin-left: 0 } img.img-offset-10-xl { width: calc(100% + 20px); margin-left: -10px } img.img-offset-20-xl { width: calc(100% + 40px); margin-left: -20px } img.img-offset-30-xl { width: calc(100% + 60px); margin-left: -30px } img.img-inset-0-xl { width: 100%; margin: 0 auto } img.img-inset-10-xl { width: calc(100% - 20px); margin: 0 auto } img.img-inset-left-10-xl { width: calc(100% - 10px); margin-left: 10px } img.img-inset-right-10-xl { width: calc(100% - 10px); margin-left: 0 } img.img-inset-20-xl { width: calc(100% - 40px); margin: 0 auto } img.img-inset-left-20-xl { width: calc(100% - 20px); margin-left: 20px } img.img-inset-right-20-xl { width: calc(100% - 20px); margin-left: 0 } img.img-scale-0-xl { width: 100%; max-width: none; margin-left: 0; margin-top: 0; margin-bottom: 0 } img.img-scale-50-xl { width: calc(50vw - 25px); max-width: 695px; margin-left: 0; margin-top: 20px; margin-bottom: 20px } .img-crop-xl { overflow: hidden } img.img-crop-none-xl { position: relative; left: auto; right: auto; width: auto; -webkit-transform: translateX(0); transform: translateX(0) } img.img-crop-right-xl { position: relative; left: auto; right: auto; width: auto; -webkit-transform: translateX(0); transform: translateX(0) } img.img-crop-left-xl { position: relative; left: auto; right: -100%; width: auto; -webkit-transform: translateX(-100%); transform: translateX(-100%) } img.img-crop-center-xl { position: relative; left: 50%; right: auto; width: auto; -webkit-transform: translateX(-50%); transform: translateX(-50%) } } @media only screen and (max-width: 560px) { .img-breakout-xs { position: relative; overflow: hidden; width: 100vw; margin-left: -10px } .img-breakout-left-xs { position: relative; overflow: hidden; width: calc(100% + 10px); margin-left: -10px } .img-breakout-right-xs { position: relative; overflow: hidden; width: calc(100% + 10px); margin-left: 0 } } @media only screen and (min-width: 561px) and (max-width: 768px) { .img-breakout-none-sm { position: relative; overflow: visible; width: auto; margin-left: 0 } .img-breakout-xs:not(.img-breakout-none-sm):not(.img-breakout-left-sm):not(.img-breakout-right-sm),.img-breakout-sm { position: relative; overflow: hidden; width: 100vw; margin-left: -20px } .img-breakout-left-xs:not(.img-breakout-none-sm):not(.img-breakout-sm):not(.img-breakout-right-sm),.img-breakout-left-sm { position: relative; overflow: hidden; width: calc(100% + 20px); margin-left: -20px } .img-breakout-right-xs:not(.img-breakout-none-sm):not(.img-breakout-sm):not(.img-breakout-left-sm),.img-breakout-right-sm { position: relative; overflow: hidden; width: calc(100% + 20px); margin-left: 0 } } @media only screen and (min-width: 769px) and (max-width: 1040px) { .img-breakout-none-xs:not(.img-breakout-sm):not(.img-breakout-left-sm):not(.img-breakout-right-sm):not(.img-breakout-md):not(.img-breakout-left-md):not(.img-breakout-right-md),.img-breakout-none-sm:not(.img-breakout-md):not(.img-breakout-left-md):not(.img-breakout-right-md),.img-breakout-none-md { position: relative; overflow: visible; width: auto; margin-left: 0 } .img-breakout-xs:not(.img-breakout-none-sm):not(.img-breakout-left-sm):not(.img-breakout-right-sm):not(.img-breakout-none-md):not(.img-breakout-left-md):not(.img-breakout-right-md),.img-breakout-sm:not(.img-breakout-none-md):not(.img-breakout-left-md):not(.img-breakout-right-md),.img-breakout-md { position: relative; overflow: hidden; width: 100vw; margin-left: calc(((100vw - 768px) / -2) - 20px) } .img-breakout-left-xs:not(.img-breakout-none-sm):not(.img-breakout-sm):not(.img-breakout-right-sm):not(.img-breakout-none-md):not(.img-breakout-md):not(.img-breakout-right-md),.img-breakout-left-sm:not(.img-breakout-none-md):not(.img-breakout-md):not(.img-breakout-right-md),.img-breakout-left-md { position: relative; overflow: hidden; width: calc(100% + ((100vw - 728px) / 2)); margin-left: calc((100vw - 728px) / -2) } .img-breakout-right-xs:not(.img-breakout-none-sm):not(.img-breakout-sm):not(.img-breakout-left-sm):not(.img-breakout-none-md):not(.img-breakout-md):not(.img-breakout-left-md),.img-breakout-right-sm:not(.img-breakout-none-md):not(.img-breakout-md):not(.img-breakout-left-md),.img-breakout-right-md { position: relative; overflow: hidden; width: calc(100% + ((100vw - 728px) / 2)); margin-left: 0 } .img-breakout-inset-none-xs:not(.img-breakout-inset-sm):not(.img-breakout-inset-left-sm):not(.img-breakout-inset-right-sm):not(.img-breakout-inset-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-right-md),.img-breakout-inset-none-sm:not(.img-breakout-inset-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-right-md),.img-breakout-inset-none-md { position: relative; overflow: visible; width: auto; margin-left: 0 } .img-breakout-inset-xs:not(.img-breakout-inset-none-sm):not(.img-breakout-inset-left-sm):not(.img-breakout-inset-right-sm):not(.img-breakout-inset-none-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-right-md),.img-breakout-inset-sm:not(.img-breakout-inset-none-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-right-md),.img-breakout-inset-md { position: relative; overflow: hidden; width: calc(100vw - 40px); margin-left: calc((100vw - 768px) / -2) } .img-breakout-inset-left-xs:not(.img-breakout-inset-none-sm):not(.img-breakout-inset-sm):not(.img-breakout-inset-right-sm):not(.img-breakout-inset-none-md):not(.img-breakout-inset-md):not(.img-breakout-inset-right-md),.img-breakout-inset-left-sm:not(.img-breakout-inset-none-md):not(.img-breakout-inset-md):not(.img-breakout-inset-right-md),.img-breakout-inset-left-md { position: relative; overflow: hidden; width: calc(100% + (((100vw - 728px) / 2) - 20px)); margin-left: calc(((100vw - 728px) / -2) + 20px) } .img-breakout-inset-right-xs:not(.img-breakout-inset-none-sm):not(.img-breakout-inset-sm):not(.img-breakout-inset-left-sm):not(.img-breakout-inset-none-md):not(.img-breakout-inset-md):not(.img-breakout-inset-left-md),.img-breakout-inset-right-sm:not(.img-breakout-inset-none-md):not(.img-breakout-inset-md):not(.img-breakout-inset-left-md),.img-breakout-inset-right-md { position: relative; overflow: hidden; width: calc(100% + (((100vw - 728px) / 2) - 20px)); margin-left: 0 } } @media only screen and (min-width: 1041px) and (max-width: 1440px) { .img-breakout-none-xs:not(.img-breakout-sm):not(.img-breakout-left-sm):not(.img-breakout-right-sm):not(.img-breakout-md):not(.img-breakout-left-md):not(.img-breakout-right-md):not(.img-breakout-lg):not(.img-breakout-left-lg):not(.img-breakout-right-lg),.img-breakout-none-sm:not(.img-breakout-md):not(.img-breakout-left-md):not(.img-breakout-right-md):not(.img-breakout-lg):not(.img-breakout-left-lg):not(.img-breakout-right-lg),.img-breakout-none-md:not(.img-breakout-lg):not(.img-breakout-left-lg):not(.img-breakout-right-lg),.img-breakout-none-lg { position: relative; overflow: visible; width: auto; margin-left: 0 } .img-breakout-xs:not(.img-breakout-none-sm):not(.img-breakout-left-sm):not(.img-breakout-right-sm):not(.img-breakout-none-md):not(.img-breakout-left-md):not(.img-breakout-right-md):not(.img-breakout-none-lg):not(.img-breakout-left-lg):not(.img-breakout-right-lg),.img-breakout-sm:not(.img-breakout-none-md):not(.img-breakout-left-md):not(.img-breakout-right-md):not(.img-breakout-none-lg):not(.img-breakout-left-lg):not(.img-breakout-right-lg),.img-breakout-md:not(.img-breakout-none-lg):not(.img-breakout-left-lg):not(.img-breakout-right-lg),.img-breakout-lg { position: relative; overflow: hidden; width: 100vw; margin-left: calc((100vw - 1000px) / -2) } .img-breakout-left-xs:not(.img-breakout-none-sm):not(.img-breakout-sm):not(.img-breakout-right-sm):not(.img-breakout-none-md):not(.img-breakout-md):not(.img-breakout-right-md):not(.img-breakout-none-lg):not(.img-breakout-lg):not(.img-breakout-right-lg),.img-breakout-left-sm:not(.img-breakout-none-md):not(.img-breakout-none-lg):not(.img-breakout-right-md):not(.img-breakout-right-lg):not(.img-breakout-md):not(.img-breakout-lg),.img-breakout-left-md:not(.img-breakout-none-lg):not(.img-breakout-right-lg):not(.img-breakout-lg),.img-breakout-left-lg { position: relative; overflow: hidden; width: calc(100% + ((100vw - 1000px) / 2)); margin-left: calc((100vw - 1000px) / -2) } .img-breakout-right-xs:not(.img-breakout-none-sm):not(.img-breakout-sm):not(.img-breakout-left-sm):not(.img-breakout-none-md):not(.img-breakout-md):not(.img-breakout-left-md):not(.img-breakout-none-lg):not(.img-breakout-lg):not(.img-breakout-left-lg),.img-breakout-right-sm:not(.img-breakout-none-md):not(.img-breakout-md):not(.img-breakout-left-md):not(.img-breakout-none-lg):not(.img-breakout-lg):not(.img-breakout-left-lg),.img-breakout-right-md:not(.img-breakout-none-lg):not(.img-breakout-left-lg):not(.img-breakout-lg),.img-breakout-right-lg { position: relative; overflow: hidden; width: calc(100% + ((100vw - 1000px) / 2)); margin-left: 0 } .img-breakout-inset-none-xs:not(.img-breakout-inset-sm):not(.img-breakout-inset-left-sm):not(.img-breakout-inset-right-sm):not(.img-breakout-inset-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-right-md):not(.img-breakout-inset-lg):not(.img-breakout-inset-left-lg):not(.img-breakout-inset-right-lg),.img-breakout-inset-none-sm:not(.img-breakout-inset-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-right-md):not(.img-breakout-inset-lg):not(.img-breakout-inset-left-lg):not(.img-breakout-inset-right-lg),.img-breakout-inset-none-md:not(.img-breakout-inset-lg):not(.img-breakout-inset-left-lg):not(.img-breakout-inset-right-lg),.img-breakout-inset-none-lg { position: relative; overflow: visible; width: auto; margin-left: auto } .img-breakout-inset-xs:not(.img-breakout-inset-none-sm):not(.img-breakout-inset-left-sm):not(.img-breakout-inset-right-sm):not(.img-breakout-inset-none-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-right-md):not(.img-breakout-inset-none-lg):not(.img-breakout-inset-left-lg):not(.img-breakout-inset-right-lg),.img-breakout-inset-sm:not(.img-breakout-inset-none-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-right-md):not(.img-breakout-inset-none-lg):not(.img-breakout-inset-left-lg):not(.img-breakout-inset-right-lg),.img-breakout-inset-md:not(.img-breakout-inset-none-lg):not(.img-breakout-inset-left-lg):not(.img-breakout-inset-right-lg),.img-breakout-inset-lg { position: relative; overflow: hidden; width: calc(100vw - 40px); margin-left: calc(((100vw - 1000px) / -2) + 20px) } .img-breakout-inset-left-xs:not(.img-breakout-inset-none-sm):not(.img-breakout-inset-sm):not(.img-breakout-inset-right-sm):not(.img-breakout-inset-none-md):not(.img-breakout-inset-md):not(.img-breakout-inset-right-md):not(.img-breakout-inset-none-lg):not(.img-breakout-inset-lg):not(.img-breakout-inset-right-lg),.img-breakout-inset-left-sm:not(.img-breakout-inset-none-md):not(.img-breakout-inset-none-lg):not(.img-breakout-inset-right-md):not(.img-breakout-inset-right-lg):not(.img-breakout-inset-md):not(.img-breakout-inset-lg),.img-breakout-inset-left-md:not(.img-breakout-inset-none-lg):not(.img-breakout-inset-right-lg):not(.img-breakout-inset-lg),.img-breakout-inset-left-lg { position: relative; overflow: hidden; width: calc(100% + (((100vw - 1000px) / 2) - 20px)); margin-left: calc(((100vw - 1000px) / -2) + 20px) } .img-breakout-inset-right-xs:not(.img-breakout-inset-none-sm):not(.img-breakout-inset-sm):not(.img-breakout-inset-left-sm):not(.img-breakout-inset-none-md):not(.img-breakout-inset-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-none-lg):not(.img-breakout-inset-lg):not(.img-breakout-inset-left-lg),.img-breakout-inset-right-sm:not(.img-breakout-inset-none-md):not(.img-breakout-inset-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-none-lg):not(.img-breakout-inset-lg):not(.img-breakout-inset-left-lg),.img-breakout-inset-right-md:not(.img-breakout-inset-none-lg):not(.img-breakout-inset-left-lg):not(.img-breakout-inset-lg),.img-breakout-inset-right-lg { position: relative; overflow: hidden; width: calc(100% + (((100vw - 1000px) / 2) - 20px)); margin-left: 0 } } @media only screen and (min-width: 1441px) { .img-breakout-none-xs:not(.img-breakout-sm):not(.img-breakout-left-sm):not(.img-breakout-right-sm):not(.img-breakout-md):not(.img-breakout-left-md):not(.img-breakout-right-md):not(.img-breakout-lg):not(.img-breakout-left-lg):not(.img-breakout-right-lg),.img-breakout-none-sm:not(.img-breakout-md):not(.img-breakout-left-md):not(.img-breakout-right-md):not(.img-breakout-lg):not(.img-breakout-left-lg):not(.img-breakout-right-lg),.img-breakout-none-md:not(.img-breakout-lg):not(.img-breakout-left-lg):not(.img-breakout-right-lg),.img-breakout-none-lg { position: relative; overflow: visible; width: auto; margin-left: 0 } .img-breakout-xs:not(.img-breakout-none-sm):not(.img-breakout-left-sm):not(.img-breakout-right-sm):not(.img-breakout-none-md):not(.img-breakout-left-md):not(.img-breakout-right-md):not(.img-breakout-none-lg):not(.img-breakout-left-lg):not(.img-breakout-right-lg),.img-breakout-sm:not(.img-breakout-none-md):not(.img-breakout-left-md):not(.img-breakout-right-md):not(.img-breakout-none-lg):not(.img-breakout-left-lg):not(.img-breakout-right-lg),.img-breakout-md:not(.img-breakout-none-lg):not(.img-breakout-left-lg):not(.img-breakout-right-lg),.img-breakout-lg { position: relative; overflow: hidden; width: 1440px; margin-left: -220px } .img-breakout-left-xs:not(.img-breakout-none-sm):not(.img-breakout-sm):not(.img-breakout-right-sm):not(.img-breakout-none-md):not(.img-breakout-md):not(.img-breakout-right-md):not(.img-breakout-none-lg):not(.img-breakout-lg):not(.img-breakout-right-lg),.img-breakout-left-sm:not(.img-breakout-none-md):not(.img-breakout-none-lg):not(.img-breakout-right-md):not(.img-breakout-right-lg):not(.img-breakout-md):not(.img-breakout-lg),.img-breakout-left-md:not(.img-breakout-none-lg):not(.img-breakout-right-lg):not(.img-breakout-lg),.img-breakout-left-lg { position: relative; overflow: hidden; width: calc(100% + 220px); margin-left: -220px } .img-breakout-right-xs:not(.img-breakout-none-sm):not(.img-breakout-sm):not(.img-breakout-left-sm):not(.img-breakout-none-md):not(.img-breakout-md):not(.img-breakout-left-md):not(.img-breakout-none-lg):not(.img-breakout-lg):not(.img-breakout-left-lg),.img-breakout-right-sm:not(.img-breakout-none-md):not(.img-breakout-md):not(.img-breakout-left-md):not(.img-breakout-none-lg):not(.img-breakout-lg):not(.img-breakout-left-lg),.img-breakout-right-md:not(.img-breakout-none-lg):not(.img-breakout-left-lg):not(.img-breakout-lg),.img-breakout-right-lg { position: relative; overflow: hidden; width: calc(100% + 220.5px); margin-left: 0 } .img-breakout-inset-none-xs:not(.img-breakout-inset-sm):not(.img-breakout-inset-left-sm):not(.img-breakout-inset-right-sm):not(.img-breakout-inset-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-right-md):not(.img-breakout-inset-lg):not(.img-breakout-inset-left-lg):not(.img-breakout-inset-right-lg),.img-breakout-inset-none-sm:not(.img-breakout-inset-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-right-md):not(.img-breakout-inset-lg):not(.img-breakout-inset-left-lg):not(.img-breakout-inset-right-lg),.img-breakout-inset-none-md:not(.img-breakout-inset-lg):not(.img-breakout-inset-left-lg):not(.img-breakout-inset-right-lg),.img-breakout-inset-none-lg { position: relative; overflow: visible; width: auto; margin-left: 0 } .img-breakout-inset-xs:not(.img-breakout-inset-none-sm):not(.img-breakout-inset-left-sm):not(.img-breakout-inset-right-sm):not(.img-breakout-inset-none-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-right-md):not(.img-breakout-inset-none-lg):not(.img-breakout-inset-left-lg):not(.img-breakout-inset-right-lg),.img-breakout-inset-sm:not(.img-breakout-inset-none-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-right-md):not(.img-breakout-inset-none-lg):not(.img-breakout-inset-left-lg):not(.img-breakout-inset-right-lg),.img-breakout-inset-md:not(.img-breakout-inset-none-lg):not(.img-breakout-inset-left-lg):not(.img-breakout-inset-right-lg),.img-breakout-inset-lg { position: relative; overflow: hidden; width: 1400px; margin-left: -200px } .img-breakout-inset-left-xs:not(.img-breakout-inset-none-sm):not(.img-breakout-inset-sm):not(.img-breakout-inset-right-sm):not(.img-breakout-inset-none-md):not(.img-breakout-inset-md):not(.img-breakout-inset-right-md):not(.img-breakout-inset-none-lg):not(.img-breakout-inset-lg):not(.img-breakout-inset-right-lg),.img-breakout-inset-left-sm:not(.img-breakout-inset-none-md):not(.img-breakout-inset-none-lg):not(.img-breakout-inset-right-md):not(.img-breakout-inset-right-lg):not(.img-breakout-inset-md):not(.img-breakout-inset-lg),.img-breakout-inset-left-md:not(.img-breakout-inset-none-lg):not(.img-breakout-inset-right-lg):not(.img-breakout-inset-lg),.img-breakout-inset-left-lg { position: relative; overflow: hidden; width: calc(100% + 200px); margin-left: -200px } .img-breakout-inset-right-xs:not(.img-breakout-inset-none-sm):not(.img-breakout-inset-sm):not(.img-breakout-inset-left-sm):not(.img-breakout-inset-none-md):not(.img-breakout-inset-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-none-lg):not(.img-breakout-inset-lg):not(.img-breakout-inset-left-lg),.img-breakout-inset-right-sm:not(.img-breakout-inset-none-md):not(.img-breakout-inset-md):not(.img-breakout-inset-left-md):not(.img-breakout-inset-none-lg):not(.img-breakout-inset-lg):not(.img-breakout-inset-left-lg),.img-breakout-inset-right-md:not(.img-breakout-inset-none-lg):not(.img-breakout-inset-left-lg):not(.img-breakout-inset-lg),.img-breakout-inset-right-lg { position: relative; overflow: hidden; width: calc(100% + 200px); margin-left: 0 } } .grid,[class*="col-"] { margin-bottom: 35px } .title-container { margin-bottom: 10px } @media only screen and (min-width: 769px) { .title-container { margin-bottom: 20px } } .grid:last-child,[class*="col-"]:last-child { margin-bottom: 0 } .container+img,.container+picture img,.grid+img,.grid+picture img,.heading+.crop,.container+.crop,.grid+.crop,[class*="col-"]+.crop { padding-top: 3.4rem } .product-section h2+p,.product-section h3+p,.product-section .heading+p,.heading+.grid { margin-top: 1rem } @media only screen and (min-width: 769px) { .product-section h2+p,.product-section h3+p,.product-section .heading+p,.heading+.grid { margin-top: 2rem } } .product-section h1+h3,.product-section h2+h3 { margin: 1rem auto 0 } .middle-xs [class*="col-"] { margin-bottom: 0 } @media only screen and (min-width: 561px) { .middle-sm [class*="col-"] { margin-bottom: 0 } } @media only screen and (min-width: 769px) { .middle-md [class*="col-"] { margin-bottom: 0 } } @media only screen and (min-width: 1041px) { .middle-lg [class*="col-"] { margin-bottom: 0 } } .bg-img-top-page { padding-bottom: 35px } .bg-img-top-page .crop img { top: auto; bottom: 0; position: absolute } .bg-img-top-page .container+.crop { position: relative; height: 0; padding-top: 30px } @media only screen and (min-width: 561px) { .bg-img-top-page .container+.crop { height: 0 } } .bg-img-top-page .container:first-child { margin-top: 40px; position: relative; z-index: 2; width: 100% } @media only screen and (min-width: 561px) { .bg-img-top-page .container:first-child { margin-top: 80px } } .bg-img-top-page [class*="col-"] { margin-bottom: 0 } .section-divider:before { display: block; content: ''; max-width: 1000px; width: 100%; margin: 0 auto; border-top: 1px solid #D7D7D7; padding-bottom: 34px } @media only screen and (min-width: 561px) { .section-divider:before { padding-bottom: 30px } } .bg-img-xs .grid,.bg-img-top-xs .grid,.bg-img-bottom-xs .grid { position: relative; z-index: 2 } .bg-img-xs img,.bg-img-top-xs img { padding-top: 0; position: absolute; top: 0 } .bg-img-bottom-xs img { padding-top: 0; position: absolute; bottom: 0 } .overlay-xs { position: absolute; z-index: 2; width: 100% } .grid-inset-10-xs>[class*="col-"]:nth-child(odd)>* { padding-right: 10px } .grid-inset-10-xs>[class*="col-"]:nth-child(even)>* { padding-left: 10px } .grid-inset-15-xs>[class*="col-"]:nth-child(odd)>* { padding-right: 15px } .grid-inset-15-xs>[class*="col-"]:nth-child(even)>* { padding-left: 15px } .section-inset-xs { margin-left: 10px; margin-right: 10px } .section-inset-xs .container { width: calc(100vw - 20px) } :not(img).inset-xs { width: calc(100% - 20px); margin-left: 10px; overflow: hidden } :not(img).inset-left-xs { position: relative; overflow: hidden; width: calc(100% - 10px); margin-left: 10px } :not(img).inset-right-xs { position: relative; overflow: hidden; width: calc(100% - 10px); margin-left: 0 } @media only screen and (min-width: 561px) { .overlay-sm { position: absolute; z-index: 2; width: 100% } .bg-img-sm .grid,.bg-img-top-sm .grid,.bg-img-bottom-sm .grid { position: relative; z-index: 2 } .bg-img-sm img,.bg-img-top-sm img { position: absolute; top: 0; padding-top: 0 } .bg-img-bottom-sm img { position: absolute; top: auto; bottom: 0; padding-top: 0 } .grid-inset-15-sm>[class*="col-"]:nth-child(odd)>* { padding-right: 15px } .grid-inset-15-sm>[class*="col-"]:nth-child(even)>* { padding-left: 15px } .section-inset-xs,.section-inset-sm { margin-left: 20px; margin-right: 20px } .section-inset-xs .container,.section-inset-sm .container { width: calc(100vw - 40px) } :not(img).inset-xs:not(.inset-none-sm):not(.inset-left-sm):not(.inset-right-sm):not(.inset-none-md):not(.inset-left-md):not(.inset-right-md):not(.inset-none-lg):not(.inset-left-lg):not(.inset-right-lg),:not(img).inset-sm { position: relative; width: calc(100% - 40px); margin-left: 20px; overflow: hidden } :not(img).inset-left-xs:not(.inset-none-sm):not(.inset-sm):not(.inset-right-sm):not(.inset-none-md):not(.inset-md):not(.inset-right-md):not(.inset-none-lg):not(.inset-lg):not(.inset-right-lg),:not(img).inset-left-sm { position: relative; overflow: hidden; width: calc(100% - 20px); margin-left: 20px } :not(img).inset-right-xs:not(.inset-none-sm):not(.inset-sm):not(.inset-left-sm):not(.inset-none-md):not(.inset-md):not(.inset-left-md):not(.inset-none-lg):not(.inset-lg):not(.inset-left-lg),:not(img).inset-right-sm { position: relative; overflow: hidden; width: calc(100% - 20px); margin-left: 0 } :not(img).inset-none-sm { position: relative; overflow: visible; width: auto; margin-left: 0 } } @media only screen and (min-width: 769px) { .overlay-md { position: absolute; z-index: 2; width: 100% } .bg-img-md .grid,.bg-img-top-md .grid,.bg-img-bottom-md .grid { position: relative; z-index: 2 } .bg-img-md img,.bg-img-top-md img { padding-top: 0; position: absolute; top: 0 } .bg-img-bottom-md img { padding-top: 0; position: absolute; bottom: 0 } .grid-inset-10-md>[class*="col-"]:nth-child(odd)>* { padding-right: 10px } .grid-inset-10-md>[class*="col-"]:nth-child(even)>* { padding-left: 10px } .grid-inset-15-md>[class*="col-"]:nth-child(odd)>* { padding-right: 15px } .grid-inset-15-md>[class*="col-"]:nth-child(even)>* { padding-left: 15px } .section-inset-md { margin-left: 20px; margin-right: 20px } .section-inset-md .container { width: 728px; max-width: none } :not(img).inset-md { position: relative; width: calc(100% - 40px); margin-left: 20px; overflow: hidden } :not(img).inset-left-md { position: relative; overflow: hidden; width: calc(100% - 20px); margin-left: 20px } :not(img).inset-right-md { position: relative; overflow: hidden; width: calc(100% - 20px); margin-left: 0 } :not(img).inset-none-md { position: relative; overflow: visible; width: auto; margin-left: 0 } } @media only screen and (min-width: 1041px) { .overlay-lg { position: absolute; z-index: 2; width: 100% } .bg-img-lg .grid,.bg-img-top-lg .grid,.bg-img-bottom-lg .grid { position: relative; z-index: 2 } .bg-img-lg img,.bg-img-top-lg img { padding-top: 0; position: absolute; top: 0 } .bg-img-bottom-lg img { padding-top: 0; position: absolute; bottom: 0 } .grid-inset-10-lg>[class*="col-"]:nth-child(odd)>* { padding-right: 10px } .grid-inset-10-lg>[class*="col-"]:nth-child(even)>* { padding-left: 10px } .grid-inset-15-lg>[class*="col-"]:nth-child(odd)>* { padding-right: 15px } .grid-inset-15-lg>[class*="col-"]:nth-child(even)>* { padding-left: 15px } .section-inset-lg { margin-left: 20px; margin-right: 20px } .section-inset-lg .container { width: 1000px; max-width: none } :not(img).inset-lg { position: relative; width: calc(100% - 40px); margin-left: 20px; overflow: hidden } :not(img).inset-left-lg { position: relative; overflow: hidden; width: calc(100% - 20px); margin-left: 20px } :not(img).inset-right-lg { position: relative; overflow: hidden; width: calc(100% - 20px); margin-left: 0 } :not(img).inset-none-lg { position: relative; overflow: visible; width: auto; margin-left: 0 } } @media only screen and (min-width: 1441px) { .overlay-xl { position: absolute; z-index: 2; width: 100% } .bg-img-xl .grid,.bg-img-top-xl .grid,.bg-img-bottom-xl .grid { position: relative; z-index: 2 } .bg-img-xl img,.bg-img-top-xl img { padding-top: 0; position: absolute; top: 0 } .bg-img-bottom-xl img { padding-top: 0; position: absolute; bottom: 0 } .grid-inset-10-xl>[class*="col-"]:nth-child(odd)>* { padding-right: 10px } .grid-inset-10-xl>[class*="col-"]:nth-child(even)>* { padding-left: 10px } .grid-inset-15-xl>[class*="col-"]:nth-child(odd)>* { padding-right: 15px } .grid-inset-15-xl>[class*="col-"]:nth-child(even)>* { padding-left: 15px } } .product-section.product-intro .button,.product-section.product-intro .button-flat { display: block; padding-top: 3px; margin: 23px auto 0; font-size: 1.6rem; font-weight: 500; height: 3.6rem; max-width: 262px; width: 100%; position: relative; z-index: 9 } @media only screen and (min-width: 561px) { .product-section.product-intro .button,.product-section.product-intro .button-flat { display: none } } .action { padding-top: 1rem; padding-bottom: 4rem; position: relative; background-color: #fff; z-index: 200 } .landing-action { margin-bottom: 13px } .action:after { clear: both; content: ''; display: table } .action .button,.action .button-flat { display: none } .action.trans-action { display: block; position: absolute; background-color: transparent } @media only screen and (min-width: 561px) { .action { margin: 0 auto; padding-top: 40px; padding-bottom: 12px; max-width: 1440px; width: 100%; display: block; z-index: 50; text-align: right; background-color: #fff } .action:after { background: none } .section-jump { display: none } .action .buy-now { max-width: 1040px; margin: 0 auto } .action .button { display: inline-block; margin-right: 20px; font-size: 16px; line-height: 22px; font-weight: 500; padding: 0 21px } .action .button-flat { display: inline-block; margin-right: 20px; font-size: 16px; line-height: 22px; font-weight: 500 } } @media only screen and (min-width: 769px) { .action { padding-top: 40px } } .section-jump { position: fixed; top: 144px; transition: top 0.1s; z-index: 200 } .menuUp .section-jump { top: 59px } .section-jump-state { display: none; position: absolute } .section-jump-label { display: block; position: relative; z-index: 201; height: 4rem; text-indent: 10px; padding-left: 10px; padding-right: 40px; border: 1px solid #D7D7D7; border-radius: 4px; box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1); background-color: #fff; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-weight: 600; font-size: 1.4rem; line-height: 4rem; overflow: hidden } .section-jump-state:checked ~ .section-jump-dropdown { max-height: 100vw; z-index: 202; overflow-y: scroll; box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1) } .dropdown-overflow { overflow-y: scroll; height: 100% } .section-jump-dropdown { border: 1px solid #D7D7D7; overflow: hidden; display: block; position: absolute; top: 0; height: auto; max-height: 4rem; width: calc(100% - 12px); background-color: #fff; border-radius: 4px; z-index: 200; transition: max-height 0.4s, z-index 0.7s } .section-jump-dropdown li { padding-left: 20px; list-style-type: none; font-weight: 400; font-size: 1.4rem; line-height: 4rem; cursor: pointer } .section-jump-dropdown li.selected { font-weight: 600 } .section-jump-dropdown li:after { display: block; content: ''; border-bottom: 1px solid #D7D7D7; width: calc(100% - 20px) } .section-jump-dropdown li:last-child:after { border-bottom: none } .section-jump-dropdown li a { text-decoration: none; color: #000 } .section-jump-dropdown li a:visited { color: #000 } .jump-arrow { position: absolute; top: 0; right: 8px; display: block; width: 46.5px; height: 48px; z-index: 203 } .jump-arrow span { position: absolute; height: 2px; width: 8px; top: 20px; border-radius: 1px; background-color: #000; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s } .jump-arrow-left { left: 21px; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .jump-arrow-right { left: 25px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .section-jump-state:checked ~ .jump-arrow .jump-arrow-left { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .section-jump-state:checked ~ .jump-arrow .jump-arrow-right { -webkit-transform: rotate(45deg); transform: rotate(45deg) } .section-jump-overlay { position: fixed; z-index: 199; top: 0; display: none; width: 100vw; height: 100vh; opacity: 0; left: 0; cursor: pointer } .next-page { display: none } .next-image { display: none; margin: 0 auto; max-width: 1440px } @media only screen and (min-width: 561px) { .next-image { display: block } } @media only screen and (min-width: 769px) { .next-image picture img { width: 100% } } .next-image .next-icon { margin: 10px auto 0; width: 40px; height: 40px; background-image: url(https://images.blackmagicdesign.com/images/products/common/next.svg?_v=1487557298); background-size: 40px 40px; background-position: 0 0 } .next-image:hover .next-icon { background-image: url(https://images.blackmagicdesign.com/images/products/common/next-hover.svg?_v=1488234891) } .next-image .next-text { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .next-image .next-text p { font-size: 12px; line-height: 14px; text-transform: uppercase; font: "Sofia Pro W03","Helvetica","Open Sans",sans-serif } .chinese .next-image .next-text p { font: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .japanese .next-image .next-text p { font: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .korean .next-image .next-text p { font: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .russian .next-image .next-text p { font: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .next-image .next-text h2 { font-size: 42px; line-height: 52px; font-weight: 600 } .learn-more { margin-top: 35px } .learn-more a { position: relative; display: block; width: 100%; height: 60px; margin-bottom: 1px; background-color: #404243; text-decoration: none } .learn-more p { display: block; position: relative; color: #fff; line-height: 60px; text-decoration: none; font-size: 14px; width: 234px; margin: 0 auto } .german .learn-more p { width: 264px } .spanish .learn-more p { width: 274px } .french .learn-more p { width: 294px } .learn-more a:visited { color: #fff } .learn-more a:hover { background-color: #525556 } .learn-more a:active { background-color: #525556; -moz-user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none } .learn-more a span { position: relative; font-weight: 600; padding-left: 10px } .learn-more p { position: relative } .learn-more p>img { position: absolute; top: 23px; right: 0; display: block; height: 13px; width: 8px } .learn-more li:last-child { margin-bottom: 0 } .german .learn-more p>img,.italian .learn-more p>img,.russian .learn-more p>img { right: -20px } .spanish .learn-more p>img,.french .learn-more p>img,.turkish .learn-more p>img { right: -10px } @media only screen and (min-width: 561px) { .learn-more { display: none } .next-page:before { padding-bottom: 30px; display: block; content: ''; max-width: 1000px; width: 100%; margin: 0 auto; border-top: 1px solid #D7D7D7 } .next-page-wrapper { max-width: 1440px; width: 100%; margin: 0 auto; position: relative; background-color: #fff } .next-page { max-width: 1040px; padding: 30px 0; margin: 0 auto; display: block; text-align: right } .next-page .button.icon-arrow.tertiary:after { display: none; background: none } .next-page .button { display: inline-block; width: auto; padding: 0 2.5rem; margin-right: 20px; font-size: 1.6rem; font-weight: 400 } } @media only screen and (min-width: 769px) { .next-page { max-width: 1040px } .next-page .button { margin-right: 20px } } .pg-product-list { margin-top: 2.4rem } .pg-product-list-item { border-top: 1px solid #D7D7D7; font-size: 1.4rem; line-height: 2rem } .pg-product-list-column:last-child .pg-product-list-item:last-child { border-bottom: 1px solid #D7D7D7 } .pg-product-list-item-name { float: left; display: block; max-width: 50%; width: 100%; padding: 11px 0 } .pg-product-list-item:after { content: ''; display: table; clear: both } .pg-product-list-item-price { float: right; text-align: right; font-weight: 600; padding: 11px 0 } .pg-new { position: absolute; top: 10px; left: 15px; padding: 5px 30px; font-size: 14px; line-height: 14px; text-transform: uppercase; color: #fff; font-weight: 400; background-color: #00aeef } @media only screen and (min-width: 769px) { .pg-product-list { padding-bottom: 35px; margin-bottom: 30px } .pg-product-list-column { float: left; width: calc(50% - 22px) } .pg-product-list-column:last-child { margin-left: 44px } .pg-product-list-column .pg-product-list-item:last-child { border-bottom: 1px solid #D7D7D7 } .pg-heading h2 { float: left; margin-right: 50px } .pg-heading .pg-technology { display: block; float: left; margin: 2px 0 9px } } .product-grid { background-color: #F7F7F7; padding-bottom: 30px } .product-grid h1 { font-size: 24px; font-weight: 600; padding-top: 31px; padding-bottom: 29px; line-height: 22px; text-align: center; width: 100% } @media only screen and (min-width: 769px) { .product-grid h1 { text-align: left } } .product-grid h2 { font-size: 18px; font-weight: 600; line-height: 23px; margin-bottom: 9px } .product-grid p { text-align: left; font-size: 1.4rem; line-height: 2.2rem; width: 100% } .product-grid .pg-price { font-size: 20px; font-weight: 600; text-align: center; margin-top: 40px } @media only screen and (min-width: 561px) { .product-grid .pg-price { margin-top: 0 } } @media only screen and (min-width: 769px) { .product-grid .pg-price { margin-top: 25px } } @media only screen and (min-width: 769px) { .product-grid .pg-product-full .pg-price { margin-top: 0 } } .product-grid .grid { margin-bottom: 0; margin-right: -10px; margin-left: -10px; max-width: 1020px } .product-grid .grid [class*="col-"] { margin-bottom: 10px; padding-left: 10px; padding-right: 10px } @media only screen and (min-width: 769px) { .product-grid .grid [class*="col-"] { margin-bottom: 0 } } .product-grid .grid [class*="col-"]:last-child { margin-bottom: 0 } .product-grid .pg-product:not(.pg-product-full) { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } @media only screen and (min-width: 561px) { .product-grid .pg-product:not(.pg-product-full) { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } } @media only screen and (min-width: 769px) { .product-grid .pg-product:not(.pg-product-full) { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } .product-grid .grid [class*="col-"].pg-product.pg-product-full { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } @media only screen and (min-width: 561px) { .product-grid .grid [class*="col-"].pg-product.pg-product-full { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } } .product-grid .grid [class*="col-"].pg-product { padding: 45px 30px 30px; border: 1px solid #D7D7D7; background-color: #FFF } @media only screen and (min-width: 561px) { .product-grid .grid [class*="col-"].pg-product { padding-top: 25px } } .product-grid .grid [class*="col-"].pg-image { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; padding: 0; margin-bottom: 25px; text-align: center } .product-grid .grid [class*="col-"].pg-image img { max-width: 100%; width: auto } @media only screen and (min-width: 561px) { .product-grid .grid [class*="col-"].pg-image { margin-bottom: 0; text-align: left; padding-right: 30px } } @media only screen and (min-width: 769px) { .product-grid .grid [class*="col-"].pg-image { margin-bottom: 25px; padding-right: 0; text-align: center } } .product-grid .grid [class*="col-"].pg-product-full .pg-image { margin: 0 auto 25px } @media only screen and (min-width: 561px) { .product-grid .grid [class*="col-"].pg-product-full .pg-image { margin: 0; padding-right: 30px } } .product-grid .grid [class*="col-"].pg-text { -webkit-box-flex: 2; -webkit-flex: 2 1 auto; -ms-flex: 2 1 auto; flex: 2 1 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding-left: 0; padding-right: 0 } .product-grid .grid [class*="col-"].pg-text p { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1 } .product-grid .pg-buy { margin: 6px auto 0; width: 262px; text-align: center } @media only screen and (min-width: 561px) { .product-grid .pg-buy { margin-left: auto; margin-right: 0; width: auto; margin-top: 15px; text-align: right } } @media only screen and (min-width: 769px) { .product-grid .pg-buy { margin-right: auto; margin-top: 6px; text-align: center } } @media only screen and (min-width: 561px) { .product-grid .pg-product-full .pg-buy { margin-left: auto; margin-right: 0; text-align: right } } .product-grid .pg-buy a { display: block; font-size: 16px; line-height: 32px; font-weight: 500; height: 36px; padding: 0 29px; margin-top: 10px } @media only screen and (min-width: 561px) { .product-grid .pg-buy a { height: 27px; line-height: 23px; display: inline-block; min-width: 128px; margin-left: 10px } } @media only screen and (min-width: 769px) { .product-grid .pg-buy a { display: inline-block; margin-left: 0 } } .product-grid .pg-product-full { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } .product-grid .pg-product-full .pg-buy a { display: block; margin-left: 10px } @media only screen and (min-width: 561px) { .product-grid .pg-product-full .pg-buy a { display: inline-block; margin-left: 10px } } .product-grid-filter { background-color: #F7F7F7; padding-bottom: 30px } .product-grid-filter .grid { margin-bottom: 20px } .product-grid-filter .grid:last-child .pg-image { height: 125px } .product-grid-filter h1 { text-align: center; font-weight: 600; padding-top: 31px; padding-bottom: 29px; letter-spacing: -1px; line-height: 38px; font-size: 32px } @media only screen and (min-width: 561px) { .product-grid-filter h1 { font-size: 34px } } @media only screen and (min-width: 769px) { .product-grid-filter h1 { font-size: 36px } } .product-grid-filter h2 { font-size: 18px; font-weight: 600; line-height: 23px; margin-bottom: 9px } .product-grid-filter p { text-align: left; font-size: 1.4rem; line-height: 2.2rem; width: 100% } .product-grid-filter .pg-dropdown-container { text-align: center } .product-grid-filter .pg-menu-state { display: none; position: absolute } .product-grid-filter .pg-dropdown { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; font-size: 14px; font-weight: 600; text-align: center; color: #333 } .product-grid-filter .pg-menu { margin-top: 14px; text-align: center; overflow: hidden; position: relative; height: auto; max-height: 0; transition: max-height .4s } .product-grid-filter .pg-menu-state:checked ~ .pg-menu { display: block; overflow-y: scroll; max-height: 114px } .product-grid-filter .pg-menu li { list-style-type: none } .product-grid-filter .pg-menu li:last-child { margin-bottom: 19px } .product-grid-filter .pg-menu a { color: #333; text-decoration: none; font-size: 14px; line-height: 30px; cursor: pointer } .product-grid-filter .pg-menu a.active { font-weight: 600 } .product-grid-filter .pg-select-range,.product-grid-filter .pg-range { font-size: 14px; font-weight: 600; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .product-grid-filter .pg-select-range { display: none } .product-grid-filter .pg-menu-state:checked+.pg-dropdown .pg-range { display: none } .product-grid-filter .pg-menu-state:checked+.pg-dropdown .pg-select-range { display: block } .product-grid-filter .pg-arrow { position: relative; width: 25px; height: 20px; margin-top: 9px; margin-left: 8px } .product-grid-filter .pg-arrow span { position: absolute; width: 10px; height: 2px; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; border-radius: 1px; background-color: #000 } .product-grid-filter .pg-arrow .pg-arrow-left { left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .product-grid-filter .pg-arrow .pg-arrow-right { left: 6px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .product-grid-filter .pg-menu-state:checked ~ .pg-dropdown .pg-arrow-right { -webkit-transform: rotate(45deg); transform: rotate(45deg) } .product-grid-filter .pg-menu-state:checked ~ .pg-dropdown .pg-arrow-left { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } @media only screen and (min-width: 561px) { .product-grid-filter h1 { padding-bottom: 0 } .product-grid-filter .pg-dropdown { display: none } .product-grid-filter .pg-menu { max-height: none; text-align: center } .product-grid-filter .pg-menu li { max-height: none; display: inline-block; margin: 0 20px; margin-bottom: 37px } .product-grid-filter .pg-menu a.active { padding-bottom: 8px; border-bottom: 2px solid #F6A623 } } .product-grid-filter .grid [class*="col-"] { margin-bottom: 10px; padding-left: 10px; padding-right: 10px } @media only screen and (min-width: 561px) { .product-grid-filter .grid [class*="col-"] { padding-left: 5px; padding-right: 5px } } @media only screen and (min-width: 769px) { .product-grid-filter .grid [class*="col-"] { margin-bottom: 0 } } .product-grid-filter .grid [class*="col-"]:last-child { margin-bottom: 0 } .product-grid-filter .grid [class*="col-"].pg-text { -webkit-box-flex: 2; -webkit-flex: 2 1 auto; -ms-flex: 2 1 auto; flex: 2 1 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding-left: 0; padding-right: 0 } .product-grid-filter .pg-product { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background-color: #FFF; padding: 10px 15px; margin: 0 auto; width: 100%; -webkit-flex-direction: row !important; -ms-flex-direction: row !important; flex-direction: row !important; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } @media only screen and (min-width: 561px) { .product-grid-filter .pg-product { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -webkit-flex-direction: column !important; -ms-flex-direction: column !important; flex-direction: column !important; padding: 10px; margin-bottom: 10px } } .product-grid-filter .pg-product h2 { margin-bottom: 5px } @media only screen and (min-width: 561px) { .product-grid-filter .pg-product h2 { margin-top: 14px; margin-bottom: 12px } } .product-grid-filter .pg-product p { display: none; line-height: 18px } @media only screen and (min-width: 561px) { .product-grid-filter .pg-product p { display: block } } .product-grid-filter .pg-product .price { display: block; font-size: 20px; font-family: "Radnika Condensed","effra","Open Sans",sans-serif } @media only screen and (min-width: 561px) { .product-grid-filter .pg-product .price { margin-top: 20px; margin-bottom: 20px; font-size: 22px } } .product-grid-filter .pg-product img { display: none } @media only screen and (min-width: 561px) { .product-grid-filter .pg-product img { display: block; width: 100%; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } } @media only screen and (min-width: 561px) { .product-grid-filter .pg-product .pg-text { -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto } } .product-grid-filter .pg-product .pg-text h2 { max-width: 290px; font-size: 16px; line-height: 20px; letter-spacing: -1px; padding-right: 15px } @media only screen and (min-width: 561px) { .product-grid-filter .pg-product .pg-text h2 { font-size: 20px; line-height: 23px; padding-right: 0 } } .product-grid-filter .pg-product .pg-text p { max-width: 290px; padding-right: 15px } @media only screen and (min-width: 561px) { .product-grid-filter .pg-product .pg-text p { padding-right: 0 } } .product-grid-filter .pg-product .pg-buy { margin: 0; padding-right: 0 } @media only screen and (min-width: 561px) { .product-grid-filter .pg-product .pg-buy { width: 100%; max-width: none; margin-top: auto; padding-left: 0; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto } } .product-grid-filter .pg-product .pg-buy a { display: block; font-size: 16px; line-height: 32px; font-weight: 500; height: 36px; padding: 0 29px; margin-top: 10px } @media only screen and (min-width: 561px) { .product-grid-filter .pg-product .pg-buy a { height: 27px; line-height: 23px; display: inline-block; min-width: 128px; margin-left: 10px } } @media only screen and (min-width: 769px) { .product-grid-filter .pg-product .pg-buy a { display: inline-block; margin-left: 0 } } .product-grid-filter .pg-product .pg-buy .button { min-height: 40px; padding: 10px 10px; height: auto; max-width: 178px; margin: 0 0 0 auto; line-height: 18px; background-color: #FFF; background-image: none; border: 1px solid #0088CF; border-radius: 4px; box-shadow: none; color: #0088CF; font-size: 16px; font-family: "Gibson W04","Helvetica","Open Sans",sans-serif } @media only screen and (min-width: 561px) { .product-grid-filter .pg-product .pg-buy .button { width: 100%; max-width: none } } .product-grid-filter .pg-product .pg-buy .button:first-child:not(:only-child) { margin-bottom: 5px } .blackout { position: fixed; background: #000; width: 100%; height: 100%; top: 0; left: 0; z-index: 999; opacity: 0.8; display: none } .close-video { width: 48px; height: 48px; background-image: url(https://images.blackmagicdesign.com/images/common/modal/close.png?_v=1460999797); background-size: 48px 96px; background-repeat: no-repeat; position: fixed; right: 40px; top: 40px; z-index: 1001 } .close-video:hover { cursor: pointer } @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-resolution: 120dpi) { .close-video { background-image: url(https://images.blackmagicdesign.com/images/common/modal/close@2x.png?_v=1460999797) } } @media screen and (orientation: landscape) and (min-height: 710px) { .close-video { top: -80px } } .video-container { position: fixed; width: calc(100% - 20px); height: 100%; max-width: 960px; max-height: 540px; margin-left: 0; margin-top: 0; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1000; display: none } @media only screen and (min-width: 769px) { .video-container { width: calc(100% - 40px) } } .video-content { position: relative; padding-bottom: 56.25%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .product-specs { padding-top: 20px; background-color: #fff } @media only screen and (min-width: 1041px) { .product-specs { padding-top: 40px } } .product-specs .techspecs-body { margin-bottom: 34px } .product-specs .sticky { position: -webkit-sticky; position: sticky; top: 174px } .product-specs .techspec-grid { -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start } .techspecs-nav { margin-bottom: 0 } @media only screen and (min-width: 1041px) { .techspecs-nav .dropdown { display: none } } .techspecs-nav .techspecs-product { display: none } @media only screen and (min-width: 1041px) { .techspecs-nav .techspecs-product { display: block } } .techspecs-nav.open .techspecs-product { display: block } .dropdown,.techspecs-product { position: relative; padding: 15px 17px; background-color: #F7F7F7; cursor: pointer; margin-bottom: 0; transition: background-color 0.2s } @media only screen and (min-width: 1041px) { .dropdown,.techspecs-product { margin-bottom: 10px } } .dropdown .product-name,.techspecs-product .product-name { padding: 0; font-size: 14px; line-height: 18px; font-family: "Sofia Pro W03","Helvetica","Open Sans",sans-serif; font-weight: 600 } .chinese .dropdown .product-name,.chinese .techspecs-product .product-name { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .japanese .dropdown .product-name,.japanese .techspecs-product .product-name { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .korean .dropdown .product-name,.korean .techspecs-product .product-name { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .russian .dropdown .product-name,.russian .techspecs-product .product-name { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .dropdown .nav-arrow,.techspecs-product .nav-arrow { display: none; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 25px; width: 12px; height: 7px; z-index: 2 } @media only screen and (min-width: 1041px) { .dropdown .nav-arrow,.techspecs-product .nav-arrow { right: 10px; top: 45% } } .dropdown .nav-arrow span,.techspecs-product .nav-arrow span { position: absolute; height: 2px; width: 8px; border-radius: 1px; background-color: #000 } .dropdown .nav-arrow-left,.techspecs-product .nav-arrow-left { left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .dropdown .nav-arrow-right,.techspecs-product .nav-arrow-right { left: 5px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .open .dropdown:hover,.open .techspecs-product:hover { background-color: rgba(247,247,247,0.6) } @media only screen and (min-width: 1041px) { .dropdown.active .nav-arrow,.techspecs-product.active .nav-arrow { display: block; -webkit-transform: rotate(-90deg); transform: rotate(-90deg) } } @media only screen and (max-width: 1041px) { .dropdown.active,.techspecs-product.active { font-weight: 600 } .dropdown.active .nav-arrow span,.techspecs-product.active .nav-arrow span { top: 2px; width: 16px } .dropdown.active .nav-arrow-left,.dropdown.active .nav-arrow-right,.techspecs-product.active .nav-arrow-left,.techspecs-product.active .nav-arrow-right { left: -1px } } @media only screen and (min-width: 1041px) { .dropdown.active,.techspecs-product.active { background-color: #fff } .dropdown.active:before,.dropdown.active:after,.techspecs-product.active:before,.techspecs-product.active:after { content: " "; position: absolute; left: 0; width: 100%; height: 1px; z-index: 2; background-color: #ededed } .dropdown.active:before,.techspecs-product.active:before { top: 0 } .dropdown.active:after,.techspecs-product.active:after { bottom: 0 } } .techspecs.active+.dropdown,.techspecs.active+.techspecs-product { margin-top: 34px } @media only screen and (min-width: 1041px) { .techspecs.active+.dropdown,.techspecs.active+.techspecs-product { margin-top: 0 } } .dropdown:hover { background-color: rgba(247,247,247,0.6) } .dropdown .nav-arrow { display: block } .open .dropdown .nav-arrow { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .description a { color: #00aeef; text-decoration: none } .description a+a { margin-left: 10px } .techspecs { display: none } .techspecs.active { display: block } .techspecs h1 { font-size: 22px; line-height: 24px } .techspecs h2 { margin-top: 7px; font-size: 20px; line-height: 16px; font-weight: 300; color: #666666 } .techspecs h3 { font-size: 18px; line-height: 24px; color: #000000 } .techspecs h4 { font-size: 14px; line-height: 24px } .techspecs p,.techspecs .pair { font-size: 14px; line-height: 22px; color: #333 } .techspecs .note { font-size: 1.2rem; line-height: 1.6rem } .techspecs p.header-space { margin-top: 11px } .techspecs .disclaimer { margin-top: 11px; padding-bottom: 8px } .techspecs .disclaimer p { font-size: 1.2rem; line-height: 1.6rem } .techspecs .disclaimer p:first-child { min-width: 17px } .techspecs .disclaimer .indented { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } .techspecs .heading { margin-top: 30px; margin-bottom: 40px } .techspecs .heading .title-text { margin-bottom: 20px } .techspecs .heading .button:first-child { margin-right: 35px } .techspecs .hero img { max-width: 100%; width: auto } .techspecs .description { padding-top: 24px; border-top: 1px solid #D7D7D7 } .techspecs .description [class*="col-"] { margin-bottom: 0 } .techspecs .description .ts-price-value { font-size: 25px; line-height: 28px } .techspecs .description p { margin-top: 17px } @media only screen and (min-width: 1041px) { .techspecs .description p { max-width: 411px } } .techspecs .description p+.pair { margin-top: 11px } .techspecs .description a { color: #00aeef; text-decoration: none } .techspecs .description a+a { margin-left: 10px } .techspecs .description .pair+.pair { margin-top: 11px } .techspecs .features { margin-top: 24px; padding-top: 24px; border-top: 1px solid #D7D7D7 } .techspecs .features h3 { margin-bottom: 14px } @media only screen and (min-width: 561px) { .techspecs .features .autocolumns { -webkit-column-count: 2; column-count: 2 } } @media only screen and (min-width: 561px) { .techspecs .features.single .autocolumns { -webkit-column-count: 1; column-count: 1 } } .techspecs .features .pair { padding-bottom: 8px; overflow: hidden; -webkit-column-break-inside: avoid; break-inside: avoid } .techspecs .features img,.techspecs .features picture img { margin-top: 20px; max-width: 100%; width: auto } .techspecs .features img { vertical-align: middle } .techspecs .features img+span { vertical-align: middle; margin-top: 20px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex } .techspecs .features.operatingsystem img,.techspecs .features.operatingsystem picture img { margin-top: 0; margin-bottom: 10px } .techspecs .features.operatingsystem .autocolumns .pair { margin-bottom: 15px } @media only screen and (min-width: 561px) { .techspecs .features.operatingsystem .autocolumns .pair { margin-bottom: 0px } } @media only screen and (min-width: 769px) { .techspecs .features.operatingsystem .autocolumns { -webkit-column-count: auto; column-count: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .techspecs .features.operatingsystem .autocolumns .pair { width: calc((100% - 10px) / 2) } .techspecs .features.operatingsystem .autocolumns .pair:nth-child(3) { margin-top: 10px } } .techspecs .features a { color: #00aeef; text-decoration: none } .techspecs .features h3+img { margin-top: 0 } .techspecs .features h3+img+.autocolumns { margin-top: 10px } .techspecs .physical { margin-top: 24px; padding-top: 24px; border-top: 1px solid #D7D7D7 } .techspecs .physical h3 { margin-bottom: 14px } .techspecs .software-applications { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 10px } .techspecs .software-applications .software-application { width: 50%; margin-bottom: 10px } @media only screen and (min-width: 561px) { .techspecs .software-applications .software-application { width: 33% } } .techspecs .software-applications .software-application img { display: block; margin: 0 auto } .techspecs .software-applications .software-application p { text-align: center } .techspecs .operating-systems { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .techspecs .operating-systems .operating-system { margin-bottom: 20px } @media only screen and (min-width: 561px) { .techspecs .operating-systems .operating-system { margin-bottom: 0 } } .techspecs .operating-systems .operating-system { width: 100% } @media only screen and (min-width: 561px) { .techspecs .operating-systems .operating-system:first-child:nth-last-child(2),.techspecs .operating-systems .operating-system:first-child:nth-last-child(2) ~ .operating-system { width: calc(50% - 10px) } } @media only screen and (min-width: 561px) { .techspecs .operating-systems .operating-system:first-child:nth-last-child(3),.techspecs .operating-systems .operating-system:first-child:nth-last-child(3) ~ .operating-system { width: calc(33.3333% - 10px) } } .techspecs .operating-systems .operating-system:last-child { margin-bottom: 0 } .techspecs .operating-systems .operating-system img { display: block; margin: 0 auto 10px } .techspecs .operating-systems .operating-system p { text-align: center } @media print { .techspecs .features.connections { border-bottom: 0 !important } } .spanish .sub-menu li:not(:first-child):not(.gn-home-divider):not(.gn-page) { margin-left: 12px } @media only screen and (min-width: 769px) { .container { max-width: 728px } } @media only screen and (min-width: 1041px) { .container { max-width: 1000px } } .product-section { margin-top: 22px } .product-content { overflow: hidden } .autocolumns-md,.autocolumns-lg { -webkit-column-gap: 30px; column-gap: 30px } .title-container .content { margin-bottom: 0 } @media only screen and (min-width: 561px) and (max-width: 769px) { .nb-sm-md { white-space: nowrap } } @media only screen and (min-width: 769px) and (max-width: 1041px) { .nb-md-lg { white-space: nowrap } } .next-image { height: 150px } @media only screen and (min-width: 769px) { .next-image { height: 200px } } .next-image picture img { width: auto !important } .next-page-wrapper { display: none } .product-grid-filter .pg-product .pg-buy .button.disabled { display: block; font-weight: 500; color: #c3c3c3; border: 1px solid #c3c3c3 } @media only screen and (min-width: 561px) { .product-grid-filter .pg-menu li { margin-bottom: 19px } .product-grid-title { margin-bottom: 26px } .product-grid-filter .grid [class*="col-"].stretch { margin-bottom: 0 } } .techspecs-nav { margin-bottom: 0 } @media print { .techspecs .features.connections { border-bottom: 0 !important } } .product-section { margin-top: 0 } .product-section picture img { padding-top: 0 } .product-section .grid { margin-top: 0; margin-bottom: 0 } .product-section [class*="col-"] { margin-bottom: 0 } .product-section img+.container { margin-top: 0 } .product-section .container+img,.product-section .container+picture img,.product-section .grid+img,.product-section .grid+picture img,.product-section .heading+.crop,.product-section .container+.crop,.product-section .grid+.crop,.product-section [class*="col-"]+.crop { padding-top: 0 } .product-section .txt { margin-top: 22px; margin-bottom: 22px } .product-section img.bottom-xs { position: absolute; bottom: 0 } .product-section img.top-xs { position: absolute; top: 0 } @media only screen and (min-width: 561px) { .product-section img.bottom-sm { position: absolute; bottom: 0 } } @media only screen and (min-width: 561px) { .product-section img.top-sm { position: absolute; top: 0 } } @media only screen and (min-width: 769px) { .product-section img.bottom-md { position: absolute; bottom: 0 } } @media only screen and (min-width: 769px) { .product-section img.top-md { position: absolute; top: 0 } } @media only screen and (min-width: 1041px) { .product-section img.bottom-lg { position: absolute; bottom: 0 } } @media only screen and (min-width: 1041px) { .product-section img.top-lg { position: absolute; top: 0 } } .landing-intro { padding-bottom: 0 } .landing-intro .title-container { z-index: 2 } @media only screen and (min-width: 769px) { .landing-intro .title-container { position: absolute; top: 62px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } } @media only screen and (min-width: 1041px) { .landing-intro .title-container { top: 70px } } .landing-projects { background-color: #F2F2F2; padding-top: 10px } @media only screen and (min-width: 561px) { .landing-projects { padding-top: 20px } } .landing-projects img { padding: 10px 10px 22px } @media only screen and (min-width: 561px) { .landing-projects img { padding: 20px 20px 22px } } @media only screen and (min-width: 769px) { .landing-projects .grid.overlay-md { top: -61.9vw } } @media only screen and (min-width: 1441px) { .landing-projects .grid.overlay-md { top: -901px } } .landing-projects .project-types { margin: 0 auto 30px; max-width: 1000px } .landing-projects .project-types .type { margin: 0 auto } @media only screen and (min-width: 769px) { .landing-projects .project-types .type:nth-child(1) { padding-right: 7px; padding-left: 0 } } @media only screen and (min-width: 1041px) { .landing-projects .project-types .type:nth-child(1) { padding-right: 6px } } @media only screen and (min-width: 769px) { .landing-projects .project-types .type:nth-child(2) { padding-left: 3px; padding-right: 3px } } @media only screen and (min-width: 1041px) { .landing-projects .project-types .type:nth-child(2) { padding-left: 4px; padding-right: 4px } } @media only screen and (min-width: 769px) { .landing-projects .project-types .type:nth-child(3) { padding-left: 6px; padding-right: 0 } } @media only screen and (min-width: 1041px) { .landing-projects .project-types .type:nth-child(3) { padding-left: 7px; padding-right: 0 } } .landing-projects .project-types img { padding: 0 } .landing-projects .project-types .tile-details { background: #fff; height: 65px; padding: 0 15px } .landing-projects .project-types .tile-title { font-family: "Sofia Pro W03","Helvetica","Open Sans",sans-serif; font-size: 22px; font-weight: 300; display: inline-block; line-height: 65px } .chinese .landing-projects .project-types .tile-title { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .japanese .landing-projects .project-types .tile-title { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .korean .landing-projects .project-types .tile-title { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .russian .landing-projects .project-types .tile-title { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } @media only screen and (min-width: 769px) { .landing-projects .project-types .tile-title { display: block; line-height: initial; padding-top: 2px } } @media only screen and (min-width: 1041px) { .landing-projects .project-types .tile-title { display: inline-block; line-height: 65px; padding-top: 0 } } .landing-projects .project-types .tile-link { font-size: 14px; font-weight: 600; text-decoration: none; color: #000; display: inline-block; line-height: 65px; float: right } @media only screen and (min-width: 769px) { .landing-projects .project-types .tile-link { float: left; display: block; line-height: initial; padding-top: 5px } } @media only screen and (min-width: 1041px) { .landing-projects .project-types .tile-link { display: inline-block; line-height: 65px; padding-top: 0; float: right } } .landing-projects .project-types .tile-link a { text-decoration: none; color: #00aeef; font-size: 16px; font-family: "Gibson W04","Helvetica","Open Sans",sans-serif } .chinese .landing-projects .project-types .tile-link a { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .japanese .landing-projects .project-types .tile-link a { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .korean .landing-projects .project-types .tile-link a { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .russian .landing-projects .project-types .tile-link a { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .landing-projects .owl-pagination { margin: 10px auto 0; padding-bottom: 20px; width: 91px } @media only screen and (min-width: 769px) { .landing-projects .owl-pagination { width: 61px } } .landing-projects .owl-page { float: left; width: 10px; height: 10px; margin: 10px; box-sizing: border-box; border-radius: 50%; border-style: solid; border-width: 2px; border-color: #F5A623 } .landing-projects .owl-page.active { background-color: #F5A623 } .landing-models { margin-top: 0; padding-top: 30px } .landing-design { background-color: #333333; padding-bottom: 22px; padding-top: 10px } @media only screen and (min-width: 561px) { .landing-design { padding-top: 20px } } .landing-design .container { margin-top: 22px } .landing-design .images { width: calc(100% - 20px); margin: 0 auto; font-size: 0 } @media only screen and (min-width: 561px) { .landing-design .images { width: calc(100% - 40px) } } .landing-design .images .image { display: inline-block; width: calc((100% - 20px) / 3); margin-right: 10px } @media only screen and (min-width: 561px) { .landing-design .images .image { width: calc((100% - 40px) / 3); margin-right: 20px } } .landing-design .images .image:last-child { margin-right: 0 } .landing-filters { padding-top: 10px } @media only screen and (min-width: 561px) { .landing-filters { padding-top: 20px } } @media only screen and (min-width: 1041px) { .landing-filters img.image { width: auto; margin: 0 auto } } .landing-filters .video { position: relative } .landing-filters .video .controls { position: static; z-index: 3 } .landing-filters .video .control { width: 80px; height: 80px; position: absolute; left: 50%; margin-left: -40px; z-index: 10; top: 50%; margin-top: -40px; cursor: pointer } .landing-filters .filters-video { position: relative; z-index: 2; width: 100% } .landing-filters .still { position: absolute; top: 0; z-index: 1 } .landing-filters #filters-video-control-replay { display: none } .landing-controls { margin-top: 10px } @media only screen and (min-width: 561px) { .landing-controls { margin-top: 20px } } .landing-controls.section-divider::before { padding-bottom: 0 } .landing-controls>img { padding-top: 13px } .landing-controls .txt { margin-bottom: 14px } @media only screen and (min-width: 1041px) { .landing-controls .txt { margin-bottom: 32px } } .landing-mounts { background-color: #E1E4EC; margin-top: 10px } @media only screen and (min-width: 561px) { .landing-mounts { margin-top: 20px } } @media only screen and (min-width: 1041px) { .landing-mounts { background-color: #fff; margin-top: 0 } } @media only screen and (min-width: 1041px) { .landing-mounts picture img { position: absolute; top: 0 } } .landing-mounts .inset-xs { margin-top: 10px } @media only screen and (min-width: 561px) { .landing-mounts .inset-xs { margin-top: 20px } } @media only screen and (min-width: 1041px) { .landing-mounts .inset-xs { margin-bottom: 20px } } .landing-mounts .grid { padding: 22px 0 22px } @media only screen and (min-width: 769px) { .landing-mounts .grid { padding-bottom: 22px } } @media only screen and (min-width: 1041px) { .landing-mounts .grid { padding-top: 543px } } @media only screen and (min-width: 1441px) { .landing-mounts .grid { top: -510px } } .landing-display { background-color: #50555C; margin-top: 0; padding-bottom: 10px; padding-bottom: 30px } @media only screen and (min-width: 1041px) { .landing-display { padding-bottom: 20px } } .landing-display .display-video { position: relative; z-index: 2; width: 100% } .landing-display .title-container { margin-top: 22px } @media only screen and (min-width: 1041px) { .landing-display .txt { margin-bottom: 2px } } @media only screen and (min-width: 1041px) { .landing-display .image-container { margin-top: 22px } } .landing-display .image-container .still { position: relative; z-index: 2; width: 100% } @media only screen and (min-width: 769px) { .landing-display .image-container .still.hide-md { display: none } } .landing-sensor { background-color: #E1E4EC; margin-top: 0 } @media only screen and (min-width: 769px) { .landing-sensor { padding-bottom: 0 } } @media only screen and (min-width: 1041px) { .landing-sensor { padding-bottom: 30px } } .landing-sensor .img-container { margin-bottom: 10px } @media only screen and (min-width: 769px) { .landing-sensor .img-container { margin-bottom: 0 } } .landing-sensor .txt { margin-top: 0; margin-bottom: 53px } @media only screen and (min-width: 561px) { .landing-sensor .txt { margin-bottom: 72px } } @media only screen and (min-width: 769px) { .landing-sensor .txt { margin-bottom: 118px } } @media only screen and (min-width: 1041px) { .landing-sensor .txt { margin-top: 64px; margin-bottom: 58px } } @media only screen and (min-width: 1041px) { .landing-sensor img.image { margin-top: -63px } } .landing-sensor .sensor-labels { margin: 20px auto 0 } .landing-sensor .sensor-labels .sensor-label { width: calc(50% - 10px); display: inline-block; border-top: 2px solid #333333; border-bottom: 2px solid #333333; padding: 10px 0; margin-right: 10px } @media only screen and (min-width: 561px) { .landing-sensor .sensor-labels .sensor-label { max-width: 200px } } .landing-sensor .sensor-labels .sensor-label:last-child { margin-right: 0 } .landing-sensor .sensor-labels .sensor-label .value { font-size: 26px; font-family: "Sofia Pro W03","Helvetica","Open Sans",sans-serif; font-weight: 400; text-align: center; color: #333333; padding-bottom: 4px } @media only screen and (max-width: 400px) { .landing-sensor .sensor-labels .sensor-label .value { font-size: 20px; padding-bottom: 2px } } .landing-sensor .sensor-labels .sensor-label .label { font-size: 14px; font-weight: 400; text-align: center; color: #666666 } @media only screen and (max-width: 400px) { .landing-sensor .sensor-labels .sensor-label .label { font-size: 12px } } .landing-sensor .raw-download { color: #333; display: block } .landing-sensor .raw-download p { margin-top: 10px } .landing-colorimetry { background-color: #000000; margin-top: 0 } .landing-colorimetry .txt { margin-top: 0 } @media only screen and (min-width: 769px) { .landing-colorimetry .txt { marign-top: 22px } } .landing-colorimetry img.image { padding-bottom: 30px } @media only screen and (min-width: 561px) { .landing-colorimetry img.image { padding: 0 0 30px } } @media only screen and (min-width: 769px) { .landing-colorimetry img.image { padding: 0px 0 30px } } @media only screen and (min-width: 1041px) { .landing-colorimetry img.image { padding: 123px 0 45px } } .landing-colorimetry .text-container { padding: 56px 0 0 } @media only screen and (min-width: 561px) { .landing-colorimetry .text-container { padding: 62px 0 22px; margin-bottom: 0 } } @media only screen and (min-width: 769px) { .landing-colorimetry .text-container { padding: 110px 0 30px; margin-bottom: 0 } } @media only screen and (min-width: 1041px) { .landing-colorimetry .text-container { padding-top: 65px; padding-bottom: 0 } } .landing-colorimetry.clip-svg-top { margin-top: -30px; -webkit-clip-path: url("#clip-shape-top-xs"); clip-path: url("#clip-shape-top-xs"); -webkit-transform: translateZ(0px) } @media only screen and (min-width: 561px) { .landing-colorimetry.clip-svg-top { margin-top: -42px; -webkit-clip-path: url("#clip-shape-top-sm"); clip-path: url("#clip-shape-top-sm") } } @media only screen and (min-width: 769px) { .landing-colorimetry.clip-svg-top { margin-top: -118px; -webkit-clip-path: url("#clip-shape-top-md"); clip-path: url("#clip-shape-top-md") } } .landing-framerate { background-color: #F1F3F6; margin-top: 0 } .landing-framerate .video { position: relative } .landing-framerate .video .controls { position: static; z-index: 3 } .landing-framerate .video .control { cursor: pointer; width: 80px; height: 80px; position: absolute; left: 50%; margin-left: -40px; z-index: 10; top: 50%; margin-top: -40px; cursor: pointer } .landing-framerate .framerate-video { position: relative; width: 100%; z-index: 2 } .landing-framerate .still { position: absolute; top: 0; z-index: 1 } .landing-framerate #framerate-video-control-replay { display: none } .landing-recording { margin-top: 0; background-color: #23272B; padding-top: 10px } @media only screen and (min-width: 561px) { .landing-recording { padding-top: 20px } } @media only screen and (min-width: 769px) { .landing-recording { padding-top: 0 } } .landing-recording .text-container { padding-bottom: 22px; padding-top: 22px } @media only screen and (min-width: 769px) { .landing-recording .text-container { padding-bottom: 329px; padding-top: 60px } } @media only screen and (min-width: 1041px) { .landing-recording .text-container { padding-bottom: 373px; padding-top: 52px } } .landing-ssd-recorder { background-color: #9399AB; margin-top: 10px } @media only screen and (min-width: 561px) { .landing-ssd-recorder { margin-top: 20px } } @media only screen and (min-width: 769px) { .landing-ssd-recorder { background-color: transparent } } @media only screen and (min-width: 769px) { .landing-ssd-recorder { margin-top: 20px; margin-bottom: 20px } } .landing-ssd-recorder .txt { margin-top: -10vw; z-index: 2 } @media only screen and (min-width: 769px) { .landing-ssd-recorder .txt { margin-top: 22px } } @media only screen and (min-width: 1041px) { .landing-ssd-recorder .txt { margin-top: 42px; margin-bottom: 42px } } @media only screen and (min-width: 769px) { .landing-ssd-recorder .txt-reverse-xs h3 { color: #666666 } } @media only screen and (min-width: 769px) { .landing-ssd-recorder .txt-reverse-xs p,.landing-ssd-recorder .txt-reverse-xs h2 { color: #333 } } .landing-ssd-recorder img.image { width: calc(100% + 21px); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: relative } @media only screen and (min-width: 561px) { .landing-ssd-recorder img.image { width: calc(100% + 41px) } } @media only screen and (min-width: 769px) { .landing-monitoring { margin-top: 20px } } .landing-monitoring picture img { padding: 0 10px 0 } @media only screen and (min-width: 769px) { .landing-monitoring picture img { padding: 0 20px 0 } } .landing-monitoring .text-container { padding-top: 20px; padding-bottom: 22px } @media only screen and (min-width: 769px) { .landing-monitoring .text-container { padding-top: 22px; padding-bottom: 687px; z-index: 1 } } @media only screen and (min-width: 1041px) { .landing-monitoring .text-container { padding-bottom: 773px; padding-top: 22px } } .landing-monitoring .screens { position: absolute; overflow: hidden; border-radius: 2px; bottom: 30.3vw; left: 50.5%; width: 63.6vw; height: 36.4vw; z-index: 2; -webkit-transform: translateX(-50%); transform: translateX(-50%) } @media only screen and (min-width: 561px) { .landing-monitoring .screens { border-radius: 4px; bottom: 25.1vw; width: 67.9vw; height: 38.3vw; left: 48.3% } } @media only screen and (min-width: 637px) { .landing-monitoring .screens { border-radius: 4px; bottom: 22.7vw; width: 68.7%; height: 41vw; left: 48.4% } } @media only screen and (min-width: 719px) { .landing-monitoring .screens { border-radius: 4px; bottom: 24.9vw; width: 519.3px; height: 295px; left: 48.4% } } @media only screen and (min-width: 769px) { .landing-monitoring .screens { bottom: 148px; width: 603px; height: 401px; border-radius: 4px; left: 50% } } @media only screen and (min-width: 1041px) { .landing-monitoring .screens { width: 661px; height: 375px; bottom: 213px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } } .landing-monitoring .screens .screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10 } .landing-monitoring .screens .screen.selected { z-index: 20 } .landing-monitoring .screen-selectors { position: absolute; bottom: 1vw; margin: 0 auto; text-align: center; width: 100%; z-index: 2 } @media only screen and (min-width: 561px) { .landing-monitoring .screen-selectors { bottom: 3vw } } @media only screen and (min-width: 769px) { .landing-monitoring .screen-selectors { bottom: 2.3vw } } @media only screen and (min-width: 1041px) { .landing-monitoring .screen-selectors { bottom: 0.3vw } } @media only screen and (min-width: 561px) { .landing-monitoring .screen-selectors div { display: inline-block } } .landing-monitoring .screen-selectors p { font-family: "Gibson W04","Helvetica","Open Sans",sans-serif; cursor: pointer; margin-bottom: 1vw; margin-right: 15px; font-size: 14px; height: 24px; display: inline-block; text-align: center } .chinese .landing-monitoring .screen-selectors p { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .japanese .landing-monitoring .screen-selectors p { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .korean .landing-monitoring .screen-selectors p { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .russian .landing-monitoring .screen-selectors p { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } @media only screen and (min-width: 1041px) { .landing-monitoring .screen-selectors p { margin-right: 21px } } .landing-monitoring .screen-selectors p.selected { border-bottom: 2px solid #F6A623; padding-bottom: 28px } .landing-bluetooth { background-color: #F2F1F2; margin-bottom: 10px } @media only screen and (min-width: 561px) { .landing-bluetooth { margin-bottom: 20px } } .landing-bluetooth sup { font-size: 16px; margin-top: -62px; vertical-align: text-top; line-height: 31px } .landing-bluetooth .txt { margin-bottom: 0 } @media only screen and (min-width: 1041px) { .landing-bluetooth .txt { margin-top: 42px; margin-bottom: 42px } } .landing-customizable { background-color: #F2F2F2 } @media only screen and (min-width: 1041px) { .landing-customizable .autocolumns-off-lg p { text-align: center } } .landing-viewfinder { padding-top: 10px; margin-bottom: 0 } @media only screen and (min-width: 561px) { .landing-viewfinder { padding-top: 20px } } @media only screen and (min-width: 1041px) { .landing-viewfinder { padding-top: 30px } } .landing-viewfinder .img-container { margin-bottom: 0 } .landing-viewfinder .title-container { margin-top: 22px } @media only screen and (min-width: 1041px) { .landing-viewfinder .title-container { margin-bottom: 13px } } .landing-viewfinder .txt { z-index: 2; margin-top: 0 } @media only screen and (min-width: 1041px) { .landing-viewfinder .txt { margin-top: 0; margin-bottom: -10px } } @media only screen and (min-width: 1041px) { .landing-viewfinder img.image { margin-top: 13px } } .landing-studio-viewfinder { margin-top: 0 } .landing-studio-viewfinder:before { padding-bottom: 22px } .landing-studio-viewfinder picture img { padding-top: 0 } @media only screen and (min-width: 561px) { .landing-studio-viewfinder picture img { padding-top: 3.4rem } } .landing-studio-viewfinder img.bottom-xs { z-index: 5 } .landing-studio-viewfinder .text-container { margin-bottom: 22px } @media only screen and (min-width: 561px) { .landing-studio-viewfinder .text-container { padding-bottom: 80vw; padding-top: 8vw; z-index: 5 } } @media only screen and (min-width: 769px) { .landing-studio-viewfinder .text-container { padding-bottom: 485px; padding-top: 98px } } @media only screen and (min-width: 1041px) { .landing-studio-viewfinder .text-container { padding-bottom: 124px; padding-top: 184px } } .landing-studio-viewfinder .learn-more-link { margin-top: 16px } .landing-studio-viewfinder .learn-more-link a { text-decoration: underline; font-family: "Gibson W04","Helvetica","Open Sans",sans-serif; font-size: 16px; color: #333 } .chinese .landing-studio-viewfinder .learn-more-link a { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .japanese .landing-studio-viewfinder .learn-more-link a { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .korean .landing-studio-viewfinder .learn-more-link a { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .russian .landing-studio-viewfinder .learn-more-link a { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } @media only screen and (min-width: 561px) { .landing-studio-viewfinder .learn-more-link a { color: #ffffff } } .landing-studio-viewfinder.clip-svg-top { -webkit-transform: translateZ(0px); transform: translateZ(0px) } @media only screen and (min-width: 561px) { .landing-studio-viewfinder.clip-svg-top { -webkit-clip-path: url("#clip-shape-top-sm"); clip-path: url("#clip-shape-top-sm") } } @media only screen and (min-width: 769px) { .landing-studio-viewfinder.clip-svg-top { -webkit-clip-path: url("#clip-shape-top-md"); clip-path: url("#clip-shape-top-md") } } .landing-connections .img-container { margin-top: 22px; position: relative } @media only screen and (min-width: 561px) { .landing-connections .txt { margin-top: 0 } } .landing-connections.clip-svg-top { background-color: #fff; z-index: 3; -webkit-transform: translateZ(0px) } @media only screen and (min-width: 561px) { .landing-connections.clip-svg-top { padding-top: 32px; -webkit-clip-path: url("#clip-shape-top-sm"); clip-path: url("#clip-shape-top-sm") } } @media only screen and (min-width: 769px) { .landing-connections.clip-svg-top { -webkit-clip-path: url("#clip-shape-top-md"); clip-path: url("#clip-shape-top-md") } } .landing-12g-sdi { background-color: #6F7F8E; padding-top: 10px; padding-bottom: 22px } @media only screen and (min-width: 769px) { .landing-12g-sdi { padding-top: 20px } } .landing-12g-sdi .img-container { margin-bottom: 0 } @media only screen and (min-width: 1041px) { .landing-12g-sdi .img-container { margin-top: 11px } } @media only screen and (min-width: 1041px) { .landing-12g-sdi .img-container img { width: calc(100% + 40px); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: relative } } .landing-12g-sdi .text-container { padding-top: 22px } .landing-audio { background-color: #F2F2F2; padding-top: 10px } @media only screen and (min-width: 561px) { .landing-audio { padding-top: 20px } } @media only screen and (min-width: 1041px) { .landing-audio { padding-top: 0 } } .landing-audio .container { overflow: hidden } @media only screen and (min-width: 769px) { .landing-audio .container { overflow: visible } } .landing-slate { margin-top: 10px; background-color: #A8B1CA } @media only screen and (min-width: 561px) { .landing-slate { margin-top: 0 } } .landing-slate.inset-none-sm { overflow: hidden } .landing-slate h3 { color: #333333 } @media only screen and (min-width: 769px) { .landing-slate h3 { color: #666 } } .landing-slate .txt { z-index: 2; margin-bottom: -14vw } @media only screen and (min-width: 769px) { .landing-slate .txt { margin-bottom: 466px } } @media only screen and (min-width: 1041px) { .landing-slate .txt { margin-bottom: 333px } } .landing-power { margin-top: 10px; margin-bottom: 0; padding-top: 10px; border-top: solid 1px #D7D7D7 } @media only screen and (min-width: 561px) { .landing-power { padding-top: 0; margin-top: 20px; margin-bottom: 20px; border-top: 0 } } @media only screen and (min-width: 1041px) { .landing-power { margin-top: 0; margin-bottom: 0 } } @media only screen and (min-width: 561px) { .landing-power .txt { margin-bottom: 0 } } @media only screen and (min-width: 1041px) { .landing-power .txt { margin-top: 2px; margin-bottom: 2px } } .landing-resolve { margin-top: 0; background-color: #28282E } .landing-resolve .content { margin-bottom: 0 } @media only screen and (min-width: 1041px) { .landing-resolve .autocolumns-off-lg p { text-align: center } } .landing-resolve .txt { margin-bottom: 30px } .landing-resolve .learn-more-link { margin-top: 16px } .landing-resolve .learn-more-link a { text-decoration: none; color: #ffffff; border-bottom: 1px solid #fff; padding-bottom: 2px } @media only screen and (min-width: 561px) { .landing-resolve .learn-more-link a { text-align: center } } .landing-resolve .play { width: 15%; max-width: 80px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } @media only screen and (min-width: 561px) { .landing-resolve .play { width: auto; height: auto } } .landing-resolve .img-video { border: 3px solid #fff } .landing-accessories { margin-top: 30px } .landing-accessories .txt { margin-top: 0 } @media only screen and (min-width: 769px) { .landing-accessories .txt { margin-top: 14px } } @media only screen and (min-width: 1041px) { .landing-accessories .txt { margin-top: 5px } } .clip-svg { height: 0 } @media only screen and (min-width: 1040px) { .nb-lg { white-space: nowrap } } .raw-modal { position: fixed; background-color: #fff; z-index: 1000; top: 10px; left: 10px; width: calc(100vw - 20px); height: calc(100% - 20px); overflow: hidden } @media only screen and (min-width: 561px) { .raw-modal { width: calc(100vw - 40px); height: calc(100% - 40px); top: 20px; left: 20px; max-height: 975px } } @media only screen and (min-width: 769px) { .raw-modal { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 1000px; max-height: none; height: auto } } .raw-modal .raw-modal-header { height: 80px; background-color: #262626 } @media only screen and (min-width: 769px) { .raw-modal .raw-modal-header { height: 88px } } .raw-modal .raw-modal-header h1 { margin-left: 20px; font-family: "Sofia Pro W03", "Helvetica", "Open Sans", sans-serif; font-weight: 200; line-height: 24px; padding-top: 16px; color: #fff; letter-spacing: -0.1rem; font-size: 2rem; width: 200px } @media only screen and (min-width: 561px) { .raw-modal .raw-modal-header h1 { font-size: 2.8rem; line-height: 80px; width: auto; padding-top: 0 } } @media only screen and (min-width: 769px) { .raw-modal .raw-modal-header h1 { font-size: 3rem; line-height: 88px } } .raw-modal .raw-modal-videos { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 20px 20px 90px; overflow-y: scroll; height: 100% } @media only screen and (min-width: 769px) { .raw-modal .raw-modal-videos { padding: 20px 0 0 20px; height: auto } } .raw-modal .raw-modal-videos article { padding-bottom: 30px; margin-bottom: 10px; background-color: #F2F4F4; width: 100% } @media only screen and (min-width: 561px) { .raw-modal .raw-modal-videos article { width: calc((100% - 10px) / 2) } .raw-modal .raw-modal-videos article:not(:nth-child(2n+1)) { margin-left: 10px } } @media only screen and (min-width: 769px) { .raw-modal .raw-modal-videos article { max-width: 313px; width: calc((100vw - 100px) / 3) } .raw-modal .raw-modal-videos article:not(:nth-child(2n+1)) { margin-left: 0 } .raw-modal .raw-modal-videos article:not(:nth-child(3n+1)) { margin-left: 10px } } .japanese .raw-modal .raw-modal-videos article { padding-bottom: 27px } .raw-modal .raw-modal-videos article img { width: 100% } .raw-modal .raw-modal-videos .download-title { margin-top: 7px; margin-bottom: 7px; font-family: "Sofia Pro W03", "Helvetica", "Open Sans", sans-serif; font-size: 2rem; font-weight: 700; color: #000; text-align: center } .japanese .raw-modal .raw-modal-videos .download-title { margin-bottom: 4px } .raw-modal .raw-modal-videos .download-size { margin-bottom: 24px; font-family: "Gibson W04", "Helvetica", "Open Sans", sans-serif; font-size: 1.4rem; font-weight: 400; color: #666; text-align: center } .japanese .raw-modal .raw-modal-videos .download-size { margin-bottom: 22px } .raw-modal .raw-modal-videos .download-button { text-align: center; padding-left: 10px; padding-right: 10px } .raw-modal .raw-modal-videos .download-button a { display: inline-block; padding: 8px 18px; font-family: "Gibson W04", "Helvetica", "Open Sans", sans-serif; font-size: 1.4rem; font-weight: 400; text-decoration: none; color: #0088CF; border: 1px solid #0088CF; border-radius: 4px; text-align: center } .raw-modal .raw-modal-footer { width: 100%; padding: 10px 20px } @media only screen and (min-width: 769px) { .raw-modal .raw-modal-footer { padding-bottom: 20px } } .raw-modal .raw-modal-footer p { font-family: "Gibson W04", "Helvetica", "Open Sans", sans-serif; font-size: 1.4rem; color: #666666; text-align: center } .modalContainer #close a { top: 28px; right: 28px } @media only screen and (min-width: 561px) { .modalContainer #close a { right: 40px; top: 40px } } .landing-next { margin-top: 0 } .landing-action { background: transparent; position: absolute } .learn-more { margin-top: 0 }[class*="braw-"] .txt { margin-top: 22px; margin-bottom: 22px }[class*="braw-"] a.label { text-decoration: none; color: #333; margin-top: 12px; font-size: 14px; margin-right: 20px; font-family: "Gibson W04","Helvetica","Open Sans",sans-serif } .chinese [class*="braw-"] a.label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .japanese [class*="braw-"] a.label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .korean [class*="braw-"] a.label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .russian [class*="braw-"] a.label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif }[class*="braw-"] a.label.active { padding-bottom: 6px; border-bottom: 2px solid #F5A623; font-weight: 600 }[class*="braw-"] a.label.last { margin-right: 0px }[class*="braw-"] img.play,[class*="braw-"] img.refresh { max-width: 80px; position: absolute; top: calc(50% - 40px); left: calc(50% - 40px); z-index: 10 }[class*="braw-"] a.raw-button { font-family: "Sofia Pro W03","Helvetica","Open Sans",sans-serif; background-color: transparent; color: #00aeef; text-decoration: none; line-height: 37px; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: 14px; height: 40px; border-radius: 4px; padding: 0 20px; border: #00aeef 1px solid; margin-bottom: 30px; margin-right: 10px } .chinese [class*="braw-"] a.raw-button { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .japanese [class*="braw-"] a.raw-button { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .korean [class*="braw-"] a.raw-button { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .russian [class*="braw-"] a.raw-button { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } @media only screen and (min-width: 561px) { [ class*="braw-"] a.raw-button { left: auto; -webkit-transform: translateX(0); transform: translateX(0) } }[class*="braw-"] a.raw-button:hover { background: #00aeef; color: #fff } .braw-intro { margin-top: 0; background-color: #5b5d61 } .braw-intro .title { position: absolute; top: 70px } @media only screen and (min-width: 1041px) { .braw-intro .title { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } } @media only screen and (min-width: 769px) { .braw-intro img.image { width: 1040px; width: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: relative } } @media only screen and (min-width: 1041px) { .braw-intro img.image { width: 1440px } } @media only screen and (min-width: 561px) { .braw-intro .button { display: block } } .braw-intro .heading-container { z-index: 1 } .braw-hybrid .title-container { padding-top: 22px; padding-bottom: 22px } .braw-film { background-image: linear-gradient(-179deg, #D9D9D9 4%, #E6E6E6 99%); padding-top: 20px; padding-bottom: 22px; margin-bottom: 10px } @media only screen and (min-width: 561px) { .braw-film { margin-bottom: 20px } } .braw-film .txt { margin-top: 18px } .braw-film h2 { margin-top: 22px } .braw-film h4 { font-size: 26px; line-height: 32px; text-align: center; margin-bottom: 18px } .braw-film a { color: #4B4B4B } .braw-film .stretch { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .braw-film .download-clip { text-align: center; padding-top: 6vw; font-size: 14px; font-family: "Sofia Pro W03","Helvetica","Open Sans",sans-serif; font-weight: 500 } .chinese .braw-film .download-clip { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .japanese .braw-film .download-clip { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .korean .braw-film .download-clip { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .russian .braw-film .download-clip { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } @media only screen and (min-width: 561px) { .braw-film .download-clip { padding-top: 7vw } } @media only screen and (min-width: 769px) { .braw-film .download-clip { margin-top: 10px; padding-top: 0px; display: block } } @media only screen and (min-width: 769px) { .braw-film .image-slide { position: absolute; z-index: 1; top: 0; left: 5px; outline-offset: -1px; width: calc(100% - 20px); margin: 0 auto } } @media only screen and (min-width: 1041px) { .braw-film .image-slide { width: 1000px } } .braw-film .image-slide.active { position: relative; z-index: 5; left: 0; width: 100% } .braw-film .image-slide video { width: 100% } @media only screen and (min-width: 561px) { .braw-film .tile-wrap { margin-right: 0px; margin-left: 10px } .braw-film .tile-wrap:first-child { margin-left: 0 } .braw-film .tile-wrap:last-child { margin-right: 0 } } .braw-film .owl-item .tile { margin-right: 5px; margin-left: 5px } .braw-film .owl-pagination { display: inline-block; margin-top: 10px } .braw-film .owl-page { border-color: #333333; float: left; width: 8px; height: 8px; margin: 9px; box-sizing: border-box; border-radius: 50%; border-style: solid; border-width: 1.5px } .braw-film .owl-page.active { background-color: #333333 } .braw-film .owl-controls { position: absolute; left: 0; right: 0; bottom: 4vw; text-align: center } .braw-demosaic { background-image: linear-gradient(0deg, #292E33 0%, #3E454D 52%); padding-top: 10px } @media only screen and (min-width: 561px) { .braw-demosaic { padding-top: 20px } } .braw-demosaic img.image-slide { position: absolute; top: 0; z-index: 1; width: calc(100% - 20px); left: 5px } .braw-demosaic img.image-slide.active { left: 0; width: 100%; position: relative; z-index: 5 } .braw-demosaic .labels { margin-top: 22px; margin-bottom: 12px } .braw-demosaic .labels a.label { color: #fff; font-size: 14px; margin-right: 20px; font-family: "Gibson W04","Helvetica","Open Sans",sans-serif } .chinese .braw-demosaic .labels a.label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .japanese .braw-demosaic .labels a.label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .korean .braw-demosaic .labels a.label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .russian .braw-demosaic .labels a.label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .braw-demosaic .labels a.label.active { padding-bottom: 6px; font-weight: 600; border-bottom: 2px solid #F5A623 } .braw-demosaic .switch-content .caption:not(.active) { display: none } .braw-color .labels { margin-top: 22px; font-size: 14px; font-family: "Gibson W04","Helvetica","Open Sans",sans-serif } .chinese .braw-color .labels { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .japanese .braw-color .labels { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .korean .braw-color .labels { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .russian .braw-color .labels { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .braw-color .labels .label { margin-right: 20px } .braw-color .labels .label.active { padding-bottom: 6px; border-bottom: 2px solid #F5A623; font-weight: 600 } .braw-color .img-static { display: inline-block } .braw-color .autocolumns-md { margin-top: 30px } .braw-color img.image-slide { position: absolute; left: 5px; top: 0; z-index: 1; opacity: 0 } @media only screen and (min-width: 769px) { .braw-color img.image-slide { width: auto } } .braw-color img.image-slide.active { z-index: 5; position: relative; left: auto; opacity: 1 } .braw-encoding { background: linear-gradient(-180deg, #303236 4%, #0F1112 93%); margin-bottom: 10px; padding-top: 22px; padding-bottom: 0px } @media only screen and (min-width: 561px) { .braw-encoding { margin-bottom: 20px } } @media only screen and (min-width: 769px) { .braw-encoding { padding-bottom: 22px } } .braw-encoding .text { margin-top: 22px; margin-bottom: 22px } .braw-encoding .text.first { margin-bottom: 0px } @media only screen and (min-width: 769px) { .braw-encoding .text { padding-right: 20px; margin-bottom: 0 } } .braw-encoding .image-container { margin-top: 18px } @media only screen and (min-width: 769px) { .braw-encoding .image-container { margin-top: 15px } } @media only screen and (min-width: 1041px) { .braw-encoding .image-container { margin-top: 30px } } .braw-encoding img.image-slide { position: absolute; top: 0; z-index: 1; opacity: 0 } .braw-encoding img.image-slide.active { position: relative; z-index: 5; opacity: 1 } .braw-encoding .labels { margin-top: 12px } .braw-encoding .labels .label { color: #fff } .braw-encoding .small h2 { font-size: 2.6rem; line-height: 3rem } .braw-encoding .small h3 { font-size: 2.6rem; line-height: 3rem } .braw-encoding .small p { margin-top: 1rem } .braw-performance { background-color: #e9f0f2; margin-bottom: 10px } @media only screen and (min-width: 561px) { .braw-performance { margin-bottom: 20px } } .braw-performance .resolution { font-size: 26px; line-height: 17px; letter-spacing: -0.77px; font-weight: 600; font-family: "Sofia Pro W03","Helvetica","Open Sans",sans-serif; margin-bottom: 12px } .chinese .braw-performance .resolution { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .japanese .braw-performance .resolution { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .korean .braw-performance .resolution { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .russian .braw-performance .resolution { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } @media only screen and (min-width: 561px) { .braw-performance .resolution { font-size: 41.66px; line-height: 33px; letter-spacing: -1.04px } } @media only screen and (min-width: 769px) { .braw-performance .resolution { font-size: 57.22px; line-height: 58px; letter-spacing: -1.43px; margin-bottom: 12px } } @media only screen and (min-width: 1041px) { .braw-performance .resolution { font-size: 80px; line-height: 75px; letter-spacing: -2px; margin-bottom: 22px } } .braw-performance .bit { font-size: 17.38px; line-height: 16px; letter-spacing: -0.39px; font-weight: 600; margin-bottom: 8px; font-family: "Sofia Pro W03","Helvetica","Open Sans",sans-serif } .chinese .braw-performance .bit { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .japanese .braw-performance .bit { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .korean .braw-performance .bit { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .russian .braw-performance .bit { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } @media only screen and (min-width: 561px) { .braw-performance .bit { font-size: 23.43px; line-height: 19px; letter-spacing: -0.52px; margin-bottom: 13px } } @media only screen and (min-width: 769px) { .braw-performance .bit { font-size: 32.19px; line-height: 17px; letter-spacing: -0.72px; margin-bottom: 23px } } @media only screen and (min-width: 1041px) { .braw-performance .bit { font-size: 45px; letter-spacing: -2px; margin-bottom: 36px; line-height: 18px } } .braw-performance .divider { display: block; height: 1px; border-bottom: 2px dotted #000; width: 30vw; margin: 8px auto 11px auto } @media only screen and (min-width: 561px) { .braw-performance .divider { margin: 13px auto; width: 32vw } } @media only screen and (min-width: 769px) { .braw-performance .divider { border-bottom: 4px dotted #000; width: 343.35px; margin: 21px 0 18px } } @media only screen and (min-width: 1041px) { .braw-performance .divider { width: 480px; margin: 22px 0 29px } } .braw-performance .fps { font-size: 28px; line-height: 29px; letter-spacing: -0.77px; font-weight: 600; font-family: "Sofia Pro W03","Helvetica","Open Sans",sans-serif; margin-bottom: 4px; margin-left: 15px } .chinese .braw-performance .fps { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .japanese .braw-performance .fps { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .korean .braw-performance .fps { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .russian .braw-performance .fps { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } @media only screen and (min-width: 561px) { .braw-performance .fps { font-size: 41.66px; line-height: 42px; letter-spacing: -1.04px; margin-bottom: 12px; margin-left: 0px } } @media only screen and (min-width: 769px) { .braw-performance .fps { font-size: 57.22px; line-height: 55px; letter-spacing: -1.43; margin-bottom: 20px } } @media only screen and (min-width: 1041px) { .braw-performance .fps { font-size: 80px; line-height: 75px; letter-spacing: -2px; margin-bottom: 10px } } .braw-performance .streams { font-size: 14px; line-height: 16px; margin-left: -4px; letter-spacing: -0.39px; font-weight: 600; font-family: "Sofia Pro W03","Helvetica","Open Sans",sans-serif } .chinese .braw-performance .streams { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .japanese .braw-performance .streams { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .korean .braw-performance .streams { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } .russian .braw-performance .streams { font-family: "Futura Plus W08","Helvetica","Open Sans",sans-serif } @media only screen and (min-width: 561px) { .braw-performance .streams { font-size: 23.43px; line-height: 7px; letter-spacing: -0.52px; margin-left: 0px } } @media only screen and (min-width: 769px) { .braw-performance .streams { font-size: 30px; line-height: 0px; letter-spacing: -0.72px } } @media only screen and (min-width: 1041px) { .braw-performance .streams { font-size: 45px; line-height: 42px; letter-spacing: -1.5px } } .braw-performance .labels { margin-bottom: 38px } .braw-performance .hover-label { position: absolute; bottom: 10px; right: 0; font-size: 12; right: 220px; font-family: "Gibson W04","Helvetica","Open Sans",sans-serif } .chinese .braw-performance .hover-label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .japanese .braw-performance .hover-label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .korean .braw-performance .hover-label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .russian .braw-performance .hover-label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .braw-performance img.image { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .braw-performance .slide { position: absolute; top: 0; opacity: 0; padding-top: 35px; text-align: center } .braw-performance .slide p { color: #000 } .braw-performance .slide.active { opacity: 1; z-index: 5; position: relative; transition: opacity 0.5s ease-in-out } @media only screen and (min-width: 561px) { .braw-performance .slide { padding-top: 41px } } @media only screen and (min-width: 769px) { .braw-performance .slide { width: 100%; padding-left: 20px; padding-top: 50px } } @media only screen and (min-width: 1041px) { .braw-performance .slide { padding-top: 74px } } .braw-performance .caption { position: absolute; bottom: 10px; left: 0; right: 0; z-index: 1 } .braw-performance .caption p { text-align: center; font-size: 8px } @media only screen and (min-width: 561px) { .braw-performance .caption p { font-size: 14px } } @media only screen and (min-width: 769px) { .braw-performance .caption p { font-size: 16px } } @media only screen and (min-width: 561px) { .braw-performance .caption { bottom: 15px } } @media only screen and (min-width: 769px) { .braw-performance .caption { bottom: 20px } } .braw-metadata { background-image: linear-gradient(0deg, #58636E 2%, #424A52 100%); padding-bottom: 22px } .braw-metadata p.label { padding-top: 6px; font-size: 12px; font-family: "Gibson W04","Helvetica","Open Sans",sans-serif; line-height: 1.6rem } .chinese .braw-metadata p.label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .japanese .braw-metadata p.label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .korean .braw-metadata p.label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .russian .braw-metadata p.label { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .braw-viewer { margin-top: 0; margin-bottom: 10px } @media only screen and (min-width: 561px) { .braw-viewer { margin-bottom: 20px } } @media only screen and (min-width: 1041px) { .braw-viewer { margin-top: 20px; margin-bottom: 20px } } .braw-viewer h4 { font-size: 16px; line-height: 19px; margin-bottom: 5px; text-align: center } @media only screen and (min-width: 1041px) { .braw-viewer h4 { text-align: left } } .braw-viewer .txt { margin-bottom: 0 } @media only screen and (min-width: 1041px) { .braw-viewer .txt { margin-top: 2px; margin-bottom: 2px; padding-left: 50px } } .braw-viewer .buttons { margin-top: 12px } @media only screen and (min-width: 1041px) { .braw-viewer .buttons { text-align: left } } .braw-viewer a.raw-button { margin-top: 5px; padding: 0 10px; display: inline-block; min-width: 100%; text-align: center } @media only screen and (min-width: 561px) { .braw-viewer a.raw-button { min-width: 131px } } @media only screen and (min-width: 1041px) { .braw-viewer a.raw-button { margin-bottom: 0 } } .braw-viewer a.raw-button:first-child { margin-right: 20px } @media only screen and (min-width: 1041px) { .braw-viewer a.raw-button:first-child { margin-right: 0 } } .braw-resolve { background-color: #0e1019 } .braw-open { background-image: linear-gradient(-180deg, #1C374D 0%, #172C3D 96%); padding-bottom: 30px; margin-top: 10px; margin-bottom: 10px } @media only screen and (min-width: 561px) { .braw-open { margin-top: 20px; margin-bottom: 20px } } .braw-open .img-static { margin-top: 22px } .braw-open img.logo { display: block; padding-left: 10px } @media only screen and (min-width: 769px) { .braw-open img.logo { width: auto; padding-left: 20px } } .braw-development { background: linear-gradient(-179deg, #F2F2F2 4%, #fff 99%); padding-bottom: 20px } @media only screen and (min-width: 1041px) { .braw-development { margin-top: 20px; padding-top: 10px } } @media only screen and (min-width: 1041px) { .braw-development .txt { margin-top: 2px; margin-bottom: 2px } } .braw-development h4 { font-size: 16px; line-height: 19px; margin-bottom: 5px } .braw-development .download-sdk { margin-top: 12px } @media only screen and (min-width: 1041px) { .braw-development .download-sdk { text-align: left } } .braw-development a.raw-button { margin-top: 5px; padding: 0 10px; display: inline-block; margin-bottom: 0px; min-width: 29%; text-align: center; position: initial; -webkit-transform: inherit; transform: inherit } @media only screen and (min-width: 561px) { .braw-development a.raw-button { max-width: auto; min-width: 131px } } @media only screen and (min-width: 1041px) { .braw-development a.raw-button { margin-bottom: 0 } } .braw-development a.raw-button:first-child { margin-right: 20px } @media only screen and (min-width: 1041px) { .braw-development a.raw-button:first-child { margin-right: 0 } } .braw-development ~ .learn-more { margin-top: 0 } .clip-svg { position: absolute } .workflow-action { position: absolute; background-color: transparent } .workflow-intro { background-color: #E0E0E0 } .workflow-feature { background-color: #6F6E6C; padding-top: 10px } @media only screen and (min-width: 561px) { .workflow-feature { padding-top: 20px } } .workflow-feature .txt { margin-bottom: 30px } @media only screen and (min-width: 1041px) { .workflow-feature .txt { margin-bottom: 22px } } @media only screen and (min-width: 1041px) { .workflow-feature .title-container { margin-bottom: 6px } } .workflow-feature .body { margin-top: 20px } @media only screen and (min-width: 1041px) { .workflow-feature .body { margin-top: 11px } } .workflow-feature img.image { margin-top: 22px } @media only screen and (min-width: 1041px) { .workflow-feature img.image { margin-top: 18px } } .workflow-episodic { background-color: #EAEAEA; margin-top: 10px } @media only screen and (min-width: 561px) { .workflow-episodic { margin-top: 20px } } .workflow-television { background-color: #BEC7C6; margin-top: 10px } @media only screen and (min-width: 561px) { .workflow-television { margin-top: 20px } } .workflow-documentaries { margin-top: 10px } @media only screen and (min-width: 561px) { .workflow-documentaries { margin-top: 20px } } @media only screen and (min-width: 769px) { .workflow-documentaries { margin-bottom: 20px } } @media only screen and (min-width: 769px) { .workflow-documentaries { background-color: #6A869E } } @media only screen and (min-width: 769px) { .workflow-documentaries .txt { margin-bottom: 500px } } .workflow-independent { background-color: #333333; padding-top: 10px } @media only screen and (min-width: 561px) { .workflow-independent { padding-top: 20px } } @media only screen and (min-width: 1041px) { .workflow-independent { padding-top: 20px; padding-bottom: 20px } } @media only screen and (min-width: 1041px) { .workflow-independent .txt { margin-top: 2px; margin-bottom: 2px } } .workflow-studio { background-color: #457E89; padding-top: 10px } @media only screen and (min-width: 561px) { .workflow-studio { padding-top: 20px } } @media only screen and (min-width: 1041px) { .workflow-studio { padding-top: 20px; padding-bottom: 20px } } @media only screen and (min-width: 1041px) { .workflow-studio .txt { margin-top: 2px; margin-bottom: 2px } } .workflow-premium { background-color: #CCD1D6; margin-top: 10px; margin-bottom: 10px } @media only screen and (min-width: 561px) { .workflow-premium { margin-top: 20px; margin-bottom: 20px } } .workflow-broadcast { background-color: #2180AE; margin-top: 10px; margin-bottom: 10px } @media only screen and (min-width: 561px) { .workflow-broadcast { margin-top: 20px; margin-bottom: 20px } } .workflow-music { background-color: #EAEAEA; margin-bottom: 10px } @media only screen and (min-width: 561px) { .workflow-music { margin-bottom: 20px } } @media only screen and (min-width: 1041px) { .workflow-music .grid { min-height: 641px } } .workflow-live { background-color: #C8DDE8; padding-top: 10px } @media only screen and (min-width: 561px) { .workflow-live { padding-top: 20px } } @media only screen and (min-width: 769px) { .workflow-live .img-breakout-center-xs { width: calc(100% - 40px); margin: 0 auto; overflow: hidden } } .workflow-music ~ .learn-more { margin-top: 0 } .design-action { position: absolute; background-color: transparent } .design-intro { background-color: #000 } @media only screen and (min-width: 561px) { .design-intro .title { position: absolute; top: 11.8vw; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } } @media only screen and (min-width: 769px) { .design-intro .title { top: 8vw } } @media only screen and (min-width: 1041px) { .design-intro .title { top: 5.6vw } } .design-intro .txt { margin-bottom: 30px; margin-top: 0 } @media only screen and (min-width: 561px) { .design-intro .txt { margin-bottom: 22px; margin-top: 22px } } @media only screen and (min-width: 1041px) { .design-intro .txt { margin-top: -4px } } .design-revolutionary { background-color: #273139; padding-top: 10px; padding-bottom: 30px } @media only screen and (min-width: 561px) { .design-revolutionary { padding-top: 20px } } .design-revolutionary .img-breakout-inset-center-xs { overflow: hidden } .design-revolutionary h4 { color: white; font-size: 17px } @media only screen and (min-width: 561px) { .design-revolutionary h4 { font-size: 24px } } .design-revolutionary h4.imperial { display: none } .design-revolutionary h4.metric { display: block } .design-revolutionary h5 { color: white; text-transform: uppercase; font-size: 9px; font-family: "Gibson W04","Helvetica","Open Sans",sans-serif } @media only screen and (min-width: 561px) { .design-revolutionary h5 { font-size: 12px } } .chinese .design-revolutionary h5 { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .japanese .design-revolutionary h5 { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .korean .design-revolutionary h5 { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .russian .design-revolutionary h5 { font-family: "Proxima Nova W08","Helvetica","Open Sans",sans-serif } .design-revolutionary img.icon { margin-top: 12px; display: inline } .design-revolutionary img.icon.one { width: 60px } @media only screen and (min-width: 561px) { .design-revolutionary img.icon.one { width: auto } } .design-revolutionary img.icon.two { width: 90px } @media only screen and (min-width: 561px) { .design-revolutionary img.icon.two { width: auto } } .design-revolutionary img.icon.three { width: 87px } @media only screen and (min-width: 561px) { .design-revolutionary img.icon.three { width: auto } } .design-revolutionary img.icon.four { width: 65px } @media only screen and (min-width: 561px) { .design-revolutionary img.icon.four { width: auto } } .design-revolutionary img.image { width: calc(100% - 20px); margin: 0 auto } @media only screen and (min-width: 561px) { .design-revolutionary img.image { width: calc(100% - 40px) } } .us .design-revolutionary h4.imperial { display: block } .us .design-revolutionary h4.metric { display: none } .design-traditional { background-color: #6F7F8E } .design-status { background-color: #C2C1C7 } .design-traditional,.design-status { padding-top: 10px } @media only screen and (min-width: 561px) { .design-traditional,.design-status { padding-top: 20px } } @media only screen and (min-width: 1041px) { .design-traditional,.design-status { padding-bottom: 20px } } @media only screen and (min-width: 1041px) { .design-traditional .txt,.design-status .txt { margin-top: 2px; margin-bottom: 2px } } .design-interchangeable { margin-top: 10px } @media only screen and (min-width: 561px) { .design-interchangeable { margin-top: 20px } } @media only screen and (min-width: 1041px) { .design-interchangeable { margin-top: 20px; margin-bottom: 20px } } @media only screen and (min-width: 1041px) { .design-interchangeable .txt { margin-bottom: 321px } } .design-ndfilters { background-color: #273139; padding-top: 10px } @media only screen and (min-width: 561px) { .design-ndfilters { padding-top: 20px } } @media only screen and (min-width: 1041px) { .design-ndfilters { padding-bottom: 20px } } @media only screen and (min-width: 1041px) { .design-ndfilters .txt { margin-top: 2px; margin-bottom: 2px } } .design-comfortable { background-color: #C2C1C7; margin-top: 10px; margin-bottom: 10px } @media only screen and (min-width: 561px) { .design-comfortable { margin-top: 20px; margin-bottom: 20px } } @media only screen and (min-width: 1041px) { .design-comfortable .grid { min-height: 726px } } .design-foldout { background-color: #6F7F8E; margin-bottom: 10px } @media only screen and (min-width: 561px) { .design-foldout { margin-bottom: 20px } } @media only screen and (min-width: 1041px) { .design-foldout .txt { margin-bottom: 73px; margin-top: 69px } } .design-touchscreen { background-color: #C2C1C7; padding-top: 10px } @media only screen and (min-width: 561px) { .design-touchscreen { padding-top: 20px } } @media only screen and (min-width: 1041px) { .design-touchscreen { padding-bottom: 20px } } @media only screen and (min-width: 1041px) { .design-touchscreen .txt { margin-top: 2px; margin-bottom: 2px } } .design-recording { background-color: #273139; padding-top: 10px } @media only screen and (min-width: 561px) { .design-recording { padding-top: 20px } } @media only screen and (min-width: 1041px) { .design-recording { padding-bottom: 20px } } @media only screen and (min-width: 1041px) { .design-recording .txt { margin-top: 2px; margin-bottom: 2px } } .design-side-hand { background-color: #6F7F8E; padding-top: 10px } @media only screen and (min-width: 561px) { .design-side-hand { padding-top: 20px } } @media only screen and (min-width: 1041px) { .design-side-hand { padding-bottom: 20px } } .design-connections { margin-bottom: 10px } @media only screen and (min-width: 561px) { .design-connections { margin-bottom: 20px } } @media only screen and (min-width: 1041px) { .design-connections { margin-bottom: 30px } } .design-accessories { background-color: #C3C2C8; padding-top: 10px } @media only screen and (min-width: 561px) { .design-accessories { padding-top: 20px } } @media only screen and (min-width: 1041px) { .design-accessories { padding-bottom: 20px } } @media only screen and (min-width: 1041px) { .design-accessories .txt { margin-top: 2px; margin-bottom: 2px } } .design-mounts { background-color: #E4E6EA; padding-bottom: 10px } @media only screen and (min-width: 561px) { .design-mounts { padding-bottom: 20px } } .design-mounts img.image { margin-top: 0; padding-top: 0 } .design-external ~ .learn-more { margin-top: 0 } .fade-out { position: absolute } .accessories-hyperdeck .learn-more-link,.accessories-video-assist .learn-more-link,.accessories-studio-viewfinder .learn-more-link { margin-top: 16px } .accessories-hyperdeck .learn-more-link a,.accessories-video-assist .learn-more-link a,.accessories-studio-viewfinder .learn-more-link a { text-decoration: underline; color: #333 } .accessories-shoulder-mount .fade-out,.accessories-viewfinder .fade-out,.accessories-mic-mount .fade-out { padding-right: 10px } @media only screen and (min-width: 769px) { .accessories-shoulder-mount .fade-out,.accessories-viewfinder .fade-out,.accessories-mic-mount .fade-out { padding-right: 0px } } .accessories-intro { background: #E4E6EA } .accessories-intro .title { margin-top: 60px; margin-bottom: 30px } @media only screen and (min-width: 769px) { .accessories-intro .title { margin-top: 78px } } .accessories-intro .txt { margin-top: -20px } .accessories-shoulder-mount { margin-top: 0px } @media only screen and (min-width: 1041px) { .accessories-shoulder-mount { margin-top: 33px } } @media only screen and (min-width: 1041px) { .accessories-shoulder-mount .txt { margin-top: 8px } } @media only screen and (min-width: 769px) { .accessories-shoulder-mount img,.accessories-viewfinder img { max-width: 480px } } .accessories-viewfinder { margin-top: -116px } .accessories-viewfinder .container { margin-top: 134px } @media only screen and (min-width: 769px) { .accessories-viewfinder p { text-align: left; -webkit-column-count: 2; column-count: 2 } } @media only screen and (min-width: 1041px) { .accessories-viewfinder p { -webkit-column-count: 1; column-count: 1 } } .accessories-lens-mount { margin-top: 22px } @media only screen and (min-width: 1041px) { .accessories-lens-mount { margin-top: 14px } } .accessories-lens-mount .contain { position: relative } @media only screen and (min-width: 1041px) { .accessories-lens-mount .contain { max-width: 695px; float: right } } .accessories-lens-mount .item { position: absolute; top: 0; left: 0; background: #fff } .accessories-lens-mount .text { margin-bottom: 30px } @media only screen and (min-width: 1041px) { .accessories-lens-mount .text { margin-bottom: 0px } } .accessories-lens-mount .item.selected { display: block; z-index: 5 } .accessories-lens-mount .transitions-nav { position: relative; z-index: 10; margin-top: 24px; left: 0; text-align: center } @media only screen and (min-width: 1041px) { .accessories-lens-mount .transitions-nav { left: 70px; text-align: left } } .accessories-lens-mount .transitions-nav li { list-style: none; cursor: pointer; margin-bottom: 8px; margin-right: 20px; font-size: 14px; padding-bottom: 2%; height: 24px; display: inline-block; text-align: center; padding-bottom: 20px } .accessories-lens-mount .transitions-nav li.selected { font-weight: 600; border-bottom: 2px solid #F6A623; padding-top: 40px } .accessories-lens-mount .lens-logo { max-width: 284px; margin: 20px auto 0 } @media only screen and (min-width: 1041px) { .accessories-lens-mount .lens-logo { margin-left: 0 } } .accessories-mic-mount { margin-top: -10px } @media only screen and (min-width: 1041px) { .accessories-mic-mount { margin-top: 0px } } @media only screen and (min-width: 769px) { .accessories-mic-mount img { max-width: 624px } } .accessories-shoulder-mount .text,.accessories-lens-mount .text,.accessories-studio-viewfinder .text { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1 } @media only screen and (min-width: 1041px) { .accessories-shoulder-mount .text,.accessories-lens-mount .text,.accessories-studio-viewfinder .text { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2 } } .accessories-shoulder-mount .image,.accessories-lens-mount .image,.accessories-studio-viewfinder .image { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2 } @media only screen and (min-width: 1041px) { .accessories-shoulder-mount .image,.accessories-lens-mount .image,.accessories-studio-viewfinder .image { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1 } } .accessories-viewfinder .text,.accessories-mic-mount .text,.accessories-microphones .text,.accessories-custom .text { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1 } .accessories-viewfinder .image,.accessories-mic-mount .image,.accessories-microphones .image,.accessories-custom .image { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2 } .accessories-ssd .text,.accessories-batteries .text { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2 } @media only screen and (min-width: 1041px) { .accessories-ssd .text,.accessories-batteries .text { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1 } } .accessories-ssd .image,.accessories-batteries .image { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1 } @media only screen and (min-width: 1041px) { .accessories-ssd .image,.accessories-batteries .image { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2 } } .accessories-hyperdeck .text,.accessories-video-assist .text,.accessories-controllers .text { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2 } .accessories-hyperdeck .image,.accessories-video-assist .image,.accessories-controllers .image { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1 } .accessories-studio-viewfinder,.accessories-ssd,.accessories-video-assist,.accessories-hyperdeck,.accessories-microphones,.accessories-controllers,.accessories-custom,.accessories-batteries { width: calc(100% - 20px); margin: 0 auto; padding-top: 0 } .accessories-studio-viewfinder::before,.accessories-ssd::before,.accessories-video-assist::before,.accessories-hyperdeck::before,.accessories-microphones::before,.accessories-controllers::before,.accessories-custom::before,.accessories-batteries::before { content: ''; display: block; background-color: #fff; height: 10px; width: 100%; position: relative; z-index: 2 } @media only screen and (min-width: 561px) { .accessories-studio-viewfinder,.accessories-ssd,.accessories-video-assist,.accessories-hyperdeck,.accessories-microphones,.accessories-controllers,.accessories-custom,.accessories-batteries { width: calc(100% - 40px); margin-top: 0; padding-top: 0; transform: translateZ(0); -webkit-transform: translateZ(0) } .accessories-studio-viewfinder::before,.accessories-ssd::before,.accessories-video-assist::before,.accessories-hyperdeck::before,.accessories-microphones::before,.accessories-controllers::before,.accessories-custom::before,.accessories-batteries::before { height: 20px } } .accessories-studio-viewfinder { background: #97A5B3 } @media only screen and (min-width: 1041px) { .accessories-studio-viewfinder .image { padding-left: 0px; padding-right: 0px } } @media only screen and (min-width: 1041px) { .accessories-studio-viewfinder .text { -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center } } .accessories-ssd { background: #E4E8EC } .accessories-ssd h2 { padding-top: 35px } @media only screen and (min-width: 769px) { .accessories-ssd h2 { padding-top: 0 } } .accessories-ssd .text { margin-top: -72px; z-index: 2 } @media only screen and (min-width: 561px) { .accessories-ssd .text { margin-top: -20px } } @media only screen and (min-width: 1041px) { .accessories-ssd .text { margin-top: 0 } } .accessories-video-assist { background: #C4C2C9; padding-top: 0px } .accessories-video-assist .text { margin-top: -25px; z-index: 2 } @media only screen and (min-width: 1041px) { .accessories-video-assist .text { margin-top: 35px } } .accessories-hyperdeck { background: #E4E8EC; padding-top: 0px; margin-top: -5px } .accessories-hyperdeck .text { margin-top: -5px; z-index: 2 } @media only screen and (min-width: 1041px) { .accessories-hyperdeck .text { padding-top: 22px; -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center } } .accessories-microphones { background: #D9D9D9 } .accessories-microphones .mic-logo { max-width: 229px; margin: 22px auto 0 } @media only screen and (min-width: 1041px) { .accessories-microphones .mic-logo { margin-left: 0 } } .accessories-controllers { background: #E4E7EB; padding-top: 0px } .accessories-controllers .text { margin-top: 25px } @media only screen and (min-width: 1041px) { .accessories-controllers .text { margin-top: 0 } } .accessories-controllers .lanc-logo { max-width: 155px; margin: 22px auto 0 } @media only screen and (min-width: 1041px) { .accessories-controllers .lanc-logo { margin-left: 0 } } .accessories-custom { background: #C4C2C9; padding-top: 0 } @media only screen and (min-width: 1041px) { .accessories-custom .text { padding-top: 40px } } .accessories-custom .image { margin-top: -50px } @media only screen and (min-width: 1041px) { .accessories-custom .image { margin-top: 0px } } .accessories-custom .rigs-logo { max-width: 389px; margin: 22px auto 3px } @media only screen and (min-width: 1041px) { .accessories-custom .rigs-logo { margin-left: 0 } } .accessories-custom .rig-specs { width: auto; margin: 20px auto 35px auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } @media only screen and (min-width: 769px) { .accessories-custom .rig-specs { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; margin-left: 0 } } @media only screen and (min-width: 1041px) { .accessories-custom .rig-specs { width: 100% } } .accessories-custom .rig-specs .rig-col { margin-right: 6px; margin-bottom: 20px } @media only screen and (min-width: 561px) { .accessories-custom .rig-specs .rig-col { margin-right: 20px } } .accessories-custom .rig-specs .rig-col img { max-width: 88px; margin-top: 20px } .accessories-custom .rig-specs .rig-col span { display: block; text-align: left } .accessories-custom .rig-specs .rig-col span:first-child { display: block } .accessories-custom .rig-specs .rig-col span:last-child { display: block } .accessories-custom .rig-specs .rig-col:last-child { margin-right: 0 } .accessories-custom .rig-specs img { max-width: 334px } .accessories-batteries { background: #9DAAB6; padding-top: 0px } .accessories-batteries:after { content: ''; display: block; background-color: #fff; height: 10px; width: 100% } @media only screen and (min-width: 769px) { .accessories-batteries:after { height: 20px } } .accessories-batteries .text { margin-top: -18px; z-index: 2 } @media only screen and (min-width: 1041px) { .accessories-batteries .text { margin-top: 0px } } .accessories-batteries .logo-batteries { max-width: 367px; margin: 22px auto 0 } @media only screen and (min-width: 1041px) { .accessories-batteries .logo-batteries { margin-left: 0 } } .placeholder { position: relative; display: block } .sticky.product-section { max-width: 1400px; position: fixed; top: 134px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .accessories-batteries ~ .learn-more { margin-top: 0 } .product-grid-filter,#global-footer { position: relative; z-index: 2 } .software-intro img.image { position: relative; width: 100vw } @media only screen and (min-width: 769px) { .software-intro img.image { width: auto } } .software-intro .txt { margin-top: 0 } .software-intro .title { z-index: 2 } .software-hud { background-color: #F2F4F4; margin-bottom: 10px } @media only screen and (min-width: 561px) { .software-hud { margin-bottom: 20px } } @media only screen and (min-width: 769px) { .software-hud { padding-top: 0 } } .software-hud .txt { z-index: 2; margin-bottom: -8vw } @media only screen and (min-width: 769px) { .software-hud .txt { margin-bottom: -158px } } @media only screen and (min-width: 1041px) { .software-hud .txt { margin-bottom: 0 } } .software-hud .image { margin-right: -20px } @media only screen and (min-width: 561px) { .software-hud .image { margin-right: -40px } } @media only screen and (min-width: 769px) { .software-hud .image { margin-right: 0 } } @media only screen and (min-width: 769px) { .software-hud picture img { width: auto; padding-top: 24px } } .software-hud .heads-up-display-video { position: absolute; z-index: 1; width: 60.3vw; top: 22.2vw; left: 17.7vw } @media only screen and (min-width: 769px) { .software-hud .heads-up-display-video { width: 496px; top: 227px; left: 116px } } @media only screen and (min-width: 1041px) { .software-hud .heads-up-display-video { width: 396px; top: 187px; left: 57px } } .software-adjustments { background-color: #404040; margin-top: 0; padding-top: 30px } .software-adjustments .images img { display: none } .software-adjustments .images img.active { display: block } .software-adjustments .labels { text-align: center; margin-top: 22px } @media only screen and (min-width: 561px) { .software-adjustments .labels div { display: block } } @media only screen and (min-width: 769px) { .software-adjustments .labels div { display: inline } } .software-adjustments .txt { margin-top: 0 } .software-adjustments .labels .label { display: inline-block; margin-right: 28px; cursor: pointer; height: 24px; margin-bottom: 12px } .software-adjustments .labels .label.active { padding-bottom: 3px; font-weight: 600; border-bottom: 2px solid #F6A623 } @media only screen and (min-width: 561px) { .software-adjustments .labels .label.five { margin-right: 0 } } @media only screen and (min-width: 561px) { .software-adjustments .labels .label.eight { margin-right: 0 } } .software-adjustments .text { min-height: 140px } .software-adjustments .text div { display: none } .software-adjustments .text div.active { display: block } .software-camerascreen { margin-top: 30px } .software-camerascreen .title-container { margin-bottom: 14px } .software-camerascreen .screen { margin-top: 18px } @media only screen and (min-width: 1041px) { .software-camerascreen .screen { margin-top: 0px } } @media only screen and (min-width: 1041px) { .software-camerascreen .screen:nth-child(n+3) { margin-top: 18px } } @media only screen and (min-width: 1041px) { .software-camerascreen .screen:nth-child(even) { padding-left: 15px } } @media only screen and (min-width: 1041px) { .software-camerascreen .screen:nth-child(odd) { padding-right: 15px } } .software-camerascreen .grid.presets .txt:nth-child(2) { margin-top: 0; margin-bottom: 0 } @media only screen and (min-width: 1041px) { .software-camerascreen .grid.presets .txt:nth-child(2) { margin-bottom: 22px; margin-top: 22px } } .software-lut { background-color: #F2F4F4; margin-bottom: 10px } @media only screen and (min-width: 561px) { .software-lut { margin-bottom: 20px } } .software-lut .txt { z-index: 2 } @media only screen and (min-width: 769px) { .software-lut .txt { margin-bottom: -212px } } @media only screen and (min-width: 1041px) { .software-lut .txt { margin-bottom: 22px } } .software-lut ~ .learn-more { margin-top: 0 } .post-action { position: absolute; background-color: transparent } .post-intro { background-color: #D8D8D8 } .post-production { background-color: #5E5E64; padding-top: 10px } @media only screen and (min-width: 561px) { .post-production { padding-top: 20px } } .post-importing { margin-top: 22px } .post-importing .screen { margin-top: 18px } @media only screen and (min-width: 1041px) { .post-importing .screen { margin-top: 0px } } @media only screen and (min-width: 1041px) { .post-importing .screen:nth-child(n+3) { margin-top: 18px } } @media only screen and (min-width: 1041px) { .post-importing .screen:nth-child(even) { padding-left: 15px } } @media only screen and (min-width: 1041px) { .post-importing .screen:nth-child(odd) { padding-right: 15px } } .post-importing .title-container.mobile { margin-bottom: 22px } .post-importing .txt { margin-bottom: 14px } @media only screen and (min-width: 1041px) { .post-importing .txt { margin-bottom: 22px } } .post-control { background-color: #3A3C40 } .post-control img { max-width: 1400px; margin: 0 auto } @media only screen and (min-width: 769px) { .post-control img { padding-top: 0 } } .post-delivery .title { margin-top: 0; margin-bottom: 22px } .post-platforms { background-color: #6A6B73; padding-bottom: 10px } @media only screen and (min-width: 561px) { .post-platforms { padding-bottom: 20px } } @media only screen and (min-width: 1041px) { .post-platforms .grid { min-height: 650px } } .post-platforms .logos.txt { margin-bottom: 0; text-align: center } @media only screen and (min-width: 1041px) { .post-platforms .logos.txt { text-align: left } } .post-platforms .logos.txt img { width: auto; margin: 0 auto } .post-platforms .logos.txt .os { margin-right: 20px; display: inline-block } @media only screen and (min-width: 1041px) { .post-platforms .txt { text-align: left } } @media only screen and (min-width: 1041px) { .post-platforms .txt h2,.post-platforms .txt h3,.post-platforms .txt p { text-align: left } } .post-fusion a { font-weight: 600; color: #333 } .post-fusion ~ .learn-more { margin-top: 0 } .live-intro picture img { padding-top: 5px; margin-bottom: -10px } .live-video { background-color: #404040; padding-top: 10px; padding-bottom: 10px } @media only screen and (min-width: 561px) { .live-video { padding-top: 20px; padding-bottom: 20px } } @media only screen and (min-width: 769px) { .live-video { padding-top: 30px; padding-bottom: 30px } } .live-video .watch-video { display: block; cursor: pointer } .live-video .grid { margin-bottom: 0 } .live-video .play { width: 15%; max-width: 80px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } @media only screen and (min-width: 561px) { .live-video .play { width: auto; height: auto } } .live-video .label { padding-top: 10px; padding-bottom: 10px; background-color: rgba(0,0,0,0.8); bottom: 0 } @media only screen and (min-width: 769px) { .live-video .label { width: 100%; padding-top: 24px; padding-bottom: 24px } } .live-studio { padding-bottom: 10px } @media only screen and (min-width: 561px) { .live-studio { padding-bottom: 20px } } .live-production { background-color: #F2F4F4; padding-bottom: 10px } @media only screen and (min-width: 561px) { .live-production { padding-bottom: 20px } } .live-production .img-container { font-size: 0 } .live-production .img-container .row { height: 100%; width: calc(50% - 5px); display: inline-block } .live-production .img-container .row:first-child { margin-right: 9px } .live-production .img-container .row:first-child img:first-child { margin-bottom: 9px } .live-control .images { padding: 0 } .live-control .images img { position: absolute; top: 0; z-index: 1 } .live-control .images img.active { position: relative; z-index: 2 } .live-control .labels { margin-top: 30px; margin-bottom: 18px; text-align: center } .live-control .label { cursor: pointer; display: inline-block; margin: 0 10px 10px; padding-bottom: 7px } .live-control .label.active { border-bottom: 2px solid #F6A623; padding-bottom: 5px; font-weight: 600 } .live-framing { background-color: #404040; padding-bottom: 10px } @media only screen and (min-width: 561px) { .live-framing { padding-bottom: 20px } } @media only screen and (min-width: 769px) { .live-framing { padding-bottom: 30px } } .live-advanced img { padding-top: 7px; padding-bottom: 40px } .live-advanced .txt { margin-top: 17px } .live-talkback { padding-bottom: 30px; background-color: #F2F4F4 } .live-talkback img { padding-top: 5px } .live-tally picture img { padding-top: 3px } .live-software { background-color: #313E47 } .live-software .txt { margin-top: 13px } @media only screen and (min-width: 561px) { .live-software .txt { margin-top: 9px } } @media only screen and (min-width: 1041px) { .live-software .txt { margin-top: 0px } } .live-arduino { background-color: #F2F4F4; padding-top: 10px } @media only screen and (min-width: 561px) { .live-arduino { padding-top: 20px } } .live-arduino .image { padding-bottom: 30px } @media only screen and (min-width: 1041px) { .live-arduino .image { padding-bottom: 0px } } .gallery-action { padding-top: 33px; padding-bottom: 0 } @media only screen and (min-width: 561px) { .gallery-action { padding-top: 40px; padding-bottom: 12px } } .gallery-1,.gallery-2 { margin-top: 10px } .gallery-1 [class*="col-"],.gallery-2 [class*="col-"] { margin-bottom: 0 } .gallery-1 [class*="col-"] .content,.gallery-2 [class*="col-"] .content { margin-bottom: 0 } .gallery-1 [class*="col-"] .content p,.gallery-2 [class*="col-"] .content p { font-size: 16px; line-height: 27px } .gallery-1 .container { padding-bottom: 24px; background-color: #F2F4F4 } .gallery-1 .watch-video { position: relative; display: block; margin-top: -40px; margin-bottom: 12px } .gallery-1 h2+h3 { margin-top: 8px } .gallery-1 h3+p { margin-top: 17px } .gallery-2 { margin-bottom: 10px } .gallery-2 .second { margin-top: 10px } @media only screen and (min-width: 561px) { .gallery-2 .second { margin-top: 0 } } .gallery-2 .content { background-color: #F2F4F4; padding-bottom: 24px } .gallery-2 .watch-video { position: relative; display: block; margin-top: -40px; margin-bottom: 11px } .gallery-2 h2,.gallery-2 h3 { margin-top: 0; font-size: 24px; line-height: 34px; padding-left: 10px; padding-right: 10px } .gallery-2 h2+h3 { margin-top: 3px } .gallery-2 h3+p { margin-top: 4px } .gallery-first { margin-top: 30px } @media only screen and (min-width: 561px) { .gallery-first { margin-top: 38px } } @media only screen and (min-width: 561px) { .gallery-next { margin-top: 20px } } .gallery-last ~ .learn-more { margin-top: 10px } .gallery-last ~ .next-page-wrapper .next-page::before { padding-bottom: 0; border-top: 0 }