:root{
	--purple: rgba(181, 21, 61, 1);
	--orange: rgba(212, 116, 32, 1);
	--grey: rgba(231, 231, 231, 1);
	--desktop-menu-height: 80px;
	--mobile-menu-height: 40px;
	--desktop-gap: 30px;
	--mobile-gap: 20px;
}

@font-face{
	font-family: 'ubuntu';
	font-style: normal;
	font-weight: 400;
	src: url('font/Ubuntu-Regular.ttf');
}

@font-face{
	font-family: 'ubuntu';
	font-style: normal;
	font-weight: bold;
	src: url('font/Ubuntu-Bold.ttf');
}

html{
	font-family: ubuntu;
	font-size: 17px;
	box-sizing: border-box;
	word-break: break-word;
}

*, *:before, *:after{
	box-sizing: inherit;
}

button, input, textarea{
	font-family: ubuntu;
	outline: none;
}

img{
	vertical-align: middle;
}

a{
	color: rgba(0, 0, 0, 1);
}

sup{
	font-size: 0.6em;
}

body{
	margin: 80px 0px 0px 0px;
}

/* text-shadow with font-awesome fonts only with filter drop-shadow */
.logo-instagram{
	filter: drop-shadow(0 0 4px rgba(0, 0, 0, 1));
}

.main{
	margin: calc(var(--desktop-menu-height) + var(--desktop-gap)) auto 0 auto;
	max-width: 1600px;
}

.main-grid{
	margin: var(--desktop-gap);
	display: grid;
	grid-gap: var(--desktop-gap);
	align-items: start;
}

.main-grid-col-amount1{
	grid-template-columns: 1fr;
}

.main-grid-col-amount2{
	grid-template-columns: 1fr 1fr;
}

.main-grid-col-amount3{
	grid-template-columns: 1fr 1fr 1fr;
}

.main-grid-col{
	width: 100%;
	height: 100%;
	margin: auto;
	padding: 20px;
	line-height: 1.5em;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}

.desktop-nav, .mobile-nav{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--desktop-menu-height);
	background-color: rgba(255, 255, 255, 1);
	color: rgba(0, 0, 0, 1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px var(--desktop-gap) 5px var(--desktop-gap);
	box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.25);
	z-index: 2;
}

.mobile-nav{
	height: var(--mobile-menu-height);
	padding: 5px var(--mobile-gap);
}

.mobile-nav{
	display: none;
}

#mobile_menu_button{
	font-size: 1em;
	width: 20%;
	color: var(--purple);
}

.mobile-nav-search-input{
	height: 1.8em;
	padding: 0 10px;
	width: 65%;
	border: 1px solid var(--purple);
	border-left: 1px solid var(--purple);
	border-right: 0;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;	
}

.mobile-nav-search-input::placeholder{
	text-align: center;
	opacity: 0.5;
}

.mobile-nav-search-button-submit, .mobile-nav-search-button-delete{
	height: 1.8em;
	padding: 0 5px;
	border: 1px solid var(--purple);
	background-color: var(--purple);
	color: rgba(255, 255, 255, 1);
	cursor: pointer;
}
.mobile-nav-search-button-submit{
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

/*
.mobile-nav-search-button-delete{
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;

}
*/
.desktop-nav-menu-element{
	display: inline-block;
	font-size: 1.2em;
	border-radius: 15px;
	padding: 0 30px 0 0;
	cursor: pointer;
}

.desktop-nav-menu-element:last-child{
	margin-right: 0;
}

.desktop-nav-menu-element a{
	color: rgba(0, 0, 0, 1);
	text-decoration: none;
	/* text-transform: uppercase; */
}

.desktop-nav-menu-element a:hover{
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
	color: var(--purple);
	transition: 0.15s;
}

.desktop-nav-menu-element-special{
	background-color: var(--orange);
	border-radius: 15px;
	padding: 5px 15px;
	margin-right: 30px;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

.desktop-nav-menu-element-special a{
	color: rgba(255, 255, 255, 1);
}

.desktop-nav-menu-element-special:hover{
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
	background-color: var(--orange);
	color: rgba(0, 0, 0, 1);
	transition: 0.25s;
}

.desktop-nav-menu-element-special a:hover{
	color: rgba(0, 0, 0, 1);
	transition: 0.25s;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);	
}


.desktop-search-container{
	width: 100%;
	padding: 0 var(--desktop-gap);
	max-width: 1000px;
	text-align: center;
	margin: 120px auto 0 auto;
}

.desktop-search-input{
	min-height: 2em;
	font-size: 1em;
	padding: 2px 10px;
	border: 2px solid var(--purple);
	border-left: 2px solid var(--purple);
	border-right: 0;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.desktop-search-input::placeholder{
	opacity: 0.5;
	text-align: center;
}

.mobile-search-input{
	font-size: 0.8em;
	min-height: 2em;
	width: 40%;
	vertical-align: top;
}

.desktop-search-select{
	min-height: 2em;
	font-size: 1em;
	padding: 2px 10px;
	border: 2px solid var(--purple);
    vertical-align:top;
}

.mobile-search-select{
	min-height: 2em;
	font-size: 0.8em;
	width: 40%;
}

.desktop-search-location-button{
	background-color: var(--purple);
	color: white;
	margin: 5px 5px 0 0;
	padding: 3px 20px; 
	border: 1px solid var(--purple); 
	border-radius: 3px; 
	cursor: pointer;
}

.desktop-search-location-button:last-child{
	margin-right: 0;
}

.desktop-search-submit{
	height: 2em;
	font-size: 1em;
	background-color: var(--purple);
	color: rgba(255, 255, 255, 1);
	border: 2px solid var(--purple);
	cursor: pointer;
}

.mobile-search-submit{
	min-height: 2em;
	font-size: 0.8em;
}

.desktop-search-submit{
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}


.mobile-search-container{
	display: none;
	margin-top: calc(3 * var(--mobile-gap));
	text-align: center;
}

.mobile-menu{
	display: none;
	margin-top: var(--mobile-menu-height);
}

.mobile-menu-element{
	padding: 10px var(--mobile-gap);
	border-bottom: 1px solid #000000;
}

.mobile-menu-element a{
	color: rgba(0, 0, 0 , 1);
	text-decoration: none;
}

.mobile-menu-icon{
	width: 20px;
	margin-right: var(--mobile-gap);
}

.logo{
	height: 60px;
}

.logo:hover{
	filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.3));
	transition: 0.5s;
}

.header{
	font-size: 1.9em;
	font-weight: bold;
	margin-bottom: 1.5em;
	line-height: 1em;
	color: var(--purple);
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}

.sub-header{
	font-size: 1.5em;
	font-weight: bold;
	margin: 1.5em 0 0.5em 0;
}

.sub-header:first-child{
	margin-top: 0;
}

.flex-table{
	display: flex;
	margin-left: 25px;
	margin-top: 25px;
}

.flex-table div:first-child{
	width: 20px;
	font-size: 1.2em;
}

.intro-image-container{
	position: relative;
	height: 250px;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

.intro-image{
    width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.intro-text-container{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	color: rgba(255, 255, 255 ,1);
	text-shadow: 0 0 4px rgba(0, 0, 0, 1);
	display: flex;
	padding: 0 15px;
	justify-content: center;
	align-items: center;
	font-size: 2em;
	font-weight: bold;
	line-height: 1.2em;
	text-align: center;
}

.intro-text-container a{
	color: white;
	text-decoration: none;
}

.intro-text-container a:hover{
	color: var(--orange);
}

.news-image-container{
	width: 100%;
	text-align: center;
}

.news-image{
	width: 85%;
	margin: auto;
	border-radius: 10px;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

.news-divider{
	margin: 20px 0;
}

/* don't show first <hr> */
.news-divider:first-of-type{
	border: 5px solid black;
	display: none;
}

.pdf-button{
	font-size: 1.3em;
	padding: 5px 25px;
	margin-top: 20px;
	border-radius: 10px;
	border: 1px solid black;
	cursor: pointer;
}

.pdf-button:hover{
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	background-color: var(--purple);
	color: rgba(255, 255, 255, 1);
}

.waren-scroll-image{
	margin: 20px auto;
	font-size: 3em;
	width: 100%;
	text-align: center;
}

.waren-main{
	margin: auto;
	max-width: 1000px;
}

.waren-container{
	margin: 0 40px 40px 40px;
	display: block;
}

.waren-container-box{
	border-radius: 10px;
	border: 1px solid var(--grey);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.waren-number{
	color: rgba(0 ,0, 0, 0.5);
	padding-left: 10px;
	font-size: 0.8em;
	margin-bottom: 3px;
}

.waren-image-container{
	position: relative;
	background-color: var(--grey);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 15px 45px;
}

.waren-image{
	margin: 7px;
	border-radius: 3px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.waren-desc-container1{
	border-bottom: 1px solid #ababab;
	font-size: 1.3em;
	margin: 0 50px;
	padding: 15px 0 5px 0;
}

.waren-desc-container2{
	font-size: 0.8em;
	margin: 0 50px;
	padding: 5px 0 15px 0;
}

.waren-scroll-top{
	cursor: pointer;
	float: right;
	font-size: 1.5em;
}

.waren-sold{
	position: absolute;
	top: 50px;
	left: 60px;
	font-size: 4.0em;
	color: rgba(255, 255, 255, 1);
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
}

.mobile-waren-container{
	text-align: center;
	display: none;
	margin: 20px 20px 0 20px;
}

.mobile-waren-number{
	color: rgba(0 ,0, 0, 0.5);
	padding-left: 10px;
	font-size: 0.8em;
	margin-bottom: 3px;
}

.mobile-waren-container-box{
	border-radius: 10px;
	border: 1px solid var(--grey);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.mobile-waren-image-container{
	position: relative;
	background-color: var(--grey);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding: 25px;
}

.mobile-waren-image{
	border-radius: 3px;
	width: 100%;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.mobile-waren-article-container{
	border-bottom: 1px solid #ababab;
	font-size: 1.3em;
	margin: 0 20px;
	padding: 10px 0 5px 0;
}

.mobile-waren-description-container{
	font-size: 0.8em;
	margin: 0 20px;
	padding: 5px 0 5px 0;
}

.mobile-waren-price-container{
	border-top: 1px solid #ababab;
	font-size: 1.3em;
	margin: 0 20px;
	padding: 5px 0 10px 0;
}

.mobile-waren-sold{
	position: absolute;
	top: 100px;
	right: 0;
	left: 0;
	font-size: 4.0em;
	font-weight: bold;
	color: rgba(255, 255, 255, 0.8);
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
}

.mobile-waren-image-counter{
	position: absolute;
	background-color: var(--purple);
	color: rgba(255, 255, 255, 1);
	top: 35px;
	left: 35px;
	padding: 5px;
	border-radius: 5px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.footer-container{
	text-align: center;
	margin: 15px auto 15px auto;
	max-width: 1600px;
}

.loading-image-container{
	width: 100%;
	margin: 25px auto;
	text-align: center;
}

.loading-image{
	width: 100px;
}

/* innerWidth smaller than 500 pixel = mobile phones */
@media screen and (max-width: 500px){

	/* body margins for mobile */
	body{
		margin: 0;
	}

	.desktop-nav{
		display: none;
	}

	.mobile-nav{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.main{
		margin-top: calc(var(--mobile-menu-height) + var(--mobile-gap));
	}

	.main-grid{
		grid-template-columns: 1fr;
		margin: 0 var(--mobile-gap) 20px var(--mobile-gap);
		grid-gap: var(--mobile-gap);
	}

	.intro-image-container{
		height: 125px;
		font-size: 0.5em;
	}

	.mobile-waren-container{
		display: block;
	}

	.waren-container{
		display: none;
	}

	.desktop-search-container{
		display: none;
	}

	.mobile-search-container{
		display: block;
	}
}