html {

}

hr{
	margin-block-start: 0px;
	margin-block-end: 0px;
}

@font-face {
  font-family: pacifico;
  src: url(font/Pacifico.ttf);
}

@font-face {
  font-family: eagle;
  src: url(font/eagle.ttf);
}

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

@keyframes loadImage {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}


body{
	margin: 0;
	overflow-x: hidden;
}

.button{
	position: absolute;
	width: 100px;
	height: 35px;
	margin-top: 20px;
	color: white;
	text-align: center;
	border-radius: 10px;
	font-family: "roboto";
	transition: box-shadow 0.2s, opacity 0.2s;
	cursor: pointer;
}
.button:hover{
	box-shadow: 0px -10px 10px rgba(0,0,0,0.2), 0px 10px 10px rgba(0,0,0,0.2);
}

.button span{
	line-height: 35px;
	vertical-align: middle;
}

#userView{
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0,0,0,0.4);
	width: 100%;
	height: 100%;
	z-index: 3;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: #707070;
}

/* Glass effect for browsers that do support it */
/*
@supports(backdrop-filter: blur(20px)){
	#userView{
		color: #CFCFCF !important;
	}
	#mainUserView{
		background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.5)) !important;
		backdrop-filter: blur(20px) !important;
	}
	#userSideBar{
		backdrop-filter: blur(20px) !important;
		background-color: rgba(33,33,33,0.5) !important;
	}
	.userItemName{
		color: #CFCFCF !important;
	}
	.userDivider{
		border-top: solid #C6C6C6 1px !important;
	}
}
*/

#mainUserView{
	background-color: white;
	overflow: hidden;
	border-radius: 37px;
	width: 90%;
	height: 90%;
}

#userSideBar{
	background-color: #DDDDDD;
	height: 100%;
	overflow: hidden;
	position: relative;
}

#userInfo{
	padding: 30px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

#userProfilePicture{
	width: 90px;
	height: 90px;
	clip-path: circle(50%);
}

#userNameView{
	padding-left: 20px;
	margin-top: -8px;
	display: flex;
	flex-direction: column;
}

#userFullName{
	font-size: 30px;
}

#userName{
	font-size: 17px;
}

.userItem{
	width: 100%;
	height: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 30px;
	cursor: pointer;
	color: #707070;	
	background-color: rgba(0,0,0,0);
	transition: background-color 0.2s, color 0.2s;
}

.userItemSelected{
	background-color: #7F7F7F !important;
	color: #E6E6E6 !important;
}

.userDividerHidden{
	opacity: 0 !important;
}

.userItemName{
	font-size: 20px;
}

.userDivider{
	border-top: solid 0.2px;
	border-color: #C6C6C6;
	opacity: 1;
	transition: opacity 0.2s;
}

#logoutButton{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
	bottom: 0px;
	width: 100%;
}

#logoutText{
	font-size: 20px;
	cursor: pointer;
	color: #ff3131;
}

/* Cards */
@media (max-width:1000px) {
	/* Mobile */
	#cardsContainer{
		position: absolute;
		width: 100%;
		height: 25%;
		z-index: 1;
		transition: top 0.3s;
	}
	.card{
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		height: 200px;
		margin: 20px;
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: white;
		transition: height 0.2s;
	}

	.cardInfoContainer{
		order: 1;
		width: 100%;
		margin-bottom: 20px;
		display: inline-flex;
		vertical-align: top;
		border-radius: 0px 20px 20px 0px;
	}

	.cardImageContainer{
		position: relative;
		order: 2;
		height: 220px;
		background: linear-gradient(241deg, #d5d5d5, #005d29);
	    background-size: 400% 400%;
		animation: loadImage 2s ease infinite;
		display:inline-block;
	}

	.cardImage{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.cardImageGradient{
		background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
		width: 100%;
		height: 50px;
		top: 0;
		position: absolute;
	}

	.cardMobileButtonBox{
		background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
		position: absolute;
		bottom: 0;
		height: 50px;
		width: 80%;
		padding-left: 10%;
		padding-right: 10%;
		display: none;
		opacity: 0;
		transition: opacity 0.2s;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cardMobileButton{
		height: 190%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.cardMobileImage{
		width: 40px;
		margin: 0 auto;
	}
	.cardMobileButtonText{
		color: rgb(29, 84, 43);
		text-align: center;
		font-size: 15px;
		font-family: "roboto";
	}

	.cardIcon{
		margin-left: 15px;
		margin-top: 15px;
		height: 30px;
	}

	.cardTitleGroup{
		display: inline-flex;
		flex-direction: column;
		width: 100%;
	}

	.cardName{
		font-family: "roboto";
		height: fit-content;
		line-height: 30px;
		margin: 15px;
		color: rgb(82, 82, 82);
		font-size: 5vw;
		vertical-align: middle;
	}

	.cardLike{
		margin-right: 15px;
		margin-left: auto;
		margin-top: 15px;
		width: 30px;
		height: 30px;
		stroke: rgb(82, 82, 82);
		fill: white;
		transition: stroke 0.3s, fill 0.3s, transform 0.5s;
	}

	.cardDescription{
		font-family: "Arial";
		margin-left: 15px;
		margin-right: 15px;
	}

	#ratingScreen{
		position: fixed;
		background-color: white;
		width: 100%;
		height: 100%;
		display: none;
		flex-direction: column;
		justify-content: center;
		z-index: 2;
		top: 0px;
	}
	#ratingHeader{
		height: 150px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	#ratingHeaderMain{
		color: #525252;
		font-size: 25px;
		margin: 20px;
		font-family: "Arial";
		text-align: center;
	}
	#ratingHeaderSub{
		font-family: "roboto";
		color: #525252;
		margin-left: 20px;
		margin-right: 20px;
		font-size: 15px;
		text-align: center;
	}

	#ratingStarScreen{
		background-color: rgb(29, 84, 43);
		width: 100%;
		height: 100%;
		z-index: 1;
		position: absolute;
		display: none;
		justify-content: center;
		flex-direction: column;
	}
	#ratingGrid{
		display: grid;
		grid-template-columns: repeat(2, auto);
		grid-template-rows: repeat(2, 1fr auto);
		height:500px;
		overflow-y: scroll;
	}
	.ratingCategory{
		background-color: rgb(29, 84, 43);
		margin-top: 20px;
		height: 130px;
		width: 130px;
		justify-self: center;
		align-self: center;
		display: flex;
		justify-content: center;
		flex-direction: column;
		border-radius: 65px;
	}
	.ratingCategoryIcon{
		align-self: center;
		width: 60px;
	}
	.ratingCategoryName{
		align-self: center;
		font-family: "roboto";
		color: white;
	}
	#ratingStarName{
		font-family: "roboto";
		color: white;
		align-self: center;
		font-size: 30px;
	}
	#ratingStarIcon{
		align-self: center;
		width: 100px;
	}

	#ratingStarBox{
		margin-top: 20px;
		align-self: center;
	}
	.ratingStar{
		width: 35px;
	}

	#ratingScreenSubmit{
		display: flex;
		background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
		width: 100%;
		height: 40px;
		position: absolute;
		bottom: 0;
		cursor: pointer;
	}
	#ratingScreenSubmitText{
		color: rgb(29, 84, 43);
		font-family: "Arial";
		font-weight: bold;
		font-size: 20px;
		width:100%;
		align-self: center;
		text-align: center;
	}

	#ratingScreenSaver{
		align-self: center;
		justify-content: center;
		background-color: white;
		position: absolute;
		width: 100px;
		height: 100px;
		border-radius: 50px;
		opacity: 0;
		display: none;
		transition: 0.5s;
	}
	#ratingScreenSaverIcon{
		align-self: center;
		width: 75px;
		height: 75px;
	}
	#userAuthScreen{
		display: none;
	}

	#userSideBar{
		width: 100%;
	}
} 
@media (min-width:1000px) {
	/* Desktop / Tablet */
	#userAuthScreen{
		position: fixed;
		top: 100px;
		right: 20px;
		z-index: 2;
		width: 300px;
		min-height: 200px;
		border-radius: 20px;
		background-color: white;
		display: none;
		flex-direction: column;
		transition: opacity 0.3s;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		overflow: hidden;
	}
	#userAuthBanner{
		width: 100%;
		object-fit: contain;
	}
	#userAuthTitle{
		text-align: center;
		color: rgb(82, 82, 82);
		font-family: "roboto";
		font-size: 25px;
	}
	#userAuthMessage{
		text-align: center;
		color: rgb(82, 82, 82);
		font-family: "roboto";
		font-size: 12px;
		padding: 5px;
	}
	#userAuthEmail{
		height: 35px;
		margin: 5px 20px 20px 20px;
		text-align: center;
		border: none;
		background-color: rgb(220, 220, 220);
		outline: none;
		border-radius: 10px;
	}
	#userAuthPassword{
		height: 0px;
		margin-bottom: 0px;
		margin-left: 20px;
		margin-right: 20px;
		text-align: center;
		border: none;
		background-color: rgb(220, 220, 220);
		outline: none;
		border-radius: 10px;
		display: none;
		transition: height 0.3s, margin-bottom 0.3s;
	}
	.userAuthPasswordShow{
		height: 35px !important;
		margin-bottom: 20px !important;
	}
	#userAuthButton{
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: 'roboto';
		color: white;
		font-size: 18px;
		cursor: pointer;
	}
	.userAuthButtonLoadingRegister{
		background: linear-gradient(241deg, #d5d5d5, #5cbdd4);
	    background-size: 400% 400%;
		animation: loadImage 2s ease infinite;
	}
	.userAuthButtonLoadingLogin{
		background: linear-gradient(241deg, #d5d5d5, #61f9a0);
	    background-size: 400% 400%;
		animation: loadImage 2s ease infinite;
	}

	.userAuthHide{
		opacity: 0;
	}
	.userAuthShow{
		opacity: 1;
	}

	#cardsContainer{
		position: absolute;
		width: 50%;
		left: 0;
	}
	.card{
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		height: 200px;
		margin: 20px;
		border-radius: 20px;
		display: block;
	}

	.cardImageContainer{
		position: relative;
		height: 100%;
		width: 300px;
		border-radius: 20px 0px 0px 20px;
		background: linear-gradient(241deg, #d5d5d5, #005d29);
	    background-size: 400% 400%;
		animation: loadImage 2s ease infinite;
		overflow: hidden;
		display:inline-block;
		/*background: linear-gradient(149deg, rgba(255,255,255,0) 0%, rgba(227,227,227,0.8267682072829132) 6%, rgba(249,249,249,1) 12%, rgba(228,228,228,1) 19%, rgba(255,255,255,0) 27%);
		*/
	}

	.cardImage{
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

	.cardInfoContainer{
		height: 100%;
		width: calc(100% - 300px);
		display: inline-flex;
		vertical-align: top;
		border-radius: 0px 20px 20px 0px;
	}

	.cardIcon{
		margin-left: 15px;
		margin-top: 15px;
		height: 30px;
	}

	.cardTitleGroup{
		display: inline-flex;
		flex-direction: column;
		width: 100%;
	}

	.cardName{
		font-family: "roboto";
		height: fit-content;
		line-height: 30px;
		margin: 15px;
		color: rgb(82, 82, 82);
		font-size: 1.5vw;
		vertical-align: middle;
	}

	.cardLike{
		margin-right: 15px;
		margin-left: auto;
		margin-top: 15px;
		width: 30px;
		height: 30px;
		stroke: rgb(82, 82, 82);
		fill: white;
		transition: stroke 0.3s, fill 0.3s, transform 0.5s;
	}

	.cardDescription{
		font-family: "Arial";
		margin-left: 15px;
		margin-right: 15px;
	}

	.cardMobileButtonBox{
		background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
		position: absolute;
		bottom: 0;
		height: 100px;
		width: 80%;
		padding-left: 10%;
		padding-right: 10%;
		display: none;
		opacity: 0;
		transition: opacity 0.2s;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cardMobileButton{
		height: 100%;
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.cardMobileImage{
		width: 40px;
		margin: 0 auto;
	}
	.cardMobileButtonText{
		color: rgb(29, 84, 43);
		text-align: center;
		font-size: 15px;
		font-family: "roboto";
	}


	#ratingScreen{
		position: fixed;
		background-color: white;
		width: 500px;
		left: calc(50% - 250px);
		top: 10%;
		height: 80%;
		border-radius: 20px;
		overflow: hidden;
		display: none;
		flex-direction: column;
		justify-content: center;
		z-index: 2;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	#ratingHeader{
		height: 150px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	#ratingHeaderMain{
		color: #525252;
		font-size: 25px;
		margin: 20px;
		font-family: "Arial";
		text-align: center;
	}
	#ratingHeaderSub{
		font-family: "roboto";
		color: #525252;
		margin-left: 20px;
		margin-right: 20px;
		font-size: 15px;
		text-align: center;
	}

	#ratingStarScreen{
		background-color: rgb(29, 84, 43);
		width: 100%;
		height: 100%;
		z-index: 1;
		position: absolute;
		display: none;
		justify-content: center;
		flex-direction: column;
	}
	#ratingGrid{
		display: grid;
		grid-template-columns: repeat(2, auto);
		grid-template-rows: repeat(2, 1fr auto);
		height:500px;
		overflow-y: scroll;
	}
	.ratingCategory{
		background-color: rgb(29, 84, 43);
		margin-top: 20px;
		height: 130px;
		width: 130px;
		justify-self: center;
		align-self: center;
		display: flex;
		justify-content: center;
		flex-direction: column;
		border-radius: 65px;
	}
	.ratingCategoryIcon{
		align-self: center;
		width: 60px;
	}
	.ratingCategoryName{
		align-self: center;
		font-family: "roboto";
		color: white;
	}
	#ratingStarName{
		font-family: "roboto";
		color: white;
		align-self: center;
		font-size: 30px;
	}
	#ratingStarIcon{
		align-self: center;
		width: 100px;
	}

	#ratingStarBox{
		margin-top: 20px;
		align-self: center;
	}
	.ratingStar{
		width: 35px;
	}

	#ratingScreenSubmit{
		display: flex;
		background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
		width: 100%;
		height: 40px;
		position: absolute;
		bottom: 0;
		cursor: pointer;
	}
	#ratingScreenSubmitText{
		color: rgb(29, 84, 43);
		font-family: "Arial";
		font-weight: bold;
		font-size: 20px;
		width:100%;
		align-self: center;
		text-align: center;
	}

	#ratingScreenSaver{
		align-self: center;
		justify-content: center;
		background-color: white;
		position: absolute;
		width: 100px;
		height: 100px;
		border-radius: 50px;
		opacity: 0;
		display: none;
		transition: 0.5s;
	}
	#ratingScreenSaverIcon{
		align-self: center;
		width: 75px;
		height: 75px;
	}

	#userSideBar{
		width: 400px;
	}
}

.noResultsContainer{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: "roboto";
}

.noResultsContainer > img{
	width: 100%;
}

/*
.cardName{
	font-family: "Roboto";
	color: #525252;
	position: relative;
	vertical-align: top;
	top: 10px;
	left: 20px;
	font-size: 30px;
}
*/

#navBar{
	position: fixed;
	width: 100%;
	height: 80px;
	z-index: 2;
	transition: 0.3s;
	/*background-color: #78D591;*/
}

#searchBox{
	position: absolute;
	margin-top: 20px;
	transition: left 0.2s, width 0.2s;
}

#searchbar{
	position: absolute;
	height: 35px;
	width: 370px;
	font-size: 20px;
	border: none;
	outline: none;
	border-radius: 15px;
	padding-left: 50px;
	padding-right: 40px;
	color: white;
	background-color: rgba(0,0,0,0.5);
	transition: background-color 0.3s, color 0.3s, box-shadow 0.2s, width 0.2s;
}
#searchIcon{
	position: relative;
	height: 35px;
	margin-top: 6px;
	margin-left:15px;
}
#searchIconPath{
	transition: fill 0.3s;
}

#profileIcon{
	position: relative;
	float: right;
	transition: opacity 0.2s;
	margin-top: 6px;
	opacity: 0;
}

#searchbar:focus{
	box-shadow: 0px -10px 10px rgba(0,0,0,0.2), 0px 10px 10px rgba(0,0,0,0.2);
}

#loginButton{
	right: 130px;

	background-color: #25db71;
}

#registerButton{
	right: 20px;
	background-color: #4B93A4;
}

#landingText{
	position: absolute;
	z-index: 1;
	top: 30%;
	bottom: 0px;
}
#landingText span{
	color: white;
	display: block;
	text-align: center;
	font-size: 100px;
}
#landingFind, #landingPlaces{
	font-family: eagle;
}

#landingChanging{
	width: fit-content;
	font-family: "Courier New";
}

#scrollText{
	position: absolute;
	width: 100%;
	height: 60px;
	z-index: 1;
	bottom: 0;
	background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7));
}

#scrollText span{
	font-size: 20px;
	font-family: "Arial";
	color: white;
	padding-left: 20px;
	padding-right: 20px;
	text-shadow: 0px 0px 10px rgba(0,0,0,1), 0px 0px 10px rgba(0,0,0,1);
}

#map{
	position: absolute;
	top: 110%;
	width: 50%;
	right: 0px;
	z-index: 1;
	background-color: black;
}