@charset "utf-8";
@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');
@font-face {
    font-family: 'Amalia';
    src: url('fonts/Amalia-Black.woff2') format('woff2'), url('fonts/Amalia-Black.woff') format('woff'), url('fonts/Amalia-Black.ttf') format('truetype');
    font-weight: 900; font-style: normal;
}
@font-face {
    font-family: 'Amalia';
    src: url('fonts/Amalia-Bold.woff2') format('woff2'), url('fonts/Amalia-Bold.woff') format('woff'), url('fonts/Amalia-Bold.ttf') format('truetype');
    font-weight: 700;font-style: normal;
}
@font-face {
    font-family: 'Amalia';
    src: url('fonts/Amalia-Light.woff2') format('woff2'), url('fonts/Amalia-Light.woff') format('woff'), url('fonts/Amalia-Light.ttf') format('truetype');
    font-weight: 300;    font-style: normal;
}
@font-face {
    font-family: 'Amalia';
    src: url('fonts/Amalia-Regular.woff2') format('woff2'), url('fonts/Amalia-Regular.woff') format('woff'), url('fonts/Amalia-Regular.ttf') format('truetype');
    font-weight: 400;    font-style: normal;
}
@font-face 
{
    font-family: 'AmaliaCond';
    src: url('fonts/AmaliaCond-Bold.woff2') format('woff2'), url('fonts/AmaliaCond-Bold.woff') format('woff'), url('fonts/AmaliaCond-Bold.ttf') format('truetype');
    font-weight: 700;   font-style: normal;
}
@font-face 
{
    font-family: 'AmaliaCond';
    src: url('fonts/AmaliaCond-Light.woff2') format('woff2'), url('fonts/AmaliaCond-Light.woff') format('woff'), url('fonts/AmaliaCond-Light.ttf') format('truetype');
    font-weight: 300;    font-style: normal;
}
@font-face 
{
    font-family: 'AmaliaCond';
    src: url('fonts/AmaliaCond-Regular.woff2') format('woff2'), url('fonts/AmaliaCond-Regular.woff') format('woff'), url('fonts/AmaliaCond-Regular.ttf') format('truetype');
    font-weight: 400;    font-style: normal;
}
html{
	scroll-behavior: smooth;
}

body 					{color: #2B2D33; font-family: 'Amalia'; font-size: 16px; background: #F4F4F4;}

h1 						{font-weight: 700; font-size: 35;}
h2 						{font-weight: 700;}
.kattinthat 			{cursor: pointer;}
.tavtarto10 		    {height:10px;}
.tavtarto15 		    {height:15px;}
.tavtarto25				{height:25px}
.tavtarto30 		    {height:30px;}
.tavtarto40				{height:40px}
.tavtarto60 		    {height:60px;}
.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;}
.bold 				    {font-weight: 700;}
.img-responsive 		{max-width: 100%;}
.sarga_hatter			{background: #ffed00; font-size: 30px; padding-top: 30px; padding-bottom: 30px; text-align: justify;} /*padding-right,-left 120px*/
.sarga_hatter2			{background: #ffed00; font-size: 30px; font-weight: 700; padding-top: 30px; padding-bottom: 30px;} /*padding-right,-left 120px*/
.belso_tarto			{padding-left: 20px; padding-right: 20px;}
.btn_primary            {background: #2b2d33; color: #FFE600; margin-bottom: 20px; width: 70%; font-size: 16px;}
.btn_primary:hover      {background: #2b2d33; color: #FFE600; margin-bottom: 20px;}
.btn_secondary          {background: #FFE600; color: #2b2d33; margin-bottom: 20px; width: 70%; font-size: 16px;}
.btn_secondary:hover    {background: #FFE600; color: #2b2d33; margin-bottom: 20px;}


/*blokk hatterek*/

.blokk1					{background: url("images/blokk1_hatter.jpg"); max-width: 100%; background-repeat: no-repeat; background-size: cover; padding-top: 100px; padding-bottom: 100px; background-position: center;}
.blokk2					{background: url("images/blokk2_hatter.jpg"); max-width: 100%; background-repeat: no-repeat; background-size: cover; padding-top: 100px; padding-bottom: 100px; background-position: center;}
.blokk3					{background: url("images/blokk3_hatter.jpg"); max-width: 100%; background-repeat: no-repeat; background-size: cover; padding-top: 100px; padding-bottom: 100px; background-position: center;}


/*gomb animation*/

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

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



/* Small devices (tablets, 768px and up) */
@media all and (min-width: 100px) and (max-width: 990px) 
{
	.desktop 				{display: none;}
	.tablet				 	{display: none;}
	.sarga_hatter			{font-size: 21px;}
	.sarga_hatter2			{font-size: 21px;}
	h1 						{font-size: 30px;}	
	h2 						{font-size: 27px;}	
	body 					{font-size: 18px;}	
	.blokk1_also			{background: #f4f4f4; padding-top: 10px; padding-bottom: 20px; padding-right: 5px; padding-left: 5px; margin-bottom: 50px;}	
	.blokk2_also			{background: url("images/blokk2_mobi_hatterl.jpg"); max-width: 100%; padding-top: 10px; padding-bottom: 20px; padding-right: 5px; padding-left: 5px; margin-bottom: 50px;}	
	.blokk3_also			{background: #f5f2cb; padding-top: 10px; padding-bottom: 20px; padding-right: 5px; padding-left: 5px; margin-bottom: 50px;}
	.mobiltavtarto50		{height: 50px;}
	.mobil_logo				{width: 60%; margin-top: 5px;}
	.sarga_hatter			{text-align: left;}

}

@media all and (min-width: 991px) and (max-width: 1200px) 
{
	.mobil					{display: none;}	
}

@media all and (min-width: 1201px) and (max-width: 5000px) 
{
	.mobil 					{display: none;}
	.mobilestablet		 	{display: none;}
	.tablet				 	{display: none;}
}