Agency Pro- Home Top – Character Outline

[randefriedman]

I would like to have the individual characters in my lines of text, black outline on the white. So they show up better against the photo/background.
Thanks
Rande
usa.cloudappeal.com

http://usa.cloudappeal.com

[nutsandbolts]

Try adding this to your stylesheet:

.home-top {
	text-shadow: 0 3px 3px #000;
}

Edited to add: Just noticed that makes the button look weird, so add this as well:

.home-top .button {
        text-shadow: none;
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[randefriedman]

Hi NutsandBolts,

that gave it a shadow effect, which helped a bit, any way to make it a more definitive black outline? still losing legibility.
thanks,
Rande

[nutsandbolts]

Okay, take that out and try this one:

.home-top {
   -webkit-text-stroke: 2px black;
   color: white;
   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

.home-top .button {
text-shadow: none;
-webkit-text-stroke: none;
}

I personally don't love the way it looks but it may be closer than what I tried before.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[randefriedman]

hi,
that did not seem to do anything to the original. the first fix was closer,

would this fix make sense and if so, i am not certain how to install it

[randefriedman]

http://www.cardeo.ca/adding-an-outline-to-your-text-using-the-css3-text-stroke-property-3/

[nutsandbolts]

That's what I just gave you - what browser are you in? The text stroke property only shows up in certain browsers. If you're using IE (especially an older version) you may not be able to see it.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[randefriedman]

First, let me thank you for taking the time to help me, i sure do appreciate it.

i tried it on chrome, firefox and IE 11

here is my complete style sheet, just to make certain i installed it how i should

/*
Theme Name: Agency Pro Theme
Theme URI: http://my.studiopress.com/themes/agency/
Description: A mobile responsive and HTML5 theme built for the Genesis Framework.
Author: StudioPress
Author URI: http://www.studiopress.com/
Version: 3.0.0

Tags: black, orange, white, one-column, two-columns, three-columns, responsive-layout, custom-menu, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, premise-landing-page

Template: genesis
Template Version: 2.0.0

License: GPL-2.0+
License URI: http://www.opensource.org/licenses/gpl-license.php
*/

/* Table of Contents

- HTML5 Reset
- Baseline Normalize
- Box Sizing
- Float Clearing
- Defaults
- Typographical Elements
- Headings
- Objects
- Forms
- Tables
- Structure and Layout
- Site Containers
- Column Widths and Positions
- Column Classes
- Common Classes
- WordPress
- Genesis
- Titles
- Widgets
- Featured Content
- Plugins
- Genesis eNews Extended
- Genesis Latest Tweets
- Gravity Forms
- Jetpack
- Site Header
- Title Area
- Widget Area
- Site Navigation
- Header Navigation
- Primary Navigation
- Secondary Navigation
- Content Area
- Home Page
- Portfolio
- Entries
- After Entry
- Pagination
- Comments
- Sidebars
- Footer Widgets
- Site Footer
- Theme Colors
- Agency Pro Blue
- Agency Pro Green
- Agency Pro Orange
- Agency Pro Red
- Media Queries
- max-width: 1180px
- max-width: 1040px
- max-width: 800px
- max-width: 680px
- max-width: 480px

*/

/*
HTML5 Reset
---------------------------------------------------------------------------------------------------- */

/* Baseline Reset (normalize.css 2.1.2)
normalize.css v2.1.2 | MIT License | git.io/normalize
--------------------------------------------- */

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

/* Box Sizing
--------------------------------------------- */

*,
input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* Float Clearing
--------------------------------------------- */

.clearfix:before,
.entry-content:before,
.entry:before,
.footer-widgets:before,
.nav-primary:before,
.nav-secondary:before,
.pagination:before,
.site-container:before,
.site-footer:before,
.site-header:before,
.site-inner:before,
.widget:before,
.wrap:before {
content: " ";
display: table;
}

.clearfix:after,
.entry-content:after,
.entry:after,
.footer-widgets:after,
.nav-primary:after,
.nav-secondary:after,
.pagination:after,
.site-container:after,
.site-footer:after,
.site-header:after,
.site-inner:after,
.widget:after,
.wrap:after {
clear: both;
content: " ";
display: table;
}

/*
Defaults
---------------------------------------------------------------------------------------------------- */

/* Typographical Elements
--------------------------------------------- */

html {
font-size: 62.5%; /* 10px browser default */
}

body {
background-color: #d7c603;
color: #666;
font-family: 'EB Garamond', serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.625;
}

a,
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.agency-pro-home .featured-content img,
.button {
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}

::-moz-selection {
background-color: #333;
color: #fff;
}

::selection {
background-color: #333;
color: #fff;
}

a {
color: #d7c603;
text-decoration: none;
}

a img {
margin-bottom: -4px;
margin-bottom: -0.4rem;
}

a:hover {
color: #333;
}

p {
margin: 0 0 24px;
margin: 0 0 2.4rem;
padding: 0;
}

strong {
font-weight: 700;
}

ol,
ul {
margin: 0;
padding: 0;
}

blockquote,
blockquote::before {
color: #999;
}

blockquote {
margin: 40px 40px 24px;
margin: 4rem 4rem 2.4rem;
}

blockquote::before {
content: "\201C";
display: block;
font-size: 30px;
font-size: 3rem;
height: 0;
left: -20px;
position: relative;
top: -10px;
}

.entry-content code {
background-color: #333;
color: #ddd;
}

cite {
font-style: normal;
}

/* Headings
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Spinnaker', sans-serif;
font-weight: 400;
line-height: 1.2;
margin: 0 0 16px;
margin: 0 0 1.6rem;
}

h1 {
font-size: 36px;
font-size: 3.6rem;
}

h2 {
font-size: 30px;
font-size: 3rem;
}

h3 {
font-size: 24px;
font-size: 2.4rem;
}

h4 {
font-size: 20px;
font-size: 2rem;
}

h5 {
font-size: 18px;
font-size: 1.8rem;
}

h6 {
font-size: 16px;
font-size: 1.6rem;
}

/* Objects
--------------------------------------------- */

embed,
iframe,
img,
object,
video,
.wp-caption {
max-width: 100%;
}

img {
height: auto;
}

.featured-content img,
.gallery img {
width: auto; /* IE8 */
}

/* Forms
--------------------------------------------- */

input,
select,
textarea {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 1px 1px 3px #eee inset;
color: #999;
font-size: 14px;
font-size: 1.4rem;
padding: 16px;
padding: 1.6rem;
width: 100%;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
width: auto;
}

input:focus,
textarea:focus {
border: 1px solid #999;
outline: none;
}

::-moz-placeholder {
color: #999;
}

::-webkit-input-placeholder {
color: #999;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.entry-content .button {
background-color: #222;
border-radius: 3px;
border: none;
box-shadow: none;
color: #fff;
cursor: pointer;
font-family: 'Spinnaker', sans-serif;
padding: 16px 24px;
padding: 1.6rem 2.4rem;
text-transform: uppercase;
width: auto;
}

.button,
.entry-content .button {
display: inline-block;
}

button:hover,
input:hover[type="button"],
input:hover[type="reset"],
input:hover[type="submit"],
.button:hover,
.entry-content .button:hover {
background-color: #d7c603;
color: #fff;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
display: none;
}

/* Tables
--------------------------------------------- */

table {
border-collapse: collapse;
border-spacing: 0;
line-height: 2;
margin-bottom: 40px;
margin-bottom: 4rem;
width: 100%;
}

tbody {
border-bottom: 1px solid #ddd;
}

th,
td {
text-align: left;
}

th {
font-weight: bold;
text-transform: uppercase;
}

td {
border-top: 1px solid #ddd;
padding: 6px 0;
padding: 0.6rem 0;
}

/*
Structure and Layout
---------------------------------------------------------------------------------------------------- */

/* Site Containers
--------------------------------------------- */

.site-container {
padding-top: 61px;
padding-top: 6.1rem;
}

.site-inner,
.wrap {
margin: 0 auto;
max-width: 1140px;
}

.site-inner {
clear: both;
padding: 5% 0;
}

.agency-pro-home .site-inner {
padding: 0;
}

/* Column Widths and Positions
--------------------------------------------- */

/* Wrapping div for .content and .sidebar-primary */

.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 920px;
}

.content-sidebar-sidebar .content-sidebar-wrap {
float: left;
}

.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
float: right;
}

/* Content */

.content {
float: right;
width: 740px;
}

.content-sidebar .content,
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content {
float: left;
}

.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content {
width: 520px;
}

.full-width-content .content {
width: 100%;
}

/* Primary Sidebar */

.sidebar-primary {
float: right;
width: 360px;
}

.sidebar-content .sidebar-primary,
.sidebar-sidebar-content .sidebar-primary {
float: left;
}

/* Secondary Sidebar */

.sidebar-secondary {
float: left;
width: 180px;
}

.content-sidebar-sidebar .sidebar-secondary {
float: right;
}

/* Column Classes
Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
--------------------------------------------- */

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin-left: 2.564102564102564%;
}

.one-half,
.three-sixths,
.two-fourths {
width: 48.717948717948715%;
}

.one-third,
.two-sixths {
width: 31.623931623931625%;
}

.four-sixths,
.two-thirds {
width: 65.81196581196582%;
}

.one-fourth {
width: 23.076923076923077%;
}

.three-fourths {
width: 74.35897435897436%;
}

.one-sixth {
width: 14.52991452991453%;
}

.five-sixths {
width: 82.90598290598291%;
}

.first {
clear: both;
margin-left: 0;
}

/*
Common Classes
---------------------------------------------------------------------------------------------------- */

/* WordPress
--------------------------------------------- */

.avatar {
border-radius: 50%;
float: left;
}

.alignleft .avatar {
margin-right: 24px;
margin-right: 2.4rem;
}

.alignright .avatar {
margin-left: 24px;
margin-left: 2.4rem;
}

.search-form {
overflow: hidden;
}

.search-form input[type="submit"] {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
width: 1px;
}

img.centered,
.aligncenter {
display: block;
margin: 0 auto 24px;
margin: 0 auto 2.4rem;
}

a.alignnone img,
.alignnone img {
margin-bottom: 12px;
margin-bottom: 1.2rem;
}

.alignleft {
float: left;
text-align: left;
}

.alignright {
float: right;
text-align: right;
}

a.alignleft,
a.alignright {
max-width: 100%;
}

a.alignleft img,
img.alignleft,
.wp-caption.alignleft {
margin: 0 24px 24px 0;
margin: 0 2.4rem 2.4rem 0;
}

a.alignright img,
img.alignright,
.wp-caption.alignright {
margin: 0 0 24px 24px;
margin: 0 0 2.4rem 2.4rem;
}

.entry-content .wp-caption-text {
font-size: 14px;
font-size: 1.4rem;
text-align: center;
}

.widget_calendar table {
width: 100%;
}

.widget_calendar td,
.widget_calendar th {
text-align: center;
}

/* Genesis
--------------------------------------------- */

.breadcrumb {
color: #fff;
font-family: 'Spinnaker', sans-serif;
font-size: 1.4rem;
font-size: 14px;
margin-bottom: 20px;
margin-bottom: 2rem;
text-transform: uppercase;
}

.breadcrumb a {
color: #fff;
}

.archive-description,
.author-box {
background-color: #fff;
border-radius: 3px;
margin-bottom: 40px;
margin-bottom: 4rem;
}

.archive-description {
padding: 40px 40px 24px;
padding: 4rem 4rem 2.4rem;
}

.author-box {
padding: 40px;
padding: 4rem;
}

.author-box-title {
color: #333;
font-size: 16px;
font-size: 1.6rem;
margin-bottom: 4px;
margin-bottom: 0.4rem;
}

.author-box p {
margin-bottom: 0;
}

.author-box .avatar {
margin-right: 24px;
margin-right: 2.4rem;
}

/* Titles
--------------------------------------------- */

.entry-title {
color: #333;
font-size: 36px;
font-size: 3.6rem;
line-height: 1;
}

.entry-title a {
color: #333;
}

.widget-title {
color: #333;
font-size: 16px;
font-size: 1.6rem;
margin-bottom: 16px;
margin-bottom: 1.6rem;
text-transform: uppercase;
}

.archive-title {
font-size: 20px;
font-size: 2rem;
margin-bottom: 24px;
margin-bottom: 2.4rem;
}

/*
Widgets
---------------------------------------------------------------------------------------------------- */

.widget {
word-wrap: break-word;
}

.widget li {
list-style-type: none;
margin-bottom: 6px;
margin-bottom: 0.6rem;
}

.widget li li {
margin: 0;
padding: 0 0 0 20px;
padding: 0 0 0 2rem;
}

/* Featured Content
--------------------------------------------- */

.featured-content .entry {
margin-bottom: 20px;
margin-bottom: 2rem;
padding: 0 0 24px;
padding: 0 0 2.4rem;
}

.featured-content .entry-title {
font-size: 22px;
font-size: 2.2rem;
line-height: 1.1;
}

a.more-link {
font-family: 'Spinnaker', sans-serif;
text-transform: uppercase;
}

/*
Plugins
---------------------------------------------------------------------------------------------------- */

/* Genesis eNews Extended
--------------------------------------------- */

.enews-widget {
color: #999;
}

.enews-widget input {
margin-bottom: 16px;
margin-bottom: 1.6rem;
}

.enews-widget input:focus {
border: 1px solid #ddd;
}

.enews-widget input[type="submit"] {
background-color: #222;
color: #fff;
margin: 0;
width: 100%;
}

.enews-widget input:hover[type="submit"] {
background-color: #d7c603;
color: #fff;
}

/* Genesis Latest Tweets
--------------------------------------------- */

.latest-tweets ul li {
margin-bottom: 16px;
margin-bottom: 1.6rem;
}

/* Gravity Forms
--------------------------------------------- */

div.gform_wrapper input[type="email"],
div.gform_wrapper input[type="text"],
div.gform_wrapper textarea,
div.gform_wrapper .ginput_complex label {
font-size: 16px;
font-size: 1.6rem;
padding: 16px;
padding: 1.6rem;
}

div.gform_wrapper .ginput_complex label {
padding: 0;
}

div.gform_wrapper li,
div.gform_wrapper form li {
margin: 16px 0 0;
margin: 1.6rem 0 0;
}

div.gform_wrapper .gform_footer input[type="submit"] {
font-size: 14px;
font-size: 1.4rem;
}

/* Jetpack
---------------------------------------------- */

img#wpstats {
display: none;
}

/*
Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
background-color: #333333;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}

/* Title Area
--------------------------------------------- */

.title-area {
float: left;
padding: 16px 0;
padding: 1.6rem 0;
width: 300px;
}

.header-image .title-area {
padding: 0;
}

.site-title {
font-family: 'Spinnaker', sans-serif;
font-size: 28px;
font-size: 2.8rem;
line-height: 1;
margin: 0;
text-transform: uppercase;
}

.site-title a {
color: #fff;
}

.site-title a:hover {
color: #d7c603;
}

.site-description {
color: #999;
font-size: 16px;
font-size: 1.6rem;
font-weight: 400;
line-height: 1;
margin-bottom: 0;
}

/* Full width header, no widgets */

.header-full-width .title-area,
.header-full-width .site-title {
width: 100%;
text-align: center;
}

.header-image .site-description,
.header-image .site-title a {
display: block;
text-indent: -9999px;
}

.header-full-width.header-image .site-title a {
background-position: center !important;
margin: 0;
}

/* Logo, hide text */

.header-image .site-header .wrap {
padding: 0;
}

.header-image .site-title a {
float: left;
min-height: 60px;
width: 100%;
}

/* Widget Area
--------------------------------------------- */

.site-header .widget-area {
float: right;
text-align: right;
width: 800px;
}

.site-header .widget-area li {
margin: 0;
padding: 0;
}

.site-header .search-form {
float: right;
margin-top: 24px;
margin-top: 2.4rem;
}

/*
Site Navigation
---------------------------------------------------------------------------------------------------- */

.genesis-nav-menu {
clear: both;
color: #fff;
font-family: 'Spinnaker', sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.5;
width: 100%;
}

.genesis-nav-menu .menu-item {
display: inline-block;
text-align: left;
}

.genesis-nav-menu a {
border-top: 2px solid transparent;
color: #fff;
display: block;
padding: 18px 16px 20px;
padding: 1.8rem 1.6rem 2rem;
position: relative;
}

.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .v .current-menu-item > a:hover {
background-color: #282828;
border-color: #d7c603;
color: #d7c603;
}

.genesis-nav-menu .sub-menu .current-menu-item > a {
color: #999;
}

.genesis-nav-menu .sub-menu {
left: -9999px;
opacity: 0;
position: absolute;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
width: 180px;
z-index: 99;
}

.genesis-nav-menu .sub-menu a {
background-color: #282828;
border: none;
font-size: 12px;
font-size: 1.2rem;
padding: 16px;
padding: 1.6rem;
position: relative;
width: 180px;
}

.genesis-nav-menu .sub-menu a:hover {
background-color: #333;
}

.genesis-nav-menu .sub-menu .sub-menu {
margin: -50px 0 0 179px;
}

.genesis-nav-menu .menu-item:hover {
position: static;
}

.genesis-nav-menu .menu-item:hover > .sub-menu {
left: auto;
opacity: 1;
}

.genesis-nav-menu > .first > a {
padding-left: 0;
}

.genesis-nav-menu > .last > a {
padding-right: 0;
}

.genesis-nav-menu > .right {
display: inline-block;
float: right;
list-style-type: none;
padding: 0;
}

.genesis-nav-menu > .right > a,
.genesis-nav-menu > .date {
display: inline-block;
padding: 18px 16px 20px;
padding: 1.8rem 1.6rem 2rem;
}

.genesis-nav-menu > .search {
padding: 10px 0 0;
padding: 1rem 0 0;
}

.genesis-nav-menu .search input {
font-size: 12px;
font-size: 1.2rem;
padding: 12px;
padding: 1.2rem;
}

/* Site Header Navigation
--------------------------------------------- */

.site-header .genesis-nav-menu {
float: right;
width: auto;
}

/* Primary Navigation
--------------------------------------------- */

.nav-primary {
background-color: #383838;
}

/* Secondary Navigation
--------------------------------------------- */

.nav-secondary {
background-color: #444;
}

/*
Content Area
---------------------------------------------------------------------------------------------------- */

/* Home Page
--------------------------------------------- */

.agency-pro-home .content .widget {
background: #fff;
margin-bottom: 80px;
margin-bottom: 8rem;
padding: 40px;
padding: 4rem;
}

.agency-pro-home .content .featured-content {
padding: 0;
}

.agency-pro-home .content .featured-content .widget-title {
color: #fff;
text-align: center;
margin: -40px 0 0;
margin: -4rem 0 0;
padding-bottom: 20px;
padding-bottom: 2rem;
}

.agency-pro-home .content .featured-content .widget-title::before,
.agency-pro-home .content .featured-content .widget-title::after {
content: " ";
display: inline-block;
border-top: 2px solid #fff;
padding-bottom: 4px;
width: 15%;
}

.agency-pro-home .content .featured-content .widget-title::before {
margin-right: 12px;
margin-right: 1.2rem;
}

.agency-pro-home .content .featured-content .widget-title::after {
margin-left: 12px;
margin-left: 1.2rem;
}

.agency-pro-home .content .featured-content article ~ .widget-title {
clear: both;
color: #333333;
margin: 0;
padding: 20px 0;
padding: 2rem 0;
}

.agency-pro-home .content .featured-content article ~ .widget-title:before,
.agency-pro-home .content .featured-content article ~ .widget-title:after {
border-color: #333333;
}

.agency-pro-home .content .featured-content article ~ ul,
.agency-pro-home .content .featured-content .more-from-category {
margin-bottom: 40px;
margin-bottom: 4rem;
text-align: center;
}

.agency-pro-home .content .featured-content .entry {
border-radius: 0;
margin: 0;
padding: 0;
position: relative;
}

.agency-pro-home .content .featured-content .entry-image {
display: block;
margin-bottom: 0;
}

.agency-pro-home .content .featured-content .entry-header {
padding: 40px 40px 0;
}

.agency-pro-home .content .featured-content .entry-content {
padding: 0 40px;
}

.agency-pro-home .content .featured-content .entry-content p {
margin-bottom: 40px;
margin-bottom: 4rem;
}

.agency-pro-home .featured-content a:hover {
color: #d7c603;
}

.agency-pro-home .featuredpost .entry {
background: none;
float: left;
width: 33.33334%;
}

.agency-pro-home .featuredpost img.entry-image {
margin: 0;
}

.home-top .wrap {
color: #fff;
font-family: 'Spinnaker', sans-serif;
padding: 15% 0;
text-align: center;
}

.home-top .widget-title {
color: #fff;
font-size: 60px;
font-size: 6rem;
line-height: 1;
}

.home-top .button {
background-color: #fff;
border-radius: 50px;
color: #333;
text-transform: uppercase;
}

.home-top .widget .button:hover {
background-color: #333;
color: #fff;
}

.home-middle {
padding: 10% 0 5%;
}

.home-middle .featuredpost img.entry-image {
left: 0;
position: absolute;
}

.home-middle .featuredpost img:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
opacity: 0.1;
}

.home-middle .featuredpost .entry {
background-color: #333;
color: #fff;
}

.home-middle .featuredpost .entry {
min-height: 380px;
}

.home-middle .featuredpost .entry-title a {
color: #fff;
}

.home-bottom {
padding: 5% 0 10%;
}

.home-bottom .featuredpost .entry {
min-height: 320px;
}

.home-bottom .featuredpost .post:nth-of-type(3n+1),
.home-middle .featuredpost .post:nth-of-type(3n+1) {
clear: left;
}

.home-bottom .featuredpost .entry:hover {
background-color: #333;
color: #fff;
}

.home-bottom .featuredpost .entry:hover .entry-title a {
color: #fff;
}

/* Entries
--------------------------------------------- */

.entry {
background-color: #fff;
border-radius: 3px;
margin-bottom: 40px;
margin-bottom: 4rem;
padding: 40px 40px 24px;
padding: 4rem 4rem 2.4rem;
}

.entry-content ol,
.entry-content p,
.entry-content ul,
.quote-caption {
margin-bottom: 26px;
margin-bottom: 2.6rem;
}

.entry-content ol,
.entry-content ul {
margin-left: 40px;
margin-left: 4rem;
}

.entry-content ol li {
list-style-type: decimal;
}

.entry-content ul li {
list-style-type: square;
}

.entry-content ol ol,
.entry-content ul ul,
.entry-content .wp-caption p {
margin-bottom: 0;
}

.entry-content .search-form {
width: 50%;
}

.entry-meta {
color: #999;
font-size: 14px;
font-size: 1.4rem;
}

.entry-header .entry-meta {
margin-bottom: 20px;
margin-bottom: 2rem;
}

.entry-footer .entry-meta {
border-top: 2px solid #f5f5f5;
margin: 0 -40px;
margin: 0 -4rem;
padding: 32px 40px 8px;
padding: 3.2rem 4rem 0.8rem;
}

.entry-comments-link::before {
content: "\2B";
font-weight: 700;
margin: 0 4px 0 6px;
margin: 0 0.4rem 0 0.6rem;
}

.entry-categories,
.entry-tags {
display: block;
}

/* After Entry
--------------------------------------------- */

.after-entry {
background-color: #fff;
border-radius: 3px;
margin-bottom: 40px;
margin-bottom: 4rem;
padding: 40px;
padding: 4rem;
text-align: center;
}

.after-entry .widget {
margin-bottom: 40px;
margin-bottom: 4rem;
}

.after-entry .widget:last-child,
.after-entry p:last-child {
margin: 0;
}

.after-entry li {
list-style-type: none;
}

/* Pagination
--------------------------------------------- */

.archive-pagination {
clear: both;
font-family: 'Spinnaker', sans-serif;
font-size: 14px;
font-size: 1.4rem;
margin: 40px 0;
margin: 4rem 0;
text-transform: uppercase;
}

.archive-pagination a {
color: #fff;
}

.archive-pagination li {
display: inline;
}

.archive-pagination li a {
background-color: #fff;
border-radius: 3px;
color: #333;
cursor: pointer;
display: inline-block;
margin-bottom: 4px;
margin-bottom: 0.4rem;
padding: 8px 12px;
padding: 0.8rem 1.2rem;
}

.archive-pagination li a:hover,
.archive-pagination li.active a {
background-color: #d7c603;
color: #fff;
}

/* Comments
--------------------------------------------- */

.entry-pings,
.comment-respond,
.entry-comments {
background-color: #fff;
border-radius: 3px;
margin-bottom: 40px;
margin-bottom: 4rem;
padding: 40px;
padding: 4rem;
}

.comment-content {
clear: both;
}

.entry-comments .comment-author {
margin-bottom: 0;
}

.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
width: 50%
}

.comment-respond label {
display: block;
margin-right: 12px;
margin-right: 1.2rem;
}

.comment-list li,
.ping-list li {
list-style-type: none;
}

.comment-list li {
margin-top: 40px;
margin-top: 4rem;
padding: 0 40px;
padding: 0 4rem;
}

.comment-list li li {
margin-right: -32px;
margin-right: -3.2rem;
}

li.comment {
border-left: 2px solid #f5f5f5;
}

.comment-header {
color: #333;
font-family: 'Spinnaker', sans-serif;
}

.comment .avatar {
margin: 0 16px 24px 0;
margin: 0 1.6rem 2.4rem 0;
}

.comment-header .comment-meta,
.comment-header .comment-meta a {
color: #999;
font-size: 12px;
font-size: 1.2rem;
letter-spacing: 2px;
letter-spacing: 0.2rem;
text-transform: uppercase;
}

.comment-reply-link {
font-family: 'Spinnaker', sans-serif;
text-transform: uppercase;
}

.entry-pings .reply {
display: none;
}

.form-allowed-tags {
background-color: #f5f5f5;
font-size: 14px;
font-size: 1.4rem;
padding: 24px;
padding: 2.4rem;
}

/*
Sidebars
---------------------------------------------------------------------------------------------------- */

.sidebar {
color: #999;
}

.sidebar p:last-child {
margin-bottom: 0;
}

.sidebar li {
list-style-type: none;
margin-bottom: 6px;
margin-bottom: 0.6rem;
}

.sidebar ul > li:last-child {
margin-bottom: 0;
}

.sidebar .widget {
background-color: #fff;
border-radius: 3px;
margin-bottom: 40px;
margin-bottom: 4rem;
padding: 40px;
padding: 4rem;
}

.sidebar .enews-widget {
background-color: #333;
}

.sidebar .enews-widget .widget-title {
color: #fff;
}

/*
Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
background-color: #fff;
border-top: 1px solid #ececec;
color: #999;
clear: both;
padding: 60px 0 36px;
padding: 6rem 0 3.6rem;
}

.footer-widgets-1,
.footer-widgets-3 {
width: 350px;
}

.footer-widgets-2 {
width: 360px;
}

.footer-widgets-1 {
margin-right: 40px;
margin-right: 4rem;
}

.footer-widgets-1,
.footer-widgets-2 {
float: left;
}

.footer-widgets-3 {
float: right;
}

.footer-widgets .widget {
margin-bottom: 24px;
margin-bottom: 2.4rem;
}

.footer-widgets li {
list-style-type: none;
margin-bottom: 6px;
margin-bottom: 0.6rem;
}

.footer-widgets .search-form input:focus {
border: 1px solid #ddd;
}

/*
Site Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
background-color: #f5f5f5;
color: #999;
font-family: 'Spinnaker', sans-serif;
font-size: 10px;
font-size: 1rem;
letter-spacing: 2px;
letter-spacing: 0.2rem;
padding: 40px 0;
padding: 4rem 0;
text-align: center;
text-transform: uppercase;
}

.site-footer a {
color: #999;
}

.site-footer a:hover {
color: #333;
}

.site-footer p {
margin-bottom: 0;
}

/*
Theme Colors
---------------------------------------------------------------------------------------------------- */

/* Agency Pro Blue
--------------------------------------------- */

.agency-pro-blue .genesis-nav-menu .current-menu-item > a,
.agency-pro-blue .genesis-nav-menu .v .current-menu-item > a:hover,
.agency-pro-blue .genesis-nav-menu a:hover,
.agency-pro-blue .site-title a:hover,
.agency-pro-blue a,
.agency-pro-blue.agency-pro-home .featured-content a:hover {
color: #0cc4c6;
}

.agency-pro-blue .archive-pagination li a:hover,
.agency-pro-blue .archive-pagination li.active a,
.agency-pro-blue .breadcrumb a,
.agency-pro-blue .genesis-nav-menu a,
.agency-pro-blue .home-top a:hover,
.agency-pro-blue .site-title a,
.agency-pro-blue a:hover.button,
.agency-pro-blue a.button {
color: #fff;
}

.agency-pro-blue .genesis-nav-menu .sub-menu .current-menu-item > a,
.agency-pro-blue .site-footer a {
color: #999;
}

.agency-pro-blue .archive-pagination a,
.agency-pro-blue .entry-title a,
.agency-pro-blue .entry-title,
.agency-pro-blue .home-top a,
.agency-pro-blue .site-footer a:hover,
.agency-pro-blue a:hover {
color: #333;
}

.agency-pro-blue .genesis-nav-menu a:hover,
.agency-pro-blue .genesis-nav-menu .current-menu-item > a,
.agency-pro-blue .genesis-nav-menu .v .current-menu-item > a:hover {
border-color: #0cc4c6;
}

.agency-pro-blue .archive-pagination li a:hover,
.agency-pro-blue .archive-pagination li.active a,
.agency-pro-blue a:hover.button,
.agency-pro-blue button:hover,
.agency-pro-blue input:hover[type="button"],
.agency-pro-blue input:hover[type="reset"],
.agency-pro-blue input:hover[type="submit"],
body.agency-pro-blue {
background-color: #0cc4c6;
}

/* Agency Pro Green
--------------------------------------------- */

.agency-pro-green .genesis-nav-menu .current-menu-item > a,
.agency-pro-green .genesis-nav-menu .v .current-menu-item > a:hover,
.agency-pro-green .genesis-nav-menu a:hover,
.agency-pro-green .site-title a:hover,
.agency-pro-green a,
.agency-pro-green.agency-pro-home .featured-content a:hover {
color: #36c38c;
}

.agency-pro-green .archive-pagination li a:hover,
.agency-pro-green .archive-pagination li.active a,
.agency-pro-green .breadcrumb a,
.agency-pro-green .genesis-nav-menu a,
.agency-pro-green .home-top a:hover,
.agency-pro-green .site-title a,
.agency-pro-green a:hover.button,
.agency-pro-green a.button {
color: #fff;
}

.agency-pro-green .genesis-nav-menu .sub-menu .current-menu-item > a,
.agency-pro-green .site-footer a {
color: #999;
}

.agency-pro-green .archive-pagination a,
.agency-pro-green .entry-title a,
.agency-pro-green .entry-title,
.agency-pro-green .home-top a,
.agency-pro-green .site-footer a:hover,
.agency-pro-green a:hover {
color: #333;
}

.agency-pro-green .genesis-nav-menu a:hover,
.agency-pro-green .genesis-nav-menu .current-menu-item > a,
.agency-pro-green .genesis-nav-menu .v .current-menu-item > a:hover {
border-color: #36c38c;
}

.agency-pro-green .archive-pagination li a:hover,
.agency-pro-green .archive-pagination li.active a,
.agency-pro-green a:hover.button,
.agency-pro-green button:hover,
.agency-pro-green input:hover[type="button"],
.agency-pro-green input:hover[type="reset"],
.agency-pro-green input:hover[type="submit"],
body.agency-pro-green {
background-color: #36c38c;
}

/* Agency Pro Orange
--------------------------------------------- */

.agency-pro-orange .genesis-nav-menu .current-menu-item > a,
.agency-pro-orange .genesis-nav-menu .v .current-menu-item > a:hover,
.agency-pro-orange .genesis-nav-menu a:hover,
.agency-pro-orange .site-title a:hover,
.agency-pro-orange a,
.agency-pro-orange.agency-pro-home .featured-content a:hover {
color: #f07802;
}

.agency-pro-orange .archive-pagination li a:hover,
.agency-pro-orange .archive-pagination li.active a,
.agency-pro-orange .breadcrumb a,
.agency-pro-orange .genesis-nav-menu a,
.agency-pro-orange .home-top a:hover,
.agency-pro-orange .site-title a,
.agency-pro-orange a:hover.button,
.agency-pro-orange a.button {
color: #fff;
}

.agency-pro-orange .genesis-nav-menu .sub-menu .current-menu-item > a,
.agency-pro-orange .site-footer a {
color: #999;
}

.agency-pro-orange .archive-pagination a,
.agency-pro-orange .entry-title a,
.agency-pro-orange .entry-title,
.agency-pro-orange .home-top a,
.agency-pro-orange .site-footer a:hover,
.agency-pro-orange a:hover {
color: #333;
}

.agency-pro-orange .genesis-nav-menu a:hover,
.agency-pro-orange .genesis-nav-menu .current-menu-item > a,
.agency-pro-orange .genesis-nav-menu .v .current-menu-item > a:hover {
border-color: #f07802;
}

.agency-pro-orange .archive-pagination li a:hover,
.agency-pro-orange .archive-pagination li.active a,
.agency-pro-orange a:hover.button,
.agency-pro-orange button:hover,
.agency-pro-orange input:hover[type="button"],
.agency-pro-orange input:hover[type="reset"],
.agency-pro-orange input:hover[type="submit"],
body.agency-pro-orange {
background-color: #f07802;
}

/* Agency Pro Red
--------------------------------------------- */

.agency-pro-red .genesis-nav-menu .current-menu-item > a,
.agency-pro-red .genesis-nav-menu .v .current-menu-item > a:hover,
.agency-pro-red .genesis-nav-menu a:hover,
.agency-pro-red .site-title a:hover,
.agency-pro-red a,
.agency-pro-red.agency-pro-home .featured-content a:hover {
color: #de3233;
}

.agency-pro-red .archive-pagination li a:hover,
.agency-pro-red .archive-pagination li.active a,
.agency-pro-red .breadcrumb a,
.agency-pro-red .genesis-nav-menu a,
.agency-pro-red .home-top a:hover,
.agency-pro-red .site-title a,
.agency-pro-red a:hover.button,
.agency-pro-red a.button {
color: #fff;
}

.agency-pro-red .genesis-nav-menu .sub-menu .current-menu-item > a,
.agency-pro-red .site-footer a {
color: #999;
}

.agency-pro-red .archive-pagination a,
.agency-pro-red .entry-title a,
.agency-pro-red .entry-title,
.agency-pro-red .home-top a,
.agency-pro-red .site-footer a:hover,
.agency-pro-red a:hover {
color: #333;
}

.agency-pro-red .genesis-nav-menu a:hover,
.agency-pro-red .genesis-nav-menu .current-menu-item > a,
.agency-pro-red .genesis-nav-menu .v .current-menu-item > a:hover {
border-color: #de3233;
}

.agency-pro-red .archive-pagination li a:hover,
.agency-pro-red .archive-pagination li.active a,
.agency-pro-red a:hover.button,
.agency-pro-red button:hover,
.agency-pro-red input:hover[type="button"],
.agency-pro-red input:hover[type="reset"],
.agency-pro-red input:hover[type="submit"],
body.agency-pro-red {
background-color: #de3233;
}

/*
Media Queries
---------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 1180px) {

.site-inner,
.wrap {
max-width: 960px;
}

.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 740px;
}

.content {
width: 620px;
}

.site-header .widget-area {
width: 660px;
}

.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content,
.content-sidebar-sidebar .content {
width: 400px;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar-primary {
width: 300px;
}

.home-middle .featuredpost .entry {
min-height: 320px;
}

.home-bottom .featuredpost .entry {
min-height: 360px;
}

}

@media only screen and (max-width: 1023px) {

.site-inner,
.wrap {
max-width: 760px;
}

.content,
.content-sidebar-sidebar .content,
.content-sidebar-sidebar .content-sidebar-wrap,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar-content-sidebar .content,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-primary,
.sidebar-secondary,
.sidebar-sidebar-content .content,
.sidebar-sidebar-content .content-sidebar-wrap,
.site-header .widget-area,
.title-area {
width: 100%;
}

.site-container {
padding-top: 105px;
padding-top: 10.5rem;
}

.header-image .site-title a {
background-position: center !important;
margin: 0 0 6px;
margin: 0 0 0.6rem;
}

.genesis-nav-menu li,
.site-header ul.genesis-nav-menu,
.site-header .search-form {
float: none;
}

.genesis-nav-menu,
.site-description,
.site-header .title-area,
.site-header .search-form,
.site-title {
text-align: center;
}

.genesis-nav-menu a,
.genesis-nav-menu > .first > a,
.genesis-nav-menu > .last > a {
padding: 20px 16px;
padding: 2rem 1.6rem;
}

.genesis-nav-menu .sub-menu .sub-menu {
margin-top: -42px;
}

.site-header .search-form {
margin: 16px auto ;
margin: 1.6rem auto;
}

.genesis-nav-menu li.right {
display: none;
}

.sidebar .widget.enews-widget {
padding: 40px;
padding: 4rem;
}

.site-footer {
padding: 24px 0;
padding: 2.4rem 0;
}

.footer-widgets {
padding: 40px 5% 16px;
}

.footer-widgets-1 {
margin: 0;
}

.home-bottom .featured-content .post:nth-of-type(3n+1),
.home-middle .featured-content .post:nth-of-type(3n+1) {
clear: none;
}

.home-bottom .featured-content .post:nth-of-type(2n+1),
.home-middle .featured-content .post:nth-of-type(2n+1) {
clear: left;
}

.agency-pro-home .featuredpost .entry {
min-height: 380px;
width: 50%;
}

.genesis-nav-menu a {
padding: 10px 12px 12px;
padding: 1rem 1.2rem 1.2rem;
}

.genesis-nav-menu .sub-menu a {
padding: 12px;
padding: 1.2rem;
}

}

@media only screen and (max-width: 800px) {

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}

.agency-pro-home .wrap {
max-width: 640px;
}

.home-middle .featuredpost .entry {
min-height: 320px;
}

.entry-title {
font-size: 30px;
font-size: 3rem;
}

.site-inner {
padding: 5%;
}

}

@media only screen and (max-width: 680px) {

.site-container {
padding: 0;
}

.site-header {
position: relative;
}

.wrap {
width: 90%;
}

.agency-pro-home .content .wrap {
max-width: 380px;
}

.agency-pro-home .featuredpost .entry {
min-height: 380px;
width: 100%;
}

.agency-pro-home .content .featured-content .entry-header {
clear: both;
}

.home-top .widget-title {
font-size: 48px;
font-size: 4.8rem;
}

}

@media only screen and (max-width: 480px) {

.home-middle .featuredpost img.entry-image {
position: relative;
}

.home-middle .featuredpost .entry img:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}

.header-image .site-title a {
background-size: contain !important;
}

.home-top {
-webkit-text-stroke: 2px black;
color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}

.home-top .button {
text-shadow: none;
-webkit-text-stroke: none;
}

[Author]

Posts