:root{
	--feher: #fff;
	--fekete: #000;

	--sotet: #363636;
	--vilagos: #f8f8f8;
	--kozepes:  #848484;

	--piros_1: #d95353;
	--piros_2: #991616;
	
	--zold_1: #9edccb;
	--zold_2: #47b496;

	--kek_1: #a6dbe8;
	--kek_2: #4d9eb2;
	--kek_3: #1b697d;
	
	--lila_1: #c666ce;
	--lila_2: #801988;
	--lila_3: #3f0b43;
	
	--fogkrem_1: #8ff4e2;
	--fogkrem_2: #34bda5;
	--fogkrem_3: #197666;
	
	--sarga_1: #c0895c;

	--semmi: rgba(0, 0, 0, 0.0);

	--header_height: 40px;

}

@font-face{
	src: url(fonts/Roboto-Regular.ttf);
	font-family: Roboto-regular;
}

@font-face{
	src: url(fonts/Roboto-Light.ttf);
	font-family: Roboto-light;
}

@font-face{
	src: url(fonts/Roboto-Thin.ttf);
	font-family: Roboto-thin;
}

@font-face{
	src: url(fonts/Roboto-Medium.ttf);
	font-family: Roboto-medium;
}

@font-face{
	src: url(fonts/Roboto-Bold.ttf);
	font-family: Roboto-bold;
}

::-webkit-scrollbar {
  width: 14px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: var(--vilagos);
  border-left: 1px solid #eeeeee;
  border-radius: 8px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: var(--kek_3);
  border-radius: 14px;
  transition: 0.2s;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color: var(--kek_2);

}

html{
	scroll-behavior: smooth;
}

*{
	padding: 0;
	margin: 0;
	font-family: Roboto-regular;
}

body{
	background-color: var(--vilagos);
}

p, a, h1, h2, h3, h4, h5{
	margin-block-start: 0;
	margin-block-end: 0;
	color: var(--sotet);
}

h1, h2, h3, h4, h5{
	font-weight: 100;
}

input, textarea{
	background-color: rgba(0, 0, 0, 0.0);
	border: 2px solid rgba(0, 0, 0, 0.0);
	border-bottom: 2px solid var(--sotet);
	font-family: Roboto-regular;
	color: var(--sotet);
	font-size: 16px;
}

input:hover{
	border-bottom: 2px solid var(--zold_2);
}

input:focus{
	border-bottom: 2px solid var(--zold_2);
	outline: none;
}

textarea{
	border: 2px solid var(--sotet);
	font-family: Roboto-regular;
	resize: none;
}

textarea:hover{
	border: 2px solid var(--zold_2);
}

textarea:focus{
	border: 2px solid var(--zold_2);
	outline: none;
}

.fixed-flex{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
}

.halfer{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.thirds{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.button-basic{
	background-color: var(--lila_1);
	color: var(--vilagos);
	padding: 6px 12px 6px 12px;
	border-radius: 8px;
}

.button-basic:hover{
	cursor: pointer;
	background-color: var(--kek_2);
}

.align-center{
	text-align: center;
}

.align-right{
	text-align: right;
}

/*modal*/

.modal-wrapper{
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

.modal-wrapper.active{
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-container{
	min-width: 40vw;
	min-height: 60vh;
	background-color: var(--vilagos);
	overflow: hidden;

}

.modal-overlay{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99;
	background-color: rgba(100, 100, 100, 0.2);
	backdrop-filter: blur(10px);
	display: none;
}

.modal-overlay.active{
	display: block;
}


.modal-header{
	display: grid;
	grid-template-columns: 90% 10%;
}

.modal-close{
	background-color: var(--sotet);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.1s;
}

.modal-close p{
	color: var(--piros_3);
	font-size: 24px;
	font-family: Roboto-medium;
	margin-top: -2px;
	transition: 0.1s;
}

.modal-close:hover{
	cursor: pointer;
	background-color: var(--piros_3);
}

.modal-close:hover p{
	color: var(--vilagos);
}

/* HEADER */

header{
	width: 100%;
	/*background-color: var(--lila_2);*/
	margin-bottom: 24px;
	margin-top: 8px;
}

header *{
	color: var(--sotet);
}

#header-home-a{
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-size: 16px;
	
}

#header-home-a img{
	display: none;
}

#header-home-a img.active{
	display: block;
}


#header-home-a h1{
	color: var(--lila_3);
	font-family: Roboto-light;
	margin-left: 8px;
}

#header-home-a h1:hover{
	color: var(--lila_2);
}

header nav{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 8px;
}

header nav a{
	text-decoration: none;
	display: block;
	width: 100px;
	text-align: center;
	border-bottom: 1px solid var(--sotet);
	margin: 4px;
	transition: 0.2s;
}

header nav a:hover{
	color: var(--lila_2);
	border-bottom: 2px solid var(--lila_2);
	margin-bottom: -4px;
	padding-bottom: 7px;
}


/*spinner*/
#spinner-big{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	backdrop-filter: blur(20px);
	display: none;
	justify-content: center;
	align-items: center;
	flex-flow: column;
}

#spinner-big.active{
	display: flex;
}

.spinner-big-div-wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.spinner-big-div-wrapper div{
	border: 2px solid var(--sotet);
	width: 60px;
	height: 60px;
	border-radius: 30px;
	/*background-color: rgba(0, 0, 0, 0.2);*/
	margin-left: 320px;
	transform: scale(0.0);
}

@keyframes spinnerBigAnim_1{
	0%{
		transform: scale(0.0) rotate(0deg);
		border: 2px solid var(--sotet);
		border-radius: 30px;
	}
	16%{
		transform: scale(1.0) rotate(90deg);
		border: 4px solid var(--fogkrem_1);
		border-radius: 30px;
	}
	50%{
		transform: scale(1.0) rotate(180deg);
		border: 4px solid var(--fogkrem_1);
		border-radius: 30px;
	}
	60%{
		transform: scale(0.0) rotate(360deg);
		border: 2px solid var(--sotet);
		border-radius: 30px;
	}
}

@keyframes spinnerBigAnim_2{
	0%{
		transform: scale(0.0) rotate(0deg);
		border: 2px solid var(--sotet);
		border-radius: 30px;
	}
	14%{
		transform: scale(1.0) rotate(90deg);
		border: 4px solid var(--lila_1);
		border-radius: 30px;
	}
	48%{
		transform: scale(1.0) rotate(180deg);
		border: 4px solid var(--lila_1);
		border-radius: 30px;
	}
	60%{
		transform: scale(0.0) rotate(360deg);
		border: 2px solid var(--sotet);
		border-radius: 30px;
	}
}

@keyframes spinnerBigAnim_3{
	0%{
		transform: scale(0.0) rotate(0deg);
		border: 2px solid var(--sotet);
		border-radius: 30px;
	}
	12%{
		transform: scale(1.0) rotate(90deg);
		border: 4px solid var(--fogkrem_2);
		border-radius: 30px;
	}
	46%{
		transform: scale(1.0) rotate(180deg);
		border: 4px solid var(--fogkrem_2);
		border-radius: 30px;
	}
	60%{
		transform: scale(0.0) rotate(360deg);
		border: 2px solid var(--sotet);
		border-radius: 30px;
	}
}

@keyframes spinnerBigAnim_4{
	0%{
		transform: scale(0.0) rotate(0deg);
		border: 2px solid var(--sotet);
		border-radius: 30px;
	}
	10%{
		transform: scale(1.0) rotate(90deg);
		border: 4px solid var(--lila_2);
		border-radius: 30px;
	}
	44%{
		transform: scale(1.0) rotate(180deg);
		border: 4px solid var(--lila_2);
		border-radius: 30px;
	}
	60%{
		transform: scale(0.0) rotate(360deg);
		border: 2px solid var(--sotet);
		border-radius: 30px;
	}
}

@keyframes spinnerBigAnim_5{
	0%{
		transform: scale(0.0) rotate(0deg);
		border: 2px solid var(--sotet);
		border-radius: 30px;
	}
	8%{
		transform: scale(1.0) rotate(90deg);
		border: 4px solid var(--fogkrem_3);
		border-radius: 30px;
	}
	42%{
		transform: scale(1.0) rotate(180deg);
		border: 4px solid var(--fogkrem_3);
		border-radius: 30px;
	}
	60%{
		transform: scale(0.0) rotate(360deg);
		border: 2px solid var(--sotet);
		border-radius: 30px;
	}
}

@keyframes spinnerBigAnim_6{
	0%{
		transform: scale(0.0) rotate(0deg);
		border: 2px solid var(--sotet);
		border-radius: 30px;
	}
	6%{
		transform: scale(1.0) rotate(90deg);
		border: 4px solid var(--lila_3);
		border-radius: 30px;
	}
	40%{
		transform: scale(1.0) rotate(180deg);
		border: 4px solid var(--lila_3);
		border-radius: 30px;
	}
	60%{
		transform: scale(0.0) rotate(360deg);
		border: 2px solid var(--sotet);
		border-radius: 30px;
	}
}

#spinner-big-1 div{
	animation: spinnerBigAnim_1 3s linear infinite;

}

#spinner-big-2{
	transform: rotate(60deg);
}

#spinner-big-2 div{
	animation: spinnerBigAnim_2 3s linear infinite;
	animation-delay: 0.2s;
}

#spinner-big-3{
	transform: rotate(120deg);
}

#spinner-big-3 div{
	animation: spinnerBigAnim_3 3s linear infinite;
	animation-delay: 0.4s;
}

#spinner-big-4{
	transform: rotate(180deg);	
}
#spinner-big-4 div{
	animation: spinnerBigAnim_4 3s linear infinite;
	animation-delay: 0.6s;
}

#spinner-big-5{
	transform: rotate(240deg);
}
#spinner-big-5 div{
	animation: spinnerBigAnim_5 3s linear infinite;
	animation-delay: 0.8s;
}

#spinner-big-6{
	transform: rotate(300deg);	
}
#spinner-big-6 div{
	animation: spinnerBigAnim_6 3s linear infinite;
	animation-delay: 1s;
}

#spinner-big-logo{
	width: 200px;
	transform: scale(0.0);
	animation: spinnerbiglogoanim 6s linear infinite;
}

#spinner-big-logo *{
	fill: rgba(0, 0, 0, 0.0);
	stroke: var(--sotet);
	animation: spinnerbiglogoStrokeAnim 6s linear infinite;
	stroke-width: 8;
}

@keyframes spinnerbiglogoanim{
	0%{
		transform: scale(0.0);
	}
	18%{
		transform: scale(0.0);
	}
	21%{
		transform: scale(1.2);
	}
	22%{
		transform: scale(1.0);
	}
	85%{
		transform: scale(1.0);
	}
	86%{
		transform: scale(1.15);
	}
	89%{
		transform: scale(0.0);
	}
}

@keyframes spinnerbiglogoStrokeAnim{
	0%{
		stroke: rgba(0, 0, 0, 0.0);
	}
	22%{
		stroke: var(--sotet);
	}
	54%{
		stroke: var(--vilagos);
	}
	85%{
		stroke: var(--sotet);
	}
	89%{
		stroke: rgba(0, 0, 0, 0.0);
	}

}

.spinner-wrapper{
	height: 30px;
	display: none;
	width: 100%;
	justify-content: center;
	align-items: center;
}

.spinner-wrapper.active{
	display: flex;
}

.spinner-wrapper div{
	width: 30px;
	height: 30px;
	
	border-radius: 16px;
	margin: 0 8px;
	transform: scale(0.0);
}

.spinner-div-0{
	border: 4px solid var(--alkotas);
	animation: spinnerDivAnim 2s linear infinite;
}

.spinner-div-1{
	border: 4px solid var(--kritika);
	animation: spinnerDivAnim 2s linear infinite;
	animation-delay: 0.5s;
}

.spinner-div-2{
	border: 4px solid var(--mas);
	animation: spinnerDivAnim 2s linear infinite;
	animation-delay: 1s;
}

@keyframes spinnerDivAnim{
	0%{
		transform: scale(0.0);
	}
	25%{
		transform: scale(0.9);
	}
	38%{
		transform: scale(1.0);
	}
	50%{
		transform: scale(0.9);
	}
	75%{
		transform: scale(0.0);
	}
}

/* FOOTER */

footer{
	background-color: var(--sotet);
	box-sizing: border-box;
	padding: 20px 0 4px 0;
	text-align: center;
	margin-top: 40px;
}

footer *{
	color: var(--vilagos);
}

footer a{
	text-decoration: none;
}

footer a:hover{
	color: var(--fogkrem_3);
}

footer > h3{
	margin-bottom: 8px;
}

footer > a{
	text-align: center;
	text-decoration: none;
}

footer > div{
	display: flex;
	justify-content: center;
	margin: 12px 20px 20px 20px;
	flex-wrap: wrap;
}

footer > div a{
	text-align: center;
	color: var(--fogkrem_2);
	margin: 0 8px;
}

footer > div a:first-child{
	text-align: left;
}
footer > div a:last-child{
	text-align: right;
}