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; line-height: 1em;}
main h5 {font-size: 1.25em; font-weight: 200; line-height: 1em;}
main h6 {font-size: 1em; font-weight: 200; line-height: 1em;}
main ul li {font-size: 1rem;}
main p {font-size: 1em; font-weight: 300; margin-bottom: 1em;}
main p:last-child {margin-bottom: 0;}

main q {quotes: "“" "”" "‘" "’";}
main q:before {content: open-quote;}
main q:after {content: close-quote;}

section {font-size: 1.5rem; position: relative;}
.mcontainer {max-width: 1200px; margin: auto; padding: 2em; position: relative;}
.row {padding-bottom: 1em;}
.row:last-child {padding-bottom: 0;}

#navTop {height: 0;}

.blue-text {color: #4bcdfc;}
.dark-blue-bg {background-color: #044696;}
.gold-text {color: #aea57a; font-weight: 600;}

.nav-bg {background: rgba(20, 20, 20, 0.75); border-bottom: 1px solid #555; position: relative; z-index: 999;}
.nav {display: flex; justify-content: center; list-style: none; margin: 0 auto; max-width: 1200px; text-transform: uppercase;}
.nav li {cursor: pointer; margin: 0; padding: 0.5em 1em;}
.nav li.nav-active {color: #aea57a; font-weight: 700;}
.nav li:hover, .nav a:hover {background-color: #333; color: #aea57a;}
.is-sticky .nav-bg {width: 100%;}

.popup-image {display: block; position: relative;}
.popup-image .fa-search {font-size: 2rem; opacity: 0.5; position: absolute; bottom: 5%; right: 5%;}
.popup-image:hover .fa-search {opacity: 0.9;}

.section-header {background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8) 80%), url("header/background.jpg") no-repeat top center; background-size: cover;}
.section-header-block {margin-right: 1em;}
.header-quote {border: 2px solid #aea57a; border-radius: 5px; margin-top: 1em; margin-bottom: 1em; padding: 1em; text-align: center;}

.section-header .row {align-items: flex-end; display: flex;}
.section-header .row > div {flex: 1;}
.header-image-title {display: block; margin-left: auto;}

.section-design {background: #2a2b2f; text-align: center;}
.section-design .mcontainer {max-width: 1050px;}

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

.section-description {background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8) 60%), url("dark-angle-shot-background.jpg") no-repeat center;}
.section-description .mcontainer {max-width: 1400px;}
.section-description-text {margin-left: auto; max-width: 50%; padding-top: 18em; padding-bottom: 2em;}

.section-key-features {background-color: #222; font-size: 1.25rem;}
.section-key-features .row > div {text-align: center;}
.section-key-features h5 {font-weight: 700; margin-top: 1em; margin-bottom: 1em;}
.section-key-features .popup-image {border: 1px solid #aea57a; color: #aea57a;}
.section-key-features .popup-image:hover {color: #aea57a;}

.section-motherboard {background: #000 url("design/background.jpg") no-repeat top center; background-size: cover; counter-reset: section-detail; font-size: 1rem;}
.section-motherboard .mcontainer {max-width: 1400px;}
.section-motherboard-text {font-size: 1.5rem;}
.section-motherboard-textblock h5, .section-motherboard-textblock p {margin-left: 10%;}
.section-motherboard h5 {color: #aea57a; font-weight: 600; margin-top: 1em; position: relative; text-transform: uppercase;}
.section-motherboard h5:first-child {margin-top: 0;}
.section-motherboard h5::before {background-color: #fff; border: 3px solid #aea57a; border-radius: 50%; color: #000; content: counter(section-detail); counter-increment: section-detail; font-weight: 600; padding: 0.25em; position: absolute; left: 0; top: 0; text-align: center; transform: translateX(-2.25em); width: 1em; height: 1em;}
.section-motherboard__sata-coming-soon {float: right; font-size: 0.75rem;}

.section-features {background-color: #222; font-size: 1.25rem; text-align: center;}
.section-features img {border: 1px solid #aea57a; margin-bottom: 0.5em;}
.section-features .row {padding-bottom: 2em;}
.section-features .row:last-child {padding-bottom: 0;}

.section-additional-features {background-color: #2a2b2f; font-size: 1.25rem;}
.section-additional-features__block {align-items: center; background-color: #151513; display: flex; margin-top: 1em; margin-bottom: 1em; overflow: hidden;}
.section-additional-features__block > * {flex: 2;}
.section-additional-features__block .section-additional-features__block__text {flex: 3; margin-left: 2em; margin-right: 2em;}
.section-additional-features__block__text {margin-top: 1em; margin-bottom: 1em;}
.section-additional-features__block h5 {color: #aea57a; font-weight: 600; margin-bottom: 1em; text-transform: uppercase;}

.section-specs .row {align-items: center; display: flex;}
.section-specs .row > * {flex: 1;}
.section-specs__specs {margin-right: 2em;}
.section-specs__specs p {border: 2px solid #aea57a; border-radius: 5px; margin-top: 2em; padding: 1em;}
.product-buttons {display: flex; list-style: none; margin: 0.5em 0;}
.product-buttons a {background-color: #111; color: #fff; display: block; padding: 0.25em 0.5em; text-decoration: none; border: 1px solid #333;}
.product-buttons a:hover {color: #999;}
.product-buttons li {flex: 1; margin: 0.5em 1em 0.5em 0;}
.product-buttons li:last-child {margin-right: 0;}
.product-buttons .statusComingSoon {display: block; padding: 0.25em 0.5em; background-color: #111; border: 1px solid #333;}
.product-images {display: flex; flex-wrap: wrap; list-style: none; margin: 0.25em 0;}
.product-images li {margin: 0.2em;}
.product-images img {max-width: 50px;}

.footer-section {font-size: 1rem;}

@media (max-width: 851px)
{
  section {font-size: 1rem; text-align: center;}
  .mcontainer {padding: 2em 0;}
  .row {margin-left: 0; margin-right: 0;}
  
  .section-header .row, .section-specs .row, .product-buttons {display: block;}
  
  .section-header {background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8) 50%), url("header/background.jpg") no-repeat top center;}
  .section-header .row > div {padding-left: 1em; padding-right: 1em;}
  .section-header-block {margin-right: 0;}
  .header-image {margin-top: 2em;}
  
  .section-description {background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8) 60%), url("dark-angle-shot-background.jpg") no-repeat top left;}
  .section-description-text {margin: auto; max-width: 100%; padding-top: 0; padding-bottom: 0;}
  
  .section-key-features, .section-features, .section-motherboard-text, .section-additional-features {font-size: 1rem;}
  .section-key-features .row > div, .section-features .row > div {margin-bottom: 4em;}
  .section-key-features .row:last-child > div:last-child, .section-features .row:last-child > div:last-child {margin-bottom: 0;}
  
  .section-motherboard-textblock {margin-top: 2em; text-align: left;}
  .section-motherboard-textblock h5, .section-motherboard-textblock p {margin-left: 15%;}
  
  .section-features .row {padding-bottom: 0;}
  
  .section-additional-features__block {display: block; margin: 1em; padding: 1em;}
  .section-additional-features .mcontainer {padding-bottom: 0;}
  .section-additional-features__block .section-additional-features__block__text {margin-left: 0; margin-right: 0;}
  .section-additional-features__block h5 {margin-top: 1em;}
  
  .section-specs .row > div {margin-bottom: 2em; padding-left: 1em; padding-right: 1em;}
  .section-specs__specs {margin-right: 0;}
  
  .product-buttons li {margin-right: 0;}
  .product-images {justify-content: center; margin: 1em 0;}
}