@charset "utf-8";
/* CSS Document */

html, body {margin: 0px; background: #f2f2f2;}
body {font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400; color: #616161; word-break: keep-all; line-height: 26px;}
iframe.carouselSelected {border: none; width: 473px !important; height: 266px !important; margin: 0; padding: 0;}
.mainheader {background: #161616; height: 112px; position: relative; width: 100%; border-top: solid 5px #f1343f;}
.container {width: 1100px; margin: 0 auto;}
.logo {max-width: 35%; float: left;}
.logo a img {margin-top: 20px;}
.navigation {margin-top: 15px; float: right; max-width: 73%;}
span.phone {float: right; margin-right: 2.5em; font-size: 15px; font-weight: 700;}
span.phone a:before {content:"\f095"; display: block; float: left; font-family: "FontAwesome"; margin-right: 0.5em;}
span.phone a {color: #f1343f;}
span.account {float: right;}
a {color: #f1343f; text-decoration: none;}
a:hover {color: #f1343f; text-decoration: underline;}
.navigation ul li {display: inline-block; margin-right: 2.3em; position: relative; vertical-align: middle;}
.topnav ul li:last-child {margin-right: 0px;}
.navigation ul li a {font-size: 15px; color: #616161; font-weight: 700;}
.navigation ul li a:hover {color: #f1343f; text-decoration: none;}
.mainnav a {font-size: 15px; color: #616161; font-weight: 700;}
.topnav {text-align: right; float: right;}
.mainnav {text-align: right;/*float: right;*/ margin-bottom: 5px;}
a.button {background: #f1343f; color: #fff !important; padding: 10px 20px; border-radius: 50px; }
a.button:hover {background: #161616;}
span.currencytype { font-size: xx-small; }

h1 {font-size: 42px; font-weight: 400;}
h2 {font-size: 28px; font-weight: 400;}
div#Description.tabcontent h3 {color: #f1343f;}
.lt {float: left;}
.rt {float: right;}
.clr {clear: both;}
ul {line-height: 30px;}


div.breadcrumb2 {text-align: left; margin-top: -25px; margin-bottom: 40px; text-transform: uppercase;}
.shopheader {float: left; background: #f1343f; width: 100%;}
.shopheader1 {
    float: left;
    background: #f1343f;
    width: 50%;
    line-height: 10px;
    margin-bottom: 20px;
}

.leftnav {font-size: 15px; color: #fff; width: 60%; float: left;}
.leftnav ul {padding-left: 0px; margin: 10px 0px;}
.leftnav ul li {display: inline-block; margin-right: 2.3em; position: relative; vertical-align: middle;}
.leftnav ul li a {font-weight: 500; color: #fff; display: inline-block;}
.rightnav {font-size: 15px; color: #fff; width: 40%; float: right;}
.navtext {text-align: right; margin-top: 13px;}
.navtext a {color: #fff;}
.navtext img {vertical-align: top; margin-left: 8px;}

.cta {width: 100%; background:url(images/cta-bg.jpg); padding: 40px 0px;}
.cta h1 {color: #fff; font-size: 45px; font-weight: 500;}
.cta h2 {color: #fff; font-size: 32px;}
.price {font-size: 40px; font-weight: 500; color: #fff; margin-bottom: 25px; margin-top: 15px;}
span.month {font-size: 30px;}

.bluetextbar {float: left;background: #f1343f; color: #fff; font-size: 24px; width: 100%; text-align: center; padding: 20px 0px;}
.bluetextbar a {color: #fff; text-decoration: underline;}

.bluetextbar2 {float: left;background: #f1343f; color: #fff; font-size: 20px; width: 100%; text-align: center; padding: 5px 0px;}
.bluetextbar2 a {color: #fff; text-decoration: underline;}
.bluetextbar3 {
    float: left;
    background: #f1343f;
    color: #fff;
    font-size: 15px;
    width: 100%;
    text-align: center;
    padding: 10px 10px 10px 0px;
    height: 35px;

}

.mainsection {float: left; width: 100%; padding: 60px 0px 80px 0px;}
.radios {width: 30%; float: left; margin-right: 5%; margin-bottom: 24px; height: 598px;}
.radios:nth-child(3n) {margin-right: 0;}

/*.radios:last-child {margin-top: 20px; margin-right: 0px;}*/
.radios2 {width: 30%; float: left; margin-right: 5%; margin-bottom: 24px;}
/*.radios:last-child {margin-right: 0px;}*/

.radios2:last-child {margin-top: 0px;}

div.radiotitle {display: block; color: #f1343f; font-size: 20px; font-weight: 500; margin-bottom: 10px;}
span.modelnumber {display: block; font-weight: 500;}
span.pricing {color:  #f1343f; display: inline-block; font-weight: 500; font-size: 24px;}
span.msrp {display: inline-block; font-size: 18px;}
span.save {color: #ed1c24; font-weight: 500; text-transform: uppercase;}

.button {width: 100%; background-color: #f1343f; color: #fff !important; border-radius: 8px; text-align: center; padding: 12px 0px 12px; font-size: 18px; font-weight: 500; margin-top: 20px; }
.button:hover {background-color: #d9242e;}
a.button2:hover {text-decoration: none;}
.radios img {text-align: center;}
.radios ul {list-style:url(images/check.png) outside; margin-top: 15px; margin-bottom: 25px; padding-left: 20px;}

.radios2 img {text-align: center;}
.radios2 ul {list-style:url(images/check.png) outside; margin-top: 15px; margin-bottom: 25px; padding-left: 20px;}

.linksection {float: left; background-image:url(images/plankbggrey.png); width: 100%; padding: 60px 0px 80px 0px;}
.linksection .radios {text-align: center;}
.button2 {width: 100%; background-color: #f1343f; color: #fff; border-radius: 8px; text-align: center; padding: 12px 0px 12px; font-size: 22px; font-weight: 400; margin-top: 15px; cursor: pointer;}
.button2:hover {background-color: #d9242e;}

/* CSS */
.button-3 {
    appearance: none;
    background-color: #fff;
    border: 1px solid #f1343f;
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    padding: 6px 16px;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
}

    .button-3:hover {
        background-color: #fff;
    }



/*.button3 {
    width: 100%;
    background-color: #fff;
    color: #f1343f;
    border-radius: 50px;
    border: solid 2px #f1343f;
    text-align: center;
    padding: 12px 10px 12px;
    font-size: 16px;
    font-weight: 400;
    margin-top: 15px;
    cursor: pointer;
}

    .button3:hover {
        background-color: #d9242e;
    }*/

.linksection .radios2 {text-align: center;}

div.topnav ul li a.button {width: 100%; background-color: #f1343f; color: #fff !important; border-radius: 8px; text-align: center; padding: 12px 20px 12px; font-size: 15px; font-weight: 500; margin-top: 20px;}
div.topnav ul li.button:hover {background-color: #161616;}




.wallofsound {float: left; background:rgb(18, 67, 99); width: 100%; padding: 60px 0px 80px 0px;}
.wallofsound h1 {color: #fff;}
.wallofsound h2 {color: #fff;}

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
	transform-style: preserve-3d;
}
	/*  UPDATED! flip the pane when hovered */
	.flip-container:hover .back {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front {
	    transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 173px;
	height: 110px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
	z-index: 2;
	transform: rotateY(0deg);
background: #161616; height: 75px; border-radius: 10px; padding: 19px; text-align: center; margin-right: -20px;
}

/* back, initially hidden pane */
.back {
	transform: rotateY(-180deg);
background: #161616; height: 75px; border-radius: 10px; padding: 19px; text-align: center; margin-right: -20px; color: #fff;
}

/* 
	Some vertical flip updates 
*/
.vertical.flip-container { 
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container:hover .back {
	    transform: rotateX(0deg);
	}

	.vertical.flip-container:hover .front {
	    transform: rotateX(180deg);
	}

.back h2 {color: #fff; font-size: 16px; margin-top: 4px;}

.chanflip {float: left; height: 90px; width: 205px; margin-right: 15px; margin-bottom: 32px; cursor: pointer !important;} 
.chanflip img {width: 150px;}

a.tablinks.green {background-color:rgba(122, 193, 67, .35) !important; color: #fff !important;}
a.tablinks.ltblue {background-color:rgba(0, 174, 239, .35) !important; color: #fff !important;}
a.tablinks.orange {background-color:rgba(247, 148, 30, .35) !important; color: #fff !important;}
a.tablinks.purple {background-color:rgba(129, 41, 144, .35) !important; color: #fff !important;} 


div.wallofsound ul.tab li a.tablinks.green:hover {background-color: #7ac143 !important; color: #fff !important;}
div.wallofsound ul.tab li a.tablinks.ltblue:hover {background-color: #f1343f !important; color: #fff !important;}
div.wallofsound ul.tab li a.tablinks.orange:hover {background-color: #f1343f !important; color: #fff !important;}
div.wallofsound ul.tab li a.tablinks.purple:hover {background-color: #812990 !important; color: #fff !important;}

div.wallofsound ul.tab li a.tablinks.green.active {background-color: #7ac143 !important; color: #fff !important;}
div.wallofsound ul.tab li a.tablinks.ltblue.active {background-color: #f1343f !important; color: #fff !important;}
div.wallofsound ul.tab li a.tablinks.orange.active {background-color: #f1343f !important; color: #fff !important;}
div.wallofsound ul.tab li a.tablinks.purple.active {background-color: #812990 !important; color: #fff !important;}
 

/* Style the list */
div.wallofsound ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

div.wallofsound ul {list-style: none !important;}

/* Float the list items side by side */
div.wallofsound ul.tab li {float: left; margin: 0px 15px 20px 0px !important}

/* Style the links inside the list items */
div.wallofsound ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
	border-radius: 50px;
	border: solid 2px #fff;
	font-weight: 700;
	text-transform: uppercase;
}

/* Style the tab content */
div.wallofsound .tabcontent {
    display: none;
}

div.wallofsound ul.tab li a:focus, .active {}

.play {background: transparent; cursor: pointer; width: 32px; height: 32px; border: none; position: relative;}
.play img {width: 32px; height: 32px;}
.play:focus {outline: none !important;}

div.channellink {text-align: center; width: 100%; margin-top: 20px;}

.footer {float: left; width: 100%; padding: 60px 0px 80px 0px; background: #161616;}
.contactleft {float: left; width: 40%}
.contactright {float: right; width: 51%;}

div.service-icon {width: 50px; margin-right: 10px; float: left;}
div.service-icon2 {float: left; padding-bottom: 35px;}
div.service-icon2:last-child {padding-bottom: 0px;}
div.questions {margin-top: -25px;}

.bottomfooter {float: left; width: 100%; padding: 30px 0px; background: #131313;}
div.footer-sections {border-left: 1px solid #e5e5e5; padding: 0 0 0 12px; width: 15.5%; margin-right: 4%; float: left;}
div.footer-sections2 {border-left: 1px solid #e5e5e5; padding: 0 0 0 12px; width: 15.5%;float: left;}
div.footer-sections3 {width: 16.5%; margin-right: 4%; float: left;}
div.footer-content {font-family:arial, helvetica, sans-serif; text-align: center;}
div.footer-sections h2 {color: #fff; margin-top: 0px; font-weight: 700; text-rendering: optimizeLegibility; font-size: 14px;}
div.footer-sections2 h2 {color: #fff; margin-top: 0px; font-weight: 700; text-rendering: optimizeLegibility; font-size: 14px;}
div.footer-sections a, div.footer-sections2 a {color: #fff; font-size: 12px; line-height: 26px; display: block;}

.bottom-bar {float: left; width: 100%; /*padding: 0px 0px 30px 0px;*/ background: #f1343f;}
.site-info {color: #fff; font-size: 14px; /*float: left; width: 40%;*/ text-align: center; padding: 14px;}
.site-info a {color: #fff;}
.bottom-bar-menu {text-align: right; color: #4896d0; float: right; width: 40%;}
.bottom-bar-menu a {color: #4896d0; font-size: 14px;}

.ctaproduct {float: left; width: 100%; background:url(images/product-bg.jpg); padding: 40px 0px 60px;}
.ctaproduct h1 {color: #fff; font-size: 50px; font-weight: 500;}
.ctaproduct h2 {color: #fff; font-size: 30px; line-height: 34px;}
.ctaproduct ul {color: #fff; font-size: 20px; line-height: 35px; list-style:url('images/bull_right.png') outside; padding-left: 0px; margin-left: 22px; margin-top: 15px; margin-bottom: 25px;}
.productbutton {width: 65%;}
.productbutton .button {font-size: 25px; padding: 15px 0px;}

.productbutton2 {width: 100%;}
.productbutton2 .button {font-size: 25px; padding: 15px 0px;}

img.productimg {margin-right: 30px; width: 133px; margin-top: 20px;}
img.productimg:last-child {margin-right: 0px;}

.producttext {width: 55%; float: left;}
.producttext2 {width: 45%; float: right;}
.producttext2 img {float: right;}

.column {width: 48%; border-right: solid 1px #a1a1a1; padding-right: 45px; float: left;}
.column2 {width: 43%;}

.heading {width: 60%; float: left;}
.crumbs {text-align: right; width: 40%; float: right;}

/* Style the list */
ul.tabspecs {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tabspecs li {float: left;}

/* Style the links inside the list items */
ul.tabspecs li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 16px;
	font-weight: 500;
}

/* Change background color of links on hover */
ul.tabspecs li a:hover {background-color: #ddd; color: #616161 !important;}

/* Create an active/current tablink class */
ul.tabspecs li a:focus, .active {background-color: #f1343f; color: #fff !important;}

/* Style the tab content */
.tabspecscontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
sup {position: absolute;}
.text-description img {width: 30px; margin-left: -50px; position: absolute; }
div.pricing {margin: 0 auto;}
div.pricetitle {width: 50%; font-size: 21px; float: left;line-height: 32px; margin: 30px 0px;}
div.pricetitle2 {width: 25%; float:right; font-size: 21px; font-weight: 700; margin: 30px 0px;line-height: 32px;}

.crumbs ul li {display: inline;}
.crumbs ul li::after {content: "\f0da"; padding: 0px 10px; font-family: "FontAwesome"}
.crumbs ul li:last-child::after {content: none;}

table.compare {text-align: center; border: 1px solid #eaeaeb; margin: 0 0 1.78571em; width: 100%; border-collapse: collapse; border-spacing: 0;}
table.compare th, table.compare td {border: 1px solid #dcdcdc; padding: 0.75em;}
table.compare h2 {font-size: 24px; margin: 10px 0px;}


/* BEGIN shopping cart page */
.cartitem {float: left; border: 2px solid #f1343f; border-radius: 8px; width: 100%; margin-bottom: 25px;}
.cartimage {float:left; text-align:center; width: 130px; padding: 20px 30px; margin-right: 20px;}
.cartproductinfo {float:right; width: 36%; margin-right: 3%;}
.cartproductinfo2 {float:left; width: 36%}
.cartproductinfo3 {float:left; width: 28%; margin-right: 3%;}
.cartproductinfo4 {float:left; width: 65%; }
.cartproductinfo4 .newlocationcontain {float: left; width: 100%;}
.cartproductinfo4 .newlocationcontain .newlocation select {width: 102%;}
.cartproductinfo4 .newlocationcontain .newlocation2 select {width: 102%;}
.cartprice {float:left; text-align:center; padding-top: 32px; width: 12.5%;}
.cartqty {float:left; text-align:center; padding-top: 18px; width: 12.5%;}

.cartqty input {width: 55px; text-align:center; padding-left: 17px;}
.cartextprice {float:left; text-align:center; padding-top: 32px; width: 12.5%; font-weight: bold;}
.cartsubtotal {text-align:right; font-size: 21px; font-weight:bold; margin-bottom: 16px;}
.rightalign {text-align:right;}
.buttoncontainer .button {width: 30%; float: left; margin: 0px 110px;}
.cartRadioLabel {background-color: #fff; display: inline-block; width: 155px; border: 2px solid #f1343f; border-radius: 8px; text-align:center; color: #f1343f; user-select:none; line-height: 24px; padding: 15px 20px;}
.cartRadioLabel:hover {cursor:pointer; background-color:rgb(241 52 63 / 2%)}
.cartRadioLabelCF {display: inline-block; vertical-align: top; width: 155px; border: 2px solid #f1343f; border-radius: 8px; text-align:center; color: #f1343f; background-color: white; user-select:none; line-height: 24px; padding: 27px 0px;}
.cartRadioLabelCF:hover {cursor:pointer;background-color:#E0F0FF;}
.cartRadioButton {display: none;}
.cartRadioButton:checked + label {background-color: #f1343f; color: white; border: 2px solid #f1343f;}
td.cartWarrantyContainer {padding:0 !important;}
/*.cartWarrantyLabel {display: inline-block; width: 266px; border: 2px solid #f1343f; border-radius: 50px; text-align:center; color: #f1343f; background-color: white; user-select:none; line-height: 24px; padding: 15px 0px;}*/
.cartWarrantyLabel:hover {cursor:pointer;background-color:rgba(241,52,63,.1);}
.cartWarrantyLabel1 {display: inline-block; width: 318px; border: 2px solid #f1343f; border-radius: 8px; text-align:center; color: #f1343f; user-select:none; line-height: 24px; padding: 15px 0px;}
.cartWarrantyLabel2 {background-color: #fff; display: inline-block; width: 155px; border: 2px solid #f1343f; border-radius: 8px; text-align:center; color: #f1343f; user-select:none; line-height: 24px; padding: 15px 0px;}
td.cartWarrantyIcon {width:35px; text-align: center; vertical-align: top;}
td.cartWarrantyIcon div img {width: auto; height: auto;}
/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The actual popup (appears on top) */
.popuptext {
    cursor: pointer;
    width: 100%;
    height: 545px;
    top: 220px;
    position: absolute;
    display: none;
    background-color: #fff;
    color: #fff;
    left: 380px;
}

/* Popup arrow */
/*.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}*/

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.show {
    
    display: block;
    -webkit-animation: fadeIn 0.1s;
    animation: fadeIn 0.1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

h3.nobottom {margin-bottom: 5px;}
table.popup2 {border: 1px solid #eaeaeb; width: 100%; border-collapse: collapse; border-spacing: 0;}
table.popup2 th, table.popup2 td {border: 1px solid #dcdcdc; padding: 0.75em;}
table.popup2 h2 {font-size: 24px;}


table.popup3 {
    border: 1px solid #eaeaeb;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 10;
}

    table.popup3 th, table.popup2 td {
        border: 1px solid #dcdcdc;
        padding: 0.75em;
    }

    table.popup3 h2 {
        font-size: 24px;
    }
.popuptext2 {
    width: 600px;
    color: #656565;
    border-radius: 4px;
    padding: 30px;
    margin-left: -350px;
    left: 50%;
    margin-top: -230px;
    top: 50%;
    height: auto;
}
/* END shopping cart page */

#accountContainer {width: 40%;}
.accountButton {width: 35%; text-align:center; float:left;}

/* BEGIN review page */
.reviewLineItem {float:left; border: 2px solid #f1343f; border-radius: 50px; width: 100%; margin-bottom: 10px;}
.reviewImage {float:left;text-align:center;width:20%;}
.reviewImage img {text-align:center; max-height: 100px; max-width: 100px; height: auto; width: auto;padding-top:16px;}
.reviewPartInfo {float:left;text-align:center;padding-top:38px; width:35%}
.reviewPrice {float:left; text-align:center; padding-top: 24px; width: 45%;}
.reviewTodaysPrice {text-align:center; width: 33.3%;float:left;}
.reviewQuantity {text-align:center; width: 33.3%;float:left;}
.reviewTodaysExtPrice {text-align:center; width: 33.3%; font-weight:bold;float:left;}
.reviewSiteSubtotal {float:right;font-weight:bold;margin-right:10px;}

.reviewShipping {float:left;width:70%}
.reviewShipToAddress {text-align:center;padding:18px 0px 18px 24px;}
.reviewShipAddressInfo {text-align:left; font-size: 20px;}
#formShippingOption select {width: 50%;}

.reviewTotals {float:right;width:30%;}
.reviewPricing {float:right;}
.reviewSavings {float:right;color:red;}
.reviewTotal {float:right;font-weight:bold;font-size:20px;}
/* END review page */

.starthidden {display: none;}
.errorlist {display: none;}
#ulErrors {width:95%; color: #bf0000; border: solid 1px #bf0000; padding: 20px 0px 20px 47px; border-radius: 8px; text-align: left;}
#divOrderProcessing {display: none;}
.nowrap {white-space: nowrap; font-weight: bold;}
.errorHighlight {border: 1px solid #bf0000;}
/*input.errorHighlight, select.errorHighlight {background-color: #4f0000;}*/
#ulErrors li {border:none !important;}
.formdata {display:none;}
.spanProcessing {display:none; text-align: center; vertical-align: central; color: #f1343f; font-style: italic;}
#ulCaErrors {width:95%; color: #bf0000; border: solid 1px #bf0000; padding: 20px 0px 20px 47px; border-radius: 8px; text-align: left;}
#ulCaErrors li {border:none !important;}
.errorlistupsaddress {display: none;}
#ulErrorsUPSAddress {width:95%; color: #bf0000; border: solid 1px #bf0000; padding: 20px 0px 20px 47px; border-radius: 8px; text-align: left; list-style: disc;}
#ulErrorsUPSAddress li {border:none !important; padding-right: 20px;}

.newInfo {display:none;}
.newInfo .button2 {width: 25%;}
.addNew {text-align:center;margin: 4px 0px 16px 0px;font-weight:bold;}
.paymentcancelbutton {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    color: #888888 !important;
    font-size: 14px;
    border: 2px solid #888888;
    border-radius: 8px;
    width: 250px;
    text-align: center;
    cursor: pointer;
}

    .paymentcancelbutton hover {
        background: #F1343F;
        color: #fffFFF;
    }


.paymentsavenewbutton {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    color: #F1343F;
    font-size: 14px;
    border: 2px solid #F1343F;
    border-radius: 8px;
    width: 250px;
    float: right;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
.cartsitedropdown {float: right; width: 37%; padding: 30px 30px 30px 0px;}

.prevStep {float: left; width: 25%;}
.nextStep {float: right; width: 25%;}

.col1, .col2, .col31, .col32, .col33 {float:left;}
.col1 {margin-right: 5%; width:45%}
.col2 {width: 45%;}
.col31, .col32, .col33 {width: 33.3%;}

input {color:#fff; padding: 1em 0 1em 2em; width: 93%; border-radius: 8px; background-color: #7d7d7d; border: none; margin-bottom: 18px; font-size: 16px; font-family: inherit;}
input::placeholder {color: #fff;}

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
  color: #fff;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
input:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}
select {color:#fff; padding: 1em 0 1em 2em; width: 100%; border-radius: 8px; background-color: #616161; border: none; margin-bottom: 18px; font-size: 16px; font-family: inherit;}
input.checkbox {width: 20px; color: #f1343f; height: 20px; margin: 0px 15px 15px 0px;padding: 0px;}

div.infobox {margin-bottom: 20px; display: inline-block; width: 96%; border: solid 2px #cfcfcf; border-radius: 8px; padding: 20px;}
.ajax-icon {float: left; margin-right: 16px;}
.ajax-text {margin-top: 5px;}
#accountContainer h1 {margin-top: 0px;}
form#formLocations, form#formBillingInfo, form#formShippingLocation {margin-top: 20px;}
form#formNewBillingInfo, form#formNewShippingLocation, form#formShippingOption, .reviewTotals {margin-bottom: 20px;}
div.col3 {width: 27%; display: inline-block; margin-right: 8%; float: left;}
div.col4 {width: 27%; margin-right: 0%; float: left;}

div.comparelink {text-align: center; margin-top: 25px;}

table.pricing h1 {text-align: left; font-size: 20px; margin-bottom: 0px; margin-top: 0px; font-weight: 500;}
table.pricing {width: 100%; text-align: center;}

div.cartheading {width: 40%; float: left;}
div.cartbuttons {width: 23%; float: right; margin-right: 2%; margin-bottom: 25px;}
div.cartbuttons2 {width: 23%; float: right; margin-right: 0%;}
div.cartsummary {width: 55%; float: left; padding: 30px;}
div.cartsummary2 {border: 2px solid #f1343f; border-radius: 4px;width: 30%; float: left; padding: 15px 30px; margin: 20px;}

div.cartsummary2 h1 {font-size: 26px; font-weight: 500; color:  #f1343f;}
table.cart {width: 100%;}
table.cart h2 {font-size: 24px;}
table.cart2 {width: 100%; border-collapse: collapse;}
table.cart2 h1 {margin-top: 0px; font-size: 22px;}
table.cart2 h2 {margin-top: 0px; font-size: 22px; font-weight: 500;}
table.cart2 img {width: 130px;}
div.shopprice {font-size: 26px; font-weight: 500;}
table.cart2 tr {border-bottom: solid 2px #dadada;}
table.cart2 tbody tr td {padding: 15px 0px;}
table.cart2 .cartqty {
    width: 100%;
    text-align: center;
    padding-top: 0px;
  
}
.qty {
    border-radius: 8px;
}

div.login {
    width: 45%;
    float: left;
    margin-right: 4%;
}
div.login2 {float: left; width: 45%; padding-left: 4%; border-left: solid 2px #dadada;}

div.cartproductinfo2 h2 {margin-bottom: 5px; font-size: 20px; font-weight: 500;}
div.cartproductinfo h2 {margin-bottom: 5px; font-size: 20px; font-weight: 500;}
div.cartproductinfo3 h2 {margin-top: 0px; margin-bottom: 5px; font-size: 20px; font-weight: 500;}
div.cartproductinfo4 h2 {margin-top: 0px; margin-bottom: 5px; font-size: 20px; font-weight: 500;}
div.productTitle {margin-bottom: 10px;}

div.newlocation {width: 48%; float: left;}
div.newlocation2 {width: 48%; float: right;}
div.newlocationcontain {width: 78%; float: right; margin-right: 3%;}
div.newlocationcontain2 {width: 78%; float: left; margin-left: 3%;}

h2.headline {margin: 3%; font-size: 22px; font-weight: 500; margin-top: 30px; margin-bottom: 10px;}
.nextStep {margin-bottom: 60px;}
div.billing {margin-left: 3%; margin-right: 3%;margin-top: 3%;}
div.review {margin: 3%;}
img.cards {position: absolute; margin-top: -60px; margin-left: 190px;}

div.cartheading2 {width: 60%; float: left;}
div.smallsummary {float: right; width: 25%; padding: 20px 25px; border: solid 2px #f1343f; border-radius: 4px; margin-bottom: 20px;}
.smallsummary h1 {margin-top: 0px; font-size: 22px; color: #f1343f; font-weight: 500;}
table.smallsummary {width: 100%; font-size: 18px; font-weight: 500;}

tr.total {font-weight: 500;}
div.totalnumber {font-weight: 500; font-size: 22px; text-align: right;}
div.ordertotal {width: 25%; float: right; padding-top: 10px;}
div.checkboxes {width: 75%; float: left;}
table.ordertotal {width: 100%; font-size: 26px; font-weight: 500; color: #f1343f;}
table.shippingsubtotal {
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    color: #616161;
}
div.breadcrumb {text-align: center;width: 100%;}
table.billinginfo {width: 100%;}
table.billinginfo tbody tr {vertical-align: top;}

div.headinghalf {float: left;}

div#warrantyPopup2 {width: 1060px; margin-left: -580px; margin-top: -265px;}

div.app {width: 60%; margin-right: 5%; float: left;}
div.app2 {width: 35%; float: left;}
div.app img, div.app2 img {max-width: 100%;}
div.apphalf {width: 45%;}
span.new {color: #812990;}

/* Style the shop tab */
div.shoptab {
    overflow: hidden;
    border-bottom: 1px solid #161616;
	margin-bottom: 35px; 

}

/* Style the buttons inside the shop tab */
div.shoptab button {
    background-color: inherit;
    float: left;
    border: none;
	background-color: #cfd4d8;
    outline: none;
    cursor: pointer;
    padding: 14px 20px;
	font-family: 'Roboto';
	font-size: 16px;
    transition: 0.3s;
	margin-right: 5px;
	border-top-left-radius: 10px; border-top-right-radius: 10px;
}

/* Change background color of buttons on hover */
div.shoptab button:hover {
    background-color: #f1343f;
	color: #fff;
}

/* Create an active/current tablink class */
div.shoptab button.active {
    background-color: #161616;
}

/* Style the tab content */
.shopcontent {
    display: none;
    border-top: none;
}

hr {background-color: #c3c3c3; border: 0; height: 1px; margin: 0 auto 1.78571em;}
a, input, a:active, a:focus, button, button:focus, button:active, .btn, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus, select {
    outline: none;
    outline: 0;
}

input::-moz-focus-inner {
    border: 0;
}

input:read-only {
    background-color: #444;
    color: #AAA;
}

input:-moz-read-only {
    background-color: #444;
    color: #AAA;
}

input[readonly] {
    background-color: #444;
    color: #AAA;
}

select:disabled {
    background-color: #444;
    color: #AAA;
}

/* soundtrack - tim hortons - wizard css */
.wiz_welcomeHead {
    text-align: center;
    font-size: 48px;
    line-height: normal;
}
.wiz_welcomeSubhead {
    text-align: center;
    font-size: 24px;
    line-height: normal;
}
.wiz_divHeader {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 24px;
}
.wiz_divLocType {
    text-align: center;
    padding-top: 30px;
}
#wiz_button {
    text-align: center;
    width: 26%;
    margin: 0 auto;
}
.wiz_table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}
.wiz_table td {
    padding-bottom: 16px;
}
.wiz_category {
    font-weight: bold;
    font-size: 20px;
}
.wiz_italic {
    font-style: italic;
}
.wiz_text_left {
    text-align: left;
}
.wiz_radio_buttons {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 24px 0;
}
.wiz_radio_buttons label {
    border-radius: 8px;
    display: table-cell;
    vertical-align: middle;
}
.wiz_dummy_label {
    visibility: hidden;
}

textarea {color:#fff; padding: 1em 2em; width: 87%; border-radius: 15px; background-color: #7d7d7d; border: none; margin-bottom: 18px; font-size: 16px; font-family: inherit;}
textarea::placeholder {color: #fff;}
textarea:focus {border: none !important; outline:none;}

.chkBxLabel {
    line-height: 20px;
    vertical-align: top;
    padding-right: 10px;
    padding-left: 10px;
}

.InstallationButton {
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    color: #F1343F;
    font-size: 14px;
    border: 2px solid #F1343F;
    border-radius: 8px;
    width: 250px;
    text-align: center;
    float: left;
    cursor: pointer;
}

    .InstallationButton hover {
        background: #F1343F;
        color: #fffFFF;
    }
.InstallationCancelButton {
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    color: #888888;
    font-size: 14px;
    border: 2px solid #888888;
    border-radius: 8px;
    width: 250px;
    text-align: center;
    float: right;
    cursor: pointer;
}

    .InstallationCancelButton hover {
        background: #888888;
        color: #fffFFF;
    }


.EWclose {
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    color: #F1343F;
    font-size: 14px;
    border: 1px solid #F1343F;
    border-radius: 8px;
    width: 120px;
    float: right;
    text-align: center;
    cursor: pointer;
}

    /*.addNew a:hover {
        background-color: #d9242e;
        text-decoration: none;
    }*/
.popuptextWarranty {
    cursor: pointer;
    width: 100%;
    height: 400px;
    top: 220px;
    position: absolute;
    display: none;
    background-color: #fff;
    color: #fff;
    left: 380px;
}
.EWarranty {
    width: 600px;
  
    padding: 30px;
    margin-left: -350px;
    left: 50%;
    margin-top: -230px;
    top: 50%;
    height: auto;
    border: 2px solid #F1343F;
    border-radius: 8px;
    background-color: #F0F0F0;
    -webkit-box-shadow: 0px 0px 20px;
    box-shadow: 0px 0px 20px;
    color: #656565;
}

.threeWarranty {
    width: 85%;
    max-width: 1000px;
    padding-top: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
    border: 2px solid #F1343F;
    border-radius: 8px;
    background-color: #F0F0F0;
    -webkit-box-shadow: 0px 0px 20px;
    box-shadow: 0px 0px 20px;
    font-size: 18px;
    line-height: 18px;
    color: #656565;
}

.EWbar {
    background: #F1343F;
    padding: 10px;
    text-align: center;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold
}

.EWred {
    font-weight: bold;
    color: #F1343F;
    font-size: 18px;
    line-height: 18px;
}

    .EWred img {
        transform: translateY(5px);
    }

.EWarranty table {
    padding-top: 20px
}

.EWbutton {
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    color: #888888;
    font-size: 14px;
    border: 1px solid #888888;
    border-radius: 8px;
    width: 350px;
    text-align: center;
    cursor: pointer;
}

    .EWbutton hover {
        background: #F1343F;
        color: #fffFFF;
    }



.threetable {
    margin-bottom: 20px;
    margin-top: 20px;
}

.threeWarranty td {
    font-size: 14px;
    line-height: 18px;
}

.threeWarranty ul {
    line-height: 18px;
}

.threeWarranty li {
    padding-bottom: 10px;
}

.grayoutbutton {
    width: 100%;
    background-color: #888888;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    padding: 12px 0px 12px;
    font-size: 22px;
    font-weight: 400;
    margin-top: 15px;
    cursor: pointer;
}

.AddNewPaymentButton {
    color: #F1343F;
    font-size: 14px;
    border: 2px solid #F1343F;
    border-radius: 8px;
    width: 250px;
    text-align: center;
    float: left;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

    .AddNewPaymentButton hover {
        background: #F1343F;
        color: #fffFFF;
    }