/* LOCAL */

.banner-container {
	display: grid;
	grid-gap: 20px;
	/* min-height: 620px; */
	/* max-width: 1200px; */
	/* padding-left: 1px;
	padding-right: 1px; */
	grid-template-areas: 
	
	"banner-image"
  
  }
  
  
  
  .banner-image {
  
	/* background-image: url('https://res.cloudinary.com/hork5h8x1/image/upload/v1567691750/PJnltgoY_mufhua.jpg'); */
	color: #ffffff;
	/* background-size: cover; */
	/* background-position: center left; */
	grid-area: banner-image;
	text-align: center;
	padding-bottom: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* font-size: 60px; */
	max-height: 600px;
	/* z-index: -100; */
  
	object-fit: cover;
  /* z-index: 100; */
  overflow: hidden; 
  
  } 
  
   
  .banner-image > img {
  
	/* max-width: 1200px; */
	width: 100%;
	height:100%;
	object-fit: cover;
  /* z-index: 100; */
  overflow: hidden; 
  /* overflow:hidden added for Chrome compatibility on Marketplace Page */
  }
  
  
  html {
	  scroll-behavior: smooth;
  }
  
  
  
  .trial {
  
	position:absolute;
	display: grid;
	align-self: center;
	justify-self: center;
	/* max-height: 300px; */
	/* z-index: 1000; */
	grid-template-areas:
	" store-title "
	" store-name " 

}

.store-title{
grid-area: store-title;
color: var(--white);
padding: 40px;
font-size: 2vw;

}


.sub-banner-header{
	grid-area: store-title;
	color: var(--white);
	padding: 40px;
	font-size: 2vw;
	
	}

.section-header {


	padding: 10px;
	padding-bottom:1px;
	/* font-size: 1.5vw; */
	font-size: 16px;

	text-align:left;
	padding-left: 120px;
	color: hsl(218, 10%, 50%);

}




.item-selection-div{
	text-align:left;
	padding-bottom:20px;
	padding-left:120px
	
	
	}

	.input-style-div{

		margin-left:120px;
		
		}
		


	.date-time-div{
		text-align:left;
		padding-bottom:20px;
		padding-left:120px
		
	
	}

.question-header {


	padding-top: 10px;
	padding-bottom:1px;
	/* font-size: 1.5vw; */
	font-size: 16px;

text-align:center;
	color: hsl(218, 10%, 50%);

}

.form-sub-text{

    font-size: 20px;
    text-align: center;
    padding-left: 120px;
    padding-right: 120px;
    color: hsl(218, 10%, 25%);
    margin-top: -15px;
}




.label-header {
	/* padding: 10px; */
	/* font-size: 1.5vw; */
	font-size: 16px;

	/* padding-left: 120px; */
	color: hsl(218, 10%, 50%);
}

.form-centering{

display:grid;
grid-template-columns: 1fr;
justify-items: center;
padding-left:0;
padding-right:0;
}

.add-to-cart-button {
    background-color: rgba(0, 103, 214, 0.934);
    color: white;
    height: 35px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
    text-decoration: none;
    text-align: center;
	/* margin-left: 120px; */
	width:422px
}
.submit-success {
    background-color: green;
    color: white;
    height: 35px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
    text-decoration: none;
    text-align: center;
	margin-left: 120px;
	width:422px
}


.text-area{
	/* padding-left: 120px;
	padding-right: 120px; */
	width:415px;

}

.about-text {


	/* font-size: 1.5vw; */
	font-size:20px;
	text-align: left;
	padding-left: 120px;
	padding-right: 120px;
	color: hsl(218, 10%, 25%);
	margin-top: -15px;

}







.store-name{
grid-area: store-name;
/* display:flex;
align-self: center;
justify-self: center; */
padding-right: 50px;
padding-left: 50px;
font-size:5vw;
  

  
  }





.the-process-container {

	display: grid;
	grid-gap: 30px;
	padding-left: 120px;
	padding-right: 120px;
  
	grid-template-columns: 2fr 5fr;

	grid-template-areas: 
	
	"menu process";



}

.menu {
grid-area: menu;
/* text-align: center; */

}


.mctesterson{
	position: sticky;
	top: 40px;


}





#first.active {
	font-size: 22px;
	margin-top:-.01px;
  }

  #second.active {
	font-size: 22px;
  }

  #third.active {
	font-size: 22px;
  }

  #fourth.active {
	font-size: 22px;
  }









.process {
grid-area: process;
/* text-align: center; */

padding-left:100px;

}


.unfocused-menu-text {

	color: hsl(218, 10%, 60%);



}

.process-header {

font-size: 22px;
margin-top: 0;
color: hsl(218, 10%, 25%);



}

.process-body-text{

	padding-top: 30px;
	/* padding-right: 100px; */

}



.div-header {

	color: 	hsl(218, 10%, 30%);
	font-size: 10px;
	text-transform: uppercase;

	-webkit-transition: color 1.5s, font-size 1.5s;
	-moz-transition: color 1.5s, font-size 1.5s;
	  -o-transition: color 2s, font-size 1.5s;
		 transition: color 2s, font-size 1.5s;

	
  
  }

.filler {

	padding-top: 30px;


}


.overview-facts {

	display: grid;
	grid-gap: 30px;
	padding-top: 30px;

  
	grid-template-columns: 1fr 1fr;

	grid-template-areas: 
	
	"changes quick-facts"

}


.changes {

grid-area: changes;	

}

.quick-facts {
	grid-area: quick-facts;	




}









.in-depth-container {


	display: grid;
	/* min-height: 250px; */

  
	grid-template-columns: 1fr 1fr;

	grid-template-areas: 
	
	"info-indepth image-indepth"


}

.in-depth-container-right {


	display: grid;
	/* min-height: 250px; */

  
	grid-template-columns: 1fr 1fr;

	grid-template-areas: 
	
	"image-indepth info-indepth "


}


.info-indepth {

grid-area: info-indepth;
background-color: rgb(245, 245, 245);
/* margin-bottom: 5.9px; */
padding-top: 15px;
padding-left: 30px;
padding-right: 30px;

display: flex;
flex-direction: column;
justify-content: space-evenly;

}


.info-indepth-header {

	color: hsl(218, 10%, 50%);
	font-size: 13px;


}


.info-indepth-header {

	color: hsl(218, 10%, 30%);
	font-size: 16px;


}

.image-indepth {

grid-area: image-indepth;
object-fit: cover;
overflow: hidden; 
height: 100%;
margin-bottom:-5px;


}


.before {

	text-decoration: underline;


}
.after {

	padding-left: 30px;


}


.padding-option {

padding-top:80px;


}

.search-hr{

	width: 100% !important;
	/* padding-bottom: 40px !important;
	padding-top: 40px !important; */
	margin-left: auto;
	margin-right: auto;
	margin-top: 60px;
	margin-bottom: 60px;
	/* margin-bottom: 100px;  */
  
	border: 0;
	border-bottom: 1px solid hsl(218, 10%, 85%);
  
  }

.spacing {

	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	border: 0;
		border-bottom-color: currentcolor;
		border-bottom-style: none;
		border-bottom-width: 0px;
	border-bottom: 1px solid hsl(218, 10%, 85%);
	padding-bottom: 40px;
	padding-top: 40px;
}








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




	



	.in-depth-container {


		display: grid;
		/* min-height: 250px; */
	
	  
		grid-template-columns: 1fr ;
	
		grid-template-areas: 
		"image-indepth"

		"info-indepth" 
	
	
	}


	.in-depth-container-right {


		display: grid;
		/* min-height: 250px; */
	
	  
		grid-template-columns: 1fr;
	
		grid-template-areas: 
		
		"image-indepth "
		" info-indepth "
	
	}






	.the-process-container {

		display: grid;
		grid-gap: 30px;
		padding-left: 20px;
		padding-right: 20px;
	  
		grid-template-columns: 1fr;
	
		grid-template-areas: 
		
		"process";
	
	
	
	}


	.menu {
		grid-area: menu;
display:none;		
		}



		.process {
			grid-area: process;
			/* text-align: center; */
			
			padding-left:0px;
			
			}




}


















/* All BELOW HERE MAY NOT BE RELEVANT WHEN DONE? */








  /* PIE */


.piechart {

	display: grid;
	grid-gap: 50px;
	padding-top: 10px;
	
	padding-left: 120px;
	padding-right:120px;
	justify-content: center;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:
	"A B C";
	padding-bottom: 30px;
}

.A{

grid-area: A;



}


.B{

	grid-area: B;
	
	
	
	}


	.C {

		grid-area: C;

	}


 

.pie-title {


text-align: center;
padding-top: 10px;

}


.pie-text {


	/* font-size: 1.5vw; */
	font-size:20px;
	text-align: left;
	padding-left: 120px;
	padding-right: 120px;
	color: hsl(218, 10%, 25%);
	margin-top: -15px;

}




/* MAP */

.map-container {

    display: grid;
    grid-gap: 20px;
    padding-left: 120px;
    padding-right: 120px;
    grid-template-areas: 
    "map";



}



.maps {
        display: grid;
        /* min-height: 60px; */
        grid-gap: 20px;
        /* grid-template-columns: repeat(3, 100px) 1fr; */
        /* padding-left: 40px;
		padding-right: 40px; */
		
		padding-left: 120px;
		padding-right: 120px;


    }




	/* add-to-cart-button in base.css */

	.visit-button-adjustments {
		/* text-align: center;
		display: flex; 
		justify-content: center;
		align-items: center; */
		width: 25%;
		/* padding: 100px; */




	}



	.schedule-visit-button {

		background-color: 	hsl(218, 10%, 25%);
		/* border: none; */
		color: white;
		height: 50px;
		font-size: 12px;
		cursor: not-allowed;
		display: flex;
		align-items: center;
		justify-content: center;
	  
	  
	  }




.button-adjust {
	text-align: center;
	margin: 0px !important;
	cursor: not-allowed;

  
  }


  .schedule-visit-div{

	display: flex; 
		justify-content: center;
		align-items: center; 
	padding: 50px;

  }





  .faq-div {

padding-left: 120px;
padding-right: 120px;


	
  }
  


  .faq-custom-div {

	padding-left: 0px;
	padding-right: 0px;
	
	
		
	  }

	  



  .faq-question-text {

cursor: pointer;



  }



  .section-header-faq {


	padding: 10px;
	padding-bottom:1px;
	/* font-size: 1.5vw; */
	font-size: 16px;

	text-align:left;
	padding-left: 0px;
	color: hsl(218, 10%, 50%);

}


.about-text-faq {


	/* font-size: 1.5vw; */
	font-size:20px;
	text-align: left;
	padding-left: 0px;
	padding-right: 0px;
	color: hsl(218, 10%, 25%);
	margin-top: -15px;

}





  /* TESTING LAYOUT */


  .process-container{


	display: grid;
	grid-gap: 120px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 120px;
	padding-right:120px; 
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
	"explanation demo " 

}


.process-container-alt{


	display: grid;
	grid-gap: 120px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 120px;
	padding-right:120px; 
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
	"demo explanation " 

}






	.explanation-text {

		color: hsl(218, 10%, 25%);
font-size: 20px;
/* padding-left: 120px; */

	}


 

	.explanation-title {


		color: hsl(218, 10%, 35%);
		font-size: 50px;
		/* padding-left: 120px; */
		margin-top:-10px;

	}


.explanation-header{



		padding: 10px;
		padding-bottom:1px;
		/* font-size: 1.5vw; */
		font-size: 16px;
	
		text-align:left;
		padding-left: 0px;
		color: hsl(218, 10%, 50%);
	

}



	.explanation {
		grid-area: explanation;
		flex-direction: column;
		display: flex;
		  justify-content: center;
		  align-items: center;
		padding-bottom:10px;


			}


	.demo {

		grid-area: demo;
		display:flex;
		flex-direction: column;
		/* padding-right:120px; */
		justify-content: center;
		/* align-content:center;  */
		
			}



.bottom-process {

padding-bottom: 30px;


}





/* BREAK */



.feature-container {
	display: grid;
	grid-gap: 20px;
	/* min-height: 620px; */
	/* max-width: 1200px; */
	/* padding-left: 1px;
	padding-right: 1px; */
	grid-template-areas: 
	
	"feature-image"
  
  }
  
  
  
  .feature-image {
  
	/* background-image: url('https://res.cloudinary.com/hork5h8x1/image/upload/v1567691750/PJnltgoY_mufhua.jpg'); */
	color: #ffffff;
	/* background-size: cover; */
	/* background-position: center left; */
	grid-area: feature-image;
	text-align: center;
	padding-bottom: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* font-size: 60px; */
	max-height: 360px;
	/* z-index: -100; */
  
	object-fit: cover;
  /* z-index: 100; */
  overflow: hidden; 
  
  } 
  
   
  .feature-image > img {
  
	/* max-width: 1200px; */
	width: 100%;
	height:100%;
	object-fit: cover;
  /* z-index: 100; */
  overflow: hidden; 
  /* background-position:  top; */
  /* overflow:hidden added for Chrome compatibility on Marketplace Page */
  object-position: top;
}



  .trial {
  
	position:absolute;
	display: grid;
	align-self: center;
	justify-self: center;
	max-width: 1200px;
	margin: 0 auto;
	/* max-height: 300px; */
	/* z-index: 1000; */
	grid-template-areas:
	" quote "
	" attribution " 

}


.store-name{
	grid-area: store-name;
	/* display:flex;
	align-self: center;
	justify-self: center; */
	padding-right: 50px;
	padding-left: 50px;
	font-size:5vw;
	  
	
	  
	  }
	


	  .quote{
		grid-area: quote;
		/* display:flex;
		align-self: center;
		justify-self: center; */
		padding-right: 50px;
		padding-left: 50px;
		font-size: 2vw;
		  
		
		  
		  }


		  .attribution {


			grid-area: attribution;
			/* display:flex;
			align-self: center;
			justify-self: center; */
			padding-right: 50px;
			padding-left: 50px;
			font-size: 1.6vw;



		  }


.pet-image-frame{

padding-left:120px;
padding-top:20px;
padding-bottom:30px;



}























.mobile{

display:none;

}


.mobile-section-header{



padding: 10px;
padding-bottom:1px;
/* font-size: 1.5vw; */
font-size: 16px;
color: hsl(218, 10%, 50%);
text-align: center;
	
	
	

}

.mobile-about-text{


			
		/* font-size: 1.5vw; */
		font-size:20px;
		text-align: center;
		color: hsl(218, 10%, 25%);
		margin-top: -15px;
	
	



}



.add-to-cart-button-test {
	/* background-color: rgba(128, 12, 118, 0.934); */
	background-color: rgba(0, 103, 214, 0.934);
	color: white;
	height: 60px;
	width: 100%;
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	padding-top: 12px;
	padding-bottom: 12px;
	text-decoration: none;
	text-align: center;
	font-family: grap, sans-serif;
	font-style: normal;
  }





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



			.item-selection-div{
				text-align:left;
				padding-bottom:20px;
				padding-left:20px
				
				
				}

				.date-time-div{
					text-align:left;
					padding-bottom:20px;
					padding-left:20px
					
				
				}

				.input-style-div{

					margin-left:20px;
					
					}


			.desktop{

display:none;

			}

			.mobile{

display:block;

			}


			.process-container{


				display: grid;
				grid-gap: 0px;
				padding-bottom: 30px;
				padding-left: 0px;
				padding-right:0px; 
				grid-template-columns: 1fr;
				grid-template-areas:
				"explanation" 
				"demo"; 

			
			
			
			}
			

			.process-container-alt{


				display: grid;
				grid-gap: 0px;
				padding-bottom: 30px;
				padding-left: 0px;
				padding-right:0px; 
				grid-template-columns: 1fr;
				grid-template-areas:
				"explanation " 

				"demo " 
			
			}




			.demo {

				grid-area: demo;
				display:flex;
				flex-direction: column;
				justify-content: center;
				padding-left: 20px;
				padding-right:20px; 
				
					}
			




					.explanation {
						grid-area: explanation;
						flex-direction: column;
						display: flex;
						justify-content: center;
						align-items: center;
						padding-left: 20px;
						padding-right:20px; 

							}
				
				
	











			.section-header {


				padding: 10px;
				/* font-size: 1.5vw; */
				font-size: 16px;
			
				text-align:left;
				padding-left: 20px;
				color: hsl(218, 10%, 50%);
			
			}



			.explanation-header{



				padding: 10px;
				padding-bottom:1px;
				/* font-size: 1.5vw; */
				font-size: 16px;
			
				text-align:left;
				padding-left: 20px;
				color: hsl(218, 10%, 50%);
			
		
		}
			
			



.explanation-text{

	font-size:20px;
	text-align: left;
	padding-left: 20px;
	padding-right: 0px;
	color: hsl(218, 10%, 25%);
	margin-top: -15px;


}
			
			.about-text {
			
			
				/* font-size: 1.5vw; */
				font-size:20px;
				text-align: left;
				padding-left: 20px;
				padding-right: 20px;
				color: hsl(218, 10%, 25%);
				margin-top: -15px;
			
			}




			.faq-div {

				padding-left: 20px;
				padding-right: 20px;
				
				
					
				  }
				  .form-sub-text{

					font-size: 20px;
					text-align: center;
					padding-left: 20px;
					padding-right: 20px;
					color: hsl(218, 10%, 25%);
					margin-top: -15px;
				}
						



				  .visit-button-adjustments {
					/* text-align: center;
					display: flex; 
					justify-content: center;
					align-items: center; */
					width: 50%;
					/* padding: 100px; */
			
			
			
			
				}


				.quote{
					grid-area: quote;
					/* display:flex;
					align-self: center;
					justify-self: center; */
					padding-right: 50px;
					padding-left: 50px;
					font-size: 2vw;
					  
					
					  
					  }


					  .form-header{
						grid-area: quote;
						/* display:flex;
						align-self: center;
						justify-self: center; */
						padding-right: 50px;
						padding-left: 50px;
						font-size:5vw;
						padding-bottom:10px
						  
						
						  
						  }



					  .form-header{
						grid-area: quote;
						/* display:flex;
						align-self: center;
						justify-self: center; */
						padding-right: 50px;
						padding-left: 50px;
						font-size:5vw;
						padding-bottom:0px
						  
						
						  
						  }



				.maps {
					display: grid;
					/* min-height: 60px; */
					grid-gap: 20px;
					/* grid-template-columns: repeat(3, 100px) 1fr; */
					/* padding-left: 40px;
					padding-right: 40px; */
					
					padding-left: 20px;
					padding-right: 20px;
			
			
				}


				.mapborder{

					padding-left:20px;
					padding-right:20px;
					
					
					}







					.form-centering{

						display:grid;
						grid-template-columns: 1fr;
						justify-items: center;
						padding-left:20px;
						padding-right:20px;
						}



						.text-area{
							/* padding-left: 120px;
							padding-right: 120px; */
							width:300px;
						
						}

						.add-to-cart-button {
							background-color: rgba(0, 103, 214, 0.934);
							color: white;
							height: 35px;
							font-size: 12px;
							cursor: pointer;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-bottom: 10px;
							padding-top: 12px;
							padding-bottom: 12px;
							text-decoration: none;
							text-align: center;
							/* margin-left: 120px; */
							width:300px
						}





		  }


		  .left {

			box-shadow:
			hsl(217, 67%, 50%)
			/* hsl(218, 10%, 75%) */
		  -10px -10px ;
		
		}
		
		.right {
		
			box-shadow:
			hsl(217, 67%, 50%)
			/* hsl(218, 10%, 75%) */
			  10px -10px ;
		
		}