#container { width: 1000px; border: none; background-color: transparent } section { width: 1000px; margin: 0 auto 30px } #title h1 { font-size: 29px; font-weight: 600; text-align: center; margin: 30px 0 30px 0 } #products { margin-bottom: 30px; position: relative } #products .header { height: 37px; background-color: #404041; border-bottom: 1px solid #303031; border-top-left-radius: 4px; border-top-right-radius: 4px; overflow: hidden } #products .header h3 { font-size: 16px; color: #fff; font-weight: 600; text-align: left; margin: 8px 0 0 20px } #products .header input { position: absolute; top: 0; left: 20px; width: 213px; height: 27px; border: none; z-index: 80; font-size: 12px; font-family: "Open Sans"; font-weight: 400 } #products .header input:focus { outline: none } #products .header .search { position: absolute; background-color: #fff; top: 5px; right: 6px; width: 316px; min-height: 27px; background-image: url("https://images.blackmagicdesign.com/images/products/landing/icons/search.png?_v=1460999808"); background-repeat: no-repeat; background-position: 290px 0px; background-size: 16px 27px; z-index: 79; border-radius: 4px; box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.15) } @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) { #products .header .search { background-image: url("https://images.blackmagicdesign.com/images/products/landing/icons/search@2x.png") } } #products .header .results { display: none; margin-top: 27px; background-color: #f3f8fa; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; padding-bottom: 10px } #products .header .results.show { display: block } #products .header .results p { color: #4c95c0; font-size: 12px; font-weight: 600; line-height: normal; border-top: 1px solid #d2e5f0; margin: 0; padding: 10px 20px 3px 20px } #products .header .results a { border-top: 1px solid #d2e5f0; font-size: 12px; font-weight: 400; line-height: 15px; margin: 0 20px; display: block; color: #000; padding: 12px 0 } #products .header .results a:nth-child(2) { border-top: none } #products .header .results a.on,#products .header .results a:hover { text-decoration: underline } #products .families { overflow: hidden; border: 1px solid #bdbdbd; border-top: none; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px } #products .families .row { border-top: 1px solid #bdbdbd; height: 146px; overflow: hidden; background-color: #fff } #products .families .row:nth-child(1) { border-top: none } #products .families .row a { border-right: 1px solid #bdbdbd; width: 142px; height: 100%; box-sizing: border-box; float: left; text-align: center; color: #000; cursor: pointer } #products .families .row a.hover { box-shadow: inset 0px 0px 5px #ccc } #products .families .row a:hover { box-shadow: inset 0px 0px 5px #ccc } #products .families .row a.active { outline: solid #00a9ec 2px; outline-offset: -2px } #products .families .row a:active { outline: solid #00a9ec 2px; outline-offset: -2px } #products .families .row a:nth-child(n+7) { border-right: none } #products .families .row a:nth-child(1),#products .families .row a:nth-child(2) { width: 141px } #products .families .row img { margin-top: 5px } #products .families .row a div { font-size: 12px; line-height: 14px; margin-top: 7px; padding: 0 5px } #products .row:nth-child(1) a:nth-child(2) div { margin-top: 0 } .english #products .row:nth-child(1) a:nth-child(2) div,.english #products .row:nth-child(1) a:nth-child(3) div,.english #products .row:nth-child(2) a:nth-child(3) div { margin-top: 0 } .chinese #products .row:nth-child(1) a:nth-child(2) div { margin-top: 0 auto; padding-top:6px; } .german #products .row:nth-child(1) a:nth-child(2) div,.german #products .row:nth-child(1) a:nth-child(3) div,.german #products .row:nth-child(1) a:nth-child(6) div,.german #products .row:nth-child(2) a:nth-child(1) div,.german #products .row:nth-child(2) a:nth-child(3) div,.german #products .row:nth-child(2) a:nth-child(6) div { margin-top: 0 } .german #products .row:nth-child(1) a:nth-child(5) div { margin-top: -7px } .spanish #products .row:nth-child(1) a:nth-child(2) div,.spanish #products .row:nth-child(1) a:nth-child(5) div,.spanish #products .row:nth-child(1) a:nth-child(7) div,.spanish #products .row:nth-child(2) a:nth-child(2) div,.spanish #products .row:nth-child(2) a:nth-child(3) div,.spanish #products .row:nth-child(2) a:nth-child(6) div,.spanish #products .row:nth-child(2) a:nth-child(7) div { margin-top: 0 } .french #products .row:nth-child(1) a:nth-child(1) div,.french #products .row:nth-child(1) a:nth-child(2) div,.french #products .row:nth-child(1) a:nth-child(3) div,.french #products .row:nth-child(1) a:nth-child(5) div,.french #products .row:nth-child(1) a:nth-child(7) div,.french #products .row:nth-child(2) a:nth-child(4) div { margin-top: 0 } .french #products .row:nth-child(1) a:nth-child(3) div { padding: 0 3px } .italian #products .row:nth-child(1) a:nth-child(2) div,.italian #products .row:nth-child(1) a:nth-child(3) div,.italian #products .row:nth-child(1) a:nth-child(6) div,.italian #products .row:nth-child(2) a:nth-child(3) div { margin-top: 0 } .italian #products .row:nth-child(1) a:nth-child(5) div { margin-top: -7px } .japanese #products .row:nth-child(1) a:nth-child(2) div,.japanese #products .row:nth-child(1) a:nth-child(3) div,.japanese #products .row:nth-child(1) a:nth-child(5) div,.japanese #products .row:nth-child(1) a:nth-child(7) div,.japanese #products .row:nth-child(2) a:nth-child(3) div,.japanese #products .row:nth-child(2) a:nth-child(7) div { margin-top: 0 } .korean #products .row:nth-child(1) a:nth-child(2) div,.korean #products .row:nth-child(1) a:nth-child(5) div { margin-top: 0 } .korean #products .row:nth-child(1) a:nth-child(3) div { width: 134px } .portuguese #products .row:nth-child(1) a:nth-child(3) div,.portuguese #products .row:nth-child(1) a:nth-child(7) div,.portuguese #products .row:nth-child(2) a:nth-child(4) div,.portuguese #products .row:nth-child(2) a:nth-child(3) div,.portuguese #products .row:nth-child(2) a:nth-child(6) div { margin-top: 0 } .portuguese #products .row:nth-child(1) a:nth-child(5) div { margin-top: 0; padding: 0; letter-spacing: -.2px } .russian #products .row:nth-child(1) a:nth-child(1) div,.russian #products .row:nth-child(1) a:nth-child(2) div,.russian #products .row:nth-child(1) a:nth-child(3) div,.russian #products .row:nth-child(1) a:nth-child(6) div,.russian #products .row:nth-child(2) a:nth-child(1) div,.russian #products .row:nth-child(2) a:nth-child(2) div,.russian #products .row:nth-child(2) a:nth-child(3) div,.russian #products .row:nth-child(2) a:nth-child(4) div,.russian #products .row:nth-child(2) a:nth-child(6) div,.russian #products .row:nth-child(2) a:nth-child(7) div { margin-top: 0 } .russian #products .row:nth-child(1) a:nth-child(5) div { margin-top: -7px } .chinese #disk-recorders .column-2 { padding: 22px 94px 59px } .korean #disk-recorders .column-2 { padding: 22px 94px 59px } .turkish #products .row:nth-child(1) a:nth-child(1) div,.turkish #products .row:nth-child(1) a:nth-child(3) div,.turkish #products .row:nth-child(1) a:nth-child(5) div,.turkish #products .row:nth-child(1) a:nth-child(6) div,.turkish #products .row:nth-child(2) a:nth-child(1) div { margin-top: 0 } #container section a:hover { box-shadow: inset 0px 0px 5px #ccc } .banner { border-top-left-radius: 6px; border-top-right-radius: 6px; position: relative; overflow: hidden } .banner h2 { position: absolute; bottom: 28px; left: 0; width: 1000px; text-align: center; color: #fff; font-size: 46px; font-weight: 300; line-height: 54px } .labels img:first-child { margin-left: 0 } .labels img+img:last-child { margin-left: 10px } .column-container { display: table-row; overflow: hidden } .column-container:last-child .column-1:last-child,.column-container:last-child .column-2:first-child,.column-container:last-child .column-3:first-child,.column-container:last-child .column-4:first-child { border-bottom-left-radius: 6px } .column-container:last-child .column-1:last-child,.column-container:last-child .column-2:last-child,.column-container:last-child .column-3:last-child,.column-container:last-child .column-4:last-child { border-bottom-right-radius: 6px } .column-container>a h3 { font-size: 18px; color: #272727; font-weight: 400; line-height: 22px; margin: 7px 0 6px 0 } .column-container>a p { font-size: 12px; color: #272727; font-weight: 400; line-height: 16px } .column-1 { width: 100%; box-sizing: border-box; padding: 40px 132px 54px 160px; text-align: center; position: relative; display: table-cell; height: 100%; background-color: #fff; border-left: 1px solid #cecece; border-bottom: 1px solid #cecece } .column-2 { width: 50%; width: 500px; box-sizing: border-box; padding: 22px 49px 54px; text-align: center; position: relative; display: table-cell; height: 100%; background-color: #fff; border-left: 1px solid #cecece; border-bottom: 1px solid #cecece } .column-3 { width: 33%; box-sizing: border-box; padding: 22px 18px 54px; text-align: center; position: relative; display: table-cell; height: 100%; background-color: #fff; border-left: 1px solid #cecece; border-bottom: 1px solid #cecece } .column-4 { width: 25%; box-sizing: border-box; padding: 22px 19px 54px; text-align: center; position: relative; display: table-cell; height: 100%; background-color: #fff; border-left: 1px solid #cecece; border-bottom: 1px solid #cecece } .column-1 .text-container { float: right; width: 365px; text-align: left; margin-left: 80px } .column-1 .image-container { float: left; width: 261px; text-align: center } .column-1:last-child,.column-2:last-child,.column-3:last-child,.column-4:last-child { border-right: 1px solid #cecece } #atem-live-production .column-1,#disk-arrays .column-1,#cintel-film-scanning .column-1,#multiview-monitoring .column-1,#audio-monitoring .column-1,#multiview-monitoring .column-1,#disk-recorders .column-1,#standards-conversion .column-1,#digital-film-cameras .column-1,#test-and-measurement .column-1 { padding: 40px 132px 40px 60px } #editing-and-color-correction .column-1 .image-container,#disk-arrays .column-1 .image-container,#cintel-film-scanning .column-1 .image-container,#multiview-monitoring .column-1 .image-container,#audio-monitoring .column-1 .image-container,#disk-recorders .column-1 .image-container,#test-and-measurement .column-1 .image-container { width: 361px; margin-top: 20px } #atem-live-production .column-1 .image-container { width: 361px } #digital-film-cameras .column-1 .image-container { width: 361px } .tr #atem-live-production .column-container:nth-child(2) .price { width: 390px } #live-production-cameras .column-1 .image-container img { margin-left: -70px } #editing-and-color-correction .column-1 { padding: 61px 132px 55px 60px } #editing-and-color-correction .column-2 { padding: 152px 49px 54px 49px } #editing-and-color-correction .image-container img { position: absolute } #editing-and-color-correction .image-container img.davinci-resolve-15 { left: 93px; top: 31px } #editing-and-color-correction .image-container img.davinci-resolve-panels { left: 35px; top: 39px } #editing-and-color-correction .image-container img.blackmagic-egpu { left: 191px; top: 18px } #converters .column-container .column-2:last-child { padding-left: 10px; padding-right: 10px } #converters .column-container:last-child .column-2 { padding-top: 0 } #professional-recording-and-monitoring-1 .image-container img,#professional-recording-and-monitoring-2 .image-container img,#professional-recording-and-monitoring-3 .image-container img { margin-top: 5px; margin-left: -27px } #professional-recording-and-monitoring-1 .column-1,#professional-recording-and-monitoring-2 .column-1,#professional-recording-and-monitoring-3 .column-1 { padding-bottom: 26px } #multiview-monitoring .image-container img { margin-left: 14px } #multiview-monitoring .column-1 { padding-bottom: 60px } #standards-conversion .image-container { width: 361px } #standards-conversion .image-container img { margin-top: 23px; margin-left: -21px } #standards-conversion .column-1 { padding-bottom: 60px } #ultimatte .image-container img { margin-top: 4px; margin-left: 2px } #ultimatte .column-container>a p { width: 378px } .price { font-size: 18px; color: #272727; font-weight: 600; margin: 10px 0 0; line-height: 18px } .price .freight { font-size: 10px; font-weight: 400 } .column-container .rrp-disclaimer { margin-top: 10px; font-size: 10px; line-height: normal; font-weight: 400 } .labels { margin-top: 11px } .new { position: absolute; top: 0; left: -1px; font-size: 14px; text-transform: uppercase; color: #fff; font-weight: 600; background-color: #00aeef; line-height: 14px; padding: 5px 30px } .button-wrap { position: absolute; bottom: 16px; margin-left: auto; margin-right: auto; left: 0; right: 0 } .button { margin-top: 11px } .column-1 .button-wrap { position: relative; top: 6px } #container section#close a:hover { box-shadow: none } section#close { text-align: center } section#close img { cursor: pointer } section#close p { font-size: 18px; line-height: normal; margin-top: 9px; color: #333 }