@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');

body {
    color: #000000;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;	
	background: url("images/hatter.png"); background-repeat: no-repeat; background-position: top; background-size: cover; background-attachment: fixed;
}
.sticky-top { top: 80px; }
.tooltip {z-index: 9000000;}
.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
	font-size: 11px;
	z-index: 9000000;
}
h1 						{font-weight: 700; text-transform: uppercase; font-family: 'chunk','Roboto'; color: #c50129;}
h2 						{font-weight: 900; color: #c50129;}
h3 						{font-weight: 700; font-size: 24px; color: #c50129;}
h4 						{font-weight: 900; color: #c50129;}
.btn-primary 			{background: rgba(255, 255, 255,0.25); color: #000000; border: 1px solid #000000; font-size: 16px; font-weight: 700;}
.btn-primary:hover 		{background: #000000;}
.btn-kicsi 				{background: #d60825; color: #ffffff; border: none; font-size: 18px; font-weight: 900;}
.btn-kicsi:hover 		{background: #d60825;}
.bold 					{font-weight: 700;}
label 					{font-weight: 700;}
.kek 					{color: #302e84;}
.kattinthat 			{cursor:pointer;}
.kattinthato 			{cursor:pointer;}
.mobiltavtarto  		{height:0px;}
.tavtarto10 			{height:10px;}
.tavtarto15 			{height:15px;}
.tavtarto20 			{height:20px;}
.tavtarto30 			{height:30px;}
.tavtarto50 			{height:50px;}
.tavtarto80 			{height:80px;}
.tavtarto100 			{height:100px;}
.tavtartojobb20 		{margin-right:20px;}
.tavtartocsik 			{height:1px; width:100%; margin-bottom:10px; margin-top:10px; background:rgba(255,255,255,0.3);}
.kozepre 				{text-align:center;}
.balra 					{text-align:left;}
.jobbra 				{text-align:right;}
.img-responsive	 		{max-width:100%;}
.img-responsive2	 	{max-width:100%;}
.img-responsive3		{max-height:100%; height: 35%;}
.margintop30 			{margin-top: 30px;}
.margintop15 			{margin-top: 15px;}
.marginbottom30 		{margin-bottom: 30px;}
.marginbottom15 		{margin-bottom: 15px;}
.container 				{max-width: 1100px;}
.link 					{color:#000000 ; text-decoration: underline!important; font-weight: 700;}
.link:hover 			{color: #9b0913!important; text-decoration: underline!important;}
.link2 					{color:#ffffff ; text-decoration: underline!important; font-weight: 700;}
.link2:hover 			{color: #000000!important; text-decoration: underline!important;}
.ablak 					{background: rgba(154,194,26,0.9); border-radius: 20px; padding: 15px; color: #FFFFFF; margin-bottom: 80px;}
.gyik 					{color: #302e84; font-weight: 900;text-decoration: none!important; font-size: 20px;}
.gyik:hover				{color: #302e84; font-weight: 900;text-decoration: none!important;}
.csillag_tart1 			{width: 50%;}
.csillag_tart2 			{width: 100%;}
.csillag 				{width:20%;}
a 						{color: #ffffff; text-decoration: none;}
.tabla					{background: #a4c831; padding: 20px; border-radius: 20px;}
.piros_cim1				{color: #9b0913; font-size: 25px; font-weight: 700;}
.piros_box				{background: #9b0913; border-radius: 20px; color: #ffffff; padding-left: 10px; padding-right: 10px; padding-top: 40px; padding-bottom: 30px;}
.sarga					{color: #ffed00; font-weight: 700; font-size: 23px;}
.szoveg 				{font-size: 19px;}
.cim					{max-width: 900px; padding-left: 200px; margin-bottom: -5%;}
.cim_jatekmenete		{max-width: 900px; padding-left: 200px;}
.cim_termekek			{max-width: 900px; padding-left: 200px;}
.szoveg_nyeremenyek		{margin-top: 140px; font-size: 19px;}
.szoveg_nyeremenyek2	{margin-top: 40px; font-size: 19px;}
.szoveg_nyeremenyek3	{font-size: 19px; top: 20%; position: relative;}
.szoveg_nyeremenyek4	{font-size: 19px; top: 40%; position: relative;}
.szoveg_nyeremenyek5	{font-size: 19px;}
.plusz					{font-size: 80px; font-weight: 700;}
.gombika				{max-width: 400px; position: relative; z-index: 3; transition: 0.5s ease-in-out;}
.gombika:hover			{transform: scale(1.1);}
.nyito01				{position: relative; z-index: 2}
.nyito03				{position: relative; z-index: 3}
.nyito04				{position: relative; z-index: 4; text-align: right; right: 1%; top: -10%; transition: ease-in 0.5s;}
.nyito04:hover			{transform: scale(1.05);}
.esely					{font-weight: 700; background: #9b0913; color: #ffffff!important; border-radius: 100px; padding: 5px; max-width: 40px; max-height: 40px; margin-left: 45%;}
.form_cim				{font-weight: 700; font-size: 20px; padding-top: 10px;}
.fo_hatter				{background: url(images/hatter.png); background-repeat: repeat; background-position: top; background-size: contain;}
.CookieDeclaration a	{color: #000000!important;}
.igy_cim				{font-size: 24px; font-weight: 900;}
.nyeremeny_cim			{color: #c50129; font-size: 26px !important; font-weight: 900;}
.nyeremeny_kicsicim		{color: #c50129; font-weight: 900;}
.vizszintre				{vertical-align: middle;}
.igy_szov				{font-size: 14px;}
.nem_latszik			{display: none;}
.foni 					{position: relative;}
.foni_cim				{transform: translateY(1); transition: 0.5s; padding-left: 5px;}
.dobozka				{text-align: center; transition: 0.5s ease-in-out; transform: scale(1); vertical-align: middle;}
/*.dobozka:hover 			{transform: scale(1.05);}*/
.nyeremeny_foni			{/*transition: 0.5s; transform: scaleY(0);*/ }
.lenyit					{transform: scaleY(1);}
.nyil					{width: 10%; vertical-align: middle; transition: 0.5s ease-in-out; padding: 5px;}
.nyil_forog				{transform: rotate(180deg);}
.ikon_szam				{position: relative; left: -20%;}
.gyik_cim				{font-weight: 700; padding-top: 20px;}
.feher_keret			{border: solid 3px #ffffff; border-radius: 15px; padding: 10px; height: 300px; transition: ease-in 0.5s;}
.feher_keret:hover		{transform: scale(1.04);}
.befoglalo				{width: 100%; display: flex;}
.foglalo1				{width: 32%; max-height: 100%;}
.foglalo_koz			{width: 2%;}



/*ANIMACIOK*/


/*INPUT4*/

.inputBox4
{
	position: relative;
	width: 290px;
}
.inputBox4 .inputField
{
	width: 100%;
	padding: 10px;
	border: 2px solid rgba(255, 255, 255,0.25);
	background: #ffffff;
	border-radius: 5px;
	outline: none;
	color: #000000;
	font-size: 1em;
	transition: 0.5s;
}
.inputBox4 .belso
{
	position: absolute;
	left: 0;
	padding: 10px;
	pointer-events: none;
	font-size: 1em;
	color: #787878;
	text-transform: uppercase;
	transition: 0.5s;
}
.inputBox4 .inputField:valid ~ .belso,
.inputBox4 .inputField:focus ~ .belso
{
	color: #ffffff;
	transform: translateX(10px) translateY(-7px);
	font-size: 0.65em;
	padding: 0 10px;	
	letter-spacing: 0.2em;
}
.inputBox4 .inputField:valid,
.inputBox4 .inputField:focus
{
	border: 2px solid #000000;
}


/*INPUT2*/

.inputBox2
{
	position: relative;
	width: 60px;
}
.inputBox2 .inputField
{
	width: 100%;
	padding: 10px;
	border: 2px solid rgba(255, 255, 255,0.25);
	background: #ffffff;
	border-radius: 5px;
	outline: none;
	color: #000000;
	font-size: 1em;
	transition: 0.5s;
}
.inputBox2 .belso
{
	position: absolute;
	left: 0;
	padding: 10px;
	pointer-events: none;
	font-size: 1em;
	color: #787878;
	text-transform: uppercase;
	transition: 0.5s;
}
.inputBox2 .inputField:valid ~ .belso,
.inputBox2 .inputField:focus ~ .belso
{
	color: #ffffff;
	transform: translateX(10px) translateY(-7px);
	font-size: 0.65em;
	padding: 0 10px;	
	letter-spacing: 0.2em;
}
.inputBox2 .inputField:valid,
.inputBox2 .inputField:focus
{
	border: 2px solid #000000;
}

/*INPUT3*/

.inputBox3
{
	position: relative;
	width: 200px;
}
.inputBox3 .inputField
{
	width: 100%;
	padding: 10px;
	border: 2px solid rgba(255, 255, 255,0.25);
	background: #ffffff;
	border-radius: 5px;
	outline: none;
	color: #000000;
	font-size: 1em;
	transition: 0.5s;
}
.inputBox3 .belso
{
	position: absolute;
	left: 0;
	padding: 10px;
	pointer-events: none;
	font-size: 1em;
	color: #787878;
	text-transform: uppercase;
	transition: 0.5s;
}
.inputBox3 .inputField:valid ~ .belso,
.inputBox3 .inputField:focus ~ .belso
{
	color: #ffffff;
	transform: translateX(10px) translateY(-7px);
	font-size: 0.65em;
	padding: 0 10px;		
	letter-spacing: 0.2em;
}
.inputBox3 .inputField:valid,
.inputBox3 .inputField:focus
{
	border: 2px solid #000000;
}

/*INPUT*/

.inputBox
{
	position: relative;
	width: 475px;
}
.inputBox .inputField
{
	width: 100%;
	padding: 10px;
	border: 2px solid rgba(255, 255, 255,0.25);
	background: #ffffff;
	border-radius: 5px;
	outline: none;
	color: #000000;
	font-size: 1em;
	transition: 0.5s;
}
.inputBox .belso
{
	position: absolute;
	left: 0;
	padding: 10px;
	pointer-events: none;
	font-size: 1em;
	color: #000000;
	text-transform: uppercase;
	transition: 0.5s;
}
.inputBox .inputField:valid ~ .belso,
.inputBox .inputField:focus ~ .belso
{
	color: #ffffff;
	transform: translateX(10px) translateY(-7px);
	font-size: 0.65em;
	padding: 0 10px;
	background: #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	letter-spacing: 0.2em;
}
.inputBox .inputField:valid,
.inputBox .inputField:focus
{
	border: 2px solid #000000;
}



/*KITÖLTŐS*/
/* body-ra display: flex; flex-direction: column;  */

.gomb2
{
	position: relative;
	padding: 10px 30px;
	border: 2px solid #9b0913;	
	margin: 10px;
	display: inline-block;
	text-decoration: none;
	color: #9b0913;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 0.5s;
	overflow: hidden;
	z-index: 2;
	font-weight: 700;
	background: rgba(255, 255, 255,0.25);
}
.gomb2:hover /* megegyezik a háttér színével*/
{
	color: #ffffff;
	text-decoration: none;
}
.gomb2 .kitolto2
{
	position: absolute;
	display: block;
	width: 0px;
	height: 0px;
	transform: translate(-50%,-50%);
	border-radius: 50%;
	background: #9b0913;
	transition: width 0.5s, height 0.5s;	
	z-index: -1;
}
.gomb2:hover .kitolto2
{
	width: 1200px;
	height: 1200px;	
}

/*KITÖLTŐS*/
/* body-ra display: flex; flex-direction: column;  */

.gomb
{
	position: relative;
	padding: 10px 30px;
	border: 2px solid #9b0913;	
	margin: 10px;
	display: inline-block;
	text-decoration: none;
	color: #9b0913;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: 0.5s;
	overflow: hidden;
	z-index: 2;
	font-weight: 700;
	background: rgba(255, 255, 255,0.25);
}
.gomb:hover /* megegyezik a háttér színével*/
{
	color: #ffffff;
	text-decoration: none;
}
.gomb .kitolto
{
	position: absolute;
	display: block;
	width: 0px;
	height: 0px;
	transform: translate(-50%,-50%);
	border-radius: 50%;
	background: #9b0913;
	transition: width 0.5s, height 0.5s;	
	z-index: -1;
}
.gomb:hover .kitolto
{
	width: 500px;
	height: 500px;	
}




input::placeholder 				{color: #CCCCCC!important; opacity: 1;}
input:-ms-input-placeholder		{color: #CCCCCC!important; opacity: 1;}
input::-ms-input-placeholder 	{color: #CCCCCC!important; opacity: 1;}

/* HAMAROSAN*/
.nyitohamarosan			{font-size: 33px; background: url("images/nyito02.png"); max-width:  615px; color: #ffffff; background-size: cover; padding-left: 25px; padding-top: 35px; padding-bottom: 35px;}
.nyito-szamlalo			{font-size: 18px; text-align: center; background: #c7047c; border: solid; border-radius: 50px; border-color: #c7047c; margin-left: 20px; margin-right: 20px; padding: 10px;}

/* TOP */
.top2 				{text-align: center; color: #ffffff; background: #000000;z-index: 1021; margin-top: 15px;}
.top2cucc 			{margin-right: 20px;}
.top2szam 			{font-weight: 900;}
.topmenuitem 		{color:#FFFFFF!important; text-decoration:none; font-size:17px; font-weight:700;margin-right: 25px;}
.topaktiv	 		{color:#9b0913!important; background: #ffed00; padding-top: 21px; padding-bottom: 21px; padding-right: 25px; padding-left: 25px; text-decoration:none; font-size:17px; font-weight:700;margin-right: 25px;}
.bottom 			{width: 100%; background: #9b0913; padding: 5px; text-align: center; color: #ffffff; position: fixed; bottom: 0; z-index: 8000;}
.top 				{text-align: center; color: #ffffff; background: #9b0913;z-index: 1021; height: 80px; position: fixed;}
.top_szoveg			{margin-top: 5px;}
.bottom2 			{width:100%}
.bottom3 			{background: #9b0913; color: #FFFFFF; padding: 5px; text-align: center; }
.bottomlink 		{color: #FFFFFF!important; text-decoration: none!important; margin-right: 20px; font-size: 12px; position: relative;}
.mobilmenu 			{background: #9b0913; color: #FFFFFF; z-index: 200; position: relative;}
.mobilcsik 			{width: 100%; height: 1px; border-bottom: solid 1px #FFFFFF; margin: 10px; z-index: 201;}
.topmenuitem2 		{ display: block; text-align: center; color:#FFFFFF!important; text-transform: uppercase; font-size: 14px; z-index:202;}
.topmenuitem4		{ display: block; text-align: center; color:#9b0913!important; background: #ffed00; padding-top: 10px; padding-bottom: 10px; text-transform: uppercase; font-size: 14px; z-index:202;}
.jobbcsik 			{height: 100%;}
.top_logo 			{position: absolute; top: -8px; left: 80px; width: 80%; max-width: 150px;}
.top_logo2 			{position: absolute; top: -4px; right: 80px; width: 80%; max-width: 150px;}



/* BAL JOBB */
.bal 				{width: 100%; max-width: 1100px; padding-left: 20px; padding-right: 20px; }
.jobb 				{position: fixed; top: 0px; height: 100%; right: 0px; width: calc(100% - 1100px); background: url(images/jobb_1.jpg); background-size: cover; background-position: center;}
.jobbreg 				{position: fixed; top: 0px; height: 100%; right: 0px; width: calc(100% - 1100px); background: url(images/jobb_reg.jpg); background-size: cover; background-position: center;}
.jobbfel 				{position: fixed; top: 0px; height: 100%; right: 0px; width: calc(100% - 1100px); background: url(images/jobb_feltoltes.jpg); background-size: cover; background-position: center;}
.head_cont 			{position: relative;}
.head_ikon 			{width: 160px; max-width: 30%; margin-left: 20px;}
.head_csik 			{width: 90%; height: 1px; border-bottom: solid 1px #FFFFFF; margin-bottom: 20px;}

/* NAPTAR nyertesek */
.naptar_nap_inaktiv 	{color: rgba(255,255,255,0.5); font-weight: 300;}
.naptar_nap_aktiv 		{color: rgba(255,255,255,1); font-weight: 700;}
.ajandekkep 			{width: 100%; padding: 10px;border-radius:5px; cursor:pointer;}
.ajandekok_jobb_cont 	{background: rgba(0,0,0,0.1); padding: 10px; border-radius: 10px;}
.ajandek_head 			{font-weight: 900; font-size: 24px; padding: 5px; border-radius: 10px; background: rgba(255,255,255,0.8); color:#302e84;}
.naptar					{background: #5c952b; border-radius: 10px; padding: 10px;}
.naptar_napok			{background: #7daa55; border-radius: 10px;}

/* Small devices (tablets, 768px and up) */
@media all and (min-width: 100px) and (max-width: 767px) 
{
	.desktop 				{display: none;}
	.mobiltavtarto			{height:30px;}
	.mobiltavtarto10		{height:10px;}
	.top 					{width:100%; background: #9b0913; padding:10px; color: #FFFFFF;}
	.top2 					{font-size: 10px; margin-top: 0px;}
	.bottombig 				{font-size: 11px;}
	.bottom 				{width: 100%;}
	.tavtartonaagy 			{height: 200px;}
	.oldal1 				{display: none;}
	.oldal2 				{display: none;}
	.ajandekok_jobb_cont 	{font-size: 11px;}
	h1 						{font-size: 24px;}
	h4 						{font-size: 16px;}
	.tavtarto100 			{height: 100px;}
	.ajandek_head			{font-size: 12px;font-family: 'Roboto Condensed', sans-serif;}
	.nagy_betu 				{font-size: 40px;}
	.nagy_piros 			{font-size: 36px;}
	.szoveg_nyeremenyek		{margin-top: 10px; margin-bottom: 40px; font-size: 19px;}
	.szoveg_nyeremenyek2	{margin-top: 10px; margin-bottom: 40px; font-size: 19px;}
	.szoveg_nyeremenyek3	{font-size: 16px; position: none; text-align: center;}
	.szoveg_nyeremenyek4	{font-size: 16px; text-align: center;}
	.szoveg_nyeremenyek5	{font-size: 16px; text-align: center; margin-top: 20px;}
	.nyeremeny_cim			{text-align: center;}
	.szoveg					{text-align: center;}
	.cim					{padding-left: 10px;}
	.cim_jatekmenete		{padding-left: 10px;}
	.cim_termekek			{padding-left: 10px;}
	.gombika				{max-width: 300px;}
	.nyitohamarosan			{max-width: 300px;}
	.img-responsive2	 	{max-width:70%;}
	.inputBox				{width: 370px; margin-top: 10px;}
	.inputBox2				{width: 60px; margin-top: 10px;}
	.inputBox3				{width: 300px; margin-top: 10px;}
	.inputBox4				{width: 370px; margin-top: 10px;}
	.sarga					{font-size: 19px;}
	body 					{background: url("images/mobil_hatter.jpg");}
	.fo_hatter				{background: url("images/mobil_hatter.jpg");}	
	.befoglalo				{flex-direction: column;}
	.foglalo1				{width: 100%; margin-top: 20px;}
	.foglalo_koz			{width: 0%;}
}




@media all and (min-width: 768px) and (max-width: 1100px) 
{
	.desktop 				{display: none;}		
	.top 					{width:100%; background:#9b0913; padding:10px;color: #FFFFFF;}
	.bottom2 				{position:fixed; bottom:35px; left:0px; z-index:1021;width: 100%; pointer-events:none;}
	.bottom 				{position:fixed; bottom:0px; left:0px; z-index:1021;width: 100%;}
	.tavtartonaagy 			{height: 300px;}
	.oldal1 				{display: none;}
	.oldal2 				{display: none;}
	.cim					{padding-left: 80px;}
	.cim_jatekmenete		{padding-left: 80px;}
	.cim_termekek			{padding-left: 80px;}
	.desktoptavtarto30		{height: 30px;}
	.feher_keret			{height: 320px;}
}


@media all and (min-width: 1101px) and (max-width: 5000px) 
{	
	.toplogo 				{position: absolute; top: -2px; left: 0px; width: 10%; max-width: 150px;}
	.toplogo2 				{position: absolute; top: 0px; right: 0px; width: 10%; max-width: 150px;}
	.mobil 					{display: none;}
	.mobilestablet			{display: none;}
	.tablet				 	{display: none;}
	.top 					{position:fixed; top:0px; left:0px; width:100%; background:#9b0913; height:45px; z-index:4500; padding:10px; color: #FFFFFF;}
	.top2 					{position:fixed; top:45px; left:0px; width:100%;}	
	.bottom 				{position:fixed; bottom:0px; left:0px; z-index:1021;width: 100%;}
	.bottom2 				{position:fixed; bottom:35px; left:0px; z-index:1021;width: 100%; pointer-events:none;}
	.tavtartonaagy 			{height: 300px;}
	.oldal1 				{position: fixed; z-index: 1; top: 80px; right: 0px; width: calc(50% - 550px);}
	.oldal2 				{position: fixed; z-index: 1; top: 80px; left: 0px; width: calc(50% - 550px);}
	.topmenuitem 			{color:#FFFFFF; margin-top: 5px;}	
	.desktoptavtarto30		{height: 30px;}
}

/*top logo miatt */
@media all and (min-width: 1401px) and (max-width: 1800px) 
{
	.top_logo				{width: 100%; top: -9px;}
	.top_logo2				{width: 100%;}
}


/*kis laptop*/
@media all and (min-width: 1101px) and (max-width: 1400px) 
{
	.mobil					{display: none;}
	.mobilestablet			{display: none;}
	.toplogo 				{width: 120px;}
	.toplogo2 				{width: 120px;}
	.topmenuitem 			{color:#FFFFFF!important; text-decoration:none; font-size:12px; font-weight:700; font-family: 'Roboto Condensed', sans-serif; margin-right: 15px;}
	.topmenuitem3			{color:#9b0913!important; text-decoration:none; font-size:12px; font-weight:700; font-family: 'Roboto Condensed', sans-serif; margin-right: 15px; padding-top: 25px; padding-bottom: 22px;}	
	.oldal1 				{position: fixed; z-index: 1; top: 80px; right: 0px; width: calc(50% - 350px);}
	.oldal2 				{position: fixed; z-index: 1; top: 80px; left: 0px; width: calc(50% - 350px);}	
	.bal 					{width: 100%; max-width: 900px; }
	.jobb 					{width: calc(100% - 900px); }	
	.jobbreg 				{width: calc(100% - 900px); }
	.hamarosan 				{padding: 5px; border-radius: 40px; width: 100%; font-size: 20px; font-weight: 700; color: #FFFFFF;background: #a75635; text-align: center;}
	.cim					{padding-left: 80px;}
	.cim_jatekmenete		{padding-left: 80px;}
	.cim_termekek			{padding-left: 80px;}
	.desktoptavtarto30		{height: 30px;}	
	.top_logo				{width: 120%;}
	.top_logo2				{width: 120%;}
}