body { font-family: Lato; margin: 0 } .dbm-container, .gaming-theme-dbm { padding-bottom: 90px } .dlp-better-merch { position: relative; } .dbm .hero_text { position: absolute; top: 0; left: 0 } .dbm .dlp_hero_savings_headline { font-weight: 600 } .gaming-theme-dbm { background-color: #000 } .gaming-theme-dbm .hero-text-texts, .gaming-theme-dbm .dlp_hero_savings_headline { color: white } .gaming-theme-dbm .hero-es-desc p { color: #FFFFFFCC } .gaming-theme-dbm .hero-es-title { background-color: #333f48 } .gaming-theme-dbm .hero-es-desc a { color: #0ff } .cto-gaming .cto-hero-container { background-color: #333f48; color: white } .cto-gaming .cto-hero-desc p { color: #FFFFFFCC } .cto-gaming .slide-nav-dot { background-color: transparent } .cto-gaming .dots-black { background-color: #fff  !important; } .gaming-theme-dbm .hero-es-container-b { scrollbar-width: thin; scrollbar-color: black #333f48; } .gaming-theme-dbm .hero-es-container-b::-webkit-scrollbar { width: 0; height: 5px; } .gaming-theme-dbm .hero-es-container-b::-webkit-scrollbar-track { -webkit-box-shadow: inset 10px 10px 10px black; -webkit-border-radius: 5px; border-radius: 5px; } .gaming-theme-dbm .hero-es-container-b::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; border-radius: 5px; background-color: #333f48; } @media only screen and (max-width: 749px) { .dbm-container { padding-bottom: 50px } .cto-gaming, .cto { padding-bottom: 0 } .gaming-theme-dbm-mobile-no-icon { padding-bottom: 50px  !important } .dbm .hero-banner { background-repeat: no-repeat; background-position: center; background-size: cover; height: 150px; } .dbm .hero_text { width: 100%; text-align: center; padding: 1.5em 0 } .dbm .hero-text-texts, #hero-product-1, #hero-product-2, #hero-processor { display: none } .dbm .dlp_hero_savings_headline { font-size: 20px; } .hero-es-container-b { padding-top: 12px; height: 140px; text-align: left; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; border-spacing: 10px; width: 100%; position: absolute; top: 60px; overflow: auto; overflow-y: hidden } .hero-ea-card-b { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; width: 200px; height: 120px; background: #fff 0% 0% no-repeat padding-box; box-shadow: 0px 3px 12px #00000029; border: 1px solid #CCCCCC00; border-radius: 4px; opacity: 1; flex-shrink: 0; margin-right: 16px } .gaming-theme-dbm .hero-ea-card-b { background: #333f48 0% 0% no-repeat padding-box; box-shadow: 0px 3px 12px #00000029; border: 1px solid #CCCCCC00; border-left: 4px solid #0ff  !important; } .hero-ea-card-b:nth-child(1) { margin-left: 7px; border-left: 4px solid #294e95; } .hero-ea-card-b:nth-child(2) { border-left: 4px solid #285d50; } .hero-ea-card-b:nth-child(3) { border-left: 4px solid #c75300; } .hero-ea-card-b:nth-child(4) { border-left: 4px solid #f04187; } .hero-es-title { position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: -webkit-flex-start; justify-content: -moz-flex-start; justify-content: flex-start; align-items: -webkit-flex-start; align-items: flex-start; padding-left: 16px; height: 20% } .hero-es-title img { height: 26px; margin-top: 5px } .hero-es-desc { color: #555; font-weight: 500; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 80%; padding: 0 8px 0 16px } .gaming-theme-dbm .hero-es-desc { background-color: #333f48 } .hero-es-desc p { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-size: 12px; margin: 1em 0 0 0 } .hero-es-desc a { font-size: 14px; color: #294e95; font-weight: 600; text-decoration: none; margin-bottom: .5em } .mobile-no-icon .hero-ea-card-b { height: 100px } .mobile-no-icon .hero-es-title { display: none } .mobile-no-icon .hero-es-desc { height: 100%; padding: 0 12px } .mobile-no-icon .hero-es-desc p { font-size: 14px; color: black; margin: 0; line-height: 1.5; font-weight: 500 } .gaming-theme-dbm .mobile-no-icon .hero-es-desc p, .gaming-theme-dbm .hero-es-desc p { color: white; } .mobile-no-icon .hero-es-desc a { font-size: 14px; color: #294e95; font-weight: 600; text-decoration: none; vertical-align: middle; } .gaming-theme-dbm .mobile-no-icon .hero-es-desc a { color: #0ff; } .mobile-no-icon .hero-es-desc a:after { content: ""; width: 9px; height: 9px; border: solid #294e95; border-width: 2px 0 0 2px; -webkit-transform: translate(50%, 50%) rotate(135deg); -moz-transform: translate(50%, 50%) rotate(135deg); -ms-transform: translate(50%, 50%) rotate(135deg); -o-transform: translate(50%, 50%) rotate(135deg); transform: translate(50%, 50%) rotate(135deg); position: absolute; } .gaming-theme-dbm .mobile-no-icon .hero-es-desc a:after { content: ""; width: 9px; height: 9px; border: solid #0ff; border-width: 2px 0 0 2px; -webkit-transform: translate(50%, 50%) rotate(135deg); -moz-transform: translate(50%, 50%) rotate(135deg); -ms-transform: translate(50%, 50%) rotate(135deg); -o-transform: translate(50%, 50%) rotate(135deg); transform: translate(50%, 50%) rotate(135deg); position: absolute; } .dbm-moblie-only { display: inline-block; } .dbm-desktop-only { display: none; } .cto-hero-slide { display: none } .slide-nav-dot { cursor: pointer; height: 7px; width: 7px; margin-right: 2px; border-radius: 50%; color: #fff; display: inline-block; text-align: center; border: 1px solid #c4beb6; background-color: #fff } .cto-hero-slide-nav { position: absolute; bottom: 2px; left: -webkit-calc(50% - 28px); left: -moz-calc(50% - 28px); left: calc(50% - 28px); } .dots-black { background-color: #000  !important; } .cto-hero-container { width: 100%; background-color: #f2f2f2; padding: 0 20px; height: 200px; overflow: hidden; } .cto-hero-heading { width: 100%; height: 40px; text-align: center; } .cto-hero-heading h2 { margin: 17px 0 0 0; font-size: 20px } .cto-hero-heading img { height: 24px; position: relative; top: 5px; right: 5px; } .cto-hero-title { float: right; width: 50%; height: 120px; } .cto-hero-title img { height: 100%; padding-left: 18px } .cto-hero-card { text-align: left; width: 100%; height: 180px; } .cto-hero-desc { float: left; width: 50% } .cto .hero-es-container-b { background-color: white; display: flex; border-spacing: 10px; width: 100%; position: relative; top: 0; overflow: auto; overflow-y: hidden; } .cto-gaming .hero-es-container-b { background-color: #16191e; display: flex; border-spacing: 10px; width: 100%; position: relative; top: 0; overflow: auto; overflow-y: hidden; } .cto-hero-desc h3 { font-size: 14px; margin: 0 0 12px 0; } .cto-hero-desc p { font-size: 12px; } } @media only screen and (min-width: 750px) { .dbm .hero-banner { background-repeat: no-repeat; background-size: 100% 100%; height: 110px; } .dbm .hero_text { width: 60%; margin-left: 10%; padding-top: 15px } .dbm .dlp_hero_savings_headline { font-size: 22px; padding-bottom: 15px } .dbm .hero-text-texts { font-size: 13px; line-height: 1.5; font-weight: 500; width: 65% } .hero-products { position: absolute; top: 0; right: 0; width: 40%; height: 100%; text-align: left; } #hero-product-1, #hero-product-2 { display: none; } #hero-processor { display: inline-block; padding-left: 0; position: absolute; top: 25%; left: 25%; height: 45%; } .hero-es-container-b { padding-top: 12px; height: 140px; text-align: center; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; border-spacing: 10px; width: 100%; } .hero-es-container-b:after { content: ""; clear: both; display: block } .hero-ea-card-b { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; width: 180px; height: 180px; background: #fff 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #0000005C; border-radius: 4px; opacity: 1; text-align: center; margin-right: 7px; border-bottom: 6px solid #555; } .gaming-theme-dbm .hero-ea-card-b { background: #1c2126 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #000000CC; border-bottom: 6px solid #0ff  !important; } .hero-ea-card-b:nth-child(1) { border-bottom: 6px solid #294e95; margin-left: 7px } .hero-ea-card-b:nth-child(2) { border-bottom: 6px solid #285d50; } .hero-ea-card-b:nth-child(3) { border-bottom: 6px solid #c75300; } .hero-ea-card-b:nth-child(4) { border-bottom: 6px solid #f04187; } .hero-es-title { background-color: #f2f2f2; position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: -webkit-center; justify-content: -moz-center; justify-content: center; align-items: -webkit-center; align-items: center; height: 80px; } .hero-es-desc { color: #555; font-weight: 500; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; font-size: 15px; width: 100%; height: 100px; } .hero-es-desc p { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-size: 12px; margin: 1em 8px 0 8px } .hero-es-desc a { font-size: 13px; color: #294e95; font-weight: 600; text-decoration: none; text-align: center; margin-bottom: .5em; font-size: 14px; height: 20% } .dbm-desktop-only { display: inline-block; } .dbm-moblie-only { display: none; } .cto-hero-slide-nav { display: none } .cto-hero-container { text-align: center; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; background-color: #f2f2f2; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap; padding: 0 32px; height: 205px; color: black; } .cto-hero-heading { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; width: 100%; height: 50px; text-align: center; position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: -webkit-center; justify-content: -moz-center; justify-content: center; align-items: -webkit-center; align-items: center; } .cto-hero-heading img { height: 100%; position: relative; top: 5px; right: 5px } .cto-hero-title { position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: -webkit-center; justify-content: -moz-center; justify-content: center; align-items: -webkit-center; align-items: center; height: 73px; } .cto-hero-title img { height: 100% } .cto-hero-container>div:nth-child(2n+1)>div:first-child:after { content: ""; position: absolute; width: 58px; bottom: 0; left: -20px; height: 50%; border-top: 2px dashed #707070; z-index: 2; } .cto-hero-container>div:nth-child(3)>div:first-child:before { content: ""; position: absolute; width: 58px; bottom: 0; right: 0; height: 50%; border-top: 2px dashed #707070; z-index: 5; } .cto-hero-card { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: center; width: -webkit-calc(25% - 23px); width: -moz-calc(25% - 23px); width: calc(25% - 23px); height: 180px; } .cto-hero-desc { font-weight: 500; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .cto-hero-desc h3 { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin: 0; font-size: 14px; } .cto-hero-desc p { font-size: 13px; text-decoration: none; text-align: center; margin: 2px 0 0 0; font-size: 12px; height: 32% } .cto .hero-es-container-b { height: 77px; background-color: white; border-bottom: 139px solid #f2f2f2; } .cto-gaming .hero-es-container-b { height: 77px; background-color: #16191e; border-bottom: 139px solid #333f48; border-top: 0  !important } } @media only screen and (min-width: 1280px) { .dbm .hero-banner { background-repeat: no-repeat; background-size: 100% 100%; min-height: 157px; width: 100% } .dbm .hero_text { margin-left: 5%; width: 45%; padding-top: 40px } .dbm .dlp_hero_savings_headline { font-size: 32px; padding-bottom: 20px; } .dbm .hero-text-texts { font-size: 13px; } .hero-products { position: absolute; top: 0; right: 0; width: 50%; text-align: left; } #hero-product-1 { display: inline-block; padding-left: 80px; } #hero-product-2 { display: inline-block; position: relative; top: 30px; } #hero-processor { top: 35%; left: auto; height: auto; } .hero-es-container-b { padding-top: 40px; border-top: 2px solid white; background: #e3e3e3 0% 0% no-repeat padding-box; } .gaming-theme-dbm .hero-es-container-b { border-top: 2px solid #d6d9da; background: #16191e 0% 0% no-repeat padding-box; } .hero-ea-card-b { height: 174px; } .hero-ea-card-b:nth-child(1) { margin-left: 20px } .hero-es-title { height: 50%; } .hero-es-desc { font-size: 13px; width: 100%; height: 50%; } .hero-es-desc p { margin-top: auto; font-size: 14px; } .hero-es-desc a { margin-bottom: .6em; font-size: 14px; } .cto-hero-container { width: 100%; padding: -1px 40px; height: 350px; } .cto-hero-heading img { height: 100%; position: relative; top: 5px; right: 5px } .cto-hero-title { height: 120px; } .cto-hero-container>div:nth-child(2n+1)>div:first-child:after { width: 99px; left: -30px; } .cto-hero-container>div:nth-child(3)>div:first-child:before { width: 99px; } .cto-hero-card { height: 220px; } .cto-hero-desc { margin: 0 1em 0 1em; } .cto-hero-desc h3 { font-size: 18px; } .cto-hero-desc p { font-size: 14px; } .cto .hero-es-container-b, .cto-gaming .hero-es-container-b { padding-top: 20px } } @media only screen and (min-width: 1920px) { .dbm .hero_text { margin-left: 12.5%; width: 37.5%; padding-top: 40px; } .dbm .dlp_hero_savings_headline { font-size: 32px; padding-bottom: 20px; font-weight: 600 } .dbm .hero-text-texts { font-size: 13px; line-height: 1.5; font-weight: 500; width: 65% } #hero-product-1 { padding-left: 140px; } #hero-product-2 { top: 30px; } #hero-processor { padding-left: 30px; display: inline-block; position: absolute; top: 35%; left: 70%; height: 45%; } .hero-ea-card-b { height: 180px; } .hero-es-desc a { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin: 0; line-height: 2 } .hero-es-desc p { margin: 8px; } .hero-ea-card-b { margin: 0 14px; } .cto-hero-container { width: 100%; padding: 0 285px; } .cto-hero-container>div:nth-child(2n+1)>div:first-child:after { width: 170px; left: -60px; } .cto-hero-container>div:nth-child(3)>div:first-child:before { width: 170px; right: -40px } .cto-hero-desc h3 { font-size: 18px; } .cto-hero-desc p { font-size: 14px; } }