*{
	margin: 0px;
	box-sizing: border-box;
	color: rgb(233, 233, 233); /* fallback */
	border-color: rgb(99, 89, 81); /* fallback */
	font-family: Arial, Helvetica, sans-serif;
}


/* varables */
:root{
	/* brown */
	--primaryColor: rgb(46 37 33);
	--primaryColorTrans: rgba(46, 37, 33, 0.9);
	--secondColor: rgb(73, 61, 55);

	--fontLiteColor: rgb(228, 223, 218);
	--fontDarkColor: rgb(170, 170, 170);
	--borderColor: rgb(99, 89, 81);

	/* blue */
	--secondColor: rgb(10, 19, 28);
	--primaryColor: rgb(9, 27, 40);
	--primaryColorTrans: rgba(9, 27, 40, 0.9);
}

body{
	background-color: var(--primaryColor);
	min-width: 380px;
}

h1{
	text-decoration: underline;
	margin: 5px;
	text-align: center;
}
h2, h3, h4{
	margin: 5px;
	text-align: center;
	color: var(--fontDarkColor);
}
a{
	width: 100%;
	height: 100%;
	object-fit: fill;
	display: inline-block;
	text-decoration: none;
	color: var(--fontLiteColor);
	/* background-color: var(--secondColor); */
}
nav{
	padding: 0px;
	height: 50px;
	width: 100%;
	border-color: var(--borderColor);
	border-width: 0 0 1px 0;
	border-style: solid;
	position: fixed;
	top: 0;
	/* background-color: var(--primaryColor); */
	background-color: var(--primaryColorTrans);
	display: flex;
	line-height: 50px;
	min-width: 380px;
}
.nav-left{
	display: inline;
	width: 50%;
	text-align: left;
}
.nav-right{
	display: inline;
	width: 50%;
	text-align: right;
}
.nav-button{
	background-color: var(--secondColor);
	width: auto;
	height: 100%;
	padding: 0 15px;
	text-align: center;
	display: inline-block;
	border-style: solid;
	border-color: var(--borderColor);
	border-width: 0 1px;
}

hr{
	margin: 25px;
	height: 1px;
	background-color: var(--borderColor);
}

.head-pad{	padding: 55px 20px 0 20px ;}
.main-pad{
	/* border: 1px var(--borderColor) solid; */
	padding: 0 40px;
}

li{
	border: 1px grey solid;
	display: inline-block;
	margin: 15px;
	width: 220px;
	height: 180px;
	border-radius: 10px;
	padding: 20px;
	overflow-wrap: anywhere;
	vertical-align: top;
	background-color: var(--secondColor);
	box-shadow: #00000055 0px 0px 10px 2px;
}

footer{
	padding: 20px;
	text-align: center;
	/* margin: 20px; */
}
p{
	margin: 7px 0;
	font-size: 0.8em;
	color: var(--fontDarkColor);
	/* background-color: var(--secondColor); */
}

.tile-bg{
	background-size: 100% auto;
	background-position-x: right;
	background-position-y: bottom;
	background-repeat: no-repeat;
}

/* .bg-commo{
	background-image: url("./IMG/commo_bg2.png");
}
.bg-sauna{
	background-image: url("./IMG/sauna_bg1.png");
} */

ul{
	padding: 0;
}
.flex-row{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	/* align-content: space-between; */
	flex-wrap: wrap;
}


/* ie fallback */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	body,
	.nav-button{
		background-color: rgb(9, 27, 40);
	}
	.flex-row{
		justify-content: space-around;
	}
 }