/* SIDEBAR */
.sidebar {position: fixed; left: 110%; top: 150px; width: 400px; height: 300px; display: grid; grid-template-columns: fit-content(0px) 1fr; transition: 1s; z-index: 500;}
.sidebar .reiter {grid-row: 1; grid-column: 1; justify-self: center;}
.sidebar .reiter span {display: inline-block; writing-mode: tb-rl;  transform: rotate(-180deg) translate(0, -30px); background-color: rgba(var(--accentColor)); padding: 10px 5px 10px 5px; border-bottom-right-radius: 50px; border-top-right-radius: 50px; height: 200px; width: 25px; text-align: center; color: #FFF; font-family: "Medium"; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}
.sidebar .head {font-size: var(--fontLarger); line-height: var(--fontLargerLH); font-family: "Medium";}
.sidebar .content {color: #FFF; grid-row: 1; grid-column: 2; background-color: rgba(var(--grey100)); border-bottom-left-radius: 10px; border-top-left-radius: 10px; padding: 20px;}
.sidebar.anim {left: calc(100% - 30px);}
.sidebar:hover {left: calc(100% - 365px);}
.sidebar .social img {height: 25px; width: auto; margin-right: 10px;}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.sidebar {width: 350px;}
	.sidebar:hover {left: calc(100% - 320px);}
}

@media only screen and (max-width: 767px) {
	.sidebar {width: 350px;}
	.sidebar:hover {left: calc(100% - 320px);}
}