#company-scroller {
	height: 697px;
    max-height: 1200px;
	overflow: scroll;
    padding-left: 3rem;
	padding-bottom: 2rem;
	pointer-events:none;
	opacity:0;
}

#company-scroller::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

#company-scroller .placeholder-image {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);	
	display: none;
	transition: 0.35s;

}

#company-scroller .controls{
	position:absolute;
	right:0;
	top:50%;
    transform: translateY(-50%);
	z-index:9999;
	pointer-events:auto;
}

#company-scroller .controls .arrow{
	cursor:pointer;
	width:32px; 
	height:32px;
	margin:20px;
}

#company-scroller .controls .arrow.hidden{
	pointer-events:none;
	opacity:0;
}

.arrow-up{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M24.784 13.464v1.476l-8.352-7.992V27h-1.08V6.948L7 14.94v-1.476l8.892-8.46 8.892 8.46z' fill='%23fff'/%3E%3C/svg%3E");
}

.arrow-down{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M24.784 18.536V17.06l-8.352 7.992V5h-1.08v20.052L7 17.06v1.476l8.892 8.46 8.892-8.46z' fill='%23fff'/%3E%3C/svg%3E");
}

@media (min-width: 981px) {
	#company-scroller {
		padding-left: 50%;
	    height: 75vh;
	}
	
	#company-scroller .placeholder-image {
		display: block;
	}
}

#company-scroller .spacer {
	height: 30vmin;
}

#company-scroller .placeholder-image.hidden {
	opacity: 0;
}

#company-scroller .dp_field_intro {
	margin-bottom: 2rem;
    margin-right: 60px;
}

#company-scroller .company {
    /*
    scroll-snap-align: center;
    scroll-snap-stop: always;
	*/
	padding: 1rem 0;
    padding-right: 60px;
}

#company-scroller .company .title.collapsed {
	opacity: 0.8;
}

#company-scroller .company .expanded {
	display: none;
	transition: 0.35s;
	margin-left: -2rem;
	padding-left: 2rem;
	position: relative;
}

#company-scroller .company .expanded:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background: #fff;
	content: '';
	display: block;
	transform-origin: bottom;
	transform: scaleY(0);
	opacity: 0;
	transition: 0.65s;
}

#company-scroller .company .dp_field_title {
	margin: 0.25em 0;
}

#company-scroller .company .dp_field_title .exit-icon {
	width: 0.9em;
	height: 0.9em;
	margin: 0 0 -0.1em 0.1em;
}

#company-scroller .company .dp_field_link {
	margin-top: 1.5em;
	display: inline-block;
	transition: 0.45s cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

#company-scroller .company .dp_field_link:hover {
	opacity: 0.75;
}

#company-scroller .company.active {
	/*margin: 4rem 0;*/
}

#company-scroller .company.active .collapsed {
	display: none;
}

#company-scroller .company.active .expanded {
	display: block;
	opacity: 0;
	transform: translate(0, 2rem);
}

#company-scroller .company.active.animate .expanded {
	opacity: 1;
	transform: translate(0, 0);
}

#company-scroller .company.active.animate .expanded:after {
	transform: scaleY(1);
	opacity: 1;
}

.company-bg-image {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	transition: 0.5s cubic-bezier(0.785, 0.135, 0.150, 0.860);
	opacity: 0;
	transform: scale(1.1);
}

.company-bg-image.animate {
	opacity: 1;
	transform: scale(1);
}