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

/* Landing Page Hero */
.case-hero {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top:100px;
	padding-bottom:100px;
	position: relative;
	min-height:350px;
}
		
	.case-hero::after {
		content: "";
		position: absolute;
		background: url(https://static.dormanproducts.com/images/marketing/tour/assets/dot-pattern.png) repeat;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 0;
	}
	.case-hero .container {position: relative; z-index: 1;}


/* Call out */
		.callout {position:relative; width:100%; padding:25px; margin:30px;}

		.callout:before,  .callout:after,  .callout>:first-child:before,  .callout>:first-child:after  {
    		position:absolute;
    		width:30px; height: 30px;
    		border-color:#fb6317; 
    		border-style:solid; 
    		content: ' ';
		}
		.callout:before {top:0;left:0;border-width: 5px 0 0 5px}
		.callout:after {top:0;right:0;border-width: 5px 5px 0 0;border-color:#FFFFFF;}
		.callout>:first-child:before {bottom:0;right:0;border-width: 0 5px 5px 0;border-color:#FFFFFF;}
		.callout>:first-child:after {bottom:0;left:0;border-width: 0 0 5px 5px}
		
		.callout h2 {font-size:100px; color:#fb6317;}
		.callout h3 {font-size:80px; color:#fb6317;}
		.callout h4 {font-size:55px; color:#fb6317;}
		.callout h5 {font-size:30px; color:#fb6317;}
		.callout p {text-align: right; color:#fb6317;}

/* Video Player */
.video-nav {max-height:300px; overflow-y:auto;}
		.video-list {margin:0px; margin-left:0px !important; display:block;}
		.video-list .video-head {display:block; padding: 5px 8px; font-size:13px; background:#f5f5f5; width:100%;float:none; margin:0px; border-bottom:2px solid #ddd; font-weight:bold;}
		.video-list li {display:block; padding: 5px 0px; font-size:13px; border-bottom:solid 1px #CCC; width:100%;float:none; margin-left:0px !important; margin:0px; line-height:1.3; cursor:pointer; overflow:hidden;}
		.video-list li > a {padding: 5px 8px;}
		.video-list li:hover {background-color:#F7F7F7;}
		.video-list li:hover a {color:#fb6317;}
		.video-list li:hover img.thumbnail {border-color:#2f3338;}
		.video-list img.thumbnail {margin-bottom: 0px !important;}
		.video-list .col-xs-4 {padding-right:0px;}


@media (max-width:450px) {
			.case-hero {padding-top:60px; padding-bottom:60px; min-height:auto}
			.case-hero h2 {font-size:35px;}
			.callout {margin:10px;}
		}