@charset "utf-8";
/* CSS Document */
body {
margin : 0;
background : url(img/b2.webp) 0% repeat scroll transparent;
border : #70415D solid 5px;
}
a:link {color: #E4D68B;text-decoration: none;text-shadow: #000000 1px 1px 1px;font-size: 1.8rem;line-height: 2.8rem;}
a:visited {color: #E4D68B;background-color: transparent;text-decoration: none;}
a:hover {text-decoration: none;color: #000000;background-color: #E4D68B;}
a:active {color: yellow;background-color: transparent;text-decoration: underline;}
h1 {
text-shadow : 2px 2px 5px #FFFFFF;
color : #7E7B7B;
font-size : 2.6rem;
line-height : 2.1rem;
text-align : center;
}
h2, h3, h4{
color : #6C6868;
font-size : 2.4rem;
line-height : 2rem;
text-align : center;
}
.h4-fejbarna, .h4-fejkek, .h4-fejlila, .h3-fejbarna, .h3-fejkek, .h3-fejlila, .h2-fejbarna, .h2-fejkek, .h2-fejlila {
color : #F1EBEB;
font-size : 1.6rem;
line-height : 1.6rem;
text-align : center;
text-shadow : 2px 2px 5px black;
}
span {
font-size : 30px;
cursor : pointer;
}
img {
margin-left : auto;
margin-right : auto;
display : block;
max-width : 100%;
height : auto;
}
.visually-hidden
	{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);white-space: nowrap;border: 0;}
.img-according {
max-width : 70%;
}
.img-fejb, .img-fejk, .img-fejl, .img-fejs {
margin : auto;
border-radius : 15px 15px 15px 15px;
width : auto;
height : auto;
}
.img-fejb {
border : #925437 solid 3px;
}
.img-fejk {
border : #0465AA solid 3px;
}
.img-fejl {
border : #856E88 solid 3px;
}
.img-fejs {
border : #E4C88B solid 3px;
}
.img-div-fej-c {
float : left;
}
.img-bal {
max-width : 100%;
margin-left : auto;
margin-right : auto;
float : right;
}
.banner1
	{margin: auto;width: 30%;height: 600px; background-image: url('img/udvozlo.jpg'); background-position: center;background-repeat: no-repeat;background-size: 100%;}
.banner2
	{margin: auto;width: 30%;height: 450px; background-image: url('img/koszono.jpg'); background-position: center;background-repeat: no-repeat;background-size: 100%;}
.accordion-title, .atb, .atk, .atl, .gyik {
padding : 15px;
cursor : pointer;
transition : background 0.2s;
margin : 5px 0;
border-radius : 3px;
font-size : 2.3rem;
line-height : 2.2rem;
text-shadow : 2px 2px 5px #FFFFFF;
color : #3A3838;
border-radius : 15px 15px 15px 15px;
}
.gyik{background-image : linear-gradient(#FAF6AF, #D0AFFA, #925437);
border : #925437 solid 3px;}
.atb {
background-image : linear-gradient(#925437, #CCB2A6, #925437);
border : #925437 solid 3px;
}
.atk {
background-image : linear-gradient(#0465AA, #9BB0E5, #0465AA);
border : #0465AA solid 3px;
}
.atl {
background-image : linear-gradient(#856E88, #CFADD4, #856E88);
border : #856E88 solid 3px;
}
.atc {
background-image : linear-gradient(#FAF6AF, #D0AFFA, #925437);
border : #925437 solid 3px;
}
.accordion-content {
display : none;
padding : 0 0 0 0;
background-color : #E4D68B;
overflow : auto;
height : 100%;
width : auto;
border : #E4C88B solid 2px;
border-radius : 15px 15px 15px 15px;
}
.active-accordion-section > .accordion-title::before {
transform : rotate(180deg);
}
.sidenav {
height : 100%;
width : 0;
position : fixed;
z-index : 1;
top : 0;
left : 0;
background-color : #E4C88B;
overflow-x : hidden;
transition : 0.5s;
padding-top : 60px;
}
.sidenav a {
padding : 8px 8px 8px 32px;
text-decoration : none;
font-size : 25px;
color : #818181;
display : block;
transition : 0.3s;
}
.sidenav a:hover {
color : #E4D68B;
}
.sidenav .closebtn {
position : absolute;
top : 0;
right : 25px;
font-size : 36px;
margin-left : 50px;
}
.div-kontenerb, .div-kontenerk, .div-kontenerl, .div-konteners {
background : #CCB2A6;
padding : 5px 5px 5px 5px;
border-radius : 15px;
height : auto;
overflow : auto;
margin : auto;
width : 60%;
padding : 5px 5px 5px 5px;
color : #0E0D0D;
font-size : 1.3rem;
line-height : 1.6rem;
}
.div-kontenerb {
background : #CCB2A6;
border : #925437 solid 3px;
}
.div-kontenerk {
background : #9BB0E5;
border : #0465AA solid 3px;
}
.div-kontenerl {
background : #CFADD4;
border : #856E88 solid 3px;
}
.div-konteners {
background : #e2c8de;
border : #a485a0 solid 3px;
}
.div-kontenergyik {
background : linear-gradient(#FAF6AF, #D0AFFA, #925437);
border : #a485a0 solid 3px;
padding : 5px 5px 5px 5px;
border-radius : 15px;
height : auto;
overflow : auto;
margin : auto;

padding : 5px 5px 5px 5px;
color : #0E0D0D;
font-size : 1.3rem;
line-height : 1.6rem;
}


.div-kontbfej, .div-kontkfej, .div-kontlfej, .div-kontsfej {
width : auto;
border : none;
text-align : center;
text-shadow : 2px 2px 5px #FFFFFF;
color : #3A3838;
font-size : 2.3rem;
line-height : 2.2rem;
border : #856E88 solid 3px;
border-radius : 15px 15px 15px 15px;
}
.div-fejbarna, .div-kontbfej {
background-image : linear-gradient(#925437, #CCB2A6, #925437);
border : #925437 solid 3px;
}
.div-fejkek, .div-kontkfej {
background-image : linear-gradient(#0465AA, #9BB0E5, #0465AA);
border : #0465AA solid 3px;
}
.div-fejlila, .div-kontlfej {
background-image : linear-gradient(#856E88, #CFADD4, #856E88);
border : #856E88 solid 3px;
}
.div-fejsarga, .div-kontsfej {
background-image : linear-gradient(#856E88, #CFADD4, #856E88);
border : #856E88 solid 3px;
}
.div-fejalb, .div-fejalk, .div-fejall, .div-fejals {
font-size : 1.6rem;
line-height : 1.6rem;
text-align : center;
color : #f1f1f1;
text-shadow : 2px 2px 5px black;
text-decoration-color : black;
padding : 0 0 0 0;
border-radius : 10px 10px 10px 10px;
width : 99%;
}
.div-fejalb {
background-image : linear-gradient(#925437, #CCB2A6, #925437);
}
.div-fejalk {
background-image : linear-gradient(#0465AA, #9BB0E5, #0465AA);
}
.div-fejall {
background-image : linear-gradient(#856E88, #CFADD4, #856E88);
}
.div-fejals {
background-image : linear-gradient(#E4D68B, #F5EDD7, #E4D68B);
}
.div-k {
margin : auto;
width : 60%;
border : #a485a0 solid 3px;
border-radius : 15px 15px 15px 15px;
padding : 0 0 0 0;
background : #e2c8de;
}
.div-kep {
margin : auto;
width : 97%;
border : #E4C88B solid 3px;
border-radius : 15px 15px 15px 15px;
padding : 0 0 0 0;
background : #E4D68B;
}
.div-center {
display : flex;
justify-content : center;
}
.div-betetbarna, .div-betetkek, .div-betetlila {
font-size : 1.3rem;
line-height : 1.6rem;
text-align : left;
padding : 5px 10px 5px 5px;
border-radius : 15px;
width : auto;
height : auto;
overflow : auto;
}
.div-betetbarna {
background-image : linear-gradient(#925437, #CCB2A6, #925437);
border : #925437 solid 3px;
}
.div-betetkek {
background-image : linear-gradient(#0465AA, #9BB0E5, #0465AA);
border : #0465AA solid 3px;
}
.div-betetlila {
background-image : linear-gradient(#856E88, #CFADD4, #856E88);
border : #856E88 solid 3px;
}
.div-dobbarna, .div-dobkek, .div-doblila, .div-dobsarga {
font-size : 1.3rem;
line-height : 1.6rem;
text-align : left;
background : #CCB2A6;
padding : 0 10px 0 10px;
border-radius : 15px;
width : auto;
height : auto;
overflow : auto;
}
.div-dobbarna {
background : #CCB2A6;
border : #925437 solid 3px;
}
.div-dobkek {
background : #9BB0E5;
border : #0465AA solid 3px;
}
.div-doblila {
background : #CFADD4;
border : #856E88 solid 3px;
}
.div-dobsarga {
background : #F5EDD7;
border : #E4C88B solid 3px;
}
.div-fejc {
font-size : 2.2rem;
line-height : 2.2rem;
text-align : center;
color : #3D3737;
text-shadow : 2px 2px 5px white;
text-decoration-color : white;
background-image : linear-gradient(#a485a0,#D8A7CC,#a485a0);
padding : 5px 5px 5px 5px;
border-radius : 15px 15px 15px 15px;
border : #987893 solid 3px;
width : 95%;
margin : auto;
}
.div-fejbarna, .div-fejkek, .div-fejlila {
font-size : 1.6rem;
line-height : 1.6rem;
text-align : center;
color : #f1f1f1;
text-shadow : 2px 2px 5px black;
text-decoration-color : black;
padding : 0 0 0 0;
border-radius : 10px 10px 10px 10px;
width : 99%;
}
p {
color : #0E0D0D;
font-size : 1.3rem;
line-height : 1.6rem;
}
.ph3 {
color : #6C6868;
font-size : 2.4rem;
line-height : 1.8rem;
text-align : center;
text-shadow : 2px 2px 3px black;	
}
.p-k {
color : #0E0D0D;
font-size : 1.3rem;
line-height : 1.6rem;
text-align : center;
}
.p-kp {
color : #F50E0E;
font-size : 1.6rem;
font-weight : bold;
font-family : sans-serif;
text-align : center;
text-shadow : 2px 2px 5px black;
text-decoration-color : black;
}
.p-ar {
color : #0E0D0D;
font-size : 1.3rem;
line-height : 1.6rem;
text-align : center;
}
.p-sw {
text-shadow : 2px 2px 5px #FFFFFF;
color : #7E7B7B;
font-size : 2.6rem;
line-height : 2.1rem;
text-align : center;
}


.p-sw1
	{font-style: italic;text-shadow : 2px 2px 2px black;color: #3BA022;font-size: 2.6em;line-height : 3.3rem;text-align : center;
}
.p-sw2
	{font-style: italic;text-shadow : 1px 1px 1px black;color: #3BA022;font-size: 2.0em;line-height : 2.5rem;text-align : center;
}



p.cim 
	{background-image : linear-gradient(#70415D, #D8A7CC, #70415D);color: rgba(255, 255, 255, .45);text-align: center;text-transform: uppercase;letter-spacing: 0.9em;border: 4px double rgba(255, 255, 255, 1);border-radius : 10px 10px 10px 10px;border-width: 4px 0;padding: 1.5em 0em;max-width: none;margin : auto;width : 800px;height: 230px;
}
p.cim span 
	{font: 4em "Oswald", Fantasy;letter-spacing: 0;padding: 0.25em 0 0.325em;margin: 0 auto;text-shadow: 0 0 80px rgba(255, 255, 255, .5);background: url("img/animated-text-fill-3.png") repeat-y;-webkit-background-clip: text;
	 background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: aitf 80s linear infinite;-webkit-transform: translate3d(0, 0, 0);-webkit-backface-visibility: hidden;}
	 @-webkit-keyframes aitf 
		{0% {background-position: 0% 50%;}100% {background-position: 100% 50%;}}
	
@media screen and (max-width: 830px) {
 p.cim span{font: 3.5em "Oswald", Fantasy;}
	p.cim{font: 1.32em "Oswald", Fantasy;width : 700px;height: 220px;}
	}		
	
@media screen and (max-width: 750px) {
  p.cim span{font: 3.2em "Oswald", Fantasy;}
	p.cim{font: 1.32em "Oswald", Fantasy;width : 650px;height: 200px;}
}	
@media screen and (max-width: 690px) {
  p.cim span{font: 3.2em "Oswald", Fantasy;}
	p.cim{font: 1.2em "Oswald", Fantasy;width : 600px;height: 180px;}
}	
	
@media screen and (max-width: 640px) {
  p.cim span{font: 3.5em "Oswald", Fantasy;}
	p.cim{font: 1em "Oswald", Fantasy;width : 550px;height: 150px;}
}	
	
@media screen and (max-width: 590px) {
  p.cim span{font: 3.0em "Oswald", Fantasy;}
	p.cim{font: 1em "Oswald", Fantasy;width : 500px;height: 150px;}
}	
	
@media screen and (max-width: 540px) {
  p.cim span{font: 3.0em "Oswald", Fantasy;}
	p.cim{font: 1em "Oswald", Fantasy;width : 480px;height: 150px;}
}	
	
@media screen and (max-width: 520px) {
  p.cim span{font: 3.0em "Oswald", Fantasy;}
	p.cim{font: 0.9em "Oswald", Fantasy;width : 450px;height: 140px;}
}	
	
@media screen and (max-width: 480px) {
  p.cim span{font: 2.8em "Oswald", Fantasy;}
	p.cim{font: 0.8em "Oswald", Fantasy;width : 400px;height: 120px;}
}	
@media screen and (max-width: 430px) {
  p.cim span{font: 2.8em "Oswald", Fantasy;}
	p.cim{font: 0.7em "Oswald", Fantasy;width : 360px;height: 100px;}
}	
@media screen and (max-width: 390px) {
  p.cim span{font: 2.6em "Oswald", Fantasy;}
	p.cim{font: 0.6em "Oswald", Fantasy;width : 300px;height: 100px;}
}	
	
	


	







.p-sw-a {
text-shadow : 2px 2px 5px #0E0D0D;
color : #FFFFFF;
font-size : 1.8rem;
line-height : 1.6rem;
text-align : center;
}
strong {
font-weight : bold;
font-size : 1.6rem;
}
.blink {
animation : blinker 0.6s linear infinite;
color : #F50E0E;
font-size : 1.6rem;
font-weight : bold;
font-family : sans-serif;
text-align : center;
text-shadow : 2px 2px 5px black;
text-decoration-color : black;
}
@keyframes blinker {
50% {
opacity : 0;
}
}
.blink-one {
animation : blinker-one 1s linear infinite;
}
@keyframes blinker-one {
0% {
opacity : 0;
}
}
.blink-two {
animation : blinker-two 2.08s linear infinite;
}
@keyframes blinker-two {
100% {
opacity : 0;
}
}
.row {
display : flex;
flex-wrap : wrap;
padding : 0 4px;
}
.column {
flex : 15%;
max-width : 25%;
padding : 5px 5px;
}
.hatter-sarga {
background-image : linear-gradient(#a485a0,#D8A7CC,#a485a0);
}
.hatter-malyva {
background-image : linear-gradient(#70415D, #D8A7CC, #70415D);
}
.kek {
background-color : #5372B8;
}
.kekv {
background : rgb(68, 165, 239, 0.16);
}
.lila {
background-color : #7A6388;
}
.lilav {
background : rgb(214, 132, 198, 0.16);
}
.barna {
background-color : #7A675B;
}
.barnav {
background : rgb(146, 84, 55, 0.56);
}
.zoldv {
background : rgb(0, 128, 0, 0.1);
}
.nyil {
border : black solid;
border-width : 0 3px 3px 0;
display : inline-block;
padding : 3px;
}
.le {
transform : rotate(45deg);
}
.kepdoboz {
display : flex;
flex-wrap : wrap;
padding : 0 4px;
}
.kepbox {
flex : 15%;
max-width : 25%;
padding : 5px 5px;
}
.kep {
width : auto;
height : auto;
}
* {
box-sizing : border-box;
}
.slideshow-container {
max-width : 1000px;
position : relative;
margin : auto;
}
.mySlides {
display : none;
}
.prev, .next {
cursor : pointer;
position : absolute;
top : 50%;
width : auto;
margin-top : -22px;
padding : 16px;
color : white;
font-weight : bold;
font-size : 18px;
transition : 0.6s ease;
border-radius : 0 3px 3px 0;
user-select : none;
}
.next {
right : 0;
border-radius : 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color : rgb(0, 0, 0, 0.8);
}
.text {
color : #f2f2f2;
font-size : 15px;
padding : 8px 12px;
position : absolute;
bottom : 8px;
width : 100%;
text-align : center;
}
.numbertext {
color : #f2f2f2;
font-size : 12px;
padding : 8px 12px;
position : absolute;
top : 0;
}
.dot {
cursor : pointer;
height : 15px;
width : 15px;
margin : 0 2px;
background-color : #bbb;
border-radius : 50%;
display : inline-block;
transition : background-color 0.6s ease;
}
.active, .dot:hover {
background-color : #717171;
}
.fade {
animation-name : fade;
animation-duration : 1.5s;
}
@keyframes fade {
from {
opacity : 0.4;
}
to {
opacity : 1;
}
}
.child-container
	{width: 100%;max-width: 300px;min-height: 209px;background: black;}
.parent-container
	{display: flex;flex-wrap: wrap;gap: 3px;justify-content: center;align-items: center;}	
.img-ertek{box-shadow: 0px 0px 0px rgba(0,0,0,0.5);}
.img-ertek:hover {opacity:0.6}
.image-slideshow
	{width: 300px;height: 209px;overflow: hidden;white-space: nowrap;font-size: 0;position: relative;}
.image-slideshow > div
	{width: 300px;height: 209px;animation: move 16s ease-in-out 1s infinite alternate;display:inline-block;}
.image-slideshow:hover > div 
	{ animation-play-state:paused;-webkit-animation-play-state:paused;}	
.image-slideshow > div div 
	{position: absolute;bottom: 0;background: rgba(0,0,0,0.4);width: 100%;}
@keyframes move
	{0%,10% { transform: translateX(0); }18%,28% { transform: translateX(-300px); }36%,46% { transform: translateX(-600px); }
   	54%,64% { transform: translateX(-900px); }72%,80% { transform: translateX(-1200px); }88%,100% { transform:translateX(-1500px); }}
	




@media only screen and (max-width: 2500px) {
	.banner1{width: 30%;height: 450px}
	.banner2{width: 30%;height: 550px}
}
@media only screen and (max-width: 1600px) {
	.banner1{width: 50%;height: 440px}
	.banner2{width: 50%;height: 450px}
}
@media only screen and (max-width: 1000px) {
.kepbox {
flex : 40%;
max-width : 50%;
}
.column {
flex : 45%;
max-width : 50%;
}
}
@media only screen and (max-width: 900px) {
.banner1{width: 70%;height: 340px}
.banner2{width: 70%;height: 320px}
	



	
	
	
	
@media only screen and (max-width: 850px) {
.div-k {
margin : auto;
width : 90%;
border : #E4C88B solid 3px;
padding : 0 0 0 0;
background : #E4D68B;
}
.div-kontenerb, .div-kontenerk, .div-kontenerl, .div-konteners {
width : 90%;
}
.p-ar {
color : #0E0D0D;
font-size : 1.3rem;
line-height : 1.4rem;
}
}
@media only screen and (max-width: 700px) {
.banner1{width: 70%;height: 260px}
.banner2{width: 70%;height: 260px}
}
@media only screen and (max-width: 650px) {
.div-k {
margin : auto;
width : 98%;
border : #E4C88B solid 3px;
padding : 0 0 0 0;
background : #E4D68B;
}
.div-betetbarna, .div-betetkek, .div-betetlila {
font-size : 1.3rem;
line-height : 1.2rem;
}
.p-kp {
color : #F50E0E;
font-size : 1.3rem;
font-weight : bold;
font-family : sans-serif;
text-align : center;
text-shadow : 2px 2px 5px black;
text-decoration-color : black;
}
.blink {
animation : blinker 0.6s linear infinite;
color : #F50E0E;
font-size : 1.3rem;
font-weight : bold;
font-family : sans-serif;
text-align : center;
text-shadow : 2px 2px 5px black;
text-decoration-color : black;
}

.blink-two {
animation : blinker-two 2.08s linear infinite;
}
.kepbox {
flex : 100%;
max-width : 100%;
}
.column {
flex : 50%;
max-width : 100%;
}
.atb, .atk, .atl {
padding : 15px;
cursor : pointer;
transition : background 0.2s;
margin : 5px 0;
border-radius : 3px;
font-size : 2.1rem;
line-height : 2.2rem;
text-shadow : 2px 2px 5px #FFFFFF;
color : #3A3838;
border-radius : 15px 15px 15px 15px;
}
.atb {
background-image : linear-gradient(#925437, #CCB2A6, #925437);
border : #925437 solid 3px;
}
.atk {
background-image : linear-gradient(#0465AA, #9BB0E5, #0465AA);
border : #0465AA solid 3px;
}
.atl {
background-image : linear-gradient(#856E88, #CFADD4, #856E88);
border : #856E88 solid 3px;
	}}
@media only screen and (max-width: 600px) {
.banner1{width: 70%;height: 220px}
	.banner4{width: 100%;height: 300px}
	.banner2{width: 70%;height: 220px}
}
@media only screen and (max-width: 500px) {
.banner1{width: 70%;height: 220px}
.banner2{width: 70%;height: 220px}
.div-k {
margin : auto;
width : 100%;
border : #E4C88B solid 3px;
padding : 0 0 0 0;
background : #E4D68B;
}
.div-fejc {
font-size : 2.0rem;
line-height : 2.2rem;
text-align : center;
color : #3D3737;
text-shadow : 2px 2px 5px white;
text-decoration-color : white;
background-image : linear-gradient(#70415D, #D8A7CC, #70415D);
padding : 5px 5px 5px 5px;
border-radius : 15px 15px 15px 15px;
border : #77A9F7 solid 3px;
width : 95%;
margin : auto;
}
.p-kp {
color : #F50E0E;
font-size : 1.2rem;
font-weight : bold;
font-family : sans-serif;
text-align : center;
text-shadow : 2px 2px 5px black;
text-decoration-color : black;
}
.atb, .atk, .atl {
padding : 15px;
cursor : pointer;
transition : background 0.2s;
margin : 5px 0;
border-radius : 3px;
font-size : 1.7rem;
line-height : 2.2rem;
text-shadow : 2px 2px 5px #FFFFFF;
color : #3A3838;
border-radius : 15px 15px 15px 15px;
}
.atb {
background-image : linear-gradient(#925437, #CCB2A6, #925437);
border : #925437 solid 3px;
}
.atk {
background-image : linear-gradient(#0465AA, #9BB0E5, #0465AA);
border : #0465AA solid 3px;
}
.atl {
background-image : linear-gradient(#856E88, #CFADD4, #856E88);
border : #856E88 solid 3px;
}	
.blink {
animation : blinker 0.6s linear infinite;
color : #F50E0E;
font-size : 1.2rem;
font-weight : bold;
font-family : sans-serif;
text-align : center;
text-shadow : 2px 2px 5px black;
text-decoration-color : black;
}
.blink-two {
animation : blinker-two 2.08s linear infinite;
}
}
@keyframes blinker-two {
100% {
opacity : 0;
}
}
@media only screen and (max-width: 400px) {
.column {
flex : 50%;
max-width : 95%;
}
.img-fejb, .img-fejk, .img-fejl, .img-fejs {
margin : auto;
border-radius : 15px 15px 15px 15px;
width : 95%;
height : auto;
}
.atb, .atk, .atl {
padding : 15px;
cursor : pointer;
transition : background 0.2s;
margin : 5px 0;
border-radius : 3px;
font-size : 1.5rem;
line-height : 2.2rem;
text-shadow : 2px 2px 5px #FFFFFF;
color : #3A3838;
border-radius : 15px 15px 15px 15px;
}
.atb {
background-image : linear-gradient(#925437, #CCB2A6, #925437);
border : #925437 solid 3px;
}
.atk {
background-image : linear-gradient(#0465AA, #9BB0E5, #0465AA);
border : #0465AA solid 3px;
}
.atl {
background-image : linear-gradient(#856E88, #CFADD4, #856E88);
border : #856E88 solid 3px;
}
	.p-sw2{font-size: 2.3rem;}	
}