/*

	* file: style.css

	* Theme	for website Starklinnemann.com

	* Created by Pascal Roeleven (pascalroeleven.nl)

	* Last modified on 2017-02-16 (ISO)

*/



/* GENERAL */

@import 'https://fonts.googleapis.com/css?family=PT+Sans';



html, body {

	overflow-x: hidden;

	height: 100%;

}



body {

	font-family: 'PT Sans', sans-serif;

	font-size: 1.25em;

}



.clearing {

	clear: both;

}



.text-small {

	font-size: 0.7em;

}



.quote {

	font-size: 0.85em;

    font-style: italic;

}



.center {

	text-align: center;

}



.bold {

	font-weight: bold;

}



.italic {

	font-style: italic;

}



.img-album {

	margin: 5px;

}



.img-album-page {

	margin: 0 auto;

	display: block;

	border: 5px solid #ededed;

	height: auto;

    max-width: 100%;

}



.img-event {

	display: block;

	border: 5px solid #ededed;

	height: auto;

	max-width: 100%;

	max-height: 300px;

}



.soundcloud-player {

	margin: 20px 0px;

}



.yt-container {

	position: relative;

	padding-bottom: 56.25%;

	padding-top: 30px;

	height: 0;

	overflow: hidden;

	margin: 20px 0px;

}



.yt-container iframe {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

}



ul {

	list-style: initial;

    margin: initial;

    padding: 0 0 0 40px;

}



a {

	color: #ca8777;

}



p,ul li {

	line-height: 1.3em;

}



/* Advanced Checkbox Hack */

	body {

	  -webkit-animation: bugfix infinite 1s;

	}



	@-webkit-keyframes bugfix {

	  from {

		padding: 0;

	  }

	  to {

		padding: 0;

	  }

	}



/* HEADER */

header {

	padding: 5px 0px;

}



#topbar {

	box-shadow: 0px 2px 2px -1px #888888;

	padding-bottom: 5px;

	position: relative;

}



#lbl-mobmenu {

	display: block;

	cursor: pointer;

	font-size: 3em;

	color: #ca8777;

	float: left;

	margin-left: 20px;

	margin-right: 10px;

	font-family: serif;

	width: 40px;

	text-align: center;

	line-height: 50px;

}



#lbl-mobmenu::after {

	content: "\2261";

}



#img-logo {

	height: 50px;

	margin-left: 20px;

}



#header-image {

	background-color: #413d3a;

	padding: 20px 30px;

	text-align: center;

}



#img-welcome-image {

	max-width: 100%;

	height: auto;

	max-height: 470px;

	border: 2px solid #ffffff;

	border-radius: 5px;

}

	

#lang-select {

	font-size: .6em;

	position: relative;

    top: 10px;

    left: 10px;

}



#lang-select a {

	padding: 0px 10px;

	line-height: 1.5em;

	display: inline-block;

}



/* MENU */

/* Menu based on https://css-tricks.com/responsive-menu-concepts/, menu #4 */

#chkbx-mobmenu {

	position: absolute;

	top: -9999px;

	left: -9999px;

}



#chkbx-mobmenu:checked ~ header > div > #menu-col {

	left: 0em;

}



#chkbx-mobmenu:checked ~ section,

#chkbx-mobmenu:checked ~ header > #header-image,

#chkbx-mobmenu:checked ~ footer{

	margin-left: 14em;

	margin-right: -14em;

}



#nav-main {

	height: 100%;

    margin-top: 10px;

    position: absolute;

    top: 100%;

    width: 100%;

}



#menu-col {

	position: absolute;

	margin-top: 10px;

    left: -20em;

    width: 13em;

}



#menu-col ul {

	list-style-type: none;

	padding: 0 0 0 20px;

}



#menu-col ul li {

	border-bottom: 2px solid #ca8777;

}



#menu-col ul li a {

	vertical-align: middle;

	line-height: 3em;

	color: inherit;

	font-size: 1em;

	text-decoration: inherit;

	display: block;

	padding-left: 20px;

}



#menu-col ul li a:hover {

	color: #ca8777;

}



/* CONTENT */

h1 {

	color: #ca8777;

	font-size: 1.6em;

	margin-bottom: 20px;

}



h2 {

	color: #ca8777;

	font-size: 1.4em;

	margin-bottom: 20px;

	font-weight: bold;

}



h3 {

	color: #ca8777;

	font-size: 1.3em;

	margin-bottom: 20px;

}



section {

	padding: 15px 10px;

}



p {

	margin: 1.12em 0

}



/* SIDEBAR */

aside h1 {

	font-weight: bold;

	font-size: 1.4em;

}



/* FOOTER */

footer {

	background-color: #d2d2d2;

	clear: both;

	box-shadow: 0px 500px 0px 500px #d2d2d2;

	padding: 30px 20px;

	font-size: 0.9em;

	line-height: 1.3em;

}



#footer-left {

	margin: 0px auto;

}



#footer-right {

	margin: 0px auto;

}





/* Page: Products */

#product-list .product {

	border: 1px solid #bfbfbf;

	margin: 5px;

	display: flex;

	align-items: center;

	flex-wrap: wrap;

    justify-content: space-between;

}



#product-list .product-image img{

	vertical-align: top;

	width: 150px;

	padding: 10px;

}



#product-list .product-desc {

	margin: 10px;

	order: 2;

	width: 100%;

}



#product-list .product-buy {

	margin: 15px;

	order: 1;

}



#product-list .product-long-desc {

	margin: 0px 10px;

	order: 4;

	width: 100%;

}



#product-list a {

	color: #000000;

	text-decoration: none;

}



#product-list .product:hover {

	background-color: #bfbfbf;

}



#product-list .product-active:hover {

	background-color: initial;

}



form .required-text::after {

	content: "*";

	color: red;

}



input {

	margin: 5px 0px 10px 0px;

}



#ordernumber {

	font-weight: bold;

}



.address {

	margin: 20px 0px;

	border: 1px solid #bfbfbf;

	padding: 10px;

}



.address .heading {

	margin: 0px 0px 20px 0px;

}



.address .details {

	font-family: Courier-New, monospace;

    font-size: 0.8em;

	margin: 0px 0px 40px 0px;

}



.order-form input[type="text"],input[type="email"],textarea{

	width: 100%;

	max-width: 400px;

}



.order-form textarea {

	height: 100px;

}



.order-form input[type="submit"] {

	padding: 5px 10px;

}


.inside-div {
	width:100%
}


/* TABLET */

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

	div.has-sidebar {

		margin-right: 260px;

	}

	

	main {

		margin-right: -260px;

		float: left;

		width:100%

	}

	

	aside {

		float: right;

		width: 230px;

		margin-left: 30px;

	}

	

	/* Page: Products */

	#product-list .product-desc {

		flex: 1;

		width: initial;

		order: 1;

	}



	#product-list .product-buy {

		order: 2;

	}

}



/* DESKTOP */

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

	/* HEADER */

	#lbl-mobmenu {

		display: none;

	}

	

	#img-logo {

		height: 90px;

		display: inline-block;

	}

	

	#topbar {

		text-align: center;

		position: static;

	}

	

	#menu-col {

		display: inline-block;

		margin-left: 10px;

	}

	

	/* MENU */

	#menu-col {

		position: static;

		width: auto;

		display: inline-block;

	}

	

	#nav-main {

		display: inline-block;

		margin-bottom: 20px;

		margin-top: 0px;

		position: static;

	}

	

	#nav-main ul {

		padding-left: 30px;

	}

	

	#nav-main ul li {

		border-bottom: none;

		border-right: 3px solid #ca8777;

		border-left: 3px solid #ca8777;

		float: left;

		margin-left: 5px;

	}

	

	#nav-main ul li:first-child {

		border-left: none;

		margin-left: 0px;

	}

	

	#nav-main ul li:last-child {

		border-right: none;

	}



	#nav-main ul li a {

		line-height: initial;

		padding: 0px 15px;

		font-size: 0.8em;

	}



	#nav-main ul li a:hover {

		color: #ca8777;

	}

	

	#lang-select {

		text-align: right;

		position: static;

	}

	

	/* CONTENT */	

	section {

		max-width: 1000px;

		margin: 0px auto;

		padding: 40px 10px;

	}

	

	/* FOOTER */

	#footer-left {

		margin-left: 20%;

		float: left;

	}



	#footer-right {

		margin-right: 20%;

		float: right;

	}

}