.video-container {float: right; position: relative; width: 100%;}
.video-container:before{background: #F8F8F8; width: 100%; height: calc(100% - 70px); position: absolute; left: 0; top: 0; content: '';}
.video-container .card-wrap .card {background: none; height: auto; border: none; border-radius: 0; padding-left: 16.6666%; position: relative; z-index: 1; opacity: 0; transform: translateY(33%);}
.video-wrapper{width: 100%; max-width: 50%; height: 100vh; position: sticky; top: 170px; left: 100%; display: flex; /*overflow: hidden;*/}
.video-wrapper video{width: 110%; height: 100%; position: absolute; right: -17%; bottom: 0}
.video-cover{width: 100%; height: 100vh; position: relative; overflow: hidden;}


.card-wrapper {width: 900px; height: calc(100vh - 124px); max-width: 50%; padding-left: 8.3333%; display: flex; flex-direction: column; align-items: center; justify-content: center; float: left; position: relative; overflow: hidden;}

.scrolly-video-title {background: #F8F8F8; padding-left: calc(8.333%); position: relative; top: 0; padding-right: 10%; flex: 1 0 100%; float: left; transition: 0.5s; z-index: 99; width: 100%;}
.scrolly-video-title h3 {text-align: center; padding: 30px 0 20px; max-width: 60%; margin: 0 auto;}
.scrolly-video-title.sticky{position: sticky;}

.purpose-intro__left {min-height: 60px; min-width: 100%;}
.purpose-intro__left_wrap {min-height: 436px; margin-top: 0%; display: flex; flex-direction: row; align-items: center; position: relative; flex-direction: column; z-index: 0;}
.purpose-intro__left_wrap .purpose-intro__item {font-size: 20px; font-style: normal; font-weight: 600; line-height: 26px; letter-spacing: 0.25px; height: 0;}
.purpose-intro__left_wrap .purpose-intro__item.active {height: auto;}

.card-wrap {display: flex; align-items: center; justify-content: space-evenly; position: absolute; left: 0%; top: 0%; right: 0%; bottom: 0%; z-index: 1; width: 100%; height: 100%; height: 50%; top: 50%;}
.section-test .scroll-content-item__image {position: relative; opacity: 0;}


.pin-spacer{width: 49vw !important; padding-left: 0 !important;}
.card-wrapper{width: 49vw !important; padding-left: 0 !important; max-width: nont !important;}


/* pagination */
.section_nav{display: none}
.section_nav, .card-pagination {position: absolute; padding-left: 4%; float: left; top: 50%; bottom: 0; height: auto; width: auto; justify-content: center; right: 95vw; transform: translateY(-50%);}
.section_nav a, .card-pagination a {background: #ccc; width: 14px; height: 20px; display: inline-block; margin: 2px 0; border-radius: 50px; border: 2px solid #ccc; transition: all 1s;}
.section_nav a.active, .card-pagination a.active {background: #AE42D5; height: 35px; border: 2px solid #AE42D5;}




/* video below module */
.module-Ticker{clear:both;}


@media only screen and (min-width: 2200px){
	.card-wrap{height: 20%; transform: translateY(-50%)}
    .video-container .card-wrap .card {transform: translateY(100%);}
}

@media only screen and (min-width: 1100px) and (max-width: 1800px){
	.scrolly-video-title h3{max-width: 80%}
}

@media only screen and (max-width: 1024px){
	.card-pagination{display: none}
	.scrolly-video-title.sticky{position: relative;}
	.scrolly-video-title{padding: 0 30px; z-index: 0;}
	.scrolly-video-title h3{max-width: 100%; font-size: 3.6rem; line-height: 4.2rem; letter-spacing: 0.25px; font-weight: 600; padding: 0;}

	.video-container{overflow: hidden;}
	.video-container .pin-spacer{width: 100% !important; padding: 0 !important; height: auto !important;}
	.video-container .card-wrapper{width: 100% !important; max-width: 100%; height: auto !important; max-height: none !important; position: relative !important;}
	.video-container .card-wrapper .card-wrap{width: 100%; height: auto; position: static; opacity: 0; transform: translateY(30px); transition: 0.4s;}
	.video-container .card-wrapper .card-wrap.active{opacity: 1; transform: translateY(0);}
	.video-container .card-wrapper .card-wrap .card{width: 100%; text-align: center; padding: 50px 8.3333% 0; opacity: 1 !important; transform: none !important;}
	.video-container .card-wrapper .card-wrap .card .purpose-intro__left_wrap{min-height: auto;}
	.video-container .card-wrapper .card-wrap .card .purpose-intro__left_wrap .purpose-intro__item{height: auto;}

	.video-container .video-wrapper{width: 100%; max-width: none; height: auto !important; padding-bottom: 0; position: static; overflow: hidden;}
	.video-container .video-wrapper .video-cover{height: auto; position: relative; overflow: hidden;}
	.video-container .video-wrapper video{width: 115%; height: 100%; position: relative; right: 5%; bottom: -10%; position: relative;}
}


@media only screen and (max-width: 767px){
	.scrolly-video-title h3{max-width: 100%; font-size: 2.7rem; line-height: 3.2rem;}
}



@media only screen and (max-height: 768px){
	.card-wrap{height: 70%;}
}