/*msi product feature css start*/ /* import url( https://asset.msi.com/event/nb/2018/Prestige_Limited_Edition/css/Fonts_CenturyGothic.css ) import url( https://fonts.googleapis.com/css2?family=Sarpanch:wght 800&display=swap ) */ body { margin: 0 } msi-feature { background: 000 color: fff font-family: CenturyGothic Open Sans arial sans-serif font-size: 20px line-height: 1.6 text-align: center } .msi-feature { width: 100% max-width: 1200px padding: 20px 0 100px 0 display: flex margin: 0 auto justify-content: center align-items: center } .msi-feature:nth-of-type(2) .msiimg:nth-of-type(3) .msi-feature:nth-of-type(2) .msiimg:nth-of-type(4) .msi-feature:nth-of-type(6) .msiimg:nth-of-type(2) { /* margin: 50px 0 */ } msi-feature img { width: 100% /* max-width: 100% */ } msi-feature img.auto { width: auto } msi-feature .msiimg-xs { display: none } msi-feature .msititle { font-size: 36px color: fff font-weight: bold text-transform: uppercase padding: 20px 25px 15px font-family: Sarpanch sans-serif } msi-feature .msititle-little { font-size: 30px color: fff font-weight: bold text-transform: uppercase padding: 20px 25px 15px font-family: Sarpanch sans-serif } msi-feature .torx { font-size: 36px color: fff padding: 0 25px 15px font-family: Sarpanch sans-serif } msi-feature .msititle2 { font-size: 45px font-weight: bold color: fff padding: 20px 25px 15px font-family: Sarpanch sans-serif } msi-feature .msitxt { padding: 0px 25px 20px } msi-feature .note { font-size: 16px color: ff0000 } msi-feature .msi-table { padding: 10px 25px 25px display: -webkit-box display: -ms-flexbox display: flex -webkit-box-pack: justify -ms-flex-pack: justify justify-content: space-between -webkit-box-align: center -ms-flex-align: center align-items: center } msi-feature .msi-tb { -ms-flex: 0 0 20% flex: 0 0 20% } msi-feature .msi-tb-title { color: fff border-bottom: 000 1px solid font-size: 22px padding-bottom: 5px margin-bottom: 10px text-transform: uppercase } /**Youtube RWD**/ .video-container { position: relative padding-bottom: 56.25% padding-top: 30px height: 0 overflow: hidden } msi-feature .msi-feature .msi-flex2 { display: flex justify-content: center align-items: center } msi-feature .msi-feature .msi-flex3 { display: flex flex-direction: column align-items: center } msi-feature .msi-feature .msi-flex .flex-item { flex: 0 0 50% } msi-feature .msi-feature .msi-flex .left-flex { flex: 0 0 60% } msi-feature .msi-feature .msi-flex .right-flex { flex: 0 0 35% } msi-feature .textleft { text-align: left } msi-feature .mtb20 { margin: 25px 0 } msi-feature .nvp_b { font-size: 23px font-weight: bold } msi-feature .nvp { line-height: 1.2 } msi-feature .msi-feature__videobox { position: relative padding: 20px 0 100px 0 max-width: 1200px margin: 0 auto overflow: hidden } .video-container iframe .video-container object .video-container embed { position: absolute top: 0 left: 0 width: 100% height: 100% border: 0 } media screen and (max-width: 960px) { msi-feature .msi-table { display: block } msi-feature .msi-tb { margin: 15px auto } } msi-feature .msiimg { line-height: 0 } msi-feature .icons { display: flex justify-content: center align-items: center } msi-feature .icon { width: 80px height: auto margin: 20px 40px 0 } msi-feature img.hz { width: 100px } msi-feature .modelName { width: 600px } .msi-box { /* display: block */ width: 33% padding: 0 10px box-sizing: border-box overflow: hidden flex-wrap: wrap } msi-feature .msi-feature .msi-flex { display: flex } media screen and (max-width: 768px) { msi-feature .msi-feature .msi-flex { flex-wrap: wrap flex-direction: column !important } .msi-box { width: 100% padding: 0 5% } } .font-w { font-weight: 900 }