/* 
	
Universal Colors: 

Logo Purple is 
rgba(115,57,125,1);

Lighter same Purple is
rgb(210,196,215);
	
*/
	
/* GLOBAL: Style Guide */
			
		img {
			max-width: 100%;  		
			max-height: 100%;
		}
			/* Forces image to be 100% width, and not max-width of 100% */		
			/* Look Into Best Practices to prevent image loading page "jank" */

/*  Header / Topper Layers */	

		section#topper {background: rgb(177, 214, 224); color: black;}
		section#topper i[class^="fab"] {font-size: 1.8rem; padding-left: 20px; text-shadow: 2px 2px 8px black;}
		section#topper div[class^="col"] {padding-top: 20px;}	
	
		section#branding address a {color: rgba(115,57,125,1); font-weight: 700; font-size: 1rem; display: inline;}
		address#areas p span {color: gray; font-weight: 100;}

		section#branding div#phone p {color: darkblue; font-weight: 700; font-size: 1.5rem;}
		section#branding div#phone a {color: rgb(239,215,119); font-weight: 900; font-size: 1.8rem; text-decoration: none; text-shadow: 1px 1px 1px black}
		
		
		
		@media (min-width: 768px) {
				section#mobile-page-name {display: none;}
		}
		
/* Social Media I can massively improve on this!!! */	

		/* Header */	

		li#facebook i 	{color: lightblue;}
		li#yelp i			{color: pink;}
		li#google i		{color: lightgreen;}
		li#linkedin i		{color: blue;}
		
		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;}
		li#linkedin i:hover		{color: darkblue; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;}
		
		
		/* Footer */	
	
		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-linkedin i		{color: blue; font-size: 3.2rem;}
		
		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#foot-linkedin i:hover		{color: darkblue; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;}
		
		
/* Navigation: Navvy */	
	
		ul.navbar-nav a {color: white;}  /* main text color */
		a.nav-link {font-size: 1.3rem; font-weight: 300; padding-right: 22px!important; padding-left: 0;}
		section#navvy a.nav-link:hover {color: violet;}

			.dropdown-menu {
				background-image: url("../_images/white-carpet-bg.jpg");					
				background-size: auto;
				border: 2px solid purple;
			}
			
			.dropdown-item {
				color: black!important; 
				text-shadow: 0 0 2px white, 0 0 4px white, 0 0 6px white, -2px -2px 8px white;
				font-size: 1.5rem; 
				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#mobile-page-indicator {height: 45px; background-color: rgb(210,196,215);}
			
/* Footer */
  
  			footer {background: black ;}
  			
  			div#webby-foot p a {color: #ddd; font-weight: 300; text-decoration: none;}
  			div#webby-foot p a:hover {color: violet; text-decoration: underline;}
  			
  			address a {color: violet; display:block;}
  			
			footer h4 {color: rgb(210,196,215)!important;}
			footer h4 {padding-bottom: 10px; border-bottom: 2px solid rgb(210,196,215); }
  
		
/* MAIN CONTENT styles */
		
				section.written-content p {
					font-size: clamp(1rem, 2vw, 1.4rem); 
					font-family: montserrat, sans-serif; 
					font-weight: 300;
					color: #555;					
					
					}
				
				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: #444;		
					margin-bottom: 30px;
					font-weight: 700;			
					
					}
				
				section.written-content h2.tagline {
					font-size: clamp(2rem, 3vw, 2.8rem); 
					font-family: montserrat, sans-serif; 
					color: rgba(115,57,125,1);	
					
					}
					
				section.written-content h2{
					font-size: clamp(2rem, 3vw, 2.8rem); 
					font-family: montserrat, sans-serif; 
					color: rgba(115,57,125,1);	
					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: rgba(115,57,125,1);					
					
					}
					
				section.written-content h4 {
					font-size: clamp(1.1rem, 1.5vw, 1.7rem); 
					font-family: montserrat, sans-serif; 
					color: rgba(115,57,125,1);		
					font-weight: 700;			
					
					}
					
				section.written-content h6 {
					font-size: clamp(1rem); 
					font-family: montserrat, sans-serif; 
					color: rgba(115,57,125,1);		
					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;
						background: rgba(0,0,0,0.1);
						padding: 30px;
						border: 1px solid darkgray;
						border-radius: 9px;
						margin: 30px 20px;
						box-shadow: 3px 3px 12px darkgray;
						
					}
					
				section.written-content blockquote p {
					 font-size: 1.5rem;
					 color: rgba(82, 36, 88, 1);
					
				}				
				section.written-content cite {
						font-style: italic;
						font-weight: 700;
						font-family: verdana;
					}
					
					
/* Responsive Styles */

						
				@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) {
	
				}
				
				h2, h5 {font-family: 'Montserrat', sans-serif;}
					
    /* Custom CSS to change the hamburger icon color to white */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }