/* aside.pagebreak.title */
aside.pagebreak.hpconvergedinfras {background: url('https://img.cdw.com/content/brands/hp/converged_infrastructure/pagebreak_hp_convergedinfras.jpg'); padding: 50px 90px 0px 80px;}
aside.pagebreak.threedprint {background: url('https://img.cdw.com/content/solutions/images/3d_printing_pagebreak.jpg'); padding: 50px 90px 0px 80px;}


/* overrides to make the "frame" of the page semi-responsive 
#c-container, #g-container, #ca-container, #prem-container {max-width: 1280px; width:100%; min-width: 960px; overflow: hidden;}
table.headerLayoutTbl {width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 10px;}
table.headerLayoutTbl .headerDropMenu {width: 100%;}
table.headerLayoutTbl .headerLogo {padding-right:0px;}
body .footerContainer {margin-top: 50px;}
body #footer {width: 100%; float: none; margin-top: 0px;}
body #footer .bottom_wrapper {margin: 0px; width: 100%; float: none; overflow: hidden;}*/
footer {margin-top: 50px;}


/* breadcrumb */
div.breadCrumbWrapper {font-size: 12px; font-family: Verdana,Geneva,sans-serif; color:#4D4E53; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:0px 10px;} 
div.breadCrumbWrapper a {font-weight: bold; color: #0065a2; text-decoration: none;}
   
/* Global */
main .container { width: auto; }
/*main {margin-left: -120px; margin-right: -120px; margin-top:45px; font-family: 'Prelo-Medium', arial, sans-serif; font-size: 18px; color: #616265; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0px 10px;} 
  main.less_than_IE10 {margin-left: 0px; margin-right: 0px;}*/
main a {text-decoration: none;}
main p {margin-bottom:10px;}
main h1, main h2, main h3, main h4 {font-weight: normal;}
main img {width: 100%;}
main > * {margin-bottom: 80px;}
main > *:last-child {margin-bottom: 0px;}
main .column {float: left; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
main .column.right {float: right;}
main .two_column.column_right_wide .column.left {width:32%; padding-right: 30px;}
main .two_column.column_right_wide .column.right {width:68%;}
main .two_column.column_even .column.left, main .two_column.column_even .column.right {width: 50%;}
main .two_column.column_even .column.left {padding-right: 30px;}
main .two_column.column_even .column.right {padding-left: 30px;}
main .three_column .column {width: 33%;}

/* Colors */
section#hero h1, aside h1, article h1 {color:#004a8e;} /* dark blue */
main h2 {color:#616265;} /* medium gray */
main a:active, main a:link, main a:visited {color:#0070bc;} /* other blue, pretty dark */
.right a:active, .right a:link, .right a:visited {color:#0070bc !important;} /* overriding the Global style sheet */
main aside.quote p {color:#004a8e; font-family: 'Prelo-Bold', arial, sans-serif; font-size:24px; line-height:30px;}
main aside.quote .source {font-size:14px; line-height:14px;}
/* Colors: orange_scheme */
.orange_scheme section#hero h1, .orange_scheme aside h1, .orange_scheme article h1, main.orange_scheme aside.quote p  {color:#ea7125;} /* orange */
/* Colors: red_scheme */
.red_scheme section#hero h1, .red_scheme aside h1, .red_scheme article h1, main.red_scheme aside.quote p  {color:#cc0000;} /* red */
/* Colors: gray_scheme */
.gray_scheme section#hero h1, .gray_scheme aside h1, .gray_scheme article h1, main.gray_scheme aside.quote p  {color:#afafaf;} /* gray */
/* Colors: yellow_scheme */
.yellow_scheme section#hero h1, .yellow_scheme aside h1, .yellow_scheme article h1, main.yellow_scheme aside.quote p  {color:#ffb414;} /* gray */

/* icon font */
@font-face {
  font-family: 'cdw-icons';
  src: url('/content/industries/financial-services/css/webfonts/cdw-icons.eot');
  src: url('/content/industries/financial-services/css/webfonts/cdw-icons.eot?#iefix') format('embedded-opentype'), url('/content/industries/financial-services/css/webfonts/cdw-icons.ttf') format('truetype'), url('/content/industries/financial-services/css/webfonts/cdw-icons.svg#cdw-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {font-family: 'cdw-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #Afafaf; }
.icon-play:before {content: "\e605"; margin-right: 7px; font-size: 22px; float: left; } 

.icon-credit-union:before {         content: "\e600"; }
.icon-capital-market:before {       content: "\e601"; }
.icon-bank:before {                 content: "\e602"; } 
.icon-financial-service:before {    content: "\e603"; }
.icon-text:before {                 content: "\e604"; }
.icon-image:before {                content: "\e606"; }
.icon-pdf:before {                  content: "\e607"; }
.icon-cdw{                          margin-right: -30px; margin-top:-5px; font-size: 30px;}
.link-with-icon{                    display: inline-block; margin-left: 40px;}

/* Hero */
#hero h1, aside h1, article h1, article h3 {font-family: 'Prelo-Bold';} 
#hero h1 {font-size: 40px; line-height:46px;}
#hero h2 {line-height: 1.3; margin-bottom: 20px;}
#hero h2, main aside h1 {font-size: 30px;}

/* Hero.top_hero_image */
#hero.top_hero_image > div.column.left {width: 32%;}
#hero.top_hero_image > div.right.featured {width: 68%; margin-bottom: 30px;}
#hero.top_hero_image > div.column.left2 {width: 64%;}
#hero.top_hero_image > div.right.featured2 {width: 36% !important; margin-bottom: 30px; float:right; }
#hero.top_hero_image article img.featured {margin-top: 30px;}

/* Hero.left_hero_image */
main #hero.left_hero_image header {background:url("https://img.cdw.com/content/testing/amanda_olsen/assets/logo_HP.jpg") no-repeat 20px 10px; padding-left: 130px;}
main #hero.left_hero_image p.introduction {margin-bottom: 30px; font-family:'Prelo-Bold', arial, sans-serif;}
main #hero.left_hero_image p + img.featured {margin-top: 20px;}

/* Countdown */
div.countdown {background-color: #004a8e; padding: 10px; overflow: hidden; width: 75%; color: #fff; font-family: 'Prelo-Bold'; text-transform: uppercase; text-align: center;}
#soldOut, #dealExpired {display:none;}
div.expairyDate {width: 50%; margin-right: 3%; border-right:1px solid #fff; float: left; font-size: 14px;}
div.expairyDate .date {font-size: 22px;}
div#countdown {width: 46%; float: left; font-size: 14px; line-height: 1;}
div.expairyDate .date {text-transform: none;}
div.countdown span.countdown_section {display: block; float: left; width: 50%;}
div.countdown span.countdown_amount {font-size: 35px;}
/* .orange_scheme Countdown */
.orange_scheme div.countdown {background-color: #ea7125;}
/* .red_scheme Countdown */
.red_scheme div.countdown {background-color: #cc0000;}
/* .gray_scheme Countdown */
.gray_scheme div.countdown {background-color: #afafaf;}

/* article */
article {overflow: hidden; clear:both; margin-top: 30px;}
article h1 {font-size: 30px;}
article h2 {font-size: 26px;}
article h3 {font-size:18px;}
article.primary div {padding-right: 20px;} 
article div.introduction {font-size: 20px; line-height: 22px; font-family:'Prelo-Bold', arial, sans-serif;}
article p.featured {margin:20px 0 30px;}
article li {margin-bottom: 10px;}
article a.featured {display: block;}
article img.featured {width: 100%;}

/* article#generic_article */
#generic_article h2 {margin-bottom: 30px;}

/* quote */
main aside.quote p {margin-top:20px; margin-bottom: 5px; font-size: font-size:30px;}

/* aside */
main aside a.CTA {display: block;}
main aside a.CTA:active, main aside a.CTA:link, main aside a.CTA:visited {color:#0070BC !important; margin-top: 10px;}
	/* using important because must override Global stylesheet */

/* aside.media_library */
main aside.media_library h2 {font-size: 22px; margin-bottom: 10px;}
main .media_library div.column.left {width:25%;}
main .media_library div.column.right {width:73%;}
main .media_library:after {content: ""; display: block;clear: both;}

/* aside.grid */
div.grid > div {float:left; margin-right: 25px; margin-bottom: 17px; width: 192px; height: 108px; color: #fff; 
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div.grid > div a:link, div.grid > div a:active, div.grid > div a:visited {color: #fff !important; display: inline-block; height: 100%;} /* must use !important because a Global stylesheet does and we have to override it */
div.grid > div a:link:hover {text-decoration: none;}
div.grid > div.featured {width: 415px; height: 232px; margin-right: 19px;}
div.grid > div.asset {padding: 10px; text-transform: uppercase; position: relative; transition: background-color 1s ease;} 
div.grid > div.asset.odd {background-color: #5bb4e5;}
div.grid > div.asset.odd:hover {background-color: #013c5f;}
div.grid > div.asset.even {background-color: #0065a2;}
div.grid > div.asset.even:hover {background-color: #034872;}
main aside div.grid h2 {font-family: 'Prelo-Bold'; font-size:16px; height: 100%;}
div.grid > div.row_end:after {content:""; display: block; clear: both;}
/* .orange_scheme aside.grid */
.orange_scheme div.grid > div.asset.odd {background-color: #ea7125;}
.orange_scheme div.grid > div.asset.odd:hover {background-color: #c15e1f;}
.orange_scheme div.grid > div.asset.even {background-color: #c05017;}
.orange_scheme div.grid > div.asset.even:hover {background-color: #8f3c12;}
/* .red_scheme aside.grid */
.red_scheme div.grid > div.asset.odd {background-color: #cc0000;}
.red_scheme div.grid > div.asset.odd:hover {background-color: #990000;}
.red_scheme div.grid > div.asset.even {background-color: #7d0300;}
.red_scheme div.grid > div.asset.even:hover {background-color: #4a0100;}
/* .gray_scheme aside.grid */
.gray_scheme div.grid > div.asset.odd {background-color: #afafaf;}
.gray_scheme div.grid > div.asset.odd:hover {background-color: #7d7d7d;}
.gray_scheme div.grid > div.asset.even {background-color: #616265;}
.gray_scheme div.grid > div.asset.even:hover {background-color: #313133;}

/* aside.pagebreak */
aside.pagebreak img {width: auto;}
aside.pagebreak {/*width: 1180px;*/ position: relative; height: 214px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px 40px;} 
aside.pagebreak:after {content: ""; display: block;clear: both;}
aside.pagebreak span {position: absolute; background-color: #fff; border-radius: 182px; top: -72px; left: -366px; width: 413px; height: 351px; z-index: 1000;}
aside.pagebreak span.right {right: -366px; left: auto;}

/* aside.pagebreak.stats */
aside.pagebreak.stats {background:#5bb4e5;}
aside.pagebreak.stats div {text-align: center; color: #fff; font-family: 'Prelo-SemiBold';}
aside.pagebreak.stats p {padding: 15px 50px;}
aside.pagebreak.stats p.source {font-size: 10px; margin-top: -20px;}

/* aside.pagebreak.EDC */
aside.EDC {margin-bottom: 20px;}
aside.EDC:after {content: ""; display: block; clear: both;}
aside.EDC .products img {width:auto;}
aside.EDC ul.products:after {content: ""; display: block; clear: both;}
aside.EDC ul.products {list-style: none; padding-left: 0px;}
aside.EDC ul.products li {float: left; width: 33%; margin-bottom: 60px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0px 20px;}
aside.EDC ul.products li img.brand {display: block; margin-bottom: 30px;}
aside.EDC ul.products li img.product {display: block; margin: 0 auto; margin-bottom: 30px;}
aside.EDC ul.products li a {display: block;}
aside.EDC .right ul.products li a:link, aside.EDC .right ul.products li a:active, aside.EDC .right ul.products li a:visited {color:#0070BC !important;}
aside ul.products img.brand {height: 25px;}
aside ul.products img.brand_LongRectangle {height: 25px;}

/* aside.pagebreak.switch */
aside.pagebreak.switch {background: url('https://img.cdw.com/content/brands/xerox/xerox_pagebreak_doublevision3.jpg'); padding: 50px 90px 0px 80px;}
aside.pagebreak.switch h1 {font-size: 56px; font-family: 'Prelo-Black'; color: #fff; text-transform: uppercase; line-height: 1;}

/* back to top */
#backToTop {background: url(https://img.cdw.com/assets/icons/back-to-top.gif) 22px 12px no-repeat #cecdd7; text-align: center; text-indent: -999999px; width: 80px; height: 55px; position: fixed; bottom: 200px; right: 0; cursor: pointer; display: none; z-index: 1001;}

table.headerLayoutTbl .headerTabs {width: 590px;}
body .searchBarWrapper {width: 460px;}
body .searchBarWrapper .searchBar {width:744px;}
body .searchBarWrapper .searchBar .keywordInput {width:545px;}
/* width of drop-down from search field */
table.headerLayoutTbl .ui-autocomplete {width:536px; left: -116px !important;}

main {margin:45px 0px 0px;}
    
/* drop-down menu from search field - set the slider to the far right */
#content-slider-0, #content-slider-1, #content-slider-2, #content-slider-3 {float: right; margin-right: 10px;}

/* footer */
body #footer .primary .main > div.how_we_do_it, body #footer .primary .main > div.mobile {position: static;} /* overrides the main footer css */
/* footer - mostly intended for IE8 only - modern browsers can overwrite this section as needed in the break points below */
body #footer .primary .main {min-height: inherit;}
body #footer .primary .main > div {width: 15%;}
body #footer .primary .main > div.help {width: 16%;}
body #footer .primary .main > div.shop, body #footer .primary .main > div.mobile {width: 15%;}
body #c-container div.footerContainer #footer .primary {height: 285px;}

/* Break Points: Content area -------------------------------------------------------------------------------------------- */
@media (max-width: 1280px) {
    #c-container {width: 100%;}
    table.headerLayoutTbl .headerTabs {width: 490px;}
    /* width of overall search container */
    body .searchBarWrapper .searchBar {width:644px;}
    body .searchBarWrapper .searchBar .keywordInput {width:445px;}
    /* width of drop-down from search field */
    table.headerLayoutTbl .ui-autocomplete {width:446px; left: -16px !important;}
    table.headerLayoutTbl .scroll-div {width: 430px;}  
    
    main {margin:45px 0px 0px;}
    #hero.top_hero_image > div.column.left {width: 34%;}
    main #hero.two_column.column_right_wide .column.right {width: 66%;}
}

@media (max-width: 1180px) {
    table.headerLayoutTbl .headerTabs {width: 450px;}
    /* width of overall search container */
    body .searchBarWrapper .searchBar {width:564px;}
    body .searchBarWrapper .searchBar .keywordInput {width:365px;}
    /* width of drop-down from search field */
    table.headerLayoutTbl .ui-autocomplete {width:366px; left: 65px !important;}
    
    main {margin:45px 0px 0px;}
    #hero.top_hero_image > div.column.left {width: 40%; margin-bottom: 30px;}
    main #hero.two_column.column_right_wide .column.right {width: 60%;}
    main #hero.left_hero_image .two_column.column_right_wide > div.column.left {width: 34%;}
    main #hero.left_hero_image .column_right_wide > .column.right {width: 66%;}
    aside.pagebreak.switch h1 {font-size: 47px;}
}

@media (max-width: 1080px) { /* site is supposed designed for 960, but it's really 980 */
    table.headerLayoutTbl .headerTabs {width: 390px;}
    table.headerLayoutTbl .ui-autocomplete {width:276px; left: 155px !important;}
    /* width of overall search container */
    body .searchBarWrapper .searchBar {width:464px;}
    body .searchBarWrapper .searchBar .keywordInput {width:265px;}

    main {margin:45px 0px 0px;}
    aside.pagebreak.stats p {padding: 15px 40px;}
}

/* Break Points: Footer -------------------------------------------------------------------------------------------- */
@media (min-width:1270px) {
    body #footer .primary .main > div {width: 17%;}
}
@media (min-width: 1075px) {
    body #c-container div.footerContainer #footer .primary, body #g-container div.footerContainer #footer .primary {height: 285px;}
    body #footer .primary .main {min-height: inherit;}
    body #footer .primary .main > div {width: 16%;}
    body #footer .primary .main > div.help {width: 19%;}
    body #footer .primary .main > div.shop, body #footer .primary .main > div.mobile {width: 12%;}
}
@media (max-width: 1075px) {
    body #c-container div.footerContainer #footer .primary {height: 335px;}
    body #footer .primary .main > div h2 {font-size: 15px;}
    body #footer .primary .main > div {width: 19%;}
    body #footer .primary .main > div.help {width: 19%;}
}