/* ==========================================================================
   Table of Contents
   ========================================================================== */

/*

    0.  Normalize
    1.  Icons
    2.  General
    3.  Utilities
    4.  General
    5.  Single Post
    6.  Tag Archive
    7.  Read Next
    8.  Third Party Elements
    9.  Pagination
    10.  Footer
    11. Media Queries (Tablet)
    12. Media Queries (Mobile)
    13. Animations

*/

/* ==========================================================================
   0. Normalize.css v2.1.3 | MIT License | git.io/normalize | (minified)
   ========================================================================== */

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], template { display: none; }
html {
   font-family: sans-serif;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
}
body { margin: 0; }
a { background: transparent; }
a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }
h1 { font-size: 2em; margin: 0.67em 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: 700; }
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 #c0c0c0;
   margin: 0 2px;
   padding: 0.35em 0.625em 0.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; }


/* ==========================================================================
   1. Icons - Sets up the icon font and respective classes
   ========================================================================== */

/* Import the font file with the icons in it */
@font-face {
    font-family: "casper-icons";
    src:url("../fonts/casper-icons.eot?v=1");
    src:url("../fonts/casper-icons.eot?v=1#iefix") format("embedded-opentype"),
        url("../fonts/casper-icons.woff?v=1") format("woff"),
        url("../fonts/casper-icons.ttf?v=1") format("truetype"),
        url("../fonts/casper-icons.svg?v=1#icons") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* Apply these base styles to all icons */
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "casper-icons", "Open Sans", sans-serif;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    text-decoration: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-star:before  {
    font-family: "FontAwesome"!important;
}
/* Each icon is created by inserting the correct character into the
   content of the :before pseudo element. Like a boss. */
.icon-ghost:before {
    content: "\f600";
}
.icon-feed:before {
    content: "\f601";
}
.icon-twitter:before {
    content: "\f602";
    font-size: 1.1em;
}
.icon-google-plus:before {
    content: "\f603";
}
.icon-facebook:before {
    content: "\f604";
}
.icon-arrow-left:before {
    content: "\f605";
}
.icon-stats:before {
    content: "\f606";
}
.icon-location:before {
    content: "\f607";
    margin-left: -3px; /* Tracking fix */
}
.icon-link:before {
    content: "\f608";
}
.icon-menu:before {
    content: "\f609";
}
/*
    IMPORTANT: When making any changes to the icon font, be sure to increment
    the version number by 1 in the @font-face rule. `?v=1` becomes `?v=2`
    This forces browsers to download the new font file.
*/


/* ==========================================================================
   2. General - Setting up some base styles
   ========================================================================== */

html {
    height: 100%;
    max-height: 100%;
    font-size: 62.5%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    height: 100%;
    max-height: 100%;
    font-family: "Merriweather", serif;
    letter-spacing: 0.01rem;
    font-size: 1.8rem;
    line-height: 1.75em;
    color: #3A4145;
    -webkit-font-feature-settings: 'kern' 1;
    -moz-font-feature-settings: 'kern' 1;
    -o-font-feature-settings: 'kern' 1;
    text-rendering: geometricPrecision;
}

::-moz-selection {
    background: #D6EDFF;
}

::selection {
    background: #D6EDFF;
}

h1, h2, h3,
h4, h5, h6 {
    -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1 !important;
    -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1 !important;
    -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1 !important;
    color: #2E2E2E;
    line-height: 1.15em !important;
    margin: 0 0 0.4em 0 !important;
    font-family: "Open Sans", sans-serif !important;
    text-rendering: geometricPrecision !important;
}

h1 {
    font-size: 5rem !important;
    letter-spacing: -2px !important;
    text-indent: -3px;
}

h2 {
    font-size: 3.6rem;
    letter-spacing: -1px;
}

h3 {
    font-size: 3rem;
}

h4 {
    font-size: 2.5rem;
}

h5 {
    font-size: 2rem;
}

h6 {
    font-size: 2rem;
}

a {
    color: #4A4A4A;
    transition: color 0.3s ease;
}

a:hover {
    color: #111;
}

p, ul, ol, dl {
    -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
    -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
    -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
    margin: 0 0 1.75em 0;
    text-rendering: geometricPrecision;
}

ol, ul {
    padding-left: 3rem;
}

ol ol, ul ul,
ul ol, ol ul {
    margin: 0 0 0.4em 0;
    padding-left: 2em;
}

dl dt {
    float: left;
    width: 180px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    margin-bottom: 1em;
}

dl dd {
    margin-left: 200px;
    margin-bottom: 1em
}

li {
    margin: 0.4em 0;
}

li li {
    margin: 0;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: #EFEFEF 1px solid;
    margin: 3.2em 0;
    padding: 0;
}

blockquote {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 1.75em 0 1.75em -2.2em;
    padding: 0 0 0 1.75em;
    border-left: #4A4A4A 0.4em solid;
}

blockquote p {
    margin: 0.8em 0;
    font-style: italic;
}

blockquote small {
    display: inline-block;
    margin: 0.8em 0 0.8em 1.5em;
    font-size: 0.9em;
    color: #CCC;
}

blockquote small:before { content: "\2014 \00A0"; }

blockquote cite {
    font-weight: 700;
}

blockquote cite a { font-weight: normal; }

mark {
    background-color: #fdffb6;
}

code, tt {
    padding: 1px 3px;
    font-family: Inconsolata, monospace, sans-serif;
    font-size: 0.85em;
    white-space: pre-wrap;
    border: #E3EDF3 1px solid;
    background: #F7FAFB;
    border-radius: 2px;
}

pre {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 1.75em 0;
    border: #E3EDF3 1px solid;
    width: 100%;
    padding: 10px;
    font-family: Inconsolata, monospace, sans-serif;
    font-size: 0.9em;
    white-space: pre;
    overflow: auto;
    background: #F7FAFB;
    border-radius: 3px;
}

pre code, pre tt {
    font-size: inherit;
    white-space: pre-wrap;
    background: transparent;
    border: none;
    padding: 0;
}

kbd {
    display: inline-block;
    margin-bottom: 0.4em;
    padding: 1px 8px;
    border: #CCC 1px solid;
    color: #666;
    text-shadow: #FFF 0 1px 0;
    font-size: 0.9em;
    font-weight: 700;
    background: #F4F4F4;
    border-radius: 4px;
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.2),
        0 1px 0 0 #fff inset;
}

table {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 1.75em 0;
    width: 100%;
    max-width: 100%;
    background-color: transparent;
}

table th,
table td {
    padding: 8px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    border-top: #EFEFEF 1px solid;
}

table th { color: #000; }

table caption + thead tr:first-child th,
table caption + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
    border-top: 0;
}

table tbody + tbody { border-top: #EFEFEF 2px solid; }

table table table { background-color: #FFF; }

table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
    background-color: #F6F6F6;
}

table.plain tbody > tr:nth-child(odd) > td,
table.plain tbody > tr:nth-child(odd) > th {
   background: transparent;
}

iframe, .fluid-width-video-wrapper {
    display: block;
    margin: 1.75em 0;
}

/* When a video is inside the fitvids wrapper, drop the
margin on the iframe, cause it breaks stuff. */
.fluid-width-video-wrapper iframe {
    margin: 0;
}


/* ==========================================================================
   3. Utilities - These things get used a lot
   ========================================================================== */

/* Clears shit */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* Hides shit */
.hidden {
    text-indent: -9999px;
    visibility: hidden;
    display: none;
}

/* Creates a responsive wrapper that makes our content scale nicely */
.inner {
    position: relative;
    width: 80%;
    max-width: 710px;
    margin: 0 auto;
}

/* Centres vertically yo. (IE8+) */
.vertical {
    display: table-cell;
    vertical-align: middle;
}

/* Wraps the main content & footer */
.site-wrapper {
    position: relative;
    z-index: 10;
    min-height: 100%;
    background: #fff;
    -webkit-transition: -webkit-transform 0.5s ease;
            transition: transform 0.5s ease;
}

body.nav-opened .site-wrapper {
    overflow-x: hidden;
    -webkit-transform: translate3D(-240px, 0, 0);
        -ms-transform: translate3D(-240px, 0, 0);
            transform: translate3D(-240px, 0, 0);
    -webkit-transition: -webkit-transform 0.3s ease;
            transition: transform 0.3s ease;
}


/* ==========================================================================
   4. General - The main styles for the the theme
   ========================================================================== */

/* Big cover image on the home page */
.main-header {
    position: relative;
    display: table;
    width: 100%;
    height: 50vh;
    margin-bottom: 5rem;
    text-align: center;
    background: #222 no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

.main-header .inner {
    width: 80%;
}

.main-nav {
    position: relative;
    padding: 35px 40px;
    margin: 0 0 30px 0;
}

.main-nav a {
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}

/* Navigation */
body.nav-opened .nav-cover {
    position: fixed;
    top: 0;
    left: 0;
    right: 240px;
    bottom: 0;
    z-index: 200;
}

.nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    width: 240px;
    opacity: 0;
    background: #111;
    margin-bottom: 0;
    text-align: left;
    overflow-y: auto;
    -webkit-transition: -webkit-transform 0.5s ease,
                        opacity 0.3s ease 0.7s;
            transition: transform 0.5s ease,
                        opacity 0.3s ease 0.7s;
}

body.nav-closed .nav {
    -webkit-transform: translate3D(97px, 0, 0);
        -ms-transform: translate3D(97px, 0, 0);
            transform: translate3D(97px, 0, 0);
}

body.nav-opened .nav {
    opacity: 1;
    -webkit-transition: -webkit-transform 0.3s ease,
                        opacity 0s ease 0s;
            transition: transform 0.3s ease,
                        opacity 0s ease 0s;
    -webkit-transform: translate3D(0, 0, 0);
        -ms-transform: translate3D(0, 0, 0);
            transform: translate3D(0, 0, 0);
}

.nav-title {
    position: absolute;
    top: 45px;
    left: 30px;
    font-size: 16px;
    font-weight: 100;
    text-transform: uppercase;
    color: #fff;
}

.nav-close {
    position: absolute;
    top: 38px;
    right: 25px;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 10px;
}

.nav-close:focus {
    outline: 0;
}

.nav-close:before,
.nav-close:after {
    content: '';
    position: absolute;
    top: 0;
    width: 20px;
    height: 1px;
    background: rgb(150,150,150);
    top: 15px;
    -webkit-transition: background 0.15s ease;
            transition: background 0.15s ease;
}

.nav-close:before {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

.nav-close:after {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

.nav-close:hover:before,
.nav-close:hover:after {
    background: rgb(255,255,255);
}

.nav ul {
    padding: 90px 9% 5%;
    list-style: none;
    counter-reset: item;
}

.nav li:before {
    display: block;
    float: right;
    padding-right: 4%;
    padding-left: 5px;
    text-align: right;
    font-size: 1.2rem;
    vertical-align: bottom;
    color: #B8B8B8;
    content: counter(item, lower-roman);
    counter-increment: item;
}
.nav li {
    margin: 0;
}
.nav li a {
    text-decoration: none;
    line-height: 1.4;
    font-size: 1.4rem;
    display: block;
    padding: 0.6rem 4%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.nav li a:after {
    display: inline-block;
    content: " .......................................................";
    color: rgba(255,255,255,0.2);
    margin-left: 5px;
}
.nav .nav-current:before {
    color: #fff;
}
.nav .nav-current a:after {
    content: " ";
    border-bottom: rgba(255,255,255,0.5) 1px solid;
    width: 100%;
    height: 1px;
}

.nav a:link,
.nav a:visited {
    color: #B8B8B8;
}

.nav li.nav-current a,
.nav a:hover,
.nav a:active,
.nav a:focus {
    color: #fff;
}

.subscribe-button {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    height: 38px;
    padding: 0 20px;
    color: #111 !important; /* Overides `.nav a:link, .nav a:visited` colour */
    text-align: center;
    font-size: 12px;
    font-family: "Open Sans", sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 35px;
    border-radius: 3px;
    background: #fff;
    transition: all ease 0.3s;
}
.subscribe-button:before {
    font-size: 9px;
    margin-right: 6px;
}


/* Create a bouncing scroll-down arrow on homepage with cover image */
.scroll-down {
    display: block;
    position: absolute;
    z-index: 100;
    bottom: 45px;
    left: 50%;
    margin-left: -16px;
    width: 34px;
    height: 34px;
    font-size: 34px;
    text-align: center;
    text-decoration: none;
    color: rgba(255,255,255,0.7);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-animation: bounce 4s 2s infinite;
    animation: bounce 4s 2s infinite;
}

/* Stop it bouncing and increase contrast when hovered */
.scroll-down:hover {
    color: #fff;
    -webkit-animation: none;
    animation: none;
}

/* Put a semi-opaque radial gradient behind the icon to make it more visible
   on photos which happen to have a light background. */
.home-template .main-header:after {
    display: block;
    content: " ";
    width: 150px;
    height: 130px;
    border-radius: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    background: radial-gradient(ellipse at center,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
}

/* Hide when there's no cover image or on page2+ */
.no-cover .scroll-down,
.no-cover.main-header:after,
.archive-template .scroll-down,
.archive-template .main-header:after {
    display: none
}

/* Appears in the top left corner of your home page */
.blog-logo {
    display: block;
    float: left;
    background: none !important; /* Makes sure there is never a background */
    border: none !important; /* Makes sure there is never a border */
}

.blog-logo img {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    height: 38px;
    padding: 1px 0 5px 0;
    width: auto;
}

.menu-button {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    float: right;
    height: 38px;
    padding: 0 15px;
    border-style: solid;
    border-width: 1px;
    opacity: 1;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 35px;
    white-space: nowrap;
    border-radius: 3px;
    transition: all 0.5s ease;
}
.menu-button:before {
    font-size: 12px;
    font-weight: bold;
    margin-right: 6px;
    position: relative;
    top: 1px;
}
.menu-button:hover {
    background: #fff;
}
.menu-button:focus {
    outline: 0;
}

/* When the navigation is closed */
.nav-closed .menu-button {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}
.nav-closed .menu-button:hover {
    color: #222;
}

/* When the navigation is closed and there is no cover image */
.nav-closed .no-cover .menu-button {
    border-color: #BFC8CD;
    color: #9EABB3;
}
.nav-closed .no-cover .menu-button:hover {
    border-color: #555;
    color: #555;
}

/* When the navigation is opened */
.nav-opened .menu-button {
    padding: 0 12px;
    background: #111;
    border-color: #111;
    color: #fff;
    -webkit-transform: translate3D(94px, 0, 0);
        -ms-transform: translate3D(94px, 0, 0);
            transform: translate3D(94px, 0, 0);
    transition: all 0.3s ease;
}

.nav-opened .menu-button .word {
    opacity: 0;
    transition: all 0.3s ease;
}

/* Special styles when overlaid on an image*/
.main-nav.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    border: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
}
.no-cover .main-nav.overlay {
    background: none;
}

/* The details of your blog. Defined in ghost/settings/ */
.page-title {
    margin: 10px 0 10px 0;
    font-size: 5rem;
    letter-spacing: -1px;
    font-weight: 700;
    font-family: "Open Sans", sans-serif;
    color: #fff;
}

.page-description {
    margin: 0;
    font-size: 2rem;
    line-height: 1.5em;
    font-weight: 400;
    font-family: "Merriweather", serif;
    letter-spacing: 0.01rem;
    color: rgba(255,255,255,0.8);
}

.no-cover.main-header {
    min-height: 160px;
    max-height: 40vh;
    background: #f5f8fa;
}

.no-cover .page-title {
    color: rgba(0,0,0,0.8);
}

.no-cover .page-description {
    color: rgba(0,0,0,0.5);
}

/* Add subtle load-in animation for content on the home page */
.home-template .page-title {
    -webkit-animation: fade-in-down 0.6s;
    animation: fade-in-down 0.6s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.home-template .page-description {
    -webkit-animation: fade-in-down 0.9s;
    animation: fade-in-down 0.9s;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

/* Every post, on every page, gets this style on its <article> tag */
.post {
    position: relative;
    width: 80%;
    max-width: 710px;
    margin: 4rem auto;
    padding-bottom: 4rem;
    border-bottom: #EBF2F6 1px solid;
    word-wrap: break-word;
}

/* Add a little circle in the middle of the border-bottom on our .post
   just for the lolz and stylepoints. */
.post:after {
    display: block;
    content: "";
    width: 7px;
    height: 7px;
    border: #E7EEF2 1px solid;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    background: #FFF;
    border-radius: 100%;
    box-shadow: #FFF 0 0 0 5px;
}

body:not(.post-template) .post-title {
    font-size: 3.6rem;
}

.post-title a {
    text-decoration: none;
}

.post-excerpt p {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.7em;
}

.read-more {
    text-decoration: none;
}

.post-meta {
    display: block;
    margin: 1.75rem 0 0 0;
    font-family: "Open Sans", sans-serif;
    font-size: 1.5rem;
    line-height: 2.2rem;
    color: #9EABB3;
}

.author-thumb {
    width: 24px;
    height: 24px;
    float: left;
    margin-right: 9px;
    border-radius: 100%;
}

.post-meta a {
    color: #9EABB3;
    text-decoration: none;
}

.post-meta a:hover {
    text-decoration: underline;
}

.user-meta {
    position: relative;
    padding: 0.3rem 40px 0 100px;
    min-height: 77px;
}

.post-date {
    display: inline-block;
    margin-left: 8px;
    padding-left: 12px;
    border-left: #d5dbde 1px solid;
    text-transform: uppercase;
    font-size: 1.3rem;
    white-space: nowrap;
}

.user-image {
    position: absolute;
    top: 0;
    left: 0;
}

.user-name {
    display: block;
    font-weight: 700;
}

.user-bio {
    display: block;
    max-width: 440px;
    font-size: 1.4rem;
    line-height: 1.5em;
}

.publish-meta {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4.3rem 0 4rem 0;
    text-align: right;
}

.publish-heading {
    display: block;
    font-weight: 700;
}

.publish-date {
    display: block;
    font-size: 1.4rem;
    line-height: 1.5em;
}


/* ==========================================================================
   5. Single Post - When you click on an individual post
   ========================================================================== */

.post-template .post-header {
   margin-bottom: 3.4rem;
}

.post-template .post-title {
    margin-bottom: 0;
}

.post-template .post-meta {
    margin: 0;
}

.post-template .post-date {
    padding: 0;
    margin: 0;
    border: none;
}

/* Stop elements, such as img wider than the post content, from
   creating horizontal scroll - slight hack due to imperfections
   with browser width % calculations and rounding */
.post-template .content {
    overflow: hidden;
}

/* Tweak the .post wrapper style */
.post-template .post {
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* Kill that stylish little circle that was on the border, too */
.post-template .post:after {
    display: none;
}

/* Keep images centered, and allow images wider than the main
   text column to break out. */
.post-content img {
    display: block;
    max-width: 126%;
    height: auto;
    padding: 0.6em 0;
    /* Centers an image by (1) pushing its left edge to the
       center of its container and (2) shifting the entire image
       in the opposite direction by half its own width.
       Works for images that are larger than their containers. */
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%); /* for Safari and iOS */
    -ms-transform: translateX(-50%); /* for IE9 */
    transform: translateX(-50%);
}

.footnotes {
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.6em;
}

.footnotes li {
    margin: 0.6rem 0;
}

.footnotes p {
    margin: 0;
}

.footnotes p a:last-child {
    text-decoration: none;
}


/* The author credit area after the post */
.post-footer {
    position: relative;
    margin: 6rem 0 0 0;
    padding: 6rem 0 0 0;
    border-top: #EBF2F6 1px solid;
}

.post-footer h4 {
    font-size: 1.8rem;
    margin: 0;
}

.post-footer p {
    margin: 1rem 0;
    font-size: 1.4rem;
    line-height: 1.75em;
}

/* list of author links - location / url */
.author-meta {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 1.4rem;
    line-height: 1;
    font-style: italic;
    color: #9EABB3;
}

.author-meta a {
    color: #9EABB3;
}
.author-meta a:hover {
    color: #111;
}

/* Create some space to the right for the share links */
.post-footer .author {
    margin-right: 180px;
}

.post-footer h4 a {
    color: #2e2e2e;
    text-decoration: none;
}

.post-footer h4 a:hover {
    text-decoration: underline;
}

/* Drop the share links in the space to the right.
   Doing it like this means it's easier for the author bio
   to be flexible at smaller screen sizes while the share
   links remain at a fixed width the whole time */
.post-footer .share {
    position: absolute;
    top: 6rem;
    right: 0;
    width: 140px;
}

.post-footer .share a {
    font-size: 1.8rem;
    display: inline-block;
    margin: 1rem 1.6rem 1.6rem 0;
    color: #BBC7CC;
    text-decoration: none;
}

.post-footer .share .icon-twitter:hover {
    color: #55acee;
}
.post-footer .share .icon-facebook:hover {
    color: #3b5998;
}
.post-footer .share .icon-google-plus:hover {
    color: #dd4b39;
}


/* ==========================================================================
   6. Author profile
   ========================================================================== */

.post-head.main-header {
    height: 65vh;
    min-height: 180px;
}

.no-cover.post-head.main-header {
    height: 85px;
    min-height: 0;
    margin-bottom: 0;
    background: transparent;
}

.tag-head.main-header {
    height: 40vh;
    min-height: 180px;
}

.author-head.main-header {
    height: 40vh;
    min-height: 180px;
}

.no-cover.author-head.main-header {
    height: 10vh;
    min-height: 100px;
    background: transparent;
}

.author-profile {
    padding: 0 15px 5rem 15px;
    border-bottom: #EBF2F6 1px solid;
    text-align: center;
}

/* Add a little circle in the middle of the border-bottom */
.author-profile:after {
    display: block;
    content: "";
    width: 7px;
    height: 7px;
    border: #E7EEF2 1px solid;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    background: #FFF;
    border-radius: 100%;
    box-shadow: #FFF 0 0 0 5px;
}

.author-image {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    position: absolute;
    top: -40px;
    left: 50%;
    margin-left: -40px;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    overflow: hidden;
    padding: 6px;
    background: #fff;
    z-index: 2;
    box-shadow: #E7EEF2 0 0 0 1px;
}

.author-image .img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    border-radius: 100%;
}

.author-profile .author-image {
    position: relative;
    left: auto;
    top: auto;
    width: 120px;
    height: 120px;
    padding: 3px;
    margin: -100px auto 0 auto;
    box-shadow: none;
}

.author-title {
    margin: 1.5rem 0 1rem;
}

.author-bio {
    font-size: 1.8rem;
    line-height: 1.5em;
    font-weight: 200;
    color: #50585D;
    letter-spacing: 0;
    text-indent: 0;
}

.author-meta {
    margin: 1.6rem 0;
}
/* Location, website, and link */
.author-profile .author-meta {
    margin: 2rem 0;
    font-family: "Merriweather", serif;
    letter-spacing: 0.01rem;
    font-size: 1.7rem;
}
.author-meta span {
    display: inline-block;
    margin: 0 2rem 1rem 0;
    word-wrap: break-word;
}
.author-meta a {
    text-decoration: none;
}

/* Turn off meta for page2+ to make room for extra
   pagination prev/next links */
.archive-template .author-profile .author-meta {
    display: none;
}


/* ==========================================================================
   7. Read More - Next/Prev Post Links
   ========================================================================== */

.read-next {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin-top: 10rem;
}

.read-next-story {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 50%;
    text-decoration: none;
    position: relative;
    text-align: center;
    color: #fff;
    background: #222 no-repeat center center;
    background-size: cover;
    overflow: hidden;
}
.read-next-story:hover:before {
    background: rgba(0,0,0,0.8);
    transition: all 0.2s ease;
}
.read-next-story:hover .post:before {
    color: #222;
    background: #fff;
    transition: all 0.2s ease;
}

.read-next-story:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    transition: all 0.5s ease;
}

.read-next-story .post {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.read-next-story .post:before {
    content: "Read This Next";
    padding: 4px 10px 5px;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-family: "Open Sans", sans-serif;
    color: rgba(255,255,255,0.8);
    border: rgba(255,255,255,0.5) 1px solid;
    border-radius: 4px;
    transition: all 0.5s ease;
}
.read-next-story.prev .post:before {
    content: "You Might Enjoy";
}

.read-next-story h2 {
    margin-top: 3%!important;
    color: #fff;
}

.read-next-story p {
    margin: 0;
    color: rgba(255,255,255,0.8);
}

/* Special styles for posts with no cover images */
.read-next-story.no-cover {
    background: #f5f8fa;
}

.read-next-story.no-cover:before {
    display: none;
}

.read-next-story.no-cover .post:before {
    color: rgba(0,0,0,0.5);
    border-color: rgba(0,0,0,0.2);
}

.read-next-story.no-cover h2 {
    color: rgba(0,0,0,0.8);
}

.read-next-story.no-cover p {
    color: rgba(0,0,0,0.5);
}

/* if there are two posts without covers, put a border between them */
.read-next-story.no-cover + .read-next-story.no-cover {
    border-left: rgba(0,0,100,0.04) 1px solid;
}

/* Correctly position site-footer when next to the .read-next container */
.read-next + .site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
}

/* ==========================================================================
   8. Third Party Elements - Embeds from other services
   ========================================================================== */

/* Github */
.gist table {
    margin: 0;
    font-size: 1.4rem;
}
.gist td {
    line-height: 1.4;
}
.gist .line-number {
    min-width: 25px;
}

/* Pastebin */
.content .embedPastebin {
    margin-bottom: 1.75em;
}


/* ==========================================================================
   9. Pagination - Tools to let you flick between pages
   ========================================================================== */

/* The main wrapper for our pagination links */
.pagination {
    position: relative;
    width: 80%;
    max-width: 710px;
  /*   margin: 4rem auto; */
    font-family: "Open Sans", sans-serif;
    font-size: 1.3rem;
    color: #9EABB3;
    text-align: center;
}

.pagination a {
    color: #9EABB3;
    transition: all 0.2s ease;
}

/* Push the previous/next links out to the left/right */
.older-posts,
.newer-posts {
    position: absolute;
    display: inline-block;
    padding: 0 15px;
    border: #bfc8cd 1px solid;
    text-decoration: none;
    border-radius: 4px;
    transition: border 0.3s ease;
}

.older-posts {
    right: 0;
}

.page-number {
    display: inline-block;
    padding: 2px 0;
    min-width: 100px;
}

.newer-posts {
    left: 0;
}

.older-posts:hover,
.newer-posts:hover {
    color: #889093;
    border-color: #98a0a4;
}

.extra-pagination {
    display: none;
    border-bottom: #EBF2F6 1px solid;
}
.extra-pagination:after {
    display: block;
    content: "";
    width: 7px;
    height: 7px;
    border: #E7EEF2 1px solid;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    background: #FFF;
    border-radius: 100%;
    box-shadow: #FFF 0 0 0 5px;
}
.extra-pagination .pagination {
    width: auto;
}

/* On page2+ make all the headers smaller */
.archive-template .main-header {
    max-height: 30vh;
}

/* On page2+ show extra pagination controls at the top of post list */
.archive-template .extra-pagination {
    display: block;
}


/* ==========================================================================
   10. Footer - The bottom of every page
   ========================================================================== */

.site-footer {
    position: relative;
    /*margin: 8rem 0 0 0;
    margin: 8rem 0 0 0; */
    padding: 1rem 15px;
    font-family: "Open Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.75em;
    color: #BBC7CC;
}

.site-footer a {
    color: #BBC7CC;
    text-decoration: none;
    font-weight: bold;
}

.site-footer a:hover {
    border-bottom: #bbc7cc 1px solid;
}

.poweredby {
    display: block;/*display: none; */
    width: 45%;
    float: right;
    text-align: right;
}

.copyright {
   /* display: none;*/
    display: block; 
    width: 45%;
    float: left;
}


/* ==========================================================================
   11. Media Queries - Smaller than 900px
   ========================================================================== */

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

    blockquote {
        margin-left: 0;
    }

    .main-header {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: auto;
        min-height: 240px;
        height: 60vh;
        padding: 15% 0;
    }

    .scroll-down,
    .home-template .main-header:after { display: none; }

    .archive-template .main-header {
        min-height: 180px;
        padding: 10% 0;
    }

    .blog-logo img {
        padding: 4px 0;
    }

    .page-title {
        font-size: 4rem;
        letter-spacing: -1px;
    }

    .page-description {
        font-size: 1.8rem;
        line-height: 1.5em;
    }

    .post {
        font-size: 0.95em
    }

    body:not(.post-template) .post-title {
        font-size: 3.2rem;
    }

    hr {
        margin: 2.4em 0;
    }

    ol, ul {
        padding-left: 2em;
    }

    h1 {
        font-size: 4.5rem;
        text-indent: -2px;
    }

    h2 {
        font-size: 3.6rem;
    }

    h3 {
        font-size: 3.1rem;
    }

    h4 {
        font-size: 2.5rem;
    }

    h5 {
        font-size: 2.2rem;
    }

    h6 {
        font-size: 1.8rem;
    }

    .author-profile {
        padding-bottom: 4rem;
    }

    .author-profile .author-bio {
        font-size: 1.6rem;
    }

    .author-meta span {
        display: block;
        margin: 1.5rem 0;
    }
    .author-profile .author-meta span {
        font-size: 1.6rem;
    }

    .post-head.main-header {
        height:45vh;
    }

    .tag-head.main-header,
    .author-head.main-header {
        height: 30vh;
    }

    .no-cover.post-head.main-header {
        height: 55px;
        padding: 0;
    }

    .no-cover.author-head.main-header {
        padding: 0;
    }

    .read-next {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 4rem;
    }

    .read-next p {
        display: none;
    }

    .read-next-story.no-cover + .read-next-story.no-cover {
        border-top: rgba(0,0,100,0.06) 1px solid;
        border-left: none;
    }

}


/* ==========================================================================
   12. Media Queries - Smaller than 500px
   ========================================================================== */

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

    .main-header {
        margin-bottom: 15px;
        height: 40vh;
    }

    .no-cover.main-header {
        height: 30vh;
    }

    .archive-template .main-header {
        max-height: 20vh;
        min-height: 160px;
        padding: 10% 0;
    }

    .main-nav {
        padding: 5px;
        margin-bottom: 2rem;
    }

    .blog-logo {
        padding: 5px;
    }

    .blog-logo img {
        height: 30px;
    }

    .menu-button {
        padding: 0 5px;
        border-radius: 0;
        border-width: 0;
        color: #2e2e2e;
        background: transparent;
    }
    .menu-button:hover {
        color: #2e2e2e;
        border-color: transparent;
        background: none;
    }
    body.nav-opened .menu-button {
        background: none;
        border: transparent;
    }

    .main-nav.overlay a:hover {
        color: #fff;
        border-color: transparent;
        background: transparent;
    }

    .no-cover .main-nav.overlay {
        background: none;
    }
    .no-cover .main-nav.overlay .menu-button {
        border: none;
    }

    .main-nav.overlay .menu-button {
        border-color: transparent;
    }

    .nav-title {
        top: 25px;

    }

    .nav-close {
        position: absolute;
        top: 18px;
    }

    .nav ul {
        padding: 60px 9% 5%;
    }

    .inner,
    .pagination {
        width: auto;
        margin: 2rem auto;
    }

    .post {
        width: auto;
        margin-top: 2rem;
        margin-bottom: 2rem;
        margin-left: 16px;
        margin-right: 16px;
        padding-bottom: 2rem;
        line-height: 1.65em;
    }

    .post-date {
        display: none;
    }

    .post-template .post-header {
        margin-bottom: 2rem;
    }

    .post-template .post-date {
        display: inline-block;
    }

    hr {
        margin: 1.75em 0;
    }

    p, ul, ol, dl {
        font-size: 0.95em;
        margin: 0 0 2.5rem 0;
    }

    .page-title {
        font-size: 3rem;
    }

    .post-excerpt p {
        font-size: 0.85em;
    }

    .page-description {
        font-size: 1.6rem;
    }

    h1, h2, h3,
    h4, h5, h6 {
        margin: 0 0 0.3em 0;
    }

    h1 {
        font-size: 2.8rem;
        letter-spacing: -1px;
    }

    h2 {
        font-size: 2.4rem;
        letter-spacing: 0;
    }

    h3 {
        font-size: 2.1rem;
    }

    h4 {
        font-size: 1.9rem;
    }

    h5 {
        font-size: 1.8rem;
    }

    h6 {
        font-size: 1.8rem;
    }

    body:not(.post-template) .post-title {
        font-size: 2.5rem;
    }

    .post-template .site-footer {
        margin-top: 0;
    }

    .post-content img {
        padding: 0;
        width: calc(100% + 32px); /* expand with to image + margins */
        min-width: 0;
        max-width: 112%; /* fallback when calc doesn't work */
    }

    .post-meta {
        font-size: 1.3rem;
        margin-top: 1rem;
    }

    .post-footer {
        padding: 5rem 0 3rem 0;
        text-align: center;
    }

    .post-footer .author {
        margin: 0 0 2rem 0;
        padding: 0 0 1.6rem 0;
        border-bottom: #EBF2F6 1px dashed;
    }

    .post-footer .share {
        position: static;
        width: auto;
    }

    .post-footer .share a {
        margin: 1.4rem 0.8rem 0 0.8rem;
    }

    .author-meta li {
        float: none;
        margin: 0;
        line-height: 1.75em;
    }

    .author-meta li:before {
        display: none;
    }

    .older-posts,
    .newer-posts {
        position: static;
        margin: 10px 0;
    }

    .page-number {
        display: block;
    }

    .site-footer {
        margin-top: 3rem;
    }

    .author-profile {
        padding-bottom: 2rem;
    }

    .post-head.main-header {
        height: 30vh;
    }

    .tag-head.main-header,
    .author-head.main-header {
        height: 20vh;
    }

    .author-profile .author-image {
        margin-top: -70px;
    }

    .author-profile .author-meta span {
        font-size: 1.4rem;
    }

    .archive-template .main-header .page-description {
        display: none;
    }

    .read-next {
        margin-top: 2rem;
        margin-bottom: -37px;
    }

    .read-next .post {
        width: 100%;
    }

}


/* ==========================================================================
   13. Animations
   ========================================================================== */

/* Used to fade in title/desc on the home page */
@-webkit-keyframes fade-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes fade-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/* Used to bounce .scroll-down on home page */
@-webkit-keyframes bounce {
    0%, 10%, 25%, 40%, 50% {
        -webkit-transform: translateY(0) rotate(-90deg);
                transform: translateY(0) rotate(-90deg);
    }
    20% {
        -webkit-transform: translateY(-10px) rotate(-90deg);
                transform: translateY(-10px) rotate(-90deg);
    }
    30% {
        -webkit-transform: translateY(-5px) rotate(-90deg);
                transform: translateY(-5px) rotate(-90deg);
    }
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0) rotate(-90deg);
                transform: translateY(0) rotate(-90deg);
    }
    40% {
        -webkit-transform: translateY(-10px) rotate(-90deg);
                transform: translateY(-10px) rotate(-90deg);
    }
    60% {
        -webkit-transform: translateY(-5px) rotate(-90deg);
                transform: translateY(-5px) rotate(-90deg);
    }
}
/**
 * Name: base.css
 * Version: 1.0.0
 *	
 *	-
 *
 *	T.O.C
 *	
 *	#CssReset
 *	#Typography
 *		#Links
 *		#Lists
 *		#Images
 *		#Tables
 *		#Forms
 *		#Misc
 */


/* ==========================================================================
   #CssReset
   ========================================================================== */

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	
	/* HTML5 display-role reset for older browsers */
	
	article, 
	aside, 
	details, 
	figcaption, 
	figure, 
	footer, 
	header, 
	hgroup, 
	menu, 
	nav, 
	section {
		display: block;
	}
	
	body {
		line-height: 1;
	}
	
	ol, 
	ul {
		list-style: none;
	}
	
	blockquote, 
	q {
		quotes: none;
	}
	
	blockquote:before, 
	blockquote:after,
	q:before, 
	q:after {
		content: '';
		content: none;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	/**
	 * 1. Always force vertical scroll
	 * 2. Prevent iOS text size adjust after orientation change, without disabling user zoom.
	 */
	
	html { 
		font-size: 100%; 
		overflow-y: scroll; /* 1  */ 
		-ms-text-size-adjust: 100%; /* 2 */
    	-webkit-text-size-adjust: 100%; /* 2 */
		-webkit-font-smoothing: antialiased; 
	}


/* ==========================================================================
   #Typography
   ========================================================================== */
   
	body {
		background-color: #fff;
		color: #474D5D;
		font: 14px 'Open Sans', Arial, sans-serif; 
		line-height: 21px;	
	}
	
	h1, 
	h2, 
	h3, 
	h4, 
	h5, 
	h6 {
		color: #474D5D;
		font-family: 'Open Sans', Arial, sans-serif;
		font-weight: normal; 
	}
		
	h1 a, 
	h2 a, 
	h3 a, 
	h4 a, 
	h5 a, 
	h6 a { 
		font-weight: inherit; 
	}
	
	h1 {
		margin-bottom: 14px; 	 
		font-size: 28px; 
		line-height: 50px; 
	}
	
	h2 { 
		margin-bottom: 10px;	
		font-size: 22px; 
		line-height: 40px;  
	}
	
	h3 { 
		margin-bottom: 8px;
		font-size: 18px; 
		line-height: 34px;   
	}
	
	h4 {
		margin-bottom: 4px; 
		font-size: 16px; 
		line-height: 30px;   
	}
	
	h5 { 
		font-size: 14px; 
		line-height: 24px; 
	}
	
	h6 { 
		font-size: 12px; 
		line-height: 21px; 
	}
	
	p { margin-bottom:20px; }
	em { font-style:italic; }
	strong { font-weight:bold; }
	small { font-size:90%; }
	
	sub { 
		vertical-align: sub; 
		font-size: 75%; 
	}
	
	sup { 
		vertical-align: super; 
		font-size: 75%; 
	}
	
	abbr[title] {  
		border-bottom: 1px dotted #999; 
		cursor: help;
	}
	
	address { 
		display: block; 
		margin-bottom: 20px; 
	}
	
	blockquote {
		margin-left: 50px;
		border-left: 5px solid #0dac8b;
		padding-left: 25px;
	}
	
	blockquote p {}
	
	blockquote span { 
		display: block;
		margin-top: 5px;
		color: #999999;  
	}
	
	blockquote span:before { content: '\2013 \00A0'; }

	hr { 
		height: 0; 
		border: solid #efefef; 
		border-width: 1px 0 0 0;
		margin: 30px 0;
	}

	code, 
	pre { 
		-webkit-border-radius: 3px;
			    border-radius: 3px;	
		font-family: Monaco, Menlo, Consolas, "Courier New", monospace;			
	}
	
	code { 
		padding: 1px 4px;
		border: 1px solid #e1e1e8;
		background-color: #f7f7f7;  
		color: #d14;  
	}
	
	pre { 
		display: block;
		padding: 20px;
		border: 1px solid #e1e1e8;   
		margin-bottom: 20px;
		overflow-x: auto; 
		white-space: pre-wrap;
		background-color: #f7f7f7; 
	}
	
	/* Typography Helper Classes */
	
	/**
	 * <div class="hr"></div> acts like an <hr />
	 */
	
	.hr { 
		border-top: 1px solid #efefef;  
		margin: 30px 0;
	}
	
	.text-left { text-align: left; }
	.text-right { text-align: right; }
	.text-center { text-align: center; }
	
	.text-highlight { 
		padding: 1px 5px; 
		background-color: #d5edf8; 
		color: #111111; 
	}

	.text-uppercase { text-transform: uppercase; }
	
	.mute{ color: #aaa; }
	
	p.last,
	h1.last,
	h2.last,
	h3.last,
	h4.last,
	h5.last,
	address.last { margin-bottom: 0; }
	
/* #Links
   ========================================================================== */
	
	a, 
	a:visited { 
		color: #08AB89; 
		text-decoration: none; 
	}
	
   /**
	* 1. Remove the gray background color from active links in IE 10.
	*/
	
	a:active {
 		background: transparent; /* 1 */
	}
	
	a:hover, 
	a:focus { 
		text-decoration: underline;
		outline: 0; 
	}	
	
/* #Lists
   ========================================================================== */
	
	ul, 
	ol { 
		margin-bottom: 20px;
		list-style-position: inside; 
	}
	
	ul ul, 
	ul ol, 
	ol ol, 
	ol ul { 
		margin-left: 30px; 
		margin-bottom: 0; 
	}
	
	li {}
	
	ul { list-style-type: disc; }
	ol { list-style-type: decimal; }
	
	/* List Helper Classes */

	ul.last,
	ol.last { margin-bottom:0; }

/* #Images
   ========================================================================== */
	
	img {
		border: 0; 
	}
	
	/* Images Helper Classes */
	
	.img-align-left { 
		float: left;
		margin: 5px 10px 0 0;  
	}
	
	.img-align-right { 
		float: right;
		margin: 5px 0 0 10px; 
	}

/* #Tables
   ========================================================================== */

	table { 
		width: 100%;
		margin-bottom: 20px; 
		border-collapse: collapse; 
		border-spacing: 0; 
		background-color: transparent; 
	}
	
	caption { 
		margin: 20px 0;
		text-align: center; 
		font-weight: bold; 
	}

	table th, 
	table td {
		padding: 12px; 
		border-top: 1px solid #efefef;
		text-align: left; 
		vertical-align: top; 
	}
	
	table th { border-top: none; }
	
	table thead th { vertical-align: bottom; }
	
/* #Forms
   ========================================================================== */

	form {}
	
	fieldset {}
	
	form p {}
	
	label {
		display: block;
		margin-bottom: 5px;
	}

	label span { color: #FF0000; }
	
	select,
	button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"],
	input[type="radio"],
	input[type="checkbox"] {
	  cursor: pointer;
	}
	
	input,
	textarea,
	select {
		display: block;
		max-width: 100%;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
		padding: 6px 10px;
		border: 1px solid #acacac;
		margin-bottom: 15px;
		background: transparent;
		color: #666;			 
	}
	
	input[type="text"]:focus,
	input[type="email"]:focus,
	input[type="url"]:focus,
	textarea:focus {
		/*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
				box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);*/	
		border-color: #888;
  		outline: 0;	
	}
	
	select { height: 32px; }
	
	select:focus {
	  outline: thin dotted #333;
	  outline: 5px auto -webkit-focus-ring-color;
	  outline-offset: -2px;
	}
	
	textarea { 
		min-height: 100px; 
		overflow: auto; 
	}

	.radio,
	.checkbox {
		min-height: 18px;
		padding-left: 18px;
	}
	
	.radio input[type="radio"],
	.checkbox input[type="checkbox"] {
		float: left;
		margin-left: -18px;
	}
	
	input:-moz-placeholder,
	textarea:-moz-placeholder {
		color: #ccc;
	}
	
	input:-ms-input-placeholder,
	textarea:-ms-input-placeholder {
		color: #ccc;
	}
	
	input::-webkit-input-placeholder,
	textarea::-webkit-input-placeholder {
		color: #ccc;
	}

/* #Misc
   ========================================================================== */
   
   
   /**
 * Name: grid.css
 * Version: 1.0.0
 *	
 *	-
 *
 *	T.O.C
 *	
 *	#Base Grid
 *	#Tablet (Portrait)
 *  #Mobile (Portrait and landscape)
 *  #Align
 *	#Responsive Images and embeds
 *	#Clearing
 *  #ResponsiveFormInputs
 */
 

/* ==========================================================================
   #Base Grid
   ========================================================================== */

	.row { 
		position: relative; 
		width: 940px; 
		margin: 0 auto;
	}
	
	.row .row { 
		width: auto; 
		margin: 0;
	 }

 	.span1, 
	.span2, 
	.span3, 
	.span4, 
	.span5, 
	.span6, 
	.span7, 
	.span8, 
	.span9, 
	.span10, 
	.span11, 
	.span12 { float: left; }

	.span1 { 
		width: 60px;  
		margin-left: 20px; 
	}
	
	.span2 { 
		width: 140px; 
		margin-left: 20px; 
	}
	
	.span3 { 
		width: 220px; 
		margin-left: 20px; 
	}
	
	.span4 { 
		width: 300px;
		margin-left: 20px; 
	}
	
	.span5 { 
		width: 380px; 
		margin-left: 20px; 
	}
	
	.span6 { 
		width: 460px; 
		margin-left: 20px; 
	}
	
	.span7 { 
		width: 540px; 
		margin-left: 20px; 
	}
	
	.span8 { 
		width: 620px; 
		margin-left: 20px; 
	}
	
	.span9 { 
		width: 700px; 
		margin-left: 20px; 
	}
	
	.span10 { 
		width: 780px; 
		margin-left: 20px; 
	}
	
	.span11 { 
		width: 860px; 
		margin-left: 20px; 
	}
	
	.span12 { 
		width: 940px; 
		margin-left: 20px; 
	}
	
	.span1:first-child, 
	.span2:first-child, 
	.span3:first-child, 
	.span4:first-child, 
	.span5:first-child, 
	.span6:first-child, 
	.span7:first-child, 
	.span8:first-child, 
	.span9:first-child, 
	.span10:first-child, 
	.span11:first-child, 
	.span12:first-child { margin-left: 0; }
 
	.visible-phone { display: none !important; }
	.visible-tablet { display: none !important; }
	.hidden-desktop { display: none !important; }
	.visible-desktop { display: inherit !important; } 
 
/* ==========================================================================
   #Tablet (Portrait)
   ========================================================================== */

	@media (min-width: 768px) and (max-width: 979px) {
		
		.row { width: 705px; }
	
		.span1 { 
			width: 45px;  
			margin-left: 15px; 
		}
		
		.span2 { 
			width: 105px; 
			margin-left: 15px; 
		}
		
		.span3 { 
			width: 165px; 
			margin-left: 15px; 
		}
		
		.span4 { 
			width: 225px; 
			margin-left: 15px; 
		}
		
		.span5 { 
			width: 285px; 
			margin-left: 15px; 
		}
		
		.span6 { 
			width: 345px; 
			margin-left: 15px; 
		}
		
		.span7 { 
			width: 405px; 
			margin-left: 15px; 
		}
		
		.span8 { 
			width: 465px; 
			margin-left: 15px; 
		}
		
		.span9 { 
			width: 525px; 
			margin-left: 15px; 
		}
		
		.span10 { 
			width: 585px;
			margin-left: 15px; 
		}
		
		.span11 { 
			width: 645px; 
			margin-left: 15px; 
		}
		
		.span12 { 
			width: 705px;
			margin-left: 15px; 
		}
		
		.hidden-desktop { display: inherit !important; } 
		.visible-desktop { display: none !important; }
		.visible-tablet { display: inherit !important; } 
		.hidden-tablet { display: none !important; }
		
	}

/* ==========================================================================
   #Mobile (Portrait and Landscape )
   ========================================================================== */

	@media (max-width: 767px) {
		
		.row { width: auto; }
		
		.span1,
		.span2,
		.span3,
		.span4,
		.span5,
		.span6,
		.span7,
		.span8,
		.span9,
		.span10,
		.span11,
		.span12 { 
			float: none;
			display: block;
			width: 100%;
			-webkit-box-sizing: border-box;
			   -moz-box-sizing: border-box;
					box-sizing: border-box;
			margin-left: 0;
		}
		
		.hidden-desktop { display: inherit !important; }
		.visible-desktop { display: none !important; }
		.visible-phone { display: inherit !important; }
		.hidden-phone { display: none !important; }
		
	}
	
/* ==========================================================================
   #Align
   ========================================================================== */

	.float-left { float: left; }
	.float-right { float: right; }

/* ==========================================================================
   #Responsive Images and Embeds
   ========================================================================== */

	.responsive-img { 
		max-width: 100%; 
		height: auto; 
	}
	
	/**
 	 * 1. 16/9 ratio
 	 */
	 
	.responsive-embed {
		position: relative;
		overflow: hidden;
		height: 0;
		padding: 0;
		padding-bottom: 56.25%; /* 1 */	
		margin-bottom: 20px;
	}

	.responsive-embed iframe,
	.responsive-embed object,
	.responsive-embed embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

/* ==========================================================================
   #Clearing
   ========================================================================== */

	/**
 	 * Automatically Clear Fix rows
 	 */
	 
	.row:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}

	/**
 	 * Clear Fix hack
	 * Usage:  add  class="fixed"  to div's that have floated elements in them
 	 */
	 
	.fixed:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
	
	/**
 	 * Clear content
	 * Usage:  <br class="clear"> 
 	 */	
	 
	.clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
	} 
	
/* ==========================================================================
   #ResponsiveFormInputs
   ========================================================================== */
	
	/**
	 * 1. Reset float inherited from .span*	
 	 * 2. Reset margin-left inherited from .span*
 	 */
	 
	input.span1,
	textarea.span1,
	select.span1,
	input.span2,
	textarea.span2,
	select.span2,
	input.span3,
	textarea.span3,
	select.span3,
	input.span4,
	textarea.span4,
	select.span4,
	input.span5,
	textarea.span5,
	select.span5,
	input.span6,
	textarea.span6,
	select.span6,
	input.span7,
	textarea.span7,
	select.span7,
	input.span8,
	textarea.span8,
	select.span8,
	input.span9,
	textarea.span9,
	select.span9,
	input.span10,
	textarea.span10,
	select.span10,
	input.span11,
	textarea.span11,
	select.span11,
	input.span12,
	textarea.span12,
	select.span12 {
		float: none; 	/* 1 */
		margin-left: 0; /* 2 */
	}
	/**
 * Name: elements.css
 * Version: 1.0.0
 *	
 *	-
 *
 *	T.O.C
 *	
 *	#Accordions
 *  #Alerts
 *	#Buttons
 *	#Callout Boxes
 *	#Custom Lists
 *	#Dividers
 *	#Google Maps
 *  #Headlines
 *	#Icon Boxes
 *	#Milestones
 *	#Our Process
 *	#Parallax
 *	#Pie charts
 *	#Pricing Tables
 *	#ProgressBars
 *	#SocialMedia
 *	#Styled Tables
 *	#Tabs
 *	#Testimonials
 *  #WordPress Widgets
 *  #WordPress Comments
 *  #WordPress Comment Form
 */

/* ==========================================================================
   #Accordions
   ========================================================================== */

	/* Accordeon */
	
	.accordion { margin-bottom: 30px; }

	.accordion-item { margin-bottom: 10px; }

	a.accordion-item-toggle {
		position: relative;
		display:block;
		padding: 15px;
		border: 1px solid #bdb4b4;
		border-radius: 5px;
		color: #555555;
		text-decoration: none !important;
		-webkit-transition: background-color 0.2s;
			 -o-transition: background-color 0.2s;
				transition: background-color 0.2s;
	}
	
	a.accordion-item-toggle:after {
		position: absolute;
		top: 15px;
		right: 15px;
		font-size: 18px;
		content: "+";
	}
	
	a.accordion-item-toggle:hover,
	a.accordion-item-toggle.active {
		border-color: #96e0a9;
		background-color: #96e0a9;
		color: #fff;
	}
	
	a.accordion-item-toggle.active:after { content: "-"; }
	
	.accordion-item-content { 
		padding: 15px 5px; 
		display: none; 
	}
	
	/* Toogle */
	
	.toggle { margin-bottom: 30px; }

	.toggle-item { margin-bottom: 10px; }

	a.toggle-item-toggle {
		position: relative;
		display:block;
		padding: 15px;
		border: 1px solid #bdb4b4;
		border-radius: 5px;
		color: #555555;
		text-decoration: none !important;
		-webkit-transition: background-color 0.2s;
			 -o-transition: background-color 0.2s;
				transition: background-color 0.2s;
	}
	
	a.toggle-item-toggle:after {
		position: absolute;
		top: 15px;
		right: 15px;
		font-size: 18px;
		content: "+";
	}
	
	a.toggle-item-toggle:hover,
	a.toggle-item-toggle.active {
		border-color: #96e0a9;
		background-color: #96e0a9;
		color: #fff;
	}
	
	a.toggle-item-toggle.active:after { content: "-"; }
	
	.toggle-item-content { 
		padding: 15px 5px; 
		display: none; 
	}

	@media (max-width: 767px) {
	
		
	  
	}

/* ==========================================================================
   #Alerts
   ========================================================================== */

	.alert {
		padding: 13px 15px;
		border: 1px solid #d1d1d1;
		border-radius: 3px;
		-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
		        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
		margin-bottom: 30px;
		background-color: #f8f8f8;
		font-size: 13px;
	}
	
	.alert i {
		position: relative;
		top: 1px;
		margin-right: 7px;
		font-size: 16px;
	}
	
	.alert.info {
		border: 1px solid #86cde3;
		background-color: #cce9f2;
		color: #3194B1;
	}
	
	.alert.success {
		border: 1px solid #b3cda1;
		background-color: #d8f1c6;
		color: #749958;
	}
	
	.alert.error {
		border: 1px solid #e1a1a1;
		background-color: #f9d9d9;
		color: #B55454;
	}
	
	.alert.warning {
		border: 1px solid #d1c9ae;
		background-color: #fbf4dd;
		color: #978c68;
	} 

/* ==========================================================================
   #Buttons
   ========================================================================== */

	.btn { 
		display: inline-block; 
		padding: 6px 12px;
		border: 1px solid #bbbbbb;
		margin: 0 5px 20px 0;
		background-color: transparent;
		color: #444;
		line-height: 18px; 
		text-decoration: none !important;
		vertical-align: middle;
		cursor: pointer; 
		-webkit-transition: background-color 0.2s;
			 -o-transition: background-color 0.2s;
				transition: background-color 0.2s;
	}
	
	a.btn { color: #444; }
	
	.btn:focus { outline: 0; }
	
	.btn-large {
		padding: 12px 24px;
		font-size: 16px;
	}
	
	.btn i,
	.btn-large i { 
		float: left; 
		margin: 2px 8px 0 -4px;
		font-size: 14px; 
		line-height: 14px; 
	}
	
	.btn:hover {
		border-color: #222; 
		color: #444;
	}

	/* Buton Colors */

	.btn-green-light {
		border: none;
		background-color: #6dd487;
		color: #fff;
	}
	
	a.btn-green-light { color: #fff; }
	.btn-green-light:hover { 
		background: #3db0b4;
		color: #fff;
	}
	
	.btn-green-dark {
		border: none;
		background-color: #08ab89;
		color: #fff;
	}
	
	a.btn-green-dark { color: #fff; }
	.btn-green-dark:hover { 
		background: #55b892;
		color: #fff;
	}
	
	.btn-black {
		border: none;
		background-color: #484f5e;
		color: #fff;
	}
	
	a.btn-black{ color: #fff; }
	.btn-black:hover { 
		background: #303745; 
		color: #fff;
	}	
	
/* ==========================================================================
   #Callout Boxes
   ========================================================================== */

	.callout-box {
		padding: 40px 0;
	}
	
	/**
 	 * Callout box with one background image
 	 *
	 * 1. background-image must be supplied using inline css as it is different for every .callout-box
	 *
	 */
	 
	.callout-box.bg-img {
		background-repeat: no-repeat; /* 1 */ 
		background-position: center center;
		-webkit-background-size: cover;
		background-size: cover;
		color: #fff;
	}
	
	/**
 	 * Callout box with repeating background image
 	 *
	 * 1. background-image must be supplied using inline css as it is different for every .callout-box
	 *
	 */
	 
	.callout-box.bg-pattern {
		background: repeat top left; /* 1 */	
		color: #fff;
	}
	
	.callout-box.bordered {
		border: 1px solid #efefef;
		background-color: #f5f5f5;
	}
	
	/**
 	 * Callout box grid system
 	 *
	 * 1. overwriting inherited .row width to 100% in order to make it fluid
	 *
	 */
	
	.callout-box .row { 
		width: 100%; /* 1 */ 
	}
	
	.callout-box .span1,
	.callout-box .span2,
	.callout-box .span3,
	.callout-box .span4,
	.callout-box .span5,
	.callout-box .span6,
	.callout-box .span7,
	.callout-box .span8,
	.callout-box .span9,
	.callout-box .span10,
	.callout-box .span11,
	.callout-box .span12 {
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
		padding: 0 10px;
		margin: 0;	
	}
	
	.callout-box .span12 { width: 100%; }
	.callout-box .span11 { width: 91.6666666667%; }
	.callout-box .span10 { width: 83.3333333333%; }
	.callout-box  .span9 { width: 75%; }
	.callout-box  .span8 { width: 66.6666666667%; }
	.callout-box  .span7 { width: 58.3333333333%; }
	.callout-box  .span6 { width: 50%; }
	.callout-box  .span5 { width: 41.6666666667%; }
	.callout-box  .span4 { width: 33.3333333333%; }
	.callout-box  .span3 { width: 25%; }
	.callout-box  .span2 { width: 16.66666666666667%; }
	.callout-box  .span1 { width: 8.333333333333333%; }
	
	.callout-box a.btn { margin-top: 28px; }
  
	@media (max-width: 767px) {
	
		.callout-box .span1,
		.callout-box .span2,
		.callout-box .span3,
		.callout-box .span4,
		.callout-box .span5,
		.callout-box .span6,
		.callout-box .span7,
		.callout-box .span8,
		.callout-box .span9,
		.callout-box .span10,
		.callout-box .span11,
		.callout-box .span12 { width: 100%; }
	  
	}

/* ==========================================================================
   #Custom Lists
   ========================================================================== */

	/**
 	 * Custom lists
 	 *
	 * 1. unstyled list
	 *
	 */
	 
	ul.unstyled { list-style-type: none; } /* 1 */
	
	ul.check,
	ul.square ,
	ul.plus,
	ul.pin,
	ul.circle { list-style: none; }
	
	ul.plus li:before,
	ul.square li:before,
	ul.pin li:before,
	ul.circle li:before { 
		position: relative;
		top: -1px;
		width: auto;
		height: auto;
		margin-right: 10px;
		color: #6fd589;
		font-family: 'FontAwesome';
		font-size: 10px;
		font-style: normal;
	}
	
	ul.check li:before { 
		position: relative;
		display: inline-block;
		top: 2px;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		margin-right: 10px;
		background-color: #6fd589;
		color: #fff;
		font-family: 'iconfontcustom';
		font-size: 12px;
		line-height: 22px;
		font-style: normal;
		font-weight: bold;
		text-align: center;
	}
	
	ul.check li,
	ul.circle li { margin-bottom: 20px; }
	
	ul.check li:last-child,
	ul.circle li:last-child { margin-bottom: 0; }
	
	ul.check li:before { content: ""; }
	ul.plus li:before { content: ""; }
	ul.pin li:before { content: ""; }	
	ul.circle li:before { content: ""; }
	ul.square li:before { content: ""; }	

.right-widget {
    
     float: right;
    position: absolute;
    right: 20px;
    top: 650px;
    z-index: 999999;
}
/* ==========================================================================
   #Dividers
   ========================================================================== */

	.divider { margin: 30px 0; }
	
	.divider.single-line { border-top: 1px solid #e2e2e2; }
	
	.divider.double-line { border-top: 4px double #e2e2e2; }
	
	.divider.single-dotted {
		 height: 1px;
		 background: url(../images/bg-single-dotted.gif) repeat-x top left ;  
	}
	
	.divider.double-dotted { 
		height: 4px;
		background: url(../images/bg-double-dotted.gif) repeat-x top left; 
	}	

/* ==========================================================================
   #Google Maps
   ========================================================================== */

	.map { 
		width: 100%; 
		height: 450px; 
		margin-bottom: 30px; 
		border-bottom: 25px solid #96e0a9;
	}
	
	.google-map { 
		position: relative;
		border-top: 5px solid #96e0a9;		
	}
	
	.gmnoprint { display: none; }
	
	.overlay { 
		background-color: rgba(255, 255, 255, 0.5); 
		position: absolute; 
	}
	
	.overlay.top { 
		top: 0; 
		left: 0; 
		right: 0; 
		height: 100px; 
	}
	
	.overlay.bottom { 
		bottom: 0; 
		left: 0; 
		right: 0; 
		height: 100px; 
	}
	
	.overlay.left { 
		top: 100px; 
		left: 0; 
		bottom: 100px; 
		width: 100px;
		border-right: 5px solid #0aab8a; 
	}
	
	.overlay.right { 
		top: 100px; 
		right: 0; 
		bottom: 100px; 
		width: 100px; 
	}
	
	@media (min-width: 1400px) {
		
		.overlay.left,
		.overlay.right { width: 365px; }
		
	}

/* ==========================================================================
   #Headlines
   ========================================================================== */

	/*
	 * Standard headline
	 * 
	 * 1. Force it to only stretch to max 50% on the desktop 
	 * 
	 */
	
	.headline {
		max-width: 460px; /* 1 */
		margin-bottom: 60px;
		border-bottom: 1px solid #c4c4c4;  
	}
	
	.headline span {
		display: inline-block;
		padding: 0 30px 5px 0;
		border-bottom: 6px solid  #08ab89;
		margin-bottom: -1px;
	}
	
	/*
	 * Alternative headline - fullwidth and centered
	 */
	
	.headline-2 {
		margin-bottom: 60px;
		border-bottom: 1px solid #c4c4c4;
		text-align: center;  
	}
	
	.headline-2 span {
		display: inline-block;
		padding: 0 20px 5px 20px;
		border-bottom: 6px solid  #08ab89;
		margin-bottom: -1px;
	}

/* ==========================================================================
   #Icon Boxes
   ========================================================================== */

/* Icon Box 1
   ========================================================================== */
   
	.icon-box-1 { 
		position: relative; 
		margin-bottom: 40px; 
	}
	
	.icon-box-1 h2 a { text-decoration: none; }	
	
	.icon-box-1 > i { 
		float: left;
		display: block;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background-color: #474e5d;
		color: #fff;
		font-size: 24px; 
		line-height: 48px;
		text-align: center;
		-webkit-transition: background-color 0.3s;
			 -o-transition: background-color 0.3s;
				transition: background-color 0.3s; 
	} 
	
	.icon-box-1 > img { 
		float: left; 
		display: block; 
	} 
	
	.icon-box-1 .icon-box-content { margin-left: 65px; }
	.icon-box-1 .icon-box-content h4 { padding-top: 10px; }
	.icon-box-1 .icon-box-content a { color: #535a68; }
	
	.icon-box-1:hover i { background-color: #8bd99f; }	

/* Icon Box 2
   ========================================================================== */
   
	.icon-box-2 { 
		position: relative; 
		margin-bottom: 60px; 
	}
		
	.icon-box-2 h3 a { text-decoration: none; }
	
	.icon-box-2 > i { 
		display: block;
		margin:0 auto 30px; 
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background-color: #474e5d;
		color: #fff; 
		font-size: 24px;
		line-height: 48px;
		text-align: center;
		-webkit-transition: background-color 0.3s;
			 -o-transition: background-color 0.3s;
				transition: background-color 0.3s; 
	}
	
	.icon-box-2 > img {
		margin-bottom: 10px;
	}
	
	.icon-box-2 span {
		display: block;
		width: 78px;
		height: 78px;
		border: 2px solid;
		border-radius: 50%;
		margin: 0 auto 30px;
		line-height: 97px;
		text-align: center;
	}
	
	.icon-box-2 span i {
		display: inline-block;
		width: 64px;
		height: 64px;
		border-radius: 50%;
		background-color: #474e5d;
		color: #fff;
		font-size: 32px;
		line-height: 64px;
		text-align: center;
	}
	
	.icon-box-2 .icon-box-content {}
	.icon-box-2 .icon-box-content a { color: #535a68; }
	.icon-box-2 .icon-box-content h3 { margin-bottom: 30px; }
	
	.icon-box-2:hover i { background-color: #8bd99f; }	

/* Icon Box 3
   ========================================================================== */
   
	.icon-box-3 { 
		position: relative; 
		margin-bottom: 60px; 
	}	
	
	.icon-box-3 h3 a { text-decoration: none; }
	
	.icon-box-3 > i { 
		float: left;
		display: block;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		margin: 0 10px 20px 0;
		background-color: #8bd99f;
		color: #fff;
		font-size: 12px;
		line-height: 32px;
		text-align: center;
	} 
	
	.icon-box-3:hover > i { color: #28a18b; }
	
	.icon-box-3 > img { 
		float: left; 
		margin-right: 10px; 
	} 
	
	.icon-box-3 a { color: #535a68;  }
	
	.icon-box-3 .icon-box-content { }

/* Icon Box 4
   ========================================================================== */
   
	.icon-box-4 { 
		position: relative; 
		margin: 30px 0; 
	}	
	
	/**
	 * 1. Android Browser 2.3 does not support % value for border-radius
	 * 2. Stop bg color from leaking outside the border	
	 */
	
	.icon-box-4 h3 a { text-decoration: none; }
	
	.icon-box-4 > i {
		position: absolute;	 
		z-index: 20; 
		left: 50%; 
		width: 60px; 
		height: 60px;
		border: 1px solid #969696;
		border-radius: 30px; /* 1 */
		-webkit-border-radius: 50%;
				border-radius: 50%;
		margin-top: -30px; 
		margin-left: -30px; 			
		background-color: #e1e1e1;
		background-clip: padding-box; /* 2 */		
		color: #444444;
		font-size: 32px;
		line-height: 60px;
		text-align: center; 
	}
	 
	.icon-box-4 .icon-box-content { 
		position: relative;
		z-index: 10;
		padding: 55px 40px 40px;
		border: 1px solid #e0e0e0; 
		-webkit-border-radius: 50%;
				border-radius: 3px; 
		margin-top: 16px;
		background-color: #f4f4f4;
		text-align: center; 
	}

/* Icon Box 5
   ========================================================================== */
   
	.icon-box-5 { 
		position: relative; 
		margin-bottom: 30px; 
	}	
	
	.icon-box-5 h3 a { text-decoration: none; }
		
	.icon-box-5 > i { 
		position: absolute;
		z-index: 20; 
		top: 50%;
		left: 0; 
		width: 60px; 
		height: 60px;
		border: 1px solid #969696;
		border-radius: 30px;
		-webkit-border-radius: 50%;
				border-radius: 50%;
		margin-top: -30px; 
		background-color: #e1e1e1;
		background-clip: padding-box; 
		color: #444444;
		font-size: 32px;
		line-height: 60px;
		text-align: center;  
	} 
	
	.icon-box-5 .icon-box-content { 
		position: relative;
		z-index: 10;
		padding: 40px 40px 40px 55px;
		border: 1px solid #e0e0e0; 
		-webkit-border-radius: 3px;
				border-radius: 3px;
		margin-left: 30px;	
		background-color: #f4f4f4;
		text-align:center; 
	}

/* Icon Box 6
   ========================================================================== */
	
	.icon-box-6 {
		margin-bottom: 30px;
		list-style: none; 
	}
	
	.icon-box-6 h3 a { text-decoration: none; }
	
	.icon-box-6 li {
		min-height: 80px;
		background: url(../images/bg-vertical-dot.png) repeat-y left+23px center;
		padding-bottom: 15px;
	}
	
	.icon-box-6 li:last-child { background: none; padding-bottom: 0; }
	
	.icon-box-6 li i {
		float: left;
		display: block;
		width: 48px;
		height: 48px;
		-webkit-border-radius: 50%;
				border-radius: 50%;
		outline: 10px solid transparent;
		background-color: #474e5d;
		color: #fff;
		font-size: 24px; 
		line-height: 48px;
		text-align: center;
		-webkit-transition: background-color 0.3s;
			 -o-transition: background-color 0.3s;
				transition: background-color 0.3s; 
	}
	
	.icon-box-6 .icon-box-content { margin-left: 80px; }
	.icon-box-6 .icon-box-content a { color: #535a68; }
	
	.icon-box-6 li:hover i { background-color: #8bd99f; }
	
	@media (max-width: 767px) {
		
		.icon-box-6 { margin-top: 30px; }
		
	}

/* ==========================================================================
   #Milestones
   ========================================================================== */

	.milestone {
		position: relative;
		text-align: center;
	}
	
	.milestone i {
		float: left;
		z-index: 20;
		margin-right: 10px;
		font-size: 32px;
	}
	
	.milestone .milestone-content {
		z-index: 10;
		font-size: 50px;
		line-height: 50px;
	}
	
	.milestone .milestone-description {
		font-size: 16px;
		text-transform: uppercase;
	}

/* ==========================================================================
   #Our Process
   ========================================================================== */

	.process-builder { margin-bottom: 30px; }

	.process-builder ul { list-style: none; }
	
	.process-builder ul li:before {
		position: absolute;
		top: 56px;
		left: 33px;
		color: #0fae8e;
		font-family: 'FontAwesome';
		font-size: 30px;
		content: "ï„…";
	}
	
	.process-builder ul li.color-shade-1:before { color: #62d4d8 !important; }
	.process-builder ul li.color-shade-2:before { color: #14958d !important; }
	.process-builder ul li.color-shade-3:before { color: #0dac8b !important; }
	.process-builder ul li.color-shade-4:before { color: #79849b !important; }
	.process-builder ul li.color-shade-5:before { color: #96e0a9 !important; }
	
	.process-builder ul li:first-child:before { content: ""; }
	
	.process-builder ul li {
		position: relative;
		float: left;
		width: 25%;
		text-align: center;
	}
	
	.process-builder ul li:after {
		position: absolute;
		top: 65px;
		right: -40px;
		width: 80px;
		height: 1px;
		border-bottom: 2px solid #0fae8e;
		content: "";
	}
	
	.process-builder ul li.color-shade-1:after { border-bottom-color: #96e0a9 !important; }
	.process-builder ul li.color-shade-2:after { border-bottom-color: #0dac8b !important; }
	.process-builder ul li.color-shade-3:after { border-bottom-color: #62d4d8 !important; }
	.process-builder ul li.color-shade-4:after { border-bottom-color: #79849b !important; }
	.process-builder ul li.color-shade-5:after { border-bottom-color: #14958d !important; }
	
	.process-builder ul li:last-child:after { border-bottom: none; }
	
	.process-builder ul li:last-child { background: none; }
	
	.process-builder ul li i {
		display: inline-block;
		width: 80px; 
		height: 80px;
		padding: 0;
		border-radius: 70px; 
		-webkit-border-radius: 50%;
				border-radius: 50%;
		background-color: #0fae8e;
		color: #fff; 
		font-size: 50px; 
		line-height: 80px;
		text-align: center; 
		-o-webkit-transition: padding 0.3s;
		  -webkit-transition: padding 0.3s; 
				  transition: padding 0.3s; 
	}
	
	.process-builder ul li span { 
		position: relative; 
		display: inline-block;
		padding: 20px;
		border: 3px solid #0fae8e;
		border-radius: 70px; 
		-webkit-border-radius: 50%;
				border-radius: 50%; 
		margin-bottom: 20px; 
		background-clip: padding-box;
		-o-webkit-transition: padding 0.3s;
		  -webkit-transition: padding 0.3s; 
				  transition: padding 0.3s; 
	}
	
	.process-description h3 { color: #0c9579; }
	
	.process-builder ul li.color-shade-1 .process-description h3 { color: #96e0a9 !important; }
	.process-builder ul li.color-shade-2 .process-description h3 { color: #0dac8b !important; }
	.process-builder ul li.color-shade-3 .process-description h3 { color: #62d4d8 !important; }	
	.process-builder ul li.color-shade-4 .process-description h3 { color: #79849b !important; }
	.process-builder ul li.color-shade-5 .process-description h3 { color: #14958d !important; }
	
	.process-builder ul li:hover i { padding: 20px; }
	.process-builder ul li:hover span { padding: 0; }
	
	.process-builder ul li:hover i { color: #fff; }
	
	
	@media (min-width: 768px) and (max-width: 979px) {
		
		.process-builder ul li:after,
		.process-builder ul li:before { display: none; }
	}

@media (max-width: 980px) {


.right-widget {
    float: none;
    position: relative;
    right: 0;
    top: 0px;
    margin: 18px 0 14px 10px;
}

}
	
	@media (max-width: 767px) {
		
		.process-builder ul li { 
			width: 100%;
			margin-bottom: 30px;
		}
		
		.process-builder ul li:after,
		.process-builder ul li:before { display: none; }
}

	
/* ==========================================================================
   #Parallax
   ========================================================================== */

	.parallax {
		overflow: hidden;
		margin-bottom: 60px;
		background-color: #333;
		background-attachment: scroll;
		background-repeat: no-repeat;
		background-position: 50% 0;
		-webkit-background-size: cover;
				background-size: cover;
		color: #fff;		
	}
	
	.parallax  h3.headline,
	.parallax  h3.headline-2  { color: #fff; }
	
	.parallax a { color: #fff !important; }
	
	.parallax.parallax-enabled { background-attachment: fixed !important; }
	
	.parallax .pie-chart { margin-bottom: 0; }
	.parallax .pie-chart .pie-chart-percent { color: #fff; }
	
	.parallax .icon-box-2 > i,
	.parallax .icon-box-6 li i  { background-color: #8bd99f; }
	
	.parallax input,
	.parallax textarea,
	.parallax select { 
		border-color: #fff;
		color: #fff;
	}
	
	.parallax .btn:hover {
		border-color: #fff; 
		color: #fff;
	}
	
	.box {
		margin-bottom: 60px;
		background: #30a98f no-repeat top center;
		color: #fff;
	}
	
	.box h1,
	.box h2,
	.box h3,
	.box h4,
	.box h5,
	.box h6 { color: #fff; }
	
	.box .icon-box-1 { margin-bottom: 10px; }

	.box .icon-box-1 a { color: #fff; }
	
	.box-2 {
		padding: 30px 0;
		margin-bottom: 60px; 
		background-color: #8bd99f;
		color: #fff;
	}
	
	.box-2 .milestone { padding: 30px 0; }
	
	.box-2 .btn:hover {
		border-color: #fff; 
		color: #fff;
	}
	
	.box-overlay { background-color: rgba(255, 255, 255, 0.5); }
	
	.box-3 {
		padding: 30px 0;
		background-color: #f6f1ed;
		margin-bottom: 60px; 
	}
	
	.box-3 h1 { font-size: 48px; }
	
	.box-3 h2 {
		font-size: 30px;
		color: #2fa48b;
	}
	
	.box-3 #testimonial-slider { margin-bottom: 0; }
	

/* ==========================================================================
   #Pie charts
   ========================================================================== */

	.pie-chart {
		position: relative;	
		margin: 0 auto 30px auto;
		text-align: center;
	}
	
	.pie-chart canvas {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
	}
	
	.pie-chart i, 
	.pie-chart .pie-chart-custom-text, 
	.pie-chart .pie-chart-percent {
		position: absolute;
		z-index: 10;
		top: -10px;
		left: 0;
		display: block;
		width: 100%;
		color: #444444;
		text-align: center;
	}
	
	.pie-chart img {
		max-width:100%;
		vertical-align: middle;
	}
	
	.pie-chart .pie-chart-custom-text {
		font-size: 18px;
	}
	
	.pie-chart .pie-chart-percent {
		font-size: 32px;
	}
	
	.pie-chart-description {
		position: absolute;
		top: 20px;
		left: 0;
		display: block;
		width: 100%;
		text-align: center;
	}

/* ==========================================================================
   #Pricing Tables
   ========================================================================== */

	.price-table { 
		margin-bottom: 30px;
		list-style: none;  
	}
		
	.price-table > li { 
		float: left; 
		width: 220px;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box; 
		margin-left: 20px;
		background-color: #484f5e;
		-webkit-transition: -webkit-transform 0.3s;
			 -o-transition: -o-transform 0.3s;
				transition: transform 0.3s;
	}
	
	.price-table > li:first-child { margin-left: 0; }
	
	.price-table.five-items > li { width: 140px; }
	.price-table.four-items > li { width: 220px; }
	.price-table.three-items > li { width: 300px; }
	
	.price-table > li:hover { 
		-webkit-transform: scaleY(1.1); 
		    -ms-transform: scaleY(1.1);
			 -o-transform: scaleY(1.1);
			    transform: scaleY(1.1);
	}

	.price-table > li:hover .price-heading,
	.price-table > li:hover .price-heading:before { background-color: #62d4d8; }
	
	.price-heading {
		position: relative;
		z-index: 5;
		padding: 25px 5px;
		background-color: #0dac8b;
		margin-bottom: 50px; 
	}
	
	.price-heading:before {
		position: absolute;
		z-index: 3;
		right: 0;
		bottom: -30px;
		left: 0;
		height: 60px;
		background-color: #0dac8b;
		border-radius: 50%;
		content: "";
	}
	
	.price-heading h2 {
		margin-bottom: 20px; 	
		color: #fff; 
		text-align: center; 
	}
	
	.price-heading h1 { 
		margin-bottom: 0; 
		color: #fff; 
		font-size: 48px;
		line-height: 40px;
		text-align: center;  	
	}
	 
	.price-heading h1 sup { 
		font-weight: bold; 
		font-size: 25px; 
	}
	
	.price-heading h1 span {
		display: block;
		font-size: 14px; 
		vertical-align:middle; 
	}
	
	.pricing-features { 
		margin-left: 0; 
		list-style: none;
	}
	
	.pricing-features li { 
		float: none; 
		display: block;
		width: 100%;
		padding: 15px 0; 
		color: #fff; 
		text-align: center; 
	}
	
	.pricing-features li:nth-child(even) { background-color: #515867; }
	
	.pricing-features li a.btn { 
		padding: 5px 15px; 
		margin-bottom: 0;
	}

	@media (min-width: 768px) and (max-width: 979px) {
		
		.price-table > li { 
			width: 165px;
			margin-left: 15px;
		}
		
		.price-table.five-items > li { width: 105px; }
		.price-table.four-items > li { width: 165px; }
		.price-table.three-items > li { width: 225px; }
		
	}

	@media (max-width: 767px) {
	
		.price-table > li { 
			float: none; 
			width: auto; 
			margin: 20px 0; 
		}
		
		.price-table.five-items > li,
		.price-table.four-items > li,
		.price-table.three-items > li {
			width: auto;
		}
		
		.price-table > li:hover { 
			-webkit-transform: none; 
				-ms-transform: none;
				 -o-transform: none;
					transform: none;
		}
	  
	}

/* ==========================================================================
   #ProgressBars
   ========================================================================== */

	.progress-bar-description {
		position: relative;
		display: block;
		margin-bottom: 10px;
		line-height: 14px;
	}
	
	.progress-bar-description span {
		position: absolute;
		top: 0;
		right: 0;
	}
	
	.progress-bar {
		position: relative;
		display: block;
		height: 14px;
		margin-bottom: 15px;
		background-color: #eee5dd;
	}
	
	.progress-bar .progress-bar-outer {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		background-color: #0aab8a;
	}
	
	.progress-bar .progress-bar-outer .progress-bar-inner:after {
		position: absolute;
		top: 0;
		right: 0px;
		width: 0;
		height: 0; 
		border-bottom: 14px solid #eee5dd;
		border-left: 14px solid transparent; 
		content: "";
	}
	
	.progress-bar .progress-bar-outer .progress-bar-inner {
		position: absolute;
		z-index: 1;
		left: 0;
		top: 0;
		display: block;
		overflow: hidden;
		height: 100%;
		width: 100%;
	}

/* ==========================================================================
   #SocialMedia
   ========================================================================== */

	a.social-icon {
		display: inline-block;
		width: 30px;
		padding: 10px 0;
		border: 1px solid transparent;
		margin-right: 1px;
		margin-bottom: 1px;
		color: #5a5e66;
		text-align: center;
	}

	a.social-icon:last-child { margin-right: 0; }

	a.social-icon i {
		font-size: 24px;
		line-height: 30px;
	}
	
	a.social-icon:hover { text-decoration: none; }
	
	a.facebook-icon:hover, 
	a.twitter-icon:hover, 
	a.vimeo-icon:hover, 
	a.flickr-icon:hover, 
	a.github-icon:hover, 
	a.googleplus-icon:hover, 
	a.pinterest-icon:hover, 
	a.tumblr-icon:hover, 
	a.linkedin-icon:hover, 
	a.dribble-icon:hover, 
	a.stumbleupon-icon:hover, 
	a.lastfm-icon:hover, 
	a.instagram-icon:hover, 
	a.evernote-icon:hover, 
	a.skype-icon:hover,
	a.paypal-icon:hover, 
	a.soundcloud-icon:hover, 
	a.behance-icon:hover, 
	a.youtube-icon:hover {
		border-color: #08ab89;
		color: #08ab89 !important;
	}	

/* ==========================================================================
   #Styled Tables
   ========================================================================== */

	.table-bordered { 
		border: 1px solid #b9b9b9; 
		border-collapse: separate; 
		border-left: 0;
	}
	
	.table-bordered th, 
	.table-bordered td { 
		border-left: 1px solid #b9b9b9;
		text-align: center;
	}
	
	.table-bordered th {
		border-left: none;
		background-color: #0dac8b;
		color: #fff;
		font-size: 18px;
	}
	
	.table-bordered caption + thead tr:first-child th,
	.table-bordered caption + tbody tr:first-child th,
	.table-bordered caption + tbody tr:first-child td,
	.table-bordered colgroup + thead tr:first-child th,
	.table-bordered colgroup + tbody tr:first-child th,
	.table-bordered colgroup + tbody tr:first-child td,
	.table-bordered thead:first-child tr:first-child th,
	.table-bordered tbody:first-child tr:first-child th,
	.table-bordered tbody tr:first-child td { border-top: none; }

	.table-condensed th,
	.table-condensed td { padding: 4px 8px; }
	
	.table-striped tbody tr td,
	.table-striped tbody tr th { 
		background-color: #515867;
		color: #7f8187;
	}
	
	.table-striped tbody tr:nth-child(odd) td,
	.table-striped tbody tr:nth-child(odd) th { background-color: #484f5e; }
	
	.table-striped.alt tbody tr td,
	.table-striped.alt tbody tr th { background-color: #cacdd1; }
	
	.table-striped.alt tbody tr:nth-child(odd) td,
	.table-striped.alt tbody tr:nth-child(odd) th { background-color: #fff; }	

	@media (max-width: 480px) {
	
		/**
		 * Force table to not be like tables anymore
		 */
		 
		table, 
		thead, 
		tbody, 
		th, 
		td, 
		tr { 
			display: block;
		}
		
		/**
		 * Hide table headers
		 */
	
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { border-top: 1px solid #555; }
		
		td:first-child { border-top:none !important; }



.right-widget {
   display:table;
    margin-top: 40px;
}

	  
	}

/* ==========================================================================
   #Tabs
   ========================================================================== */

	.tabs-menu { 
		border-bottom: 1px solid #c4c4c4;
		margin-top: 10px; 
		margin-bottom: 0;
		list-style: none; 
	}
	
	.tabs-menu li { display: inline; }
	
	.tabs-menu li a { 
		float: left; 
		display: block;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
		padding: 10px 20px; 	
		margin-bottom: -1px; 
		background-color: #56c673;
		color: #fff !important;
		text-decoration: none;
		text-align: center;
	}
	
	.tabs-menu li a:hover { text-decoration: none; }
	.tabs-menu li a { border-right: 1px solid #fff; }
	.tabs-menu li:last-child a { border-right: none; }
	
	.tabs-menu li.active a {
		border-bottom-color: #fff; 
		background-color: #6fd589;
		color: #fff; 
	}
	
	.tabs {
		border: 1px solid #c4c4c4; 
		border-top: 0;   
		margin-bottom: 30px;
	}
	
	.tab-content { 
		padding: 25px;
	}
	
	@media (max-width: 767px) {
	
		.tabs-menu { border-bottom: none; }
		
		.tabs-menu li { display: block; }
	
		.tabs-menu li a { 
			float: none; 
			display: block;
			padding: 20px 25px;
			border: 1px solid #c4c4c4;
			border-top: none;
			margin: 0;
		}
		
		.tabs-menu li a:hover { text-decoration: none; }
		
		.tabs-menu li:first-child a { border-top: 1px solid #c4c4c4; }
		
		.tabs-menu li.active a {  
			padding: 20px 25px;
			border-bottom-color: #fff;
			margin: 0px;
			color: #666; 
		}
	  
	}
	
/* ==========================================================================
   #Testimonials
   ========================================================================== */

	.testimonial { margin-bottom: 30px; }
	
	.testimonial blockquote {  
		padding: 20px; 
		border-left: none;
		background: url(../images/bg-testimonial.png) no-repeat top left; 
	}
	
	.testimonial blockquote p { margin-bottom: 0; }

	.testimonial img {
		display: block;
		padding: 15px;
		border: 2px solid #bbbcc2;
		-webkit-border-radius: 50%;
				border-radius: 50%;
		margin: 0 auto 20px; 
	}
	
	.testimonial a { color: #555; }
	
	.testimonial-2 { margin-bottom: 30px; }
	
	.testimonial-2 img {
		display: block;
		float: left;
	}
	
	.testimonial-2 blockquote { 
		padding: 60px 20px 20px 20px; 
		border-left: none;
		margin-left: 200px;
		background: url(../images/bg-testimonial.png) no-repeat top+40px left; 
	}
	
	@media (max-width: 767px) {
		
		.testimonial-2 img { float: none; }
		.testimonial blockquote,
		.testimonial-2 blockquote { margin-left: 0; }
		
	}
	
/* ==========================================================================
   #WordPress Widgets
   ========================================================================== */
	
	/* WordPress Widget Defaults */
	
	.widget { margin-bottom: 40px; }
	
	.widget-title { 
		margin-bottom: 20px;
		line-height: 18px;  
	}
	
	#header-top .widget:last-child { margin-bottom: 0; }
	
	#header-top input, 
	#header-top textarea, 
	#header-top select,
	#header-top .widget-title,
	#header-top .widget a { color: #fff; }
	
	#content .widget a { color: #666; }
	
	#footer input, 
	#footer textarea, 
	#footer select,
	#footer .widget a { color: #d1d1d1; }
	
	#footer .widget-title {
		border-bottom: 1px solid #5f646e;
		color: #d1d1d1;
		margin-bottom: 40px; 
	}
	
	#footer .widget-title span {
		display: inline-block;
		padding: 0 20px 10px 0;
		border-bottom: 2px solid #08ab89;
		margin-bottom: -1px;
	}
	
	#footer .widget:last-child { margin-bottom: 0; }
	
	#footer-top .widget:first-child { padding-top: 50px; }
	#footer-top .widget:last-child { padding-bottom: 50px; }
	
	#footer-top .widget-title { border-bottom-color: #484f5e; }
	
	/* Text Widget */
	
	.widget_text {}
	
	#header-top .textwidget { margin-top: 3px; }
	
	.textwidget {}
	
	.textwidget p img {
		margin-right: 15px;
		vertical-align: middle; 
	}
	
	#footer-top .textwidget h1 { color: #fff; }
	
	/* Search Widget */
	
	.widget_search {}
	
	#searchform { position: relative; }
	
	.screen-reader-text { display: none; }
	
	#s { 
		display: block;
		width: 100%;
		-webkit-box-sizing: border-box; 
		   -moz-box-sizing: border-box; 
		   		box-sizing: border-box;
	}
	
	#searchsubmit.btn {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		color: #fff !important; 
	}
	
	#content #searchsubmit.btn { color: #555; }
	#content #searchsubmit.btn:hover { border-color: #555; }

	/* Recent Entries Widget */
	
	.widget_recent_entries {}
	
	.widget_recent_entries ul { list-style: none; }
	
	.widget_recent_entries ul li {}
	
	.widget_recent_entries ul li a {}
	
	.widget_recent_entries ul li .post-date {}
	
	/* Pages Widget */
	
	.widget_pages {}
	
	.widget_pages ul { list-style: none; }
	
	.widget_pages ul li {}
	
	.widget_pages ul li a {}
	
	/* Archive Widget */
	
	.widget_archive {}
	
	.widget_archive ul { list-style: none; }
	
	.widget_archive ul li {} 
	
	.widget_archive ul li a {}
	
	.widget_archive select {}
	
	.widget_archive option {}	
	
	/* Categories Widget */
	
	.widget_categories {}
	
	.widget_categories ul {
		margin-left: 20px; 
		list-style: none;
	}
	
	.widget_categories ul li:before {
		position: relative;
		top: -1px;
		width: auto;
		height: auto;
		margin-right: 10px;
		color: #6fd589;
		font-family: 'FontAwesome';
		font-size: 10px;
		font-style: normal;
		content: "ï„‘";
	}
	
	.widget_categories ul li { 
		position: relative;
		margin-bottom: 15px;
	} 
	
	.widget_categories ul li span {
		position: absolute;
		top: 0;
		right: 20%;
	}
	
	.widget_categories ul li:last-child { margin-bottom: 0; }
	
	.widget_categories ul ul.children {}
	
	.widget_categories a {}
	
	.widget_categories select{}
	
	.widget_categories select#cat {}
	
	.widget_categories select.postform {}
	
	.widget_categories option {}
	
	.widget_categories .level-0 {}
	
	.widget_categories .level-1 {}
	
	.widget_categories .level-2 {}
	
	.widget_categories .level-3 {}
	
	/* Meta Widget */
	
	.widget_meta {}
	
	.widget_meta ul { list-style: none; }
	
	.widget_meta ul li {}
	
	.widget_meta ul li a {}
	
	/* Recent Comments Widget */
	
	.widget_recent_comments {}
	
	#recentcomments {
		margin-left: 20px;
		list-style: none; 
	}
	
	#recentcomments li:before {
		position: relative;
		top: -1px;
		width: auto;
		height: auto;
		margin-right: 10px;
		color: #6fd589;
		font-family: 'FontAwesome';
		font-size: 10px;
		font-style: normal;
		content: "ï„‘";
	}
	
	#recentcomments li a { color: #09ab89 !important; }
	
	.recentcomments {}
	
	/* Tag Cloud Widget  */
	
	.widget_tag_cloud {}
	
	.widget_tag_cloud a {}
	
	.widget_tag_cloud a:after {}
	
	.widget_tag_cloud a:before {}
	
	/* Calendar Widget */
	
	.widget_calendar {}
	
	#calendar_wrap {}
	
	#calendar_wrap th {}
	
	#calendar_wrap td {}
	
	#wp-calendar tr td {}
	
	#wp-calendar caption {}
	
	#wp-calendar a {}
	
	#wp-calendar #today {}
	
	#wp-calendar #prev {}
	
	#wp-calendar #next {}
	
	#wp-calendar #next a {}
	
	#wp-calendar #prev a {}
	
	/* Custom Menu Widget */
	
	.widget_nav_menu {}	
	
	.widget_nav_menu .menu { list-style:none; }
	
	/* RSS Widget */
	
	.widget_rss {}
	
	.widget_rss ul { list-style: none; }	
	
	/* EWF Navigation */
	
	.ewf_widget_navigation {}
	
	.ewf_widget_navigation ul {  
		margin-bottom: 30px; 
		list-style-type: none; 
		list-style-position: outside; 
	}
	
	.ewf_widget_navigation li { border-bottom: 1px solid #efefef; }
	
	.ewf_widget_navigation li:last-child { border-bottom: none; }
	
	.ewf_widget_navigation li a { 
		display: block; 
		padding: 10px 0; 
	}
	
	.ewf_widget_navigation li a:hover { text-decoration: none; }
	
	.ewf_widget_navigation li a { color: #222; }
	
	.ewf_widget_navigation li.current a { color: #303030; }
	
	.ewf_widget_navigation li.current a:hover { text-decoration: none; }
	
	/* Custom - EWF Flickr Widget */
	
	.ewf_widget_flickr {}
	
	#flickr-feed {}
	
	#flickr-feed a { display: inline; }
	
	#flickr-feed img { 
		width: 65px; 
		height: auto;
		border: 0;
		padding: 3px 8px 0 0; 
	}
	
	/* Blog Post Widget */
	
	.ewf_widget_blog-post ul { list-style: none; }
	
	.ewf_widget_blog-post ul li {
		border-bottom: 1px solid #5f646e;
		margin-bottom: 15px; 
	}
	
	.ewf_widget_blog-post ul li:last-child { 
		border-bottom: none;
		margin-bottom: 0;
	}
	
	.ewf_widget_blog-post ul li img { float: left; margin: 0 10px 10px 0; }
	
	.ewf_widget_blog-post ul li p { 
		margin: 10px 0;
		color: #08ab89;
	}
	
	.ewf_widget_blog-post  p { margin-top: 10px; }
	.ewf_widget_blog-post  p + p { clear:both; }
	
	.ewf_widget_blog-post ul li p:last-child { margin-bottom: 15px; }
	.ewf_widget_blog-post ul p span { color: #08ab89; display: block; }
	
	#footer .ewf_widget_blog-post ul p a { color: #d1d1d1; }
	
	/* Newsletter Subscribe Widget */
	
	.ewf_widget_newsletter_subscribe {
		border: 1px solid #89db9e;
		padding: 25px 20px 0 20px;
	}
	
	.ewf_widget_newsletter_subscribe .widget-title { text-align: center; }
	
	#newsletter-subscribe-form { position: relative; }
	
	#newsletter-subscribe-form div {
		padding: 30px 0;
		margin: 0 -20px;
		background-color: #cdf0d6;
	}
	
	#newsletter-subscribe-form input[type="text"] {
		width: 100%;
		padding: 12px 10px;
		margin-bottom: 20px;
		background-color: transparent;
	}
	
	#newsletter-subscribe-form input[type="submit"] {
		border: none;
		margin: 0 auto;
		background-color: #6fd589;
		color: #fff;
	}
	
	#newsletter-subscribe-form input[type="submit"]:hover { background-color: #14958d; }
	
	/* Social Media Widget */
	
	.ewf_widget_social_media a.social-icon i { font-size: 18px; }
	
	#header-top .ewf_widget_social_media a.social-icon {
		padding: 0;
		border: none;
	}
	
	#header-top .ewf_widget_social_media a.social-icon:hover i { color: #96e0a9; }	
	
	#footer .ewf_widget_social_media a.social-icon i { color: #62666f; }
	#footer .ewf_widget_social_media a.social-icon:hover i { color: #08ab89; }
	
	@media (min-width: 768px) and (max-width: 979px) {
		
		#newsletter-subscribe-form input[type="submit"] { position: relative; }
		
	}
	
	/* Recent Posts Widget */
	
	.ewf_widget_recent_posts .tabs-menu li a { width: 50%; }
	.ewf_widget_recent_posts span {
		display: block;
		color: #0aab8a;
	}
	
	@media (max-width: 767px) {
		
		.ewf_widget_recent_posts .tabs-menu li a { width: 100%; }
		
	}

/* ==========================================================================
   #WordPress Comments
   ========================================================================== */
   
	.comments-title { margin-bottom: 30px; }
	.comment-reply-title { display: none; }
	
	.commentlist .reply { display: none; }
	.commentlist .reply a {}
	
	.commentlist .alt {}
	.commentlist .odd {}
	.commentlist .even {}
	.commentlist .thread-alt {}
	.commentlist .thread-odd {}
	.commentlist .thread-even {}
	.commentlist li ul.children .alt {}
	.commentlist li ul.children .odd {}
	.commentlist li ul.children .even {}
	
	.commentlist .vcard {}
	.commentlist .vcard cite.fn {}
	.commentlist .vcard span.says { display: none; }
	.commentlist .vcard img.photo {}
	
	.commentlist .vcard img.avatar {
		float: left;
		padding: 7px;
		border: 2px solid #96e0a9;
		border-radius: 50%;
		margin-right: 15px;
	}
	
	.commentlist .vcard cite.fn a.url {}
	
	.commentlist .comment-meta {} 
	.commentlist .comment-meta a {}
	.commentlist .commentmetadata {}
	.commentlist .commentmetadata a {}
	
	.commentlist .parent {}
	.commentlist .comment {}
	.commentlist .children {}
	.commentlist .pingback {}
	.commentlist .bypostauthor {}
	.commentlist .comment-author {}
	.commentlist .comment-author-admin {}
	
	.commentlist { list-style: none; }
	.commentlist li .comment-body { margin-bottom: 50px; }
	.commentlist li p {}
	
	.commentlist li ul {
		margin-left: 80px;
		list-style: none; 
	}
	
	.commentlist li ul.children li {}
	.commentlist li ul.children li.alt {}
	.commentlist li ul.children li.byuser {}
	.commentlist li ul.children li.comment {}
	.commentlist li ul.children li.bypostauthor {}
	.commentlist li ul.children li.comment-author-admin {}
	
	#cancel-comment-reply {}
	
	#cancel-comment-reply a {}
	
	@media (max-width: 767px) {
		
		.commentlist li ul { margin-left: 40px; }
	
	}
	
/* ==========================================================================
   #WordPress Comment Form
   ========================================================================== */	
   
	/* Blog Post Comment Form */

	.nocomments { display: none; }
	
	.must-log-in { display: none; }
	
	.logged-in-as { display: none }

	/* Comment Form */

	#commentform { }
	
	/* Comment notes */
	
	.comment-notes { display: none; }
	
	/* Comment author field. */
	
	.comment-form-author { }
	
	.comment-form-author label { display: none; }
	
	.comment-form-author input#author { }

	/* Comment email field. */
	
	.comment-form-email { }
	
	.comment-form-email label { display: none; }
	
	.comment-form-email input#email { }

	/* Comment URL field. */
	
	.comment-form-url { }
	
	.comment-form-url label { display: none; }
	
	.comment-form-url input#url { }

	/* Required (*) text. */
	
	#commentform .required { }

	/* Comment form comment. */
	
	.comment-form-comment { }
	
	.comment-form-comment label { display: none; }
	
	.comment-form-comment textarea#comment { 
		width: 100%;
		resize: none;
	}

	/* Allowed tags paragraph. */
	
	.form-allowed-tags { display: none; }
	
	.form-allowed-tags code { }

	/* Paragraph that wraps the submit button and hidden comment ID fields. */
	
	.form-submit {}

	/* Submit button. */
	
	#commentform #submit {
		float: right;
		border: none;
		background-color: #0dac8b;
		color: #fff;
	}
	
	#commentform #submit:hover { background-color: #55b892; }
	/**
 * Name: layout.css
 * Version: 1.0.0
 *	
 *	-
 *
 *	T.O.C
 *	
 *	#General Layout 
 *		#Header
 *		#Content
 *		#Footer
 *	#Page Styles
 *		#Index
 *		#About
 *		#Services
 *		#Portfolio
 *		#Blog
 *		#Contact
 *		#Page 404
 *	#Responsive
 *		#Large Display
 *		#Smaller then 1024px width	
 *		#Tablet (Portrait)
 *		#Mobile (Portrait and Landscape )
 *		#Mobile ( Landscape )
 */

/* ==========================================================================
   #General Layout 
   ========================================================================== */

	#wrap { 
		margin: 0 auto;
		background-color: #fff;
	}

/* #Header Top
   ========================================================================== */	
   
	#header-top {
		background-color: #484f5e;
		color: #fff;
	}
	
/* #Header
   ========================================================================== */	
   	
	#header { border-top: 2px solid #62d4d8;  margin-bottom:60px;}
	
	/* Logo */

	#logo { 
		display: block;
		margin: 30px 0;
	}
	
	#logo img { display: block; }
		
	/* Menu basics */

	.sf-menu { 
		float: right;
	}
	
	.sf-menu, 
	.sf-menu * {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.sf-menu li {
		position: relative;
		white-space: nowrap;
	}
	.sf-menu ul {
		position: absolute;
		display: none;
		top: 100%;
		left: 0;
		z-index: 99;
	}
	.sf-menu > li {
		float: left;
		margin-right: 1px;
	}
	
	.sf-menu > li:last-child { margin-right: 0; }
	
	.sf-menu li:hover > ul,
	.sf-menu li.sfHover > ul {
		display: block;
	}
	
	.sf-menu a {
		display: block;
		position: relative;
	}
	.sf-menu ul ul {
		top: 0;
		left: 100%;
	}
	
	/* Menu skin */
	
	.sf-menu {}
	
	.sf-menu a {
		padding: 10px 15px;
		border-bottom: 1px dotted #96e0a9;  
		font-family: 'Open Sans', Arial, sans-serif;
		font-size: 12px;
		color: #666;  
	}
	
	.sf-menu > li > a {
		border: none;
		padding: 45px 20px;
		font-size: 14px;
	}
	
	.sf-menu li {
		-webkit-transition: background .2s;
		transition: background .2s;
	}
	
	.sf-menu li:hover,
	.sf-menu li.sfHover {
		position: relative;  
		text-decoration: none;	
	}
	
	.sf-menu li:hover a,
	.sf-menu li.sfHover a {
		color: #333;
		text-decoration: none;
	}
	
	.sf-menu > li:hover  > a,
	.sf-menu  >li.sfHover > a {
		color: #fff;
		background-color: #0aab8a;
		border-top: 2px solid #0aab8a; 
		margin-top: -2px;
	}
	
	.sf-menu li.current {
		border-top: 2px solid #0aab8a; 
		margin-top: -2px;
		background-color: #0aab8a;
	}
	
	.sf-menu li.current a { color: #fff; }
	
	/**
 	 * 1. allow long menu items to determine submenu width
 	 */
	
	.sf-menu ul {
		min-width: 200px; /* 1 */
		border: 1px solid rgba(0, 0, 0, 0.1); 
			-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);   
					box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);		
		background-color: rgba(255, 255, 255, 1); 			
	}
	
	.sf-menu ul > li:last-child > a { border-bottom: none; }
	
	.sf-menu li ul { border-left: 1px solid #0aab8a; }
	
	.sf-menu li ul li { margin-left: 30px; }
	
	.sf-menu li ul li a,
	.sf-menu li.current ul li a {
		position: relative;
		padding-left: 0;
		color: #666;
	}
	
	.sf-menu li ul li a:before {
		position: absolute;
		top: 10px;
		left: -20px;
		font-family: 'FontAwesome';
		font-size: 9px;
		color: #96e0a9;
		content: "";
	}
	
	.sf-menu li ul li a:after {
		position: absolute;
		top: 20px;
		left: -30px;
		width: 10px;
		border-bottom: 1px solid transparent;
		content: "";
	}
	
	.sf-menu li ul li a:hover:before { color: #0aab8a; }
	.sf-menu li ul li a:hover:after { border-bottom-color: #0aab8a; }
	
	.sf-menu ul ul li {}

	/* Menu arrows */
	
	.sf-arrows .sf-with-ul { padding-right: 30px; }
	
	/* Bottom facing arrows */
	
	.sf-arrows .sf-with-ul:after {
		position: absolute;
		top: 50%;
		right: 10px;
		height: 0;
		width: 0;
		margin-top: -13px;
		border: 5px solid transparent;
		border-top-color: rgba(0, 0, 0, 0.5);
		content: '';
	}
	
	/* Right facing arrows */
	
	.sf-arrows ul .sf-with-ul:after {
		margin-top: -5px;
		margin-right: -3px;
		border-color: transparent;
		border-left-color: rgba(0, 0, 0, 0.5);
	}
	
	/* Mobile Menu  */
			
	#mobile-menu {
		z-index: 20;
		margin-bottom: 0;
		border-bottom: 1px solid #efefef;
		background-color: rgba(10, 171, 138, 0.7);
	}
	
	#mobile-menu li {	
		display: block;
		margin: 0;
	}
		
	#mobile-menu > li > ul, 
	#mobile-menu > li > ul > li > ul {
		display: none;
		margin-left: 0;
	}

	#mobile-menu li a {
		position: relative;
		display: block;
		padding: 15px 25px;
		border-top: 1px solid #efefef;
		color: #fff;;
		font-size: 13px;
		text-align: left;
		text-decoration: none;
	}
	
	#mobile-menu ul a { padding-left:45px; }
	
	#mobile-menu ul li ul a  { padding-left:65px; }
	
	#mobile-menu .mobile-menu-submenu-arrow {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 70px;
		border-left: 1px solid #efefef;
		color: #fff;
		font-size:20px;
		line-height: 50px;
		text-align: center;
		cursor: pointer;
	}
	
	#mobile-menu .mobile-menu-submenu-arrow:hover { background-color: #0cac89; }
	
	#mobile-menu li a:hover {}
	
	#mobile-menu { display: none; }
	
	/* Mobile menu trigger  */
				
	#mobile-menu-trigger { 
		float: right;
		display: none;
		margin-top: 35px;
		font-size: 32px;
		color: #0aab8a;
	}		
	
/* #Content
   ========================================================================== */
   		
	#content { 
		min-height: 300px; 
		padding-bottom: 60px;  
	}
	
	address span { color: #0dac8b; }

	/* Page Header */
	
	#page-header {
		padding: 35px 0;
		margin-bottom: 60px;
		background: url(../images/bg-page-header.png) no-repeat center center; 
	}
	
	#page-header h2 {
		margin-bottom: 0;
		color: #fff;
		text-transform: uppercase;
	}
	
	.color-shade-1 span i { background-color: #96e0a9 !important; }
	.color-shade-2 span i { background-color: #0dac8b !important; }
	.color-shade-3 span i { background-color: #62d4d8 !important; }	
	.color-shade-4 span i { background-color: #79849b !important; }
	.color-shade-5 span i { background-color: #14958d !important; }
	
	.color-shade-1 span { border-color: #96e0a9 !important; }
	.color-shade-2 span { border-color: #0dac8b !important; }
	.color-shade-3 span { border-color: #62d4d8 !important; }	
	.color-shade-4 span { border-color: #79849b !important; }
	.color-shade-5 span { border-color: #14958d !important; }
			
/* #Footer
   ========================================================================== */		
		
	#footer { color: #d1d1d1; }

	#footer-top { 
		background-color: #79849b; 
	}
	
	#footer-top-widget-area-1 a.btn { margin: 5px 0 0 0; }
	
	#footer-middle { 
		padding: 50px 0;
		background-color: #484f5e; 
	}
	
	#footer-middle-widget-area-4 input[type="text"] { padding: 7px 12px; }
	
	#footer-middle-widget-area-4 input[type="submit"] {
		position: absolute;
		top: 1px;
		right: 1px;
		background-color: #14958d;
	}
	
	#footer-middle-widget-area-4 input[type="submit"]:hover { background-color: #6fd589; }
	
	#footer-bottom { 
		padding: 25px;
		background-color: #303745; 
	}
			
/* ==========================================================================
   #Page Styles
   ========================================================================== */
   
/* #Index
   ========================================================================== */
   
   /* Clinet Logo */
   
   .client-logo {
	   margin: 0 auto 30px auto;
	   list-style: none;
	   text-align:center;
	}
	
	.client-logo li {
		position: relative; 
		display: inline-block;
		margin:0 3px 20px 3px;
	}
	
	/*.client-logo li:first-child { margin-left: 0; }
	.client-logo li:last-child { margin-right: 0; }*/
	
	/* Timeline */
	
	.timeline-2 {
		margin: 10px 0;
		background: url(../images/bg-horizontal-dot.png) repeat-x top+48px left;
		list-style: none;
		text-align: center; 
	}
	
	.timeline-2 li { 
		display: inline-block;
		margin-right: 60px;
	}
	
	.timeline-2 li:last-child { margin-right: 0; }
	
	.timeline-2 li i {
		display: block;
		width: 90px;
		height: 90px;
		border: 2px solid #fff;
		border-radius: 50%;
		margin-bottom: 10px;
		background-color: #8bd99f;
		font-size: 50px;
		line-height: 90px;
		text-align: center;
	}
	
	.timeline-2 li.time {
		position: relative;
		font-size: 18px;
		vertical-align: top; 
	}
	
	.timeline-2 li.time:after {
		position: absolute;
		bottom: -35px;
		left: 14px;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: #fff;
		content: "";
	}
   
/* #About
   ========================================================================== */
   
    #testimonial-slider {
		padding: 20px;
		margin-bottom: 30px;
		background-color: #f6f1ed; 
	}
	
	.team-member {
		position: relative;
		padding: 0 20px 20px 20px;
		margin-bottom: 30px;
		background-color: #eee5dd;
		-webkit-transition: background-color 0.3s;
			 -o-transition: background-color 0.3s;
				transition: background-color 0.3s;
	}
	
	.team-member:hover { 
		background-color: #96e0a9;
		color: #fff;
	}
	
	.team-member img { 
		float: right;
		max-width: 100%;
		margin: 0 -20px 30px 0;
	}
	
	.team-member .social-media {
		position: absolute;
		top: 50px;
		left: -15px;
		opacity: 0; 
		-webkit-transition: left 0.3s, opacity 0.3s;
			 -o-transition: left 0.3s, opacity 0.3s;
				transition: left 0.3s, opacity 0.3s;
	}
	
	.team-member .social-media a.social-icon { 
		float: none;
		display: block;
		padding: 5px;
		border: none;
		color: #fff;
		background: none;
	}
	
	.team-member .social-media a.social-icon i { font-size: 16px; }
	
	.team-member h1,
	.team-member h2,
	.team-member h3,
	.team-member h4,
	.team-member h5,
	.team-member h6 { margin-bottom: 0; }
	
	.team-member h1 { font-size: 32px; }	
	.team-member h2 { font-size: 28px; }
	
	.team-member:hover h1,
	.team-member:hover h2,
	.team-member:hover h3,
	.team-member:hover h4,
	.team-member:hover h5,
	.team-member:hover h6 { color: #fff; }
	.team-member:hover .social-media { 
		opacity: 1;
		left: -5px;
	}

/* #Services
   ========================================================================== */
   
   .services-list {
	   margin-top: 60px;
	   list-style: none;
	}
   
   .services-list li {
	   margin-bottom: 20px;
	   color: #474f5d;
	}
	
	.services-list li:last-child { margin-bottom: 0; }
   
   .services-list li i {
		display: inline-block;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background-color: #474e5d;
		margin: 0 10px;
		color: #fff;
		font-size: 24px; 
		line-height: 48px;
		text-align: center;
   }
      
/* #Portfolio
   ========================================================================== */
   
    /* Isotope */
	
	.portfolio-strip { 
		margin-bottom: 60px;
		list-style: none; 
	}
	
	.portfolio-strip li {
		float: left;
		width: 25%;
	}
	
	.portfolio-strip li:last-child { display: none; }
	
	.portfolio-strip li	.portfolio-item { margin-bottom: 0; }
   
    /* Portfolio Item */
	
	.portfolio-item { 
		position: relative; 
		margin-bottom: 30px;
	}
	
	.portfolio-item-preview { 
		position: relative;
		overflow: hidden; 
	}
		
	.portfolio-item-preview > a img {
		display: block;
		width: 100%;
	}
		
	.portfolio-item-overlay {
		position: absolute; 
		top: 0;
		right: 0; 
		bottom: -30px; 
		left: 0;
		background-color: rgba(111, 213, 137, 0.7);
		text-align: center;
		opacity: 0; 
		-webkit-transition: all 0.5s;  
				transition: all 0.5s; 	
	}
			
	.portfolio-item-overlay-actions {
		position: absolute;
		bottom: 15%;
		width: 100%;
		-webkit-box-sizing :border-box;
		   -moz-box-sizing: border-box;
			    box-sizing: border-box;
		margin-top: -24px;
		text-align: center;	
	}
	
	.portfolio-item-overlay-actions .portfolio-item-zoom,
	.portfolio-item-overlay-actions .portfolio-item-link {
		display: inline-block;
		width: 48px; 
		height: 48px;  
		border-radius: 50%;
		background-color: #10a084;
		color: #fff;
		text-align: center;
		text-decoration: none; 
	}
			
	.portfolio-item-overlay-actions .portfolio-item-zoom i,
	.portfolio-item-overlay-actions .portfolio-item-link i {
		font-size: 20px; 
		line-height: 48px; 
	}
					
	.portfolio-item-overlay-actions .portfolio-item-zoom:hover,
	.portfolio-item-overlay-actions .portfolio-item-link:hover { background-color: #7ae595; }
					
	.portfolio-item-description { 
		position: absolute; 
		top: 50px; 
		right: 0;
		left: 0; 
		color: #fff; 
	}
	
	.portfolio-item-description h4 { color: #fff; }
								
	.portfolio-item:hover .portfolio-item-overlay {
		bottom: 0; 
		opacity: 1; 
	}
				
	/* Portfolio Pagination */
	
	.pagination {
		float: right;
		list-style: none;
	}
	
	.pagination li { 
		float: left;
		margin-right: 3px;
	}
	
	.pagination li:last-child { margin-right: 0; }

	.pagination a { 
		display: block; 
		padding: 15px 10px; 
		border: 1px solid transparent;
		color: #555;
		font-size: 16px;
		text-decoration: none; 
	}
	
	.pagination li a:hover,
	.pagination li.current a {
		border-color: #0aab8a;
		color: #0aab8a; 
	}	
	
/* #Blog
   ========================================================================== */
   
	/* Blog Post */
	
	.blog-post {
		position: relative;
		margin-bottom: 30px;
	}
	
	.blog-post a { color: #424141; }
	.blog-post span a { color: #4d8d7c; }
	
	.blog-post-preview {
		position: relative;
		border-left: 5px solid #08ab8e;
		margin-bottom: 30px;
	}
	
	.blog-post-preview .date {
		position: absolute;
		top: 30px;
		left: 0;
		padding: 5px 15px;
		border-bottom: 10px solid #7ad18c; 
		background-color: #08ab8e;
		color: #fff;
	}
	
	.blog-post-preview > img {
		float: left;
		display: block;
		max-width: 100%;
		border-left: 3px solid #7ad18c;
		margin-right: 10px;
	}
		
	.blog-post-title {}
	
	.blog-post-thumb { float: left; }
	
	.blog-post-thumb a img { 
		display: block;
		margin-bottom: 12px;
	}
	
	.blog-post-thumb a:last-child img { margin-bottom: 0; }
	
	.blog-post-info {}
	
	.blog-post-readmore {}
	
	/* Timeline */
	
	.timeline {}
	
	.left-side,
	.right-side { float: left; }
	
	.separator { 
		float: left; 
		width: 100px;
		min-height: 10px;
		background: url(../images/bg-vertical-line.png) repeat-y top center; 
	}
	
	.left-side .blog-post:before {
		position: absolute;
		top: 30px;
		right: -25px;
		width: 0; 
		height: 0; 
		border-top: 12px solid transparent; 
		border-bottom: 12px solid transparent;
		border-left: 25px solid #ededed; 
		content: "";
		-webkit-transition: border-left-color 0.3s;
			 -o-transition: border-left-color 0.3s;
				transition: border-left-color 0.3s;
	}
	
	.right-side .blog-post:before {
		position: absolute;
		top: auto;
		bottom: 100px;
		left: -25px;
		width: 0; 
		height: 0; 
		border-top: 12px solid transparent; 
		border-bottom: 12px solid transparent;
		border-right: 25px solid #ededed; 
		border-left: none; 
		content: "";
		-webkit-transition: border-right-color 0.3s;
			 -o-transition: border-right-color 0.3s;
				transition: border-right-color 0.3s;
	}
	
	.timeline .blog-post {
		width: 420px; 
		-webkit-box-sizing: border-box; 
		   -moz-box-sizing: border-box; 
				box-sizing: border-box; 
		padding: 25px;
		margin-bottom: 25px;
		background-color: #ededed;
		-webkit-transition: background-color 0.3s;
			 -o-transition: background-color 0.3s;
				transition: background-color 0.3s;
	}
	
	.left-side .blog-post:after {
		position: absolute;
		top: 30px;
		right: -64px;
		width: 8px;
		height: 8px;
		padding: 0;
		border: 10px solid #75d888;
		border-radius: 50%;
		background-color: #03aa8c;
		content: "";
		-webkit-transition: border-width 0.5s, padding 0.3s;
			 -o-transition: border-width 0.5s, padding 0.3s;
				transition: border-width 0.5s, padding 0.3s;
	}
	
	.right-side .blog-post:after {
		position: absolute;
		top: auto;
		bottom: 100px;
		left: -64px;
		width: 8px;
		height: 8px;
		border: 10px solid #75d888;
		border-radius: 50%;
		background-color: #03aa8c;
		content: "";
		-webkit-transition: border-width 0.5s, padding 0.3s;
			 -o-transition: border-width 0.5s, padding 0.3s;
				transition: border-width 0.5s, padding 0.3s;
	}
	
	.timeline .blog-post:last-child { margin-bottom: 0; }
	
	.timeline .blog-post:hover { 
		background-color: #6fd589; 
		color: #fff;
	}
	
	.timeline .blog-post-preview { margin-bottom: 50px; }
	.timeline .blog-post-preview > img { 
		float: none;
		width: 100%;
	}
	
	.timeline .blog-post .btn { margin-bottom: 0; }
	.timeline .blog-post:hover a { color: #fff; }
	
	.right-side .blog-post:hover:before { border-right-color: #6fd589; }
	.left-side .blog-post:hover:before { border-left-color: #6fd589; }
	
	.left-side .blog-post:hover:after,
	.right-side .blog-post:hover:after {
		padding: 4px;
		border-width: 6px;
	}
	
	a.read-more {
		display: block;
		width: 75px;
		border: 5px solid #6fd589;
		border-radius: 50%;
		margin: 0 auto;
		background-color: #0aab8a;
		color: #6fd589;
		line-height: 75px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		-webkit-transition: background-color 0.3s;
			 -o-transition: background-color 0.3s;
				transition: background-color 0.3s;
	}
	
	a.read-more:hover { 
		background-color: #6fd589;
		color: #fff;
	}
				
	
   
/* #Contact
   ========================================================================== */
   
	/* Contact Form */
  
	#contact-form { 
		overflow: hidden; 
		margin-bottom: 30px; 
	}
	
	#contact-form fieldset { margin: 0; }
	
	label.validation-error { color: #b55454; }
	
	input.validation-error,
	textarea.validation-error,
	select.validation-error { border: 1px solid #e1a1a1; }
	
	#contact-form input[type="text"] {
		width: 100%;
		font: 12px 'Open Sans', Arial, sans-serif;
	}
	
	#contact-form #formstatus {}
		
	#contact-form textarea {
		font: 12px 'Open Sans', Arial, sans-serif; 
		resize: none; 
	}
	
	/* Social Media */
	.social-media { position: relative; z-index: 9999; }
	.social-media a.social-icon {
		display: inline-block;
		width: 50px;
		height: 50px;
		padding: 0;
		border-radius: 50%;
		border: 10px solid #96e0a9;
		margin-bottom: -15px;
		margin-right: 10px;
		color: #fff;
		line-height: 55px;
	}
	
	.social-media a.facebook-icon { background-color: #9298a3; }
	.social-media a.twitter-icon { background-color: #62d4d8; }
	.social-media a.pinterest-icon { background-color: #6fd589; }
	.social-media a.googleplus-icon { background-color: #3db0b4; }
	.social-media a.dribble-icon { background-color: #f46899; }
	.social-media a.tumblr-icon { background-color: #2a445f; }
	.social-media a.instagram-icon { background-color: #0a0b10; }
	.social-media a.rss-icon { background-color: #fe9900; }
	.fa-twitter:before {
 content: "\f099";
}
/*.fa-facebook:before {
 content: "\f09a";
} */
/* #Page 404
   ========================================================================== */
	
	.error-404 {
		width: 110px;
		height: 110px;
		padding: 10px; 
		border: 2px solid #96e0a9;
		border-radius: 50%;
		margin: 0 auto;
	}
	
	.error-404 span {
		display: inline-block;
		width: 110px;
		height: 110px;
		border-radius: 50%;
		margin: 0 auto;
		background-color: #96e0a9;
		font-size: 36px;
		line-height: 110px;
		color: #fff;
		text-align: center;
	}
	
/* ==========================================================================
   #Responsive
   ========================================================================== */
   
/* #Large Display
   ========================================================================== */
   	
	@media (min-width: 1400px) {
		
		/* Portfolio */
		
		.portfolio-strip li { width: 20%; }
		.portfolio-strip li:last-child { display: block; }

		
	}

/* #Smaller then 1024px width
   ========================================================================== */
	
	@media (max-width: 1024px) {

		#wrap {}
		
		#header {}
		
		#content {}
		
		#footer {}
		
		.switcher{ display: none; }
		
	}

/* #Tablet (Portrait)
   ========================================================================== */

	@media (min-width: 768px) and (max-width: 979px) {
		
		#wrap {}
		
		#header {}
		
		#menu { display: none; }
		
		#mobile-menu-trigger { display: block; }	
		
		#content {}
		
		#footer {}
		
		/* Index */
		
		.timeline-2 li { margin-right: 21px; }
		
		/* About */
		
		.team-member .social-media { top: 30px; }
		
		/* Services */
		
		.services-list { margin-top: 40px; }
		
		/* Portfolio */
		
		.portfolio-strip li { width: 33.3333333333%; }
		.portfolio-strip li:last-child { display: block; }
		
		.portfolio-item-overlay-actions { top:50%; }
		.portfolio-strip .portfolio-item-overlay-actions { top:75%; }
		
		/* Blog */
		
		.blog-post-thumb a img {
			float: left;
			margin: 20px 20px 0 0;
		}
		
		.blog-post-thumb a:last-child img { margin-right: 0; }
		
		.timeline .blog-post { width: 302.5px; }
		
	}
	
/* #Mobile (Portrait and Landscape )
   ========================================================================== */
	
	@media (max-width: 767px) {
	
		body { 
			background: none; 
			background-color: #fff; 
		}
		
		#wrap {}
		
		#header-top { display: none; }
		
		#header {}	
		
		#logo {}
		
		#menu { display: none; }
		
		#mobile-menu-trigger { 
			display: block;
			padding: 10px;
			position: absolute;
			right: 10px;
			top: -35px;
		}
		
		#content {}

		#footer{}	

		.row { padding: 0 40px; }
		
		.row .row { 
			width: auto; 
			padding: 0 20px; 
			margin: 0; 
		}
		
		p.last, 
		h1.last, 
		h2.last, 
		h3.last, 
		h4.last, 
		h5.last, 
		address.last, 
		ul.last, 
		ol.last { margin-bottom: 20px; }
		
		.text-right{ text-align:left; }
		
		/* Index */
		
		/*.client-logo li { 
			display: block;
			margin: 0;
			margin-bottom: 15px; 
		}*/
		
		.timeline-2 { background: none; }
		
		.timeline-2 li { 
			display: block;
			margin: 0 auto 20px;
			text-align: center;
		}
		
		.timeline-2 li i { margin: 0 auto; }
		.timeline-2 li.time:after { display: none; }
		
		/* About */
		
		.team-member .social-media a.social-icon { margin-bottom: 15px; }
		
		/* Portfolio Items */
		
		.portfolio-strip { margin-top: 40px; }
		
		.portfolio-strip li {
			float: none;
			width: 100%;
		}
		
		.portfolio-strip li:last-child { display: block; }
		
		.portfolio-item-description { top: 30px; }
		
		/* Blog */
		
		.blog-post-thumb { margin-top: 10px; }
		
		.separator { display: none; }
		
		.timeline .blog-post { width: 100%; }
		.timeline .blog-post:last-child { margin-bottom: 25px; }
		
		.blog-post:before,
		.blog-post:after { display: none; }

		/* Contact */
		
		#contact-form .row { padding: 0; }
		
		#content a.social-icon {
			width: 30px;
			height: 30px;
			line-height: 30px;
			border-width: 5px;
		}
		
		#content a.social-icon i { font-size: 18px; }
		
	}
	
/* #Mobile ( Landscape )
  ========================================================================== */

	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
		.row { padding: 0 40px; }
		
		#mobile-menu-trigger { right: 30px; }
		
		/* Portfolio Items */
		
		.portfolio-strip li {
			float: left;
			width: 50%;
		}
		
	}	
	.quote_footer {
	font-size:24px;
	color:#fff;
}
#storage a
		{
         color:#000000;
         font-weight:bold
     }
.white {
	color:#fff;
}
.testimonials {
	text-align: center;
}

/*************Custom*********************/
.home-template .pagination {
    float: none !important;
}
 
/* ==========================================================================
   End of file. Animations should be the last thing here. Do not add stuff
   below this point, or it will probably fuck everything up.
   ========================================================================== */