X570-A PRO .mbWrapper { max-width: 1024px padding: 20px background-color: fff } table { width: 100% } .head { font-family: Open Sans Arial Helvetica sans-serif font-size: 20px line-height: 1.1em margin: 0 font-weight: bold text-transform: uppercase color: 019cfe } .head-2 { font-family: Open Sans Arial Helvetica sans-serif font-size: 18px line-height: 26px margin: 0 font-weight: bold text-transform: uppercase color: 333 } .description { font-family: Open Sans font-size: 13px margin: 0 color: 333 } .subtitle { font-family: Open Sans font-size: 13px padding-top: 10px padding-bottom: 10px font-weight: bold color: 333 } .list-right { font-family: Open Sans font-size: 11px color: 333 } .text-center { text-align: center } .paragraph-center { margin-left: auto margin-right: auto } .legenda-text { font-family: Open Sans color: 333 font-size: 13px margin: 0 } .border { border: 4px solid 019cfe } .rgb-border { border: 4px solid transparent -moz-border-image: -moz-linear-gradient(top right ff0000 ff00d7 0400ff 00fffc 00ff26 fff400 ff0000) -webkit-border-image: -webkit-linear-gradient(top right ff0000 ff00d7 0400ff 00fffc 00ff26 fff400 ff0000) border-image: linear-gradient(to bottom left ff0000 ff00d7 0400ff 00fffc 00ff26 fff400 ff0000) border-image-slice: 1 } .works-with-vendors { padding-bottom: 10px padding-top: 0 } .vendors { padding-left: 3% } .black-bg { background: 000 } .white { color: FFF } .core-boost { background: url( https://storage-asset.msi.com/global/picture/image/feature/mb/Resellerpage/X570/X570APro/msi-core_boost.png ) min-height: 450px background-repeat: no-repeat } .core-boost-item tr:first-child { background: initial } .core-boost-item tr { background: FFF } .usb-lightning { display: block } .usb-lightning-m { display: none } /* Table/tbody/tr/td/img percentage width */ .w-p-100 { width: 100% } .w-p-70 { width: 70% } .w-p-60 { width: 60% } .w-p-55 { width: 55% } .w-p-50 { width: 50% } .w-p-48 { width: 48% } .w-p-44 { width: 44% } .w-p-40 { width: 40% } .w-p-38 { width: 38% } .w-p-35 { width: 35% } .w-p-33 { width: 33.33% } .w-p-30 { width: 30% } .w-p-29 { width: 29% } .w-p-27 { width: 27% } .w-p-24 { width: 24% } .w-p-23 { width: 23% } .w-p-17 { width: 17% } .w-p-10 { width: 10% } /* Table Cellspacing */ .cs-10 { border-spacing: 10px } /* height */ .h-60 { height: 60px } .h-80 { height: 80px } /* Align + Valign center */ .a-center { text-align: center } .va-bottom { vertical-align: bottom } .va-top { vertical-align: top } /* Alignment columns */ .f-left { float: left } .f-right { float: right } table td { border-collapse: collapse border: 0 border-spacing: 0 } td .oc-item { padding: 8px } td .oc-loadline { padding: 8px } td .vr-item { padding: 8px } td .audio-item { padding: 8px } td .multicpu-item { padding: 8px } td .pcb { padding: 8px } td .server-grade ul { padding-left: 20px } td .server-grade ul li { padding: 5px 0 } table.vr td.logo { padding: 8px } .audio-boost-graph { min-height: 435px } table .pcie { text-align: center } td .type-c { text-align: center } td .overview { text-align: center } td .feature { text-align: left } /* image */ .overview img { width: 60% } .feature img { width: 100% } .oc-loadline img { width: 70% border: 4px solid 757575 } .oc-item img { width: 70% border: 4px solid 757575 } .vr-item img { width: 100% } .audio-item img { width: 100% border: 4px solid 757575 } .multicpu img { width: 100% } .multicpu-item img { width: 100% border: 4px solid 757575 } .vr .logo img { width: 100% } .audio-boost-logo img { width: 100% } .audio-boost-chart img { width: 100% } .memory-graph img { width: 100% } .memory-compatibility img { width: 100% } .usb-lightning-logo img { width: 100% } .mystic-light-app img { width: 100% } .mystic-light-logo img { width: 40% } .mystic-light-extension-logo img { width: 100% } .mystic-light-case img { width: 70% } .mystic-light-sync img { width: 90% } .vendors img { width: 100% } .pin img { width: 100% } .lighting img { width: 100% } .pcie img { width: 60% } .frozr-heatsink img { width: 100% } .fan-control img { width: 100% } .usb-device img { width: 100% } .type-c img { width: 60% } .server-grade img { width: 100% } .atypical img { width: 80% border: 4px solid 757575 } .bg img { width: 100% } /* text */ .head { font-size: 28px font-weight: bold font-family: Open Sans arial sans-serif line-height: 32px } .head-2 { font-size: 18px font-weight: bold font-family: Open Sans Arial Helvetica sans-serif line-height: 26px } .description { padding-bottom: 10px font-size: 14px font-weight: normal text-align: left font-family: Open Sans Arial Helvetica sans-serif line-height: 22px } /** MAX W-640 **/ media only screen and (max-width: 640px) { table .full-width { width: 100% max-width: 100% min-width: 100% clear: both } td .full-width { width: 100% max-width: 100% min-width: 100% clear: both } td .list-right { width: 66% } td .vr-logos { width: 280px } .audio-boost-graph { min-height: 0px } table .ddr4-boost { width: 100% } .core-boost { width: 100% background-repeat: no-repeat background-position: 40% -50% } .core-boost-item { width: 100% } .core-boost-item tr:first-child { height: 360px background: no-repeat } td .atypical-img { text-align: center } /* text */ .head { font-size: 24px font-weight: bold font-family: Open Sans arial sans-serif } .head-2 { font-size: 18px font-weight: bold font-family: Open Sans arial sans-serif } .description { padding-bottom: 20px } /* image */ .overview img { width: 100% } .feature img { width: 80% float: right } .audio-boost-logo img { width: 200px padding-top: 20px } .audio-boost-chart img { width: 180px } .usb-lightning { display: none } .usb-lightning-m { display: block margin: auto } .mystic-light-case img { width: 90% } .mystic-light-app img { width: 100% } .mystic-light-logo img { width: 70px } .mystic-light-extension-logo img { width: 167px } .pcie img { width: 100% } .atypical img { width: 60% } } /** MAX W-479 **/ media only screen and (max-width: 479px) { /* mobile setting */ .head { font-size: 24px font-weight: bold font-family: Open Sans arial sans-serif } table .full-width { width: 100% max-width: 100% min-width: 124px clear: both } td .list-right { width: 100% max-width: 100% min-width: 124px clear: both } td .overview { text-align: left } td .full-width { width: 100% max-width: 100% min-width: 100% clear: both } /* text */ /* image */ .oc-loadline img { width: 100% } .oc-item img { width: 100% } } /** MAX W-380 **/ media only screen and (max-width: 380px) { /* image */ }
|