.pb10{
	padding-bottom: 10rem;
}
#hero{
	position: relative;
	padding-top: 10%;
	padding-bottom: 70%;
	overflow: hidden;
}
#hero:before{
	content: '';
	position: absolute;
	background: var(--primary-color);
	width: 130%;
	height: 60%;
	bottom: -34%;
	left: -10%;
	transform: rotate(-16deg);
}
#primary-msg{
	max-width: 280px;
}
#primary-msg h1{
	font-size: 2.6rem;
	line-height: 120%;
}
#hero-banner{
	position: absolute;
	width: 100%;
	top: 110%;
	right: 0%;
	transform: rotate(-16deg);
}
@media (min-width: 600px){
	#hero:before{
		bottom: -28%;
	}
}
@media (min-width: 840px){
	#hero{
		padding-top: 8%;
		padding-bottom: 28%;
	}
	#hero:before{
		width: 120%;
		height: 70%;
		bottom: -40%;
	}
	#hero-banner{
		width: 70%;
		top: 59%;
	}
}
@media (min-width: 1240px) {
	#hero {
		padding-top: 6%;
		padding-bottom: 25%;
	}
	#hero:before{
		bottom: -35%;
	}
	#hero-banner{
		top: 37%;
	}
}
@media (min-width: 1600px){
	#hero {
		padding-bottom: 19%;
	}
	#hero:before{
		bottom: -37%;
		height: 80%;
	}
	#hero-banner{
		top: 0%;
	}
}
#features{
	background: linear-gradient(to bottom, var(--primary-color) 0%, var(--secondary-color) 100%);
	color: #FFF;
	position: relative;
	padding-top: 1px;
}
#features .section-title{
	border-color: #FFF;
}
#features video{
	border-radius: 0.7rem;
}
#features .content{
	text-align: center;
}
#features.slanted-bottom:after{
	background: var(--secondary-color);
}
@media (min-width: 1024px){
	#features .content{
		text-align: left;
	}
	#features .section-title{
		text-align: left;
		margin-top: 4rem;
	}
}
@media (min-width: 1300px){
	#features .section-title{
		margin-top: 6rem;
	}
}
.slanted-top,
.slanted-both,
.slanted-bottom{
	position: relative;
	z-index: 1;
}
.slanted-both,
.slanted-top{
	margin-top: 10rem;
}
.slanted-both,
.slanted-bottom{
	margin-bottom: 10rem;
}
.slanted-top:before,
.slanted-bottom:after,
.slanted-both:before,
.slanted-both:after{
	content: '';
	position: absolute;
	background: var(--primary-color);
	width: 100%;
	top: 0;
	left: 0;
	padding-top: 10%;
	transform: skewY(-5deg);
	transform-origin: left;
	z-index: -1;
}
.slanted-bottom:after,
.slanted-both:after{
	top: auto;
	bottom: 0;
	transform: skewY(-5deg) translateY(100%);
}

@-webkit-keyframes fadeInLeftBig {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-2000px, 0, 0);
		transform: translate3d(-2000px, 0, 0)
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes fadeInLeftBig {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-2000px, 0, 0);
		transform: translate3d(-2000px, 0, 0)
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

.fadeInLeftBig {
	-webkit-animation-name: fadeInLeftBig;
	animation-name: fadeInLeftBig
}

@-webkit-keyframes fadeInRightBig {
	from {
		opacity: 0;
		-webkit-transform: translate3d(2000px, 0, 0);
		transform: translate3d(2000px, 0, 0)
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

@keyframes fadeInRightBig {
	from {
		opacity: 0;
		-webkit-transform: translate3d(2000px, 0, 0);
		transform: translate3d(2000px, 0, 0)
	}
	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0)
	}
}

.fadeInRightBig {
	-webkit-animation-name: fadeInRightBig;
	animation-name: fadeInRightBig
}

@-webkit-keyframes fadeOutLeftBig {
	from {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(-2000px, 0, 0);
		transform: translate3d(-2000px, 0, 0)
	}
}

@keyframes fadeOutLeftBig {
	from {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(-2000px, 0, 0);
		transform: translate3d(-2000px, 0, 0)
	}
}

.fadeOutLeftBig {
	-webkit-animation-name: fadeOutLeftBig;
	animation-name: fadeOutLeftBig
}

@-webkit-keyframes fadeOutRightBig {
	from {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(2000px, 0, 0);
		transform: translate3d(2000px, 0, 0)
	}
}

@keyframes fadeOutRightBig {
	from {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(2000px, 0, 0);
		transform: translate3d(2000px, 0, 0)
	}
}

.fadeOutRightBig {
	-webkit-animation-name: fadeOutRightBig;
	animation-name: fadeOutRightBig
}

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
#quiz{
	overflow: hidden;
}
#quiz .content{
	padding: 5rem 3rem;
}
#quiz .slides>li:not(.animated) {
  display: none
}
#quiz .content h3{
	margin-bottom: 3rem;
}
#quiz input[type=radio] + label{
	width: 100%;
	margin: 0;
	border: 1px solid var(--neutral-color-5);
	padding: 1rem;
}
#quiz input[type=radio] + label:before,
#quiz input[type=radio] + label:after{
	display: none;
}
#quiz .input-field input[type=radio]:checked + label{
	border-color: #111A43;
}
.dark #quiz .input-field input[type=radio]:checked + label{
	border-color: #FFF;
}
#quiz label img{
	width: 100px;
}
#quiz label img.side{
	width: 50px;
	vertical-align: middle;
	margin: 0 1rem;
}
#quiz .error-color{
	display: inline-block;
}

#stories .card{
	margin: 1rem;
	height: calc(100% - 2rem);
}
#stories .card h4{
	margin-bottom: 0;
}