:root{
	--feher: #fff;
	--fekete: #000;
	--piros_2: #d95353;
	--piros_1: #991616;
	
	--zold_1: #9edccb;
	--zold_2: #47b496;

	--kek_1: #1b697d;
	--kek_2: #4d9eb2;
	--kek_3: #a6dbe8;

	--lila_1: #513f59;
	--lila_2: #a876be;
	--lila_3: #ddb7ee;

	--fogkrem_1: #197666;
	--fogkrem_2: #34bda5;
	--fogkrem_3: #8ff4e2;

	--sarga_1: #eab67e;

	--header_height: 40px;

	--bcg_sotet: #363636;
	--bcg_vilagos: #f8f8f8;
	--bcg_kozepes:  #848484;
	--text_sotet: #363636;
	--text_vilagos: #f8f8f8;

	--kozlemeny: #801138;
	--beszamolo: #b16e51;
	--kritika: #dd9372;
	--tanulmany: #437d5b;
	--ismeretterjeszto: #62a276;
	--beszelgetes: #39687b;
	--alkotas: #1b7179;
	--mas: #504559;
}

@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(--bcg_vilagos);
  border-left: 1px solid #eeeeee;
  border-radius: 8px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: var(--kek_1);
  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(--bcg_vilagos);
}

p, a, h1, h2, h3, h4, h5{
	margin-block-start: 0;
  margin-block-end: 0;
  color: var(--text_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(--bcg_sotet);
	font-family: Roboto-regular;
	color: var(--text_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(--bcg_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);
}

/*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(--bcg_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);
		border: 2px solid var(--bcg_sotet);
		border-radius: 30px;
	}
	16%{
		transform: scale(1.0);
		border: 4px solid var(--beszamolo);
		border-radius: 30px;
	}
	50%{
		transform: scale(1.0);
		border: 4px solid var(--beszamolo);
		border-radius: 30px;
	}
	60%{
		transform: scale(0.0);
		border: 2px solid var(--bcg_sotet);
		border-radius: 30px;
	}
}

@keyframes spinnerBigAnim_2{
	0%{
		transform: scale(0.0);
		border: 2px solid var(--bcg_sotet);
		border-radius: 30px;
	}
	14%{
		transform: scale(1.0);
		border: 4px solid var(--tanulmany);
		border-radius: 30px;
	}
	48%{
		transform: scale(1.0);
		border: 4px solid var(--tanulmany);
		border-radius: 30px;
	}
	60%{
		transform: scale(0.0);
		border: 2px solid var(--bcg_sotet);
		border-radius: 30px;
	}
}

@keyframes spinnerBigAnim_3{
	0%{
		transform: scale(0.0);
		border: 2px solid var(--bcg_sotet);
		border-radius: 30px;
	}
	12%{
		transform: scale(1.0);
		border: 4px solid var(--ismeretterjeszto);
		border-radius: 30px;
	}
	46%{
		transform: scale(1.0);
		border: 4px solid var(--ismeretterjeszto);
		border-radius: 30px;
	}
	60%{
		transform: scale(0.0);
		border: 2px solid var(--bcg_sotet);
		border-radius: 30px;
	}
}

@keyframes spinnerBigAnim_4{
	0%{
		transform: scale(0.0);
		border: 2px solid var(--bcg_sotet);
		border-radius: 30px;
	}
	10%{
		transform: scale(1.0);
		border: 4px solid var(--beszelgetes);
		border-radius: 30px;
	}
	44%{
		transform: scale(1.0);
		border: 4px solid var(--beszelgetes);
		border-radius: 30px;
	}
	60%{
		transform: scale(0.0);
		border: 2px solid var(--bcg_sotet);
		border-radius: 30px;
	}
}

@keyframes spinnerBigAnim_5{
	0%{
		transform: scale(0.0);
		border: 2px solid var(--bcg_sotet);
		border-radius: 30px;
	}
	8%{
		transform: scale(1.0);
		border: 4px solid var(--alkotas);
		border-radius: 30px;
	}
	42%{
		transform: scale(1.0);
		border: 4px solid var(--alkotas);
		border-radius: 30px;
	}
	60%{
		transform: scale(0.0);
		border: 2px solid var(--bcg_sotet);
		border-radius: 30px;
	}
}

@keyframes spinnerBigAnim_6{
	0%{
		transform: scale(0.0);
		border: 2px solid var(--bcg_sotet);
		border-radius: 30px;
	}
	6%{
		transform: scale(1.0);
		border: 4px solid var(--mas);
		border-radius: 30px;
	}
	40%{
		transform: scale(1.0);
		border: 4px solid var(--mas);
		border-radius: 30px;
	}
	60%{
		transform: scale(0.0);
		border: 2px solid var(--bcg_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(--bcg_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(--bcg_sotet);
	}
	54%{
		stroke: var(--bcg_vilagos);
	}
	85%{
		stroke: var(--bcg_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);
	}
}



/*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(--bcg_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(--bcg_sotet);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.1s;
}

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

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

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

/* HEADER */

#header-main{
	width: 100%;
	background-color: var(--bcg_sotet);
}

#header-main *{
	color: var(--text_vilagos);
}

#header-top{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

#qltura-logo-head-a{
	display: flex;
	justify-content: center;
	align-items: center;
	/*height: var(--header_height);*/
	text-decoration: none;
}

#qltura-logo-head-a svg{
	stroke: var(--bcg_vilagos);
	fill: rgba(0, 0, 0, 0.0);
	stroke-width: 16;
	height: 60px;
}

#qltura-logo-head-a:hover svg{
	stroke: var(--fogkrem_3);
}

#qltura-logo-head-a p{
	font-family: Roboto-light;
	margin-left: 8px;
}

#qltura-logo-head-a:hover p{
	color: var(--fogkrem_3);
}

.header-bottom{
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	border-bottom: 1px solid var(--bcg_vilagos);
}

.header-bottom:hover{
	border-bottom: 1px solid var(--lila_3);
}

.header-bottom a{
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	width: 150px;
}

.header-bottom a p{
	color: var(--text_vilagos);
	transition: 0.1s;
}

.header-bottom a:hover p{
	color: var(--lila_3) !important;
}

.header-bottom div{
	width: 20px;
	height: 8px;
	margin-top: 4px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0) 33%, var(--lila_3) 33%, var(--lila_3) 66%, var(--text_vilagos) 66%, var(--text_vilagos));
	background-size: 300% 300%;
	background-position: top left;
	transition: 0.2s;
}

.header-bottom a:hover div{
	background-position: center left;
}

.header-bottom .active div{
	background-position: bottom left;
}


#header-login-button{
	position: absolute;
	right: 12px;
	top: 0;
	height: var(--header_height);
	display: flex;
	align-items: center;
}

#header-user-bar{
	position: absolute;
	right: 12px;
	top: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#header-user-bar > a{
	text-decoration: none;
	display: block;
	padding: 6px 12px 6px 12px;
}

#header-user-bar > a:hover{
	color: var(--kek_2);
}

#header-user-bar svg{
	margin-top: 4px;
	margin-left: 8px;
}

.header-user-svg{
	width: 26px;
}

.header-user-svg *{
	fill: rgba(0, 0, 0, 0.0);
	stroke: var(--bcg_vilagos);
	stroke-width: 16;
}

.header-user-svg:hover *{
	stroke: var(--kek_2);
}

#header-user-bar > a#header-user-login-a{
	display: flex;
	justify-content: center;
	align-items: center;
}

#header-user-bar > a#header-user-login-a:hover p{
	color: var(--kek_2);
}

#header-szerzonev-div{
	width: 100px;
	overflow: hidden;
	margin-right: 8px;
	transition: 0.2s;
}

#header-szerzonev-div p{
	text-align: right;
	white-space: nowrap;
	background-color: var(--bcg_sotet);
}

#header-user-bar:hover #header-szerzonev-div{
	width: 30vw;
}

body.res-tall #header-szerzonev-div{
	display: none;
}

body.res-wide #header-mobile-user-div{
	display: none;
}

#header-mobile-user-div{
	display: block;
	width: 100vw;
	text-align: center;
	margin-top: 12px;
}

#header-ert-toggle{
	width: 24px;
	height: 24px;
	border: 1px solid var(--bcg_vilagos);
	border-radius: 26px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#header-ert-toggle p{
	font-size: 18px;
}

#header-ert-toggle:hover{
	cursor: pointer;
	border: 1px solid var(--kek_2);
}

#header-ert-toggle:hover p{
	color: var(--kek_2);
}

#header-ert-toggle.not-seen{
	border: 1px solid var(--fogkrem_2);
}

#header-ert-toggle.not-seen p{
	color: var(--fogkrem_2);
}

#header-ert-toggle.not-seen:hover{
	border: 1px solid var(--fogkrem_3);
}

#header-ert-toggle.not-seen:hover p{
	color: var(--fogkrem_3);
}


#header-ert-wrapper{
	position: relative;
}

#header-ert-holder{
	display: none;
	position: absolute;
	top: 32px;
	left: -300px;
	right: 0;
	border-radius: 6px;
}

#header-ert-holder.active{
	display: block;
}

#header-ert-holder{
	background-color: var(--bcg_sotet);
	border: 1px solid var(--kek_2);
	padding: 4px;
	max-height: 70vh;
	overflow: hidden;
}

#header-ert-holder p{
	padding: 4px 0 4px 0;
}

#header-ert-holder a{
	display: block;
	text-align: center;
	text-decoration: none;
	color: var(--kek_2);
}

#header-ert-holder a:hover{
	color: var(--kek_3);
}

#header-ert-holder .divider{
	width: 80%;
	margin-left: 10%;
	height: 1px;
	background-color: var(--bcg_kozepes);
}

#logout-ico{
	height: 26px;
}

#logout-ico *{
	stroke: var(--bcg_vilagos);
	stroke-width: 16;
	fill: rgba(0, 0, 0, 0.0);
}

#logout-ico .fill{
	fill: var(--bcg_vilagos);
}

#logout-ico:hover {
	cursor: pointer;
}

#logout-ico:hover *{
	stroke: var(--piros_1);
}

#logout-ico:hover .fill{
	fill: var(--piros_1);
}


/* GENERIC */

.button-basic{
	background-color: var(--lila_1);
	color: var(--bcg_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;
}


/* TIPUS SZINEK */

.vilagos_bcg{
	background-color: var(--bcg_vilagos);
}

.vilagos-border{
	border: 1px solid var(--bcg_vilagos);
}

.szurke-bcg{
	background-color: var(--bcg_kozepes);
}

.szurke-border{
	border: 1px solid var(--bcg_kozepes);
}

.sotet-bcg{
	background-color: var(--bcg_sotet);
}

.sotet-border{
	border: 1px solid var(--bcg_sotet);
}

.kozlemeny-border{
	border: 1px solid var(--kozlemeny);
}

.kozlemeny-bcg{
	background-color: var(--kozlemeny);
}

.beszamolo-border{
	border: 1px solid var(--beszamolo);
}
.beszamolo-bcg{
	background-color: var(--beszamolo);
}

.kritika-border{
	border: 1px solid var(--kritika);
}
.kritika-bcg{
	background-color: var(--kritika);
}

.tanulmany-border{
	border: 1px solid var(--tanulmany);
}
.tanulmany-bcg{
	background-color: var(--tanulmany);
}

.ismeretterjeszto-border{
	border: 1px solid var(--ismeretterjeszto);
}
.ismeretterjeszto-bcg{
	background-color: var(--ismeretterjeszto);
}

.beszelgetes-border{
	border: 1px solid var(--beszelgetes);
}
.beszelgetes-bcg{
	background-color: var(--beszelgetes);
}

.alkotas-border{
	border: 1px solid var(--alkotas);
}
.alkotas-bcg{
	background-color: var(--alkotas);
}

.mas-border{
	border: 1px solid var(--mas);
}
.mas-bcg{
	background-color: var(--mas);
}

/* SZERZO DIV */

.szerzo-div{
	display: flex;
	align-items: center;
	text-decoration: none;
}

.szerzo-div img{
	width: 40px;
	height: 40px;
	border-radius: 40px;
	margin-right: 4px;
	object-fit: cover;
}

.szerzo-div p{
	font-size: 18px;
}

body.res-tall .szerzo-div p{
	font-size: 16px;
}

.szerzo-div:hover p{
	text-decoration: underline;
}


/* MISC */
.show-sajat{
	background-color: var(--bcg_sotet);
	text-align: center;
	color: var(--text_vilagos);
	padding: 4px 0;
}

main{
	background-color: var(--bcg_sotet);
	min-height: calc(100vh - 220px);
}

/* FOOTER */

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

footer *{
	color: var(--text_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;
}