/* ******************************
 ***     layout               ***
 ****************************** */

/*
.cover img{
	margin-left: 0;
	height: 100vw;
	/* (width-imgW)/(refW-imgW)*(refM) * /
	height: auto;
}
*/

@media screen and (max-width: 218vh){ /* cover image wide enought 1536x705 .. ratio */
	.cover img{
		margin-left: max(-310px*min(100vh,140vw)/686px, min( 0px, calc((100vw - 800px*min(100vh,140vw)/686px)/1.0)));
	}
}

.cover img{
	margin-left: margin-left: max(-310px*min(100vh,140vw)/686px, min( 0px, calc((100vw - 800px*min(100vh,140vw)/686px)/1.0))); /* img: 1536x686 */
	max-height: 140vw;
}

h1 {
	position: absolute;
	bottom: 15px; left: 15px;
	padding: 0px;
	margin: 0px;
	font-size: min(6vw, 60px, 8vh);
	width: calc(100% - 2 * 15px);
}

.productimg {
	width: 250px;

}

@media screen and (max-width: 638px) { /* 1 or more productframe columns */
	.productframe p {
		display: none;
	}
	.ctaframe p {
		display: inline-block;
	}
}

	.menu {
		display: none;
		position: absolute;
		top: 64px;
		left: 0px;
		z-index: 100;
		right: 0px;
		width: 100%;
	}
	.menu li {
		display: block;
		width: 100%;
		left: 0px;
		vertical-align: middle;
		background: rgba(100%,100%,100%,75%);
		border-bottom: 1px solid black;
	}
	.menu li a {
		display: block;
		padding: 10px;
		margin: 0px;
	}
	#menu_btn {
		display: block;
	}

section {
	min-height: 6em;
}
section p {
	pading-top: auto;
	pading-bottom: auto;
}

.icon {
	height: 3em;
	margin: 0px 15px 0px 0px;
	float: left;
}


/* ******************************
 ***     theme                ***
 ****************************** */

.cover h1{
	text-align: left;
}

.cover img{
	filter: grayscale(10%); /* ??? */
}

.subtitle{
	color: var(--fill-yellow-color);
}

.ctaframe{
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: white;
	/*background-image: linear-gradient(135deg, var(--primary-color), var(--primary-color), black);*/
}

.ctaframe h4{
	background-color: var(--primary-color);
	color: var(--fill-yellow-color)
}

.ctaframe a{
	display: block;
	margin-top: 10px;
	padding: 10px;
	border-radius: 3px;
	background-color: var(--secondary-color);
	text-align: center;
	color: white;
	text-decoration: none;
}

.ctaframe a:hover{
	background-color: var(--accent-color);
}

#regulation {
	//background: var(--fill-blue-color);
}
#whatwedo {
	//background: var(--fill-green-color);
}