main{padding-top:0;}
main section{min-height:50vh;padding:4em 0;display:flex;justify-content:center;align-items:center;}
main section article{width:90%;max-width:1050px;display:flex;justify-content:space-between;align-items:center;}
main section.support-header{background-image:url(/common/images/home/astro-zoom-friends.jpg);background-position:center bottom;background-size:cover;}
main section.support{min-height:auto;}
main section.support div{text-align:center;}

main .hero {
	width:100%;
	max-width:100%;
    height:100vh;
    height:100svh;
	background-image:url(/common/images/home/hero/23-wpz2-springhike.jpg);
	background-position:20% 120%;
    background-size:auto 116%;
}

main .hero article {
    width:100%;
    height:100%;
	position:relative;
}

main .hero article > div {
    width:100%;
    height:65%;
    box-sizing:border-box;
    padding:2rem 1rem;
    position:absolute;
	left:0;
	bottom:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background-color:rgb(0,0,0);

}

main .hero article > div > div {
    height:50%;
	text-align:center;
}

main .hero article > div > div *{
    margin-bottom:3rem;
}

main .hero article > div > div h3 {
    line-height:150%;
}

main .hero article > div > div:last-of-type {
	padding-top:2rem;
	text-align:right;
}

main .hero article > div > div img {
    width:50%;
    height:auto;
}

main .hero article > div > div img:first-of-type {
    width:60%;
    height:auto;
    position:absolute;
    margin:0;
    left:3%;
    bottom:3%;
    z-index:10;
}


main section {
    min-height:50vh;
    padding:4em 0;
    display:flex;
    justify-content:center;
    align-items:center;
}

main section article {
    width:90%;
    max-width:1050px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

main section.support-header {
    background-image:url(/common/images/home/astro-zoom-friends.jpg);
    background-position:center bottom;
    background-size:cover;
}

main section.support {
    min-height:auto;
}

main section.support div {
    text-align:center;
}

@media (min-width:1080px) {
	main .hero {
		background-position:40vw 0;
		background-size:auto 100%;

	}
	main .hero article > div{
		width:50%;
		height:100%;

	}
	main .hero article > div > div{
		padding:3rem 2rem 0 2rem;
	}
	main .hero article > div > div{
		padding:3rem 2rem 0 2rem;
	}
}

@media (max-width:768px) {

    section {
        height:auto;
    }
    main > section article {
        display:block;
    }
    main > section article > div {
        width:90%;
        margin:10% auto;
        display:block;
        text-align:center;
    }
    main > section article > div img {
        width:100%;
        height:auto;
        margin:0 auto;
        display:block;
    }
    main section.support-header {
        background-position:70% bottom;
        background-size:cover;
    }
}