@import url("/styles/style-global.css");


/* ########## FINAL VALUES ########## */
:root {
  --font-size-p3: 4.0rem; /* plus 3 */
  --font-size-p2: 3.0rem; /* plus 2 */
  --font-size-p1: 2.0rem; /* plus 1 */
  --font-size-de: 1.4rem; /* default size */
  --font-size-m1: 1.0rem; /* minus 1 */
  --font-size-m2: 0.8rem; /* minus 2 */
  
  --font-size-index-banner-top: 5rem;
  --font-size-index-banner-middle: 8rem;
  
  --side-margin-default: 5%;
  
  --end-of-page-space: 4rem;
}


/* ########## MISCELLANEOUS ########## */

html, body {
	margin-left: 0;
	margin-bottom: 0;
	margin-right: 0;
	margin-top: 0;
	
	padding-left: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-top: 0;
	
	font-family: SourceSerifPro;
}

body {
	background-color: var(--bright-bg);
}

h1 {
	font-weight: bold;
	text-align: center;
	width: 100%;
	font-size: var(--font-size-p3);
}

p {
	margin-left:var(--side-margin-default);
	margin-bottom:0;
	margin-right:var(--side-margin-default);
	margin-top:0;
	padding: 0;
	
	color: var(--col-text-default);
	font-size: var(--font-size-de);
}

div.button-o,
div.index-button-o {
	margin: 0;
	padding: 0;
	
	width:23vw;
	height:8rem;
	display: block;
	
	background-color:var(--col-button-bg);
	
	border-style: solid;
	border-width: 0.3rem;
	border-color: var(--col-button-border);
}

a.button,
a.index-button,
div.button-i,
div.index-button-i {
	margin: 0;
	padding: 0;
	
	width:inherit;
	height:inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	
	cursor: pointer;
	text-align: center;
	font-size: var(--font-size-p1);
	background-color:var(--col-button-bg);
	
	border-style: none;
}

a,
a:link,
a:visited,
a:hover,
a:active {
	text-decoration:none;
	color: var(--col-text-hyperlinks);
}


/* ########## INDEX ########## */

div.index-heading {
	position: relative;
	top: 0;
	left: 0;
	
	margin-left:0;
	margin-bottom:4rem;
	margin-right:0;
	margin-top:0;
	padding: 0;
	
	width: 100%;
	height: auto;
}

img.index-heading {
	margin: 0;
	padding: 0;
	
	width:inherit;
	height:inherit;
}

h1.index-heading-top {
	font-weight: bold;
	text-align: center;
	width: inherit;
	font-size: var(--font-size-index-banner-top);
	letter-spacing: 0.2em;
	
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--col-text-index-banner-top);
	
	margin: 0;
	padding: 0;
}

h1.index-heading-middle {
	font-weight: bold;
	text-align: center;
	width: inherit;
	font-size: var(--font-size-index-banner-middle);
	letter-spacing: 0.3em;
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--col-text-index-banner-middle);
	
	margin: 0;
	padding: 0;
}

div.index-navbox {
	display: grid;
	grid-template-columns: 20% 20% 20% 20%;
	row-gap: 4vh;
	column-gap: 3vw;
	justify-items: center;
	justify-content: center;
	
	width: 100%;
	height: auto;
	
	margin-left:0;
	margin-bottom: 4vh;
	margin-right:0;
	margin-top:0;
	padding: 0;
}

div.index-navbox-box {
	margin: 0;
	padding: 0;
	
	width:inherit;
	height:8rem;
	display: flex;
	justify-content: center;
	align-items: center;
	
	cursor: pointer;
	text-align: center;
	font-size: var(--font-size-p1);
	background-color:var(--col-button-bg);
	
	border-style: solid;
	border-width: 0.3rem;
	border-color: var(--col-button-border);
}

/* ########## ABOUT ########## */

h1.about-header {
	display: block;
	margin: 0;
	padding-top: 0.5rem;
	padding-left: 0;
	padding-bottom: 0;
	padding-right: 0;
	
	text-align: center;
	font-family: DancingScript;
	font-size: var(--font-size-p2);
	color:var(--col-text-header);
	background-color:var(--col-bg-header);
}

div.about-text {
	display: block;
	width: 80%;
	
	margin-top: 2rem;
	margin-left: 0;
	margin-bottom: 4rem;
	margin-right: 0;
	padding-top: 0;
	padding-left: 10%;
	padding-bottom: 0;
	padding-right: 10%;
	
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
	background-color:var(--col-bg-default);
}

/* ########## PLACES ########## */

h1.places-header {
	display: block;
	margin: 0;
	padding-top: 0.5rem;
	padding-left: 0;
	padding-bottom: 0;
	padding-right: 0;
	
	text-align: center;
	font-family: DancingScript;
	font-size: var(--font-size-p2);
	color:var(--col-text-header);
	background-color:var(--col-bg-header);
}

div.places-subHeader0 {
	display: block;
	margin:0;
	padding-top: 0;
	padding-left: var(--side-margin-default);
	padding-bottom: 0;
	padding-right: var(--side-margin-default);
	
	text-align: left;
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
	background-color:var(--col-bg-header);
}
div.places-subHeader1 {
	display: block;
	margin:0;
	padding-top: 0;
	padding-left: var(--side-margin-default);
	padding-bottom: 1rem;
	padding-right: var(--side-margin-default);
	
	text-align: right;
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
	background-color:var(--col-bg-header);
}

div.places-section {
	display: grid;
	margin-top: 5rem;
	margin-left: 5%;
	margin-bottom: 0;
	margin-right: 5%;
	
	padding-top: 0;
	padding-left: 0;
	padding-bottom: var(--end-of-page-space);
	padding-right: 0;
	
	width: 90%;
	grid-template-columns: 24% 76%;
	grid-column-gap: 0;
}

div.places-subSection {
	margin: 0;
	padding: 0;
	width: 100%;
}

img.places-section-img {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	text-align: center;
}

div.places-section-header {
	display: block;
	margin:0;
	padding-top: 0;
	padding-left: var(--side-margin-default);
	padding-bottom: 1rem;
	padding-right: var(--side-margin-default);
	
	text-align: left;
	font-family: Montserrat;
	font-weight: bold;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
}

div.places-section-subHeader {
	display: block;
	margin:0;
	padding-top: 0;
	padding-left: var(--side-margin-default);
	padding-bottom: 1rem;
	padding-right: var(--side-margin-default);
	
	text-align: left;
	font-family: Montserrat;
	font-style: italic;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
}

div.places-section-text {
	display: block;
	margin:0;
	padding-top: 0;
	padding-left: var(--side-margin-default);
	padding-bottom: 1rem;
	padding-right: var(--side-margin-default);
	
	text-align: left;
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
}

img.places-maps-popup-img {
	/* width: 10rem; */
	width: inherit;
	height: auto;
}

div.places-maps-popup {
	width: 15rem;
	font-family: Montserrat;
	font-size: var(--font-size-m2);
}

/* ########## ACCOMMODATIONS ########## */

h1.accommodations-header {
	display: block;
	margin: 0;
	padding-top: 0.5rem;
	padding-left: 0;
	padding-bottom: 0;
	padding-right: 0;
	
	text-align: center;
	font-family: DancingScript;
	font-size: var(--font-size-p2);
	color:var(--col-text-header);
	background-color:var(--col-bg-header);
}

div.accommodations-subHeader {
	display: block;
	
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 2rem;
	margin-right: 0;
	padding-top: 0;
	padding-left: var(--side-margin-default);
	padding-bottom: 0.8rem;
	padding-right: var(--side-margin-default);
	
	text-align: center;
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
	background-color:var(--col-bg-header);
}

div.accommodations-line {
	display: grid;
	
	width: 90%;
	max-width: 90%;
	height: auto;
	grid-template-columns: 50% 50%;
	grid-column-gap: 0;
	align-items: center;
	
	margin-top: 0;
	margin-left: 5%;
	margin-bottom: 5rem;
	margin-right: 5%;
	padding: 0;
}

div.accommodations-block {
	display: grid;
	
	width: 100%;
	height: auto;
	grid-template-columns: 38% 62%;
	grid-column-gap: 0;
	align-items: center;
	
	margin: 0;
	padding: 0;
}

div.accommodations-block-left {
	display: inline-block;
	width: 100%;
	
	margin: 0;
	padding: 0;
}

img.accommodations-block-left {
	display: inline-block;
	width: 90%;
	height: auto;
	
	margin-top: 0;
	margin-left: 5%;
	margin-bottom: 0;
	margin-right: 5%;
	padding: 0;
}

div.accommodations-block-right {
	display: inline-block;
	width: 100%;
	height: auto;
	
	margin: 0;
	padding: 0;
}

div.accommodations-block-header {
	margin: 0;
	padding: 0;
	
	width: 100%;
	max-width: 100%;
	height: auto;
	
	text-align: left;
	font-family: Montserrat;
	font-weight: bold;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
}

div.accommodations-block-subHeader {
	margin: 0;
	padding: 0;
	
	width: 100%;
	max-width: 100%;
	height: auto;
	
	text-align: left;
	font-family: Montserrat;
	font-style: italic;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
}

div.accommodations-block-text {
	margin: 0;
	padding: 0;
	
	width: 100%;
	max-width: 100%;
	height: auto;
	
	text-align: left;
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
}

div.accommodations-map-container {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 5rem;
	margin-right: 0;
	padding: 0;
}

div.accommodations-map-btn {
	width: 10rem;
	text-align: center;
	font-family: Montserrat;
	font-size: var(--font-size-p1);
	color: var(--col-accommodations-map-btn);
	
	margin: 0;
	padding-top: 1.5rem;
	padding-left: 2rem;
	padding-bottom: 1.5rem;
	padding-right: 2rem;
	
	border-color: var(--col-accommodations-map-btn);
	border-style: solid;
	border-width: 0.4rem;
	border-radius: 0.5rem;
}


/* ########## PHOTOS ########## */

h1.photos-header {
	z-index: 1;
	display: block;
	margin: 0;
	padding-top: 0.5rem;
	padding-left: 0;
	padding-bottom: 0;
	padding-right: 0;
	
	text-align: center;
	font-family: DancingScript;
	font-size: var(--font-size-p2);
	color:var(--col-text-header);
	background-color:var(--col-bg-header);
}

div.photos-subHeader {
	display: block;
	z-index: 1;
	
	margin: 0;
	padding-top: 0;
	padding-left: var(--side-margin-default);
	padding-bottom: 0.8rem;
	padding-right: var(--side-margin-default);
	
	text-align: center;
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
	background-color:var(--col-bg-header);
}

div.photos-mainList {
	z-index: 1;
	position: relative;
	
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	overflow-x: clip;
	overflow-y: clip;
	
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 0;
	margin-right: 0;
	padding-top: 0;
	padding-left: 0;
	padding-bottom: 0;
	padding-right: 0;
	
	
}

div.photos-mainList-entry {
	z-index: 1;
	
	display: flex;
	width: 50%;
	max-width: 50%;
	align-items: center;
	
	margin-top: 3rem;
	margin-left: 0;
	margin-bottom: 4rem;
	margin-right: 0;
	padding-top: 0;
	padding-left: 0;
	padding-bottom: 0;
	padding-right: 0;
	
	
}

img.photos-mainList-picture {
	z-index: 1;
	
	width: 15rem;
	height: 15rem;
	
	padding-top: 0;
	padding-left: 3rem;
	padding-bottom: 0;
	padding-right: 0;
}
img.photos-mainList-picture#photos-mainList-picture-photographer {
	height: auto;
}

div.photos-mainList-header {
	z-index: 1;
	
	padding-top: 0;
	padding-left: 3rem;
	padding-bottom: 0;
	padding-right: 7rem;
	
	text-align: left;
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
	font-weight: bold;
}

div.photos-mainList-text {
	z-index: 1;
	
	padding-top: 0;
	padding-left: 3rem;
	padding-bottom: 0;
	padding-right: 7rem;
	
	text-align: left;
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
}

div#photos-bottom {
	margin-bottom: 8rem;
}

img.photos-bouqet-0 {
	z-index: 0;
	position: absolute;
	left: 0;
	bottom: 0.1rem;
	width: 23%;
	height: auto;
	
	margin: 0;
	padding:0;
}

img.photos-anna-and-oskar-photowall {
	z-index: 0;
	position: absolute;
	right: 3rem;
	bottom: 3rem;
	width: 23%;
	height: auto;
	
	margin: 0;
	padding:0;
}

/* ########## WISHES ########## */

h1.wishes-header {
	z-index: 1;
	display: block;
	margin: 0;
	padding-top: 0.5rem;
	padding-left: 0;
	padding-bottom: 0.5rem;
	padding-right: 0;
	
	text-align: center;
	font-family: DancingScript;
	font-size: var(--font-size-p2);
	color:var(--col-text-header);
	background-color:var(--col-bg-header);
}

div.wishes-site {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
}

div.wishes-text-box-l0 {
	z-index: 1;
	display: flex;
	position: relative;
	justify-content: center;
	
	margin: 0;
	padding-left: 0;
	padding-bottom: 0;
	padding-right: 0;
	padding-top: 2rem;
}

div.wishes-text-box-l1 {
	z-index: 1;
	display: flex;
	flex-flow: row;
	align-items: center;
	width: 50%;
	
	margin: 0;
	padding-left: 2rem;
	padding-bottom: 2rem;
	padding-right: 2rem;
	padding-top: 2rem;
	
	border-color: var(--col-button-border);
	border-style: solid;
	border-width: 0.2rem;
	border-radius: 1rem;
}

div.wishes-text-box-text {
	z-index: 1;
	
	margin: 0;
	padding: 0;
	
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
}

img.wishes-sub-box-img,
img.wishes-text-box-img {
	z-index: 1;
	
	margin-left: 0;
	margin-bottom: 0;
	margin-right: 2rem;
	margin-top: 0;
	padding: 0;
	
	width: 10rem;
	height: 10rem;
}

div.wishes-sub-header {
	z-index: 1;
	position: relative;
	width: 100%;
	text-align: center;
	
	margin-left: 0;
	margin-bottom: 0;
	margin-right: 0;
	margin-top: 3rem;
	padding: 0;
	
	font-family: Montserrat;
	font-size: var(--font-size-de);
	font-weight: bold;
	color:var(--col-text-default);
}

div.wishes-sub {
	z-index: 1;
	position: relative;
	display: flex;
	flex-flow: row;
	justify-content: space-around;
	width: 100%;
	
	margin-left: 0;
	margin-bottom: 5rem;
	margin-right: 0;
	margin-top: 3rem;
	padding: 0;
}

div.wishes-sub-box {
	z-index: 1;
	display: flex;
	flex-flow: row;
	margin: 0;
	padding: 0;
	width: 40%;
}

div.wishes-sub-box-text {
	z-index: 1;
	
	margin: 0;
	padding: 0;
	
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
}

img#wishes-anna-and-oskar-with-present {
	z-index: 0;
	position: absolute;
	left: 3rem;
	top: 1rem;
	margin: 0;
	padding: 0;
	width: 13%;
	height: auto;
}

img#wishes-bouquet {
	z-index: 0;
	position: absolute;
	right: 3rem;
	top: 1rem;
	margin: 0;
	padding: 0;
	width: 13%;
	height: auto;
	rotate: 180deg;
}

/* ########## FAQ ########## */

h1.faq-header {
	z-index: 2;
	display: block;
	position: relative;
	margin: 0;
	padding-top: 0.5rem;
	padding-left: 0;
	padding-bottom: 0.5rem;
	padding-right: 0;
	
	text-align: center;
	font-family: DancingScript;
	font-size: var(--font-size-p2);
	color:var(--col-text-header);
	background-color:var(--col-bg-header);
}

div.faq-site {
	z-index: 0;
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
}

div.faq-question {
	z-index: 2;
	display: block;
	position: relative;
	
	margin-top: 2rem;
	margin-left: 15%;
	margin-bottom: 0;
	margin-right: 15%;
	padding-top: 1rem;
	padding-left: 2rem;
	padding-bottom: 1rem;
	padding-right: 2rem;
	
	width: 70%;
	font-family: Montserrat;
	font-size: var(--font-size-de);
	font-weight: bold;
	color:var(--col-text-header);
	background-color:var(--col-bg-header);
	
	border: 0.2rem solid var(--col-text-header);
	border-radius: 2rem 2rem 0 0;
}

div.faq-answer {
	z-index: 2;
	display: block;
	position: relative;
	
	margin-top: 0;
	margin-left: 15%;
	margin-bottom: 2rem;
	margin-right: 15%;
	padding-top: 1rem;
	padding-left: 2rem;
	padding-bottom: 1rem;
	padding-right: 2rem;
	
	width: 70%;
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
	background-color: var(--col-bg-primary);
	
	border-top: none;
	border-left: 0.2rem solid var(--col-text-header);
	border-bottom: 0.2rem solid var(--col-text-header);
	border-right: 0.2rem solid var(--col-text-header);
	border-radius: 0 0 2rem 2rem;
}

img.faq-bouquet {
	z-index: 1;
	position: fixed;
	top: 10vh;
	left: 0;
	width: auto;
	height: 50%;
}

img.faq-vase {
	z-index: 1;
	position: fixed;
	bottom: 15vh;
	right: -3vw;
	width: auto;
	height: 50%;
}

/* ########## WELCOME ########## */

h1.welcome-header {
	display: block;
	z-index: 1;
	margin: 0;
	padding-top: 0.5rem;
	padding-left: 0;
	padding-bottom: 0;
	padding-right: 0;
	
	text-align: center;
	font-family: DancingScript;
	font-size: var(--font-size-p2);
	color:var(--col-text-header);
}

div.welcome-subHeader {
	display: block;
	z-index: 1;
	margin:0;
	padding-top: 0;
	padding-left: var(--side-margin-default);
	padding-bottom: 0;
	padding-right: var(--side-margin-default);
	
	text-align: center;
	font-family: DancingScript;
	font-size: var(--font-size-p1);
	color:var(--col-text-header);
}

div.welcome-seperator {
	display: grid;
	z-index: 1;
	grid-template-columns: 6% 38% 12% 38% 6%;
	/* column-gap: 3vw; */
	justify-items: center;
	justify-content: center;
	align-items: center;
	
	width: 100%;
	height: auto;
	
	margin-left: 0;
	margin-bottom: 4vh;
	margin-right: 0;
	margin-top: 2vh;
	padding: 0;
}

div.welcome-seperator-side {
	z-index: 1;
	width: inherit;
	height: 0.2rem;
	background-color: var(--col-seperator);
	border: none;
	border-radius: 1rem;
}

div.welcome-seperator-chars {
	z-index: 1;
	width: inherit;
	height: auto;
	text-align: center;
	font-family: DancingScript;
	font-size: var(--font-size-p2);
	color: var(--col-seperator);
}

div.welcome-text-bg-container {
	position: relative;
	z-index: 1;
	overflow-x: clip;
	overflow-y: clip;
}

img.welcome-flower-bg {
	position: absolute;
	width: 50%;
	height: auto;
	right: -20%;
	z-index: 0;
}

div.welcome-text-container {
	display: grid;
	z-index: 1;
	grid-template-columns: 6% 15% 6% 67% 6%;
	justify-items: center;
	justify-content: center;
	
	width: 100%;
	height: auto;
	
	margin: 0;
	padding-top: 0;
	padding-left: 0;
	padding-bottom: var(--end-of-page-space);
	padding-right: 0;
}

div.welcome-text {
	display: block;
	z-index: inherit;
	margin: 0;
	padding: 0;
	
	text-align: center;
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
}

img.welcome-polaroid-engagement-with-flowers {
	display: block;
	z-index: inherit;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}


/* ########## NAV BAND ########## */

div.navband {
	z-index: 10;
	display: flex;
	width: 100%;
	max-width: 100%;
	background-color:var(--col-navband-bg);
	align-items: center;
	
	margin: 0;
	
	padding-top: 0.6rem;
	padding-left: 0;
	padding-bottom: 0.6rem;
	padding-right: 0;
}

div.navband-left {
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: left;
	
	margin: 0;
	padding: 0;
}

div.navband-right {
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: right;
	flex-grow: 100;
	
	margin: 0;
	padding: 0;
}

div.navband-main {
	z-index: 10;
	font-family: DancingScript;
	font-size: var(--font-size-p1);
	color:var(--col-navband-text-main);
	background-color:var(--col-navband-bg);
	
	margin-top: 0;
	margin-left: 1.4rem;
	margin-bottom: 0;
	margin-right: 0;
	
	padding: 0;
}

div.navband-entry {
	z-index: 10;
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-navband-text);
	background-color:var(--col-navband-bg);
	
	margin-top: 0;
	margin-left: 1.4rem;
	margin-bottom: 0;
	margin-right: 0;
	
	padding: 0;
}

div.navband-entry-r {
	z-index: 10;
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-navband-text);
	background-color:var(--col-navband-bg);
	float: right;
	
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 0;
	margin-right: 1.4rem;
	
	padding: 0;
}

/* ########## TIMELINE ########## */

h1.timeline-header {
	z-index: 1;
	display: block;
	margin: 0;
	padding-top: 0.5rem;
	padding-left: 0;
	padding-bottom: 0;
	padding-right: 0;
	
	text-align: center;
	font-family: DancingScript;
	font-size: var(--font-size-p2);
	color:var(--col-text-header);
	background-color:var(--col-bg-header);
}

div.timeline-subHeader {
	z-index: 1;
	display: block;
	
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 2rem;
	margin-right: 0;
	padding-top: 0;
	padding-left: var(--side-margin-default);
	padding-bottom: 0.8rem;
	padding-right: var(--side-margin-default);
	
	text-align: center;
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
	background-color:var(--col-bg-header);
}

div.timeline-entries {
	z-index: 1;
	
	display: grid;
	grid-template-columns: 49% 2% 49%;
	
	/* overflow-x: clip;
	overflow-y: clip; */
	position: relative;
	
	margin-top: 0;
	margin-left: 5%;
	margin-bottom: 2rem;
	margin-right: 5%;
	padding: 0;
	
	width: 90%;
	max-width: 90%;
}

div.timeline-entry {
	z-index: 1;
	display: grid;
	grid-template-columns: 33% 33% 34%;
	align-items: center;
	
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 4rem;
	margin-right: 0;
	padding: 0;
	
	width: 100%;
	max-width: 100%;
}

div.timeline-entry-i0-container {
	z-index: 1;
	display: flex;
	width: 100%;
	max-width: 100%;
	justify-content: right;
}

div.timeline-entry-i1-container {
	z-index: 1;
	width: 100%;
	max-width: 100%;
}

img.timeline-entry-icon {
	z-index: 1;
	width: 5rem;
	height: auto;
	max-width: 100%;
	
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 0;
	margin-right: 1rem;
	padding: 0;
}

div.timeline-entry-header {
	z-index: 1;
	width: 100%;
	max-width: 100%;
	
	margin: 0;
	padding: 0;
	
	text-align: left;
	font-family: Montserrat;
	font-weight: bold;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
	background-color:var(--col-bg-default);
}

div.timeline-entry-text {
	z-index: 1;
	width: 100%;
	max-width: 100%;
	
	margin: 0;
	padding: 0;
	
	text-align: left;
	font-family: Montserrat;
	font-size: var(--font-size-de);
	color:var(--col-text-default);
	background-color:var(--col-bg-default);
}

img.timeline-bg-img0 {
	position: absolute;
	left: 35%;
	top: 10rem;
	z-index: 2;
	
	width: 25%;
	height: auto;
}

div.timeline-entry-vertical-devider-outside {
	display: block;
	z-index: 1;
	width: 100%;
	height: 100%;
	justify-content: center;
}

div.timeline-entry-vertical-devider-inside {
	display: block;
	z-index: 1;
	width: 0.2rem;
	height: 100%;
	background-color: var(--col-seperator);
	border-width: 0;
}

div.timeline-entry-vertical-devider-inside#timeline-entry-vertical-devider-top {
	border-radius: 2rem 2rem 0 0;
}

div.timeline-entry-vertical-devider-inside#timeline-entry-vertical-devider-bottom {
	border-radius: 0 0 2rem 2rem;
}

/* ########## FOOD & DRINKS ########## */

h1.foodanddrinks-header {
	z-index: 1;
	display: block;
	margin: 0;
	padding-top: 0.5rem;
	padding-left: 0;
	padding-bottom: 0;
	padding-right: 0;
	
	text-align: center;
	font-family: DancingScript;
	font-size: var(--font-size-p2);
	color:var(--col-text-header);
	background-color:var(--col-bg-header);
}

img.foodanddrinks-food,
img.foodanddrinks-drinks {
	z-index: 1;
	display: block;
	width: 33vw;
	height: auto;
	margin-top: 2rem;
	margin-left: auto;
	margin-bottom: 2rem;
	margin-right: auto;
	padding: 0;
}