/*
* Homepage styles
* I have split this out to make it easier to itegrate back into your main stylesheets
*/

.tw-hero.home-hero h1,
.tw-hero.home-hero h2,
.tw-hero.home-hero h3,
.tw-hero.home-hero .tw-button,
.tw-hero.home-hero .tw-hero-bg {
	opacity: 0;
}

.tw-hero.home-hero h3 {
	font-size: 15px;
	line-height: 100%;
	color: white;
	margin-bottom: 40px;
}

.tw-hero.home-hero h1,
.tw-hero.home-hero h2,
.tw-hero.home-hero h3 {
	width: 100%;
	max-width: 520px;
	position: relative;
}

.tw-hero.home-hero h2 {
	max-width: 600px;
	margin-top: 20px;
}

@-webkit-keyframes heroImageRotate {
	0% {
		-webkit-transform: rotate(-2deg) scale(1);
	}
	50% {
		-webkit-transform: rotate(3deg) scale(0.95);
	}
}

@keyframes heroImageRotate {
	0% {
		transform: rotate(-2deg) scale(1);
	}
	50% {
		transform: rotate(2deg) scale(0.96);
	}
}


.tw-hero.home-hero .tw-hero-bg {
	overflow: hidden;
}

.tw-hero.home-hero .tw-hero-bg img {
	width: 150%;
	position: absolute;
	bottom: -50px;
	left: auto;
	right: -50px;
	-webkit-transform: rotate(-2deg) scale(1);
	transform: rotate(-2deg) scale(1);
	transform-origin: center center;
	-webkit-animation: heroImageRotate 14s ease-in-out infinite;
	animation: heroImageRotate 14s ease-in-out infinite;
}


.tw-hero.home-hero .sectionOne h1,
.tw-hero.home-hero .sectionOne h2,
.tw-hero.home-hero .sectionThree h1,
.tw-hero.home-hero .sectionThree h2 {
	width: 100%;
	max-width: 640px;
	position: relative;
}

.tw-hero.home-hero {
	background: linear-gradient(180deg, #142B65 160px, #422355 100%);
}


.tw-hero.home-hero .tw-hero-bg:before {
	display: block;
	content: "";
	width: 100%;
	height: 200px;
	position: absolute;
	bottom: -2px;
	left: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #422355 100%);
}

.tw-hero.home-hero .sectionOne,
.tw-hero.home-hero .sectionTwo,
.tw-hero.home-hero .sectionThree {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.tw-hero.home-hero .sectionOne {
	pointer-events: all;
}

.tw-hero.home-hero .sectionOne.no-pointer-events,
.tw-hero.home-hero .sectionTwo.no-pointer-events {
	pointer-events: none !important;
}

.tw-hero.home-hero .sectionTwo,
.tw-hero.home-hero .sectionThree {
	opacity: 0;
	pointer-events: none !important;
}

.tw-hero.home-hero .sectionTwo.add-pointer-events,
.tw-hero.home-hero .sectionThree.add-pointer-events {
	pointer-events: all !important;
}


.tw-hero.home-hero .sectionOne h1,
.tw-hero.home-hero .sectionOne h2,
.tw-hero.home-hero .sectionOne .tw-button,
.tw-hero.home-hero .tw-hero-bg,
.tw-hero.home-hero .sectionTwo h1,
.tw-hero.home-hero .sectionTwo h2,
.tw-hero.home-hero .sectionTwo .tw-button,
.tw-hero.home-hero .sectionThree h1,
.tw-hero.home-hero .sectionThree h2,
.tw-hero.home-hero .sectionThree .tw-button {
	opacity: 0;
	transition: opacity 0.4s;
}

.tw-hero.home-hero .sectionTwo h2 {
	margin-bottom: 30px;
}

.tw-hero.home-hero.animateIn .sectionOne h1,
.tw-hero.home-hero.animateIn .sectionOne h2,
.tw-hero.home-hero.animateIn .sectionOne .tw-button,
.tw-hero.home-hero.animateIn .sectionTwo h1,
.tw-hero.home-hero.animateIn .sectionTwo h2,
.tw-hero.home-hero.animateIn .sectionTwo .tw-button,
.tw-hero.home-hero.animateIn .sectionThree h1,
.tw-hero.home-hero.animateIn .sectionThree h2,
.tw-hero.home-hero.animateIn .sectionThree .tw-button,
.tw-hero.home-hero.animateIn .tw-hero-bg {
	opacity: 1;
	transition: opacity 1.5s;
}

.tw-hero.home-hero .sectionTwo .tw-hero-content {
	align-items: flex-end;
	text-align: right;
}

.tw-hero.home-hero .sectionTwo h2 {
	height: 45px;
}

.tw-hero.home-hero .sectionTwo h2 span {
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
}

.tw-hero.home-hero .tw-hero-indicator {
	opacity: 0;
}


/* ANIMATIONS */

.tw-hero.home-hero.animateIn .tw-hero-bg {
	transition-delay: 1.3s;
}

.tw-hero.home-hero.animateIn .tw-hero-indicator {
	opacity: 1;
	transition: opacity 1s 12s;
}


/* section ONE animations */
.tw-hero.home-hero.animateIn .sectionOne h1{
	transition-delay: 0.7s;
}

.tw-hero.home-hero.animateIn .sectionOne h2 {
	transition-delay: 0.9s;
}

.tw-hero.home-hero.animateIn .sectionOne .tw-button,
.tw-hero.home-hero.animateIn .sectionTwo .tw-button {
	transition-delay: 1.1s;
}

.tw-hero.home-hero.animateIn .sectionOne {
	opacity: 0;
	transition: opacity 1s;
	transition-delay: 5s;
}


/* section TWO animations */
.tw-hero.home-hero.animateIn .sectionTwo {
	opacity: 1;
	transition: opacity 0.4s;
	transition-delay: 5s;
}

.tw-hero.home-hero.animateIn .sectionTwo h1 {
	transition-delay: 5.7s;
}

.tw-hero.home-hero.animateIn .sectionTwo h2 {
	transition-delay: 5.9s;
}

.tw-hero.home-hero.animateIn .sectionTwo .tw-button {
	transition-delay: 6.1s;
}

.tw-hero.home-hero .sectionTwo h2 span.message-one {
	opacity: 1;
}

.tw-hero.home-hero .sectionTwo h2 span.message-two,
.tw-hero.home-hero .sectionTwo h2 span.message-three {
	opacity: 0;
}

.tw-hero.home-hero.animateIn .sectionTwo h2 span.message-one {
	opacity: 0;
	transition: opacity 1s 8s;
}

@-webkit-keyframes h2InOut {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes h2InOut {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.tw-hero.home-hero.animateIn .sectionTwo h2 span.message-two {
	opacity: 1;
	transition: opacity 1s 8.5s;
	-webkit-animation: h2InOut 4s forwards 8.5s;
	animation: h2InOut 4s forwards 8.5s;
}

.tw-hero.home-hero.animateIn .sectionTwo h2 span.message-three {
	opacity: 1;
	transition: opacity 1s 12s;
}

.tw-hero.home-hero.animateIn .sectionTwo.animateOut {
	opacity: 0 !important;
	transition: opacity 1s 0s !important;
}


/* section THREE animations */
.tw-hero.home-hero.animateIn .sectionThree {
	opacity: 1;
	transition: opacity 0.4s;
	transition-delay: 15s;
}

.tw-hero.home-hero.animateIn .sectionThree h1 {
	transition-delay: 15.7s;
}

.tw-hero.home-hero.animateIn .sectionThree h2 {
	transition-delay: 15.9s;
}

.tw-hero.home-hero.animateIn .sectionThree .tw-button {
	transition-delay: 16.1s;
}


@media(max-width: 600px){
	.tw-hero.home-hero h1 {
		font-size: 25px;
		line-height: 31px;
	}
	.tw-hero.home-hero h2 {
		font-size: 17px;
		line-height: 25px;
	}
}

@media(min-width: 768px){
	.tw-hero.home-hero .tw-hero-bg img {
		width: 120%;
	}
	.tw-hero.home-hero .sectionTwo h2 {
		height: 75px;
	}
}

@media(min-width: 1024px){
	.tw-hero.home-hero .tw-hero-bg img {
		width: 100%;
	}
	.tw-hero.home-hero h3 {
		font-size: 25px;
	}
}