/*
Copyright © 2025 SNEGTEC Erik Kos. All rights reserved.
*/

/************/
/* default values */


/* simplified sizing: width = padding + border */
* {
    box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	
	font-family: "Arial", "Helvetica", sans-serif;	
}

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

div#top-header {
	/* no top-header on mobile */
	display: none;
}

@media screen and (min-width : 840px) {
	div#top-header {
		padding-left: 5%;
		padding-right: 5%;
		background-color: #f7f9fa;
		
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		
		margin: 0 5%;
	}
}
div#top-header img {
	padding: 0;
	padding-top: 5px;
	
	font-weight: bold;
	font-size: normal;
	color: #444444;
	text-decoration: none;
	
	transition: 0.3s;
}

header {
	/* no top-header on mobile */
	display: none;
}

@media screen and (min-width : 840px) {
	header {
		background-color: #f2faff;
		background-image: url('./header2.jpg');
		
		/* border-bottom: thin solid #fff;*/
		
		background-position: center;
		background-size: cover;
		
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between; /* space-between;*/
		align-items: baseline;
		
		align-content: center;
		
		height: 8em;
		display: flex;
	}
}


#company-name {
	/* no top-header on mobile */
	display: none;
}

@media screen and (min-width : 840px) {
	#company-name {
		margin: 0;
		padding: 0;
		font-weight: bold;
		font-size: xx-large;
		color: #6193bd;
	
		display: block;
		padding: 0.25em 0.5em 0.25em 0.5em;
	}
}

#search {
	/* no top-header on mobile */
	display: none;
}

@media screen and (min-width : 840px) {
	#search {
		font-weight: bold;
		font-size: large;
		color: white;
		
		margin: 0.2em;
		margin-right: 1em;
		padding: 1em;
		
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		
		align-self: flex-end;
		margin-left: auto;
	}
}

#search form input {
	background-color: #6d7fe2;
	color: white;
	
	border: 1px solid White;
	border-radius: 2px;
	-webkit-appearance: none;
}

main {
	display: block; /* for IE11 */
	padding: 1em 1em;
	margin: 0;
	
	background-color: #f7f9fa;
}

@media screen and (min-width : 840px) {
	main {
		margin: 0 5%;
	}
}

footer#higher {
	background-color: #6d7fe2;
	background-image: url('./footer-small2.jpg');

	box-shadow: 1px 1px 4px 2px rgba(0,0,0,.1);
	position: relative;
	
	padding: 10px 0;
	padding-left: calc(5% + 2em);
	padding-right: calc(5% + 2em);
	
	color: white;
	
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	align-items: baseline;
}	

footer * a {
	color: white;
	text-decoration: none;
	transition: 0.3s;
}

footer * a:hover {
	color: BurlyWood;
	text-decoration: none;
}

.footer-section {
	font-size: large;
}

.footer-section ul {
	list-style-type: none;
	padding-left: 0.5em;
}

.footer-section li {
	padding: 0.2em;
}

@media screen and (min-width : 840px) {
	.footer-section {
		font-size: normal;
	}
}

footer#lower {
	background-color: white;
	border-top: solid white 1px;

	padding-bottom: 0.5em;
	padding-left: 5%;
	padding-right: 5%;

	text-align: center;

	color: black;
	font-size: x-small;

	background-color: #f7f9fa;
	margin: 0;
}

@media screen and (min-width : 840px) {
	footer#lower {
		margin: 0 5%;
	}
}

/************/

/* menu - mobile */

nav {
	background-color: #6d7fe2;
	background-image: url('./footer-small2.jpg');
	
	box-shadow: 1px 1px 4px 2px rgba(0,0,0,.1);
	z-index: 2;
	
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}

#nav-bar {
	margin: 0;
	padding: 0;
	
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	
	background-color: #6d7fe2;
	background-image: url('./footer-small2.jpg');
}

#nav-company-name {
	flex: 1 1 15em;
	
	margin: 0;
	
	padding: 0;
	padding-top: 0.45em;
	padding-left: 1.5em;
	
	display: inline;
	text-align: left;
	color: white;
	z-index: 100;
	
	font-size: x-large;
}

nav div#menu {
	position: relative;
	
	transition: max-height .2s ease-out;
	max-height: 0;
	
	height: 100vh;
	overflow-y: auto;
	
	padding: 0px;
	margin-bottom: 0;
}

nav div#menu a {
	display: block;
	border-bottom: thin solid #000;
	
	color: white;
	background-color: #6d7fe2;
	margin: 0;
	
	font-size: 1.5em;
	text-decoration: none;

	padding: 0.75em;
	transition: 0.3s;
}

nav div#menu a:hover/*, nav label#menu-icon:hover*/ {
	background-color: LightSteelBlue;
	text-decoration: none;
}

nav div#menu a:active {
	background-color: #6d7fe2;
	text-decoration: none;
}

nav div#menu a:visited {
	text-decoration: none;	
}

/* icon */

nav #nav-bar #menu-icon {
	display: block;
	
	cursor: pointer;
	padding: 1.5em;
	position: relative;
	user-select: none;
	display: inline-block;
}

nav #nav-bar #menu-icon #navicon {
	background: white;
	display: block;
	height: 3px;
	position: relative;
	transition: background .2s ease-out;
	width: 25px;
}

nav #nav-bar #menu-icon #navicon:before,
nav #nav-bar #menu-icon #navicon:after {
	background: white;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
}

nav #nav-bar #menu-icon #navicon:before {
	top: 7px;
}

nav #nav-bar #menu-icon #navicon:after {
	top: -7px;
}

/* menu - responsive */

nav #show-menu {
	display: none;
}

nav #show-menu:checked ~ div#menu {
	/* max-height: calc(16em + 4px); */
	/* max-height: 100%; */
	/* height of 1 menu item: 1em + 1px (for border-top) */
	max-height: calc(100vh - 3.2em);
}

nav #show-menu:checked ~ #nav-bar #menu-icon #navicon {
  background: transparent;
}

nav #show-menu:checked ~ #nav-bar #menu-icon #navicon:before {
	transform: rotate(-45deg);
}

nav #show-menu:checked ~ #nav-bar #menu-icon #navicon:after {
	transform: rotate(45deg);
}

nav #show-menu:checked ~ #nav-bar #menu-icon:not(.steps) #navicon:before,
nav #show-menu:checked ~ #nav-bar #menu-icon:not(.steps) #navicon:after {
	top: 0;
}

/* modification for menu bar when responsive - fixed position overlaps the rest of the page */
main {
	margin-top: 3.1em;
}

#mobile-search {
	border-top: thin solid black;
	border-bottom: thin solid black;
	margin-left: auto;
	
	padding: 0.75em;
	
	font-weight: bold;
	font-size: large;
	color: white;
	
	font-size: 1.5em;
	transition: 0.3s;
	
	background-color: #6d7fe2;
	background-image: url('./footer-small2.jpg');
}

@media screen and (min-width : 840px) {
	#mobile-search {
		display: none;
		background-image: none;
	}
}

#mobile-search form {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	align-items: baseline;
}

#mobile-search form label {
	margin: 0;
	margin-right: 0.5em;
}

#mobile-search form input {
	background-color: #6d7fe2;
	color: white;
	
	flex: 1 1 5em;
	min-width: 0;
	
	border: 1px solid white;
	border-radius: 2px;
	-webkit-appearance: none;
	
	font-size: 1em;
	transition: 0.3s;
}

/* menu - desktop */
@media screen and (min-width : 840px) {

	main {
		margin-top: 0;
	}
	
	nav {
		background-image: none;
		position: relative;
		padding-left: 5%;
		padding-right: 5%;
	}
	
	nav div#menu {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		height: auto;
		max-height: none;
		
		overflow-y: auto;
	}
	
	nav div#menu a {
		border: none;
	}
	
	nav #nav-bar label#menu-icon {
		display: none;
	}

	nav #nav-company-name {
		display: none;
	}
}

/************/
/* items */

a {
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
	margin: 0px;
}


/************/
/* offer panes */

#offer {
	font-size: small;
	
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	align-items: stretch;
}

.offer-section {
	box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.2);

	background-color: #f2faff;
	width: 28em;
	
	border: thin solid #ccc;
	border-radius: 0.25em;
	margin: 1em 0.5em;

	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-content: flex-start;
}

.offer-section h3 {
	background-color: #6193bd;
    color: white;
    padding: 1em 0 1em 0;
    margin: 0;
    font-size: x-large;
    text-align: center;
}

.offer-section p.price {
	background-color: white;
    color: black;
    padding: 1em 1em;
    margin: 0;
    font-size: large;
    text-align: center;
    font-weight: bold;
    border-bottom: thin solid #6193bd;
}

.offer-section ul.short-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.offer-section ul.short-list li {
	font-size: medium;
	margin: 0;
	padding: 0.5em;
	border-bottom: thin solid #6193bd;
}

.offer-section p.offer-description {
	flex-grow: 1;
	
	background-color: white;
	
	padding: 1em 1em;
	margin: 0;
	
	font-size: medium;
}

.offer-section ul.list-description {
	flex-grow: 1;

	background-color: white;
	list-style: disc;
	font-size: medium;
	
	padding: 1em 2em;
	margin: 0;
	
}

.offer-section .read-more {
	border-top: thin solid #6193bd;
	
	background-color: #f2faff;
	
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	
	padding: 1em 1em;
	
	font-size: large;
}

.offer-section .read-more a {
    background-color: #6193bd;
    color: white;
    padding: 1em 1.5em;
    border: none;
    border-radius: 0.25em;
    cursor: pointer;
    transition: 0.3s;
}

.offer-section .read-more a:hover {
    background-color: LightSteelBlue;	
}

/************/
/* detailed offer pages */

#offer2 {
	font-size: small;
	
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	align-items: stretch;
	align-items: flex-start;
}

#offer2 div.offer-description {
	font-size: larger;
	flex: 1 1 40em;
}

.offer-detailed {
	box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.2);

	background-color: #f2faff;
	width: 100%;
	
	font-size: smaller;
	
	border: thin solid #ccc;
	border-radius: 0.25em;
	margin: 1em 0.5em;

	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-content: flex-start;
}

/* tablet version */
@media screen and (min-width : 40em) and (max-width : 76em) {
	.offer-detailed {
		width: 60%;
	}
}

/* desktop version */
@media screen and (min-width : 76em) {
	#offer2 div.offer-description {
		flex: 1 1 40em;
		margin-right: 2em;
	}
	
	.offer-detailed {
		width: 35em;
	}
}

.offer-detailed h3 {
	background-color: #6871ab;
    color: white;
    padding: 0.5em 0 0.5em 0;
    margin: 0;
    font-size: x-large;
    text-align: center;
}

.offer-detailed p.price {
	background-color: white;
    color: black;
    padding: 1em 1em;
    margin: 0;
    font-size: large;
    text-align: center;
    font-weight: bold;
    border-bottom: thin solid #6193bd;
}

.offer-detailed ul.short-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.offer-detailed ul.short-list li {
	font-size: medium;
	margin: 0;
	padding: 0.5em;
	border-bottom: thin solid #6193bd;
}

.offer-detailed p.offer-description {
	flex-grow: 1;
	
	background-color: white;
	
	padding: 1em 1em;
	margin: 0;
	
	font-size: medium;
}

.offer-detailed ul.list-description {
	flex-grow: 1;

	background-color: white;
	list-style: disc;
	font-size: medium;
	
	padding: 1em 2em;
	margin: 0;
	
}

.offer-detailed .i-want {
	border-top: th in solid #6193bd;
	
	background-color: white;
	
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	
	padding: 1em 1em;
	
	font-size: large;
}

.offer-detailed .i-want a {
    background-color: #6193bd;
    color: white;
    padding: 1em 1.5em;
    border: none;
    border-radius: 0.25em;
    cursor: pointer;
    transition: 0.3s;
}

.offer-detailed .i-want a:hover {
    background-color: LightSteelBlue;	
}


/************/
/* horizboard */


div.horizboard {
	padding-left: 5%;
	padding-right: 5%;	
	
}

div.horiz-item {
	/*
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	align-items: stretch;
	*/
	
	box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.2);
	
	border: 1px solid gray;
	border-radius: 0.25em;
	/* width: 20em; */
	padding: 0;
	margin: 1em 0.5em;

	background-color: GhostWhite;
}


div.horizboard div.horiz-item h2 {
	padding: 0.5em;
	margin: 0;
	
	background-color: #6871ab;
	text-align: center;
	
	width: 100%;
}

div.horizboard div.horiz-item p {
	padding: 0.5em;
	margin: 0;
}

div.horizboard div.horiz-item div.horiz-item-content {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}

div.horizboard div.horiz-item div.horiz-item-content div.horiza {
	width: 200px;
}

div.horizboard div.horiz-item div.horiz-item-content div.horizb {
	flex: 1 1 15em;
	padding: 0.5em;
}

/* desktop version */
@media screen and (min-width : 840px) {
	div.horizboard div.horiz-item h2 {
		padding: 1.0em;
	}

	div.horizboard div.horiz-item p {
		padding: 1.5em;
	}

	div.horizboard div.horiz-item div.horiz-item-content div.horizb {
		padding: 1.5em;
	}

}

/************/
/* index board */

div#board {
	padding-left: 5%;
	padding-right: 5%;
	
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	align-items: stretch;
}

div#board div.board-item {
	box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.2);
	
	border: 1px solid gray;
	border-radius: 0.25em;
	width: 20em;
	padding: 0;
	margin: 1em 0.5em;
	
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-content: flex-start;
	
	overflow: hidden;
}

div#board div.board-item h2 {
	padding: 1.5em;
	margin: 0;
	
	background-color: #6871ab; /* #6193bd; */
	text-align: center;
}

div#board div.board-item p {
	padding: 1.5em;
	margin: 0;
	flex-grow: 1;
	
	background-color: GhostWhite;
}


/* desktop version */
@media screen and (min-width : 840px) {
	div#board div.board-item {
		margin: 2em;
	}
}


/************/
/* main-contact */

div#main-contact {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	
}


div#contact-container2 {
    border-radius: 0.25em;
    background-color: #6871ab;
    padding: 0.5em;
    margin: 0.1em;
    margin-bottom: 1em;
    box-shadow: 1px 1px 4px 2px rgba(0,0,0,.1);
    flex: 1 1 15em;
}

@media screen and (min-width : 840px) {
	div#contact-container2 {
		padding: 1em;
		margin: 1.5em;
		flex: 1 1 15em;
	}
}


div#contact-container2 * a {
	color: #444444;
	text-decoration: none;
	transition: 0.3s;
}

div#contact-container2 * a:hover {
	color: white;
	text-decoration: none;
}

/************/
/* contact form's items */


div#contact-container {
    border-radius: 0.25em;
    background-color: #6871ab;
    padding: 0.5em;
	margin: 0.1em;
    flex: 1 1 45em;
    
    box-shadow: 1px 1px 4px 2px rgba(0,0,0,.1);
}
@media screen and (min-width : 840px) {
	div#contact-container {
		padding: 1em;
		margin: 1.5em;
		flex: 1 1 45em;
	}
}

div.contact-item {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: flex-start;
	align-items: baseline;
}

div.contact-item label {
	flex: 1 1 15em;
}

div.contact-item input, select, textarea {
	flex: 1 1 30em;
}

div#contact-container form div#submit-pane {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;	
}

div#contact-container input[type=text], select, textarea {
	padding: 1em;
	border: thin solid #ccc;
	border-radius: 0.25em;
	margin-top: 0.5em;
	margin-bottom: 2em;
	resize: vertical;
}

div#contact-container textarea {
	height: 15em;
}

div#contact-container input[type=submit] {
    background-color: #6193bd;
    color: white;
    padding: 1em 1.5em;
    border: none;
    border-radius: 0.25em;
    cursor: pointer;
	transition: 0.3s;
	
	flex: 0 0 100%;
}

@media screen and (min-width : 840px) {
	div#contact-container input[type=submit] {
		flex: 0 0 12em;
	}
}

div#contact-container input[type=submit]:hover {
    background-color: LightSteelBlue;
}

div.em-center {
	display: flex;
	justify-content: center;
	justify-content: flex-start;
	align-items: center;
}

/************/