*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family:Montserrat;
	
	word-break:break-word;
}
html{
	scroll-behavior: smooth; 
}
.calIco{
	height:25px; margin-right:10px;
}
.adminContainer{
	width:90%; margin:auto; 
}
.loginFormTG{
	width:90%; margin:20px auto 30px auto; border:1px solid black; padding:20px; border-radius:5px;
}
body{
	height:100%;
}
.containers{
	display:flex; flex-flow:row-reverse nowrap;
}
.tg{
	display:flex; flex-flow:row nowrap;
}
.blackSquare{
	width:4vw; aspect-ratio:1/1; background-color:black;
}
.whiteSquare{
	width:4vw; aspect-ratio:1/1; background-color:white;
}
.goldSquare{
	width:4vw; aspect-ratio:1/1; background-color:gold;
}
.logo{
	width:60%; display:block; margin: 20px auto 10px auto; transition:.5s;
}
#leftContainer{
	width:20%; background-color:gold;
}
#rightContainer{
	width:80%; //background:linear-gradient(to left, #eee, #fff); background-image:url('img/bg.png'); 
	background-attachment:fixed; background-size:20%;
}
.rightBelt{
	clear:both; width:5%; float:right; background-color:black; aspect-ratio:1/1;
}
.leftBelt{
	clear:both; width:5%; float:left; background-color:black; aspect-ratio:1/1;
}
div{
	text-align:center;
}
.monthName{
	width:100%; text-align:center; padding:10px 0 10px 0; font-weight:bold;
}
#showCalendar{
	display:block; width:fit-content; padding:10px; background-color:red; float:right; color: white; background-color:black; font-size:12px; display:none;
}
.calendar2024{
	width:100%; margin:auto; overflow:hidden; height:auto; background-color:#fc0; 
}
.calendar{
	width:80%; height:auto; border-radius:5px; margin:auto;
	display:flex; flex-flow:row wrap; justify-content:space-between; opacity:0;
}
.day{
	width:13.6%; height:auto; padding:5px 0px 5px 0px; border-radius:5px;
	margin:0.3% 0 0.3% 0; 
}
.empty{
	width:13.6%; height:auto; padding:10px 0px 10px 0px; border-radius:5px;
	margin:0.3% 0 0.3% 0; font size:11px; border:1px solid #ccc; color:#ccc; background-color:white;
}
.normalDay{
	background-color:black; color:white; 
}
.weekDay{
	background-color:#fc0; border:1px solid black;
}
.normalDayN{
	background-color:white; color:black; font-size:11px; border:1px solid black;
}
.weekDayN{
	background-color:white; color:gold; border:1px solid gold; font-size:11px;
}
button[type=button]{
	width:2vw; height:2vw; margin:10px; background-color:white; border-radius:50%; display:imline-block;
	line-height:2vw; text-align:center; cursor:pointer; font-size:1vw;
}
button{
	border:0; background-color:transparent;
}
.star{
	width:80%; aspect-ratio:1/1; background-image:url('img/star.svg'); background-size:100% 100%; margin:auto; cursor:pointer;
	text-align:center; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; border-radius:50%;
}
.x{
	width:80%; aspect-ratio:1/1; background-image:url('img/x.svg'); background-size:50% 50%; background-position:center center;
	margin:auto; background-repeat:no-repeat;
}
.number{
	width:14px; height:14px; text-align:center; color:black;
}
table{
	border:1px solid black; border-collapse:collapse; width:90%; margin:auto;
}
td{
	border:1px solid black; width:12.5%;
}
hr{
	width:100%; margin:auto; margin-bottom:20px;
}
h1{
	margin:35px auto 35px auto; font-size:30px; font-wieght:bold; display:block; width:fit-content;
}
h2{
	margin:20px 0 20px 0; font-size:18px; font-wieght:bold; display:flex; flex-flow:row nowrap; justify-content:flex-start;
	align-items:center;
}
h3{
	margin:0px 0 20px 0; font-size:14px; font-wieght:bold; display:block; text-align:left;
}
h4{
	margin:20px 0 20px 0; font-wieght:bold; display:block; text-align:left; font-size:12px; font-weight:normal
}
.events{
	display:flex; flex-flow:row wrap; width:90%; margin:auto; justify-content:flex-start; column-gap:2%; align-items:stretch; margin-bottom:20px; row-gap:20px;
}
.events2{
	display:flex; flex-flow:row wrap; width:100%; margin:auto; justify-content:flex-start; column-gap:2%; align-items:stretch; margin-bottom:20px; row-gap:20px;
}
.event{
	width:32%; display:flex; flex-flow:column nowrap; text-align:left; padding-bottom:10px; background-color:white; padding:10px; border-radius:5px; box-shadow:0px 0px 7px 0px #ccc; 
}
.event2{
	width:23.5%; display:flex; flex-flow:column nowrap; text-align:left; padding-bottom:10px; background-color:white; padding:10px; border-radius:5px; box-shadow:0px 0px 7px 0px #ccc;
}
p{
	text-align:left; display:block; 
}
.photo{
	width:100%; border-radius:5px; cursor:pointer;
}
.img{
	width:100%; aspect-ratio:2/1; overflow:hidden;
}
.ico{
	width:10%; margin-right:10px; border-radius:5px;
}
.title{
	text-align:center; width:100%; display:block; padding:10px; font-size:15px;
}
a{
	text-decoration:none; color:#fc0; font-style:italic; transition:.5s;
}
a:hover{
	font-weight:bold;
}
.panel{
	width:90%; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; margin:auto; font-size:14px;
}
.panelHr{
	width:90%;
}
.panelFont{
	display:block; margin:20px 0px 20px 5px; color:black; position:relative; transition:.5s; cursor:pointer;
}
.panelFont:hover{
	font-weight:bold;
}
.panelFont:before{
	content:'';
	position:absolute;
	bottom:-10px;
	left:0px;
	width:0px;
	height:5px;
	background-color:gold;
	transition:.5s;
}
.panelFont:after{
	content:'';
	position:absolute;
	bottom:-10px;
	right:0px;
	width:0px;
	height:5px;
	background-color:gold;
	transition:.5s;
}
.panelFont:hover:before{
	width:50%;
}
.panelFont:hover:after{
	width:50%;
}
.panelFont:hover{
	display:block; color:black;
}
.panelIco{
	display:block; margin:20px 0px 20px 30px; width:35px;
}
.panel1,.panel2,.panel3,.panel4{
	width:100%; height:auto; display:none;
}
.addEventContainer,.sendMailContainer,.loginRegisterContainer{
	width:100%; height:auto; display:flex; flex-flow:column nowrap; align-items:center;
}
.myAccountContainer{
	width:100%; height:auto; display:flex; flex-flow:column nowrap; align-items:center; 
}
.eventForm{
	width:80%; margin:20px 0 20px 0; display:flex; flex-flow:row wrap; justify-content:space-between; 
}
.eventForm2{
	width:50%; margin:20px 0 20px 0; display:flex; flex-flow:row wrap; justify-content:space-between; 
}
.eventForm3{
	width:80%; margin:20px 0 20px 0; display:flex; flex-flow:column wrap; justify-content:flex-start; 
}
.eventForm4{
	width:90%; margin:20px 0 20px 0; display:flex; flex-flow:row wrap; justify-content:space-between;
}
.logoutForm{
	width:fit-content;
}
.logoutFormProfile{
	width:fit-content;
}
.logoutForm2{
	width:100%;
}
.logoutForm3{
	width:fit-content; text-align:left; display:inline-block;
}
.h2{
	font-size:18px; display:block; font-weight:bold; margin:10px 0px 10px 0px;
}
.h2noMargin{
	font-size:18px; display:block; font-weight:bold; margin:0px 0px 10px 0px;
}
.h3{
	display:block; font-size:14px;
}
.h4{
	display:block; font-size:12px; text-align:center; width:100%; margin-bottom:30px;
}
.registerButton{
	display:block; cursor:pointer; text-decoration:underline; font-weight:bold; margin:5px 0px 30px 0px; font-size:13px;
}
.restoreButton{
	display:block; cursor:pointer; text-decoration:underline; font-weight:bold; margin:5px 0px 30px 0px; font-size:13px;
}
.loginButton{
	display:block; cursor:pointer; text-decoration:underline; font-weight:bold; margin:5px 0px 30px 0px; font-size:13px;
}
.formLabel{
	margin-top:20px; display:block; text-align:left; width:100%;
}
.formLabel2{
	margin-top:20px; display:block; text-align:left; width:50%;
}
.right{
	text-align:right;
}
input[type=text], input[type=email], input[type=password], textarea, select{
	margin-top:10px; width:100%; border:1px solid black; text-align:left; padding:10px; border-radius:5px;
}
.textInput2{
	width:45%!Important; 
}
.formSubmit{
	width:45%; padding:20px;  border:0px; border-radius:5px; margin-top:10px; background-color:gold; color:black; 
	transition:.5s;
}
.formSubmit:hover{
	background-color:#fc0;
}
.formSubmit2{
	width:100%; padding:20px;  border:0px; border-radius:5px; margin-top:20px; background-color:gold; color:black; 
	transition:.5s;
}
.formSubmit2:hover{
	background-color:#fc0;
}
.logoutSubmit{
	width:fit-content; padding:10px;  border:0px; border-radius:5px; margin-top:10px; background-color:gold; color:black; 
	transition:.5s; cursor:pointer;
}
.logoutSubmit:hover{
	background-color:#fc0;
}
.logoutSubmit2{
	width:100%; padding:10px;  border:0px; border-radius:5px; margin-top:10px; background-color:gold; color:black; 
	transition:.5s; cursor:pointer; margin-bottom:20px;
}
.logoutSubmit2:hover{
	background-color:#fc0;
}
.logoutSubmit3{
	width:100%; padding:10px;  border:0px; border-radius:5px; margin-top:10px; background-color:gold; color:black; 
	transition:.5s; cursor:pointer; margin-bottom:5px;
}
.logoutSubmit3:hover{
	background-color:#fc0;
}
.logoutSubmitProfile{
	width:fit-content; padding:10px;  border:0px; border-radius:5px; background-color:gold; color:black; 
	transition:.5s; cursor:pointer;
}
.logoutSubmitProfile:hover{
	background-color:#fc0;
}
.eventSubmit{
	width:fit-content; padding:10px;  border:0px; border-radius:5px; background-color:gold; color:black; 
	transition:.5s; cursor:pointer; margin-bottom:20px;
}
.eventSubmit:hover{
	background-color:#fc0;
}
.eventSubmit2{
	width:fit-content; padding:10px;  border:0px; border-radius:5px; background-color:gold; color:black; 
	transition:.5s; cursor:pointer; margin-bottom:20px; margin-right:30px;
}
.eventSubmit2:hover{
	background-color:#fc0;
}
.eventSubmit3{
	width:fit-content; padding:10px;  border:0px; border-radius:5px; background-color:black; color:white; 
	transition:.5s; cursor:pointer; margin:20px 0; 
}
.eventSubmit3:hover{
	background-color:#fc0; color:black; border:1px solid black;
}
input[type=date]{
	margin-top:10px; width:45%; border:1px solid black; text-align:left; padding:10px; border-radius:5px;
}
.upload{
	width:45%; overflow: hidden; margin-top:10px; height:auto; border-radius:5px; font-size:13px;
}
.upload label{
	width:100%; padding:20px 0px 20px 0px;  border:0px; border-radius:5px; background-color:gold; color:black; display:block;
	transition:.5s;
}
.upload label:hover{
	background-color:#fc0;
}
.upload input[type=file] {
	margin:0; padding:0; width:100%; height:100%; border-radius:5px; cursor:pointer; opacity:0; position:relative; 
	margin-top:-45px;
}
.upload label:before {
	content: '\2939';
	margin-right:10px;
}
.closeDiv{
	width:80%; margin:10px 0px 10px 0px;
}
.closeDiv2{
	width:90%; margin:10px 0px 10px 0px;
}
.closeButton,.closeButton2,.closeButton3{
	width:fit-content; display:block; cursor:pointer; padding:5px; border:1px solid black; border-radius:5px; transition:.5s;
	font-size:13px;
}
.closeButton:hover,.closeButton2:hover,.closeButton3:hover{
	background-color:gold;
}
.closeButtonPhoto,.closeButtonPhoto2{
	width:fit-content; display:block; cursor:pointer; padding:5px; border:1px solid black; border-radius:5px; transition:.5s;
	font-size:13px; background-color:white; position:absolute;
}
.closeButtonPhoto:hover,.closeButtonPhoto2:hover{
	background-color:gold;
}
.loginPanelContainer{
	width:100%; height:auto; display:flex; flex-flow:column nowrap; align-items:center;
}
.registerPanelContainer{
	width:100%; height:auto; display:flex; flex-flow:column nowrap; align-items:center;
}
.restorePanelContainer{
	width:100%; height:auto; display:flex; flex-flow:column nowrap; align-items:center;
}
.registerPanelContainer2,.registerPanelContainer3{
	width:100%; height:auto; display:flex; flex-flow:column nowrap; align-items:center;
}
input[type=submit],input[type=button],button{
	cursor:pointer;
}
.profile{
	width:100%; padding:10px; border:1px solid #ccc; border-radius:5px; height:fit-content;
	display:flex; flex-flow:row nowrap; margin-bottom:20px;
}
.userEvents{
	width:100%; height:fit-content;
}
.profilePhoto2{
	width:100%; border-radius:50%; margin-right:20px; aspect-ratio:1/1; overflow:hidden; border:2px solid gold;
}
.pPhoto{
	display:block; max-width:100%; width:auto; max-height:100%; height:auto;  margin:auto;
}
.grayContainer,.grayContainer2{
	position:fixed; width:100%; height:100vh; background-color:rgba(50,50,50,0.7); left:0; top:0; display:none;
}
.grayContainerPhoto,.grayContainerPhoto2{
	position:fixed; width:100%; height:100lvh; background-color:rgba(50,50,50,0.9); left:0; top:0; display:none;
}
.editContainer,.editEventContainer{
	position:absolute; width:90%; height:auto; background-color:rgba(255,255,255,0.95); border-radius:5px; padding:20px; left:5%;
	top:20px; display:none;
}
.bigPhotoContainer,.bigPhotoContainer2{
	height:80vh; margin:10lvh auto 0 auto; border-radius:5px; width:fit-content;
}
#bigPhotoEvent,#bigPhotoEvent2{
	height:100%;border-radius:5px;
}
.filterDateInput{
	width:150px!Important; margin-right:10px; margin-left:10px;
}
.greenAlert{
	font-size:12px; color:yellowgreen; padding:5px; border:1px solid yellowgreen; display:block; 
	text-align:center; width:100%; border-radius:5px;
}
.orangeAlert{
	font-size:12px; color:orange; padding:5px; border:1px solid orange; display:block; 
	text-align:center; width:100%; border-radius:5px;
}
.redAlert{
	font-size:12px; color:red; padding:5px; border:1px solid red; display:block; 
	text-align:center; width:100%; border-radius:5px;
}
.part1{
	width:12%; display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-start;
}
.part2{
	width:48%; display:flex; flex-flow:column wrap; align-items:flex-start; justify-content:center; padding-left:20px;
}
.part3{
	width:40%; display:flex; flex-flow:row nowrap; align-items:flex-start; justify-content:flex-end; column-gap:10px;
}
#footer{
	padding:20px; background-color:black; color:white; display:flex; flex-flow:row wrap; justify-content:space-around; font-size:13px;
	border-bottom:5px solid gold; letter-spacing:-1px;
}
.logoPdf{
	height:40px; margin-right:20px; border-radius:50%;
}
.infoFooter{
	padding:20px 30px 20px 20px; display:flex; flex-flow:column wrap; justify-content:center; align-items:center; width:fit-content; 
}
.regFooter{
	padding:20px 30px 20px 30px; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; width:fit-content; 
}
.aReg{
	color:white; font-style:normal; text-decoration:underline;
}
.aRegBlack{
	color:orange; font-style:normal; text-decoration:underline; display:block; width:100%; font-size:12px; text-align:left;
}
#cookies{
	width:30%; position:fixed; bottom:20px; left:35%; padding:20px; border-radius:5px; border-bottom:5px solid gold; background-color:white;
	display:none; box-shadow:0px 0px 5px 0px #ddd; text-align:center;
}
.logoCookie{
	width:30%; margin-bottom:20px;
}
.aCookies{
	font-style:normal, color:black; text-decoration:underline;
}
#closeCookies{
	display:block; width:fit-content; margin:auto; text-align:center; border-radius:5px; background-color:gold; padding:10px; cursor:pointer; margin-top:20px; transition:0.5s; font-size:13px;
}
#closeCookies:hover{
	background-color:#fc0; 
}
.tg2{
	display:none;
}
@media(max-width:1400px){
	#leftContainer{
		width:30%;
	}
	#rightContainer{
		width:70%;
	}
	h1{
		font-size:20px;
	}
	h2,.h2,.h2noMargin{
		font-size:15px;
	}
	h3,.h3{
		font-size:12px;
	}
	h4,.h4{
		font-size:11px;
	}
	a,p,.title,#footer,.panel{
		font-size:12px;
	}
	input,label,textarea,select,button.day,.number,.star,.x,.normalDay,.weekDay,.empty{
		font-size:12px;
	}
	.closeButton,.closeButton2,.closeButton3,.closeButtonPhoto,.closeButtonPhoto2,#closeCookies{
		font-size:12px; 
	}
	#bleft{
		width:10%; aspect-ratio:1/1; display:inline-block; height:auto; text-align:center;
	}
	#bright{
		width:10%; aspect-ratio:1/1; display:inline-block; height:auto;text-align:center;
	}
	.logoFooter{
		padding-left:10px; 
	}
	.infoFooter{
		padding:10px; 
	}
	.regFooter{
		padding:10px;
	}
	.event2{
		width:32%; display:flex; flex-flow:column nowrap; text-align:left; background-color:white;
	}
	.eventForm2{
		width:80%; 
	}
	h1{
		font-size:15px;
	}
	.logoF{
		height:30px;
	}
	.logoPdf{
		height:30px; margin-right:10px;
	}
	.monthName{
		font-size:13px;
	}
	.part1{
		width:12%; display:flex; flex-flow:row nowrap; align-items:flex-start; justify-content:flex-start;
	}
	.part2{
		width:50%; 
	}
	.part3{
		width:40%;
	}
	.profilePhoto2{
		width:100%; margin-right:0px;
	}
}

@media(max-width:1100px){
	h1{
		font-size:17px;
	}
	.event2,.event{
		width:49%; display:flex; flex-flow:column nowrap; text-align:left; background-color:white;
	}
	.eventForm2,.eventForm{
		width:90%; 
	}
	.closeDiv{
		width:90%; 
	}
	.closeDiv2{
		width:90%; 
	}
	h3{
		margin:0px 0 10px 0; 
	}
	h4{
		margin:10px 0 10px 0;
	}
	#cookies{
		width:40%; left:30%; 
	}
	.logoCookie{
		width:25%; margin-bottom:10px;
	}
}
@media(max-width:1100px) and (orientation: portrait){
	.bigPhotoContainer,.bigPhotoContainer2{
		width:80vw; margin:5vw auto 0 auto; height:auto;
	}
	#bigPhotoEvent,#bigPhotoEvent2{
		width:100%; height:auto;
	}
}
@media(max-width:900px){
	.part1{
		width:20%; 
	}
	.part2{
		width:80%; 
	}
	.part3{
		width:100%; margin-top:15px; 
	}
	.profile{
		display:flex; flex-flow:row wrap; margin-bottom:20px;
	}
	.panelIco{
		display:block; margin:10px 0px 10px 30px; width:25px;
	}
	.panelFont{
		display:block; margin:10px 0px 10px 0px; color:black; position:relative; transition:.5s; cursor:pointer;
	}
	#cookies{
		width:50%; left:25%; 
	}
	.logoCookie{
		width:25%; margin-bottom:10px;
	}
}
@media(max-width:800px){
	#footer{
		justify-content:center; padding:10px;
	}
	.regFooter{
		width:40%; justify-content:center; padding:10px;
	}
	.filterDateInput{
		width:100px!Important; margin-right:15px; margin-left:5px;
	}
}
@media(max-width:768px){
	.tg{
		display:none;
	}
	.tg2{
		display:flex; flex-flow:row nowrap;
	}
	#leftContainer{
		width:100%; margin-bottom:10px; background-color:#fc0;
	}
	#rightContainer{
		width:100%;
	}
	.containers{
		flex-flow:column nowrap;
	}
	.calendar{
		width:40%; margin:auto; 
	}
	.logo{
		width:30%; margin:10px;
	}
	.leftLogoSection{
		width:100%;
	}
	.title{
		width:fit-content; font-size:15px;
	}
	#bleft{
		width:5%; font-size:13px;
	}
	#bright{
		width:5%; font-size:13px;
	}
	.rightBelt{
		width:3%; display:none;
	}
	.leftBelt{
		width:3%; 
	}
	.calendar2024{
		//display:none;
	}
	#showCalendar{
		display:block;
	}
	#cookies{
		width:60%; left:20%; 
	}
	.logoCookie{
		width:20%; margin-bottom:10px;
	}
}
@media(max-width:600px){
	.calendar{
		width:55%; margin:auto; 
	}
	.regFooter{
		width:fit-content; min-width:51%; justify-content:flex-start; padding:5px;
	}
	.logoPdf{
		height:20px;
	}
	#cookies{
		width:80%; left:10%; 
	}
	.logo{
		width:30%; margin:10px;
	}
	.title{
		width:fit-content; font-size:14px;
	}
}
@media(max-width:550px){
	.event2,.event{
		width:100%; 
	}
	.events.events2{
		column-gap:0;
	}
	h1{
		font-size:13px;
	}
	.bigSubmit{
		width:100%!Important;
	}
	.bigLabel{
		display:block; width:100%;
	}
	.filterDateInput{
		width:100px!Important; margin-right:15px; margin-left:0px;
	}
	.logoutForm3{
		width:100%;
	}
	.panelIco{
		margin:10px 0px 10px 0px; width:25px;
	}
	.panelFont{
		margin:10px;
	}
	.calendar{
		width:60%;
	}
	.logo{
		width:30%; margin:10px;
	}
	.title{
		width:fit-content; font-size:13px; 
	}
}
@media(max-width:400px){
	.panelIco{
		margin:5px 0px 5px 0px; width:25px;
	}
	.panelFont{
		margin:5px; font-size:11px; width:fit-content; 
	}
	.title{
		font-size:12px; 
	}
	
}