/* ==========================================================================
CUSTOM RESPONSIVE CSS
========================================================================== */

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.line-segment.line-segment-left {
	    right: -4px;
	    left: initial;
	}

	.line-segment.line-segment-right {
	    left: -4px;
	}

	.header-content-inner {
	    padding: 4rem;
	}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.timeline-container .panel {
	    /*width: 100%;
	    min-width: 100%;*/
	}

	/*.timeline-container .panel-1{
	    justify-content: center;
	    align-items: center;
	    width: 100%;
	    min-width: 60%;
	    max-width: 60%;
	}*/

	.background-chart {
		background-size: 4600px 100%;
	    background-position: 1400px center;
	}


	.timeline-logo {
	    max-width: 500px;
	}

	.header-content-inner {
	    padding: 4rem 6rem;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	
 }

@media screen and (max-height: 500px) {
	header.full-height-section, section.full-height-section {
		min-height: 100%;
		height: auto;
		padding-top: 100px;
		padding-bottom: 100px;
	}

	header.timeline-full-height-section, section.timeline-full-height-section {
		min-height: 100%;
		height: auto;
		/*padding-top: 100px;
		padding-bottom: 100px;*/
	}
}