/*------------------------------------------------------------------

Theme Name: The Copywriter
Description: We are TheDffrnt. We Create Simple, Minimalistic, Clean and Professional Things.
Theme URL: http://themes.thedffrnt.com/case-study/the-copywriter/

------------------------------------------------------------------
[Table of Contents]

0. Initializr Styles
1. Typography
2. Input Fields
3. Loader
4. Overlay
5. Header
    5.1. Top Bar
    5.2. Content
    5.3. Bottom Bar
6. Header with Background
7. Header with Side Pic
8. Title
9. Services
10. Statistics
11. About
12. Testimonials
13. Hire Me
14. Footer

------------------------------------------------------------------
[Typography]

Body:               'Open Sans', arial, sans-serif;
Headers:            'Playfair Display', arial, sans-serif;
Paragraphs:         'Open Sans', arial, sans-serif

------------------------------------------------------------------
[Colors]

Dark          #1e1e1f
Grey          #666666
Yellow        #ffe08b


-------------------------------------------------------------------*/

/* ************************************* */
/* 0. Initializr Styles */
/* ************************************* */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent !important;
          tap-highlight-color: transparent !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.full-width { width: 100% }
.fixed-width { width: 75% }
.center { margin: auto }
.relative { position: relative }
.margin-bottom { margin-bottom: 140px }
.text-left { text-align: left }
.text-center { text-align: center }
.text-right { text-align: right }
.bold { font-weight: 700 }
.uppercase { text-transform: uppercase }
.normal { font-style: normal }
.hide-overflow { height: 100% }

.flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    flex-direction: row;
}

ul { list-style: none }
ul li { display: inline-block }

::-webkit-selection { color: #ffffff; background: #1e1e1f }
   ::-moz-selection { color: #ffffff; background: #1e1e1f }
        ::selection { color: #ffffff; background: #1e1e1f }

/* ************************************* */
/* 1. Typography */
/* ************************************* */
body {
    font-family: 'Open Sans', arial, sans-serif;
    line-height: 1.6;
    font-size: 0.8em;
    color: #666666;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0; padding: 0;
    font-family: 'Playfair Display', arial, sans-serif;
    font-style: italic;
    font-weight: 400;
    color: #1e1e1f;
}

    h1 { font-size: 1.4em }
    h2 { font-size: 0.8em }
    h3 { font-size: 0.9em }
    h4 { font-size: 4em; line-height: 1.4em }
    h5 { font-size: 1.7em }

p {
    font-weight: 300;
    line-height: 1.8em;
    font-size: 1em;
    color: #666666;
}

a,
a:hover,
a:focus {
    cursor: pointer;
    text-decoration: none;
    color: #1e1e1f;
}

/* ************************************* */
/* 2. Input Fields */
/* ************************************* */
input,
textarea {
    width: 100%;
    border: none;
    text-align: center;
    padding: 18px 10px 18px 10px;
    margin: 18px 0 18px 0;
    text-transform: uppercase;
    background: transparent;
    border-bottom: 1px solid #dadae0;
    border-radius: 0;
    transition: all 0.3s;
}

input:focus,
textarea:focus {
    outline: none;
    border-bottom: 1px solid #1e1e1f;
}

textarea {
    resize: none;
    overflow: auto;
    box-sizing: border-box;
    padding-bottom: 80px;
    text-transform: none;
}

/* Placeholder - Default */
input::-webkit-placeholder { color: #9b9b9b; }
input:-moz-placeholder { color: #9b9b9b; }
input::-moz-placeholder { color: #9b9b9b; }
input::-ms-placeholder { color: #9b9b9b; }
input::placeholder { color: #9b9b9b; }

textarea::-webkit-placeholder { color: #9b9b9b; text-transform: uppercase; }
textarea:-moz-placeholder { color: #9b9b9b; text-transform: uppercase; }
textarea::-moz-placeholder { color: #9b9b9b; text-transform: uppercase; }
textarea::-ms-placeholder { color: #9b9b9b; text-transform: uppercase; }
textarea::placeholder { color: #9b9b9b; text-transform: uppercase; }

/* Placeholder - Clicked */
input:focus::-webkit-input-placeholder { color: transparent; }
input:focus:-moz-placeholder { color: transparent; }
input:focus::-moz-placeholder { color: transparent; }
input:focus:-ms-input-placeholder { color: transparent; }

textarea:focus::-webkit-input-placeholder { color: transparent; }
textarea:focus:-moz-placeholder { color: transparent; }
textarea:focus::-moz-placeholder { color: transparent; }
textarea:focus:-ms-input-placeholder { color: transparent; }

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset;
}

/* Submit Button */
.form button {
    width: 100%;
    position: relative;
    border: 0;
    outline: 0;
    cursor: pointer;
    margin-top: 20px;
    padding: 18px 0 18px 0;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    background: #ffe08b;
    font-size: 0.9em;
    color: #1e1e1f;
}

/* Button Hover */
.hvr-sweep-to-right {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 1px transparent;
    -webkit-transform: perspective(1px) translateZ(0);
        -ms-transform: perspective(1px) translateZ(0);
            transform: perspective(1px) translateZ(0);
    transition-property: color;
    transition-duration: .3s
}

.hvr-sweep-to-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    top:0; left:0; right:0; bottom:0;
    background: #ffe08b;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.hvr-sweep-to-right:active,
.hvr-sweep-to-right:focus,
.hvr-sweep-to-right:hover {
    color: #1e1e1f;
}

.hvr-sweep-to-right:active:before,
.hvr-sweep-to-right:focus:before,
.hvr-sweep-to-right:hover:before {
    -webkit-transform: scaleX(1);
            transform:scaleX(1);
}


/* ************************************* */
/* 3. Loader */
/* ************************************* */

/* Not Loaded */
body::after,
header .top-bar h1,
header .top-bar nav.desktop,
header .top-bar .hamburger,
header .content h2,
header .content h2::after,
header .content .explore,
header.side-pic .content .right > div img,
header .bottom {
    opacity: 0;
}

/* Loaded */
body.loaded::after,
.loaded header .top-bar h1,
.loaded .top-bar nav.desktop,
.loaded .top-bar .hamburger,
.loaded header .content h2,
.loaded header .content h2::after,
.loaded header .content .explore,
.loaded header.side-pic .content .right > div img,
.loaded header .bottom {
    opacity: 1;
}

body.loaded::after {
    -webkit-transition: .3s all;
            transition: .3s all;
}

.loaded header .top-bar h1 {
    -webkit-transition: .5s all;
            transition: .5s all;
}

.loaded .top-bar nav.desktop,
.loaded .top-bar .hamburger {
    -webkit-transition: .5s .3s all;
            transition: .5s .3s all;
}

.loaded header .content h2 {
    -webkit-transition: .4s .7s all;
            transition: .4s .7s all;
}

.loaded header .content h2::after {
    -webkit-transition: .4s 1s all;
            transition: .4s 1s all;
}


.loaded header .content .explore {
    -webkit-transition: .5s 1.2s all;
            transition: .5s 1.2s all;
}

.loaded header.side-pic .content .right > div img {
    -webkit-transition: .5s 1.4s all;
            transition: .5s 1.4s all;
}

.loaded header .bottom {
    -webkit-transition: .5s 1.7s all;
            transition: .5s 1.7s all;
}

/* ************************************* */
/* 4. Overlay */
/* ************************************* */
.overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    visibility: hidden;
}

.overlay .left-side,
.overlay .right-side {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    z-index: 9998;
    background: #ffffff;
}

    .overlay .left-side {
        left: 0;
        -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
        transition: all 0.3s 0s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    .overlay .right-side {
        right: 0;
        -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
                transform: translateX(100%);
        transition: all 0.3s 0s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

.menu-opened .overlay .left-side,
.menu-opened .overlay .right-side {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.overlay nav.mobile {
    display: none;
}

.menu-opened .overlay {
    visibility: visible;
}

.menu-opened .overlay nav.mobile {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    left: 0; right: 0; margin: 0 auto;
    z-index: 9999;
    display: block;
    text-align: center;
}

.menu-opened .overlay nav.mobile ul li {
    display: block;
    margin: 40px 0 40px 0;
    font-family: 'Playfair Display', arial, sans-serif;
    font-weight: 400;
    font-size: 2.1em;
}

.menu-opened .overlay nav.mobile ul li a {
    color: #1e1e1f;
    text-decoration: none;
}

.menu-opened .overlay nav.show {
    animation: showNav 1s;
}

@-webkit-keyframes showNav {
   0% {
       opacity: 0;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes showNav {
   0% {
       opacity: 0;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ************************************* */
/* 5. Header */
/* ************************************* */
header {
    height: 100vh;
}

/*-------------------------
[ 5.1. Top Bar ]
-------------------------*/
header .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    padding: 2.4em 0 2.4em 0;
}

header .top-bar > div {
    position: relative;
}

header .top-bar > div > div {
    width: 50%;
}

header .top-bar h1 {
    font-weight: 700;
    font-style: normal;
}

header .top-bar nav.desktop ul li {
    margin: 8px 0 0 20px;
    font-weight: 700;
    font-size: 0.9em;
}

/* Hamburger */
.hamburger {
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    position: absolute;
    top: 1px;
    right: 0;
    z-index: 9999;
    display: none;
}

.hamburger:hover {
    opacity: 0.6;
}

.hamburger-box {
    width: 20px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 24px;
    height: 2px;
    border-radius: 6px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
    background: #1e1e1f;
}

button.hamburger:hover span {
    -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

    .hamburger-inner::before { top: -10px; }
    .hamburger-inner::after { bottom: -10px; }

.hamburger--slider .hamburger-inner {
    top: 2px;
}

.hamburger--slider .hamburger-inner::before {
    top: 10px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.2s;
}

.hamburger--slider .hamburger-inner::after {
    top: 20px;
}

.hamburger--slider.is-active .hamburger-inner {
    -webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
        -ms-transform: translate3d(0, 10px, 0) rotate(45deg);
            transform: translate3d(0, 10px, 0) rotate(45deg);
    background: #191a1f;
}

.hamburger--slider.is-active .hamburger-inner::before {
    opacity: 0;
    -webkit-transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
        -ms-transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
            transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);

}

.hamburger--slider.is-active .hamburger-inner::after {
    -webkit-transform: translate3d(0, -20px, 0) rotate(-90deg);
        -ms-transform: translate3d(0, -20px, 0) rotate(-90deg););
            transform: translate3d(0, -20px, 0) rotate(-90deg);
    background: #1e1e1f;
}

.hamburger:focus,
.hamburger:active,
.hamburger.active,
.hamburger:focus:active {
    background-image: none;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

    /* Sticky */
    .headroom {
        will-change: transform;
        transition: all .3s;
    }

    .headroom--pinned {
        opacity: 1;
        -webkit-transform: translateY(0%);
            -ms-transform: translateY(0%);
                transform: translateY(0%);
        /* Top Bar Color when Pinned */
        background: #ffffff;
    }

    .headroom--unpinned {
        opacity: 0;
        -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
                transform: translateY(-100%);
    }

    .headroom--top {
        background: transparent;
    }

/* Hide Nav - Show Hamburger */
.hide-nav nav.desktop { display: none }
.hide-nav .hamburger { display: block }

/* Dark Top Bar */
header .top-bar.dark.headroom--pinned { background: #1e1e1f }
header .top-bar.dark.headroom--top { background: transparent }
header .top-bar.dark.headroom--pinned a { color: #ffffff }
header .top-bar.dark.headroom--top a { color: #1e1e1f }

header .top-bar.dark.headroom--pinned .hamburger-inner,
header .top-bar.dark.headroom--pinned .hamburger-inner::before,
header .top-bar.dark.headroom--pinned .hamburger-inner::after,
header.background .top-bar.dark.headroom--pinned .hamburger-inner,
header.background .top-bar.dark.headroom--pinned .hamburger-inner::before,
header.background .top-bar.dark.headroom--pinned .hamburger-inner::after {
    background: #ffffff;
}

header .top-bar.dark.headroom--top .hamburger-inner,
header .top-bar.dark.headroom--top .hamburger-inner::before,
header .top-bar.dark.headroom--top .hamburger-inner::after {
    background: #1e1e1f;
}

header.background .top-bar.dark.headroom--top a {
    color: #ffffff;
}

header.background .top-bar.dark.headroom--top .hamburger-inner,
header.background .top-bar.dark.headroom--top .hamburger-inner::before,
header.background .top-bar.dark.headroom--top .hamburger-inner::after {
    background: #ffffff;
}

/*-------------------------
[ 5.2. Content ]
-------------------------*/
header .content {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    left: 0; right: 0; margin: 0 auto;
}

header .content h2 {
    font-family: "Open Sans", arial, sans-serif;
    position: relative;
    display: inline-block;
    margin: auto;
    margin-bottom: 40px;
}

header .content h2::after {
    content: '';
    position: absolute;
    left: 0; right: 0; margin: 0 auto;
    bottom: -25px;
    width: 60%;
    height: 1px;
    background: #e0e0e0;
}

header .content h4 {
    margin: auto;
    width: 50%;
}

    /* Word Typeing */
    .typed-cursor {
        opacity: 1;
        animation: blink 0.7s infinite;
        font-size: 0.85em;
        margin-left: 5px;
    }
        @-webkit-keyframes blink {
            0% { opacity: 1 }
            50% { opacity: 0 }
            100% { opacity: 1 }
        }

        @keyframes blink {
            0% { opacity: 1 }
            50% { opacity: 0 }
            100% { opacity: 1 }
        }

header .content .explore {
    cursor: pointer;
    display: inline-block;
    padding: 10px 25px 10px 25px;
    margin-top: 32px;
    border: 4px solid #ffe08b;
    font-size: 0.85em;
    color: #1e1e1f;
}

/*-------------------------
[ 5.3. Bottom ]
-------------------------*/
header .bottom {
    position: absolute;
    left: 0; right: 0; margin: 0 auto;
    bottom: 2.4em;
}

header .bottom p {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.74em;
}

header .bottom .social ul li {
    margin: 0 19px 0 0;
    font-size: 0.9em;
}

header .bottom .social ul li a {
    opacity: 0.45;
    transition: all .3s;
}

header .bottom .social ul li a:hover {
    opacity: 1
}

.bounceArrow {
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -16px;
    display: block;
    border: none;
    background-size: 14px auto;
    border-radius: 50%;
    z-index: 2;
    transition: all .2s ease-in;
    -webkit-animation: bounceArrow 2s infinite 2s;
            animation: bounceArrow 2s infinite 2s;
}

.bounceArrow::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    border: 2px solid #1e1e1f;
    border-width: 0px 0 2px 2px;
}

@-webkit-keyframes bounceArrow {
    0%,
    100%,
    20%,
    50%,
    80% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
    40% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); }
    60% { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); }
}

@keyframes bounceArrow {
    0%,
    100%,
    20%,
    50%,
    80% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
    40% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); }
    60% { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); }
}

header .bottom .copyright {
    position: absolute;
    top: 0;
    right: 0;
}

/* ************************************* */
/* 6. Header with Background */
/* ************************************* */
header.background {
    background: url(../img/background.jpg) no-repeat center center fixed;
    background-size: cover;
}

header.background::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: #333333;
    opacity: 0.42;
}

header.background .top-bar { z-index: 9999 }

header.background .top-bar .hamburger-inner,
header.background .top-bar .hamburger-inner::before,
header.background .top-bar .hamburger-inner::after {
    background: #ffffff;
}

header.background .hamburger--slider.is-active .hamburger-inner,
header.background .hamburger--slider.is-active .hamburger-inner::after {
    background: #1e1e1f;
}

header.background .headroom--pinned a { color: #1e1e1f }
header.background .headroom--top a { color: #ffffff }

header.background .content,
header.background .bottom {
    z-index: 1;
}

header.background a,
header.background h4,
header.background h2 {
    color: #ffffff;
}

header.background .explore {
    color: #ffffff;
}

header.background .bottom p {
    color: #989899;
}

header.background .bounceArrow::before {
    border: 2px solid #ffffff;
    border-width: 0px 0 2px 2px;
}

header.background .top-bar.headroom--pinned .hamburger-inner,
header.background .top-bar.headroom--pinned .hamburger-inner::before,
header.background .top-bar.headroom--pinned .hamburger-inner::after {
    background: #1e1e1f;
}

header.background .top-bar.headroom--top .hamburger-inner,
header.background .top-bar.headroom--top .hamburger-inner::before,
header.background .top-bar.headroom--top .hamburger-inner::after {
    background: #ffffff;
}

header.background .hamburger--slider.is-active .hamburger-inner,
header.background .hamburger--slider.is-active .hamburger-inner::after {
    background: #1e1e1f;
}

/* ************************************* */
/* 7. Header with Side Pic */
/* ************************************* */
header.side-pic {
    position: relative;
}

header.side-pic .content > div {
    width: 50%;
    position: relative;
    padding: 10% 0 10% 0;
}

header.side-pic .content .left h2::after {
    right: 100%;
}

header.side-pic .content h4 {
    width: 100%;
}

header.side-pic .content .right {
    overflow: hidden;
    display: inline-block;
    text-align: right;
}

header.side-pic .content .right > div {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

header.side-pic .content .right > div img {
    max-width: 150%;
    height: auto;
}

/* ************************************* */
/* 8. Title */
/* ************************************* */
.title h3 {
    font-family: "Open Sans", arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    color: #a8a8a8;
    position: relative;
    display: inline-block;
    margin-bottom: 60px;
}

.title h3::after {
    content: '';
    position: absolute;
    left: 0; right: 0; margin: 0 auto;
    bottom: -30px;
    width: 60%;
    height: 1px;
    background: #e0e0e0;
}

.title h4 {
    width: 80%;
    margin: auto;
}

.title h4 span {
    font-weight: 700;
    font-style: normal;
}

/* ************************************* */
/* 9. Services */
/* ************************************* */
.services .title {
    margin-bottom: 60px;
}

.services ul {
    flex-wrap: wrap;
}

.services ul li {
    width: 50%;
    padding: 7%;
}

.services ul li h5 {
    font-style: normal;
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
}

.services ul li h5::after {
    content: '';
    position: absolute;
    left: 0; right: 0; margin: 0 auto;
    bottom: 3px;
    z-index: -1;
    width: 100%;
    height: 10px;
    background: #ffe08b;
}

/* ************************************* */
/* 10. Statistics */
/* ************************************* */
.statistics {
    background: #1e1e1f;
}

.statistics ul {
    flex-wrap: wrap;
}

.statistics ul li {
    width: 33.33%;
    padding: 5em 0 6em 0;
}

.statistics ul li .number {
    line-height: 2em;
    font-weight: 700;
    font-size: 3em;
    color: #ffffff;
}

.statistics ul li .text {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.75em;
    color: #a8a8a8;
}

/* ************************************* */
/* 11. About */
/* ************************************* */
.about p {
    width: 80%;
    margin: auto;
}

.about p,
.about p.one-column,
.about p.two-columns,
.about p.three-columns {
    margin-top: 80px;
}

.about p,
.about p.three-columns {
    display: block;
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
    -webkit-column-gap: 60px;
       -moz-column-gap: 60px;
            column-gap: 60px;
}

.about p.two-columns {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 60px;
       -moz-column-gap: 60px;
            column-gap: 60px;
}

.about p.one-column {
    text-align: center;
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
}

/* ************************************* */
/* 12. Testimonials */
/* ************************************* */
.testimonials {
    margin-bottom: 190px;
}

.testimonials .comments {
    margin-top: 100px;
}

.testimonials .comments img {
    max-width: 110px;
    height: auto;
    border-radius: 50%;
    border: 6px solid #f0f0f2;
}

.testimonials .comments h6 {
    margin: 20px 0 0 0;
    font-style: normal;
    font-weight: 700;
    font-size: 2.2em;
}

.testimonials .comments p.position {
    position: relative;
    display: inline-block;
    font-family: 'Playfair Display', arial, sans-serif;
    font-size: 1em;
}

.testimonials .comments p.position::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    left: 0; right: 0; margin: 0 auto;
    bottom: -30px;
}

.testimonials .comments p.comment {
    padding: 50px 40px 0 40px;
}

    /* inActive Items */
    .slick-active { opacity: 0.25 }
    /* Circle Color */
    .testimonials .comments .slick-active p.position::after { background: #d3d3d3 }

    /* Current Item */
    .slick-current { opacity: 1 }
    /* Circle Color */
    .testimonials .comments .slick-current p.position::after { background: #fd4459 }

/* ************************************* */
/* 13. Hire Me */
/* ************************************* */
.hire-me .form {
    position: relative;
    margin: auto;
    margin-top: 40px;
    width: 40%;
}

.hire-me .form button {
    cursor: pointer;
    display: inline-block;
    padding: 17px 0 17px 0;
    border: 4px solid #ffe08b;
    font-size: 0.85em;
    color: #1e1e1f;
    background: #ffffff;
}

label.error {
    display: block;
    text-align: center;
    color: #f93d3d;
    font-size: 0.8em;
    font-weight: 700;
    padding: 0.1em 0 0.8em 0;
}

/*
#success,
#error {
    display: none;
}

#success span,
#error span {
    display: block;
    position: absolute;
    width: 80%;
    top: 50%;
    transform: translateY(-50%);
    left: 0; right: 0; margin: 0 auto;
    text-align: center;
}
*/
#success span p,
#error span p {
    font-weight: 700;
}

#success span p { color: #6cb212; }
#error span p { color: #f93d3d; }

/* ************************************* */
/* 14. Footer */
/* ************************************* */
footer {
    background: #1e1e1f;
    padding: 1.5em 0 1.5em 0;
}

footer > div .left,
footer > div .right {
    width: 50%;
}

footer p {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78em;
}

footer > div .left ul li {
    margin: 0 21px 0 0;
    font-size: 0.9em;
}

footer > div .right {
    text-align: right;
}

footer a {
    opacity: 0.45;
    color: #ffffff;
    -webkit-transition: all .3s;
            transition: all .3s;
}

footer a:hover {
    opacity: 1;
    color: #ffffff;
}