@media only screen {
	.scrollmagic-pin-spacer {
		margin: 0 0 70px !important;
	}

	.side-scroller {
		position: relative;
		width: 100%;
		height: 100vh;
		margin-bottom: 160px;
		overflow: hidden;
	}

	.side-scroller .story {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		transform: translateX(101%);
		overflow: hidden;
	}

	.side-scroller .story.active {
		transform: translateX(0%);
	}

	.side-scroller .story.is-playing .media {
		display: none;
	}


	.side-scroller .story .media {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: translateX(-100%);
	}

	.side-scroller .story.active .media {
		transform: translateX(0%);
	}

	.side-scroller .story video {
		position: absolute;
		width: 100vw;
		height: 100vh;
		object-fit: cover;
	}

	.side-scroller .story img {
		display: inherit;
		max-width: 100%;
	}

	.side-scroller .contain {
		position: absolute;
		top: 0;
		left: 0; 
		right: 0; 
		margin-left: auto;
		margin-right: auto;
		width: 90%;
		max-width: 90%;
		box-sizing: border-box;
		padding: 0 15px;
	}

	.side-scroller .credits-container {
		z-index: 2;
	}

	.side-scroller .slide.inactive-slide .credits-container .credits {
		height: 0;
		opacity: 0;
	}

	.side-scroller .text {
		position: absolute;
		right: 0;
		top: 0;
		left: 0; 
		right: 0; 
		margin-left: auto; 
		margin-right: auto; 
		opacity: 0;
		font-family: var(--display-font-family);
		transform: translateX(0%) translateY(20%);
	}

	.side-scroller .text p {
		font-size: 1.875rem;
		line-height: 2.375rem;
	}

	.side-scroller .text h1 {
		line-height: var(--font-size-h1);
		margin-bottom: 0;
	}

	.side-scroller .text h2 {
		line-height: var(--font-size-h2);
		margin-bottom: 0;
	}

	.side-scroller .text h3 {
		font-size: var(--font-size-h3);
		line-height: var(--font-size-h3);
		margin-bottom: 0;
	}

	.side-scroller .text h4 {
		font-size: 1rem;
		line-height: 1rem;
		margin-bottom: 0;
	}

	.side-scroller .text h5 {
		font-size: .875rem;
		line-height: .875rem;
		margin-bottom: 0;
	}

	.side-scroller .text h6 {
		font-size: .75rem;
		line-height: .75rem;
		font-family: var(--primary-font-family);
		margin-bottom: 0;
	}

	.side-scroller .text pre {
		color: var(--green);
		font-size: 1.333rem;
		font-style: italic;
	}

	.side-scroller .story.active .text {
		opacity: 1;
	}

	.side-scroller .indicator {
		position: absolute;
		left: 50%;
		bottom: 95px;
		width: 315px;
		height: 10px;
		transform: translateX(-50%);
		overflow: hidden;
		border-radius: 5px;
		background-color: #757575;
	}

	.side-scroller .indicator span {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		transform: translateX(-100%);
		overflow: hidden;
		border-radius: 5px;
		background-color: var(--green);
	}
}

@media only screen and (min-width: 641px) {
	.scrollmagic-pin-spacer {
		margin: 0 0 150px !important;
	}

	.side-scroller .contain {
		position: absolute;
		top: 50%;
		left: 75%;
		transform: translate(-50%, -50%);
		width: 100%;
		max-width: 1200px;
		box-sizing: border-box;
		padding: 0 15px;
		margin: auto;
	}

	.side-scroller .text {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateX(100%) translateY(-50%);
		opacity: 0;
		max-width: 50%;
	}

	.side-scroller .text p {
		font-size: 2.125rem;
		line-height: 2.5rem;
	}

	.side-scroller .text h3 {
		font-size: var(--font-size-h3);
		line-height: var(--font-size-h3);
	}

	.side-scroller .text h4 {
		font-size: 1.5rem;
		line-height: 1.5rem;
	}

	.side-scroller .text h5 {
		font-size: 1.125rem;
		line-height: 1.125rem;

	}

	.side-scroller .text h6 {
		font-size: 1rem;
		line-height: 1rem;
		font-family: var(--primary-font-family);
	}

	.side-scroller .story.active .text {
		transform: translateX(0%) translateY(-50%);
	}
}