#values {
	position: relative;
	margin-top: 0;
	
	background-color: #000;
	color: #FFF;
}

/*--------------------------------------------------------------------------------*/

#values > .content-wrapper {}
@media (min-width: 900px)	 {
	#values > .content-wrapper {
		padding-top: 100px;
		padding-bottom: 125px;
	}
}
@media (max-width: 899.99px) {
	#values > .content-wrapper {
		padding-top: 75px;
		padding-bottom: 100px;
	}
}

/*--------------------------------------------------------------------------------*/

#values > .content-wrapper > .title,
#values > .content-wrapper > .hook {
	margin: 0 auto;
	
	text-align: center;
	font-family: 'Stretch Pro';
}
#values > .content-wrapper > .title {
	margin-bottom: 25px;
}
#values > .content-wrapper > .hook {
	max-width: 550px;
	margin-bottom: 50px;
	
	text-transform: uppercase;
}
@media (min-width: 900px) {
	#values > .content-wrapper > .title { font-size: 24px; }
	#values > .content-wrapper > .hook { font-size: 40px; }
}
@media (max-width: 899.99px) {
	#values > .content-wrapper > .title { font-size: 18px; }
	#values > .content-wrapper > .hook { font-size: 24px; }
}

/*--------------------------------------------------------------------------------*/

#values > .content-wrapper > .swiper-container { position: relative; }

/*--------------------------------------------------------------------------------*/

#values > .content-wrapper > .swiper-container > .swipe-cta { position: absolute; z-index: 1; }
#values > .content-wrapper > .swiper-container > .swipe-cta > .cur {
	display: block; max-width: 100px; width: 30vw;

	background-color: #F2F2F2;
	background-image: url("../../images/emojis/swipe.png");
	background-position: center;
	background-size: 35% auto;
	background-repeat: no-repeat;
	border-radius: 50%;
}
#values > .content-wrapper > .swiper-container > .swipe-cta > .cur:before {
	content: '';
	display: block;
	padding-top: 100%;
}
#values > .content-wrapper > .swiper-container > .swipe-cta > .cta {
	position: absolute; left: calc(min(30vw, 100px) + 30px); bottom: 15px;

	text-align: left;
	font-family: "Stretch Pro";
}
#values > .content-wrapper > .swiper-container > .swipe-cta > .cta:before {
	content: '';
	position: absolute; top: -100px; left: -5px; transform: rotate(45deg);
	display: block; height: 110px; width: 110px;

	background-image: url("../../images/arrow.gif");
	background-size: contain;
	background-repeat: no-repeat;
}
@media (min-width: 900px) {
	#values > .content-wrapper > .swiper-container > .swipe-cta {}
	#values > .content-wrapper > .swiper-container > .swipe-cta > .cur {}
	#values > .content-wrapper > .swiper-container > .swipe-cta > .cta { width: 150px; }
	@media (min-width: 1200px)	  { #values > .content-wrapper > .swiper-container > .swipe-cta { bottom: -50px; left: calc(50% + 150px); } }
	@media (max-width: 1199.99px) { #values > .content-wrapper > .swiper-container > .swipe-cta { bottom: -50px; left: 350px; } }
}
@media (max-width: 899.99px) {
	#values > .content-wrapper > .swiper-container > .swipe-cta {
		left: calc(50vw + min((50% - 50px), 150px)); top: min((100vw - 75px), 350px); transform: translate(-50%, -50%);
	}
	#values > .content-wrapper > .swiper-container > .swipe-cta > .cta { display: none; }
}

/*--------------------------------------------------------------------------------*/

#values > .content-wrapper > .swiper-container > .swiper { overflow: visible; }