h1.top {
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 font-size: max(5vw, 5rem);
	 line-height: 1;
	 letter-spacing: 0;
	 color: var(--gfColors-slate100);
	 font-family: var(--gfVars-thirstyFont);
	 margin:1em 0;
}
 h1.top span {
	 color: var(--gfColors-navy);
	 font-family: var(--gfVars-bodyFont);
	 text-transform: uppercase;
	 letter-spacing: 0.1em;
	 font-size:0.3em;
	 display:block;
	 margin-bottom:1em;
}
 @media (min-width: 1200px) {
	 main {
		 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Ccircle cx='300' cy='300' r='300' fill='%23f3f5f8'%3E%3C/circle%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Ccircle cx='300' cy='300' r='300' fill='%23f3f5f8'%3E%3C/circle%3E%3C/svg%3E");
		 background-size: 350px 350px;
		 background-position-y: .3%, 9%;
		 background-position-x: calc(100% + 200px), calc(0% + -153px);
		 background-repeat:no-repeat;
		 margin-bottom: 0;
		 padding-bottom: 4rem;
		 padding-right:180;
	}
}


h4.smiley-bg {
    position:relative;
}
h4.smiley-bg::after {
        content: "";
        display: block;
        width: 87px;
        height: 47px;
        position: absolute;
        left: 28.5rem;
        bottom: -4rem;
        transform: rotate(15deg);
	    background-image: url('/__template/t1/images/doodle-illustrations/smiley.png');
	    background-repeat: no-repeat;
	    background-position: center;
	    background-size: 100% auto;
}
h4.smiley-bg::after {
    left: 50%;
    transform: translate( -40px);
}