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

[Table of contents]

01. Default style
02. Helper style
03. Owl theme style
04. Navigation style
05. Sidebar style
06. Content style
07. Section style
08. About style
09. Skills Progress Bar style
10. Experience Timeline style
11. Services style
12. Client style
13. Testimonials style
14. Portfolio style
15. Pricing style
16. Image Gallery style
17. Video Gallery style
18. Accordion Box (for Faqs) style
19. Team style
20. Homepage Blog style
21. Blog style
22. Post style
23. Contact style
24. Button style
25. Error Page 404 style
26. Footer style
27. toTop Button style

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


/* ======= Default style ======= */
.dark html,
.dark body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
.dark body {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    line-height: 1.75em;
    font-weight: 400;
    color: #fff;
    background: #101010;
}
/*** typog.dark raphy ***/
/* headings */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    margin: 0 0 20px 0;
    line-height: 1.5em;
}
/* paragraph */
.dark p {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    line-height: 1.75em;
    margin: 0 0 20px;
    color: #fff;
}
/* lists */
.dark ul {
    list-style-type: none;
}
/* links */
.dark a {
    color: #fff;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
.dark a:hover,
.dark a:active,
.dark a:focus {
    color: #fff;
    outline: none;
    text-decoration: none !important;
}
.dark a:link {
    text-decoration: none;
}
.dark a:focus {
    outline: none;
}
.dark img {
    width: 100%;
    height: auto;
}
.small,
small {
    font-size: 80%;
}
.dark b,
.dark strong {
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

/* form element */
.dark button,
.dark input,
.dark optgroup,
.dark select,
.dark textarea {
    font-family: 'Didact Gothic', sans-serif;
}
.dark input[type="password"]:focus,
.dark input[type="email"]:focus,
.dark input[type="text"]:focus,
.dark input[type="file"]:focus,
.dark input[type="radio"]:focus,
.dark input[type="checkbox"]:focus,
.dark textarea:focus {
    outline: none;
    background-color: transparent;
}
.dark input[type="password"],
.dark input[type="email"],
.dark input[type="text"],
.dark input[type="file"],
.dark textarea {
    max-width: 100%;
    margin-bottom: 15px;
    padding: 18px 0px 10px;
    height: auto;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-width: 0 0 1px;
    border-style: solid;
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 1.5em;
    font-weight: 400;
    color: #fff;
    background-image: none;
    border-bottom: 1px solid #2c2c2c;
    border-color: ease-in-out .15s, box-shadow ease-in-out .15s;
}
.dark input:focus,
.dark textarea:focus {
    border-bottom-width: 1px;
    border-color: #fff;
}
.dark input[type="submit"],
.dark input[type="reset"],
.dark input[type="button"],
.dark button {
    font-family: 'Didact Gothic', sans-serif;
    font-weight: 400;
    font-size: 15px;
    text-shadow: none;
    padding: 12px 27px;
    border-radius: 80px;
    -webkit-box-shadow: none;
    box-shadow: none;
    line-height: 1.5em;
    color: #fff;
    -webkit-transition: background-color .15s ease-out;
    transition: background-color .15s ease-out;
    background-color: transparent;
    margin: 3px 0;
    border: 1px solid #fff;
}
.dark input[type="submit"]:hover,
.dark input[type="reset"]:hover,
.dark input[type="button"]:hover,
.dark button:hover {
    background-color: #2c2c2c;
    color: #fff;
    border: 1px solid #2c2c2c;
}
.dark input[type="radio"],
.dark input[type="checkbox"] {
    display: inline;
}
.dark select {
    padding: 10px;
    border-radius: 5px;
}
.dark select {
    padding: 10px;
    border-radius: 5px;
}
.dark table,
.dark th,
.dark tr,
.dark td {
    border: 1px solid #2c2c2c;
}
.dark th,
.dark tr,
.dark td {
    padding: 10px;
}
.dark input[type="radio"],
.dark input[type="checkbox"] {
    display: inline;
}
.dark hr {
    margin-top: 0px;
    margin-bottom: -20px;
    border: 0;
}


/* ======= Helper style ======= */
.dark .container {
    padding-right: 45px;
    padding-left: 45px;
}
@media screen and (max-width: 768px) {
    .dark .container {
        padding-right: 15px;
        padding-left: 15px;
    }
}
.dark .o-hidden {
    overflow: hidden;
}
.dark .pos-re {
    position: relative;
}
.dark .full-width {
    width: 100% !important;
}
.dark .bg-img {
    background-size: cover;
    background-repeat: no-repeat;
}
.dark .bg-fixed {
    background-attachment: fixed;
}
.dark .v-middle {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}
.dark .valign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.dark .icon-color {
    color: #fff;
}
.dark .color-gri {
    color: #fff;
}
/* js effect */
.dark .js .animate-box {
    opacity: 0;
}
/* list style */
.dark .ullist {
    display: grid;
    font-size: 16px;
}
.dark .ullist ul {
    position: relative;
    float: left;
    padding: 0px;
}
.dark .ullist ul li {
    position: relative;
    line-height: 1.5em;
    margin-bottom: 10px;
    padding-left: 25px;
}
.dark .ullist ul li:before {
    content: "\e64c";
    font-family: "Themify";
    position: absolute;
    left: 0;
    top: 1px;
    color: #fff;
    font-weight: 400;
    font-size: 12px;
}
/* Scrollbar  */
::-webkit-scrollbar {
    width: 0px;
}
::-webkit-scrollbar-track {
    background: #fff;
}
::-webkit-scrollbar-thumb {
    background: #fff;
}
::-webkit-scrollbar-thumb:hover {
    background: #fff;
}
/* Selection */
::-webkit-selection {
    color: #fff;
    background: rgba(0, 0, 0, 0.1);
}
::-moz-selection {
    color: #fff;
    background: rgba(0, 0, 0, 0.1);
}
::selection {
    color: #fff;
    background: rgba(0, 0, 0, 0.1);
}
/* Form */
.dark .form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid #2c2c2c;
    height: 54px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    padding: 0;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    line-height: 1.5em;
    font-weight: 400;
}
.dark .form-control:active,
.dark .form-control:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #fff;
    border-bottom: 1px solid #fff;
    background-color: transparent;
}
.dark .alert-success {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 0px;
}
.dark #message {
    height: 130px;
    color: #fff;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* Placeholder */
::-webkit-input-placeholder {
    color: #fff;
}
:-moz-placeholder {
    color: #fff;
}
::-moz-placeholder {
    color: #fff;
    opacity: 1;
}
:-ms-input-placeholder {
    color: #fff;
}



/* =======  Owl theme style  ======= */
.dark .owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 0px;
    line-height: .7;
}
.dark .owl-theme .owl-dots .owl-dot span {
    width: 7px;
    height: 7px;
    margin: 0 3px;
    border-radius: 50%;
    background: #323232;
    border: 1px solid #323232;
}
.dark .owl-theme .owl-dots .owl-dot.active span,
.dark .owl-theme .owl-dots .owl-dot:hover span {
    background: #fff;
    border: 1px solid #fff;
}
.dark .owl-theme .owl-nav [class*=owl-] {
    background-color: rgba(0, 0, 0, 0.1);
    width: 30px;
    height: 30px;
    line-height: 25px;
    border-radius: 50%;
}
.dark .owl-theme .owl-nav [class*=owl-] {
    color: #fff;
    font-size: 9px;
    margin: 5px;
    padding: 4px 7px;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px;
}
.dark .owl-theme .owl-nav [class*=owl-] {
    background-color: transparent;
    width: 32px;
    height: 32px;
    line-height: 25px;
    border-radius: 50%;
    border: 1px solid #fff;
}
.dark .owl-theme .owl-nav [class*=owl-]:hover {
    background-color: #fff;
}



/* =======  Navigation style  ======= */
.dark .lonon-nav-toggle {
    cursor: pointer;
    text-decoration: none;
}
.dark .lonon-nav-toggle.active i::before,
.dark .lonon-nav-toggle.active i::after {
    background: #fff;
}
.dark .lonon-nav-toggle.dark.active i::before,
.dark .lonon-nav-toggle.dark.active i::after {
    background: #fff;
}
.dark .lonon-nav-toggle:hover,
.dark .lonon-nav-toggle:focus,
.dark .lonon-nav-toggle:active {
    outline: none;
    border-bottom: none !important;
}
.dark .lonon-nav-toggle i {
    position: relative;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    width: 20px;
    height: 1px;
    color: #fff;
    font: bold 14px/.4 Helvetica;
    text-transform: uppercase;
    text-indent: -55px;
    background: #fff;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    top: -4px;
}
.dark .lonon-nav-toggle i::before,
.dark .lonon-nav-toggle i::after {
    content: '';
    width: 20px;
    height: 1px;
    background: #fff;
    position: absolute;
    left: 0;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
.dark .lonon-nav-toggle.dark i {
    position: relative;
    color: #fff;
    background: #fff;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.dark .lonon-nav-toggle.dark i::before,
.dark .lonon-nav-toggle.dark i::after {
    background: #fff;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
.dark .lonon-nav-toggle i::before {
    top: -7px;
}
.dark .lonon-nav-toggle i::after {
    bottom: -7px;
}
.dark .lonon-nav-toggle:hover i::before {
    top: -10px;
}
.dark .lonon-nav-toggle:hover i::after {
    bottom: -10px;
}
.dark .lonon-nav-toggle.active i {
    background: transparent;
}
.dark .lonon-nav-toggle.active i::before {
    top: 0;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
.dark .lonon-nav-toggle.active i::after {
    bottom: 0;
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    -o-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}
.dark .lonon-nav-toggle {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
    cursor: pointer;
    opacity: 1;
    visibility: hidden;
    padding: 12px 15px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    background: #2c2c2c;
    margin: 30px 30px;
    border-radius: 50%;
}
@media screen and (max-width: 768px) {
    .dark .lonon-nav-toggle {
        opacity: 1;
        visibility: visible;
    }
}



/* ======= Sidebar style ======= */
.dark #lonon-page {
    width: 88%;
    margin: 6%;
    overflow: hidden;
    position: relative;
}
.dark #lonon-aside {
    padding: 45px;
    width: 20.25%;
    position: fixed;
    bottom: 30px;
    top: 30px;
    /* left: 0;*/
    overflow-y: scroll;
    z-index: 1001;
    background: #1f1f1f;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    scrollbar-width: none;
}
@media screen and (max-width: 1200px) {
    .dark #lonon-aside {
        width: 26.4%;
    }
}
@media screen and (max-width: 768px) {
    .dark #lonon-aside {
        width: 270px;
        -moz-transform: translateX(-270px);
        -webkit-transform: translateX(-270px);
        -ms-transform: translateX(-270px);
        -o-transform: translateX(-270px);
        transform: translateX(-270px);
        padding-top: 4em;
    }
}
.dark #lonon-aside #lonon-logo {
    text-align: center;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.2em;
    font-family: 'Playfair Display', serif;
    margin-bottom: 45px;
    display: block;
    width: 100%;
}
.dark #lonon-aside #lonon-logo img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 1px solid rgba(255,255,255,0.07);
    padding: 5px;
}
.dark #lonon-logo-footer {
    text-align: center;
    font-weight: 400;
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 0;
    display: block;
    width: 100%;
}
@media screen and (max-width: 768px) {
    .dark #lonon-aside #lonon-logo {
        margin-bottom: 60px;
    }
}
.dark #lonon-aside #lonon-logo a {
    display: inline-block;
    text-align: center;
    color: #fff;
}
.dark #lonon-logo-footer a {
    display: inline-block;
    text-align: center;
    color: #fff;
}
.dark #lonon-aside #lonon-logo a span {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    display: block;
    margin-top: 0px;
    text-align: center;
}
/* Menu */
.dark #lonon-main-menu {
    margin-bottom: 90px;
}
.dark #lonon-aside .lonon-main-menu,
.dark #lonon-aside .lonon-main-menu ul,
.dark #lonon-aside .lonon-main-menu ul li,
.dark #lonon-aside .lonon-main-menu ul li a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.dark #lonon-aside .lonon-main-menu {
    margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
    .dark #lonon-aside .lonon-main-menu {
        margin-bottom: 30px;
    }
}
.dark #lonon-aside .lonon-main-menu ul ul {
    display: none;
}
.dark #lonon-aside .lonon-main-menu ul ul li:last-of-type {
    padding-bottom: 13px;
}
.dark #lonon-aside .lonon-main-menu > ul > li > a {
    font-family: 'Didact Gothic', sans-serif; 
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2em;
    color: #fff;
    margin: 8px 0 0 0;
    padding: 0 0 8px 0;
    list-style: none;
}
.dark #lonon-aside .lonon-main-menu > ul > li > a:hover,
.dark #lonon-aside .lonon-main-menu > ul > li.active > a,
.dark #lonon-aside .lonon-main-menu > ul > li.open > a {
    color: #fff;
}
.dark #lonon-aside .lonon-main-menu > ul > li.open > a {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2em;
    color: #fff;
    margin: 8px 0 0 0;
    padding: 0 0 8px 0;
    list-style: none;
    border-bottom: none;
}
.dark #lonon-aside .lonon-main-menu > ul > li:last-child > a,
.dark #lonon-aside .lonon-main-menu > ul > li.last > a {}
.dark #lonon-aside .lonon-main-menu > ul > li > a:hover > span::after,
.dark #lonon-aside .lonon-main-menu > ul > li.active > a > span::after,
.dark #lonon-aside .lonon-main-menu > ul > li.open > a > span::after {
    border-color: #fff;
}
.dark #lonon-aside .lonon-main-menu ul ul li a {
    padding: 8px 0 8px 16px;
    list-style: none;
    font-family: 'Didact Gothic', sans-serif;
    color: #999;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2em;
}
.dark #lonon-aside .lonon-main-menu ul ul li:hover > a,
.dark #lonon-aside .lonon-main-menu ul ul li.open > a,
.dark #lonon-aside .lonon-main-menu ul ul li.active > a {
    color: #fff;
}
.dark #lonon-aside .lonon-main-menu ul ul ul li a {
    margin-left: 15px;
}
.dark #lonon-aside .lonon-main-menu > ul > li > ul > li:last-child > a,
.dark #lonon-aside .lonon-main-menu > ul > li > ul > li.last > a {
    padding-bottom: 8px;
}
.dark #lonon-aside .lonon-main-menu > ul > li > ul > li.open:last-child > a,
.dark #lonon-aside .lonon-main-menu > ul > li > ul > li.last.open > a {}
.dark #lonon-aside .lonon-main-menu > ul > li > ul > li.open:last-child > ul > li:last-child > a {}
.dark #lonon-aside .lonon-main-menu ul ul li.active > a::after,
.dark #lonon-aside .lonon-main-menu ul ul li.open > a::after,
.dark #lonon-aside .lonon-main-menu ul ul li > a:hover::after {}
/* footer */
.dark #lonon-aside .lonon-footer {
    position: absolute;
    right: 0;
    left: 0;
    font-size: 15px;
    text-align: center;
    font-weight: 400;
    color: #fff;
    padding: 45px 0;
}
.dark #lonon-aside .lonon-footer .gray-icon {
    color: #fff;
    background: transparent;
    padding: 3px;
    font-size: 13px;
}
.dark .lonon-footer p {
    margin-bottom: 0;
    color: #fff;
}
.dark .lonon-footer a {
    color: #fff;
}
@media screen and (max-width: 768px) {
    .dark #lonon-aside .lonon-footer {
        position: relative;
        padding-top: 60px;
    }
}
.dark #lonon-aside .lonon-footer span {
    display: block;
}
.dark #lonon-aside .lonon-footer ul {
    padding: 0;
    margin: 0;
}
.dark #lonon-aside .lonon-footer ul li {
    padding: 0;
    margin: 0;
    display: inline;
    list-style: none;
}
.dark #lonon-aside .lonon-footer ul li a {
    color: #fff;
    padding: 2px;
}
.dark #lonon-aside .lonon-footer ul li a:hover,
.dark #lonon-aside .lonon-footer ul li a:active,
.dark #lonon-aside .lonon-footer ul li a:focus {
    text-decoration: none;
    outline: none;
    color: #fff;
}
/* important offcanvason for menu */
.dark body.offcanvason {
    overflow-x: hidden;
}
.dark body.offcanvason #lonon-aside {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    width: 270px;
    z-index: 999;
    position: fixed;
}
.dark body.offcanvason #lonon-main,
.dark body.offcanvason .lonon-nav-toggle {
    top: 0;
    -moz-transform: translateX(270px);
    -webkit-transform: translateX(270px);
    -ms-transform: translateX(270px);
    -o-transform: translateX(270px);
    transform: translateX(270px);
}



/* ======= Content style ======= */
.dark #lonon-main {
    width: 77%;
    float: right;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
@media screen and (max-width: 1200px) {
    .dark #lonon-main {
        width: 70%;
    }
}
@media screen and (max-width: 768px) {
    .dark #lonon-main {
        width: 100%;
    }
}
.dark #lonon-hero {
    min-height: 560px;
    background: #fff url(../images/loader.gif) no-repeat center center;
    width: 100%;
    float: left;
    margin-bottom: 0;
    clear: both;
}
.dark #lonon-hero .btn {
    font-size: 24px;
}



/* ======= Section style ======= */
.dark .section-padding {
    padding-top: 90px;
    padding-bottom: 90px;
    clear: both;
    width: 100%;
    display: block;
    background: #1b1b1b;
}
.dark .section-title {
    color: #fff;
    font-family: 'Playfair Display', serif;
    margin-bottom: 20px;
    font-weight: 400;
    font-size: 27px;
    line-height: 1.5em;
}
.dark .section-title span {
    display: block;
}
.dark .section-subtitle {
    font-size: 15px;
    margin-bottom: 5px;
    position: relative;
    padding-left: 15px;
}
.dark .section-subtitle:before {
    left: 0;
    width: 5px;
    height: 5px;
    background-color: #fff;
    border-radius: 50%;
}
.dark .section-subtitle:before,
.dark .section-subtitle:after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.dark .section-contitle {
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.5em;
}



/* ======= About style ======= */
.dark .cardvisit {
    padding: 30px;
    margin-left: -100px;
    width: 90%;
    background-color: #1f1f1f;
    margin-top: 30px;
}
.dark .cardvisit h3 {
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 21px;
    margin-bottom: 0px;
    line-height: 1.2em;
}
.dark .cardvisit p {
    color: #fff;
    font-size: 15px;
    line-height: 1.8em;
    font-weight: 400;
    margin-bottom: 0;
}
.dark .cardvisit p i {
    color: #fff;
    margin-right: 5px;
}
.dark .cardvisit p a {
    color: #fff;
}
.dark .cardvisit p a:hover {
    color: #fff;
}
.dark .cardvisit .divider-line {
    height: 1px;
    background: rgba(255,255,255,0.05);
    width: 100%;
    margin: 10px 0 15px 0;
}
.dark .cardvisit span {
    font-weight: 400;
    color: #fff;
    font-size: 15px;
}
.dark .divider1 {
    height: 1px;
    width: 100%;
    background: rgba(255,255,255,0.07);
    margin: 0;
}
@media screen and (max-width: 768px) {
    .dark .cardvisit {
        padding: 20px;
        margin-left: 0;
        width: 100%;
    }
}
@media screen and (max-width: 1200px) {
    .dark .cardvisit {
        margin-left: 0;
        width: 100%;
    }
}



/* ======= Skills Progress Bar style ======= */
.dark .bar {
    position: relative;
    background-color: #2c2c2c;
    height: 1px;
    margin: 0 0 20px 0;
}
.dark .bar-fill {
    position: absolute;
    height: 1px;
}
.dark .bar-title {
    position: relative;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    line-height: 1.5em;
    text-align: left;
    margin: 0 0 5px 0;
    color: #fff;
}
.dark .percent {
    position: absolute;
    right: 0;
}
.dark .bar-fill-developer {
    width: 90%;
    background-color: #fff;
    animation: bar-fill-developer 2s ease-out;
    -moz-animation: bar-fill-developer 2s ease-out;
    -webkit-animation: bar-fill-developer 2s ease-out;
}
@keyframes bar-fill-developer {
    0% {
        width: 0px;
    }
    100% {
        width: 90%;
    }
}
@-moz-keyframes bar-fill-developer {
    0% {
        width: 0px;
    }
    100% {
        width: 90%;
    }
}
@-webkit-keyframes bar-fill-developer {
    0% {
        width: 0px;
    }
    100% {
        width: 90%;
    }
}
.dark .bar-fill-photoshop {
    width: 80%;
    background-color: #fff;
    animation: bar-fill-photoshop 2s ease-out;
    -moz-animation: bar-fill-photoshop 2s ease-out;
    -webkit-animation: bar-fill-photoshop 2s ease-out;
}
@keyframes bar-fill-photoshop {
    0% {
        width: 0px;
    }
    100% {
        width: 80%;
    }
}
@-moz-keyframes bar-fill-photoshop {
    0% {
        width: 0px;
    }
    100% {
        width: 80%;
    }
}
@-webkit-keyframes bar-fill-photoshop {
    0% {
        width: 0px;
    }
    100% {
        width: 80%;
    }
}
.dark .bar-fill-webdesign {
    width: 95%;
    background-color: #fff;
    animation: bar-fill-webdesign 2s ease-out;
    -moz-animation: bar-fill-webdesign 2s ease-out;
    -webkit-animation: bar-fill-webdesign 2s ease-out;
}
@keyframes bar-fill-webdesign {
    0% {
        width: 0px;
    }
    100% {
        width: 95%;
    }
}
@-moz-keyframes bar-fill-webdesign {
    0% {
        width: 0px;
    }
    100% {
        width: 95%;
    }
}
@-webkit-keyframes bar-fill-webdesign {
    0% {
        width: 0px;
    }
    100% {
        width: 95%;
    }
}
.dark .bar-fill-socialmedia {
    width: 85%;
    background-color: #fff;
    animation: bar-fill-socialmedia 2s ease-out;
    -moz-animation: bar-fill-socialmedia 2s ease-out;
    -webkit-animation: bar-fill-socialmedia 2s ease-out;
}
@keyframes bar-fill-socialmedia {
    0% {
        width: 0px;
    }
    100% {
        width: 85%;
    }
}
@-moz-keyframes bar-fill-socialmedia {
    0% {
        width: 0px;
    }
    100% {
        width: 85%;
    }
}
@-webkit-keyframes bar-fill-socialmedia {
    0% {
        width: 0px;
    }
    100% {
        width: 85%;
    }
}



/* ======= Experience Timeline style ======= */
.dark .lonon-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
}
.dark .lonon-timeline:before {
    content: "";
    position: absolute;
    width: 1px;
    left: 10%;
    top: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.03);
}
.dark .lonon-timeline.boxed-lonon-timeline:before {
    top: 0;
    bottom: 0;
}
.dark .lonon-timeline > li {
    margin-bottom: 35px;
    margin-left: 10%;
}
.dark .lonon-timeline > li:last-child {
    margin-bottom: 0;
}
.dark .lonon-timeline > li:hover .lonon-timeline-content:before {
    background-color: #fff;
    box-shadow: 0 0 0 1px #fff;
}
.dark .lonon-timeline > li:hover .lonon-timeline-content .lonon-timeline-date {
    margin-left: -16px;
}
.dark .lonon-timeline > li .lonon-timeline-content {
    padding: 0 50px;
    position: relative;
}
.dark .lonon-timeline > li .lonon-timeline-content:before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 14px;
    height: 14px;
    background-color: #2c2c2c;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    z-index: 100;
    margin-left: -7px;
    border-radius: 50%;
}
.dark .lonon-timeline > li .lonon-timeline-content h4 {
    margin-top: 0;
    font-size: 21px;
}
.dark .lonon-timeline > li .lonon-timeline-content h5 {
    display: block;
    margin-top: 0;
    margin-bottom: 5px;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    color: #fff;
    font-weight: 400;
}
.dark .lonon-timeline > li .lonon-timeline-content p {
    margin-top: 10px;
    margin-bottom: 0;
}
.dark .lonon-timeline > li .lonon-timeline-content .lonon-timeline-date {
    position: relative;
    display: inline-block;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: #101010;
    background-color: #fff;
    height: 22px;
    line-height: 22px;
    margin-left: -12px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}



/* ======= Services style ======= */
.dark .services {
    overflow: hidden;
}
.dark .services .card {
    background: #1f1f1f;
    position: relative;
    border-radius: 0px;
    transition: 0.7s;
    border: none;
    border: 1px solid #1f1f1f;
    margin-bottom: 30px;
}
.dark .services .card-box {
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}
.dark .services .icon-size-1 {
    color: #fff;
    font-size: 45px;
    transition: 0.7s;
}
.dark .services .icon-size-2 {
    color: #fff;
    font-size: 18px;
    opacity: 0;
    transition: 0.7s;
}
.dark .services .card-inner {
    transition: 0.7s;
    z-index: 10;
    text-align: center;
    padding: 60px 20px 10px 20px;
}
.dark .services .card-title {
    position: relative;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 18px;
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}
.dark .services .card .card-box .font-text {}
.dark .services .icon-size {
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}
.dark .services .card-img {
    margin-bottom: 25px;
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}
.dark .services .card:hover {
    background: #fff;
    border: 1px solid #fff;
}
.dark .services .card:hover .icon-size {
    color: #101010;
}
.dark .services .card:hover .card-title {
    color: #101010;
    transform: translateY(-5px);
}
.dark .services .card:hover .card-title:after {
    background: #fff;
}
.dark .services .card:hover .font-text {
    color: #777;
}
.dark .services .card:hover .icon-size-1 {
    transform: translateY(-15px);
}
.dark .services .card:hover .icon-size-2 {
    opacity: 1;
}
.dark .services .card:hover .card-box {
    transform: translateY(-25px);
}
.dark .services .card:hover .card-img {
    transform: translateY(-5px);
}
/* services list */
.dark .list-unstyled {
    list-style: none;
}
.dark .services_list {
    position: relative;
    display: block;
    margin-top: 30px;
    margin-bottom: 30px;
}
.dark .services_list li {
    display: flex;
    align-items: center;
}
.dark .services_list li+li {
    margin-top: 9px;
}
.dark .services_list li .icon {
    display: flex;
    align-items: center;
}
.dark .services_list li .icon span {
    font-size: 13px;
    color: #fff;
}
.dark .services_list li .text {
    margin-left: 15px;
}
.dark .services_list li .text p {
    color: #fff;
    margin: 0;
}


/* ======= Client style ======= */
.dark .clients {
    position: relative;
    margin-bottom: 30px;
    border: 1px solid #eeebe9;
}


/* =======  Testimonials style  ======= */
.dark .testimonials {
    position: relative;
    margin-bottom: 90px;
}
.dark .testimonials:last-child {
    margin-bottom: 0px;
}
.dark .testimonials figure {
    margin: 0;
    position: relative;
    width: 66.666667%;
    margin-left: auto;
        overflow: hidden;
}
.dark .testimonials.left figure {
    margin-left: 0;
    margin-right: auto;
}
.dark .testimonials figure img:hover {
   -webkit-transform: scale(1.05, 1.05);
   transform: scale(1.05);
}
.dark .testimonials figure img {
    transform: scale(1);
    transition: transform 500ms ease;
}
.dark .testimonials .caption {
    background: #1e1e1e;
    position: absolute;
    left: 0;
    top: 50%;
    width: 50%;
    padding: 5% 4% 5% 0%;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
.dark .testimonials.left .caption {
    left: auto;
    right: 0;
    background: #1f1f1f;
    padding: 45px;
}
@media (max-width: 991.98px) {
    .dark .testimonials figure {
        width: auto;
        margin: 0;
    }
    .dark .testimonials figure img {
        display: none;
    }
    .dark .testimonials.left .caption {
    padding: 30px;
}
    .dark .testimonials .caption {
        position: relative;
        left: 0;
        top: 0;
        width: auto;
        padding: 30px;
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
.dark .testimonials .item-box {
    margin-bottom: 20px;
    position: relative;
}
.dark .testimonials .item-box .quote {
    position: absolute;
    right: 20px;
    bottom: 0px;
    width: 80px;
    margin: 0 auto 15px;
    opacity: .1;
}
.dark .testimonials .item-box p {
    font-size: 15px;
    color: #fff;
}
.dark .testimonials .item-box .info {
    text-align: left;
}
.dark .testimonials .item-box .info .author-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    float: left;
    overflow: hidden;
}
.dark .testimonials .item-box .info .cont {
    margin-left: 65px;
}
.dark .testimonials .item-box .info h6 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 0px;
    padding-top: 10px;
    line-height: 1em;
}
.dark .testimonials .item-box .info span {
    font-size: 13px;
    color: #fff;
}


/* ======= Portfolio style ======= */
.dark .portfolio-menu li a {
    cursor: pointer;
    display: block;
    color: #fff;
    margin-bottom: 0px;
    font-size: 15px;
    padding: 8px 15px;
    transition: all 0.5s;
    margin-top: 5px;
    text-decoration: none;
}
.dark .portfolio-menu a.active,
.dark .portfolio-menu a:hover {
    color: #101010;
    background: #fff;
}
.dark .portfolio-item {
    position: relative;
    margin-bottom: 25px;
}
.dark .portfolio-box {
    overflow: hidden;
    position: relative;
}
.dark .portfolio-box .portfolio-img {
    position: relative;
    overflow: hidden;
    border-radius: 0;
        transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}
.dark .portfolio-box .portfolio-img:after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0;
    transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);
}
.dark .portfolio-box .portfolio-img > img {
    transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);
    border-radius: 0;
}
.dark .portfolio-box .portfolio-detail {
    opacity: 0;
    color: #FFF;
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    overflow: hidden;
    transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);
    text-align: center;
    transform: translateY(20px);
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}
.dark .portfolio-box .portfolio-detail h4 {
    color: #fff;
    font-size: 18px;
}
.dark .portfolio-box .portfolio-detail p {
    color: #fff;
    font-size: 15px;
    margin-bottom: 5px;
}
.dark .portfolio-box .portfolio-detail p i {
    color: #fff;
    font-size: 21px;
}
.dark .portfolio-box:hover .portfolio-detail {
    top: 50%;
    transform: translate(0, -50%);
    opacity: 1;
}
.dark .portfolio-box:hover .portfolio-img:after {
    background: rgba(0, 0, 0, 0.8);
}
.dark .portfolio-box:hover .portfolio-img > img {
    transform: scale(1.05);
}
.dark button.mfp-arrow {
    display: none;
}
.dark .mfp-counter {
    display: none;
}
/* prev/next projects */
.dark .lonon-project-prev-next {
    padding: 40px 0;
    background: #1b1b1b;
}
@media (max-width: 576px) {
  .dark .lonon-project-prev-next {
    text-align: center;
  }
  .dark .lonon-project-prev-next-left {
        margin-bottom: 10px;
    }
}
.dark .lonon-project-prev-next a {
    display: inline-block;
    font-size: 15px;
    color: #fff;
    line-height: 1em;
}
.dark .lonon-project-prev-next a i {
  font-size: 20px;
}
.dark .lonon-project-prev-next a:hover {
    color: #fff;
}
.dark .lonon-project-prev-next .lonon-project-prev-next-left a i {
  margin-right: 5px;
  font-size: 13px;
}
.dark .lonon-project-prev-next .lonon-project-prev-next-right a i {
 font-size: 13px;
  margin-left: 0;
  margin-left: 5px;
}


/* ======= Pricing style ======= */
.dark .price-table {
    margin: 40px 0;
    overflow: hidden;
}
.dark .price-box {
    margin: 0;
    padding: 60px 20px 20px 20px;
    background: #1f1f1f;
    text-align: center;
    border: 1px solid #1f1f1f;
}
.dark .price-box.center {
    margin: 0 15px;
    padding: 60px 20px 20px 20px;
    background: transparent;
    text-align: center;
    border: 1px solid #fff;
}
.dark .price-box h5 {
    font-size: 21px;
    margin-bottom: 10px;
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}
.dark .price-features p {
    margin-bottom: 10px;
}
.dark .price-box h1 {
    font-size: 60px;
    line-height: 1em;
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}
.dark .price-box .price-price {
    position: relative;
}
.dark .price-box sup {
    position: absolute;
    font-size: 21px;
    margin-left: -18px;
    top: 28px;
}
.dark .price-box span span {
    font-size: 24px;
}
.dark .price-price {
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}
.dark .price-features {
    min-height: 170px;
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}
.dark .price-features p:last-child {
    margin-bottom: 0;
}
.dark .price-features .ion-close-round {
    font-size: 13px;
}
.dark .price-table-featured {
    padding: 0;
    margin: 20px 0;
}
.dark .pricing-1 .price-table-featured .price-box {
    border: transparent;
}
.dark .price-table-featured .price-features {
    min-height: 190px;
}
.dark .price-box a.button-secondary,
.dark .price-box .button-secondary {
    opacity: 0;
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}
.dark .price-box:hover a.button-secondary,
.dark .price-box:hover .button-secondary {
    opacity: 1;
    transform: translateY(-25px);
}
.dark .price-box:hover {
    background: #fff;
    border: 1px solid #fff;
}
.dark .price-box:hover h5,
.dark .price-box:hover .price-price,
.dark .price-box:hover .price-features {
    transform: translateY(-25px);
}
.dark .price-box:hover h5 {
    color: #101010;
}
.dark .price-box:hover h1 {
    color: #101010;
}



/* ======= Image Gallery style ======= */
.dark .gallery-item {
    position: relative;
    padding-top: 20px;
}
.dark .gallery-box {
    overflow: hidden;
    position: relative;
}
.dark .gallery-box .gallery-img {
    position: relative;
    overflow: hidden;
}
.dark .gallery-box .gallery-img:after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0px;
    transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);
}
.dark .gallery-box .gallery-img > img {
    transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);
    border-radius: 0;
}
.dark .gallery-box .gallery-detail {
    opacity: 0;
    color: #FFF;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    overflow: hidden;
    transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);
}
.dark .gallery-box .gallery-detail h4 {
    font-size: 18px;
}
.dark .gallery-box .gallery-detail p {
    color: Rgba(0, 0, 0, 0.4);
    font-size: 14px;
}
.dark .gallery-box .gallery-detail i {
    color: #1b1b1b;
    padding: 8px;
}
.dark .gallery-box .gallery-detail i:hover {
    color: #1b1b1b;
}
.dark .gallery-box:hover .gallery-detail {
    top: 50%;
    transform: translate(0, -50%);
    opacity: 1;
}
.dark .gallery-box:hover .gallery-img:after {
    background: rgba(0,0,0, 0.05);
}
.dark .gallery-box:hover .gallery-img > img {
    transform: scale(1.05);
}
/* magnific popup custom */
.dark .mfp-figure button {
    border: 0px solid transparent;
}
.dark  button.mfp-close {
    border: 0px solid transparent;
    background: transparent;
    display: block;
}


/* ======= Video Gallery style ======= */
.dark .vid-icon {
    position: relative;
    overflow: hidden;
}
.dark .vid-icon:hover img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.09, 1.09);
    transform: scale(1.09, 1.09);
    -webkit-filter: brightness(70%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.dark .video-gallery-button {
    position: relative;
    margin: auto;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    z-index: 4;
    margin-right: 20px;
    float: left;
}
.dark .video-gallery-polygon {
    z-index: 2;
    padding-right: 5px;
    display: inline-block;
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: #fff;
    border-radius: 50%;
    color: #1b1b1b;
    padding: 10px 9px 10px 11px;
    line-height: 0;
    box-shadow: 0px 0px 0px 5px rgb(255 255 255 / 10%);
}
.dark .video-gallery-polygon:hover {
    background: #1b1b1b;
    color: #fff;
}
.dark .video-gallery-polygon {
    font-size: 13px;
}


/* ======= Accordion Box (for Faqs) style ======= */
.dark .accordion-box {
  position: relative;
    padding: 0px;
}
.dark .accordion-box .block {
    position: relative;
    background: #1f1f1f;
    border-radius: 0px;
    overflow: hidden;
    margin-bottom: 20px;
}
.dark .accordion-box .block.active-block {
  background-color: #1f1f1f;
}
.dark .accordion-box .block:last-child {
  margin-bottom: 0;
}
.dark .accordion-box .block .acc-btn {
    position: relative;
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
    cursor: pointer;
    padding: 20px 40px;
    padding-right: 60px;
    color: #fff;
    transition: all 500ms ease;
}
.dark .accordion-box .block .acc-btn .count {
  color: #fff;
  padding-right: 3px;
}
.dark .accordion-box .block .acc-btn:before {
  position: absolute;
    right: 35px;
    top: 20px;
    height: 30px;
    font-size: 10px;
    font-weight: normal;
    color: #fff;
    line-height: 30px;
    content: "\e64b";
    font-family: "Themify";
    transition: all 500ms ease;
}
.dark .accordion-box .block .acc-btn.active {
  background-color: #1f1f1f;
    color: #fff;
}
.dark .accordion-box .block .acc-btn.active:before {
  color: "Themify";
  content: "\e648";
}
.dark .accordion-box .block .acc-content {
  position: relative;
  display: none;
}
.dark .accordion-box .block .content {
  position: relative;
    padding: 0px 40px 30px;
    background-color: #1f1f1f;
    color: #fff;
}
.dark .accordion-box .block .acc-content.current {
  display: block;
}
.dark .accordion-box .block .content .text {
  display: block;
  position: relative;
  top: 0px;
  display: block;
}



/* ======= Team style ======= */
.dark .team .item {
    margin-bottom: 30px;
}
.dark .team .item:hover .info .social {
    top: 0;
}
.dark .team .info {
    text-align: center;
    padding: 30px 20px;
    position: relative;
    overflow: hidden;
    background: #1f1f1f;
}
.dark .team .info h6 {
    font-size: 18px;
    margin-bottom: 0px;
    color: #fff;
}
.dark .team .info p {
    margin-bottom: 5px;
    color: #fff;
}
.dark .team .info .social {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    -webkit-transition: all .4s;
    transition: all .4s;
}
.dark .team .info .social p {
    margin-bottom: 5px;
    color: #fff;
}
.dark .team .info .social a {
    font-size: 15px;
    color: #101010;
    margin: 0 5px;
}
.dark .team .info .social a:hover {
    color: #101010;
}
.dark .team .owl-dots .owl-dot span {
    width: 9px;
    height: 9px;
    margin: 0 3px;
    border-radius: 50%;
    background: #323232;
    border: 1px solid #323232;
}
.dark .team .owl-dots .owl-dot.active span, 
.dark .team .owl-dots .owl-dot:hover span {
    background: #fff;
    border: 1px solid #fff;
}
.dark .team .item .img {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}
.dark .team .item .img > img {
    transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);
    border-radius: 0;
}
.dark .team .item .img > img:hover {
    transform: scale(1.05);
}



/* ======= Homepage Blog style ======= */
.dark .homepageblog {
  overflow: hidden;
}
.dark .homepageblog .img-card {
    margin-bottom: 20px;
}
.dark .homepageblog .img-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
    text-align: center;
}
.dark .homepageblog .wrapper-img {
  position: relative;
  background: #101010;
  transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
  overflow: hidden;
}
.dark .homepageblog img {
  width: 100%;
  margin: 0;
  transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
  background-size: cover;
  filter: brightness(100%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg);
  opacity: 0.6;
}
.dark .homepageblog .img-block:hover .title-block {
  transform: translateY(-40px);
}
.dark .homepageblog .img-block:hover img {
  filter: brightness(100%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg);
  box-shadow: 0 1px 15px 1px rgba(0, 0, 0, 0.2);
  opacity: 0.4;
  transform: scale(1.1);
}
.dark .homepageblog .img-block:hover .icon-size {
  opacity: 1;
}
.dark .homepageblog .title-block h4 {
  color: #fff;
  font-size: 21px;
    line-height: 1.2em;
  margin-bottom: 20px;
}
.dark .homepageblog .title-block h4 a {
    color: #fff;
}
.dark .homepageblog .title-block .category {
    font-size: 13px;
    word-spacing: 2px;
    color: #fff;
}
.dark .homepageblog .title-block .category a {
    margin-right: 5px;
    position: relative;
    color: #fff;
}
.dark .homepageblog .title-block .category a:last-child {
    margin-right: 0;
}
.dark .homepageblog .title-block .category a:last-child:after {
    display: none;
}
.dark .homepageblog .icon-size {
  font-size: 18px;
  color: #fff;
  opacity: 0;
  transition: 0.7s;
}
.dark .homepageblog .title-block {
  position: absolute;
  bottom: -5px;
  transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
  padding: 0 15px;
}





/* ======= Blog style ======= */
.dark .blog-entry {
    width: 100%;
    float: left;
    margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
    .dark .blog-entry {
        margin-bottom: 45px;
    }
}
.dark .blog-entry .blog-img {
    width: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}
.dark .blog-entry .blog-img img {
    position: relative;
    max-width: 100%;
    transition: .5s ease all;
}
.dark .blog-entry .desc h3 {
    font-size: 24px;
    margin-bottom: 20px;
    line-height: 1em;
    font-weight: 400;
}
.dark .blog-entry .desc h3 a {
    color: #fff;
    text-decoration: none;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 24px;
}
.dark .blog-entry .desc span {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    color: #fff !important;
}
.dark .blog-entry .desc span small i {
    color: #fff;
}
.dark .blog-entry .desc .lead {
    font-size: 15px;
    color: #fff;
    font-weight: 400;
    font-family: 'Didact Gothic', sans-serif;
}
.dark .blog-entry .desc .lead:hover {
    color: #fff;
}
.dark .blog-entry:hover .blog-img img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}



/* ======= Post style ======= */
/* prev/next post */
.dark .lonon-post-prev-next {
    padding: 40px 0;
    background: #1b1b1b;
}
@media (max-width: 576px) {
  .dark .lonon-post-prev-next {
    text-align: center;
  }
  .dark .lonon-post-prev-next-left {
        margin-bottom: 10px;
    }
}
.dark .lonon-post-prev-next a {
    display: inline-block;
    font-size: 15px;
    color: #fff;
    line-height: 1em;
}
.dark .lonon-post-prev-next a i {
  font-size: 20px;
}
.dark .lonon-post-prev-next a:hover {
    color: #fff;
}
.dark .lonon-post-prev-next .lonon-post-prev-next-left a i {
  margin-right: 5px;
  font-size: 13px;
}
.dark .lonon-post-prev-next .lonon-post-prev-next-right a i {
 font-size: 13px;
  margin-left: 0;
  margin-left: 5px;
}
/* comment */
.dark .comments-area {
    padding: 30px 0;
}
.dark .comments-area .comments-title {
    font-size: 24px;
    font-family: 'Playfair Display', serif;
    line-height: 1.5em;
    font-weight: 400;
}
.dark ol.comment-list {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}
.dark ol.comment-list li.comment {
    position: relative;
    padding: 0;
}
.dark ol.comment-list li.comment .comment-body {
    position: relative;
    padding: 20px 30px 20px 90px;
    margin-left: 40px;
    color: #fff;
    position: relative;
}
.dark ol.comment-list li.comment .comment-author {
    display: block;
    margin-bottom: 0px;
}
.dark ol.comment-list li.comment .comment-author .avatar {
    position: absolute;
    top: 20px;
    left: -40px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    background-color: #fff;
}
.dark ol.comment-list li.comment .comment-author .name {
    display: inline-block;
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    line-height: 1.5em;
    font-weight: 400;
    margin-bottom: 0;
}
.dark ol.comment-list li.comment .comment-author .says {
    display: none;
    color: #fff;
    font-weight: 400;
}
.dark ol.comment-list li.comment .comment-meta {
    color: #fff;
    margin-bottom: 15px;
    font-size: 13px;
    font-weight: 400;
}
.dark ol.comment-list li.comment .comment-meta a {
    color: #fff;
}
.dark ol.comment-list li.comment .comment-meta:before,
.dark ol.comment-list li.comment .reply a:before {
    font-family: "FontAwesome";
    font-size: 15px;
    vertical-align: top;
}
.dark ol.comment-list li.comment p {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    line-height: 1.5em;
    margin: 0 0 20px;
    color: #fff;
}
.dark ol.comment-list li.comment .reply a {
    position: absolute;
    top: 50px;
    right: 30px;
    margin-top: -5px;
    font-size: 13px;
    color: #fff;
}
.dark ol.comment-list li .children {
    list-style: none;
    margin-left: 80px;
}
.dark ol.comment-list li .children li {
    padding: 0;
}
@media only screen and (max-width: 767px) {
    .dark .comments-area .padding-30 {
        padding: 15px;
    }
    .dark ol.comment-list li.comment .comment-body {
        margin-bottom: 30px;
        margin-left: 30px;
    }
    .dark ol.comment-list li.comment .comment-author .avatar {
        left: -35px;
        height: 70px;
        width: 70px;
    }
    .dark ol.comment-list li .children {
        margin-left: 20px;
    }
    .dark ol.comment-list li.comment .reply a {
        position: static;
    }
}
@media only screen and (max-width: 480px) {
    .dark ol.comment-list li.comment .comment-body {
        margin-left: 26px;
    }
    .dark ol.comment-list li.comment .comment-author .avatar {
        left: -15px;
        top: 12px;
        width: 60px;
        height: 60px;
    }
    .dark ol.comment-list li.comment .comment-body {
        padding-left: 55px;
    }
}
/* Blog & Post sidebar */
.dark .blog-sidebar .widget {
    background: #1f1f1f;
    padding: 30px 20px;
    margin-bottom: 30px;
    overflow: hidden;
}
.dark .blog-sidebar .widget ul {
    margin-bottom: 0;
    padding: 0;
}
.dark .blog-sidebar .widget ul li {
    margin-bottom: 15px;
    color: #fff;
    font-size: 15px;
    line-height: 1.5em;
}
.dark .blog-sidebar .widget ul li a {
    color: #fff;
}
.dark .blog-sidebar .widget ul li a.active {
    color: #fff;
}
.dark .blog-sidebar .widget ul li a:hover {
    color: #fff;
}
.dark .blog-sidebar .widget ul li:last-child {
    margin-bottom: 0;
}
.dark .blog-sidebar .widget ul li i {
    font-size: 9px;
    margin-right: 10px;
    color: #fff;
}
.dark .blog-sidebar .widget .recent li {
    display: block;
    overflow: hidden;
}
.dark .blog-sidebar .widget .recent .thum {
    width: 90px;
    overflow: hidden;
    float: left;
}
.dark .blog-sidebar .widget .recent a {
    display: block;
    margin-left: 105px;
}
.dark .blog-sidebar .widget-title {
    margin-bottom: 20px;
}
.dark .blog-sidebar .widget-title h6 {
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 21px;
    line-height: 1.75em;
    margin-bottom: 15px;
}
.dark .blog-sidebar .search form {
    position: relative;
}
.dark .blog-sidebar .search form input {
    width: 100%;
    padding: 10px;
    border: 0;
    background: #2c2c2c;
    margin-bottom: 0;
}
.dark .blog-sidebar .search form button {
    position: absolute;
    right: 0;
    top: 0;
    background-color: transparent;
    color: #fff;
    border: 0;
    padding: 10px 20px 6px 20px;
    cursor: pointer;
    margin: 0;
}
.dark .blog-sidebar .tags li {
    margin: 3px !important;
    padding: 6px 16px;
    background-color: #2c2c2c;
    color: #fff !important;
    float: left;
}
.dark .blog-sidebar ul.tags li a {
    font-size: 14px;
    color: #fff;
}
.dark .blog-sidebar ul.tags li:hover,
.dark .blog-sidebar ul.tags li a:hover {
    background-color: #1e1e22;
    color: #fff;
}
/* pagination */
.dark .lonon-pagination-wrap {
    padding: 0;
    margin: 0;
    text-align: center;
}
.dark .lonon-pagination-wrap li {
    display: inline-block;
    margin: 0 3px;
}
.dark .lonon-pagination-wrap li a {
    background: transparent;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-weight: 400;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.05);
}
.dark .lonon-pagination-wrap li a:hover {
    opacity: 1;
    text-decoration: none;
    background: #fff;
    color: #101010;
    border: 1px solid #fff;
}
.dark .lonon-pagination-wrap li a.active {
    background: #fff;
    color: #101010;
    border: 1px solid #fff;
}
.dark .lonon-pagination-wrap li a i {
    font-size: 12px;
}
@media screen and (max-width: 768px) {
    .dark .lonon-pagination-wrap {
        padding: 0 0 60px 0;
        margin: 0;
        text-align: center;
    }
}



/* ======= Contact style ======= */
.dark .map-section {
    overflow: hidden;
    margin-bottom: 60px;
}
.dark #contactMap {
    width: 100%;
    height: 450px;
}
.dark .map {    
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    }



/* ======= Button style ======= */
/* button primary */
.dark .button-primary {
  display: inline-block;
  height: auto;
  padding: 12px 27px;
  border: 1px solid transparent;
  border-radius: 80px;
  background-color: #fff;
  -webkit-transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
  transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
  color: #1b1b1b;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
}
.dark .button-primary:hover {
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
}

/* button secondary */
.dark .button-secondary {
  display: inline-block;
  height: auto;
  padding: 12px 27px;
  border: 1px solid transparent;
  border-radius: 80px;
  background-color: #1b1b1b;
  -webkit-transition: border-color 400ms ease, background-color 400ms ease;
  transition: border-color 400ms ease, background-color 400ms ease;
  color: #fff;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
}
.dark .button-secondary:hover {
  border-color: #1f1f1f;
  background-color: #1f1f1f;
  color: #fff;
}

/* button tersiyer */
.dark .button-tersiyer {
  display: inline-block;
  height: auto;
  padding: 12px 27px;
  border: 1px solid #fff;
  border-radius: 80px;
  background-color: transparent;
  -webkit-transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
  transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
  color: #fff;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
}
.dark .button-tersiyer:hover {
  border: 1px solid #fff;
  background-color: #fff;
  color: #1b1b1b;
}


/* ======= Error Page 404 style ======= */
.dark .error-form {
  position: relative;
  max-width: 520px;
  margin: 50px auto 0;
}
.dark .error-form form {
  position: relative;
}
.dark .error-form .form-group {
  position: relative;
  margin: 0;
}
.dark .error-form .form-group input[type="text"],
.dark .error-form .form-group input[type="search"],
.dark .error-form .form-group input[type="email"] {
    position: relative;
    width: 100%;
    line-height: 30px;
    padding: 14px 60px 15px 25px;
    height: 60px;
    display: block;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    background: #fff;
    color: #fff;
    border-radius: 30px;
    border: 1px solid #1b1b1b;
    transition: all 300ms ease;
    outline: none;
}
.dark .error-form .form-group input[type="text"]:focus,
.dark .error-form .form-group input[type="email"]:focus,
.dark .error-form .form-group input[type="search"]:focus {
    border-color: #1f1f1f;
    outline: none;
}
.dark .error-form .form-group input::-webkit-input-placeholder {
  color: #fff;
}
.dark .error-form .form-group .theme-btn {
    position: absolute;
    right: 20px;
    top: 0px;
    width: 40px;
    height: 40px;
    font-size: 20px;
    background: none;
    color: #fff;
    border: none;
}
.dark .error-form .form-group .theme-btn span {
  vertical-align: middle;
    outline: none;
}



/* ======= Footer style ======= */
.dark #lonon-footer2 {
    padding: 80px 60px 60px 60px;
    background: #1f1f1f;
}
.dark #lonon-footer2 h2 {
    margin: 0 0 20px 0;
    color: #fff;
    font-size: 21px;
    line-height: 1.2em;
}
@media screen and (max-width: 768px) {
    .dark #lonon-footer2 {
        padding: 80px 30px;
        text-align: center;
    }
}
.dark .lonon-lead {
    font-size: 13px;
    line-height: 2em;
    color: #fff;
}
/* social */
.dark ul.social-network {
    list-style: none;
    display: inline;
    margin-left: 0 !important;
    padding: 0;
    float: right;
    margin-bottom: 20px;
}
.dark ul.social-network li {
    display: inline;
    margin: 0 5px;
}
.dark .social-network li a {
    display: inline-block;
    position: relative;
    margin: 0 auto 0 auto;
    font-size: 13px;
}
@media screen and (max-width: 768px) {
    .dark ul.social-network {
        display: inherit;
        text-align: center;
        float: none;
        margin-bottom: 0;
    }
}




/* ======= toTop Button style ======= */
.dark .progress-wrap {
    position: fixed;
    bottom: 30px;
    right: 20px;
    height: 45px;
    width: 45px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}
.dark .progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.dark .progress-wrap::after {
    position: absolute;
    font-family: 'themify';
    content: '\e648';
    text-align: center;
    line-height: 45px;
    font-size: 10px;
    font-weight: 400;
    color: #fff;
    left: 0;
    top: 0;
    height: 45px;
    width: 45px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}
.dark .progress-wrap svg path {
    fill: none;
}
.dark .progress-wrap svg.progress-circle path {
    stroke:  #1f1f1f;
    stroke-width: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}
.dark .progress-wrap {
    -webkit-box-shadow: inset 0 0 0 1px #1f1f1f;
    box-shadow: inset 0 0 0 1px  #1f1f1f;
}
.dark .progress-wrap::after {
    color: #fff;
}
.dark .progress-wrap svg.progress-circle path {
    stroke: #fff;
}
.dark #lonon-aside .lonon-main-menu ul ul li a {
    color: #fff;
}