div.black { background-color: #000; color: #fff; }
div.black h1, div.black h2, div.black h3, div.black h4 { color: #fff; }

div.white { background-color: #fff; color: #000; }
div.white h2, div.white h3, div.white h4 { color: #000; }

div.blue { background-color: #0096d6; color: #fff; }
div.blue h2, div.blue h3, div.blue h4 { color: #fff; }

div.promo, div.promo h3 { font-family: "HPSimplifiedLight"; }
div.promo { font-size: 120%; line-height: 150%; }

div.promo { position: relative; overflow: auto; padding: 20px 0 20px 0; }
div.promo h2 { font-weight: 600; }

div.promo div.powerfull { text-align: center; width: 100%; padding-top: 3%; }
div.promo div.powerfull img { width: 100%; max-width: 1400px; }
div.promo div.powerfull div { position: absolute; width: 100%; text-align: left; bottom: 50%; transform: translateY(50%); padding-right: 7%; }

div.promo div.gist { text-align: center; width: 100%; padding: 20px 5% 20px 5%; font-size: 125%; line-height: 125%; }

div.promo div.mks { overflow: auto; width: 100%; }
div.promo div.mks div.row-left  { float: left; padding: 20px; width: 100%; min-width: 250px; max-width: 360px; }
div.promo div.mks div.row-left img { width: 100%; }
div.promo div.mks div.row-right { float: left; padding: 20px; width: calc(100% - 360px); min-width: 250px; }

div.promo div.performance { padding: 20px 0 20px 0; overflow: auto; display: flex; flex-wrap: wrap; }
div.promo div.performance div { text-align: center; max-width: 100%; min-width: 200px; width: 25%; height: 100%; padding: 0 20px 0 20px; margin: 0 auto; }
div.promo div.performance div div { width: 100%; margin: 18px 0 25px 0; }

div.promo div.showmodels { text-align: center; font-size: 150%; line-height: 150%; display: flex; }
div.promo div.showmodels div { margin: auto; }
div.black div.promo div.showmodels div a { padding: 20px 30px; color: #fff; border: 1px solid #fff; display: flex; }
div.white div.promo div.showmodels div a { padding: 20px 30px; color: #000; border: 1px solid #000; display: flex; }
div.gray div.promo div.showmodels div a { padding: 20px 30px; color: #000; border: 1px solid #000; display: flex; }
div.blue div.promo div.showmodels div a { padding: 20px 30px; color: #fff; border: 1px solid #fff; display: flex; }

div.promo div.propheader { padding: 20px 20px 0 20px; width: 100%; }
div.promo div.propheader h2 { text-align: center; font-size: 150%; line-height: 150%; }
div.promo div.propheader h3 { text-align: center; font-size: 150%; line-height: 150%; }

div.promo div.capabilities-right { overflow: auto; width: 100%; }
div.promo div.capabilities-right div.row-right  { float: left; padding: 20px; width: 100%; min-width: 250px; max-width: 460px; }
div.promo div.capabilities-right div.row-right img { width: 100%; }
div.promo div.capabilities-right div.row-right p.desc { font-size: 85%; line-height: 110%; margin: 10px; color:#cdcdcd; }
div.promo div.capabilities-right div.row-right p.note { font-size: 75%; line-height: 100%; margin: 7px 10px; color:#cdcdcd; }
div.promo div.capabilities-right div.row-left { float: left; padding: 20px; width: calc(100% - 460px); min-width: 250px; }

div.promo div.capabilities-left { overflow: auto; width: 100%; }
div.promo div.capabilities-left div.row-left  { float: left; padding: 20px; width: 100%; min-width: 250px; max-width: 460px; }
div.promo div.capabilities-left div.row-left img { width: 100%; }
div.promo div.capabilities-left div.row-left p.note { font-size: 75%; line-height: 100%; margin: 7px 10px; color:#cdcdcd; }
div.promo div.capabilities-left div.row-right { float: left; padding: 20px; width: calc(100% - 460px); min-width: 250px; }

div.gray {
	color: #000;
	background-image:-webkit-linear-gradient(top, #ddd, #aaa);
	background-image:-moz-linear-gradient(top, #ddd, #aaa);
	background-image:-o-linear-gradient(top, #ddd, #aaa);
	background-image:-ms-linear-gradient(top, #ddd, #aaa);
	background-image:linear-gradient(top, #ddd, #aaa);
}
div.gray div.container div.promo div.hardware { color: #000; }

div.promo div.hardware { overflow: auto; width: 100%; padding-bottom: 20px; }
div.promo div.hardware div.row-left  { float: left; padding: 0 20px; width: 100%; min-width: 250px; max-width: 360px; }
div.promo div.hardware div.row-left h4 { padding: 20px 0; border-top: 4px solid; }
div.promo div.hardware div.row-left p.note { font-size: 75%; line-height: 100%; margin: 7px 10px; color:#cdcdcd; }
div.promo div.hardware div.row-right { float: left; padding: 0 20px; width: calc(100% - 360px); min-width: 250px; }

div.promo div.wide { text-align: center; width: 100%; padding: 20px; }
div.promo div.wide img { width: 100%; max-width: 1060px; }

div.promo div.design-right { overflow: auto; width: 100%; }
div.promo div.design-right div.row-right  { float: left; padding: 20px; width: 100%; min-width: 250px; max-width: 360px; }
div.promo div.design-right div.row-right img { width: 100%; }
div.promo div.design-right div.row-left { float: left; padding: 20px; width: calc(100% - 360px); min-width: 250px; }

div.promo div.design-left { overflow: auto; width: 100%; }
div.promo div.design-left div.row-left  { float: left; padding: 20px; width: 100%; min-width: 250px; max-width: 360px; }
div.promo div.design-left div.row-left img { width: 100%; }
div.promo div.design-left div.row-right { float: left; padding: 20px; width: calc(100% - 360px); min-width: 250px; }

div.promo div.ports { overflow: auto; min-width: 250px; margin: 0 auto; max-width: 1060px; }
div.promo div.ports div { text-align: center; float: left; width: 50%; padding: 0 5%; }

div.promo div.media { padding: 20px 0 20px 0; width: 100%; display: flex; flex-wrap: wrap; text-align: center; }
div.promo div.media div { text-align: center; min-width: 200px; width: 33%; height: 100%; padding: 0 20px 0 20px; margin: 0 auto; }
div.promo div.media div img { width: 100%; max-width: 360px; }
div.promo div.media div p { margin: 18px 0 25px 0; }

div.promo div.corp { padding: 20px 0 20px 0; width: 100%; display: flex; flex-wrap: wrap; text-align: center; }
div.promo div.corp div { text-align: center; min-width: 200px; width: 25%; height: 100%; padding: 0 20px 0 20px; margin: 0 auto; }
div.promo div.corp div img { width: 100%; max-width: 260px; }
div.promo div.corp div p { margin: 18px 0 25px 0; }