/*Headers*/
#tireTestLanding h1 {font-family:gibson; font-weight: 700;font-size: 2em;margin:.25em 0 .75em 0;text-align: center; text-transform: uppercase;}
#tireTestContainer h3, #tireTestLanding .backgroundFillerGrey h3, #tireTestLanding .backgroundFillerGrey h5, #testcontent h3, #tireTestLanding h4 {font-family:gibson; font-weight: 500;font-size: 1.125em; margin: 1em 0 .75em 0} /*the h4 may need to be changd to an h3 in the html or if left as an h4...maybe a size of 1em instead?*/
#tireTestLanding ul, #tireTestContainer ul{font-family: gibson;margin-top: 2.2em;}
#tireTestLanding li{margin-bottom: 1em;}
#tireTestLanding li span {display: block;}
#tireTestLanding p {text-align: center;}
#tireTestLanding .backgroundFillerGrey{margin:3em 0;padding:.625em;}
#tireTestLanding .backgroundFillerGrey h3 {margin-top: 0}
#tireTestLanding .backgroundFillerGrey div.testVidTires, .videoWrapper, .videoWrapper div.testVidTires {display: flex;flex-direction: column;justify-content: space-between;}
#tireTestLanding .backgroundFillerGrey div.testVidTires div, .videoWrapper div.testVidTires div{margin:7px 0}

/*careful, this css may not be needed or may need to be modified to make it work.*/
#video-placeholder img {width: 100%}
#video-placeholder h3{margin-top: 1em;}
.videoWrapper div > h5 {margin:20px 0}
.vidGrid {display: flex;flex-direction: column; margin:15px 0}
.vidGrid div:nth-of-type(2) > a ~ span, .testVidTires div > a ~ span{display:block;margin-top: 3px;font-size:13px; font-family: 'gibson';margin-bottom:5px}
.vidGrid > div{margin:7px 0}
.videoWrapper a {margin-left:0}
.videoDetails {font-family: aleo;line-height: 24px; display: flex;flex-direction: column;justify-content: space-between;margin-bottom:20px}
.videoDetails div:first-of-type > a, .videoDetails div:first-of-type > a:after, .videoDetails div:first-of-type > p, .videoDetails div:first-of-type br:nth-of-type(n+3){display: none}
.videoDetails div:nth-of-type(2){display:flex;flex-direction: column;margin-top: 30px}
.videoDetails div:nth-of-type(2) .redGreater:after{line-height: 1.5em}
/*Styles for Test Landing page. Also Used on the Suspension Test Landing Page*/
#tireTestLanding h1{font-size: 1.75em;}
#tireTestLanding h1 span{color: #d70000;}
#testcontent {font-family: gibson}
#testcontent > div span {display: block;font-size: .875em;}
#testcontent > div span::after {display: block; content: ""}
#testcontent a {font-size:1em;}
#testcontent ul {margin: 1em 0;padding-left: 3em;}
#testcontent li {list-style-type: disc;margin-bottom: 0}
#testcontent p {font-family:aleo;font-size: 1em; line-height: 1.5em; margin:.75em 0 0 0;}
/*#testcontent p:first-of-type {margin:0;}*/
#testcontent img {display: block; float:none; margin:10px auto 0;max-width: 100%;}
#testcontent th{font-weight:normal;vertical-align: middle;border: none;}


/*this selector will need adjustments once the pages are figured out.*/
#tireTestContainer + #contentContainer, #tireTestContainer + #testcontent {margin:auto 0;}

.videoCategory{font-family: gibson;margin-bottom: 1em}
.videoCategory span{font-family:gibson; font-weight: 500;}
/*Styles for grey tabs on the bar chart pages.*/
div.chartTabs{margin:.75em auto 0em;padding:0 .25%;text-align:center;width: 100%;}
.chartTabs button{background-color:#eaeaea;border:0;color:#19170d;display:inline-block;font-size:.875em;line-height:1em;margin-bottom:2em;min-height:4em;padding:1%;position:relative;vertical-align:top;width:8.3em;word-wrap:break-word;}
.chartTabs button.currentButton:after{border:.75em solid #19170d;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent;bottom:-1.4em;content:'';left:40%;position:absolute;}
.chartTabs button.currentButton{background-color:#19170d; color:#ffffff;}
._5btn button{font-size:.6em!important; width:20%;}
._4btn button{letter-spacing:-.7px;width:24.25%;}
._2btn button{width:50%;}
._2btn button.currentButton:after{left:44%;}
._1btn button{width:100%}
._1btn button.currentButton:after{left:47%;}

/* spider button CSS */
.spiderChartButtons{text-align: center;}
.spiderChartButtons button{background-color:#ffffff;border-style:solid;border-width:.1875em;color:#19170d;display:inline-block;font-size:.875em;margin-bottom:2.25em;max-width:19em;padding:.75em 0;vertical-align:middle;width: 45%;}
.spiderChartButtons button.current{color:#ffffff;}
.spiderChartButtons button:nth-child(1){border-color:#D70000;margin-right: 1.25em}
.spiderChartButtons button.current:nth-child(1){background-color: #D70000}
.spiderChartButtons button:nth-child(2){border-color:#2e7993;}
.spiderChartButtons button.current:nth-child(2){background-color: #2e7993}
.spiderChartButtons button:nth-child(3){border-color:#5c5756;margin-right: 1.25em}
.spiderChartButtons button.current:nth-child(3){background-color: #5c5756}
.spiderChartButtons button:nth-child(4){border-color:#008b47;}
.spiderChartButtons button.current:nth-child(4){background-color: #008b47}


/* Test Track Styles */
.testTrack{margin:4em 0;}
.testtracktop {color: #3c3837;}
.textblock-testtracktop {line-height: 1.15;	text-align: center;}
.textblock-testtracktop h2 {text-transform: uppercase;}
.textblock-testtracktop h5 {font-family: aleo; font-style: italic;}
.textblock-testtracktop p {font-family: gibson;font-size: 1em; line-height: 1em;margin: .75em auto 0;text-align: center;}
div.track_balloons {background-image:url('/content/dam/tirerack/mobile/css_elements/images/asphalt.svg');background-position-y:bottom;background-repeat:no-repeat;margin-top: 3em;min-height:10em;position:relative;}
div.track_balloons a {position:absolute;}
div.track_balloons a:after {color: black;content: attr(data-title);font-family: gibson; font-weight: 500;font-size: .875em;position: absolute;width: 8.5em;}
div.track_balloons a:nth-child(1) {left:.625em;overflow:visible;bottom:7.5em;width:2.15em;}
div.track_balloons a:nth-child(1):after {left:2.75em;}
div.track_balloons a:nth-child(2) {left:5em;overflow:visible;top:.5em;width: 2.8em;}
div.track_balloons a:nth-child(2):after {left: 3.25em;}
div.track_balloons a:nth-child(3) {bottom:3em;overflow:visible;right:9em;width:3.1em; z-index: 3;}
div.track_balloons a:nth-child(3):after {left: 3.75em;bottom:2.8125em;}
div.track_balloons a:nth-child(4) {overflow:visible;right:8em;bottom:7.25em;width:2.2em;}
div.track_balloons a:nth-child(4):after {left:2.75em;}

p.cta-wrap {text-align: center;	top: 280px;	width: 100%;}
.videoThumbnail {position: relative;}
.videoThumbnail ~ h4 {font-family:gibson; font-weight: 500;font-size: 1.125em;}
.videoThumbnail img {width: 100%;}
.play {border-bottom: 30px solid transparent;	border-left: 40px solid #fff;	border-top: 30px solid transparent;display: block;height: 0;left: 50%;margin-left: -25px;margin-top: -40px;opacity: .8;position: absolute;top: 50%;transition: all 0.3s;width: 0;z-index: 1;}
.play:before {border: 5px solid #fff;border-radius: 50%;bottom: -45px;content: '';left: -72px;position: absolute;right: -18px;top: -45px;transition: all 0.3s;z-index: 2;}
.play:after {content: '';opacity: 0;transition: opacity 0.6s;}
.play:hover:before, .play:focus:before {  transform: scale(1.1);}
.play.active {  border-color: transparent;}
.play.active:after {  background: #fff;  border-left: 20px solid #fff;  box-shadow: inset 30px 0 0 0 #333;content: '';height: 80px;opacity: 1;position: absolute;right: 5px;top: -40px;width: 50px;}
@media all and (orientation:portrait){
	.textblock-testtracktop h2 {font-family:gibson; font-weight: 700;font-size: 2.5em;letter-spacing: -.03em;}
	.textblock-testtracktop h5 {font-size: 1.45em; margin-top: 1em}
  ul.chartTires li:nth-child(even) {float: right;}
}
@media all and (orientation:landscape){
	.textblock-testtracktop h2 {font-family:gibson; font-weight: 700;font-size: 3em;}
	.textblock-testtracktop h5 {margin-top: .4em; font-size: 1.55em}
	.textblock-testtracktop p {font-size: 1.2em;}
	div.track_balloons {min-height: 17.5em;margin-top: 3.5em;}
    div.track_balloons a:after {font-size: 1.125em; width: 9.375em;}
    div.track_balloons a:nth-child(1) {bottom: 12em;left: .625em;overflow: visible;width: 3.75em;}
    div.track_balloons a:nth-child(1):after {left: 3.5em;}
    div.track_balloons a:nth-child(2) {left: 6.25em;overflow: visible;top: 2.8125em;width: 4.8em;}
    div.track_balloons a:nth-child(2):after {left: 4.35em;}
    div.track_balloons a:nth-child(3) {bottom: 4.0625em;overflow: visible;right: 15em;width: 5.75em;z-index: 3;}
    div.track_balloons a:nth-child(3):after {bottom: 4.5em;left: 5.5em;}
    div.track_balloons a:nth-child(4) {overflow: visible;right: 12.5em;top: 0em;width: 3.85em;}
    div.track_balloons a:nth-child(4):after {left: 3.75em;}
    ul.chartTires li:nth-child(even) {float: right;}
}
/* iphone 5 and 5s */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
	.textblock-testtracktop h2 {font-size: 2.25em;}
	.textblock-testtracktop h5 {font-size: 1.2em}
	div.track_balloons {margin-bottom: 1em;font-size: .875em}
	div.track_balloons a:nth-child(1) {left:.625em;overflow:visible;bottom:7.5em;width:2.15em;}
	div.track_balloons a:nth-child(1):after {left:2.65em;}
	div.track_balloons a:nth-child(2) {left:4.5em;overflow:visible;top:1.5em;width: 2.8em;}
	div.track_balloons a:nth-child(2):after {left: 3.25em;}
	div.track_balloons a:nth-child(3) {bottom:2.5em;overflow:visible;right:10em;width:3.1em; z-index: 3;}
	div.track_balloons a:nth-child(3):after {left: 3.75em;bottom:2.8125em;}
	div.track_balloons a:nth-child(4) {overflow:visible;right:7.5em;bottom:7.5em;width:2.2em;}
	div.track_balloons a:nth-child(4):after {left:2.65em;}
}
/* iphone 5 and 5s */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
	.textblock-testtracktop h2 {font-size: 2.75em;}
    .textblock-testtracktop h5 {margin-bottom: 1em}
    div.track_balloons {min-height: 17.5em;margin-top: 3.5em;}
    div.track_balloons a:after {font-size: 1.125em; width: 9.375em;}
    div.track_balloons a:nth-child(1) {bottom: 12em;left: .625em;overflow: visible;width: 3.25em;}
    div.track_balloons a:nth-child(1):after {left:3em;}
    div.track_balloons a:nth-child(2) {left: 5.75em;overflow: visible;top: 5.5em;width: 4em;}
    div.track_balloons a:nth-child(2):after {left: 3.5em;}
    div.track_balloons a:nth-child(3) {bottom: 3.85em;overflow: visible;right: 12em;width: 4.5em;z-index: 3;}
    div.track_balloons a:nth-child(3):after {left: 4.25em;bottom:3.35em;}
    div.track_balloons a:nth-child(4) {overflow: visible;right: 11em;top: 2.5em;width: 3.25em;}
    div.track_balloons a:nth-child(4):after {left:3.1em;}
}
/* iphone 6 */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { 
  	.textblock-testtracktop h5 {margin-bottom: 1em}
    div.track_balloons {margin-bottom: 1em;margin-top:4em;font-size: .875em}
	div.track_balloons a:nth-child(1) {left:.625em;overflow:visible;bottom:8.5em;width:2.15em;}
	div.track_balloons a:nth-child(1):after {left:2.65em;}
	div.track_balloons a:nth-child(2) {left:5.2em;overflow:visible;top:.5em;width: 2.8em;}
	div.track_balloons a:nth-child(2):after {left: 3.25em;}
	div.track_balloons a:nth-child(3) {bottom:3.1em;overflow:visible;right:12.25em;width:3.1em; z-index: 3;}
	div.track_balloons a:nth-child(3):after {left: 3.75em;bottom:2.8125em;}
	div.track_balloons a:nth-child(4) {overflow:visible;right:10em;bottom:8.5em;width:2.2em;}
	div.track_balloons a:nth-child(4):after {left:2.65em;}
}
/* iphone 6 */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { 
	div.track_balloons {min-height: 17.5em;margin-top: 3.5em;}
    div.track_balloons a:after {font-size: 1.125em; width: 9.375em;}
    div.track_balloons a:nth-child(1) {bottom: 12em;left: .625em;overflow: visible;width: 3.75em;}
    div.track_balloons a:nth-child(1):after {left:3.5em;}
    div.track_balloons a:nth-child(2) {left: 7em;overflow: visible;top: 3.5em;width: 4.8em;}
    div.track_balloons a:nth-child(2):after {left: 4.35em;}
    div.track_balloons a:nth-child(3) {bottom: 4.5em;overflow: visible;right: 14.5em;width: 5.75em;z-index: 3;}
    div.track_balloons a:nth-child(3):after {left: 5.5em; bottom: 4.35em;}
    div.track_balloons a:nth-child(4) {overflow: visible;right: 11em;top: -.5em;width: 3.85em;}
    div.track_balloons a:nth-child(4):after {left: 3.55em;}
}
/* iphone 6+ and up */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { 
  	.textblock-testtracktop h5 {margin-top: .8em}
  	div.track_balloons {margin-top: 4.5em;}
    div.track_balloons a:nth-child(1) {left:.625em;overflow:visible;bottom:8.75em;width:2.15em;}
	div.track_balloons a:nth-child(1):after {left:2.65em;}
	div.track_balloons a:nth-child(2) {left:5em;overflow:visible;top:.2em;width: 2.8em;}
	div.track_balloons a:nth-child(2):after {left: 3.25em;}
	div.track_balloons a:nth-child(3) {bottom:3.5em;overflow:visible;right:10em;width:3.1em; z-index: 3;}
	div.track_balloons a:nth-child(3):after {left: 3.85em;bottom:2.8125em;}
	div.track_balloons a:nth-child(4) {overflow:visible;right:9.5em;bottom:8.5em;width:2.2em;}
	div.track_balloons a:nth-child(4):after {left:2.75em;}
}
/* iphone 6+ and up */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
	.textblock-testtracktop h2 {font-size: 3.2em}
    .textblock-testtracktop h5 {margin-top: .25em;font-size: 1.75em}
	div.track_balloons {min-height: 17.5em;margin-top: 4em;}
    div.track_balloons a:after {font-size: 1.125em; width: 9.375em;}
    div.track_balloons a:nth-child(1) {bottom: 13em;left: .625em;overflow: visible;width: 3.75em;}
    div.track_balloons a:nth-child(1):after{left:3.5em;}
    div.track_balloons a:nth-child(2) {left: 7.5em;overflow: visible;top: 2em;width: 4.8em;}
    div.track_balloons a:nth-child(2):after{left: 4.25em}
    div.track_balloons a:nth-child(3) {bottom: 5.5em;overflow: visible;right: 15em;width: 5.75em;z-index: 3;}
    div.track_balloons a:nth-child(3):after{left: 5.5em;bottom: 4.5em;}
    div.track_balloons a:nth-child(4) {overflow: visible;right: 14.5em;top: -1.5em;width: 3.85em;}
    div.track_balloons a:nth-child(4):after{left: 3.65em;}
}
/* galaxy s5 */
@media screen  and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
	.textblock-testtracktop h5 {margin-top: .5em;}
	div.track_balloons a:nth-child(1):after {left:2.85em;}
}
/* galaxy s5 */
@media screen  and (device-height: 360px) and (device-width: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
	.textblock-testtracktop h5 {margin-top: .4em;}
}
/* galaxy s7 */
@media screen and (device-width: 360px) and (device-height: 640px) and (max-resolution: 2304dpi) and (orientation: portrait) {
  	.textblock-testtracktop h2 {font-size: 2.75em}
    div.track_balloons {margin-top: 4.5em;}
    div.track_balloons a:nth-child(1) {left:.625em;overflow:visible;bottom:7.5em;width:2.15em;}
    div.track_balloons a:nth-child(1):after {left:2.65em;}
	div.track_balloons a:nth-child(2) {left:4em;overflow:visible;top:1em;width: 2.8em;}
	div.track_balloons a:nth-child(3) {bottom:3em;overflow:visible;right:9em;width:3.1em; z-index: 3;}
	div.track_balloons a:nth-child(4) {overflow:visible;right:7em;bottom:7.75em;width:2.2em;}
}
/* galaxy s7 */
@media screen and (device-width: 360px) and (device-height: 640px) and (orientation: portrait) {
  	div.track_balloons {background-position-y:3px;/*font-size:2.5em;*/margin-top: 4.5em;}
    div.track_balloons a:nth-child(1) {left:.625em;overflow:visible;bottom:8.5em;width:2.15em;}
    div.track_balloons a:nth-child(1):after {left:2.65em;}
	div.track_balloons a:nth-child(2) {left:5em;overflow:visible;top:.5em;width: 2.8em;}
	div.track_balloons a:nth-child(3) {bottom:3.5em;overflow:visible;right:11em;width:3.1em; z-index: 3;}
	div.track_balloons a:nth-child(4) {overflow:visible;right:8em;bottom:8.75em;width:2.2em;}
}

/* galaxy s7 */
@media screen and (device-width: 640px) and (device-height: 360px) and (orientation: landscape) {
	div.track_balloons {min-height: 17.5em;margin-top: 3.5em;}
    div.track_balloons a:after {font-size: 1.125em; width: 9.375em;}
    div.track_balloons a:nth-child(1) {bottom: 12em;left: .625em;overflow: visible;width: 3.75em;}
    div.track_balloons a:nth-child(2) {left: 6em;overflow: visible;top: 3em;width: 4.8em;}
    div.track_balloons a:nth-child(3) {bottom: 4.25em;overflow: visible;right: 14em;width: 5.75em;z-index: 3;}
    div.track_balloons a:nth-child(4) {overflow: visible;right: 10em;top: 0em;width: 3.85em;}
} 
ul.chartTires {font-family:gibson;min-height:40px;list-style-type:none;margin:1em 1em;position: relative; width:100%;}
ul.chartTires li{display:inline-block; margin:0 1em 0em .5em;/*padding-left: -0.75em;*/position:relative;vertical-align:top;width:40%;}
ul.chartTires li:before{content:""; display:inline-block; height:1em; left: -1.5em; margin-right:.5em; position: absolute; top:.2em; vertical-align:middle; width:1em;}
ul.chartTires:nth-of-type(1) li:nth-child(1)::before{background-color:#D70000;}
ul.chartTires:nth-of-type(1) li:nth-child(2)::before{background-color:#2e7993;}
ul.chartTires:nth-of-type(2) li:nth-child(1)::before{background-color:#5d5959;}
ul.chartTires:nth-of-type(2) li:nth-child(2)::before{background-color:#008a27;}
ul.chartTires:nth-of-type(3) li:nth-child(1)::before{background-color:#9e5a0a;}
ul.chartTires:nth-of-type(3) li:nth-child(2)::before{background-color:#f47c04;}
ul.chartTires:nth-of-type(4) li:nth-child(1)::before{background-color:#00cdcc;}
h3.title {margin: 3em 0 0 0;text-transform: uppercase;}
.chartGroup:first-of-type h3.title {margin: 0}
#testsidebar{padding-top: .5em}
#testsidebar span, .chartGroup span {display: inline-block;font-family:'gibson';font-size: 12px;margin-bottom: 8px;margin-right:.5em;text-transform: capitalize;}
#testsidebar span:nth-child(2), .chartGroup span:nth-child(2) {text-transform: none;}
#testsidebar h3 {font:400 1.333em/1 gibson; font-weight: 500; margin-bottom: 0; /*white-space: nowrap;*/}
#testsidebar ul {padding-left: 1em;}

.RetailOnly{display: none!important}
#testcontent figure.caption {box-sizing:border-box;margin:0 auto inherit;}