.advert_pane {
    z-index: 0;
    height: calc(100% - var(--hh));
}
@media (min-width: 640px) {
 .advert_pane {
	position: sticky;
    top: var(--hh);
 }	
}

.advert_pane > div {
    height: 100%;
}	
.advert_pane p {
	font-size: min(2vh,.9rem);
    line-height: 1.5;
    color: #555;
    margin-bottom: 3vh;
}

h1, h3 {	
	font-family: "Roboto", arial, sans-serif;
	font-weight: 300;
	font-size: min(8vmin, 4vh);
	line-height: 1.15em;
	margin: 0 0 2vh;
	text-align: center;
}

@media (max-width: 1024px) {
 .advert_pane p {
	display: none;
 }
 h1, h3 {
	margin: 0 0 4vh;
 }	
}

@media (min-width: 800px) and (min-height: 400px) { 
 .advert_pane .btns {
	justify-content: start;
 }	
}

.anim-txt {	
    display: inline-flex;
    overflow: hidden;
	height: 1.2em;
	flex-direction: column;
	align-items: center;
}
.anim-txt > span {
	white-space: nowrap;
	animation: v-scroll 7.5s infinite;
}
@keyframes v-scroll {
	0% {transform: translateY(-265%); opacity: 0;}
	2.5%,30.5% {transform: translateY(-200%); opacity: 1;}
	33.25% {opacity: 0.5;}
	36%,64% {transform: translateY(-100%); opacity: 1;}
	66.75% {opacity: 0.5;}
	69.5%,97.5% {transform: translateY(0%); opacity: 1;}
	100% {transform: translateY(70%); opacity: 0;}
}

@media (min-width: 800px) {					 /* and (min-height: 400px) */
 h1, h3 {
	font-size: min(5vh, 2.4rem);
	text-align: left;
 }
 .btns a {
    font-size: 1.1rem;
 }
 .anim-txt {	
	align-items: flex-start;
 }	
}
@media (min-width: 1024px){
 h1, h3 {
	font-size: min(5vh, 2.1rem);
 }
}
@media (min-width: 1440px) and (min-height: 600px) {
 h1, h3 {
	font-size: min(6vh, 2.75rem);
 }
}

@supports (animation-timeline: scroll()) {

	section:nth-of-type(2) {
		view-timeline: --section2-tl block;
	}
	
    .advert_pane {
		animation: ad_pane-progress .1ms linear both;
		animation-timeline: --section2-tl;
		animation-range: entry 10%;	
	}
	@keyframes ad_pane-progress {
		to {
		  opacity: .2;
		  filter: blur(2px);
		}
	}	

}