/* Installations Chic Inc 2025 - Luc Beliveau */
/* Cascading style sheet for the Top Menu */
/* Top Menu Containers */
.TopMenuFullWidth {
	background:white;
	box-shadow: 0 0 5px black;
	display:flex;
	position:fixed;
	top:0;
	left:0;
	width:clamp(300px, 100vw, 100%);
	height:45px;
	z-index:100;
	opacity:1;
	margin:0;
	padding:0;
	transition:height 1s;
}
.TMLimitedWidth {
	width:clamp(300px, 100%, 1280px);
	height:100%;
	margin:auto;
	display:flex;
	flex-wrap:nowrap;
	flex-direction:row;
}
/* TMLogo is the logo on the top left */
.TMLogo {
	height:clamp(30px, 100%, 100px);
	aspect-ratio: 2 / 1;
	float:left;
	margin:auto 0 auto 10px;
	padding:0;
	background-image:url('photos/toplogo.png');
	background-size:contain;
	background-repeat:no-repeat;
	opacity:1;
	transition:opacity 0.2s, height 1s;
	z-index:1500;
}
.TMLogo:hover{
	opacity:0.6;
}
.TMLogo a {
	display:block;
	width:100%;
	height:100%;
}
/* TMul is the Unordered list containing the Top Menu Links for Navigation */
.TMul{
	list-style:none;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	display:flex;
	flex-wrap:nowrap;
	flex-direction:row;
}
/* The following place and seperate the links in the unordered list */
.TMBlankSpaceBefore {
	height:100%;
	flex:1 1 0;
}
.TMSeperator {
	display:block;
	background-color:black;
	width:1px;
	height:25px;
	margin:auto 0 auto 0;
	padding:0;
}
.TMBlankSpaceAfter {
	height:100%;
	flex:1 1 0;
	max-width:15px;
}
/* TMli are the navigation links in the top menu */
.TMli {
	flex:1 1 0;
	max-width:150px;
	min-width:47px;
	text-align:center;
	line-height:45px;
	display:inline-block;
	position:relative;
	transform:translateX(0);
	transition:transform 1s;
}
.TMli a {
	display:block;
	font-size:12px;
	font-family:Arial, sans-serif;
	text-decoration:none;
	color:#30603a;
	transition:background-color 0.2s;
}
.TMli a:hover {
	background-color:rgb(189, 189, 189,0.3);
}
.TMli a:active {
	color:#FFFFFF;
}
.TMli a:visited {
	color:#30603a;
}
/* Unique Dropdown customization */
.TMli label {
	cursor:pointer;
	display:block;
	font-size:12px;
	font-family:Arial, sans-serif;
	text-decoration:none;
	color:#30603a;
	transition:background-color 0.2s;
}
.TMli label:hover {
	background-color:rgb(189, 189, 189,0.3);
}
#TMliServices {
	display:none;
}
#TMliServices:checked ~ .TMDrop {
	height:auto;
	max-height:500px;
	transition:all 0.5s;
}
.TMDrop {
    width: 100%;
    position: absolute;
    z-index: 999;
	padding:0;
	margin:0;
	background-color:white;
	height:0;
	max-height:0;
	overflow:hidden;
	transition:all 3s;
	box-shadow: 0 5px 5px rgba(0,0,0,0.3);
}
.TMDrop li {
	display:block;
	padding:0;
	margin:0;
	width:100%;
}
.TMDrop li a {
	display:block;
	font-size:12px;
	font-family:Arial, sans-serif;
	text-decoration:none;
	color:#30603a;
	transition:background-color 0.2s;
}
.TMDrop li a:hover {
	background-color:rgb(189, 189, 189,0.3);
}
.TMDrop li a:active {
	color:#FFFFFF;
}
.TMDrop li a:visited {
	color:#30603a;
}

#FullDropDownMenu{
	visibility:hidden;
	height:100%;
	width:100%;
	position:fixed;
	background-color:rgba(255,255,255);
	opacity:0;
	top:0;
	left:0;
	z-index:20;
	cursor:default;
	transition: all ease 0.5s;
	display:flex;
	flex-flow: column wrap;
	justify-content:center;
}
#FDDMi {
	transition: transform ease 0.69s;
	transform:translateY(-10%);
	height:300px;
}
#FullDropDownMenu ul{
	text-align:center;
	list-style:none;
	margin:0;
	padding:0;
}
#FullDropDownMenu a{
	color:#30603a;
	font-size:1.5em;
	text-decoration:none;
	font-family: Tahoma,Arial, Sans-serif;
	line-height:1.75em;
	
}
#FullDropDownMenu label{
	color:#30603a;
	font-size:1.5em;
	text-decoration:none;
	font-family: Tahoma,Arial, Sans-serif;
	line-height:1.75em;
	cursor:pointer;
	
}
#FullDropDownMenu a:visited{
	color:#30603a;
}
#FullDropDownMenu a:hover{
	color:black;
}
#FullDropDownMenu a:active{
	color:lightgrey;
}
#MobileServices {
	display:none;
}
#MobileServices:checked ~ #MobileDropDiv .MobileDrop {
	height:auto;
	max-height:500px;
	transition:all 1s;
}
#MobileDropLine{
	display:block;
	width:1px;
	height:96%;
	background-color:#30603a;
}
#MobileDropDiv {
	width:169px;
	margin:auto;
	display:flex;
	flex-direction:row nowrap;
	justify-content:right;
}
.MobileDrop {
    z-index: 999;
	padding:0;
	margin:0;
	height:0;
	max-height:0;
	overflow:hidden;
	transition:all 3s;
}
.MobileDrop li {
	display:block;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}
.MobileDrop li a {
	display:block;
	font-size:12px;
	font-family:Arial, sans-serif;
	text-decoration:none;
	color:#30603a;
	transition:background-color 0.2s;
	padding-left:30px;
}
.MobileDrop li a:active {
	color:#FFFFFF;
}
.MobileDrop li a:visited {
	color:#30603a;
}
#menubutton:checked ~ #FullDropDownMenu{
    visibility:visible;
	transition:opacity ease 0.5s;
	opacity:1;
}
#menubutton:checked ~ #FullDropDownMenu #FDDMi{
	transform:translateY(0);
}

:root {
	--bar-bg: #212529;
}
@keyframes hamburgerpulse {
	0% {
	}
	100% {
	}
}
@keyframes hamburgershake {
	0% {
	}
	10% {
		transform:rotate(720deg);
	}
	20% {
		transform:rotate(720deg);
	}
	100% {
		transform:rotate(720deg);
	}
}
.menu-icon {
	position: relative;
	width: 100px;
	height: 169px;
	cursor: pointer;
	border-radius:50%;
	animation: hamburgerpulse 10s ease infinite both;
	transition:height 1s;

	.menu-icon__cheeckbox {
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
		cursor: pointer;
		z-index: 1000;
		-webkit-touch-callout: none;
		position: absolute;
		opacity: 0;
	}
	#menudiv {
		margin: auto;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		width: 22px;
		height: 12px;
		animation: hamburgershake 10s ease infinite both;
		z-index:999;
	}
	span {
		position: absolute;
		display: block;
		width: 100%;
		height: 2px;
		background-color: var(--bar-bg, #000);
		border-radius: 1px;
		transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);

		&:first-of-type {
			top: 0;
		}
		&:last-of-type {
			bottom: 0;
		}
	}
	&.active,
	.menu-icon__cheeckbox:checked + div {
		span {
			&:first-of-type {
				transform: rotate(45deg);
				top: 5px;
			}
			&:last-of-type {
				transform: rotate(-45deg);
				bottom: 5px;
			}
		}
	}

}
@media only screen and (min-width: 569px) {
	.menu-icon {
		display:none;
	}
	.TopMenuFullWidth {
		height:45px;
	}
	.PageFullWidth{
		margin-top:45px;
	}
}
@media only screen and (max-width: 568px) {
	.TMli {
		display:none;
		transform:translateX(-100%);
	}
	.TopMenuFullWidth {
		height:169px;
	}
	.PageFullWidth{
		margin-top:169px;
	}
}