@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@100;200;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

*,*:before,*:after { box-sizing: border-box; margin: 0; padding: 0 }
html { height: 100%;}
body {height:100%; color: #0b181e/*#999*/; font-family: Comfortaa, 'Saira Semi Condensed', Roboto,  verdana, Raleway, sans-serif; /*background: url('../pics/bg2022a.png'/*bg-body_zolis.jpg bg2022a.png) fixed;  background: linear-gradient(#a7a7a7,#aebfa7);*/background: linear-gradient(#006584,#aebfa7);
    background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; font-weight: 300;font-size: 1rem;	line-height: 1.65;}





img { max-width: 100%; height: auto;border-radius: 5px 5px 0 0;padding: 1rem 2rem; }
a { color: #00b8d4 ; text-decoration: none;}   
/*a:hover {background: rgba(0,0,0,.2);color: #000;}*/
.w { max-width: 1050px; margin: 0 auto; padding: 0 30px }
.mt0 { margin-top: 0 }
.mr10 { margin-right: 10px }
.mb10 { margin-bottom: 10px }
.logo { color: #fff; font-size: 1.2rem; font-weight: 400; text-decoration: none }
.logo span { color: #00b8d4 }

.clearfix::after { content: ""; clear: both; display: table; }

/* fixsarok=bakancs a sarokban */
#fixsarok {	width: 175px; height: 175px; background: url('../pics/logo_wb.png'); background-repeat: no-repeat; 	position: fixed; right: 25px; bottom: 25px;	z-index: 2500;}
#fixsarok:hover { background: url('../pics/logo_wb_m_1.png'); transition: 2s; }
@media only screen
and (min-width : 480px)
and (max-width : 800px) {
div#fixsarok {width: 150px; height: 150px; background: url('../pics/logoka_wb_f.png'); background-repeat: no-repeat; position: fixed; right: 10px; bottom: 10px;	z-index: 2500;}
#fixsarok:hover {background: url('../pics/logo_wb_m_f_1.png');}
}
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
div#fixsarok {width: 100px; height: 100px; background: url('../pics/logoka_wb_f2.png'); background-repeat: no-repeat; position: fixed; right: 10px; bottom: 10px;	z-index: 2500;}
#fixsarok:hover {background: url('../pics/logo_wb_m_f2_1.png');}
}
@media only screen
and (min-width : 240px)
and (max-width : 320px) {
div#fixsarok {width: 100px; height: 100px; background: url('../pics/logoka_wb_f2.png'); background-repeat: no-repeat; position: fixed; right: 10px; bottom: 10px;	z-index: 2500;}
#fixsarok:hover {background: url('../pics/logo_wb_m_f2_1.png');}
}

/* visszanyil a sarokba*//* menü feltapad */

#navlist { position: relative; /*position: fixed;*/	top: 30px; left: 25px;}
#navlist li {  margin: 0;  padding: 0;  list-style: none;  position: absolute;  top: 0;}
#navlist li, #navlist a { height: 175px; display: block;}

/*  *főoldalra nyíl**/

#prev { left:  25px; width: 175px; height:175px; background: url('../pics/logo_175x175.png') ;}
/*#prev a:hover { background: url('../pics/img_navsprites_hover.gif') -47px 0;}*/
.logo_bg { width:185px;height: 185px;background-color: #0b181e;border-radius: 50%;}



header, main { margin: 0 0 1rem 0;}
header > h1{ text-align: center;	margin-top: 50px;  margin-bottom: 10px;	font-size: 36px;}
main *+* { max-width:1050px;} /*margin-top: 1rem;*/
.flex-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
#row1 { color: white; text-shadow: 2px 2px 2px rgb(0 0 0 / 80%); margin-top: 50px; margin-bottom: 10px; font-size: 1.3em;font-weight:500;}
#row1 span {	padding: 0 40px; color: white;}

#row1_2023 { color: white; text-shadow: 2px 2px 2px rgb(0 0 0 / 80%); /*margin-top: 50px;*/ margin-bottom: 5rem; font-size: 2rem;}
#row1_2023 span {	padding: 0 40px; color: white;}

#row2_2023 {max-width: 100%; height:auto;/*min-height:320px;*/align-items: center; padding: 0;margin:0 auto; background-position: center;/*background-color:#0b181e;background-image:url('../pics/pic01a.jpg');*/ background-repeat: no-repeat;background-color: linear-gradient(#006584,#aebfa7);}
#row2_2023 .logo-img { position: fixed; left: 50px;top: 50px;z-index: 200;}
#row2_2023>.flex-container {flex-wrap: nowrap;}


main.w { margin: 0px auto ; max-width:1050px;}/* width:80vw */
main.w h1 { margin: 0 auto; font-family: Comfortaa, 'Saira Semi Condensed', sans-serif;font-weight: 500; }
main p { line-height: 1.6; margin: 20px 0 }
main ol,
main ul { margin: 0 0 30px 30px }
main li { margin: 0 0 5px 0; line-height: 1.6 }
main h1 { font-weight: 300; font-size: 30px; margin: 0 0 30px 0; color: #fff }
main h2 { font-weight: 500; font-size: 16px; text-transform: uppercase; /*margin: 50px 0 30px 0;*/ color: #000;padding-left: 2rem }
main h3 { font-weight: 400; font-size: 15px; text-transform: capitalize; margin: 50px 0 30px 0; color: #000 }
main h4 { font-weight: 400; font-size: 15px; font-style: italic; text-transform: capitalize; margin: 0; color: #000;padding-top: 0.75em;}


.grid { display: grid; max-width: 1400px; margin: 0 auto; width: 90%; grid-template-columns: repeat(12,1fr); grid-template-rows: auto; gap: 30px }
@media(max-width:800px) {
	.grid { grid-column-gap: 0 }
}
.grid1 { display: grid; max-width: 1400px; margin: 0 auto; width: 90%; grid-template-columns: repeat(1,1fr); grid-template-rows: auto; gap: 30px }
@media(max-width:800px) {
	.grid { grid-column-gap: 0 }
}


.carousel {
	max-width: 1000px;
	width: 90%;
	height: 35vh;
	margin: auto;
	box-shadow: 0 30px 40px -20px rgba(0,0,0,.5);
	position: relative;
	overflow: hidden
}
@media(orientation:portrait) {
	.carousel { height: 15vh;width:98%;margin:0 auto; padding:0;min-height: none;}
}
.carousel div {
	width: 100%;
	height: 100%;
	position: absolute;
	background-position: center center;
	background-size: cover;
	/*opacity: 0*/
}
.carousel div:nth-child(1) { background-image: url('../pics/pic01a2.jpg') }


.arrow {
	display: inline-block;
	width: 0;
	height: 0;
	margin: 0 5px 1px 5px;
}
.arrow.down {
	border-top: 7px solid #fff; /*#a6d7f1;*/
	border-right: 7px solid transparent;
	border-left: 7px solid transparent
}
.arrow.down:hover {
	border-top: 7px solid #a6d7f1;
}


details > summary {
	background-color: #BDE4A3;
	cursor: pointer;
	padding: .5rem 1rem;
	border-radius: 1rem;
  }
  
  details > summary > * {
	display: inline;
	border-radius:1 rem;
  }
  
  details > div {
	border: 2px solid #BDE4A3;
	border-radius: 1rem;
	margin-top: 0;
	padding: 1rem;
	background-color: rgba(127,192,108,.8);
	color: white;
	text-shadow: 2px 2px 4px black;
  }
	details>h3 { font-size: 2rem;text-shadow: #0b181e;}
  
  


/*
azt a menüpontot amihez tartozik almenü,
relatív pozícióval kell megadnunk
*/
nav .has-submenu {
	position: relative
}

/*
ha van almenüje és föléhúzzuk az egereket,
akkor a .submenu-t megjelenítjük
*/
nav .has-submenu:hover .submenu {
	display: block
}

/*
az ::after szelektorral nyilat teszünk a menüpont neve mögé,
ha van neki almenüje
*/
nav .has-submenu::after {
	content: '';
	color: white;
	position: absolute;
	top: 23px;
    right: 10px
}

/*
a nyíl miatt a jobb oldali padding-et feljebb toljuk
*/
nav .has-submenu>a {
	padding-right: 35px
}


/*
az almenüt abszolút pozicionáljuk
*/
nav .submenu {
	position: absolute;
	width: 220px;
	display: none
}
nav .submenu a {
	background: rgba(190,0,0,1);
	padding: 10px 20px
}
nav .submenu a:hover {
	background: black
}


.break
	{	
		word-wrap:break-word;
	}




/**/



.section-title { font-size: 24px; font-weight: 600;grid-column: span 12;color: #0f0f19;background: #BDE4A3;padding: 2rem 0 0 5rem; }
.section-title2 { font-size: 24px; font-weight: 600;grid-column: span 12;color: #0f0f19;background: #BDE4A3;padding: 0 0 0 5rem; }
.section-title3 { font-size: 24px; font-weight: 600;grid-column: span 12;color: #0f0f19;background: #BDE4A3;padding: 5rem 0 0 5rem; }




#sponzor { background: #BDE4A3; padding: 0; }
#sponzor .box { grid-column: span 4;color: rgba(15,15,25,.8); }
#sponzor .box .box1 { grid-column: span 12; grid-template-columns: repeat(1,1fr);}
#sponzor ul li {list-style: none;}
#sponzor .grid .box {padding: 30px; }
#sponzor .grid .box a {color:white;text-shadow: 2px 2px 4px black; }
#sponzor .grid .box a:hover {color:#0b181e; }
#sponzor .grid .box img {width: 300px;height: auto;margin-top: 15px;border-radius:24px;box-shadow: 0 30px 40px -20px rgba(0,0,0,.5);}
#sponzor .grid .box img:hover {box-shadow:  20px 20px 60px #bebebe,-20px -20px 60px #ffffff;}
@media(max-width:800px) {
	#sponzor .grid .box { grid-column: span 12 }
}

#sponzor .grid1 .box {padding: 0px;grid-column: span 4;margin: 0 auto; }
#sponzor .grid1 .box a {color:white;text-shadow: 2px 2px 4px black; }
#sponzor .grid1 .box a:hover {color:#0b181e; }
#sponzor .grid1 .box img {width: 300px;height: auto;margin-top: 15px;border-radius:24px;box-shadow: 0 30px 40px -20px rgba(0,0,0,.5);}
#sponzor .grid1 .box img:hover {box-shadow:  20px 20px 60px #bebebe,-20px -20px 60px #ffffff;}
@media(max-width:800px) {
	#sponzor .grid1 .box { grid-column: span 12 }
}



footer { background: #0b181e; padding: 60px 0 30px 0}
footer .section-title { grid-column: span 12 }
footer .box { grid-column: span 4 }
footer ul { list-style: none }
footer li { margin: 0; color: #999;  }
footer ul li:first-child { font-weight: 600; color: #fff; margin: 0 0 20px 0 }
footer a { color: #fff; text-decoration: none; }

@media(max-width:800px) {
	footer .box { grid-column: span 12 }
}

header { background-color:#070759;/* #0b181e;*/ font-size: 0.9rem; font-weight: 600; text-transform: uppercase; }
header .grid { align-items: center; padding: 10px 0 }
header .logo { color: #a6d7f1; grid-column: span 3 }
header nav { grid-column: span 9; justify-self: end }
header a { color: #fff; text-decoration: none; padding: 12px 10px 10px 10px; display: block;margin-right: .5rem; }
header a:hover { color: #a6d7f1 }
header nav ul { display: flex; flex-flow: row wrap; list-style: none }
header nav ul li { justify-content: space-around;align-items: center;padding: 5px 0 0 0;margin-top: 1px}
header { position: -webkit-sticky; /* Safari */	position: sticky;	top: 0; }

@media(max-width:800px) {
	header .grid { grid-row-gap: 0 }
	header .logo { grid-column: span 12; text-align: center; margin: 10px 0 }
	header nav { grid-column: span 12; justify-self: center }
	header nav ul { justify-content: center }
}

#footer {
	width: 100%;
    max-width: 100%;
    text-align: end;
    font-size: .8rem;
	color: #ffffff;
	/*text-shadow: 2px 2px rgb(0 0 0 / 80%);
	position: fixed;*/
	left: 0;
	bottom: 0;
	font-family: verdana, 'Comfortaa','Oxygen', Roboto;
	/*text-shadow: 2px 2px rgb(0 0 0 / 85%);
    text-align: center;*/
	padding-right: 5rem;
	
}
 #footer .copyright {
	letter-spacing: 0.2rem;
	font-size: 0.4rem;
	opacity: 0.75;
	margin-bottom: 0;
	text-transform: uppercase;
	font-family: 'Comfortaa','Oxygen', Roboto;
}

/* színátmenetes elválasztó vonal*/
hr {
	border: 0;
	 height: 1px;
	 background-image: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
	 background-image:    -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
	 background-image:     -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
	 background-image:      -o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
	}

#footer hr {margin: 2rem 5rem 1rem 5rem;}






  
/*  hambi menü - cyrex*/
/**/
a { text-decoration:none }
.clear:before,
.clear:after {
	content:" ";
	display: table
}
.clear:after { clear: both }
.arrow {
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: middle;
	margin: 0 5px 1px 5px;
}
.arrow.down {
	border-top: 7px solid;
	border-right: 7px solid transparent;
	border-left: 7px solid transparent
}
.arrow.up {
	border-bottom: 7px solid;
	border-right: 7px solid transparent;
	border-left: 7px solid transparent
}

nav {
	width: 100%;
	/*background: #6CC49B*/
}
nav .navbar {
	width: 95%;
	max-width: 1200px;
	margin:0 auto
}
nav a { color: #fff;border-radius: 5px; }
nav .logo {
	float: left;
	display: block;
	font-size: 1.2rem;
	font-weight: bold
}
nav .menu-toggle {
	cursor: pointer;
	display: none;
	float: right;
	padding: 12px;
	margin: 10px 0;
	background: #62b38d;
	transition: background-color .5s;
	border-radius: 5px;
}
nav .icon-bar {
	background-color: #fff;
	display: block;
	width: 22px;
	height: 2px
}
nav .icon-bar + .icon-bar { margin-top: 4px }

nav .menu ul { float: right }
nav .menu li {
	float: left;
	list-style: none;
	/*border-left: 2px solid #62b38d*/
}
nav .menu li:first-child { border-left: 0 }
nav .menu li a,
nav .open-submenu {
	color: #fff;
	cursor: pointer;
	position: relative;
	display: block;
	padding: 12px 20px;
	transition: background-color .3s;
	border-radius: 5px;
	margin-bottom: 5px;
	text-shadow: 2px 2px 4px black;
}

nav .menu li a:hover,
nav .open-submenu:hover ,
nav .open-submenu.active,
nav .menu-toggle.active  {
	background: #2245FF;/*#FFBB22;*/
	transition: background-color .5s;
	margin: 5px;/**/
	padding-left: 15px;
}
nav .menu ul ul {
	z-index: 100;
	display: none;
	float: none;
	position: absolute;
	background: #FFBB22;
	margin: 0 5px 5px 5px;
	padding-bottom: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;

  }

nav .menu ul ul li {
	float: none;
	border: 0
}
nav .menu ul ul a:hover {
	background: #62b38d;
	transition: background-color .3s
}

nav .menu ul ul ul {
	background: #997016;
}

nav .menu ul ul ul li {
	float: right;
	border: 0
}

@media(max-width:800px) {
	nav .logo { padding-top: 8px }
	nav .menu-toggle { display: inline-block }
	nav .menu { display: none; clear: both }
	nav .menu > ul { float: none }
	nav .menu li { width: 100%; border: 0 }
	nav .menu li:last-child { margin: 0 0 15px 0 }
	nav .menu li a,
	nav .open-submenu {
		display: block;
		background: #62b38d;
		padding: 10px;
		margin: 2px 0 0 0
	}
	nav .menu ul ul {
		position: static;
		background: transparent;
		display:none
	}
	nav .menu ul ul a { background: burlywood }
	nav .menu ul ul a:hover { background: #FFBB22 }
	
}

#versenyek ul {min-width:155px}
#galeria ul {min-width:130px}
.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,101,132,.99);/* rgba(42,63,42,.99)    255, 255, 255, 0.75 rgba(0, 0, 0, 0.50); rgba(42,63,42,.95)*/
	transition: opacity 200ms;
	visibility: hidden;
	opacity: 0;
	height: 500%;
  }
  
  .overlay a  {
	  color: white;
	  text-align: right;
	  text-decoration: none;
	  padding: 0.5rem;
  }
  
  .overlay .cancel {
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: default;
  }
  
  .overlay:target {
	visibility: visible;
	opacity: 1;
  }
  
  .modal {
	margin: 100px auto;
	padding: 2rem;/*1rem .5rem;*/
	/*background: rgba(65,163,236,.75);*/
	color: #ffffff;
	border: 1px solid #fff; /*#666;*/
	width: 1000px; /*800px;*/
	max-width: 90vw;
	border-radius: 6px;
	box-shadow: 0 0 50px rgba(255,255,255,.5);
	position: relative;
	font-family: 'Comfortaa';
	font-size: 100%;
	font-weight: 400;
	text-align: center;
	/*color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/
	text-shadow: 2px 2px 5px rgba(0,0,0,.35);
	overflow: hidden;
  }
  
  .modal h2 {
	margin-top: 0;
  }
  
  .major {padding:1rem 2rem;text-transform: uppercase;color:white;/*#070759;;*/text-align:center;/*text-shadow: 2px 2px 4px white;*/
  }
  /*   color: white;
  text-shadow: 0px -1px black, 1px 0px black, 0px 1px black, -1px 0px black;
} */
  #section1 img {
	  padding-top: 1rem;
	  padding-bottom: 1rem;
	  max-width: 100%;
	  height: auto;
	  width: 70%;
		
  }
  
  .pre {
	font-family: 'Comfortaa';
	font-size: 100%;
	font-weight: 400;
	text-align: left;
	/*color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;*/
	text-shadow: 2px 2px 5px rgba(0,0,0,.35);
	/*margin-left:10rem;*/
	line-height: 2.0;
	
	
  }
  .pre h3 {
	/*padding-left: 2rem;
	margin-left:6rem;*/
	padding-top: 1rem;
	padding-bottom: 1rem;
	text-transform: uppercase;
  }
  
#section5 pre { padding-left: 10rem; }


@media(orientation:portrait) {
	.pre h3 { margin-left:0;padding-left: 0;}
	.pre { font-size: 80%;margin-left:1rem;line-height: 2.0;}
	#section3 p { line-height: 1.5;text-align:justify}
	.modal {padding:0.5rem;}
}


/* kereső */
/*Style the submit button*/
.search-submit {
	transition:all 0.2s ease-in-out;
	
	background-color: transparent;
	border: none;
	float: right;
	position: relative;
	width: rem(60);
	z-index: 2;
}
	/* Adjust the color of the search icon on hover*/
	
		
		.fa-search:hover {
			color: lighten color-white, 10%;
		}
	


/* Style our search icon*/
.fa-search {
	transition :all 0.2s ease-in-out;
	
	color: color-white;
	font-size: rem(36);
}










.parent {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	}
	
	.div1 { grid-area: 1 / 1 / 2 / 3; }
	.div2 { grid-area: 1 / 3 / 2 / 11; }
	.div3 { grid-area: 1 / 11 / 2 / 13; } 

	.div1 img {
		/*width: 11rem;
		height: 11rem;
		object-fit: cover;
		object-position: right;
		padding-left: 5rem;
		padding-top: 5rem;
		height: 12vh;*/
		width: 15vw;
		object-fit: cover;
		object-position: right;
		padding-left: 2vw;
		/*padding-top: 5vh;*/
		padding-top: 16px;
		
	  }

	  







	  /*
  AUTO GRID
  Set the minimum item size with `--auto-grid-min-size` and you'll
  get a fully responsive grid with no media queries.
*/
.auto-grid {
	--auto-grid-min-size: 16rem;
  }
  
  .auto-grid > * {
	max-width: 300px;
  }
  
  .auto-grid > * + * {
	margin-top: 1rem;
  }
  
  @supports(display: grid) {
	.auto-grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
	  grid-gap: 1rem;
	}
	
	.auto-grid > * {
	  max-width: unset;
	}
  
	.auto-grid > * + * {
	  margin-top: unset;
	}
  }
  
  /*
	WRAPPER
	A utility with a max width that contains child elements and horizontal centers them
  */
  .wrapper_team {
	max-width: 65rem;
	margin: 0 auto;
	padding: 0 1rem;
  }
  
  
  /* Presentational styles */
  
  #team {
	background: #353540;
	padding: 1rem 0;
	line-height: 1.4;
	font-family: sans-serif;
  }
  
  #team li {
	padding: 5rem 1rem;
	text-align: center;
	font-size: 1.2rem;
	background: #22a6b3;
	color: #ffffff;
  }
  
  #team h1 { 
	color:#ffffff;
	font-family:'dosis';
  }

  #section2 .modal .content .pre {
	margin:0 auto;
	width:fit-content;
  }

  #section2 .modal .content p {
	padding:0 2.15rem;
	
  }

  #section2  a{
	text-decoration: none;
	color: #00b8d4;
	text-align: left;
	padding: 0em;
  }


  .arnyek {text-shadow: 1px 1px #ffffff, -1px -1px #000000;}