@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Work+Sans:300&subset=latin-ext');

 	html, body {

	margin: 0;
	
	height: 100%; 
	color: white;
	overflow:hidden; 
	font-family: Arial, Helvetica, sans-serif;
 	}
	td p{ text-align:center;}
	.hatter { 
	background-image:url(hatter5.jpg); <a href="kapcsolat.html">Kapcsolat</a>
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}
	.hatterakcio { 	 
	background-image:url(bejarat.jpg); 
	background-repeat:no-repeat; 
	background-position:center; background-attachment:inherit; /*background-size:cover;*/
	}
	
	.hatterkaranten { 	 
	background-image:url(bejarat.jpg); 
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}
	.hatterakcionap { 
	background-image:url(szarvasfej.jpg); 
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}
	.hattermenu { 
	background-image:url(menuhatter5.jpeg); 
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}
	.hatteraktualis { 
	background-image:url(menuhatter4.jpeg); 
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}
	.hatteretlap { 
	background-image:url(menuhatter3.jpeg); 
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}
	.hatteritallap { 
	background-image:url(drink.jpg); 
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}
	.hatterpizza { 
	background-image:url(menuhatter.jpeg); 
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}
	.hattereskuvo { 
	background-image:url(hattereskuvo2.jpeg); 
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}
	.hatterkari { 
	background-image:url(kari.jpg); 
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}
	.hatter2026 { 
	background-image:url(2026.jpg); 
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}

	.hatterkapcsolat {
	margin:150px;
	background-image:url(kertleveles2.jpg);
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}
	.hatterlogo {
	margin:150px;
	background-image:url(kertleveles2.jpg);
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}
	.hatterpolyak{ padding:60px;
	background-image:url(polyak-logo.png);
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}
	.hattermarton{ padding:60px;
	background-image:url(akcio.jpg);
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}
	.hatterpalyazat { 
	background-image:url(coffee.jpg); 
	background-repeat:no-repeat; 
	background-position:center; background-size:cover;
	}
	.pirosvonal {
	border: 1px solid red;
	}
	.fuggkozepre{ 
	position:absolute; 
	top: 50%; 
	transform: translate(0, -50%); 
	margin-bottom: -50%;
	}
	.vizkozepre{ 
	position:absolute; 
	left: 50%; 
	transform: translate(-50%, 0); 
	margin-right: -50%;
	}
	
	.tokkozepre{ 
	position:absolute; 
	top: 50%; 
	left: 50%;
	transform: translate(-50%, -50%); 
	margin-bottom: -50%; 
	margin-right: -50%;
	
	}
	  .szepbetu {
	font-family: 'Work Sans', arial;
	font-size: 25px;
	color: #FFFFFF;
	text-decoration:none;
	text-align:center;
	}
	 .szepbetu2 {
	font-family: 'Work Sans', arial;
	font-size: 25px;
	color:#800040;
	text-decoration:none;
	text-align:center;
	}
	.sorkizart{ text-align:justify; margin:10px;}
	.img circle{ border:#006666;}
	.roll{ overflow: scroll; max-height: 700px;}
	.roll2{ overflow: scroll; max-height:inherit;}
	.cim{ font-family: 'Work sans'; 
	font-size: 50px; 
	text-align:center;
	}
	.maxmeret{ 
	width: auto; 
	height: auto; 
	min-width: 100%; 
	min-height: 100%;
	}
	.valmeret{ 
	width: auto; 
	height: auto; 
	min-width: 30%; 
	min-height: 30%;
	}
	.lablec{ 
	bottom: 0;
	}
	a{ 
	color: white; 
	text-decoration:none;
	}
	.gomb{ 
	font-size: 16px; 
	background-color: rgba(0,0,0,0.5); 
	padding: 10px; 
	width: 120px; 
	display:inline-block;
//	opacity: 0.5 ;
	border-radius:50%;
	text-shadow: 1px 1px grey;
	}
	.gomblogo{ 
	
	background-color: rgba(0,0,0,0.5); 
	border-radius:15%;
	}
	.gombfb{ 
	filter: invert(80%); 
	transition-duration: 0.5s;
	}
	.gomb:hover{ 
	filter: invert(80%); 
	transition-duration: 0.5s;
	}
	.gombfb:hover{ 
	filter: invert(5%); 
	transition-duration: 0.5s; float:inherit
	}
	@media (max-width: 767px){
		.maxmeret{ 
		display: none;
		}
	}
	@media (max-height: 450px){
		.cim{ display: none;
		}
	}
	.fejlec ul li{
	text-decoration:none;
	background-color: rgba(0,0,0,0.3); 
	display: inline-block;
	padding: 5px;
	width: 160px;
	text-align:center;
	text-shadow:1px 1px grey;
	}
	.fejlec2 ul li{
	text-decoration:none;
	background-color: rgba(0,0,0,0.3); 
	display: inline-block;
	padding: 15px;
	width: 250px;
	text-align:center;
	text-shadow:1px 1px grey;
	}
	.fejlec ul li:hover{
	filter: invert(80%); 
	transition-duration: 0.5s;
	}
	.fejlec2 ul li:hover{
	filter: invert(80%); 
	transition-duration: 0.5s;
	}
	
	#logo img{ width:550px; height:auto;/* opacity:0.8; filter: invert(80%);*/}
	#logovideo img{ position:static; width:250px; height:200px; border:groove; margin:20px;/* opacity:0.8; filter: invert(80%);*/}
	#zarva img{ width:550px; height:auto; display:inherit;}
	.szoveghatter{ background: rgba(0,0,0,0.6); margin:20px; padding:20px;}
	feher{ color:#FFFFFF;}
	gold{ color:#916907;}
	piros{ color:#FF0000;}
	zold{ color:#00CC00;}
	szold{ color:#006600; background:#99FF66;}
	pink{ color:#CC00FF;}
	lila{ color:#CC66CC;}
	narancs{ color:#FF6600;}
	borlila{ color:#993366;}
	bordo{ color:#660000; background-color:brown;}
	.feherhatter{ background-color:#FFFFFF;}
	.piroshatter{ background-color:#FF0000;}
	.zoldhatter{ background-color:#00FF00;}
	.zoldkeret{ border:groove 2px #33FF00;}
	.zoldhattertorlo{  color:#00CC00; background-color:#00CC00;}
	.lilahatter{ background-color:#660099;}
	
	storng{ text-shadow:#333333;}
	.sarga{ color:#FFFF00;}
	.piros{ color:#FF0000;}
	.zold{ color:#8cc63e;}
	.narancs{ color:#FF6600;}
	.pink{ color:#CC00FF;}
	.gold{ color:#916907;}
	.hely{ margin-bottom:50px;}
	.lila{ color:#6600FF;}
	.borlila{ color:#993366;}
	.acel{ color:#666699;}
	
	
/*.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}*/

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}
.header {
    text-align: center;
    padding: 32px;
}

.row { background-color:#FFFF33;
	display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}
.circle{border-radius:50%}
.right{float:right;}
.hattake{ background-image:url(takeaway-food.jpg); padding:20px; background-size:cover; }
.hat{ background-image:url(apriltavasz.jpg); padding:20px; background-size:cover; }
.hattavasz{ background-image:url(apriltavasz.jpg); padding:20px;background-size:cover; }
.hatliba{ background-image:url(libagomb.jpg); padding:20px; background-size:cover; }
.hatnap{ background-image:url(szarvasfej.jpg); padding:20px; background-size:cover; }
.hatnapgomb{ background-image:url(szarvasgomb.jpg); padding:20px; background-size:cover; }
.hatnapok{ background-image:url(karigomb.jpg); padding:60px; background-size:cover; }
.hatkari{ background-image:url(karigomb.jpg); padding:20px;}
.kari{ background-image:url(karifa.jpg);}
.szilveszter{ background-image:url(szilveszter.jpg);}
.ujev{ background-image:url(ujev.jpg);}
.gombetlap{ color:#80FF00; margin:10px;}
#marton img{ float:right; width:150px; height:auto; background-color:#80FF00;}
#marton img:hover{ float:right; width:150px; height:auto; background-color:#AE6BB4;}