/*
Theme Name: AVC 8
Theme URI: https://andyvaughn.com/
Description: Custom theme for Andy Vaughn Consulting.
Version: 8.1
Author: Andy Vaughn
Author URI: https://andyvaughn.com/
Tags: custom

This theme is not a template and the CSS, XHTML, 
and design may not be copied for private or 
commercial use, without express permission of the author.

The CSS, XHTML and design is copyright Andy Vaughn Consulting, LLC 2023.
*/

/* Import Reset Stylesheet */
@import url('reset.css');
@import url('genericons/genericons.css');

/* Begin Stylesheet */

/* General */
html, body {font-size: 62.5%;}
body {font-family: 'Roboto', sans-serif; font-weight: 300; background: #FFF url('images/soft-background.png') top left repeat; color: #000; border-top: 2px solid #333;}
h1, h2, h3, h4, h5, h6 {font-family: 'Roboto Condensed', sans-serif; font-weight: 700; text-transform: uppercase;}
em {font-style: italic;}
strong {font-weight: bold;}
a:link, a:visited {text-decoration: none; color: #666;}
a:hover, a:active, a:focus {color: #F63;}
abbr {font-style: italic;}
address {font-style: normal;}
acronym {border-bottom: 1px dashed #CCC;}

/* Skipper */
ul#skipper {position: absolute; top: -30px;}
ul#skipper a.skip-to:link, ul#skipper a.skip-to:visited, ul#skipper a.skip-to:hover, ul#skipper a.skip-to:active {color: #FFF; background: transparent;}

/* Site Header*/
#site-header {position: relative;}
#navigation li {float: left; text-align: center; text-transform: uppercase; letter-spacing: 1px;}
#navigation li a {display: block; border-top: 10px solid #666; padding: 5px 0;}
#navigation li.current-menu-item a:link, #navigation li.current-menu-item a:visited {border-color: #F63; color: #F63;} 
#navigation li a:hover, #navigation li a:active, #navigation li a:focus {border-color: #333; color: #333;} 
h1#logo {display: block; clear: left; text-indent: -9999px; background: url('images/web-designer-andy-vaughn-logo.png') top left no-repeat;}
h1#logo-sm a {display: block; clear: left; text-indent: -9999px; background: url('images/web-designer-andy-vaughn-logo-sm.png') top left no-repeat;}
a#contact-andy {display: block;}
a#contact-andy img {vertical-align: bottom;}

nav#social {display: block; border: 3px solid #333; border-width: 3px 0; text-align: center;}
nav#social h2, nav#social h3, nav#social p {color: #333;}
nav#social a {font-weight: bold;}
nav#social a:link, nav#social a:visited {color: #333;}
nav#social a:hover, nav#social a:active, nav#social a:focus {color: #666;}
nav#social a.twitter:after {content: '\f202'; font-family: 'Genericons'; font-weight: bold; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
nav#social a.facebook:after {content: '\f203'; font-family: 'Genericons'; font-weight: bold; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
nav#social a.googleplus:after {content: '\f206'; font-family: 'Genericons'; font-weight: bold; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
nav#social a.youtube:after {content: '\f213'; font-family: 'Genericons'; font-weight: bold; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
nav#social a.linkedin:after {content: '\f207'; font-family: 'Genericons'; font-weight: bold; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

/* Main */
#main h1.entry-title, #main h1.page-title {display: block; border: 3px solid #333; border-width: 3px 0; text-align: center; color: #333;}

/* Content */
#content-header {text-align: center;}
#content-header h2 {font-weight: bold; color: #333;}
#content-header p {text-transform: uppercase; color: #666; background: url('images/latest-bg.png') center center no-repeat;}

.post {margin: 0 0 80px;}
.post h3, .post h2.entry-title {text-align: center; font-weight: normal; color: #666;}
.post h3 a:link, .post h3 a:visited, .post h2.entry-title a:link, .post h2.entry-title a:visited {color: #666;}
.post h3 a:hover, .post h3 a:active, .post h3 a:focus, .post h2.entry-title a:hover, .post h2.entry-title a:active, .post h2.entry-title a:focus {color: #F63;}
.post h4 {color: #000; text-align: center;}
.post p {color: #111;}
.post a.more-link {display: block; text-transform: lowercase; border: 5px solid #333; border-width: 5px 0; text-align: center; padding: 5px 0;}
.post a.more-link:link, .post a.more-link:visited {color: #333; border-color: #333;}
.post a.more-link:hover, .post a.more-link:active, .post a.more-link:focus {color: #F63; border-color: #F63; cursor: pointer;} 
.post blockquote {color: #000; font-family: "Courier New", Courier, monospace;}
.post blockquote cite {display: block; font-family: "Myriad Pro", Myriad, Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: right;}
.post .alignleft, .post .alignright, .post .aligncenter {display: block;}
.post .alignleft {float: left;}
.post .alignright {float: right;}
.post ul {list-style: square;}
.post p.meta {text-align: center;}
.post a:link, .post a:visited {color: #F63;}
.post a:hover, .post a:active, .post a:focus {color: #333;}

.pagination {text-align: center; color: #333; border: 3px solid #333; border-width: 3px 0;}
.pagination {position: relative;}
.pagination a:link, .pagination a:visited {color: #333;}
.pagination a:hover, .pagination a:active, .pagination a:focus {color: #F63;}
.pagination li.next-link {position: absolute;}
.pagination li.previous-link {position: absolute;}

#comments h3 {color: #666; text-align: center;}
#comments form#commentform {color: #333;}

/* Footer */
#footer-navigation li {float: left; text-align: center; text-transform: uppercase; letter-spacing: 1px;}
#footer-navigation li a {display: block; border-top: 4px solid #999; padding: 5px 0;}
#footer-navigation li a:hover, #footer-navigation li a:active, #footer-navigation li a:focus {border-color: #333; color: #333;} 

#footer p, #footer address {text-align: right; color: #666;}
#footer span.phonenum {display: block; font-weight: bold; letter-spacing: 2px;}

/* Custom */
.ninja-forms-required-items {margin: 0 0 20px;}
.ninja-forms-all-fields-wrap {font-size: 1.3em;}
.ninja-forms-all-fields-wrap .checkbox-wrap input[type="checkbox"] {display: block; height: 25px; width: 25px;}

/* Media Queries */
@media screen and (min-width: 320px) and (max-width: 539px) {
/**
 * Reduced single-column layout
 * small-size
 * max-width: 320px (per-constraints)
 */
    /* Container */
    #container {width: 320px; margin: 10px auto 40px;}

    /* Site Header*/
    #site-header {width: 320px;}
    #navigation li {width: 95px; margin: 0 5px 50px; font-size: 1.8rem;}

	h1#logo {margin: 0 0 0 90px; width: 230px; height: 82px; background-size: 230px 82px;}
	h1#logo-sm a {margin: 0 0 0 180px; width: 140px; height: 50px;}
	a#contact-andy {width: 320px; height: 264px; margin: 10px 0 0;}
	a#contact-andy img {width: 320px; height: 264px;}

	nav#social {width: 320px; margin: 0 0 40px; padding: 36px 0 16px;}
	nav#social h2 {font-size: 2.1rem; line-height: 1.25;}
	nav#social h3 {font-size: 1.3rem; line-height: 1.25;}
	nav#social p {font-size: 1.3rem; margin: 0 0 24px; line-height: 1.25;}
	nav#social a {padding: 0 15px;}
	nav#social a.twitter:after {font-size: 36px;}
	nav#social a.facebook:after {font-size: 36px;}
	nav#social a.googleplus:after {font-size: 36px;}
	nav#social a.youtube:after {font-size: 36px;}
	nav#social a.linkedin:after {font-size: 36px;}

	/* Main */
	#main h1.entry-title, #main h1.page-title {width: 320px; margin: 20px 0 40px; padding: 36px 0 16px; font-size: 3.2rem;}

	/* Content */
	#content {width: 320px; margin: 0 auto 80px;}
	#content-header {margin: 0 0 40px;}
	#content-header h2 {font-size: 3.2rem;}
	#content-header p {font-size: 1.8rem;}

	.post {margin: 0 0 80px;}
	.post h2 {font-size: 1.8rem;}
	.post h3, .post h2.entry-title {font-size: 1.8rem; margin: 0 0 20px;}
	.post h4 {font-size: 1.5rem; line-height: 1.75;}
	.post p {font-size: 1.5rem; line-height: 1.75; margin: 0 0 20px;}
	.post a.more-link {width: 140px; margin: 20px auto; font-size: 1.8rem;}
	.post blockquote {margin: 0 0 20px; line-height: 1.5;}
	.post .alignnone {margin: 20px 0;}
	.post .alignleft {margin: 20px 20px 20px 0;}
	.post .alignright {margin: 20px 0 20px 20px;}
	.post .aligncenter {margin: 20px auto;}
	.post img {max-width: 320px;}
	.post ul li, .post ol li, .post dl dt, .post dl dd {margin: 10px 0 10px 20px; font-size: 1.3rem; line-height: 1.8;}
	.post ul li li, .post ol li li {font-size: 1rem;}
	.post p.meta {text-align: center; margin: 40px 0 0;}

	.pagination {margin: 60px 0 0; font-size: 1.2rem; padding: 18px 0 12px;}
	.pagination li.next-link {right: 5px; top: 5px; max-width: 155px;}
	.pagination li.previous-link {left: 5px; top: 5px; max-width: 155px;}

	#comments {margin: 20px 0; padding: 10px;}
	#comments h3 {font-size: 1.8rem;}
	#comments ol {font-size: 1.3rem; line-height: 1.5;}
	#comments ol li {margin: 10px 0 30px 20px;}
	#comments form#commentform {font-size: 1.3rem; margin: 20px;}

	/* Footer */
	#footer-navigation {margin: 0 0 80px;}
	#footer-navigation li {width: 70px; margin: 0 5px 50px; font-size: 1.5rem;}
	#footer p, #footer address {font-size: 1.3rem; line-height: 1.8;}
	
}/*/mediaquery*/

@media screen and (min-width: 540px) {
/**
 * Tablet and Desktop layout
 * small-size
 * max-width: 540px (per-constraints)
 */

    /* Container */
    #container {width: 540px; margin: 10px auto 40px;}

    /* Site Header*/
    #site-header {width: 540px;}
    #navigation li {width: 160px; margin: 0 10px 50px; font-size: 1.8rem;}

	h1#logo {margin: 0 0 0 310px; width: 230px; height: 82px; background-size: 230px 82px;}
	h1#logo-sm a {margin: 0 0 0 400px; width: 140px; height: 50px;}
	a#contact-andy {width: 460px; height: 380px; margin: 10px 40px 0;}
	a#contact-andy img {width: 460px; height: 380px;}

	nav#social {width: 540px; margin: 0 0 40px; padding: 36px 0 16px;}
	nav#social h2 {font-size: 3.2rem; line-height: 1.25;}
	nav#social h3 {font-size: 1.8rem; line-height: 1.25;}
	nav#social p {font-size: 1.8rem; margin: 0 0 24px; line-height: 1.25;}
	nav#social a {padding: 0 20px;}
	nav#social a.twitter:after {font-size: 42px;}
	nav#social a.facebook:after {font-size: 42px;}
	nav#social a.googleplus:after {font-size: 42px;}
	nav#social a.youtube:after {font-size: 42px;}
	nav#social a.linkedin:after {font-size: 42px;}

	/* Main */
	#main h1.entry-title, #main h1.page-title {width: 540px; margin: 20px 0 40px; padding: 36px 0 16px; font-size: 4.2rem;}

	/* Content */
	#content {width: 540px; margin: 0 auto 80px;}
	#content-header {margin: 0 0 40px;}
	#content-header h2 {font-size: 4.2rem;}
	#content-header p {font-size: 1.8rem;}

	.post {margin: 0 0 80px;}
	.post h2 {font-size: 1.8rem;}
	.post h3, .post h2.entry-title {font-size: 1.8rem; margin: 0 0 20px;}
	.post h4 {font-size: 1.5rem; line-height: 1.75;}
	.post p {font-size: 1.5rem; line-height: 1.75; margin: 0 0 20px;}
	.post a.more-link {width: 140px; margin: 20px auto; font-size: 1.8rem;}
	.post blockquote {margin: 0 0 20px; line-height: 1.5;}
	.post .alignnone {margin: 20px 0;}
	.post .alignleft {margin: 20px 20px 20px 0;}
	.post .alignright {margin: 20px 0 20px 20px;}
	.post .aligncenter {margin: 20px auto;}
	.post ul li, .post ol li, .post dl dt, .post dl dd {margin: 10px 0 10px 20px; font-size: 1.3rem; line-height: 1.8;}
	.post ul li li, .post ol li li {font-size: 1rem;}
	.post p.meta {text-align: center; margin: 40px 0 0;}

	.pagination {margin: 60px 0 0; font-size: 1.5rem; padding: 18px 0 12px;}
	.pagination li.next-link {right: 10px; top: 10px;}
	.pagination li.previous-link {left: 10px; top: 10px;}

	#comments {margin: 20px 0; padding: 10px;}
	#comments h3 {font-size: 1.8rem;}
	#comments ol {font-size: 1.3rem; line-height: 1.5;}
	#comments ol li {margin: 10px 0 30px 20px;}
	#comments form#commentform {font-size: 1.3rem; margin: 20px;}

	/* Footer */
	#footer-navigation {margin: 0 0 80px;}
	#footer-navigation li {width: 115px; margin: 0 10px 50px; font-size: 1.5rem;}
	#footer p, #footer address {font-size: 1.3rem; line-height: 1.8;}
 
}/*/mediaquery*/