/*--------SAFE DRYERS CSS------*/

/*-------COPYRIGHT ETHAN CAMPBELL PENDING------*/
/*-------COPYRIGHT CAMPBELL CREATIVE COMPANY PENDING------*/


* {
	box-sizing: border-box;
}

html, body{
	margin: 0;
	padding: 0;
	/* background-color: #000000; */
	width: 100%;
	box-sizing: border-box;
	z-index: 0;
	}

#container{
	/* background-color: #000000; */
	position: relative;
	max-width: 1800px;
	margin: 0 auto;
}

/*-------link styles-----*/

a:link{
 	color:#40c5f3;
 	text-decoration: none;

 }

 a:visited{
	color:#40c5f3;
}

a:hover{
	/* opacity:0.7; */
	animation-name: hoverLink;
  	animation-duration: 5s;
  	animation-iteration-count: infinite;
  	animation-timing-function: linear;
  	color:#ffffff;


}

a:active{
	color:#bf0e30;
}

a:foot{
	color: #ffffff;
}

/*----HEADER BEGIN---*/

.header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	position: fixed;
	z-index: 999999999999;
	background-color: #000000e0;
	width: 100%;
	max-width: 1800px;
	height: 150px;
	padding: 20px 50px;
	-webkit-transition: all ease;
  	-moz-transition: all ease;
  	-o-transition: all ease;
  	transition: all ease;
}

.header.sticky{
	position: fixed;
	z-index: 999999999999;
	background-color: #000000e0;
	width: 100%;
	height: 90px;
	-webkit-transition: all ease;
  	-moz-transition: all ease;
  	-o-transition: all ease;
  	transition: all ease;
}

	.headerLogo{
		width: 300px;
		display: block;
	}

	.headerLogo.sticky{
		
		width: 180px;
	}


/*--MOBILE NAVIGATION STYLES-----*/

.navContainer {
    font-family: bicyclette, sans-serif;
    z-index: 99999999999999;
}

	.sidenav {
	    height: 100%;
	    width: 300px;
		translate: 100%;
	    position: fixed;
	    top: 0;
	    right: 0;
	  	background-color:#000000;
	    overflow-x: hidden;
	    transition: 0.5s;
		
	    padding-top: 60px;
	    z-index: 99999999999999;
	    opacity: 0.90;
	    text-align: center;
	}

	.sidenav a {
	    padding: 8px 8px 8px 32px;
	    text-decoration: none;
	    font-size: 20px;
	    color: #ffffff;
	    display: block;
	    transition: 0.3s;
	    z-index: 99999999999999;
	}

	.sidenav a:hover {
	    color: #f1f1f1;
	}

	.mobFoot{
		font-family: 'bicyclette';
		color:#ffffff;
	}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

	.mobileButton{
		position: relative;
		z-index: 999999999999999999;
		display: none;
		cursor: pointer;
	}
	.mobileButton img {
		display: block;
	}
		.mobileButton:hover{
		scale: 1.1;
	}

	.mobileExit{
		top:25px;
		right: 25px;
		position: absolute;
		width: 40px;
		height: 40px;
		border-width: 1px;
		border-style: bold;
		border-radius: 10px;

	}

	.mobileExit:hover{
		opacity: 0.95;
		background-color: #40c5f3;
	}

	.mobileBrick{
		/* float: right; */
		width: 80%;
		font-size: 1.2em;
		text-align: left;
		border-bottom-color: #ffffff;
		border-bottom-style: solid;
		border-width: 2px;
		font-family: bicyclette;


	}

/*------Main Navigation----*/

.nav{
		font-size: 1.6em;
		width: 80%;
		max-width: 800px;
		font-family: bicyclette , sans-serif;
		font-weight: 500;
		display: flex;
		justify-content: space-between;
		align-items: center;

}

.nav.sticky{
		font-size: 1.4em;
		width: 80%;
		font-family: bicyclette , sans-serif;
		font-weight: 500;
		
}

.nav.sticky svg {
    scale: 0.9;
}

		.link {
		  /* width: 25%; */
		  text-align: center;
		  position: relative;
		  /* cursor: pointer; */
		  transition: 500ms ease;
		 
		}
	
		.nav a:hover{
		  color: #40c5f3;

		}

		.link_contact {
		  /* width: 25%; */
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  text-align: center;
		  position: relative;
		  cursor: pointer;
		  transition: 500ms ease;
		  border-top-right-radius: 10px;
		  gap: 20px;

		}
		.link_contact img {
			width: 40px;
			object-fit: contain;
		}
		.link_contact .txt-icon {
			width: 40px;
		}
		.linkTxt{
			color: #fff;
		
		}
		.link_contact .linkTxt {
			font-size: 0.9em;
			line-height: 1.1em;
		}
		.linkTxt:hover {
			color: #40c5f3;
			/* border-bottom: #40c5f3 1px solid; */
		}


/*------Covid Warning------*/

.covid {
	position: absolute;
	width: 100%;
	height: 30px;
	background-color: #e3da36;
	top:150px;
	text-align: center;
	font-family: bicyclette, sans-serif;
	font-size: 110%;
	padding-top: 5px;
}
.covid.sticky{
	top: 110px;
	height: 25px;
}

.health-msg-div{
	position: absolute;
	width: 100%;
	background-color: #e3da36;
	top:150px;
	text-align: center;
	font-family: bicyclette, sans-serif;
	font-size: 120%;
	padding-top: 5px;
	padding-inline: 20px;
	z-index: 1000000000;
}
/*----COVER SLIDESHOW BEGIN------*/

#slideShow{
	width: 100%;
	position: relative;
	height: 50vw;
    min-height: 700px;
    max-height: 900px;
	background-image: url(van5.jpg);
	background-size: 100%;
	/* background-attachment: fixed; */
	background-repeat: no-repeat;
	background-position: center 40%;
	  /*----CHANGE FOR MOBILE------*/
}

	span.sched{
		z-index: 10000000;
		position: absolute;
		width: 60%;
		max-width: 470px;
		right:0px;
		bottom: 0;
		background-color:#40c5f3;
		/* margin-top: 15%; */
		opacity: 0.95;
		font-family: bicyclette, sans-serif;
		padding: 40px 50px;
		border-bottom-left-radius: 15px;
		border-top-left-radius: 15px;
       
	}

	p.sched_title{
		width: 100%;
		text-align: center;
		font-size: 200%;
		font-weight: 600;
		margin: 0;
		line-height: 1.1em;

	}

	.input_form{

	margin-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	}


.elem-group {
	margin: 0;
	width: 100%;
}
.elem-group input {
	height: 35px;
	padding: 5px;
}
input::placeholder {
	

}
.elem-group [type=text] {

  border: #000 1px solid;
  background-color: #ffffff;
 font-family: bicyclette, sans-serif;
 width: 100%;
 font-size: 1.1em;
 outline: none;
 border-radius: 5px;
 font-weight: 300;


}


.elem-group [type=email] {

border: #000 1px solid;
background-color: #ffffff;
 font-family: bicyclette, sans-serif;
 width: 100%;
 font-size: 1.1em;
 outline: none;
 border-radius: 5px;
 font-weight: 300;
 
}


.elem-group[type=text]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  opacity: 0.8; /* Firefox */
}

.elem-group[type=text]:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: black;
}

.elem-group[type=text]::-ms-input-placeholder { /* Microsoft Edge */
  color: black;
}


.elem-group2{
	/* margin-top: 4%; */
	margin: 0 auto;
	width: 100%;
}
textarea.comment_area{
	width: 100%;
  height: 80px;
  padding: 5px;
  box-sizing: border-box;
	border: 1px solid black;
  border-radius: 5px;
  background-color: #ffffff;
  resize: none;
  font-size: 1.1em;
  font-family: bicyclette, sans-serif;
  outline: none;
   font-weight: 300;
   
}

textarea.comment_area::placeholder{
	color: black;
  opacity: 0.8; /* Firefox */

}

button{
  background-color: #0b5376;
  border: none;
  color: white;
  padding: 15px 30px;
  text-decoration: none;
  cursor: pointer;
  width: 200px;
  font-family: bicyclette, sans-serif;
  font-size: 1.2em;
  border-radius: 5px;
}
button:hover {
  background-color: #1d6082;
}


/*------- ABOUT SERVICES START---------*/

#about_main{
	width: 100%;
	max-width: 1800px;
	color:#000000;
	background-color: #ffffff;
	padding: 70px;
	margin: 0 auto;
}

	.about_title{
		width: 100%;
		text-align: center;
		font-family: bicyclette, sans-serif;
		font-size: 400%;
		font-weight: 700;
		color:#40c5f3;
		margin: 0;
		margin-bottom: 40px;
	}
	.about-container {
		display: flex;
		gap: 50px;
		justify-content: center;
		/* align-items: center; */
	}
		h3{
			font-family: bicyclette, sans-serif;
			font-weight: 700;
			font-style: normal;
			font-size: 30px;
			text-align: center;

		}

			.about_block_full{
				max-width: 700px;
				font-family: bicyclette, sans-serif;
				font-weight: 300;
				font-style: normal;
				font-size: 1.3em;
				text-align: center;
				margin: 0 auto;
				margin-bottom: 30px;
			}

		h4{
			font-family: bicyclette, sans-serif;
			font-weight: 700;
			font-style: normal;
			font-size: 30px;
			text-align: center;

		}

			.about_block{
				width: 35%;
				font-family: bicyclette, sans-serif;
				font-weight: 300;
				font-style: normal;
				font-size: 1.3em;
				text-align: center;
			}


#faq{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	background-color: #f5f5f5;
	padding: 70px;
}

	.faq_title{
		width: 100%;
		font-family: bicyclette, sans-serif;
		font-size: 300%;
		font-weight: 700;
		margin: 0;
		text-align: center;
	}
	.faq_title span {
		color: #40c5f3;
	}
	.faq_block{
		width: 80%;
		margin-top: 30px;

	}

	.faq_icon{

	}

	.faq_txt{
		font-family: bicyclette, sans-serif;
		font-size: 150%;
		margin-top: 10px;
	}





/*------BEFORE AFTER SLIDER-----*/
#comp_block{
width: 100%;
display: flex;
/* flex-flow:row wrap; */
justify-content: center;
text-align: center;
padding: 70px 50px;

}

	.comp_text{
		float: left;
		margin-top: 20%;
		font-family: bicyclette, sans-serif;
		text-align: center;
		width: 20%;
		font-size: 300%;
		color:#40c5f3;
		font-weight: 700;
	}
	.comp_text span {
		color: #000000;
	}

	.mobileCompTxt{

		float: left;
		margin-top: 20%;
		font-family: bicyclette, sans-serif;
		text-align: center;
		width: 100%;
		font-size: 300%;
		color:#40c5f3;
		font-weight: 700;
		display: none;

	}

.comp_contain{ 
 height: 73.5vw;
 margin: 1vw auto;
 max-height: 787px;
 max-width: 800px;
 overflow: hidden;
 width: 98%;
 border-radius: 49%;
}
	.comp_contain figure { 
	 background-image: url(images/after.jpg);
	 background-size: cover;
	 font-size: 0;
	 height: 100%;
	 margin: 0; 
	 position: relative;
	 width: 100%; 
	}
		#compare {
		 background-image: url(images/before.jpg);
		 background-size: cover;
		 bottom: 0;
		 border-right: 5px solid rgba(255,255,255,0.7);
		 box-shadow: 10px 0 15px -13px #000;
		 height: 100%;
		 max-width: 98.6%;
		 min-width: 0.6%;
		 overflow: visible;
		 position: absolute;
		 width: 50%; 
		 animation: first 2s 1 normal ease-in-out 0.1s; 
		 -webkit-animation: first 2s 1 normal ease-in-out 0.1s; 
		}
		input#slider {
		 -moz-appearance: none;
		 -webkit-appearance: none;
		 border: none; 
		 background: transparent;
		 cursor: col-resize;
		 height: 100vw;
		 left: 0;
		 margin: 0;
		 outline: none; 
		 padding: 0;
		 position: relative;
		 top: -100vw;
		 width: 100%;
		}
		input#slider::-moz-range-track { 
		 background: transparent; 
		}
		input#slider::-ms-track {
		 border: none; 
		 background-color: transparent;
		 height: 100vw; 
		 left: 0; 
		 outline: none; 
		 position: relative;
		 top: -100vw; 
		 width: 100%;
		 margin: 0;
		 padding: 0;
		 cursor: col-resize;
		 color:transparent;
		}
		input#slider::-ms-fill-lower {
		 background-color:transparent;
		}
		input#slider::-webkit-slider-thumb {
		 -webkit-appearance:none;
		 height: 100vw;
		 width: 0.5%;
		 opacity: 0;
		}
		input#slider::-moz-range-thumb {
		 -moz-appearance: none;
		 height: 100vw;
		 width: 0.5%;
		 opacity: 0;
		}   
		input#slider::-ms-thumb {
		 height: 100vw;
		 width: 0.5%; 
		 opacity:0;
		}
		input#slider::-ms-tooltip {
		 display:none;
		}

	#compare::before {
	 background: url(https://webdevtrick.com/wp-content/uploads/comparision.png) no-repeat scroll 0 center transparent;
	 background-size:contain;
	 content: " ";
	 float: right;
	 height: 100%;
	 margin-right: -34px;
	 position: relative;
	 top:0;
	 width: 64px;
	}

		@keyframes first {
		  0% {width: 0%; }
		  50% {width: 80%; }
		  100% {width: 50%; }
		}
		@-webkit-keyframes first {
		  0% {width: 0%; }
		  50% {width: 80%; }
		  100% {width: 50%; }
		}


/*----- CUSTOMER REVIEWS-------*/

#reviews{
	width: 100%;
	background-color: #40c6f3db;
	color:#000000;
	text-align: center;
	font-family: bicyclette, sans-serif;
	padding: 70px;
}

	.review_title{
		margin: 0;
		margin-bottom: 1em;
		font-family: bicyclette, sans-serif;
		font-size: 400%;
		font-weight: 700;
		color:#ffffff;
		/* order: 1; */
		width: 100%;

	}
  .reviews-cards {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 50px;
  }

	.stars{
		/* float: right; */
		width: 180px;
		
	}
	.reviews-cards .card {
	    max-width: 640px;
		/* min-height: 350px; */
		display: flex;
		flex-direction: column;
		padding: 30px;
		width:40%;
		background-color: #ffffff;
		text-align:left;
		box-shadow: 0 4px 10px 0 rgba(19, 19, 19, 0.2), 0 6px 20px 0 rgba(19, 19, 19, 0.19);
		border-radius: 5px;
		gap: 20px;
		min-height: 350px;
		justify-content: center;
	}
		/* .customer_rev1{
			
		}
		.customer_rev2{
		

		}
		.customer_rev3{
	

		}
		.customer_rev4{
		
		} */

			p.name{
				font-size: 150%;
				width: 100%;
				margin: 0;
			}
			p.location{
			font-size: 120%;
			margin: 0;
			color:#40c5f3;
			}

			p.testmon{
				margin: 0;
				font-size: 1.2em;
			}

	.review_link{
		position: relative;
		width: 100%;
		margin-top: 50px;
		font-size: 200%;
		font-weight: 510;
		color:#ffffff;
	}

	.rev_logo{
		width: 250px;
		margin-inline: 25px;
	}

/*------Service Request------*/

#serv_req{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	background-color: #ffffff;
	padding: 70px;
}

.req_contain{
	width: 50%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	max-width: 900px;
	/* top: 10%; */
	/* height: 600px; */
	text-align: center;
	font-family: bicyclette, sans-serif;
	border-radius: 15px;
	/* padding: 2%; */

}
.van-bg { 
	width: 50%;
	max-width: 1000px;
	object-fit: contain;
}
	.req_title{
		font-size: 300%;
		font-weight: 600;
		color: #000;
		margin: 0;
	}
	.req_title span{
		color: #40c5f3;
	}
		.req_info{
		   font-size: 160%;
		   max-width: 550px;
		   margin-top: 0;
		}
	
		.contact-div {
			display: flex;
			justify-content: center;
			gap: 70px;
			font-size: 1.6em;
			margin-top: 10px;
		}
	.contact-div a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	
	.contact-div svg {
		width: 70px;
		color: #40c5f3;
	}
	.phone-email {
		margin-top: 30px;
		font-size: 1.3em;
	}
	

a.phone_link:link{
 	color:#40c5f3;
 	text-decoration: none;

 }

 a.phone_link:visited{
	color:#40c5f3;
}

a.phone_link:hover{
	opacity:0.8;
	animation-name: hoverLink;
  	animation-duration: 5s;
  	animation-iteration-count: infinite;
  	animation-timing-function: linear;

}

a.mail_link:link{
 	color:#40c5f3;
 	text-decoration: none;

 }

 a.mail_link:visited{
	color:#40c5f3;
}

a.mail_link:hover{
	opacity:0.8;
	animation-name: hoverLink;
  	animation-duration: 5s;
  	animation-iteration-count: infinite;
  	animation-timing-function: linear;
}


/*------Footer--------*/

footer{
width: 100%;
/* height: 150px; */
background-color: #000000e0;
padding: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}

.footerLogo{
	width: 300px;
}

h2{
	color:#ffffff;
	font-family: bicyclette, sans-serif;
	text-align: center;
	

}

p.legal{
	width: 100%;
	color:#ffffff;
	text-align: center;
	font-family: bicyclette, sans-serif;
	margin: 0;
	margin-top: 40px;
	line-height: 1.4em;
}
.legal span {
	color: #40c5f3;
}

.contact_button{
	width: 240px;
	background-color: #40c5f3;;
	text-align: center;
	border-radius: 10px;
	font-family: bicyclette, sans-serif;
	color: #000000;
	font-size: 150%;
	padding: 10px;
}


/*---------!!!!!! MEDIA QUERIES BEGIN !!!!!!!!----*/

@media only screen and (max-width: 1300px) {

	.nav {
		font-size: 1.4em;
		max-width: 700px;
	}
	#about_main{
		
	}

	.about_block{
		
	}

	.comp_contain{ 
	 height: 73.5vw;
	 margin: 2vw auto;
	 max-height: 413.5px;
	 max-width: 400px;
	 overflow: hidden;
	 width: 98%;
	 border-radius: 49%;
	}

	.comp_text{
		font-size: 200%;
	}
		
}

		/*------  1100px Max Query-----*/

			@media only screen and (max-width: 1000px) {
	
	.header {
		height: 120px;
	}
				
	.nav{
		display: none;
	}

	/* .nav.sticky{
		font-size: 1.2em;
		width: 70%;
	} */
	.health-msg-div {
		top: 120px;
	}
	.mobileButton{
		display: block;
		
	}
	.headerLogo{

		width: 250px;
	}

	.headerLogo.sticky{

		width: 150px;
	}

	span.sched {
		max-width: 400px;
	}

	.about_block{
		width: 45%;
	}
	.about-container {
		flex-wrap: wrap;
	}
	#reviews {
		padding: 30px;
	}
	.reviews-cards .card {
		width: 100%;
	}
	.review_title {
		font-size: 3em;
	}


	#serv_req{
	  flex-direction: column;
	  padding: 30px;
	}
	


	.req_contain{
		width: 100%;
	}

	.phone_link{

		width: 70%;

	}

	.mail_link{
		
		width: 70%;

	}
	.van-bg {
		width: 100%;
		max-width: 500px;
	}
	footer{
		
	}	

			
}

	@media only screen and (max-width: 850px) {
		.header {
			height: 100px;
			padding-inline: 30px;
		}
		.header.sticky {
			height: 70px;
			
		}
		.headerLogo{
			width: 200px;

		}

		.headerLogo.sticky{
			width: 150px;
		}
		.mobileButton img {
			width: 40px;
		}
		.health-msg-div {
			top: 100px;
			font-size: 100%;
			padding-inline: 10px;
		}
		#slideShow{
			width: 100%;
			height: 60vw;
			min-height: 400px;
			background-position: initial;
			background-size: cover 

		}

		span.sched{

			display: none;

		}

		#about_main{
			padding: 30px;
		}
		#about_main h3{
			margin-bottom: 20px;
		}
		.about-container {
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 30px;
		}
		.about_block{
			width: 100%;
		}
		.about_block h4 {
			margin: 20px 0;
		}
		.about_title {
			font-size: 3em  ;
			line-height: 1em;
			margin: 0;
		}
		#faq{
			width: 100%;
			padding: 30px;
		}

		.faq_block{
			width: 100%;
		}

		.faq_title{
			font-size: 200%;
			line-height: 1em;

		}

		.faq_txt{
			font-size: 120%;
		}



		#comp_block {
			padding: 30px;
			flex-direction: column;
		}
		.comp_text{
			display: none;
		}

		.mobileCompTxt{
			display: inline;
			font-size: 2em;
			margin: 0;
		}

		


		#reviews{
			
		}

		.review_title {
			line-height: 1em;
		}

		p.name{
			margin-top: 1%;
		}
		.rev_logo {
			width: 180px;
			margin-bottom: 20px;
		}
		
	#serv_req{
		width: 100%;
		
		}
		.req_title {
			line-height: 1em;
		}
			.req_contain{
				
				
			}

			.contact_button{
				font-size: 1.2em;
				width: 200px;
			}

			footer{
			 flex-direction: column;
			 padding: 30px;
			 padding-bottom: 20px;
			}

			.footerLogo{
				width: 200px;
				

			}

		h2{
			color:#ffffff;
		
			font-family: bicyclette, sans-serif;
			
			text-align: center;
			
			}
			.contact_button {
				display: none;
			}



} 
@media only screen and (max-width: 500px) {
	.contact-div {
		width: 100%;
		/* flex-direction: column; */
		align-items: center;
		gap: 20px;
	}
	.contact-div a {
		font-size: 0.9em;
	}
	.contact-div svg {
		width: 60px;
	}
	.phone-email {
		font-size: 1.1em;
	}
}
/*-----END iPhone/Android Media Query------*/