/*********************************************************************************************/
/* CROMER PIER TIMELINE CSS        															 */ 
/*********************************************************************************************/

/* FEATURED VIDEO ****************************************************************************/
/*********************************************************************************************/

.desktop, .tablet, .section-video {
	padding-top: 5rem;
}

.section-video .lead {
	padding: 0 9rem 0 9rem;
}

/* video container */
.player {
	overflow: hidden;
    z-index: 1;
    margin: 2rem 5rem 5rem 5rem;
    height: 315px;
    width: 560px;
	border-radius: var(--default-border-radius);
	border: 3px solid var(--color-white);
}

.featured {
	padding: 5rem 5rem 0 5rem;
	margin-bottom: 5rem;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

/* BASE SETUP FOR HISTORY TIMELINE ***********************************************************/
/*********************************************************************************************/

/* left and right hand side of the timeline on desktop */
/* connector used on mobile and tablet only */
.timeline-left > *, .timeline-right > *,
.mobile .connector:after, .tablet .connector:before {
	opacity: 0;
}

/* circle that appears on the connecting lines on desktop */
.dot, .dot-large {
	border-radius: 50%;
	position: absolute;
	background: var(--CP-neutral-500);
	animation: fade-in 0.5s ease forwards;
}

.dot {
	width: 16px;
	height: 16px;
}

.dot-large {
	width: 20px;
	height: 20px;
}

/* long vertical line used on desktop and tablet */
.vertical-line {
	width: 2px;
	height: 5rem;
	background: var(--CP-neutral-500);
	animation: stand 2s ease forwards;
}

.mobile .box-contents h3 {
	margin-top: -70px;
}

.vertical-line-mobile {
	width: 2px;
	height: 0;
	background: var(--CP-neutral-500);
	animation: stand-2 1s ease forwards; 
}

.mobile .connector, .tablet .connector {
	position: relative;
	color: var(--CP-neutral-500);
}

/* insert dot - use ascii character for mobile and tablet */
.mobile .connector:after, .tablet .connector:before {
	content: '\25CF';
	font-size: 2.5rem;
	position: absolute;                    
	animation: fade-in 100ms ease forwards;
}

/* positioning for the dot */
.mobile .connector:after {
	bottom: -35px;
}

.tablet .connector:before {
	left: -12px;
	top: -31px;
}


/* Horizontal line used on desktop and tablet. Connects the display boxes to the long vertical line */
.horizontal-line {
	height: 2px;
	flex: 0 0 5rem;
	width: 5rem;
	background: var(--CP-neutral-500);
	animation: grow 1s ease forwards;
}

.desktop .timeline-right .horizontal-line,
.desktop .timeline-right .dot,
.desktop .timeline-left .horizontal-line,
.desktop .timeline-left .dot {
		margin-top: -3rem;
}
		
/* DISPLAY BOXES *****************************************************************************/
/*********************************************************************************************/

/* element for displaying year, text and image */
.timeline-left .box, .timeline-right .box {
	width: 100%;
	animation: fade-in 1s ease forwards;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}


/* ANIMATIONS FOR DESKTOP */

/*.desktop .timeline-left > *:nth-child(1) { animation-delay: 1s; } 
.desktop .timeline-right > *:nth-child(1) { animation-delay: 1.2s; } 
.desktop .timeline-left > *:nth-child(2) { animation-delay: 1.4s; } 
.desktop .timeline-right > *:nth-child(2) { animation-delay: 1.6s; } 
.desktop .timeline-left > *:nth-child(3) { animation-delay: 1.8s; } 
.desktop .timeline-right > *:nth-child(3) { animation-delay: 2s; } 
.desktop .timeline-left > *:nth-child(4) { animation-delay: 2.2s; } 
.desktop .timeline-right > *:nth-child(4) { animation-delay: 2.4s; } */


/* white space within the box */
.timeline-right .box-contents {
	padding: 1rem 1rem 1rem 0;
}

.timeline-left .box-contents {
	padding: 1rem 0 1rem 1rem;
}

.box-contents img {
	border-radius: var(--default-border-radius);
	width: 95%;
}

.box-text {
	background: var(--CP-accent-500);
	color: var(--CP-neutral-900);
	padding: 2rem 2.5rem;
	margin-top: -3rem;
	border-radius: var(--default-border-radius);
	opacity: .9;
} 

.box-contents h3 {
	color: var(--CP-accent-500);
    font-weight: 800;
	font-size: 1.75rem;
}

.box-contents p, .box-contents h4 {
	color: var(--color-black) !important;
}

.box-contents p {
	margin-bottom: 0;
}

.box-contents h4 {
	font-weight: 900;
	font-size: 1.3rem;
}

/* position the text boxes on the timeline */
.timeline-right .box-text {
	margin-left: 2rem;
}

.timeline-left .box-text {
	margin-right: 2rem;
}

/* align box text right that appears on the left side - on desktop only */
.timeline-left .box .box-contents {
	text-align: end;
	text-align: -webkit-right;
}

/* used on mobile to position the boxes */ 
.mt-n-medium {
	margin-top: -4.1rem;
}

/* ANIMATIONS ********************************************************************************/
/*********************************************************************************************/

/* ANIMATIONS FOR DESKTOP */

/*.desktop .timeline-left > *:nth-child(1) { animation-delay: 1s; } 
.desktop .timeline-right > *:nth-child(1) { animation-delay: 1.2s; } 
.desktop .timeline-left > *:nth-child(2) { animation-delay: 1.4s; } 
.desktop .timeline-right > *:nth-child(2) { animation-delay: 1.6s; } 
.desktop .timeline-left > *:nth-child(3) { animation-delay: 1.8s; } 
.desktop .timeline-right > *:nth-child(3) { animation-delay: 2s; } 
.desktop .timeline-left > *:nth-child(4) { animation-delay: 2.2s; } 
.desktop .timeline-right > *:nth-child(4) { animation-delay: 2.4s; } */
 

/* ANIMATIONS FOR TABLET */

/*.tablet .timeline-right > *:nth-child(1) { animation-delay: 1s; } 

.tablet .timeline-right .box:nth-child(2) .connector:before { animation-delay: 1.5s; } 
.tablet .timeline-right .box:nth-child(2) .connector .horizontal-line-tablet { animation-delay: 2s; } 
.tablet .timeline-right > *:nth-child(2) { animation-delay: 2.5s; } 

.tablet .timeline-right .box:nth-child(3) .connector:before { animation-delay: 3s; } 
.tablet .timeline-right .box:nth-child(3) .connector .horizontal-line-tablet { animation-delay: 3.5s; } 
.tablet .timeline-right > *:nth-child(3) { animation-delay: 4s; }

.tablet .timeline-right .box:nth-child(4) .connector:before { animation-delay: 4.5s; } 
.tablet .timeline-right .box:nth-child(4) .connector .horizontal-line-tablet { animation-delay: 5s; } 
.tablet .timeline-right > *:nth-child(4) { animation-delay: 5.5s; }

.tablet .timeline-right .box:nth-child(5) .connector:before { animation-delay: 6s; } 
.tablet .timeline-right .box:nth-child(5) .connector .horizontal-line-tablet { animation-delay: 6.5s; } 
.tablet .timeline-right > *:nth-child(5) { animation-delay: 7s; }

.tablet .timeline-right .box:nth-child(6) .connector:before { animation-delay: 7.5s; } 
.tablet .timeline-right .box:nth-child(6) .connector .horizontal-line-tablet { animation-delay: 8s; } 
.tablet .timeline-right > *:nth-child(6) { animation-delay: 8.5s; }

.tablet .timeline-right .box:nth-child(7) .connector:before { animation-delay: 9s; } 
.tablet .timeline-right .box:nth-child(7) .connector .horizontal-line-tablet { animation-delay: 10s; } 
.tablet .timeline-right > *:nth-child(7) { animation-delay: 10.5s; }

.tablet .timeline-right .box:nth-child(8) .connector:before { animation-delay: 11s; } 
.tablet .timeline-right .box:nth-child(8) .connector .horizontal-line-tablet { animation-delay: 11.5s; } 
.tablet .timeline-right > *:nth-child(8) { animation-delay: 12s; }*/


/* ANIMATIONS FOR MOBILE */

/*.mobile .timeline-right > *:nth-child(1) { animation-delay: 1s; } 
.mobile .timeline-right > *:nth-child(2) { animation-delay: 1.5s; }  
.mobile .timeline-right .box:nth-child(2) .connector:after { animation-delay: 2s; } 
.mobile .timeline-right .box:nth-child(2) .connector .vertical-line-mobile { animation-delay: 2.5s; } 
.mobile .timeline-right > *:nth-child(3) { animation-delay: 3.5s; } 
.mobile .timeline-right .box:nth-child(3) .connector:after { animation-delay: 4s; } 
.mobile .timeline-right .box:nth-child(3) .connector .vertical-line-mobile { animation-delay: 4.5s; }  
.mobile .timeline-right > *:nth-child(4) { animation-delay: 5s; } 
.mobile .timeline-right .box:nth-child(4) .connector:after { animation-delay: 5.5s; } 
.mobile .timeline-right .box:nth-child(4) .connector .vertical-line-mobile { animation-delay: 6s; }  
.mobile .timeline-right > *:nth-child(5) { animation-delay: 6.5s; } 
.mobile .timeline-right .box:nth-child(5) .connector:after { animation-delay: 7s; } 
.mobile .timeline-right .box:nth-child(5) .connector .vertical-line-mobile { animation-delay: 7.5s; } 
.mobile .timeline-right > *:nth-child(6) { animation-delay: 8s; } 
.mobile .timeline-right .box:nth-child(6) .connector:after { animation-delay: 8.5s; } 
.mobile .timeline-right .box:nth-child(6) .connector .vertical-line-mobile { animation-delay: 9s; }  
.mobile .timeline-right > *:nth-child(7) { animation-delay: 9.5s; } 
.mobile .timeline-right .box:nth-child(7) .connector:after { animation-delay: 10s; } 
.mobile .timeline-right .box:nth-child(7) .connector .vertical-line-mobile { animation-delay: 10.5s; } 
.mobile .timeline-right > *:nth-child(8) { animation-delay: 11s; } 
.mobile .timeline-right .box:nth-child(8) .connector:after { animation-delay: 11.5s; } 
.mobile .timeline-right .box:nth-child(8) .connector .vertical-line-mobile { animation-delay: 12s; } */
          

/* KEYFRAMES ********************************************************************************/
/*********************************************************************************************/

@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes stand {
	from { height: 0; opacity: 1; }
	to { height: 100%; opacity: 1; }
}

@keyframes stand-2 {
	from { height: 0; opacity: 1; }
	to { height: 6rem; opacity: 1; }
}

@keyframes grow {
	from { width: 0; opacity: 1; }
	to { width: 5rem; opacity: 1; }
}

/* MEDIA QUERIES *****************************************************************************/
/*********************************************************************************************/

@media (max-width: 1400px) {
	
	.desktop .timeline-right .box-contents img,
	.desktop .timeline-right .box-contents h3 {
		margin-left: 2rem;
	}
	
	.desktop .timeline-right .box-text {
		margin-left: 0;
	}
	
	.desktop .timeline-right .horizontal-line,
	.desktop .timeline-right .dot {
		margin-top: 9rem;
	}
	
	.desktop .timeline-left .horizontal-line,
	.desktop .timeline-left .dot {
		margin-top: -11rem;
	}
	
}

@media (max-width: 1200px) {
	.desktop .timeline-left .horizontal-line,
	.desktop .timeline-left .dot {
		margin-top: -15rem;
	}
	
	.desktop .timeline-left .box-text {
		margin-left: -1rem;
    	margin-right: 2rem;
	}
	
	.section-video .lead {
		padding: 0;
	}
	
	.player { 
		margin: 2rem 3rem 5rem 3rem;
	}
}

@media (max-width: 990px) {
	
	.tablet .timeline-right .box-contents img {
		width: 80%;
	}
	
	.player { 
		margin: 2rem 1rem 5rem 1rem;
	}
	
	.global-header .container,
	.global-breadcrumb .container {
		max-width: 100% !important;
	}
	
}

@media (max-width: 768px) {
	
	.tablet .timeline-right .box-contents img {
		width: 90%;
	}
	
	.tablet .timeline-right .horizontal-line,
	.tablet .timeline-right .dot {
		margin-bottom: 9rem;
	}
	
	.featured {
		box-shadow: none;
	}
	
}

@media (max-width: 600px) {
	
	.featured {
		padding: 4rem 3rem 0 3rem;
	}
	
	.player {
		margin: 2rem 0 5rem 0;
	
	}
	
	.box-contents p {
		font-size: 1rem;
	}
	
	.mobile .timeline-right .box-contents {
		padding: 1rem 0 1rem 0;
	}
	
	.mobile .box-contents h3 {
		font-size: 1.5rem;
	}
	
	/*.section-logos-text {
		padding: 0;
	}*/
		
}

@media (max-width: 474px) {
	
	.featured {
		padding: 4rem 1.5rem 0 1.5rem;
	}
	
	.mobile .box-text {
		padding: 2rem 1.2rem;
	}
	
	.connector.ms-n-large {
		margin-left: 7.5rem;
	}
	
}