﻿/* screen.css 
Author:       Dr. Matthias Leist (info@dr-leist.de)
Design:       Flowtexx GbR (info@flowtexx.de)
Umsetzung:    Flowtexx GbR (info@flowtexx.de)
Creator       Flowtexx GbR (ts) (http://flowtexx.de)
Date          30.09.2022
File          screen.css
Description   CSS Styles

# Color set
Background: #F7FAFC
Highlight:  #24588D
Highlight:  #2D6FB3
Highlight:  #155AA3
Content-Text:    #333333
Content-Link:    #2E598F Highlight: #E87064
Navigation-Text: #fafafa
Navigation-Link: #fafafa Highlight: #E87064

*/

.container-fluid, .container {margin-right: auto;	margin-left: auto}
.row {box-sizing: border-box;	display: -webkit-box;	display: -ms-flexbox;	display: flex; -webkit-box-flex: 0; -ms-flex: 0 1 auto;	flex: 0 1 auto;	-webkit-box-orient: horizontal;	-webkit-box-direction: normal; -ms-flex-direction: row;	flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap}
.col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-6, .col-xs-12 {box-sizing: border-box;	-webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: 0.5rem;	padding-left: 0.5rem}
.col-xs {-webkit-box-flex: 1;	-ms-flex-positive: 1;	flex-grow: 1;	-ms-flex-preferred-size: 0;	flex-basis: 0; max-width: 100%}
.col-xs-1 {-ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%;	max-width: 8.33333333%}
.col-xs-2 {-ms-flex-preferred-size: 16.66666667%;	flex-basis: 16.66666667%;	max-width: 16.66666667%}
.col-xs-3 {-ms-flex-preferred-size: 25%; flex-basis: 25%;	max-width: 25%}
.col-xs-6 {-ms-flex-preferred-size: 50%; flex-basis: 50%;	max-width: 50%}
.col-xs-12 {-ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%}
.center-xs {-webkit-box-pack: center;	-ms-flex-pack: center; justify-content: center;	text-align: center}
.middle-xs {-webkit-box-align: center; -ms-flex-align: center; align-items: center}

@media only screen and (min-width: 48em) {
  .container {width: 49rem}
	.col-sm, .col-sm-1, .col-sm-2, .col-sm-6 {box-sizing: border-box; -webkit-box-flex: 0;	-ms-flex: 0 0 auto;	flex: 0 0 auto;	padding-right: 0.5rem; padding-left: 0.5rem}
	.col-sm {-webkit-box-flex: 1;	-ms-flex-positive: 1;	flex-grow: 1;	-ms-flex-preferred-size: 0;	flex-basis: 0; max-width: 100%}
	.col-sm-1 {-ms-flex-preferred-size: 8.33333333%; flex-basis: 8.33333333%;	max-width: 8.33333333%}
	.col-sm-2 {-ms-flex-preferred-size: 16.66666667%;	flex-basis: 16.66666667%;	max-width: 16.66666667%}
	.col-sm-6 {-ms-flex-preferred-size: 50%; flex-basis: 50%;	max-width: 50%}
}

@media only screen and (min-width: 64em) {
	.container {width: 65rem}
	.col-md, .col-md-4, .col-md-6 {box-sizing: border-box;	-webkit-box-flex: 0; -ms-flex: 0 0 auto;	flex: 0 0 auto;	padding-right: 0.5rem; padding-left: 0.5rem}
	.col-md {-webkit-box-flex: 1;	-ms-flex-positive: 1;	flex-grow: 1;	-ms-flex-preferred-size: 0;	flex-basis: 0; max-width: 100%}
	.col-md-4 {-ms-flex-preferred-size: 33.33333333%;	flex-basis: 33.33333333%;	max-width: 33.33333333%}
	.col-md-6 {-ms-flex-preferred-size: 50%; flex-basis: 50%;	max-width: 50%}
}

@media only screen and (min-width: 75em) {
	.container {width: 76rem}
	.col-lg, .col-lg-3, .col-lg-4 {box-sizing: border-box; -webkit-box-flex: 0;	-ms-flex: 0 0 auto;	flex: 0 0 auto;	padding-right: 0.5rem; padding-left: 0.5rem}
	.col-lg {-webkit-box-flex: 1;	-ms-flex-positive: 1;	flex-grow: 1;	-ms-flex-preferred-size: 0;	flex-basis: 0; max-width: 100%}
	.col-lg-3 {-ms-flex-preferred-size: 25%; flex-basis: 25%;	max-width: 25%}
	.col-lg-4 {-ms-flex-preferred-size: 33.33333333%;	flex-basis: 33.33333333%;	max-width: 33.33333333%}
}

@font-face {font-family: 'NotoSans'; font-style: normal; font-weight: 400; src: url('../font/noto-sans-v27-latin-regular.woff2') format('woff2'), url('../font/noto-sans-v27-latin-regular.woff') format('woff')} 
/*
@font-face {font-family: 'Ubuntu'; font-style: normal; font-weight: 400; src: local("Ubuntu"), url("../fonts/ubuntu/ubuntu-v15-latin-regular.woff2") format("woff2"), url("../fonts/ubuntu/ubuntu-v15-latin-regular.woff") format("woff")}
@font-face {font-family: 'Ubuntu Mono';	font-style: normal;	font-weight: 400;	font-display: swap;	src: local("Ubuntu Mono"), url("../fonts/ubuntu/ubuntu-mono-v10-latin-regular.woff2") format("woff2"), url("../fonts/ubuntu/ubuntu-mono-v10-latin-regular.woff") format("woff")}
*/

h1 {font-size: 2.961rem}
@media (max-width: 49.99em) {h1 {font-size: 2.0rem}}
@media (max-width: 25em) {h1 {font-size: 1.8rem}}

h2 {font-size: 2.221rem}
@media (max-width: 49.99em) {h2 {font-size: 1.953em}}
@media (max-width: 25em) {h2 {font-size: 1.719rem}}

h3 {font-size: 1.666rem}
@media (max-width: 49.99em) {h3 {font-size: 1.563rem}}
@media (max-width: 25em) {h3 {font-size: 1.375rem}}

.icon {width: 1em; height: 1em;	vertical-align: -.142em; fill: #ffffff;}
#icon-warning {color: red}
.icon-md {font-size: 2em}
.icon-pulse-slow {animation: color 8s infinite;	animation-direction: alternate}
.icon-pulse-fast {animation: color 2s infinite;	animation-direction: alternate}

@keyframes color {from {fill: #f07167} to {fill: #fafafa}}
@keyframes blink {from, to {color: transparent}	50% {color: #fafafa}}
@keyframes scale-in-center {0% {transform: scale(0); opacity: 1} 100% {transform: scale(1);	opacity: 1}}
@keyframes scale-out-center {0% {transform: scale(1);	opacity: 1} 100% {transform: scale(0); opacity: 1}}

.scale-in-center {animation: scale-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}
.scale-out-center {animation: scale-out-center 0.4s cubic-bezier(0.895, 0.03, 0.685, 0.22) both}
.cursor {animation: 1.2s blink infinite}
.blur-up {-webkit-filter: blur(3px); filter: blur(3px);	transition: filter 600ms, -webkit-filter 600ms}
.blur-up.lazyloaded {-webkit-filter: blur(0);	filter: blur(0)}
.show {transition: opacity 600ms}
.hide {opacity: 0}

* {box-sizing: border-box; margin: 0;	padding: 0;	border: 0; font: inherit;	color: #333333; vertical-align: baseline}
*::before, *::after {box-sizing: border-box}

html {box-sizing: inherit; overflow-x: hidden; scroll-behavior: smooth;	height: 100%}
::selection {background: #b1d7ff;}

body {font-size: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; color: #fafafa; /* font-family: "NotoSans", "Roboto", "Helvetica", Arial, sans-serif;*/ font-family: "NotoSans"; line-height: 1.6; background-color: #F7FAFC}
@media (max-width: 49.99em) {body {font-size: 1.25rem}}
@media (max-width: 25em) {body {font-size: 1.1rem}}

main {transition: .4s ease-in}
main::before {background-color: #F7FAFC}
main.active {transform: translate(-100vw, 0);	opacity: 0.4}

header {height: 100%; min-height: 100%;	background-color: #F7FAFC; color: #333333}
header div {z-index: 101}
header h1, header h2, header h3 {font-family: "NotoSans";	color: #333333}
header img {height: auto;	object-fit: contain; -webkit-box-shadow: 2px 2px 10px 0px #494949; box-shadow: 2px 2px 10px 0px #494949;}

.card {border: 0px solid #aaaaaa; padding: 0; margin: 1.0rem; -webkit-box-shadow: 2px 2px 10px 0px #494949; box-shadow: 2px 2px 10px 0px #494949;}
.card-picture {}
.card-text {padding: 5px 0 5px 0;}

#url {display: none;}
input.dsgvo {width: unset; margin: 0 1.0rem 0 0; }
.dsgvo {margin: 1.0rem 0 1.0rem 0;}
#map {z-index: 1; width: 98%; height: 30rem; border: 1px solid #494949; box-shadow: 2px 2px 10px 0px #494949; text-align: center; margin: 0 auto;}

.info {opacity: 1.0; padding: 40px 20px 40px 20px; background-color: #e5e5e5; color: #333333; position: fixed; left: 5%; z-index: 1000; width: 90%; margin: 1.5rem auto; box-shadow: 10px 10px 30px 1px #494949; border: 2px solid #d9d9d9;}
.info-picture {width: 40%; display:inline; float: left;}
.info-text {margin: 0 0 3rem 0;}
.info-text h1 {margin-bottom: 1rem;}
.info-text p {margin-bottom: 1rem; font-size: 0.8rem;}
.closebtn {color: #9d9d9d; font-size: 2rem!important; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s;}
.closebtn:hover {color: black;}
.closebtn2 {color: #fafafa; background-color: #24588D; width: 200px; padding: 0.5rem 1.0rem; margin: 1.0rem 0 1.0rem 0;  display: block; text-align: center; position: relative; bottom: 0;}
@media (min-width: 49.99em) {.info {left: 20%; width: 60%;} .info-text p {font-size: 1.25rem;}}


.container {max-width: 60.0rem; margin: auto;	padding: 8rem 0 8rem}

@media (max-width: 25em) {body .container {padding: 8rem 2rem}}
@media (max-width: 47.99em) {body .container {padding: 8rem 0rem}	.mobile-hidden {visibility: hidden}}

.leistungen h3 {margin-bottom: 0.5rem;}
.leistungen a {color: #2E598F;}
.kontakt h3 {margin-bottom: 0.5rem;}
.kontakt a {color: #2E598F;}
.rezept h3 {margin-bottom: 0.5rem;}
.rezept a {color: #2E598F;}
.impressum h3 {margin-bottom: 0.5rem;}
.impressum a {color: #2E598F;}

.info-edit h2 {margin-bottom: 0.2rem;}
.info-edit h3 {margin-bottom: 0.5rem;}
.info-edit p {margin-bottom: 1.5rem;}
.info-edit a {color: #2E598F;}
.info-edit .container {max-width: 90rem; margin: auto; padding: 1rem 0 8rem;}
#form-info textarea {min-height: 15rem;}

footer {height: 16rem; background-color: #3e3e3e;	padding: 1em 0 1em 0;	color: #fafafa}
footer .social {margin-top: 4rem;	margin-bottom: 4rem}
footer .social .icon {font-size: 2em}
footer small {color: #cecece}

strong {font-weight: 600}
del, s {text-decoration: line-through}
em, q, dfn {font-style: italic}
a {transition: color .2s ease-out; text-decoration: none; color: #fafafa}
a img {border: 0}
a:not(.nav-icon):hover {color: #f07167}
small {font-size: 0.8em; color: #cecece}
img {display: inline-block;	max-width: 100%; height: auto; vertical-align: middle}
ul, ol {margin-bottom: 2rem}
ul li, ol li {margin-left: 1.25em}
code {font-family: "Ubuntu Mono", "Monaco", "Andale Mono", "Courier New", monospace}
ul li {list-style-type: disc}
p {margin-bottom: 2rem}
.no-js img.lazyload {display: none}

img.lazyload:not([src]) {visibility: hidden}

.modal {display: flex; visibility: hidden; position: fixed;	z-index: -1000;	top: 0;	left: 0; width: 100%;	height: 100%;	overflow: hidden;	overflow-x: hidden; transition: opacity .1s ease-out;	background-color: rgba(33, 33, 33, 0.75)}
.modal.active {	visibility: visible;	z-index: 1000}
.modal a:hover {color: #f07167}
.modal article a {color: #f07167}
.modal-box {position: relative;	width: 85%;	max-width: 1200px; max-height: 85vh; margin: auto; border-radius: 9px; background-color: #08030f;	box-shadow: 0 0 50px 0 #212121}
.modal-container {overflow: hidden;	border-radius: 7px}
.modal-header {height: 20vh; border-radius: 7px}
.modal-header-img-container {background-color: #08030f;	display: flex; align-items: center; justify-content: center; height: 100%}
.modal-header-img-container img {max-height: 20vh; padding: 2%;	object-fit: contain}
.modal-content {max-height: calc(80vh - 20vh); padding: 30px;	overflow-y: auto}

.close {position: absolute;	top: -4px; right: 5px; font-size: 1.6em; z-index: 100; transition: color .2s ease-out}
.close:hover, .close:focus {cursor: pointer}
#icon-close {fill: #fafafa}

.repo-info {color: #cecece;	font-size: 0.65em}
.repo-info a {color: #cecece}
.repo-info .icon {color: #cecece}
.start {width: 100%; background-color: #F7FAFC}
.start p {font-size: 1.666rem; margin-top: 2rem}

@media (max-width: 49.99em) {.start p {font-size: 1.563rem}}
@media (max-width: 25em) {.start p {font-size: 1.375rem}}
.start a {background-image: linear-gradient(#f07167, #f07167); background-repeat: repeat-x; background-position: 0 95%;	background-size: 2px 3px;	text-decoration: none; text-shadow: 0.03em 0 #040926, -0.03em 0 #040926, 0 0.03em #040926, 0 -0.03em #040926, 0.06em 0 #040926, -0.06em 0 #040926, 0.09em 0 #040926, -0.09em 0 #040926, 0.12em 0 #040926, -0.12em 0 #040926, 0.15em 0 #040926, -0.15em 0 #040926, 0.03em 0.075em #040926, -0.03em 0.075em #040926, 0.06em 0.075em #040926, -0.06em 0.075em #040926, 0.09em 0.075em #040926, -0.09em 0.075em #040926, 0.12em 0.075em #040926, -0.12em 0.075em #040926, 0.15em 0.075em #040926, -0.15em 0.075em #040926}
.start a:hover {color: #f07167}
.gallery .gallery-item {background-color: #08030f; position: relative; width: 50%; padding: 0}
.gallery .gallery-item::after {content: "";	display: block;	padding-bottom: 100%}
.gallery .gallery-item:hover .overlay {visibility: visible;	opacity: 1}

.gallery .overlay {visibility: hidden;	position: absolute;	top: 0;	right: 0;	bottom: 0; left: 0; width: 100%; height: 100%;	transition: .25s ease-out; opacity: 0;	background-color: #040926; cursor: pointer}
.gallery .overlay h2 {margin: 2rem;	margin-bottom: 1rem; color: #fafafa}
.gallery .overlay h3 {color: #cecece}
.gallery .gallery-img-container {display: flex;	position: absolute;	align-items: center; justify-content: center;	width: 100%; height: 100%}
.gallery .gallery-img-container img {padding: 6rem;	max-height: 100%;	height: auto}
.gallery .gallery-modal-link {display: flex; position: absolute; align-items: center;	justify-content: center; width: 100%;	height: 100%}

pre code {color: inherit;	font-family: "Ubuntu Mono", "Monaco", "Andale Mono", "Courier New", monospace}
pre {margin-top: 8px;	padding: 16px; border-radius: 4px; margin-bottom: 2rem;	overflow: auto;	word-wrap: normal}

.mono, tt {font-family: "Ubuntu Mono", "Monaco", "Andale Mono", "Courier New", monospace}

q::before {content: "\201C"}
q::after {content: "\201D"}

blockquote::after, blockquote::before {content: "\201C"; color: #f07167; font-family: "NotoSans";	font-size: 35px; float: left}
blockquote {padding: 25px; font-family: "NotoSans";	text-align: center}
blockquote p {display: inline-block; font-style: italic}
blockquote::after {content: "\201D"; float: right}

.posts-list {margin: 0 0 2rem}
.sub-header, time {font-size: 1.25rem; margin-bottom: 2rem;	color: #cecece}

@media (max-width: 49.99em) {.sub-header,	time {font-size: 1.25rem}}
@media (max-width: 25em) {.sub-header, time {font-size: 1.1rem}}

.content {width: 100%; text-align: left}
.content time {margin-left: 3px}
.content a {background-image: linear-gradient(#f07167, #f07167); background-repeat: repeat-x;	background-position: 0 95%; background-size: 1px 2px;	text-decoration: none; text-shadow: 0.03em 0 #040926, -0.03em 0 #040926, 0 0.03em #040926, 0 -0.03em #040926, 0.06em 0 #040926, -0.06em 0 #040926, 0.09em 0 #040926, -0.09em 0 #040926, 0.12em 0 #040926, -0.12em 0 #040926, 0.15em 0 #040926, -0.15em 0 #040926, 0.03em 0.075em #040926, -0.03em 0.075em #040926, 0.06em 0.075em #040926, -0.06em 0.075em #040926, 0.09em 0.075em #040926, -0.09em 0.075em #040926, 0.12em 0.075em #040926, -0.12em 0.075em #040926, 0.15em 0.075em #040926, -0.15em 0.075em #040926}
.content a:hover {color: #f07167}
.content img {margin-block-start: 1em; margin-block-end: 1em}

.pagination {margin: 50px 0 0}
.pagination :nth-child(2) {float: right}

.blog {display: flex;	min-height: 100vh; background-color: #040926}
.blog h2 {margin-bottom: 0}
.blog h3 {margin: 0 0 4rem;	font-family: "NotoSans";}

h1, h2, h3 {margin-bottom: 2rem; font-family: "NotoSans";	letter-spacing: 2px; line-height: 1.45}
h1 a, h2 a, h3 a {text-decoration: none}

.home-logo {max-height: 20rem; margin-bottom: 2rem}

[data-termynal] {max-width: 100%; background: #fafafa; color: #08030f;	font-size: 0.8em;	font-family: "Ubuntu Mono", "Monaco", "Andale Mono", "Courier New", monospace; padding: 75px 45px 35px; position: relative;	-webkit-box-sizing: border-box; box-sizing: border-box}
[data-termynal]:before {content: ''; position: absolute;	top: 15px; left: 15px; display: inline-block;	width: 15px; height: 15px; border-radius: 50%; background: #d9515d;	-webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 #f07167; box-shadow: 25px 0 0 #f4c025, 50px 0 0 #f07167}
[data-termynal]:after {content: "<no value>";	position: absolute;	color: #cecece;	top: 5px;	left: 0; width: 100%;	text-align: center}
[data-ty] {display: block; line-height: 2; color: #08030f; white-space: pre}
[data-ty]:before {content: ''; display: inline-block;	vertical-align: middle}
[data-ty="input"]:before, [data-ty-prompt]:before {margin-right: 0.75em; color: #cecece}
[data-ty="input"]:before {content: '$'}
[data-ty][data-ty-prompt]:before {content: attr(data-ty-prompt)}
[data-ty-cursor]:after {content: attr(data-ty-cursor); font-family: monospace; margin-left: 0.5em; -webkit-animation: blink 1s infinite; animation: blink 1s infinite}

@-webkit-keyframes blink {50% {opacity: 0}}
@keyframes blink {50% {opacity: 0}}

.term-content {max-height: calc(80vh - 20vh);	overflow-y: auto}

@media (max-width: 67.99em) {
	nav div:not(:first-child):not(:last-child) {display: none}
	nav div.nav-toggle a {display: inline-block; color: #fafafa;}
	nav div.logo {padding-right: 30%}
	nav div.nav-toggle {padding-left: 30%}
}

@media (max-width: 25em) {
	nav .logo, nav .nav-toggle {max-width: 50% !important}
}

nav {position: absolute; z-index: 100; bottom: 0;	width: 100%; height: 4rem; background-color: #24588D;	text-align: center}
nav h3 {margin: 0; font-family: "NotoSans"; font-weight: 600; letter-spacing: 2px;	text-transform: uppercase}
nav img {display: inline-block;	max-width: 10em; max-height: 2.5em;	width: auto; vertical-align: middle}
nav.nav-fixed-top {top: 0;}
nav .logo, nav .nav-toggle {visibility: hidden}
nav .nav-toggle a {display: none}
nav .nav-item-active a {color: #f07167}
.nav-fixed {position: fixed; top: 0; bottom: auto; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2)}

@media (max-width: 47.99em) {.nav-fixed {opacity: 1; transition: opacity 200ms}}

.nav-fixed a.icon-active>.icon {fill: #ffffff;}
.nav-full {position: fixed;	top: 0;	right: -100vw; bottom: 0;	width: 100vw;	height: 100%;	transform: translate(0, 0);	transition: .3s ease-out}
.nav-full a, .nav-full .icon {color: #fafafa;	fill: #fafafa}
.nav-full a:hover, .nav-full .icon:hover {color: #f07167}
.nav-full.active { transform: translate(-100vw, 0);	transition: .45s ease-in;	background: #2d6fb3}
.nav-icon {font-size: 2.1875rem}

.full {top: 0; bottom: 0;	height: 100vh}

.contact {width: 100%;	padding-bottom: 4rem;	background-color: #08030f}
.contact form {margin-top: 2rem}
.contact .contact-submit {position: relative}
.contact #form-submit {display: block; width: 50%;margin: 0 auto}

.contact #form-thankyou,
.contact #form-sending,
.contact #form-error {position: absolute;	top: 50%;	left: 50%; transform: translate(-50%, -50%)}

input, textarea, button, select {width: 100%; margin: 8px 0;	padding: 10px; border-width: 1px;	border-style: solid; border-radius: 3px; border-color: #6a6a6a;	background-color: #e9e9e9; color: #333333;}
input[type="submit"], textarea[type="submit"], button[type="submit"], select[type="submit"] {transition: .4s ease-out;	background-color: #24588D; color: #fafafa}
input[type="submit"]:hover, textarea[type="submit"]:hover, button[type="submit"]:hover, select[type="submit"]:hover {background-color: #f07167; color: #040926;	cursor: pointer}
input:focus, textarea:focus, button:focus, select:focus {outline: #f07167 solid 2px;	transition: all .4s ease-out}
button {white-space: nowrap}
textarea {min-height: 8rem;	overflow: auto;	resize: vertical}

/* Background */
/*
.bg {background-image: url("https://hugo-mods.github.io/background-256x.jpg");	background-repeat: no-repeat;	background-position: center; background-attachment: fixed;	-webkit-background-size: cover;	-moz-background-size: cover; -o-background-size: cover; background-size: cover}

@media (min-width: 256px) {.bg.lazyloaded {transition: background-image 1.5s;	background-image: url("background-512x.jpg"), url("background-256x.jpg")}}
@media (min-width: 320px) {.bg.lazyloaded {transition: background-image 1.5s;	background-image: url("background-640x.jpg"), url("background-256x.jpg")}}
@media (min-width: 640px) {.bg.lazyloaded {transition: background-image 1.5s; background-image: url("background-1280x.jpg"), url("background-256x.jpg")}}
@media (min-width: 800px) {.bg.lazyloaded {transition: background-image 1.5s;	background-image: url("background-1600x.jpg"), url("background-256x.jpg")}}
@media (min-width: 960px) {.bg.lazyloaded {transition: background-image 1.5s;	background-image: url("background-1920x.jpg"), url("background-256x.jpg")}}
*/

@media (max-width: 47.99em) {nav {opacity: 0}}
[data-termynal] {border-radius: 4px; text-align: left; background: #292e39;	color: #b5179e}
[data-ty] {color: #fafafa}
[data-ty="input"]:before, [data-ty-prompt]:before {color: #f07167}
#termynal-start:after {content: ""}
@media (max-width: 47.99em) {.bg {background-attachment: scroll}}
.home-logo {animation: scale-in-center 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}