/* Struggle block */
.hp-struggle{background: var(--blue); margin: 0; display: block; width:100%; padding: 60px 30px}
.hp-struggle h2{color: #fff; text-transform: uppercase; text-align:center; font-size:3rem}
.hp-struggle h3{color: #fff; text-transform: uppercase; text-align:center; font-size:1.5rem}

.struggle-flex{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; max-width: 1200px; margin: 0 auto}
.struggle-flex > div{width:100%; max-width: 49%; text-align: center}

.struggle-flex ul{list-style: none; padding: 0; margin: 0; width:100%}
.struggle-flex li{background-image: url("../images/cf-icon-white.svg"); background-repeat: no-repeat; background-position: left 15px center; background-size: 30px; width:100%; text-align: left; font-weight: 700; color: #000; text-transform: uppercase; margin: 0 0 5px}
.struggle-flex li > div{background: #fff; padding: 8px 15px; border-radius:100px; margin: 0 0 0 60px; font-size:0.9rem}

.hp-headings-wrap h3{color: #fff; text-shadow:0 0 3px rgb(0,0,0,0.7)}
.hp-headings-wrap a{color: #fff}
.hp-search-subheading{font-size: 1.5rem}

.hp-splash-search{padding: 200px 0 60px; text-align: center; display: block}
.hp-splash-search .initial-pc-search{margin:0 auto}

@media only screen and (max-width: 1200px) {
	.struggle-flex{max-width: 600px}
	.struggle-flex > div{max-width: 100%}
}

@media only screen and (max-width: 600px) {
	.hp-splash-search{padding: 100px 0 30px}
	.hp-struggle h2{font-size:2rem}
	.hp-search-subheading{font-size: 1.2rem}
}


/* CHOICES BLOCK */
.hp-choices{background-color: var(--pink); display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; border-top:5px solid var(--purple); border-bottom:5px solid var(--purple)}
.hp-choices > div{width:100%; max-width: 50%; padding: 60px 0}
.hp-choices > div:last-of-type{background-color: var(--blue)}
.hp-choices h2{font-size: 3rem; line-height: 1; color: #fff; text-align: center; text-transform: uppercase}
.hp-choices img{width:100%; max-width: 300px; opacity: 0.5}

.hp-choices .hp-account-button{min-width:150px; max-width:150px; margin: 30px auto 0; display: inline-block; padding: 7px}

.login-button-home{color: #fff !important; position: absolute; right:80px; top:100px; font-size:1.2rem}

.hp-choices > div:first-of-type{text-align: right}
.hp-choices > div:first-of-type .hp-account-button{background-color: var(--blue)}

.choice-container{width:100%; max-width: 600px; text-align: center; display: inline-flex; justify-content: center; align-items: center}

@media only screen and (max-width: 900px) {
	.hp-choices > div{max-width: 100%}
	.choice-container{width:100%; max-width: inherit}
	.login-button-home{top:40px}
}
@media only screen and (max-width: 700px) {
	.login-button-home{top:5px; right: inherit; left:10px; font-size:0.9rem}
	.login-button-home i{display: none}
	.hp-choices h2{font-size: 2.4rem}
}



/* GET INVOLVED BLOCK */
.hp-involved{background: var(--pink); margin: 0; display: flex; width:100%; padding: 60px 30px; justify-content: center; align-items: center}
.hp-involved > div{width:100%}
.hp-involved h2{color: #fff; text-transform: uppercase; text-align:center; font-size:3rem}
.hp-involved h3{color: #fff; text-transform: uppercase; text-align:center; font-size:1.5rem}

.involved-flex{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; max-width: 1200px; margin: 0 auto}
.involved-flex > div{width:100%; max-width: 49%; text-align: center}

.involved-flex ul{list-style: none; padding: 0; margin: 0; width:100%}
.involved-flex li{width:100%; text-align: left; font-weight: 700; color: #000; text-transform: uppercase; margin: 0 0 5px}
.involved-flex li > div{background: #fff; padding: 8px 15px; border-radius:100px; margin: 0; font-size:1rem; display: inline-block; width:90%}
.involved-flex .brush{font-family: "Water Brush", cursive; font-weight: 400;font-style: normal; font-size:2.8rem; color: #fff; display: inline-block; min-width:40px}
.hp-involved .hp-account-button{background-color: var(--blue)}



@media only screen and (max-width: 1200px) {
	.involved-flex{max-width: 600px}
	.involved-flex > div{max-width: 100%}
}

@media only screen and (max-width: 600px) {
	.hp-involved h2{font-size:2rem}
	.involved-flex li > div{max-width: 80%}
}


/* NOT READY BLOCK */
.hp-notready{background-color: var(--pink); display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; border-top:5px solid var(--purple); border-bottom:5px solid var(--purple)}
.hp-notready > div{width:100%; max-width: 50%; padding: 60px 0}
.hp-notready > div:last-of-type{background-color: var(--blue)}
.hp-notready h2{font-size: 2rem; line-height: 1; color: #fff; text-align: center; text-transform: uppercase; margin: 0 0 60px}
.hp-notready h3{font-size: 1.5rem; line-height: 1; color: #fff; text-align: center; text-transform: uppercase; margin: 30px 15px}
.hp-notready img{width:100%; max-width: 240px}

.hp-notready .hp-account-button{min-width:150px; max-width:150px; margin: 30px auto 0; display: inline-block}

.hp-notready > div:first-of-type{text-align: right}
.hp-notready > div:first-of-type .hp-account-button{background-color: var(--blue)}

.hp-notready .choice-container{width:100%; max-width: 600px; text-align: center; display: inline-flex; margin: 0 30px; justify-content: center; align-items: center}


/* MINIMUM WIDTH */
@media only screen and (min-width: 1000px) {
	.hp-struggle{min-height: 100vh}
	.hp-choices{min-height: 100vh}
	.hp-authority{min-height: 100vh}
	.choice-container{min-height: 100vh}
	.hp-involved{min-height: 100vh}
}




@media only screen and (max-width: 1200px) {
	.hp-notready > div{max-width: 100%}
	.hp-notready .choice-container{width:100%; max-width: inherit; margin: 0}
}
@media only screen and (max-width: 700px) {
	.hp-notready h2{margin-bottom: 30px}
	.hp-notready h3{margin: 0 15px}
}


/* HOME PAGE AUTHORIY BLOCK */
.hp-authority{background-color:var(--pink); display: flex; justify-content: center; align-items: center}
.hp-authority > div{width:100%}
.hp-authority > div > div:first-of-type{max-width: 1200px; margin: 0px auto; padding: 60px 30px; display: block; text-transform: uppercase; text-align: center; font-size:2rem; line-height: 1; font-weight: 700; color: #fff}
.hp-authority p{margin: 0; padding: 0 0 20px}
.hp-authority p:last-of-type{padding:0}

.hp-authority .hp-account-button{display:inline-block; background-color: var(--blue); margin: 0 0 60px}
@media only screen and (max-width: 700px) {
	.hp-authority > div:first-of-type{font-size:1.6rem}
}

.hp-account-button{transition:all 300ms ease; border:3px solid rgb(255,255,255,0)}
.hp-account-button:hover{border:3px solid rgb(255,255,255,1)}