/* These are updated styles implemented to override and (hopefully) not break already existing code */

/* Revision date 6/8/18 */

/*GENERAL STYLES*/
.full-width-grey {
    background-color: #F2F2F2;
    padding: 2rem;
}
/***************************
**
**HOMEPAGE SUBSECTION BANNER
**
****************************/
.homepage-section-split-wrap {
    display: flex;
    height: 250px;
    font-size: 1em;
    background: linear-gradient(to right, #06384F 50%, #262626 50%);
}
a.section-split-item, a.section-split-item:visited, a.section-split-item:active, a.section-split-item:hover {
    color: #0EA6ED;
    text-shadow: 0px 1px 1px rgba(0,0,0,.75);
    transition: background-size 1000ms ease-out, color 250ms ease;
}
a.section-split-item:hover {
    background-size: 1000px 260px;
    color: #FFF;
}
.section-split-item {
    padding: 4rem;
    width: 100%;
    height: 100%;
    background-size: 960px 250px;
    background-repeat: no-repeat;
    display: flex;
}
.section-split-item p {
    font-size: 1.5em;
}
.section-split-item h1 {
    font-size: 3em;
    font-weight: bolder;
    text-transform: uppercase;
}
.section-split-left {
    text-align: right;
    background-position: center right;
}
.section-split-left .section-split-inner {
    margin-top: auto;
    margin-left: auto;
}
.section-split-right .section-split-inner {
    margin-top: auto;
    margin-right: auto;
}
.section-split-right {
    background-position: center left;
}
.section-split-inner {
    margin-top: auto;
}

@media screen and (max-width: 1600px) {
    .section-split-left, .section-split-right {
        background-position: 35% 50%;
    }
}

@media screen and (max-width:1000px) {
    .homepage-section-split-wrap, a.section-split-item {
        display: block;
        height: auto;
    }
    .homepage-section-split-wrap {
        background: linear-gradient(#06384F 50%, #262626 50%);
    }
    .section-split-left {
        background-position: 25% 50%;
    }
    .section-split-right {
        background-position: 75% 50%;
    }
}

@media screen and (max-width:500px) {
    .homepage-section-split-wrap {
        font-size: 0.7em;
    }
}

@media screen and (max-height:770px) {
    .homepage-section-split-wrap {
        font-size: 0.7em;
    }
}



/*depreciated style*/
.homepage-subsection-banner-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.homepage-subsection-banner-wrap a, .homepage-subsection-banner-wrap a:hover, .homepage-subsection-banner-wrap a:visited, .homepage-subsection-banner-wrap a:active {
    color: #fff;
}
.gaming-desktop-laptop-banner, .professional-workstation-banner {
    width: 100%;
    background-repeat: no-repeat;
    background-size: 275px;
    background-position: 95% 35%;
}
.subsection-banner-inner {
    max-width: 620px;
    width: 100%;
    padding: 50px;
    height: 100%;
}
.subsection-banner-inner-left {
/*    float: right;*/
}
.gaming-desktop-laptop-banner {
    background-color: #0A82AF;
    background-image: url(../img/desktops-and-laptops.png);
}
.professional-workstation-banner {
    background-color: #2A2A2A;
    background-image: url(../img/HD80.png);
}

@media screen and (max-width:1110px) {
    .homepage-subsection-banner-wrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .subsection-banner-inner-left {
        float: none;
    }
}

@media screen and (max-width:530px) {
    .gaming-desktop-laptop-banner, .professional-workstation-banner {
        background-size: 150px;
        background-position: 95% 95%;
    }
    .professional-workstation-banner {
        background-position: right 95%;
    }
}
/******************************
**
**CUSTOM PC SUBSECTION BANNERS
**
*******************************/

.custom-gaming-enthusiast-banner, .custom-home-office-banner, .custom-laptop-banner {
    width: 100%;
    background-repeat: no-repeat;
}
.custom-gaming-enthusiast-banner {
    background-color: #0A82AF;
    background-image: url(../img/gx5/GX5-Angle-light.png);
    background-size: 200px;
    background-position: 95% 35%;
}
.custom-home-office-banner {
    background-color: #2A2A2A;
    background-image: url(../img/PC/NX2/nx2-angle-500.png);
    background-size: 250px;
    background-position: 100% 50%;
}
.custom-laptop-banner {
    background-color: #0A82AF;
    background-image: url(../img/gaming-laptop.png);
    background-size: 250px;
    background-position: 95% 35%;
}

@media screen and (max-width:500px) {
.custom-gaming-enthusiast-banner, .custom-home-office-banner, .custom-laptop-banner {
    background-size: 150px;
    background-position: bottom right;
}
}
/***********************
**
**WORKSTATION PCs
**
************************/

.desktop-workstations-banner, .gpu-computing-banner, .mobile-workstations-banner {
    width: 100%;
    background-repeat: no-repeat;
}
.desktop-workstations-banner {
    background-color: #0A82AF;
    background-image: url(../img/PC/GX5-solid/gx5-solid-front-closeup-500.png);
    background-size: 350px;
    background-position: 115% 90%;
}
.gpu-computing-banner {
    background-color: #2A2A2A;
    background-image: url(../img/test_banner/g480.png);
    background-size: 225px;
    background-position: 95% 20%;
}
.mobile-workstations-banner {
    background-color: #0A82AF;
    background-image: url(../img/category-banners/workstations-page-sig15.png);
    background-size: 250px;
    background-position: 104% 55%;;
}

@media screen and (max-width:1300px) {
.desktop-workstations-banner, .gpu-computing-banner, .mobile-workstations-banner {
    background-size: 150px;
    background-position: 95% bottom;
}
}
/**************************
**
** WIZARD STYLES
**
***************************/
.buy-now-buttons {
    border: none;
    color: #FFF;
    font-family: 'roboto', 'arial', sans-serif;
    border-radius: 4px;
    padding: .5em 2em;
    font-size: 1.5em;
    max-width: 300px;
    width: 100%;
    text-transform: uppercase;
}
.buy-now-button-primary {
    background: #3086AB;
}
.buy-now-button-primary:hover {
    background: #063950;
}
.buy-now-button-secondary {
    background: #536a69;
}
.buy-now-button-secondary:hover {
    background: #262626;
}
.buy-now-small {
    font-size: 1em;
    margin-bottom: 1em;
}
.wizdd {
    width: 100%;
}
.wiz-title {
    text-transform: capitalize;
    font-weight: bold;
    color: #2a2a2a;
    margin-bottom: .8em;
}
h1.wiz-title {
    font-size: 2.5em;
}
h2.wiz-title {
    font-size: 1.8em;
    margin-top: 1em;
}
h3.wiz-title {
 margin-top 1em;
}
td a[alt="Details"] {
    display: block;
    float: right;
    position: absolute;
    right: -20px;
    top: 0;
}
.wiz-award {
    padding: .5em;
    background-color: #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.wiz-award-image {
    max-width: 150px;
    margin-right: 2em;
}
.wiz-award-text {
    font-style: italic;
    color: #2a2a2a;
}
.wiz-prefooter-content {
    background: #F2F2F2;
    padding: 4em 0 2em 0;
    overflow: auto;
}
.wiz-prefooter-inner {
    max-width: 1170px;
    margin: 0 auto;
}
.wiz-specialty-parts {
}
.wiz-vm-difference {
}
.vm-difference-awards {
    display: inline-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.vm-difference-awards img {
    max-width: 100%;
}
.wiz-sale-banner {
    text-align: center;
    padding: 2rem 2rem 1rem 2rem;
    background-repeat: no-repeat;
    background-size: cover;
}
.wiz-sale-banner h4, .wiz-sale-banner p {
    color: #fff;
}

@media screen and (max-width:1020px) {
.wiz-prefooter-content .wiz-title {
    margin-top: 1.5em;
}
.wiz-prefooter-content .product-img {
    max-width: 150px;
}
}
/* ******************
 * NAV STYLES
 * ******************/
        /****MAIN NAV****/
        
.main-navigation, .main-navigation * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.main-navigation {
    background: #06384f;
    overflow: visible;
    position: relative;
    z-index: 100;
    height: 69px;
}
.main-navigation a, .main-navigation a:hover, .main-navigation a:active, .main-navigation a:visited {
    text-decoration: none;
    color: #FFF;
    display: block;
}
.main-navigation ul, .main-navigation li {
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
}
.nav-links {
    float: left;
	padding-top:.5em;
}
/****LOGO****/
        
.vm-logo {
    float: left;
    margin-right: 2rem;
    padding: 1em; 
}

.vm-logo img{
	max-width: 200px;
}
/****CART LINKS****/
        
.cart-links {
    float: right;
	padding-top:.6em;
}
.cart-links a {
    display: block;
    float: left;
    padding: 1em;
    -webkit-transition: all 100ms ease;
    transition: all 100ms ease;
    margin: .5rem;
	font-size: .8em;
	text-transform: uppercase;
}
.cart-links a:hover {
    background: #3186ab;
}
/****LVL 1****/
        
.nav-lvl-1 {
    float: left;
    overflow: visible;
    -webkit-transition: all 100ms ease;
    transition: all 100ms ease;
}
.nav-lvl-1 span {
    display: block;
    font-size: .8em;
    font-weight: normal;
}
.nav-lvl-1 li> a {
    font-weight: bold;
    padding: 1em;
    -webkit-transition: all 100ms ease;
	font-size: .8em;
	text-transform: uppercase;
}
.nav-lvl-1:hover {
    -webkit-box-shadow: 0px 5px 50px -15px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 5px 50px -15px rgba(0, 0, 0, 0.5);
    background: #3186ab;
}
/****LVL 2****/
        
.nav-lvl-2 {
    overflow: auto;
    font-size: .9em;
    background: #3186ab;
}
.nav-lvl-2 li> a {
    padding: .5em 1em;
    font-weight: normal;
    width: 300px;
}
.nav-lvl-2 li> a:hover {
    background: #FFF;
    color: #2A2A2A;
    -webkit-box-shadow: inset 4px 0 0 #2A2A2A;
    box-shadow: inset 4px 0 0 #2A2A2A;
}
ul.nav-lvl-2 a.lvl-2-header {
    text-transform: uppercase;
    font-weight: bold;
    margin: 1rem 1rem .5rem 1rem;
}
.lvl-2-header.split {
    border-top: 2px solid #529bbb;
    padding-top: 2em;
}
.nav-lvl-2.wide {
    padding-bottom: .5rem;
}
.nav-lvl-2.wide div {
    overflow: auto;
}
.nav-lvl-2.wide div> li {
    float: left;
    max-width: 300px;
    padding: 0 .5em;
}
ul.nav-lvl-2 {
    display: none;
    position: absolute;
    z-index: 100;
    padding-bottom: .5rem;
}
ul.nav-lvl-1:hover ul.nav-lvl-2 {
    display: block;
}
/****LVL 3****/
        
.lvl-3-header {
/*    text-transform: uppercase;*/
}
ul.nav-lvl-2.wide div li a {
    max-width: 200px;
}
ul.nav-lvl-3 {
    background: #529bbb;
    overflow: auto;
    font-size: .9em;
    display: none;
}
ul.nav-lvl-2.wide div li:hover ul.nav-lvl-3 {
    display: block;
}
.nav-lvl-3 a {
    padding: .7em 1rem;
}
/****MENU BUTTON****/
        
#mobile-menu-button {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: .4em 1em;
    font-size: 1.5em;
}

/* *********************
 * MOBILE STYLES
 * *********************/
        
@media screen and (max-width:1824px) {
ul.nav-lvl-2.wide {
    left: 0;
}
}

@media screen and (max-width:1300px) {
.main-navigation {
    height: auto;
    overflow: visible;
}
ul.nav-lvl-2 {
    position: static;
}
.vm-logo, .nav-links, .nav-lvl-1, .nav-lvl-2.wide div> li, .cart-links, .cart-links a {
    float: none;
    max-width: 100%;
    width: 100%;
}
.nav-lvl-2 li> a, ul.nav-lvl-2.wide, .nav-lvl-2.wide div> li, ul.nav-lvl-2.wide div li a {
    max-width: 100%;
    width: 100%;
}
.cart-links {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 2px solid #1D4D63;
    padding-bottom: 1rem;
}
.cart-links a {
    margin: 0;
}
#mobile-menu-button {
    display: block;
}
.nav-links, .cart-links {
    display: none;
}
.nav-item-opened {
    display: block !important;
}
}
/***********************
**
** PROCESSOR LOGOS 
**
************************/
span[data-processor="intel"]:after {
    content: url('https://www.velocitymicro.com/img/intel-logo-25.png');
}
span[data-processor="amd"]:after {
    content: url('https://www.velocitymicro.com/img/amd-logo-25.png');
}
span[data-processor="both"]:after {
    content: url('https://www.velocitymicro.com/img/intel-amd-logo-25.png');
}
span[data-processor="intel"]:after, span[data-processor="amd"]:after, span[data-processor="both"]:after {
    max-width: 30px;
    margin-left: 15px;
    position: relative;
    bottom: -5px;
}
span[data-processor="intel"], span[data-processor="amd"] {
}
span[data-processor="both"] {
}

/***********************
** Customer testimonials
************************/
.testimonial-wrapper{
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
				grid-gap:4rem;
			}
			.testimonial-card{
			}
			.testimonial-card img{
				max-width: 100%;
				width: 100%;
				max-height: 200px;
				object-fit: cover;
				background-color: #f2f2f2;
				margin-bottom: 2rem;
				border-radius: 3px;
			}
			.testimonial-card h4{
				font-weight: bold;
			}
			.testimonial-card a{
				color: #eee;
				background-color: #3086ab;
				padding: .5em 1em;
				border-radius: 3px;
				line-height: 2.5;
			}
			.testimonial-card a:hover{
				color: #fff;
				background-color: #063950;
			}