body {
  background-color: #a1bfc6;
  background-image: url(https://www.joeinfo.com/wp4.jpg);
  margin: 0;
  padding: 0;
  border-width: 0;
  font-family: Georgia, Times New Roman, Garamond, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 32px;
  color: rgba(0,0,0,.87);
  background-blend-mode: lighten; 
}
 h1, h2, h3, h4 {
     font-family: Georgia, Times New Roman, Garamond, serif;
}
 img {
     border: 0 
}
p {
     margin-top: 1.5em; 
}
#wrapper {
     width: 100%;
     max-width: 1100px;
     border-left: 2px solid gray;
     border-right: 2px solid gray;
     border-bottom: 2px solid gray;
     padding: 0;
     margin: 0 auto;
     background-color: #EAEAE9;
	 box-shadow: 0 0 8px 2px #666;
}
 .mainMessage .subhead {
     font-family: Georgia, Times New Roman, Garamond, serif;
     color: rgba(0, 0, 0, 0.87);
     font-size: 20px;
     line-height: 1.4em;
     font-weight: 800;
	 padding-top: 30px; 
}
 img#logoimage {
     display: block;
     margin: 0 auto;
     width: 100%;
     height: auto 
}
 p#tagline {
     background-color: #444;
     color: #fff;
     width: 100%;
     text-align: center;
     padding: 10px 0;
     margin: 0;
     border-bottom: 3px solid #fff;
     border-top: 3px solid #fff;
     font-weight: 400 
}
 #navigation ul li#contactDetails a {
     border: 0;
     margin: 0;
     padding: 0;
     line-height: 1.4em 
}
 a#contactus-link {
     border-bottom: 0 
}
 @media only screen and (min-width:1px) {
     #contactDetails, .mobilebgone {
         display: none; 
    }
.mainMessage ul.ashevillewebsitetips {
         line-height: 1.6em;
    list-style-position: outside;
    list-style-image: url(https://www.joeinfo.com/box-no-checkmark.png);
    list-style-type: disc; 
    }
}
 @media only screen and (min-width:523px) {
     #contactDetails {
         display: block; 
    }
	.mobilebgone {
         display: inline; 
    }
     a#contactus-link {
         border-bottom: 0;
    }
     .mainMessage ul.ashevillewebsitetips {
         line-height: 1.6em 
    }
}
 #navigation {
     margin: 0;
     padding: 10px 0 0;
     float: left;
     width: 300px 
}
 #navigation ul {
     list-style-type: none;
     width: 100%;
     margin: 0;
     padding: 0 
}
 #navigation ul li#contactDetails {
     padding-right: 20px;
     line-height: 1.4em;
     padding-bottom: 0 
}
 #mainContent {
     width: 100%;
     max-width: 798px;
     background-color: #f9f9f9;
     float: left;
     padding: 0;
     margin: 0;
     border-left: 2px solid #ccc 
}
 #mainContent img#featureimage, #mainContent img.featureimage {
     display: block;
     width: 100%;
     height: auto;
     border: 0 
}
 #mainContent #mainMessage {
     position: relative;
     width: 90%;
     padding: 0 20px;
     border: 0 
}
 #bottomIDbox {
    background-color: #ab3730;
    height: auto;
    width: 100%;
    bottom: 0;
    border-top: 2px solid gray;
    color: #fff;
    clear: both;
    font-size: 16px;
    line-height: 24px;
padding-bottom:15px;
position:relative;
}
 #bottomIDbox img#smallLogo {
     width: 67px;
     height: 65px;
     padding: 25px 10px 20px 20px;
     margin-right: 15px;
     display: inline;
     float: left;
}
#bottomIDbox h4 {
    font-family: Verdana, sans-serif;
    color: #fff;
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    font-weight: normal;
}
 #contactus-bottom {
     width: 100%;
     max-width: 500px;
     color: #000;
     text-align: center;
     margin: 15px auto;
}
 #contactus-bottom a {
 color:#0000cf;
}
 .webdesign {
     color: #fff;
     font-size: 20px;
     font-family: Verdana, sans-serif;
     line-height: 32px;
     background-color: #c66;
     background-position: 0 0;
     margin: 0;
     text-align: center;
     padding: 0;
     border-width: 0 
}



 #navigation a, #leftnavfeaturepost {
     color: #00336f;
     font-size: 17px !important;
     font-family: Verdana, sans-serif;
     font-weight: 400;
     text-decoration: none;
     text-align: right;
     display: block;
     padding-top: 8px;
     padding-right: 15px;
     padding-bottom: 7px;
     position: relative;
     border-bottom: 1px solid #fff 
}
#leftnavfeaturepost {
font-weight:bold; 
text-align:center; 
border:none; 
line-height:24px !important; 
margin:10px 0;
}

#mobilenav {
    color:gold;
    background-color: #ab3730;
    text-align: center;
    border-bottom: 3px solid #fff;
    margin: 0;
    padding: 10px 0;
    width: 100%;
    position: sticky; /* Makes it sticky */
    top: 0; /* Sticks to the top */
    z-index: 1000; 
	height:35px !important;
}
#mobilenav a {
     color:#FFF;
	 padding-top:13px !important;
	 padding-bottom:13px !important;
}
#mobilenav a:hover {
     color: #fff;
	 text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
#navigation a:hover {
background-color:#C66 !important;
color:#fff;
 }
a.nohover:hover {
background-color:#eaeae9 !important;
color:#3838FF !important;
text-decoration:underline !important;
}
img.mobilemenuicons {border-bottom:2px solid transparent;}
img.mobilemenuicons:hover {border-bottom:2px solid white;}

body#home a#homenav, body#about a#aboutnav, body#small-business-website-example a#examplenav, body#faqs a#faqsnav, body#asheville-seo a#seonav,body#contactus a#contactusnav,body#tips a#tipsnav, body#blog a#blognav {
     background-color:#C66 !important;
     color: #fff;
}
 body#home a#homeHoriz, body#about a#aboutHoriz, body#small-business-website-example a#exampleHoriz, body#faqs a#faqsHoriz, body#asheville-seo a#seoHoriz, body#contactus a#contactusHoriz,body#tips a#tipsHoriz, body#blog a#blogHoriz {
     /* text-decoration-line: overline underline; */
	 color: #ffd700;
	 text-underline-offset: 4px;
}

/* horizontal top nav for phone */
@media screen and (max-width:599px) {
#mobilenav a {
  font-weight:400 !important;  
}
 body#home a#homeHoriz, body#about a#aboutHoriz, body#small-business-website-example a#exampleHoriz, body#faqs a#faqsHoriz, body#asheville-seo a#seoHoriz, body#contactus a#contactusHoriz,body#tips a#tipsHoriz, body#blog a#blogHoriz { 
  font-weight:400 !important;  
}
#websiteupdate {
padding: 10px 20px !important;
}
}

/* horizontal top nav for tablet */
@media screen and (min-width:600px) {
#mobilenav a { 
  font-weight:400;
  font-size:1.2em; 
}
}
 
 #contact {
     color: #333;
     font-family: Verdana, sans-serif;
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
     text-align: right;
     display: block;
     padding-top: 24px;
     padding-right: 50px;
     padding-bottom: 6px 
}
 #contactDetails {
     color: #333;
     font-family: Verdana, sans-serif;
     font-size: 14px;
     text-align: right;
     display: block;
     padding-right: 50px;
     padding-bottom: 100% 
}
 h1 {
     color: #c00;
     font-size: 32px;
     font-weight: 400;
     line-height: 1.2em; 
}
 h2 {
     text-transform: none;
	 color: #c00;
     text-align: center;
     border-bottom: 2px solid #c00;
     margin: 12px 0 .7em;
     font-family: Georgia, Times New Roman, Garamond, serif;
	 max-width:700px;
     color: rgba(0, 0, 0, 0.87);
     font-size: 30px;
     line-height: 40px;
     padding:3px 0;
     font-weight: 400;
	 font-style: normal;
 	 border:none
}
 h1.websitetips1 {
     text-transform: none;
     color: #c00;
     font-size: 40px;
	 line-height:46px;
     text-align: center;
     padding: 47px 20px 10px;
     margin: 12px auto 0;
     font-family:Georgia, Times New Roman, Garamond, serif;
}
 .websitetips2  {
     color: #000;
     font-size: 34px;
	 line-height:44px;
     border: 0;
     text-transform: none;
     text-align: center;
     padding-bottom: unset;
	 max-width:700px;
	 margin:50px auto 30px;
}
.width100 {
    width: 100% !important;
    max-width: unset;
}
 h3,h4 {
     color: rgba(0, 0, 0, 0.87);
     font-size: 26px;
     line-height: 39px;
     margin-bottom: 0;
     margin-top: 0;
     padding: 0;
	 font-weight:800;
}
 h5 {
     color: #000;
}
 .marketing {
     color: #000;
     font-weight:normal;
	 font-size:26px;
	 line-height:31px;
	 font-family:Georgia, Times New Roman, Garamond, serif;
}
 a {
     text-decoration: none;
     color: #3838FF;
}
 a:hover {
     color: #3838FF;
     text-decoration: underline 
}
 a:visited {
     color: #860071;
     text-decoration: none 
}
p#breadcrumbs {
text-align:right !important; 
width:96%;
max-width:833px;
}
a.breadcrumbs {
color:#BD0000;
 }
 .agencies {
}
 #internet2 ul {
     list-style-position: outside;
     list-style-image: url(https://www.joeinfo.com/low-cost.gif);
     list-style-type: disc 
}
 ul {
     line-height: .8em 
}

 .mainMessage ul li, .mainMessage ol li {
     margin-top: .8em;
  font-size: 20px;
  line-height: 32px;
}
 .clients img {
     margin: 8px;
     float: left 
}
 .testdiv {
     width: 230px;
     height: 190px;
     overflow: hidden;
     float: left;
     margin: 5px;
     margin-bottom: 10px 
}
 img.testimg {
     width: 230px;
     height: auto 
}

 @media screen and (max-width:1116x) {
     #seo-service, #navigation, #contact-info, #seo-service {
         display: none;
    }
     #mobilenav, #mobile-header-wrapper {
         display: block;
    }
     #mainContent {
         max-width:unset;
    }
}
 @media screen and (min-width:1117px) {
     #seo-service, #navigation, #mobile-header-wrapper, #contact-info, #seo-service {
         display: block;
    }
     #mobilenav, #mobile-header-wrapper {
         display: none;
    }
}
#table-of-contents {
    border: 1px solid #c5ccd1;
    border-radius: 8px;
    margin: 30px 0;
    padding: 10px 30px 10px;
    }
legend {
    margin:auto; 
 }
#toc-headline {
    font-weight:bold;
    padding: 0 0 15px;
  border-bottom: 1px solid gray;
  text-align:center;
} 
.featuredclientsite {
text-align:center; 
width:96%;
max-width:600px; 
display:block; 
margin:0 auto;
}
.featuredclientcaption {
width:100%;
max-width:600px;
text-align:right;
font-size:16px; 
padding:10px 0;
margin:0 auto;
}

div.readmore {
width:233px; height:280px; text-align:center; float:left; padding:15px; margin:2px; border:1px solid gray; font-size:16px; line-height:22px; background-color:white;
}

div.readmore img {
margin:auto; border:1px solid gray;
}

div.readmore h3, div.readmore h4 {
font-size:16px; line-height:20px; margin:10px 0 0; font-family:Verdana, sans-serif;
}

div.readmore p {
margin-top:10px;
font-size: 16px !important;
line-height:22px !important;
}

#blogfeatureimage {
border:1px solid gray; 
width:100%; 
max-width:500px; 
height:auto; 
margin:auto;
aspect-ratio: 1/1;
 }
 #blogfeatureimagecaption, .blogfeatureimagecaption {
 text-align:left !important; 
 font-size:.9em !important; 
 line-height:1.5em !important;
 margin-top: 10px; 
 }
  .arrow-container {
  background-color: #58a7b5; /* background color */
  border-radius: 8px;         /* Rounded corners */
  width: 45px;                /* Container width */
  height: 45px;               /* Container height */
  display: flex;              /* Flexbox to center the arrow */
  justify-content: center;    /* Center horizontally */
  align-items: center;        /* Center vertically */
  margin-bottom:30px;
}
div.readmore {width:196px !important; }
div.readmore p:first-of-type {text-align:left !important;}

div.web-expert-cta {
  width:310px;
  height:114px;
  margin:20px auto;
  padding:0;
  position:relative;
  overflow:hidden;
  color:#fff;
  font-size:17px;
  background:#C80000 url('https://www.joeinfo.com/asheville/webdesigner.png') no-repeat left;
  border-radius:15px;
  font-family:Arial, sans-serif;
 }
 
div.web-expert-cta p {
  position:absolute;
  top:15px;
  left:90px;
  width:210px;
  margin:0;
  font-weight:400;
  line-height:1.3em; 
}

@media screen and (max-width:650px) {
#footercustomer {display:none;}
} 
#footercustomer { position:absolute; height:165px; width:auto; right:0; bottom:0px;
}