main {font-family: 'Rajdhani', sans-serif; font-size: 16px;}
main img {max-width: 100%; vertical-align: bottom;}
main h1 {font-size: 5em; font-weight: 600; text-transform: uppercase;}
main h2 {font-size: 2.25em; font-weight: 200; text-transform: uppercase; line-height: 1em;}
main h3 {font-size: 1.75em; font-weight: 200; text-transform: uppercase; line-height: 1em;}
main h4 {font-size: 1.5em; font-weight: 200; text-transform: uppercase; line-height: 1em;}
main h5 {font-size: 1.25em; font-weight: 200; text-transform: uppercase; line-height: 1em;}
main h6 {font-size: 1em; font-weight: 200; text-transform: uppercase; line-height: 1em;}
main p {font-size: 1em; font-weight: 300;}

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

main img {display: block; margin: 0 auto;}
main {overflow-x: hidden;}
.blue-text {color: #4bcdfc;}
.dark-blue-bg {background-color: #044696;}
.gold-text {color:#ffcc00;}
.gold-bg {background-color:#ffcc00;}

.header-bg {background: url('Z390_Series_Article_header.jpg') center fixed; background-size: cover; background-position: bottom;}
.header-bg h2 {padding-top: 0.5em; padding-bottom: 0.5em;}
.bg-feature-0 {background: url('feature_01_small.jpg') center ; background-size: contain; background-repeat: no-repeat;}
.bg-feature-1 {background: url('feature_02_small.jpg') center ; background-size: contain; background-repeat: no-repeat;}
.bg-feature-2 {background: url('feature_03_small.jpg') center ; background-size: contain; background-repeat: no-repeat;}
.bg-feature-3 {background: url('feature_04_small.jpg') center ; background-size: contain; background-repeat: no-repeat;}
.bg-feature-4 {background: url('feature_05_small.jpg') center ; background-size: contain; background-repeat: no-repeat;}
.feature-circle-base {margin: auto; max-width: 322px; position: relative;}
.feature-text-circle {border-radius: 50%; border: 2px solid #85c6f2; background-color: rgba(65, 225, 210, 0.35); position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 75%; max-height: 55%;}
.feature-text {font-size: 1vw; margin: auto; max-width: 90%; position: relative; top: 50%; transform: translate(0, -50%); text-align: center;}
.logo-transform {max-width: 500px; width: 100%;}
.section-header-paragraph p {margin: 0 auto; text-align: center; max-width: 900px;}
.features-container {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0;}
.features-overlay {position: relative;display: block;width: 100%;height: 100%;}

.section-motherboard-dark h5, .section-motherboard-ftw h5 {margin-bottom: 1em;}


.nav-bg {background: rgb(20,20,20); margin: auto; opacity: 1; position: relative; transition: background-color 0.7s ease 0s; z-index: 999;}
.nav {margin: 0 auto; position: relative; text-align: center; font-size: 0; }
.nav li {color: #ddd; cursor: pointer; display: inline-block; font-size: 16px; font-weight: 400; margin: 0 5px; padding: 10px 8px; text-transform: uppercase;}
.nav li:hover {color: #25bcf5; background: #333; }
.nav li.nav-active {color: #25bcf5; }
.is-sticky .nav-bg {max-width: 100%; width: 100%;}
.nav-bg .mcontainer {max-width: 900px;}
.back-to-top {display: none; width: 64px; height: 64px; position: fixed; top: 40px; right: 25px; cursor: pointer; z-index: 9999; }
.menu ul li.nav-active {border-bottom: 4px solid skyblue; color: skyblue;}
.nav a {color: #ddd; display: block; margin: -10px 0; padding: 10px 0; text-decoration: none;}
.nav a:hover {color: #25bcf5;}
.spec-listing {min-height: 350px;}


@media (min-width: 851px)
{
	.header-text-box, .logo-transform {margin-top: 7em;}
	.blue-box {z-index: 1; margin-top: 1em; position: relative;}
	.blue-box::before {background-color: #ffcc00; content: " "; position: absolute; right: 0; width: 1000%; height: 100%; z-index: -1}
	.box-text {z-index: 2; padding: 0.5em; position: relative;}
}

@media (max-width: 850px)
{
	main {font-size: 12px;}
	/*main h1 {font-size: 2.25em;}*/
	main h2 {font-size: 2em;}
	main h3 {font-size: 1.75em;}
	main h4 {font-size: 1.5em;}
	main h5 {font-size: 1.25em;}
	main h6 {font-size: 1em;}
	main p {padding-bottom: 0.5em;}
	main select {width: 100%;}
	
	.mcontainer {padding: 0.5em;}
	.row {margin-left: -0.5em; margin-right: -0.5em;}
	.column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12 {padding-left: 0.5em; padding-right: 0.5em;}
	
	.header-bg h2 {background: #ffcc00; margin-bottom: 2em;}
	.logo-transform {margin-bottom: 2em;}
	
	.feature-circle-base {margin-bottom: 2em;}
	.feature-text {font-size: 1.5em;}
	
	.section-motherboard-compare h3, .section-motherboard-compare h4 {text-align: center;}
	.section-motherboard-compare h3 {font-size: 3em; margin-top: 1em;}
	.section-motherboard-compare h4 {font-size: 2em;}
	
	main .remove-item {display: none !important;}
}


.specs {font-size: 0.95em;}

.feature-click {color: #00aeef}
.feature-header {font-weight: bold;}
.table-padding {padding: 50px}
.product-group-features h3 {font-weight: bold;}
.product-group-features li {font-weight: bold;}
.product-group-specs h3 {font-weight: bold;}
.product-group-specs li {font-weight: bold;}
.arrow {border: solid #00aeef; border-width: 0 3px 3px 0; display: inline-block; padding: 3px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}

.vr {border-right: 2px solid #dfb36f;}
.custom-counter {margin: 0;padding: 0;list-style-type: none;}
.custom-counter li {counter-increment: step-counter;margin-bottom: 5px;}
.custom-counter li::before {content: counter(step-counter);margin-right: 20px;font-size: 80%;background-color: rgb(180, 180, 180);color: white;font-weight: bold;
padding: 3px 8px;border-radius: 11px;}

.mcontainer .prod-column {position: initial;}
.prod-accord-header {background-color: #111; border: 1px solid #333; color: #fff; font-size: 0.9em; cursor: pointer; margin-top: 3px; padding: 5px;}
.itemSKU {float: right; margin: 0 5px;}
.arrow-left {width: 0; height: 0; border-top: 6px solid #111; border-bottom: 6px solid #111; border-right: 6px solid #fff; border-left: 6px solid #111; float: right; margin-top: 3px;}
.prod-accord-header.active {border-color: #555; color: #ffcc2e;}
.prod-accord-header.active .arrow-left {border-top: 6px solid #ffcc2e; border-bottom: 6px solid #111; border-left: 6px solid #111; border-right: 6px solid #111; margin-top: 3px;}
.prod-specs {position: absolute; top: 0; right: 0; padding-left: 15px; padding-right: 15px; width: 50%;}
.prod-accord-content {display: none; overflow: hidden;}

.product-images {list-style: none; margin: 5px 0; overflow: hidden;}
.product-images li {float: left; margin: 3px 5px 3px 0;}
.product-images img {max-width: 50px;}
.product-buttons {list-style: none; margin: 15px 0 0;}
.product-buttons a {background-color: #111; color: #fff; display: block; padding: 4px 8px; text-decoration: none; border: 1px solid #333;}
.product-buttons a:hover {color: #999;}
.product-buttons li {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; font-size: 12px; margin: 0 1% 10px 0; width: 30%; padding: 0;}
.product-buttons .statusComingSoon {display: block; padding: 4px 8px; background-color: #111; border: 1px solid #333;}
.product-group-specs, .product-group-features, .product-table-specs {display: none;}
.product-group-specs h3, .product-group-features h3, .product-table-specs h3 {font-size: 16px; font-style: italic; margin-bottom: 5px; color: white;}
.product-table-specs h4 {font-size: 15px;}
.product-table-specs table {background: url(/images/common/50_black_trans.png); border: 1px solid #666; font-size: 16px; text-align: center; width: 100%;}
.product-table-specs table td {padding: 3px; border: 1px solid #666;}
.product-table-specs table td:first-child {width: 150px;}
.prod-rowtable-specs {margin-top: 15px;}
.specs-column ul {list-style: none; margin: 5px 10px;}
.specs-column ul li {text-indent: -4px; margin: 0 0 0.25em; font-size: 0.75em; color: white;}
.specs-column ul li:before {content: "-"; position: relative; left: -5px;}
.rotate360 {background: url("images/thumb360.png") no-repeat; display: block; width: 58px; height: 58px; color: transparent; font-size: 0; line-height: 0;}
.rotate360:hover {background-position: 0 -58px;}
.new-slick-btn {-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; font-family: Arial;color: #ffffff;font-size: 20px;background: #dfb36f;padding: 15px 20px 15px 20px;text-decoration: none;width: unset;height: unset; margin-top: 3em;}
main .centering {display: block;margin-left: auto;margin-right: auto; margin-top: 5em;}
main .gallery-imgs {padding: 0 .5em;}

main .bg2 {background: url('z390_main_image_bg.png') center fixed; background-size: cover;}
main .bg1 {background: url('z390_gallery_bg.png') center fixed; background-size: cover;}
main .bg3 {background: url('main/bg3.png') center fixed; background-size: cover;}
main .slick-img-border {border: solid;}
main sup {vertical-align: super; font-size: 70%;}