/* about page style */

section.about {
	padding-top:100px;
}

section.about .row.about-header {
	text-align:center;
	margin:60px 0;
}

section.about .row.about-header h6 {
	letter-spacing:5px;
	font-weight:500;
	color:#999;
}

section.about .row.about-header h1 {
	margin-top:10px;
}

section.about .row.about-header p {
	margin-top:30px;
}

section.about .container-history {
	padding-left:0;
	padding-right:0;
}

section.about ul.history-links {
	background-color:#1f1f1f;
	margin:0;
	padding:0;
	text-align: center;
}

section.about ul.history-links li {
	display:inline-block;
	width:14.25%;
	border-left:1px solid #444;
	height:80px;
}

section.about ul.history-links li:first-child {
	border-left:1px solid transparent;
}

section.about ul.history-links li a {
	color:#999;
	font-weight:700;
	width: 100%;
    display: block;
    padding: 30px;
}

section.about ul.history-links li:hover {
	text-decoration:none;
	background-color:#2f2f2f;
}

section.about ul.history-links li a:focus {
	text-decoration:none;
}

section.about ul.history-links li.selected {
	background-color:#2f2f2f;
}

section.about ul.history-links li.selected a {
	color:#FFF;
}

section.about ul.history-links li.selected::after {
	content:"";
	border-bottom:6px solid #FF10A4;
	display:block;
	width:100%;
	margin-top: -6px;
}


.history-timeline {
	margin-left: 0;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.history-timeline.grab {
	cursor:-webkit-grab;
	cursor:-moz-grab;
	cursor:grab;
}
.history-timeline.grabbing {
	cursor:-webkit-grabbing;
	cursor:-moz-grabbing;
	cursor:grabbing;
}

.history-timeline .year {
	height:600px;
	display:inline-block;
	float:left;
	position: relative;
	overflow:hidden;
		-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
	-webkit-backface-visibility: hidden;
}

.history-timeline .year img.img-history {
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
	-webkit-backface-visibility: hidden;
	-webkit-filter: brightness(0.5);
    filter: brightness(0.5);
    filter: gray;
    width:500px;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

.history-timeline .year:hover img.img-history {
	-webkit-filter: brightness(0.9);
    filter: brightness(0.9);
}

.history-timeline .year .history-title {
	text-align: center;
    color: #FFF;
    width: 250px;
    position: relative;
    margin:0 auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
    -webkit-backface-visibility: hidden;
	z-index: 1;
}

.history-timeline .year .history-title h3 {
    line-height:1em;
        padding: 0 15px;
}

.history-timeline .year.active .history-title {
  -webkit-transform: translateY(-70%);
  -ms-transform: translateY(-70%);
  transform: translateY(-70%);
}

.history-timeline .year h3 {
	line-height:1em;
	font-size:16pt;
}

.history-timeline .year .history-description p::before {
    content: "";
    position: relative;
    width: 40px;
    background-color: #FF10A4;
    height: 6px;
    display: block;
    margin: 15px auto 15px;
}

.history-timeline .year .history-description {
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
	-webkit-backface-visibility: hidden;
	width:500px;
	position: absolute;
	bottom:-30px;
}

.history-timeline .year.active .history-description {
    width:500px;
    opacity:1;
    bottom: 30px;
}

.history-timeline .year .history-description p {
    padding: 0 30px;
    text-align: center;
    opacity:0;
    -webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
	-webkit-backface-visibility: hidden;
	color:#FFF;
}

.history-timeline .year.active .history-description p {
    width:500px;
    opacity:1;
}

.history-timeline .year.active {
	height:600px;
}

.history-timeline .year.active img.img-history {
    -webkit-filter: grayscale(0%) brightness(1);
    filter: grayscale(0%) brightness(1);
    width:500px !important;
}

.history-timeline .year.active .history-description {
    opacity:1;
    display: block;
    position: absolute;
    color: #FFF;
    z-index: 1;
}

.history-timeline .year::after {
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
	opacity:0;
}

.history-timeline .year.active::after {
content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    -webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
    opacity:1;
}

section.about .family-desc {
	text-align:center;
	position: absolute;
    bottom: 20px;
    width: 100%;
    color:#FFF;
}

section.about .family-desc h5 {
	margin:5px 0;
}

section.about .family-desc p {
	font-size:9pt;
	line-height:10pt;
}

section.about .made-in-usa {
	padding-left:20px;
	padding-right:20px;
}

section.about .row.ball-family {
	color:#FFF;
	background-color:#212121;
	background-image: url('/assets/images/toolkit-bg.jpg');
	text-align: center;
}

section.about .row.ball-family p {
	margin-bottom:80px;
}

section.about .row.ball-family h2 {
	margin-top:80px;
	margin-bottom:30px;
}

.tinynav {/* hide mobile history nav on desktop */
	display: none;
	}

/* styles for mobile */
@media screen and (max-width: 767px) {
    section.about .tinynav {
	    display: block;
	    width: 100%;
	    padding: 15px;
	    border: none;
	    background-color: #1f1f1f;
	    color: #FFF;
	}

    #navHistory { /* hide desktop version of history nav on mobile */
	    display: none
	}
}

@media screen and (min-width: 320px) and (max-width: 414px) {
	section.about .history-viewport {
		height:380px;
	}
	
	
	section.about .history-timeline .year {
    	height: 380px;
    	width: 180px;
	}
	
	.history-timeline .year .history-title {
		width:180px;
	}
	
	.history-timeline .year.active .history-title {
    	-webkit-transform: translateY(-130%);
    	-ms-transform: translateY(-130%);
    	transform: translateY(-130%);
	}
	
	section.about .history-timeline .year.active {
		width:300px !important;
		bottom:0;
	}
	
	section.about .history-timeline .year.active img.img-history {
		width:320px !important;
	}
	
	.history-timeline .year.active .history-description {
		width:320px !important;
		bottom: 15px;
	}
	
	.history-timeline .year.active .history-description p {
		width:300px !important;
		margin-bottom:0;
	}
	
	.history-timeline .year .history-description p {
		padding:0 10px;
		font-size:9pt;
		line-height:11pt;
		bottom:0px;
	}
	
	section.about .history-timeline .year img.img-history {
		width:320px;
	}
	
	.history-timeline .year.active  {
	    bottom: 45%;
	}
	
	section.about .history-timeline .year h3 {
		font-size:12pt;
	}
	
	
}