@charset "UTF-8";
/* CSS Document */

div.c3_div_text_intro {
	
	display: block;
	position: relative;
	
	header {
		display: block;
		position: relative;
		height: 150vh;
		background-image: url("images/down_arrow.gif");
		background-repeat: no-repeat;
		background-position: center calc(45vh - 50px);
	}
	
	h2, h3, p {
		display: block;
		color: var(--c3-color-slate);
		width: 100%;
		text-align: center;
		font-size: 30px;
		line-height: 40px;
		padding: 20px 20% 20px 20%;
	}
	
	h2 { 
		position: sticky !important; 
		top: 0px; 
        padding-top: calc(50vh - 20px); 
		/*transform: translateY(calc(50vh - 20px));*/
		font-size: 50px;
		line-height: 60px;
	}
	
	p {	padding-top: 30px; padding-bottom: 100px; font-size: 20px; line-height: 30px; color: var(--c3-color-charcoal) }
	
}

@media only screen and (max-width: 770px) {
    div.c3_div_text_intro {
        
        header {
            background-position: center calc(25vh - 50px);
        }

        h2, h3, p {
            font-size: 20px;
            line-height: 30px;
        }

        h2 { 
            font-size: 40px;
            line-height: 50px;
        }

        p {	font-size: 14px; line-height: 20px; }

    }
}

@media only screen and (max-width: 460px) {
    div.c3_div_text_intro {
        h2, h3, p {
            font-size: 18px;
            line-height: 26px;
        }

        h2 { 
            font-size: 26px;
            line-height: 34px;
        }

        p {	font-size: 14px; line-height: 20px; }

    }
}