.todo {
	background: red;
	color: white;
	font-weight: bold;
	border: 2px solid red;
}

:root {
/*	palette:

	logo:
	1st: #312e7f	rgb(49,46,127)
	2nd: #3cb4e7	rgb(60,180,231)
	3rd: #ff00ae	rgb(255,0,174)

	doplňkové:
	black: #000000	rgb(0,0,0)
	white: #ffffff	rgb(255,255,255)
	gray: #f6f6f6	rgb(246,246,246)

	pink: #f38fbb	rgb(243,143,187)
	blue: #a5dded	rgb(165,221,237)
	yellow: #ffc60b	rgb(255,198,11)
	green: #ccdcc8	rgb(204,220,200)

*/

	--primary-color: #312e7f;
	--secondary-color: #3cb4ef;
	--accent-color: #ff00ae;

	--background-color: #f6f6f6;

	--fill-pink-color: #f38fbb;
	--fill-blue-color: #a5dded;
	--fill-yellow-color: #ffc60b;
	--fill-green-color: #ccdcc8;


	--surround-color: rgb(38,38,38); //var(--primary-color);
	--cover-color: black;

	--header-color: white;
	--footer-color: var(--header-color);

	--product-color: var(--background-color);

	--text-color: black;
}

body {
	background: var(--surround-color);
	font-family: "Open Sans", sans-serif;
	/* font-feature-settings: "kern" 1; font-kerning: normal;*/
}

.body {
	background: var(--background-color);
}

.productframe {
	border: 5px solid var(--product-color);
	background: var(--product-color);
}

.productimg {
	background: gray;
	filter: url(#ttt_blue);	
}

.overlay {
	opacity: 50%;
}

.overlay:hover {
	opacity: 100%;
}

.frame {
	background: white;
}

.portrait {
	background: navy;
	border: 1px solid black;
	filter: grayscale(1); /*url(#ttt_green); */
}

header {
	background: var(--header-color)
}

.menu {
/*	background-color: #333; /**/
}

.menu li a {
	color: black;
	text-align: center;
	vertical-align: bottom;
	text-decoration: none;
}

section a {
	color: var(--secondary-color);
	font-weight: 600;
}

.menu li a:hover, a:hover {
	color: var(--accent-color);
	border-color: var(--accent-color)
}

@media screen and (max-width: 530px) { /* pack menu */
	.menu li {
		background: rgba(100%,100%,100%,75%);
		border-bottom: 1px solid black;
	}
}
#menu_btn {
	background: lightgray;
}
#menu_btn:hover {
	background: var(--accent-color);
}



footer {
	background: var(--footer-color);
	text-align: center
}

h1 {
	font-size: min(4vw, 80px, 20vh);
	color: var(--background-color);
	text-align: right;
	background-color: rgba(255, 255, 255, 0%);
	width: 100%;
}

.motto {
	display: block;
	font-size: 70%;
	font-style: italic;
}

.cover{
	background-color: var(--cover-color);
}


.cover img{
	filter: grayscale(100%);
}

h2 {
	text-align: left;
	font-size: smaller;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: right;
}

.claim {
	margin-left: max(-.5em, calc((100% - 1380px) / 2 + 3em));
	font-size: 2em;
	text-align: left;
	font-style: italic;
	font-weight: 500;
	color: var(--accent-color);
}

h4 {
	position: absolute; z-index: 1; min-width: 250px;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 5px;
	background: var(--product-color);
}

li {
	text-align: left;
}

form {
	background: var(--background-color);
}

input, textarea {
	font-family: arial;
}

.button {
	background-color: var(--secondary-color);
	border: none;
}

.button:hover {
	background-color: var(--accent-color);
	cursor: pointer;
	color: white
}

address {
	display: inline-block;
	font-style: normal;
}

p {
	text-align: left;
}

.strong {
	color: var(--secondary-color);
	font-style: italic;
	font-size: large;
}

#whatwedo {
	background: var(--surround-color);
	color: var(--background-color);
	line-height: 1.5;
	min-height: 320px;
	display: flex;
	flex-direction: column;
}

#whatwedo p {
	margin-bottom: auto;
	margin-top: auto;
	padding: 1em 0px;
}

#portfolio {
	background: var(--fill-blue-color);
}

#contacts {
	background: var(--fill-blue-color);
}

#aboutus {
	background: var(--fill-green-color);
}


#infos {
	background: white;
}

#infos img {
	display: inline-block;
	width: 180px;
	margin-right: 40px;
	margin-bottom: 20px;

	vertical-align: top;
}

#infos ul {
	display: inline-block;
	list-style-type: none;
	padding-left: 0px;
	margin: 0px;

	vertical-align: top;
}

span.tab {
	display: inline-block;
	width: 7em;
}

span.head {
	font-weight: bold;	
}

.kern {
	letter-spacing:-.1em;
}