main {background: url('header_bg.jpg') top center no-repeat; background-size: contain; font-family: 'Rubik', sans-serif; font-size: 16px;}
main img {max-width: 100%; display: block; margin: auto;}
main h1 {font-size: 3em;}
main h2 {font-size: 2.5em;}
main h3 {font-size: 2em;}
main h4 {font-size: 1.75em;}
main h5 {font-size: 1.5em;}
main h6, main p, main li {font-size: 1.25em;}
main h1, main h2, main h3, main h4, main h5, main h6, main p, main li {margin-bottom: 0.5em; line-height: 1.25em;}
main h1:last-child, main h2:last-child, main h3:last-child, main h4:last-child, main h5:last-child, main h6:last-child, main p:last-child, main li p:last-child {margin-bottom: 0;}

section {padding: 2em 2em 1em;}
.mcontainer {max-width: 1920px;}
.row {padding-bottom: 1em;}
.row:last-child {padding-bottom: 0;}

.gradient-bg {background: linear-gradient(to right, #486bd5, #5b4ad6)}
.gradient-bar {background: linear-gradient(to right, #486bd5, #5b4ad6); min-height: 3px;}
.gradient-technology {padding: 0.25em 2em 0.25em 0; background: linear-gradient(to right, #486bd5, #5b4ad6); text-align: right; font-size: 2em; font-weight: 300; letter-spacing: 0.25em; text-transform: uppercase; border-top-right-radius: 0.75em; border-bottom-right-radius: 0.75em;}
.gradient-bar-left {background: linear-gradient(to left, #5b4ad6, #486bd5); min-height: 2.5em;}
.gradient-bar-right {background: linear-gradient(to right, #5b4ad6, #486bd5); min-height: 2.5em;}
.gradient-box {display: inline-block; padding: 0.5em 1em; background: linear-gradient(to right, #5b4ad6, #486bd5); border-radius: 1em; font-weight: 300;}
.gradient-box-right {display: inline-block; width: 100%; padding: 0.5em 1em; background: linear-gradient(to right, #5b4ad6, #486bd5); border-top-right-radius: 1em; border-bottom-right-radius: 1em; font-weight: 300;}

.color1 {color: #486bd5;}

.italic {font-style: italic;}

.f100 {font-weight: 100;}
.f200 {font-weight: 200;}
.f300 {font-weight: 300;}
.f400 {font-weight: 400;}
.f400 {font-weight: 400;}
.f500 {font-weight: 500;}
.f600 {font-weight: 600;}
.f700 {font-weight: 700;}
.f800 {font-weight: 800;}
.f900 {font-weight: 900;}

.h2 {font-size: 1.5em;}

.section-technology h2.gradient-bg {display: inline-block; padding: 0.25em 1em; border-radius: 0.75em; font-weight: 300;}
.section-technology .text-gpu {position: absolute; left: 25%; bottom: 5.4%; font-size: 1.5vw;}
.section-technology .text-vrm {position: absolute; left: 25%; bottom: -0.4%; font-size: 1.5vw;}
.column-exploded {padding: 1% 0 5%;}
.row-top-right {position: absolute; right: 1em; top: 1em; width: 50%;}
.row-bottom-left {position: absolute; left: 1em; bottom: 1em; width: 50%;}

.conductivity-1, .conductivity-2, .contact-1, .contact-2, .contact-3, .contact-4, .fans-1, .fans-2, .fans-3 {position: absolute; width: 12%; border: 0.25em solid #486bd5;}
.conductivity-1 {bottom: 13%; left: 30%;}
.conductivity-2 {top: 20%; right: 25%;}
.contact-1 {top: 12%; left: 1%;}
.contact-2 {top: 15%; left: 55%;}
.contact-3 {bottom: 2%; left: 20%;}
.contact-4 {bottom: 16%; right: 22%;}
.fans-1 {top: 18%; left: 28%;}
.fans-2 {top: 30%; right: 37%;}
.fans-3 {top: 22%; right: 12%;}
.row-colors {padding-bottom: 0.1em; font-size: 2em; font-weight: 900; line-height: 1em;}
.cool {color: blue;}
.warm {color: lightgreen;}
.hot {color: red;}

.video-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media (min-width: 1920px)
{
	.section-technology .text-gpu {font-size: 1vw;}
	.section-technology .text-vrm {font-size: 1vw;}
}
@media (max-width: 1024px)
{
	main {font-size: 14px;}
	.section-technology .text-gpu {left: 25%; bottom: 4.6%; font-size: 90%;}
	.section-technology .text-vrm {left: 25%; bottom: -0.9%; font-size: 90%;}
	.row-top-right {font-size: 10px;}
	.row-bottom-left {font-size: 10px;}
}
@media (max-width: 850px)
{
	main {font-size: 12px;}
	main .text-right {text-align: left;}
	section {padding: 1em 1em 0;}
	.section-technology .text-gpu {left: 26%; bottom: 4.6%; font-size: 1.5vw;}
	.section-technology .text-vrm {left: 26%; bottom: -0.9%; font-size: 1.5vw;}
	.row-top-right {position: relative; display: inline-block; right: initial; top: initial; width: 48%; text-align: left; padding-right: 1em;}
	.row-top-right h2, .row-bottom-left h2, .row-bottom-left .h2 {font-size: 1em;}
	.row-top-right p {text-align: left;}
	.row-bottom-left {position: relative; display: inline-block; left: initial; bottom: initial; width: 48%; text-align: right; padding-left: 1em;}
	.row-bottom-left h3 {font-size: 1em;}
	.row-bottom-left p {text-align: right;}
}
@media print {
	.page-break {page-break-after: always;}
}