/* 
	Universal Colors:
	
	Dark Blue rgb (40,42,117) 
	Aqua rgb (62,132,172)              */
	
			
	/* GLOBAL: Style Guide */
			
		.embossed-heavy {
	 		border: 1px solid rgba(0,0,0,0.5);
	 		box-shadow: 
	 			inset 0 2px 3px rgba(255,255,255,0.3),
	 			inset 0 -2px 3px rgba(0,0,0,0.3),
	 			0 1px 1px rgba(255,255,255,0.9);
		}		
			
		.text-shadow {text-shadow: 0 0 10px black, 0 0 5px black, 0 0 2px black;}
		
		  p#service-button {width: 100%;}
		  p#service-button a {border: 1px solid gold; padding: 20px;}
		  
		  
		  body#about section#about-us p {font-size: clamp(1rem, 1.6vw, 2rem); color: #333;}

		img {
			max-width: 100%;  		/* Forces image to be 100% width, and not max-width of 100% */
			max-height: 100%;
		}
		
		img#palm-trees {max-height: 120px; width: auto;}
		
							/* Look Into Best Practices to prevent image loading page "jank" */
					/* Coda: Press OPT-C to get CSS Comment Markup */
					/* Anchors are inline, so I need to make them display:block to go full width */
					/* Removes white gap between slides - change to base color of slide images */
					

	/* Global Header / Topper Layers */	
	
		section#topper i[class^="fa"] {font-size: 1.8rem; padding-left: 20px; text-shadow: 0 0 12px black;}
		section#topper div[class^="col"] {padding-top: 15px; color: white;}	
	
		section#branding address p {color: darkblue; font-weight: 700; font-size: .9rem;}
		
		section#branding address p span {
						color: black;
						font-weight: 400;
						font-size: .8rem;
					}
		section#branding address a {display: inline; color: darkblue;}
		
		section#branding div#phone p {color: darkblue; font-weight: 700; font-size: 1.2rem;}
		section#branding div#phone a {color:black; font-weight: 900; font-size: 1.8rem;}
		section#branding address a span {color: #555; font-weight: 200;}
		
		@media (min-width: 768px) {
				section#mobile-page-name {display: none;}
		}
		
		/* Social Media I can massively improve on this!!! */	

		li#facebook i 	{color: lightblue;}
		li#yelp i			{color: pink;}
		li#google i		{color: lightgreen;}
	
		li#foot-facebook i {color: lightblue; font-size:2.5rem;}
		li#foot-yelp i		{color: pink; font-size: 2.5rem;}
		li#foot-google i	{color: lightgreen; font-size: 2.5rem;}

		li#foot-facebook i:hover 	{color: rgb(53,115,226); text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;}
		li#foot-yelp i:hover		{color: darkred; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;}
		li#foot-google i:hover	{color: gold; text-shadow: 0 0 4px black, 0 0 19px black, 0 0 25px white;}
		
		li#facebook i:hover 	{color: rgb(53,115,226); text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;}
		li#yelp i:hover		{color: darkred; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;}
		li#google i:hover	{color: yellow; text-shadow: 0 0 4px black, 0 0 9px black, 0 0 15px white;}
		
		
		
	/* Nav Menu Dropdown: Cleaning Services */	
	
		.navbar-nav a {color: white;}  /* color of  main and dropdown */
		
		a.nav-link {font-size: 1.3rem; font-weight: 300; padding-right: 30px!important; padding-left: 0;}
		
			.dropdown-menu {
				background: rgba(209,190,217,1);
			}
			
			.dropdown-item {
				color: black!important; 
				font-size: 1.2rem; 
				margin: 15px 0;
			}
	
			@media (min-width: 768px) {
				a.nav-link {font-size: 1rem;}
			}
			
			@media (min-width: 992px) {
				a.nav-link {font-size: 1.3rem;}
			}
			
		/* Section: Welcome and Written Content */
		
		.written-content {
			margin-top: 50px; 
			font-family: 'Montserrat', sans-serif;
			
			}
	
		
		/* Section: Reviews-Clips Carousel */
			
			.carousel-control-prev-icon {
				background-image: none;
			}

			.carousel-control-prev-icon {
				position:relative;
			}    
				
			.carousel-control-prev-icon::before {
					content: "\2190";  /* this is your text. You can also use UTF-8 character codes as I do here */
					font-family: FontAwesome;
					font-size: 3rem;
					font-weight: 700;
					left:-5px;
					position:absolute;
					top:0;
 			}	
 				
 			.carousel-control-prev-icon:hover::before {
 					content: "\2190";  /* this is your text. You can also use UTF-8 character codes as I do here */
 					font-family: FontAwesome;
 					color: blue;
 					font-size: 3rem;
 					font-weight: 700;
 					left:-5px;
 					position:absolute;
 					top:0;
 				}	
 				
 			.carousel-caption {

 					position: absolute;
 					bottom: 20%;
			}
				
		/* Section: Service Cards */
 
  			section#service-cards div.card {box-shadow: 3px 3px 16px #555;}

 				
  		/* Section: Badges */
 
 			section#badges {background:rgb(249,249,249);}
 			body#about section#badges {background: #d4eaf1; border-top: 2px solid darkblue;}
 			section#badges .card {background-color: transparent; border: none;}
 			section#badges h4 a {color: black;}
 			section#badges h3 {font-size: 3rem; font-weight: 900;}
 			section#badges .card-body {padding: 30px 0;}
 			section#badges p {color: #777;}
 			section#badges div.card img {max-width: 50%; height: auto; }
 			section#badges img#bbbb {max-width: 50%; height: auto; }
 			
 		/* Section: Footer */
  
  			footer {background: rgb(50,57,70);}
  
  			div#webby-foot p a {color: #ddd; font-weight: 100;}
  
  			address i {font-size: 1.5rem; color: lightblue; display: block;}
  			address a {color: white; display:block;}
  
			p#foot-phone a::before, 
			p#foot-email a::before 
									{
				
				  padding-right: 10px;
				  font-family: "Font Awesome 5 Pro";
				  font-weight: 900;
				  content: "\f2a0";
				  width: 40px;
				  display: inline-block;
				  font-style: normal;
				  font-variant: normal;
				  text-rendering: auto;
				  color:lightblue;
				  font-size: 1.5rem;
				  -webkit-font-smoothing: antialiased;
				  
			  }
			  
			  p#foot-email a::before {content: "\f1d8";}
			  p#foot-address a::before {content: "";}
			  
			  
		/* Article List Sidebar Styling */			  
			  
			  #article-sidebar {
				  
				 
				 background-color: rgba(255, 251, 226, 1);
				 
				 
				
				}
				
			#article-sidebar h5 a {color: #936f09;}
				
			  #pets-sidebar {
				  
				 
				 background-color: rgb(254,247,231);
				
				}
				
				.an-article {display: flex; height: 70px; margin: 60px 20px;}
				.an-article img {margin-right: 10px; border-radius: 5px; border: 4px solid white;}
				.an-article h5 {font-size: 1rem; font-weight: 700;}
				
				article div:first-child {margin-top: 0;}
				
				#pet-portal {background: white; padding: 15px 2px; height: 120px; border: 1px solid black; border-radius: 12px;}
				#pet-portal:hover {box-shadow: 1px 1px 5px black;}
				
						@media (min-width: 489px) {
							
							.an-article {margin: 40px 70px;}
							
						}
							
							
				
						@media (min-width: 576px) {
							
							.an-article {margin: 40px 100px;}
									
						}
				
						@media (min-width: 768px) {
							
							.an-article {margin: 110px 0;}
								
						}

					@media (min-width: 992px) {
						
							.an-article {margin: 90px 20px;}
							
						}
						
						
						@media (min-width: 1200px) {
							
							.an-article {margin: 50px 40px;}
			
						}
					
		/* Misc */
		
		/* MAIN CONTENT styles */
		
				section.written-content p {
					font-size: clamp(1rem, 2vw, 1.4rem); 
					font-family: montserrat, sans-serif; 
					font-weight: 400;
					color: #444;					
					
					}
				
				body#article-page section.written-content p {
					
					font-size: clamp(1.1rem, 1.3vw, 1.4rem); 
				}



				section.written-content h1 {
					font-size: clamp(1.5rem, 2.5vw, 1.2rem); 
					font-family: montserrat, sans-serif; 
					color: rgba(62,132,172,1);		
					margin-bottom: 30px;
					font-weight: 700;			
					
					}
				
				section.written-content h2.tagline {
					font-size: clamp(2rem, 3vw, 2.8rem); 
					font-family: montserrat, sans-serif; 
					color: rgb(249,38,27);	
					
					}
					
				section.written-content h2{
					font-size: clamp(2rem, 3vw, 2.8rem); 
					font-family: montserrat, sans-serif; 
					color: rgb(249,38,27);	
					margin: 30px 0;
					
					}

					
				section.written-content h3 {
					font-size: clamp(1.6rem, 2.6vw, 2.4rem); 
					font-family: montserrat, sans-serif; 
					font-weight: 700;
					color: rgb(249,38,27);	
					
					}
					
				section.written-content h4 {
					font-size: clamp(1.1rem, 1.5vw, 1.7rem); 
					font-family: montserrat, sans-serif; 
					color: rgb(249,38,27);	
					font-weight: 700;			
					
					}
					
				section.written-content h6 {
					font-size: clamp(1rem); 
					font-family: montserrat, sans-serif; 
					color: rgb(249,38,27);	
					font-weight: 700;	
					margin: 15px 0;		
					
					}
					
				section.written-content ul {
					margin: 30px 0 30px -10px;
					
				}
					
				section.written-content ul li {
					font-size: clamp(1.2rem, 1.4vw, 1.5rem);
					background: url('../_images/bullet-carpet.png') no-repeat left 1px transparent;
					list-style-type: none;
					margin: -8px;
					padding: 0 0 18px 40px;
					font-weight: 300;
					
					}		
					
					
				section.written-content blockquote {
						font-family: verdana;
						font-style: italic;
						background: rgba(0,0,0,0.1);
						padding: 30px;
						border-radius: 9px;
						margin: 30px 20px;
						
					}
					
				section.written-content blockquote p {
					 font-size: 1.5rem!important;
					 color: #444;
					
				}				
				section.written-content cite {
						font-style: italic;
						font-weight: 700;
						font-family: verdana;
					}
 
				div.text-blacky {color: orange;}
				footer h4 {color: rgb(249,38,27)!important;}
				footer h4 {padding-bottom: 10px; border-bottom: 2px solid rgb(249,38,27); }

						@media(max-width:767px) {
								
						}

						@media (min-width: 576px) {
							footer img {max-width: 100%;}
						}
							
						@media (min-width: 768px) {
							footer img {max-width: 40%;}
						}
		
						@media (min-width: 992px) {
							footer img {max-width: 70%;}
						}
	
						@media (min-width: 1200px) {
							footer img {max-width: 50%;}
						}
		
						@media (min-width: 1400px) {
			
						}
				              
				#home #mobile-page-name h5::before {content: "Home Page"; color: black;}
				#services #mobile-page-name h5::before {content: "Pim's Services"; color: black;}
				#about #mobile-page-name h5::before {content: "About Pims"; color: black;}
				#contact #mobile-page-name h5::before {content: "Contact Info"; color: black;}
				#faq #mobile-page-name h5::before {content: "Frequently Asked Questions"; color: black;}
				#caretips #mobile-page-name h5::before {content: "Pro Care Tips"; color: black;}

				h3.little-texas {background: url('../_images/little-texas-icon.png') no-repeat; padding-left: 80px; height: 90px; text-shadow: 2px 2px 4px white; padding-top: 58px; }
				
				.written-content p strong {font-weight: 700;}
				.written-content p.side-note {font-family: verdana, sans-serif; font-weight: 500; font-size: 1rem;}
				
				ul.post-meta li {background: none!important; display: inline-block!important; margin: 0; padding: 0; font-size: .8rem!important;}
				ul.post-meta {margin: 0; padding: 0;}
				
				aside.article-callout {background-color: lightyellow; padding:20px; border: 1px solid gray; border-radius: 8px; margin: 20px; font-family: verdana, sans-serif; color: pink;}
				aside.article-callout p {font-family: verdana, sans-serif; font-weight: 500; color: black;}
				
				.article ol li {font-size: 1.2rem; font-family: verdana, sans-serif; margin-bottom: 15px; color: darkgreen;}
				
		/* Pet Article --The Cat-- Conclusion CTA */
				
								
						@media(max-width:575px) {
							
							section.pet-article-cta {
								background: url('../_images/pet-niceness.jpg') no-repeat; 
								height: 250px; 
								background-position: center center; 
								border: 1px solid black; 
								border-radius: 6px;
								}
							
							section.pet-article-cta h4 {
								color: transparent;							
								padding: 50px 0 0 20px; 
								}
							
							section.pet-article-cta p.pet-cta-button {
									text-align: center;
								}
								
							section.pet-article-cta p.pet-cta-button a {
								background-color: blue;
								color: white;
								box-shadow: 2px 2px 18px white; 
								border:2px solid gold;
									
								}		
								
							section.pet-article-cta p.pet-cta-button a:hover {
								background-color: red;
								border:2px solid orange;
									
								}					
							
						}

						@media (min-width: 576px) {
							
							section.pet-article-cta {
								background: url('../_images/pet-niceness.jpg') no-repeat; 
								height: 250px; 
								background-position: center center; 
								border: 1px solid black; 
								border-radius: 6px;
								}
							
							section.pet-article-cta h4 {
								padding: 10px 0 0 20px; 
								color: white; 
								text-shadow: 1px 1px 4px black;
								}
							
							section.pet-article-cta p.pet-cta-button {
								position: absolute; 
								bottom: 60px; 
								right: 70px;
								
								}
								
							section.pet-article-cta p.pet-cta-button a {
								background-color: rgba(53,126,121,1);
								color: white;
								box-shadow: 2px 2px 18px white; 
								border:2px solid gold;
									
								}		
								
							section.pet-article-cta p.pet-cta-button a:hover {
								background-color: red;
								border:2px solid orange;
									
								}					
							
						}
							
						@media (min-width: 768px) {
							
							section.pet-article-cta {
								height: 250px; 
								background-position: center center; 
								border: 1px solid black; 
								border-radius: 6px;
								}
							
							section.pet-article-cta h4 {
								padding: 10px 0 0 20px; 
								color: white; 
								text-shadow: 1px 1px 4px black;
								}
							
							section.pet-article-cta p.pet-cta-button {
								position: absolute; 
								bottom: 60px; 
								right: 70px;
								
								}
								
							section.pet-article-cta p.pet-cta-button a {
								background-color: rgba(53,126,121,1);
								color: white;
								box-shadow: 2px 2px 18px white; 
								border:2px solid gold;
									
								}		
								
							section.pet-article-cta p.pet-cta-button a:hover {
								background-color: red;
								border:2px solid orange;
									
								}					
							
						}
		
						@media (min-width: 992px) {
							
							section.pet-article-cta {
								height: 250px; 
								background-position: right center; 
								border: 1px solid black; 
								border-radius: 6px;
								}
							
							section.pet-article-cta h4 {
								padding: 60px 0 0 20px; 
								text-shadow: 1px 1px 4px black;
								}
							
							section.pet-article-cta p.pet-cta-button {
								position: absolute; 
								bottom: 140px; 
								right: 100px;
								
								}
								
							section.pet-article-cta p.pet-cta-button a {
								background-color: rgba(53,126,121,1);
								box-shadow: 2px 2px 18px white; 
								border:2px solid gold;
									
								}		
								
							section.pet-article-cta p.pet-cta-button a:hover {
								background-color: red;
								border:2px solid orange;
									
								}					
							
						}
	
						@media (min-width: 1200px) {
							
						}
		
						@media (min-width: 1400px) {
							
							section.pet-article-cta {}
							section.pet-article-cta h4 {font-size: 1.5rem;}
							section.pet-article-cta p.pet-cta-button {}
							section.pet-article-cta p.pet-cta-button a {}
							section.pet-article-cta p.pet-cta-button a:hover {}	
							
									
						}

						body#sitemap .bg-menu-color {
							background-color: rgba(77, 50, 98,1) !important;
							border-bottom: 1px solid black;
							box-shadow: 1px 4px 4px black;}
					
						body#sitemap .card-header { font-size: 1.6rem; font-weight: 700;}
						
						body#sitemap .card-img-top {background: linear-gradient(#060404 0%); background-blend-mode: multiply;}
						
						.uk::before  {
							content: url('../_images/bullet-uk.png');
							display: inline-block; 
							
						}
						
						.uk {margin: 35px 0;}