/* Installations Chic Inc 2025 - Luc Beliveau */
/* Cascading style sheet for the Home Page */
/* Hero Page Containers */
@keyframes FadeInScaleAnimation {
	0% {
		opacity: 0;
		transform:translateX(-100px);
	}
	100% {
		opacity: 1;
		transform:translateX(0);
	}
}
@keyframes FadeInScaleAnimation2 {
	0% {
		opacity: 0;
		transform:translateX(-50px);
	}
	100% {
		opacity: 1;
		transform:translateX(0);
	}
}
#HeroPageFullWidth {
	height:clamp(400px, 35vw, 500px);
	width:100%;
	position:relative;
}
.HeroPageImages {
	position:absolute;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	Border-radius: 0% 0% 65% 0%;
	overflow:hidden;
}
#HPI1 {
	width:100%;
	height:100%;
}
#HPI1i {
	position:absolute;
	width:120%;
	height:120%;
	top:0;
	left:0;
	transform:translateX(0);
	background-image: url("photos/homepage1.jpeg");
	background-size:cover;
	background-position: 50% 45%;
	animation: HPIA1 21s ease infinite both;
	animation-timing-function: linear;
}
#HPI2 {
	width:100%;
	height:100%;
}
#HPI2i {
	position:absolute;
	width:120%;
	height:120%;
	opacity:0;
	top:0;
	left:0;
	transform: translateX(-15%);
	background-image: url("photos/homepage2.jpg");
	animation: HPIA2 21s ease infinite both;
	background-size:cover;
	background-position:center;
}
#HPI3 {
	width:100%;
	height:100%;
}
#HPI3i {
	position:absolute;
	width:120%;
	height:120%;
	top:0;
	left:-20%;
	transform: translateX(-15%);
	background-image: url("photos/homepage5.jpg");
	animation: HPIA3 21s ease infinite both;
	background-size:cover;
	background-position:top center;
}

@keyframes HPIA1 {
	0% {
	opacity:1;
	transform: translateX(0%); 
	}
	18% {
	opacity:1;
	}
	28% {
	opacity:0;
	}
	46% {
	transform: translateX(-5%); 
	opacity:0;
	}
	56% {
	transform: translateX(0%); 
	opacity:0;
	}
	90% {
	transform: translateX(1%); 
	opacity:0;
	}
	100% {
	transform: translateX(0%); 
	opacity:1;
	}
}
@keyframes HPIA2 {
	0% {
	opacity:0;
	transform: translateX(-15%); 
	}
	46% {
	opacity:0;
	}
	56% {
	opacity:1;
	}
	90% {
	opacity:1;
	}
	100% {
	opacity:0;
	transform: translateX(-5%); 
	}
}
@keyframes HPIA3 {
	0% {
	opacity:0;
	transform: translate(0%, 0%);
	}
	18% {
	opacity:0;
	}
	28% {
	opacity:1;
	}
	46% {
	opacity:1;
	}
	56% {
	opacity:0;
	}
	100% {
	opacity:0;
	transform: translate(5%,-10%);
	}
}
#HeroPageLimitedWidth {
	width:clamp(300px, 100%, 1280px);
	height:100%;
	margin: 0 auto 0 auto;
}
#HeroPagediv {
	margin:0;
	height:100%;
	width:100%;
	padding:0 15% 0 10%;
	padding-top:clamp(100px, 15%, 1000px);
}
#HeroPagedivInner {
	display:inline-block;
	margin:0;
	padding:0;
}
#HeroPagehp1 {
	opacity:0;
	animation: FadeInScaleAnimation ease-out 2s;
	animation-delay:0.2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
#HeroPagehp3 {
	opacity:0;
	animation: FadeInScaleAnimation ease-out 1.69s;
	animation-delay:1.2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
#HeroPageButton {
	opacity:0;
	animation: FadeInAnimation ease-out 1.69s;
	animation-delay:2.2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
#HeroPagediv h1 {
	font-family:Tahoma, Arial, Sans-serif;
	font-weight:normal;
	color:white;
	font-size:clamp(1.6em,3.5vw, 45px);
	text-shadow:0 0 15px black;
	padding:0;
	margin:0;
}
#HeroPagediv h4 {
	font-family:Tahoma, Arial, Sans-serif;
	color:white;
	font-size:clamp(12px,1.5vw, 20px);
	text-shadow:0 0 15px black;
}
#HeroPage1{
	line-height:1.3vw;
	padding:0;
	margin:0;
}
#HeroPage2 {
	text-align:right;
	line-height:1.3vw;
	padding:0;
	margin:0;
}
#HeroPageButton {
	margin:0;
	height:6vw;
	position:relative;
}
#HeroPageButtondiv {
	margin: 0;
	width:clamp(220px, 60%, 384px);
	text-align:center;
}
#HeroPageButtondiv a {
	color:white;
	background-color:#30603a;
	transition:background-color 0.5s, color 0.5s;
	border-radius:30px;
	display:block;
	padding:clamp(7px, 1vw, 15px);
	border-radius:30px;
	text-decoration:none;
	font-size:clamp(12px, 1.5vw, 18px);
}
#HeroPageButtondiv a:hover{
	background-color:white;
	color:#30603a;
}
/* Article Containers */
#HomePageFullWidth{
	width:100%;
	background-color:white;
	margin:0;
	padding:0;
}
#LimitedWidth{
	width:clamp(20px, 100%, 1280px);
	background-color:white;
	margin-right:auto;
	margin-left:auto;
	position:relative;
}
/* Home Page Article 1 */
#Article1{
	padding: 15px 15px 0 15px;
	margin:0;
	text-align:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
}
#Article1 h2 {
	font-family:Tahoma, Arial, Sans-serif;
	font-size:clamp(20px,2vw, 24px);
}
/* Home Page Article 2 */
#Article2 {
	width:100%;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
}
/* Article 2 F */
.A2F {
	padding:15px;
	flex:1 1 0;
	margin:0 auto 0 auto;
}
#A2F1 {
	background-image:url('photos/plan.png');
	background-color:rgba(255,255,255,0.9);
	background-blend-mode:overlay;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
#A2F2 {
	background-image:url('photos/drill.png');
	background-color:rgba(255,255,255,0.9);
	background-blend-mode:overlay;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
#A2F3 {
	background-image:url('photos/broom.png');
	background-color:rgba(255,255,255,0.9);
	background-blend-mode:overlay;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
.A2F img {
	width:69px;
	height:69px;
	display:none;
}
.A2F h4 {
	font-size:1.1em;
	line-height:69px;
	font-family:arial;
	text-align:center;
	margin:auto;
}
.A2F p {
	font-size:1em;
	display:block;
	width:270px;
	margin:auto;
	padding:15px;
	text-align:center;
}
.A2Fh {
	display:block;
	height:69px;
	width:300px;
	padding:15px;
	margin:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
}
/* Home Page Article 3 */
#Article3 {
	width:100%;
	padding:15px;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
}
/* Article 3 Part One */
#A3part1{
	flex:3 1 0;
	margin:5px;
	padding:0;
	min-width:60%;
	background-color:#ECECEC;
	border-radius:30px;
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
}
#A3part1 h2 {
	color:#30603a;
	font-family:arial, sans-serif;
	margin: 0 auto 1.5em 20px;
}
#A3part1 ul {
	margin:0 0 0 20px;
	padding:0;
}
#A3part1 li {
	line-height:1.2em;
	padding:.69em 0 .69em 0;
}
#A3p1F1 {
	min-width:100%;
	padding:25px 25px 0 25px;
}
#A3p1F2 {
	min-width:100%;
	display:flex;
	flex-direction:row-reverse;
}
#A3p1F2ul {
	flex:1 1 0;
	max-width:60%;
	padding:0 0 25px 25px;
}
#A3p1F2Button {
	width:14em;
	text-align:center;
	margin:15px 15px 0 auto;
}
#A3p1F2Button a {
	background-color:#30603a;
	transition:background-color 0.2s, color 0.2s;
	border-radius:30px;
	display:block;
	padding:0.5em;
	border-radius:30px;
	color:white;
	text-decoration:none;
	font-size:1em;
}
#A3p1F2Button a:hover{
	background-color:white;
	color:black;
}
#A3p1F2img {
	flex:1 1 0;
	margin:auto 0 75px auto;
	max-width:245px;
	width:245px;
	height:220px;
	background-image:url('photos/cabinet.png');
	background-size:245px 245px;
	background-repeat:none;
	background-position:bottom left;
}
/* Article 3 Part Two */
#A3part2{
	flex:1 1 0;
	margin:5px;
	padding:0;
	min-width:200px;
	min-height:369px;
	background-color:#2E486D;
	border-radius:30px;
	background-image:url('photos/bathroom.png');
	background-size:690px 690px;
	background-repeat:no-repeat;
	background-position:bottom center;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
}
#A3part2 h3 {
	color:white;
	margin:0;
	padding:50px 20px 20px 20px;
}
#A3part2 h4 {
	color:#DDDCD7;
	margin:0;
	padding:0 20px 20px 20px;
}
#A3part2div {
	vertical-align:middle;
}
#A3part2Button {
	width:5em;
	text-align:center;
	margin:0 auto auto auto;
}
#A3part2Button a {
	background-color:white;
	transition:background-color 0.2s, color 0.2s;
	border-radius:30px;
	display:block;
	padding:0.5em;
	border-radius:30px;
	color:black;
	text-decoration:none;
	font-size:1em;
}
#A3part2Button a:hover{
	background-color:rgba(62, 84, 133);
	color:white;
}
/* Article 3 Part Three */
#A3part3 {
	flex:1 1 0;
	margin:0;
	padding:0;
	min-width:200px;
	display:flex;
	flex-flow: row wrap;
	justify-content:center;
}
#A3part3 ul {
	padding:0;
	margin:0;
	list-style:none;
}
#A3part3 li {
	padding:0;
	margin:0;
}
/* 3 Part Two inner1 F1 */
#A3p3F1 {
	background-image:url('photos/drywall.png');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top;
	border-radius:30px;
	flex:1 1 0;
	margin:5px;
	padding:25px 25px 0 25px;
	max-width:250px;
}
#A3p3F1 h3 {
	padding:0;
	margin:0;
}
#A3p3F1 h4 {
	padding:15px 0 0 0;
	margin:0;
	color:grey;
}
#A3p3F1Button {
	width:2.5em;
	text-align:center;
	margin:auto 0 15px auto;
}
#A3p3F1Button a {
	height:2em;
	width:2em;
	line-height:2em;
	background-color:grey;
	transition:background-color 0.2s, color 0.2s;
	border-radius:30px;
	display:block;
	padding:0.5em;
	border-radius:30px;
	color:white;
	text-decoration:none;
	font-weight:bold;
	font-size:1em;
}
#A3p3F1Button a:hover{
	background-color:black;
	color:white;
}
/* 3 Part Two inner1 F2 */
#A3p3F2 {
	background-image:url('photos/phone.png');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:bottom;
	border-radius:30px;
	flex:1 1 0;
	margin:5px; 
	padding:25px;
	max-width:250px;
}
#A3p3F2 h3 {
	padding:0;
	margin:0;
	color:white;
}
#A3p3F2 h4 {
	padding:15px 0 0 0;
	margin:0;
	color:lightgrey;
}
#A3p3F2Button {
	width:2.5em;
	text-align:center;
	margin:15px auto 15px 0;
}
#A3p3F2Button a {
	height:2em;
	width:2em;
	line-height:2em;
	background-color:lightgrey;
	transition:background-color 0.2s, color 0.2s;
	border-radius:30px;
	display:block;
	padding:0.5em;
	border-radius:30px;
	color:white;
	text-decoration:none;
	font-weight:bold;
	font-size:1em;
}
#A3p3F2Button a:hover{
	background-color:white;
	color:black;
}
/*Home Page Article 4 */
.Article4{
	padding: 15px;
	text-align:center;
}
.Article4 h2 {
	font-size:clamp(18px,2vw, 24px);
	font-family: Tahoma, Arial, Sans-Serif;
}
/*Home Page Article 5 */
#Article5 {
	width:100%;
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
}
/* Article 5 F */
.A5Fx {
	padding:0;
	margin:auto;
	width:250px;
	height:250px;
}
.A5F {
	padding:0;
	margin:5px;
	border-radius:50%;
	border:1px solid lightgrey;
	aspect-ratio:1/1;
	text-align:left;
	margin:5px;
	width:240px;
	display:flex;
	flex-direction:column;
	margin:auto;
}
.A5Fp {
	max-width:250px;
	margin:auto;
	display:flex;
	padding:0;
}
.A5Fp p {
	font-size:0.9em;
	margin:0 auto 0 auto;
	padding: 45px 45px 0 45px;
}	
.A5Fh {
	width:100%;
	height:3em;
	display:flex;
	flex-direction:row;
	justify-content:center;
	margin:15px 0 25px 0;
}
.A5Fh p {
	padding:0 0 0 10px;
	margin:0;
	text-align:left;
	font-weight:bold;
	font-size:0.9em;
	line-height:1em;
}
.A5Fhimg {
	height:2.5em;
	min-width:2.5em;
	margin:auto 0 auto 0;
	background-image:url('photos/profile.png');
	background-size:cover;
}
.A5Fhdiv {
	margin:auto 0 auto 0;
	padding:0;
	height:2em;
}
.A5Fhspan {
	font-weight:normal;
	font-size:0.8em;
	line-height:0.8em;
	color:#56b069;
}
/*Home Page Article 6 */
#Article6{
	padding: 15px;
	text-align:center;
}
#Article6 h2 {
	font-size:clamp(18px,2vw, 24px);
	font-family: Tahoma, Arial, Sans-Serif;
}
/* Home Page Article 7 */
#Article7{
	padding: 15px;
	margin:27px 0 0 0;
	text-align:right;
}
#A7i {
	max-width:750px;
	margin:auto;
}
#A7ii {
	text-align:center;
}
#Article7 h2 {
	margin:0;
	padding:0;
	font-size:clamp(26px,2.3vw, 28px);
	font-family:MilkyWeek;
	color:grey;
}
.A7span1 {
	color:#30603a;
}
.A7span2 {
	color:darkblue;
}
#A7i a {
	color:darkblue;
	text-decoration:none;
}
#A7i a:visited {
	color:darkblue;
}
#A7i a:active {
	color: lightgrey;
}
#A7i a:hover {
	color:darkblue;
	opacity:0.69;
}
#CArticle4 {
	margin:0;
	padding:5px;
	width:100%;
	display:flex;
	flex-flow:row wrap;
}
#CA4Header {
	flex:3 1 0;
	min-width:250px;
	padding:15px;
	margin:5px;
	border-radius:30px;
}
#CA4Header a {
	color:darkblue;
	text-decoration:none;
}
#CA4Header a:visited {
	color:darkblue;
}
#CA4Header a:active {
	color:grey;
}
#CArticle4 h4{
	color:#30603a;
	font-family: arial, sans-serif;
	font-weight:bold;
	font-size:clamp(14px,3vw,26px);
	padding:0;
	margin:0;
	text-align:center;
}
#CArticle4 h5{
	color:black;
	font-family: arial, sans-serif;
	font-weight:bold;
	font-size:clamp(12px,1vw,16px);
	padding:15px;
	margin:0;
	text-align:center;
}
#CA4LogoBut {
	flex:2 1 0;
	min-width:300px;
}
#SPButton {
	margin:0;
	height:6vw;
	position:relative;
}
#SPButtondiv {
	margin: 0 auto 0 auto;
	width:clamp(220px, 60%, 384px);
	text-align:center;
}
#SPButtondiv a {
	color:white;
	background-color:#30603a;
	transition:background-color 0.5s, color 0.5s;
	border-radius:30px;
	display:block;
	padding:clamp(7px, 1vw, 15px);
	border-radius:30px;
	text-decoration:none;
	font-size:clamp(12px, 1.5vw, 18px);
}
#SPButtondiv a:hover{
	background-color:#ECECEC;
	color:#30603a;
}
#PPLogoBox{
	aspect-ratio: 2 / 1;
	min-width:240px;
	max-width:416px;
	flex:1 1 0;
	margin:auto;
	padding:20px;
	position:relative;
}
#PPLogo{
	border-radius:30px;
	background-image:url('photos/hplogo.png');
	background-repeat:no-repeat;
	background-position:center;
	background-size:100%;
	width:100%;
	height:100%;
	transition:opacity 0.5s;
}
#PPLogo:hover{
	opacity:0.75;
}
#PPLogo a {
	display:block;
	width:100%;
	height:100%;
}