@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Open+Sans:wght@800&family=Roboto:wght@700&display=swap');


 
 .banner {
	width: 400px;
	height: 185px;
	overflow: hidden;
	margin: 0 auto;
	background-color: #72EA91;
	text-align: center;
	position: relative;
	opacity: 0;
    animation: zoom 0.5s 0s linear, dezoom 0.5s 10s linear , zoom_masodik 0.5s 30s linear, dezoom_masodik 0.5s 40s linear;
    animation-fill-mode: forwards;
	
   
}
 .banner .koszon {
	font: 26px/30px 'Bree Serif', serif;
    color: #fff;
	margin: 15px 0 0 0;
	text-transform: uppercase;
    opacity: 0;
    animation: zoom 0.5s 0s linear, dezoom 0.5s 10s linear , zoom_masodik 0.5s 30s linear, dezoom_masodik 0.5s 40s linear;
    animation-fill-mode: forwards;
}
 .banner .vallaljuk {
	font: 22px/30px 'Bree Serif', serif;
    color: #fff;
	margin: 10px 0 0 0;
	text-transform: uppercase;
    opacity: 0;
    animation: zoom 0.5s 0s linear, dezoom 0.5s 10s linear , zoom_masodik 0.5s 30s linear, dezoom_masodik 0.5s 40s linear;
    animation-fill-mode: forwards ;
}


 .banner .link {
	font: 22px/30px 'Bree Serif', serif;
    color: #fff;
	margin: 10px 0 0 0;
	text-transform: lowercase;
	text-decoration: none;
    opacity: 0;
    animation: zoom 0.5s 0s linear, dezoom 0.5s 10s linear , zoom_masodik 0.5s 30s linear, dezoom_masodik 0.5s 40s linear;
    animation-fill-mode: forwards ;
}

 


/************************************************************************/

 .banner_masodik {
	width: 400px;
	height: 185px;
	overflow: hidden;
	margin: 0 auto;
	background-color: #72EA91;
	text-align: center;
	position: fixed;
	opacity: 0;
    animation: zoom 0.5s 10s linear, dezoom 0.5s 20s linear , zoom_masodik 0.5s 40s linear, dezoom_masodik 0.5s 50s linear;
    animation-fill-mode: forwards;
}

 .banner_masodik .cim {
	font: 30px/50px 'Bree Serif', serif;
    color: #fff;
	
	margin: 15px 0 0 0;
	
	text-transform: lowercase;
	text-decoration: none;
    opacity: 0;
    animation: zoom 0.5s 10s linear, dezoom 0.5s 20s linear , zoom_masodik 0.5s 40s linear, dezoom_masodik 0.5s 50s linear;
    animation-fill-mode: forwards ;
}





/************************************************************************/

 .banner_harmadik {
	width: 400px;
	height: 185px;
	overflow: hidden;
	margin: 0 auto;
	background-color: #FF6600;
	text-align: center;
	position: fixed;
	opacity: 0;
    animation: zoom 0.5s 20s linear, dezoom 0.5s 30s linear , zoom_masodik 0.5s 50s linear, dezoom_masodik 0.5s 60s linear;
    animation-fill-mode: forwards;
}

 .banner_harmadik .ajanlat {
	font: 30px 'Bree Serif', serif;
    
    color: #fff;
	
	margin: 10px 0 0 0;
	
	text-transform: lowercase;
	text-decoration: none;
    opacity: 0;
    animation: zoom 0.5s 20s linear, dezoom 0.5s 30s linear , zoom_masodik 0.5s 50s linear, dezoom_masodik 0.5s 60s linear;
    animation-fill-mode: forwards ;
}





@keyframes zoom {
    0%   { transform: scale(0,0) }
    100% { transform: scale(1,1); opacity: 1 }
}

@keyframes dezoom {
    0%   { transform: scale(1,1) }
    100% { transform: scale(0,0); opacity: 1 }
}

@keyframes zoom_masodik {
    0%   { transform: scale(0,0) }
    100% { transform: scale(1,1); opacity: 1 }
}

@keyframes dezoom_masodik {
    0%   { transform: scale(1,1) }
    100% { transform: scale(0,0); opacity: 1 }
}








@keyframes cta {
    0%   { height: 0 }
    50%  { height: 70px; opacity: 1 }
    100% { height: 20px; opacity: 1 }
}