:root{
    --background-color-value: 180, 180, 180;
    --darker-background-color-value: 65, 65, 65;
    --accent-color-value: 150, 150, 150;
    --text-color: #FFFFFF;
    --navbar-height: 80px;
    --transition: all 250 ease-in-out;
}
*{
    margin: 0;
    padding: 0;
    border: none;
    vertical-align: text-top;
}
html{
    height: 100%;
}
body{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    min-height: 100vh;
	font-family: Tahoma, "Trebuchet MS", sans-serif;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: grey;
}


/* Animations ----------------------------------------------------- */

@keyframes gettingTextDark {
    from {
        opacity: 0.0;
    }
    
    to {
        opacity: 1.0;
    }
}

@keyframes gettingBright {
    from {
        background: rgba(230, 230, 230, 0.0);
    }
    
    to {
        background: rgba(230, 230, 230, 0.7);
    }
}

@keyframes fade-out {
    from {scale: 1.0; opacity: 1;}
    to {scale: 1.1; opacity: 0;}
}


/* Menue ----------------------------------------------------- */

#menu-struktur {
    background: rgba(230, 230, 230, 0.7);
    position: fixed;
    top: 0;
    right: 0;
    padding-left: 20px;
    padding-bottom: 20px;
    text-align: right;
    z-index: 105;
    animation: gettingBright 3.0s;
}

#menuButtonPosition {
	z-index: 95;
	position: fixed;
	top: 20px;
	right: 20px;
}

.menuButtonStyle {
	background-color: rgba(50, 50, 50, 0.5);
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	display:inline-block;
	cursor:pointer;
	color:#fff;
	font-size:25px;
	padding:13px 20px;
	text-decoration:none;
}

.menuSpacer {
    margin-top: 100px;
    font-size: 2rem;
}

.menuItemText {
    text-decoration: none;
    color: black;
    margin-right: 20px;
    animation: gettingTextDark 3.0s;
}   


/* General styles ----------------------------------------------------- */

.mainBanner {
    height: 45vh;
    width: 100%;
    margin-top: -24px;
    background-size: cover;
    background-position: center center;
    z-index: -5;
}

.mainBannerSub {
    height: 45vh;
    width: 100%;
	background-color: rgba(255, 255, 255, 0.0);
    position: relative;
}

.textPositionBottom {
    position: absolute;
    bottom: 0;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
	background-color: rgba(175, 175, 175, 0.5);
    z-index: 0;
}

.mainBannerNarrow {
    min-height: 100px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -24px;
    background-size: cover;
    background-position: center center;
    z-index: -5;
}

.shadow {
    display: flex;
    flex-direction: column;
    justify-content: center;
	background-color: rgba(175, 175, 175, 0.5);
    width: 100%;
    height: 100%;
    min-height: 100px;
    text-align: center;
}

.formSheet {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.formGroup {
    width: 100%;
    margin: 5px auto;
    border: black 1px dotted;
}

.button-small {
    background-color: lightgrey;
    border: none;
    color: white;
    padding: 6px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 2px;
    cursor: pointer;
    border-radius: 5px;
}

.textStyleTitle {
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

.moreMarginTop {
    margin-top: 40px;
}

.moreMarginBottom {
    margin-bottom: 20px;
}

.pageFooter {
    height: 100px;
    width: 100%;
    background-size: cover;
    background-position: center center;
    z-index: 90;
}

.pageFooterSub {
    height: 100px;
    width: 100%;
	background-color: rgba(255, 255, 255, 0.0);
	position: fixed;
	bottom: 0px;
}


/* Page classes ----------------------------------------------------- */

.page-Container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Box classes ----------------------------------------------------- */

.box-1 {
    width: 100%;
}

.box-2 {
    min-width: 400px;
    width: 50%;
}

@media(max-width: 814px){
    .box-2 {
        width: 100%;
    }
}

.box-3 {
    min-width: 400px;
    width: 33.3%;
}


@media(max-width: 1214px){
    .box-3 {
        width: 50%;
    }
}

@media(max-width: 814px){
    .box-3 {
        width: 100%;
    }
}

.pictureOnly {
    overflow: hidden;
}

.pictureAndText {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.content {
    margin: 20px;
}

.left {
    display: flex;
    justify-content: flex-start;
    text-align: left;
}

.center {
    display: flex;
    justify-content: center;
    text-align: center;
}

.right {
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.leftPart {
    min-width: 400px;
    max-width: 30%;
    overflow: hidden;
}

.rightPart {
    min-width: 400px;
    max-width: 60%;
}

/* Picture classes ----------------------------------------------------- */

.collections-background {
	padding: 50px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

@media(max-width: 814px){
    .collections-background {
    	padding: 30px;
    }
}

.box {
    z-index: 20;
    width: 400px;
}

@media(max-width: 814px){
    .box {
        width: 350px;
    }
}

.boxPicture {
    position: relative;
}

.collectionPicture {
    width: 100%;
}

/*.collectionPictureHolder:hover {
    opacity: 0.1;
    transition: all 1.0s ease;
}*/

@media(max-width: 814px){
    .boxDescription {
        display: none;
    }
}

/*
@media(max-width: 814px){
    .collectionPictureHolder a {
        pointer-events: none;
    }
}*/


.boxDescription {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
    padding-left: 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
}

.boxTitle {
    z-index: -5;
    font-size: 2rem;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}