* {margin: 0; padding: 0; font-size: 62.5%; font-family: "Rubik", sans-serif; color: #e6e5e9; box-sizing: border-box;}

.leaflet-tile-pane {contrast(1.1);}

h1 {font-size: 3rem;}
h2 {font-size: 2.4rem;}

p, a, span, b, em, strong, li, button {font-size: 1.6rem; margin-top: 1rem; margin-bottom: 1rem;}

i {color: #e6e5e9; font-size: 1.6rem;}

a {color: #868396;}

ul {list-style-type: none;}

.btn {width: 100%; padding-top: 15px; padding-bottom: 15px; border: 0; cursor: pointer;}
.btn-secondary {background-color: #868396;}
.btn-rounded {border-radius: 30px;}

.container {width: 100%; height: 100vh; display: flex; justify-content: center;
	background: radial-gradient(#000 16%, transparent 17%),radial-gradient(#444 16%, transparent 17%) 0px 1px,radial-gradient(#000 16%, transparent 17%) 8px 8px,radial-gradient(#444 16%, transparent 17%) 8px 9px;
	background-color: #422727; background-size: 16px 16px;}
.container .screen {align-self: center; width: 80%; height: 92%; border-radius: 40px; border: solid 8px #161b23; overflow: hidden; position: relative; background-color: #2e353f;
	box-shadow: 0 3.1px 32.4px rgba(0, 0, 0, 0.031), 0 7.4px 39.4px rgba(0, 0, 0, 0.044), 0 14px 43.4px rgba(0, 0, 0, 0.055), 0 25px 47.4px rgba(0, 0, 0, 0.066), 0 46.8px 54.5px rgba(0, 0, 0, 0.079), 0 112px 80px rgba(0, 0, 0, 0.11);
}
@media screen and (max-width: 600px) {
	.container .screen {width: 100%; justify-content: flex-end;}
}

.splashscreen {position: absolute; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 145px; grid-template-areas: "logo" "connection"; background-color: #2e353f; text-align: center; height: 100%;
	width: 100%; padding: 24px; transform: scale(1); opacity: 1; z-index: 10; border-radius: 30px;}
.splashscreen__logo {grid-area: logo; margin-top: 20%;}
.splashscreen__logo p {color: #edede9;}
.splashscreen__connection {grid-area: connection;}

#logo_icon {opacity: 0; padding-top: 20px;}
#logo {font-family: "Lobster", cursive; font-size: 5rem;}

.megascreen {position: absolute; background-color: #2e353f; height: 100%; width: 100%; display: flex; flex-direction: column;}
.megascreen__nav {position: relative; bottom: 0; left: 0; width: 100%; background-color: #272d36; height: 90px; border-radius: 20px 20px 30px 30px; display: flex; padding: 0 48px 0 48px;
	justify-content: space-between; z-index: 9; text-align: center;}

.megascreen__nav-item {text-align: center; align-self: center; cursor: pointer;}
.megascreen__nav-item p {font-size: font-size: 100%!important; color: #868396;}
	
.nagygomb {text-align: center; align-self: center; position: absolute; width: 70px; height: 70px; border-radius: 50%; background-color: #363c47; font-size: 2rem; font-weight: bold; top: -2%; right: 50%;
	transform: translate(36%, -10%); cursor: pointer; border: 1px solid yellow;}

.homescreen {position: absolute; background-color: #2e353f; height: 100%; width: 100%; padding: 64px 24px 24px 24px; transform: scale(1); opacity: 1; z-index: 8; border-radius: 30px;}
.homescreen__header {display: flex; justify-content: space-between;}
.homescreen__header-avatar {position: relative;}
.homescreen__header-avatar .notification {position: absolute; right: 0; width: 18px; height: 18px; background-color: #161b23; border-radius: 50%; text-align: center; line-height: 18px;}
.homescreen__header h2 {font-weight: 100;}
.homescreen__header b {font-size: 2.4rem;}

.homescreen__content {margin-top: 20px;}
.homescreen__content-list {margin-top: 48px;}
.homescreen__content-list-item {width: 100%; height: 60px; background-color: #363c47; border-radius: 10px; display: grid; padding-left: 16px; grid-template-columns: 54px 1fr 32px; grid-template-areas: "icon text number";
	justify-content: center; align-content: center; cursor: pointer;}
.homescreen__content-list-item .icon {border: 2px solid #e6e5e9; width: 36px; height: 36px; border-radius: 50%; text-align: center; line-height: 36px;}
.homescreen__content-list-item .number {color: #868396;}

.mapscreen {position: relative; background-color: #2e353f; height: 100%; width: 100%; transform: scale(1); opacity: 1; z-index: 7; overflow: hidden; border-radius: 30px 30px 0 0;}
.mapscreen #myMap {width: 100%; height: 100%; z-index: 0;}

.beerModal {width: 100%; position: absolute; text-align: center; bottom: -70%; height: 65%; background-color: #2e353f; z-index: 1;}
.beerModal i {color: yellow;}
.beerModal h2 {margin-top: 32px;}
.beerModal p {color: yellow; font-size: 1.4rem;}
.beerModal__pubIcon {position: absolute; left: calc(50% - 80px); top: -20px; transform: translate(33%, -20px); width: 80px; height: 80px; background-color: #2e353f; border: 4px solid #e6e5e9; border-radius: 50%;
	display: flex; justify-content: center;}
.beerModal__pubIcon:before {content: " "; position: absolute; z-index: -1; top: -10px; left: -10px; right: -10px; bottom: -10px; border: 7px solid #2e353f; border-radius: 50%;}
.beerModal__pubIcon i {font-size: 4.5rem; align-self: center; color: #e6e5e9;}
.beerModal__header {padding: 20px 24px 0 24px; display: flex; justify-content: space-between;}
.beerModal__header-icon {height: 24px; cursor: pointer;}
.beerModal__pills {display: flex; justify-content: space-evenly; margin-left: 60px; margin-right: 60px;}
.beerModal__pills p {display: block; padding: 6px 12px; background-color: #161b23; border-radius: 15px; font-size: 1.2rem;}

.beerModal__gallery {width: 90%; height: 270px; margin-top: 20px; margin-left: 20px;}
.beerModal__gallery .swiper-slide {text-align: center; font-size: 18px; border-radius: 15px; background-color: #868396; overflow: hidden;
	box-shadow: 0 0.7px 5.3px rgba(0, 0, 0, 0.147), 0 3.8px 17.9px rgba(0, 0, 0, 0.175), 0 32px 80px rgba(0, 0, 0, 0.25);}
.beerModal__gallery .swiper-slide img {max-width: 100%; object-fit: cover; object-position: center center;}

.avatar {width: 64px; height: 64px; border-radius: 50%;}

.left-menu{display: block; margin: 0px; padding-top: 0px; overflow-y: auto;}
.list{color: #fff; list-style-type: none; padding-top: 0px; padding-left: 0px; margin-top: 0px; margin-bottom: 0px;}

li{display: flex; align-content: center; justify-content: flex-start; padding-left: 30px; cursor: pointer; margin-top: 0px;}
li i{margin-left: auto;}

.sub h3{font-weight: 300;}
.sub{display: none; transition: background 0.3s ease;}
.sub:hover{background: #212F3D;}

.top {width: 100%; height: 60px; background-color: #363c47; border-radius: 10px; display: grid; padding-left: 16px; grid-template-columns: 54px 1fr 32px; grid-template-areas: "icon text number";
	justify-content: center; align-content: center; cursor: pointer; font-size: 1.6rem; vertical-align: middle;}
.top .icon {border: 2px solid #e6e5e9; width: 36px; height: 36px; border-radius: 50%; text-align: center; line-height: 36px;}
.jobbranyil {float: right;}
.top .number {color: #868396;}

.rotatedown{margin-top: 0px; transform: rotate(90deg);}

.click {text-decoration: none; color: yellow;}