/*!
Theme Name: ashleycotton
Theme URI: http://underscores.me/
Author: Wayne Goodman
Author URI: http://waynegoodman.com
Description: A theme for Ashley Cotton Decorative Arts
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ashleycotton
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ashleycotton is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/



/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text, .hidden {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

.site { display: flex; flex-direction: column; min-height: 100vh;}
.secondaryTopRule {border-top:1px solid #704214}
	
h1 {color:#704214; font-size:36px; font-size: clamp(32px, 3vw, 2.7rem);  margin:0 auto 34px; text-align:center; 
 font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
	max-width:940px;
	line-height:1.2;
		}

.page-id-12 h1 {font-size: clamp(28px, 3vw, 2.4rem);}
		
		h2 {color:#999; font-size:36px; font-size: clamp(23px, 2.8vw, 2.2rem);  margin:0 auto 52px; text-align:center; 
 font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
	max-width:920px;
	line-height:1.2;
		}
		
		
body { min-height: 100vh; margin: 0;  
	font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
		font-size:1.23em; line-height:1.65;
		}
		
		strong {font-weight:500}
		.footer a, footer p {text-decoration:none; color:#777; margin-bottom:0px; line-height:1.4 }
		.footer a:hover {color:#704214; text-decoration:underline}
		img {max-width:100%; height:auto}
		.pipe {color:#704214; padding:0 8px; opacity:0; display:block; height:6px !important}

	
.header { min-height: 126px;  }
		
		.logo {max-width:380px; margin:42px auto 0; padding:0 3%}
		.logoLetterColors{fill:#704214}.logoRuleColors{fill:#999}
		.cotton-content {  margin: 4px auto 62px; width:90%  }
		.footerContain {  margin: 20px 5% 28px; margin:0 auto; width:90%  }
		.cotton-content p {max-width:1000px; margin:0 auto 22px; color:#777}
		
		.footerContain {  padding:32px 0; border-top:1px solid #704214; text-align:center;}
		

.footer { min-height: 150px; }
		.footer p { margin:0 auto 2px}
		.footer h2 {font-size:24px; margin:8px auto; color:#704214}
 
		.main { flex: 1;}
		
		.artContain { flex-wrap:wrap; display:flex; flex-direction:row; gap:1%; width:100%; padding: 22px 0 18px; border-top:1px solid #704214; border-bottom:1px solid #704214}
		.art {background:#fff; width:32.6%; height:auto; position:relative}
		
		.spacer52 {width:100%; height:52px}
		
				.art h2 {opacity:0; z-index:2; position:absolute; color:rgba(255, 255, 255, 0.7); font-size: clamp(19px, 2vw, 1.9rem); bottom:46%; right:0px; left:0; padding:0; margin:0 auto; font-weight:bold; text-transform:uppercase; line-height:1.2}
		.art a {width:100%; height:100%; display:block; position:absolute; z-index:3}
		.art img {z-index:0; position:relative; }
		
		.art:hover {background:#704214}
		.art:hover img {opacity:.6; filter: sepia(1); }
		.art:hover h2 {opacity:1;}
		.footer a {background:#704214; color:#fff;display:block; padding:4px 0; font-weight:600; font-size:.9em; -webkit-border-radius: 33px;
-moz-border-radius: 33px;
border-radius: 33px; max-width:280px; margin:auto}
		.footer a:hover {color:#fff}
		.contact-footer {padding:11px 0 22px}
		
		@media (min-width:640px) {
			.contact-footer {padding:0}
		  	.pipe {color:#704214; padding:0 8px; opacity:1; display:inline-block !important; height:inherit !important}
			.footer a { background:none; color:inherit;  display:inline-block; padding:inherit; font-size:inherit; font-weight:inherit }
		.footer a:hover {color:#704214; text-decoration:underline; background:none}
		}
		
		
.headerPhone {position:absolute; top:8px; left:3%; text-decoration:none; font-weight:600; color:#704214; font-size:1em; z-index:2 }
		
		
@media (min-width:981px) {
	
	.cotton-content {  margin: 18px auto 62px;}
	 .headerPhone { top:24px; right:2.6%;  font-size:1.4em; z-index:3; left:inherit; font-weight:500}
	
	.header {display:flex; flex-direction:row;width:90%; margin:0 auto; padding-top:22px; position:relative}
	.logo {width:380px;max-width:420px; margin:0; padding:0 }
	.primaryNav {padding:44px 0 0 0; width:calc(100% - 400px) !important; position:relative }
	
	.art {background:#fff; width:15.8%; height:auto}

		}
		
		@media (min-width:1440px) {
			.primaryNav {padding:64px 0 0 0;}
		}

article a {color:#704214}
article a:hover {color:#897a66}