@charset "utf-8";

#notes {
	display: none;
}

#notes.active {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	height: 100vh;
	height: 100dvh;
	background-color: rgba(0,0,0,0.9);
	z-index: 999;
	opacity: 1;
	animation: notesfadein 1500ms 1;
}
@keyframes notesfadein {
0% {opacity: 0;}
100% {opacity: 1;}
}

#buttonclose {
	display: block;
	position: absolute;
	top: -1rem;
	right: -0.5rem;
	font-family: "INBB";
    font-size: 2rem;
	line-height: 1em;
	color: #FFFFFF;
	text-shadow: 0 0 0.25rem #000000;
}
#buttonclose:hover {
	color: #9A9999;
	transition: 0.25s;
}

@media screen and (min-width: 1921px) {

#notesimage {
	display: block;
	width: 50rem;
	height: 33.33rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url("/site/notes/tips-uhd-1920.gif");
	background-repeat: no-repeat;
	background-size: contain;
	box-shadow: 0rem 0rem 2.5rem 0.5rem rgba(255,237,0,0.50);
}
}

@media screen and (max-width: 1920px) {

#notesimage {
	display: block;
	width: 50rem;
	height: 33.33rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url("/site/notes/tips-dt-960.gif");
	background-repeat: no-repeat;
	background-size: contain;
	box-shadow: 0rem 0rem 2.5rem 0.5rem rgba(255,237,0,0.50);
}
}

@media screen and (max-width: 1264px) and (orientation: landscape) {
#notesimage {
	display: block;
	width: 41.75rem;
	height: 27.833rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url("/site/notes/tips-tz-720.gif");
	background-repeat: no-repeat;
	background-size: contain;
	box-shadow: 0rem 0rem 2.5rem 0.5rem rgba(255,237,0,0.50);
}
}

@media screen and (max-width: 849px) and (orientation: landscape) {
#notesimage {
	display: block;
	width: 112.5vh;
	width: 112.5dvh;
	height: 75vh;
	height: 75dvh;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url("/site/notes/tips-tz-720.gif");
	background-repeat: no-repeat;
	background-size: contain;
	box-shadow: 0rem 0rem 0.5rem 0.25rem rgba(255,237,0,0.50);
}
#buttonclose {
	display: block;
	position: absolute;
	top: -2rem;
	right: -1.5rem;
	font-family: "INBB";
    font-size: 2rem;
	line-height: 1em;
	color: #FFFFFF;
	text-shadow: 0 0 0.25rem #000000;
}
}

@media screen and (max-width: 1264px) and (orientation: portrait) {
#notesimage {
	display: block;
	width: 29.5rem;
	height: 44.25rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url("/site/notes/tips-tp-449.gif");
	background-repeat: no-repeat;
	background-size: contain;
	box-shadow: 0rem 0rem 0.5rem 0.25rem rgba(255,237,0,0.50);
}
#buttonclose {
	display: block;
	position: absolute;
	top: -2rem;
	right: -1.5rem;
	font-family: "INBB";
    font-size: 2rem;
	line-height: 1em;
	color: #FFFFFF;
	text-shadow: 0 0 0.25rem #000000;
}
}

@media screen and (max-width: 849px) and (orientation: portrait) {
#notesimage {
	display: block;
	width: 22.125rem;
	height: 33.1875rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url("/site/notes/tips-tp-449.gif");
	background-repeat: no-repeat;
	background-size: contain;
	box-shadow: 0rem 0rem 0.75rem 0.25rem rgba(255,237,0,0.50);
}
}

@media screen and (max-width: 449px) and (orientation: portrait) {
#notesimage {
	display: block;
	width: 19.25rem;
	height: 28.875rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url("/site/notes/tips-m-349.gif");
	background-repeat: no-repeat;
	background-size: contain;
	box-shadow: 0rem 0rem 0.75rem 0.25rem rgba(255,237,0,0.50);
}
}