body{

		p {
			cursor: default;
		}

		h1{
			cursor: default;
		}

					


					background:var(--lightBG);
					
					transition: 1s;

					overflow-x: hidden;



				}

				#backgroundColor{
					background-color: var(--darkBG) ;
					/*background-image: linear-gradient(to top, #151229, #1f1c51);*/
					background-size: 100%;
					/*background-image:  linear-gradient(to top, #101010, #2c2c3d);*/ /*1f1c51*/
					background-repeat:no-repeat;

					/*mix-blend-mode: screen;*/
					width: 100vw;
					height: 100dvh;
					position: fixed;
					opacity: 0;
					z-index: -10;
				}







				/*#backgroundVideo{
					object-fit: cover; 
					width:100%; 
					height: 100%; 
					top: 0px; 
					left: 0; 
					mix-blend-mode: screen;
					opacity: .25;
					

				}*/



				/*#backgroundColor::after{
					content: '';
					width: 100%;
					height: 100%;
					background-image:url("../Global/Images/StormProofLogoBG.png") ;
					background-size: 7%;
					position: absolute;
					filter: brightness(0) saturate(0%);
					opacity: .2;

					background-position:right 0px top 0px;
				}*/

			#spawnPageCont{

				box-sizing: border-box;
				max-width:100vw;
				height:100dvh;
				position: relative;
				
				display: grid;
				margin-bottom: 0;
				
				overflow: hidden;
				padding: .75vw;
				padding-bottom: -310px;

				transform: scale(1.25);
				transition-timing-function: cubic-bezier(.11,-0.01,.31,.98);
			}

						#stormsMask{
							width: 100%; 
							max-height: 100dvh; 
							border-radius: 25px; 
							overflow: hidden; 
							background: black;

						}

									#stormsCont{
							object-fit: cover;
							 width:100%; 
							 height: 100%; 
							 top: 0px; 
							 left: 0; 
							 position: relative; 
							 overflow:hidden; 
							 border-radius: 25px;
							padding:0;
							margin:0;
						}

						.storms{
							position: relative;
							display: none;
							
								

							
							min-width: 100%;
							min-height: 100%;

							left: 50%;
							transform: translateX(-50%);
							
						}

						#storms1{

						}


			#house{
				transform: translateY(-100%) translateX(0%); 
				top: 0; 
				position: relative; 
				width: 100vw; 
				z-index: 1; 
				left: 0;
				margin-bottom: 0;
				pointer-events: none;

				/*filter: brightness(0);*/
			}



			#sloganParentCont{
				pointer-events: none;
				position: absolute;
				right: 2vw;
				bottom: 4dvh;
				z-index: 1;


				
				text-align: right;
				
				height: 13rem;
				overflow: hidden;

				
				

			}



			.slogans{
				line-height: 1;
				color: #e7b568;
				display: block;
				position: relative;
				bottom: 0;
				font-family: impact;
				font-size: 6rem;
				font-weight: lighter;
				
				line-break: anywhere;
				padding:1vw;
				margin: 0;
				transform: translateY(0%) translateX(0%); 

				transition: 1.5s;
				transition-timing-function: cubic-bezier(.11,-0.01,.31,.98);
				
			}


				#openingInformation{
					max-width: 100vw;
					height: 80vh;
					position: relative;
					padding: 5rem;
					margin:var(--globalPadding);

					display: flex;
					flex-direction: column;
					justify-content: center;

					background: #15181f;
					border-radius: var(--globalRound);
					border: .5rem solid var(--yellowLettering);

					overflow: hidden;

					
				}


				#openingInformationCont{
					
					position: relative;
					/*outline: solid red 2px;*/
					left: 0;
					/*background: #110f16 ;*/
					border-radius: var(--globalRound);
					padding: calc( var(--globalPadding)*2);

					backdrop-filter: blur(.75rem);
					overflow: hidden;

					border-top: solid .25rem rgba(255, 255, 255, .7);
					border-bottom: solid .25rem rgba(0, 0, 0, .7);

					


				}

				#openingInformationCont::before{
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					background: #15181f;
					top: 0;
					left: 0;
					z-index: -1;
					opacity: .6;
					mix-blend-mode: multiply;
				}



					#openingSlide1Mask, #openingSlide2Mask, #openingSlide3Mask{
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
						overflow:hidden;

						transition: 1.5s;
						transition-timing-function: cubic-bezier(.11,-0.01,.31,.98);

						transform: skew(-10deg);

						padding: 0;
						margin: 0;

						display: flex;
						justify-content: center;

						/*filter: brightness(.7);*/
						outline: .5rem solid var(--yellowLettering);
					}

					#openingSlide1Mask{
						left: 66.66%;

						transition-delay: .2s;
					}
					#openingSlide2Mask{
						left: 33.33%;
						transition-delay: .1s;
					}
					#openingSlide3Mask{
						
					}




				
				.openingSlides{
					transform: skew(10deg) scale(1.2);
					min-height: 140%;
					
					margin: 0;
					padding: 0;
					
					

					bottom: 0;



					position: absolute;

					
					/*object-fit: cover;*/

					
				}					




				#openingTitle{
					color: white;
					
					margin: 0;
					font-family: 'Trebuchet MS', sans-serif;
					font-size: 2.5rem;

				}

				#openingBackground{
					position: absolute;
					min-width:100%;
					min-height: 150%;
					/*background: red;*/
					bottom: 0;
					left: 0;

					filter: brightness(.75);
				}
				#openingHeader{
					color: var(--blueLettering);
					margin: 5rem;
					margin: 0;
					max-width: 90%;
					font-size: 5rem;
					font-family: impact;
					font-weight: lighter;
					left: calc(var(--globalPadding)*2);
				}
				.openingHeaderHighlights{
					color: var(--yellowLettering);
					text-shadow: 0px 0px 5rem rgba(255, 255, 255, .25);
					z-index: 1;
				}

				#servicesBlock{
					width: 100%;
					display:flex;
					flex-wrap: wrap;
					gap:calc(var(--globalPadding)*2);

					/*justify-content: space-between;*/
					/*border:solid 1px red;*/
					
				}

				.serviceItems{
					color: whitesmoke;
					font-size: 2rem;
					font-family: impact;

					line-height: 0;


				}
				.serviceItemsBullet{
					color: var(--yellowLettering);
				}


			#mainContent{
				width: calc(100% -  var(--globalPadding)*2);
				
				position: relative;
				display: grid;
				
				grid-template-columns: 1fr 1fr 40% ;									/*Main Content grid setup*/
				grid-template-rows: .5fr .5fr 24rem ;
				padding: .75vw;
				grid-column-gap: calc(var(--globalPadding)*2) ;
				grid-row-gap: calc(var(--globalPadding)*2) ;






				
				
			}


			#profImageCont{
				
				

				
				border-radius: var(--globalRound);
				overflow: hidden;
				display: grid;
				justify-content: center;
				align-content: center;
				
				
				
				/*aspect-ratio: 1/1;*/

				grid-column-start: 3;
				grid-column-end: 4;
				grid-row-start: 1;
				grid-row-end: 3;

				display: flex;

				
			}

			#profImage{

				position: relative;
				
				flex-grow: 1;
				padding: 0;
				
				

				/*margin-top: -30%;
				margin-left: -7%;*/
			}



			#information1Cont{ 									/* Servicing */

				/*background: #3f4068;*/
				border-radius: var(--globalRound);
				
				text-align: right;
				justify-content: end;
				padding: 2rem;


				grid-column-start: 1;
				grid-column-end: 3;
				grid-row: 1 2;






				

				
			}

			#information1Header{
				position: static;
				display: inline;
				right: 0;
				

				padding-left: 5rem;
				/*transform: translateX(40%);*/
				font-family: impact;
				font-weight: lighter;
				font-size: 4.5rem;
				
				
				margin: 0;
				line-height: 1.1;
				color: var(--yellowLettering);
				mix-blend-mode: screen;
				
			}
			#locationScrollCont{
				position: static;
				transition-timing-function: cubic-bezier(.11,-0.01,.31,.98);\
				display: inline;

			}

			#locationsMask{
				
				height: 5rem;
				overflow: hidden;
			}

			.locations{
				font-size: 4.5rem;
				
				font-family: impact;
				font-weight: lighter;
				color: white;
				text-shadow: 0px 0px .5rem rgba(255, 255, 255, .25);
				padding: 0;
				margin: 0;
				line-height: 1.1;


			}

			#location1{
				margin-top: 0;

				

			}
			#location2{
				line-height: 1.2;
			}


			#infomation2Cont{   				/* About Us */
				
				position: relative;

				background: var(--blueLettering);
				padding: var(--globalPadding);
				border-radius: var(--globalRound);
				max-height: 100vh;

				grid-column-start: 1;
				grid-row-start: 2;
				grid-column-end: 3;
				grid-row-end: 3;

				







			}


			#information2Header{
				padding: var(--globalPadding);
				font-family: impact;
				font-size: 5rem;
				font-weight: lighter;
				color: var(--darkLettering);
				margin: 0;

				pointer-events: none;

			}
			#information2Paragraph{
				margin-left: var(--globalPadding);
				color: 151229;
				font-size: 1.3rem;
				font-family: 'Trebuchet MS', sans-serif;
				margin: 0;
				padding: 1vw;
				margin-top: -1rem;
				
				height: 100%;
				padding-right: 5rem;
				pointer-events: none;
			}



						#mainPageGallery{											/*gallery*/
						grid-column-start: 1;
						grid-row-start: 3;
						grid-column-end: 4;										
						grid-row-end: 4;
						/*background: #36354a;*/

						border-radius: var(--globalRound);
						overflow: hidden;
						padding: 0;
						margin: 0;

						position: relative;

						
						/*border: solid .25rem #293f61;*/


						}
						
						#mainPageGallery::after{
							content: '';
							position: absolute;
							height: 100%;
							width: 100%;
							margin: 0;
							background-image: linear-gradient(to right, #22222d, transparent , #22222d);
							top: 0;

							opacity: 1;
							mix-blend-mode: darken;
							

						}

						#floatingGalleryButton{
							position: absolute;
							z-index: 1;
							font-size: 4rem;
							font-family: impact;
							font-weight: lighter;
							color:var(--yellowLettering);
							
							padding: 0;
							margin: 0;

							transform: translateY(-50%);
							padding: calc(var(--globalPadding)*2);

							transition: .5s;
							transition-timing-function: ease-out;
							cursor: pointer;
							opacity: 0;


						}

						#floatingGalleryButton:hover{
							transition-timing-function: cubic-bezier(.21,0,.18,.99);
							color: white;
							filter: drop-shadow(-1.5rem .5rem rgba(0, 0, 0, .7));
							margin-left: 1.5rem;
							margin-top: -.5rem;
						}

						#floatingGalleryButton:hover #mainPageGallery:after{
							opacity: 1;
						}






						#galleryImageCont{
							padding: 0;
							margin: 0;
							/*max-height: 22rem;*/
							position: relative;
							
							left: 0;
							top: 0;
							display: inline-flex;

							filter:saturate(70%);

							
							
							/*mix-blend-mode: darken;*/

							
						}
						.galleryImages{
							height: 20rem;
							margin-top: 2rem;
							margin-left: 2rem;
							
							display: inline;
							filter:drop-shadow(-1rem 1rem 10px rgba(0, 0, 0, .2));

							border-radius: calc(var(--globalRound)/2);
							pointer-events: none;
							/*outline: solid .2rem rgba(255, 255, 255, .3);*/

							position:relative;



							
							
							/*filter: grayscale(70%);*/
							
							
						}


							#bottomBox{
								position: relative;
								display: flex;


								
								max-width: 100%;
								
								gap:calc( var(--globalPadding)*2);
								padding: var(--globalPadding);

								/*border:solid 2px white;*/

								transition: .5s;
								transition-timing-function: cubic-bezier(.21,0,.18,.99);

								margin-bottom:1vw;

								padding-bottom:10rem

								/*transform: scale(.95);*/
							}
							#gapRef{

								width: 1px;
								height: 1px;
								background: red;
								padding: 0;
								margin: 0;
								gap: 0;
							}

							#bbFirstColumn, #bbSecondColumn, #bbThirdColumn, #bbThirdColumnSub1, #bbThirdColumnSub2{
								/*margin: var(--globalPadding);*/
								
								display: flex;
								max-width: 33%;
								flex-direction: column;

								max-height: 100%;

								
								gap:calc( var(--globalPadding)*2);

								
								transition-timing-function: cubic-bezier(.21,0,.18,.99);
							}

							#bbThirdColumnSub1, #bbThirdColumnSub2{
								max-width: 100%;
							}

							#bbFirstColumn{
								transform: translateY(30%);
								transition: 1.5s;
								
							}
							#bbSecondColumn{
								transform: translateY(20%);
								transition: 1.5s;
								
							}
							#bbThirdColumn{
								transform: translateY(40%);
								transition: 1.5s;

							}


			#information3Cont{							/* quote tab */
				position: relative;
				display: inline-block;
				
				background: #29344a;
				border-radius: var(--globalRound);
				
				padding: calc( var(--globalPadding)*2.5);


				
			}
				#information3Cont::after, #information3Cont::before{
					--animBorderWidth:.15rem;

					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					
					top: 50%;
					left: 50%;
					translate: -50% -50%;
					z-index: -1;
					border-radius: calc( var(--globalRound) + calc(var(--animBorderWidth) /2));
					padding: var(--animBorderWidth) ;

					background-image: conic-gradient(from var(--spinAmount), var(--blueLettering) , #d93fff , var(--yellowLettering) );
				}
				#information3Cont::before{
						filter: blur(3rem);
							opacity: .5;
							z-index: -10;
				}

				#smallText{
					
					margin: 0;
					font-size: 1.75rem;
					font-family: 'Trebuchet MS', sans-serif;
					font-weight: bold;
					color: var(--yellowLettering);

				}
			.quoteTexts{
				display: inline;
				font-size: 6rem;
				font-family: impact;
				font-weight: lighter;
				color: var(--yellowLettering);
				


			}
			#touchCont{
				
				display: inline-block;
				position: relative;
				cursor: pointer;
			}


			#touchBase{
				position: relative;
				background: var(--blueLettering);
				padding-left: .75rem;
				padding-right: 1.5rem;
				border-radius: calc(var(--globalRound)/1.2);
				color: #192030;
				
				margin: 0;
				font-style: italic;
				transition: .3s;
				transition-timing-function: cubic-bezier(.21,0,.18,.99);

			}
			
			#touchDummy{

				color: #2c475e;
				position: absolute;
				display: inline;
				margin: 0;
				left: 0;
				font-style: italic;
				padding-left: .75rem;
				padding-right: 1.5rem;
				transition: .3s;
				transition-timing-function: cubic-bezier(.21,0,.18,.99);
			}

			#touchCont:hover #touchDummy{
				transform: translate(1rem, -.5rem);
				color: white;

			}






														/*Reviews*/

							#showMoreButton{
								text-align: center;
								font-family: impact;
								font-weight: lighter;

								color: var(--darkLettering);
								font-size: 2.25rem;
								position: absolute;
								bottom: 0;
								margin-bottom: 10vw;
								left: 50%;
								transform: translateX(-50%);
								
								
								background: var(--blueLettering);
								padding: .5rem;

								border-radius: 10px;

								cursor: pointer;
								z-index: 10;
							}


				.reviewBlocks{
					position: relative;
					/*background: #293f61;*/
					border-radius: var(--globalRound);
					padding: calc(var(--globalPadding)*2);
					display: inline;
					height: auto;
					border: solid .2rem var(--greenBorder);
					overflow: hidden;

					
				}	

				.reviewHeaders{
					font-size: 3rem;
					margin: 0;
					padding: 0;
					
					
					color: var(--yellowLettering);
					font-family: impact;
					font-weight: lighter;
					display: inline-block;

					

				}

				.reviewBlocks::before{  /*back colour (backmost background)*/
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					background: #293f61;
					z-index: -1;
					margin: 0;
					padding: 0;
					top: 0;
					left: 0;




				}

				.hiddenBlocks{
						display: none;
					}	

					.shownBlocks{
						display: inline;
					}

				.reviewParagraphs{
					color:#388dad;
					font-size: 1.5rem;
					
					font-family: 'Trebuchet MS', sans-serif;
					width: 100%;
					padding-top: 2rem;

					
					
				}
				.reviewParagraphs::before{ /*front color (topmost background)*/
					content: '';
					position: absolute;

					background-image: linear-gradient(to top, #221b25, #182645);/*linear-gradient(to top, #7b5ab9, #388dad)*/
					/*background: #388dad;*/
					width: 100%;
					height: 100%;
					
					margin-top: -2rem;
					left: 0;
					z-index: -1;
					border-radius: var(--globalRound);

					

					

				}

				.reviewRating{
					position: relative;
					text-align: right;
					font-size: 3rem;
					right: 0;
					top: 0;
					margin: 0;

					padding: var(--globalPadding);
					

					display: inline-block;
					color: var(--yellowLettering);
					line-height: .5;
				}

				#reviewBlock1{
					transform: translateY(0%);

				}													

				#reviewBlock2{
					transform: translateY(0%);
				}	

				#reviewBlock3{
					transform: translateY(0%);
				}	

				#reviewBlock4{
					transform: translateY(0%);
				}				



					#bottomInfo{
						position: fixed;
						display: inline-flex;
						

						background: #110f16;
						width: 100%;
						
						left: 0;

						justify-content: center;


						top: 100vh;
						transition: .5s;
						transition-timing-function: cubic-bezier(.21,0,.18,.99);

						border-radius: var(--globalRound);
						border-top:.25rem solid var(--greenBorder); /*#388dad*/

					}	

					#BICenterCont{
						position: relative;
						
						width:80% ;
						/*outline: red 2px solid;*/

						color: var(--yellowLettering);

						display: inline-flex;
						padding: 3rem;
					}				

					.BIColumns{
						/*outline: 2px solid white;*/
						width: 33%;

						text-align: center;
						padding: var(--globalPadding);
					}

					.BIHeaders{
						font-family: impact;
						font-weight: lighter;
						margin: 0;

						font-size: 2.5rem ;
					}

					.BIMenuButtons{
						color: var(--blueLettering);
							filter: grayscale(50%) brightness(.8);
							font-size: 2rem;
					}

					.BIMenuButtons:hover{
						color: white;
					}
					.BIPara{
						position: relative;
						line-height: 1;
						font-size: 1.5rem;
						color: var(--blueLettering);
						
						filter: grayscale(50%) brightness(.8);
						

						font-family: 'Trebuchet MS', sans-serif;
						font-weight: bold;

					}

					#BIColumn1{
						text-align: left;

					}

					#BIColumn3{
						text-align: right;
					}