/*----------------------------------------------------------------------------
    TABLE OF CONTENTS:
------------------------------------------------------------------------------
    # Reset
        ## Browser Reset
        ## Normalize
        ## Forms
        ## Typography
        ## Elements
        ## Links
        ## Accessibility
        ## Clearings
        ## Media
        ## Gallery
        ## Page Builder Reset
    
    # Helper Class

    # Widgets
        ## General
        ## Search
        ## Recent Posts
        ## Recent Comments
        ## Text Widget
        ## Tag Cloud
        ## Calendar
        ## RSS
        ## Media Gallery
        ## Content Types
        ## Trending Posts

    # Content

    # Header
        ## General
        ## Top Area
        ## Bottom Area
        ## Sticky Header
        ## Sub Menu
        ## Mega Menu
        ## Left Logo Menu
        ## Left Logo Menu Joined
        ## Center Logo Split Menu
        ## Left Side Menu | Right Side Menu | Fly in Left | Fly in Right
        ## Right Side Menu ( overwrite )
        ## Fly in Left Side Menu ( overwrite )
        ## Fly in Right Side Menu ( overwrite )
        ## Overlay Center Menu
        ## Burger Area
        ## Responsive Menu
        ## Menu Widget Area

    # Menu Style
        ## Line

    # Sub Header
        ## Normal
        ## Only Breadcrumbs

    # Small Area Elements
        ## General

    # Header Icon
        ## General
        ## Overlay Search
        ## Social Icons

    # Blog / Archives / Search
        ## General
        ## Featured Post Slider
        ## Post Content Overlap
        ## Masonry
        ## Grid ( overwrite )
        ## Post List
        ## Pagination
        ## Search Result

    # Single Post
        ## General
        ## Content
        ## Tags
        ## Share
        ## Author Box
        ## Comments
        ## Comment Form
        ## Next / Previous
        ## Related Post
        ## Content Below Image

    # Single Portfolio
        ## General
        ## Portfolio Details
        ## Media
        ## Task
        ## Related Portfolio
        ## Task Below Image
        ## Details Overlaps Image
        ## Details Table

    # 404

    # Footer
        ## General
        ## Widget Area
        ## Footer Bottom
        ## Back To Top
        ## Body Overlay
    
    # Header and Footer Builder
        ## Logo
        ## Menu
        ## Breadcrumbs

    # Extras
        ## Tab
        ## Slick Slider
        ## Row Separator
        ## Preloader
        ## Loader
        ## Primary Color Reset
        ## Grid Creator Blocks
        ## Dot Navigation
        ## Popup Notices

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





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


/* Browser Reset ------------------------------------------------------------- */

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;
}

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;
}


/* Normalize ----------------------------------------------------------------- */

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

a,
a:focus,
a:hover {
    text-decoration: none;
    background-color: transparent;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

b,
strong {
    font-weight: 600;
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

img {
    border-style: none;
}


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

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

details {
    display: block;
}

summary {
    display: list-item;
}

template {
    display: none;
}

[hidden] {
    display: none;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 0;
    outline: none;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: var( --lighten-border-color );
}

button:active, button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
    border-color: var( --lighten-border-color );
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
select,
textarea {
    font-size: 14px;
    font-weight: normal;
    color: var( --normal-color );
    line-height: 50px;
    width: 100%;
    height: 50px;
    padding: 0 0 0 15px;
    border: 1px solid var( --lighten-border-color );
    display: inline-block;
    outline: none;
    position: relative;
}

button,
input,
select,
optgroup,
textarea {
    font-size: 14px;
    line-height: 2;

}

label {
    font-size: 16px;
    color: var( --normal-color );
    line-height: 1;
    margin: 0 0 20px 0;
    display: block;
}

textarea {
    padding: 15px;
    width: 100%;
    height: 200px;
}

select option {
    line-height: 2;
}

input[type=checkbox],
input[type="radio"] {
    margin: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

::placeholder {
    color: var( --light-color );
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: var( --light-color );
}
::-moz-placeholder { /* Firefox 19+ */
    color: var( --light-color );
}
:-ms-input-placeholder { /* IE 10+ */
    color: var( --light-color );
}
:-moz-placeholder { /* Firefox 18- */
    color: var( --light-color );
}


/* Typography ---------------------------------------------------------------- */

body {
    font-family: var( --secondary-font );
    font-size: 15px;
    font-weight: 400;
    color: var( --normal-color );
    line-height: 2;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var( --primary-font );
    font-size: 28px;
    font-weight: 600;
    color: var( --extra-dark-color );
    line-height: 1.4;
    clear: both;
}

h1,
.entry-content h1 {
    font-size: 36px;
    line-height: 1.4em;
    margin: 0 0 20px 0;
}

h2,
.entry-content h2 {
    font-size: 32px;
    line-height: 1.4em;
    margin: 0 0 15px 0;
}

h3,
.entry-content h3 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2em;
}

h4,
.entry-content h4 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2em;
}

h5,
.entry-content h5 {
    font-size: 21px;
    font-weight: 600;
    line-height: 1em;
}

h6,
.entry-content h6 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1em;
}

p {
    line-height: 2;
    margin-bottom: 1.5em;
}

dfn, cite, em, i {
    font-style: italic;
}

blockquote {
    background: #f7f7f7;
    margin: 0 0 30px 0;
    padding: 30px;
    border-left: 4px solid;
}

address {
    margin: 0 0 1.5em;
}

pre {
    font-family: 'Courier 10 Pitch', Courier, monospace;
    font-size: 15px;
    font-size: 0.9375rem;
    background: #eee;
    line-height: 1.6;
    margin: 1.6em 0;
    padding: 1.6em;
    max-width: 100%;
    overflow: auto;
}

code,
kbd,
tt,
var {
    font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace;
    font-size: 15px;
    font-size: 0.9375rem;
    padding: 2px 8px;
}

code {
    font-size: 90%;
    color: #ffb1b5;
    background-color: var( --dark-background-color );
    margin: 14px 0;
    padding: 0 8px;
    display: inline-block;
    border-radius: 2px;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    text-decoration: none;
    background: #fff9c0;
    padding: 2px 5px;
}

big {
    font-size: 125%;
}


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

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    background: #fff;
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

ul,
ol {
    margin: 0;
}

ul {
    list-style: disc inside;
    margin-bottom: 20px;
}

ol {
    list-style: decimal inside;
    margin-bottom: 20px;
}

dl {
    margin-bottom: 30px;
}

ul li ul,
ol li ol,
ul li ol,
ol li ul {
    margin: 10px 0 0 15px;
}

dl > dt {
    font-weight: 500;
    width: 15%; 
    display: block;
    float: left;
}

dl > dt,
dl > dd {
    margin: 0;
    padding: 10px 0;
}

dl > dd {    
    padding: 10px 0 10px 15%;
    border-bottom: 1px solid var( --lighten-border-color );
}

dl > dd:after {
    content: '';
    clear: both;
    display: block;
}

img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

img[height] {    
    height: 100%;
}

figure {
    margin: 1em 0;
}

table {
    margin: 20px 0 30px;
    width: 100%;
    border: 1px solid var( --lighten-border-color );
    box-sizing: border-box;
}

tr {
    border-bottom: 1px solid var( --lighten-border-color );
}

th {
    color: var( --dark-color );
    font-weight: 600;
}

th a {
    color: var( --primary-color );
}

th,
td {
    vertical-align: middle;
    padding: 8px 20px;
    border-right: 1px solid var( --lighten-border-color );
}

th label,
td label {
    margin: 0;
}

/* Links --------------------------------------------------------------------- */

a,
a:hover,
a:active,
a:focus {
    color: var( --extra-dark-color );
    outline: 0;
}


/* Accessibility ------------------------------------------------------------- */

#content[tabindex="-1"]:focus {
    outline: 0;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

p:empty {
    display: none;
}


/* Clearings ----------------------------------------------------------------- */

.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
    content: "";
    display: table;
    table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
    clear: both;
}


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

.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

embed,
iframe,
object {
    max-width: 100%;
}


/* Gallery ------------------------------------------------------------------- */

.gallery {
    margin-bottom: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    margin: 0;
    width: 100%;
}

.gallery-item .wp-caption-text {
    background: none;
}

.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-columns-3 .gallery-item {
    max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
    max-width: 25%;
}

.gallery-columns-5 .gallery-item {
    max-width: 20%;
}

.gallery-columns-6 .gallery-item {
    max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
    max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
    max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
    max-width: 11.11%;
}


/* Page Builder Reset -------------------------------------------------------- */

.kc_row.kc_row_inner {
    padding-left: 15px;
    padding-right: 15px;
}

.kingcomposer:not(.single-post) #content-wrapper {
    margin: 0;
}

img[src*="plugins/kingcomposer/assets/images/get_start.jpg"] {
    display: none;
}

.container-full.quirk-header-builder section[data-kc-fullwidth="row"],
.container-full.quirk-footer-builder section[data-kc-fullwidth="row"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    left: 0 !important;
}


/* ---------------------------------------------------------------------------
 * Helper Class
------------------------------------------------------------------------------ */

.fullwidth-container {
    width: 100%;
    max-width: 100%;
    padding: 0 60px;
}

.sub-text {
    color: #5b5b5b;
}

.title {
    font-family: var( --primary-font );
    line-height: 1.4;
    word-break: break-word;
    margin: 0;
}

.sub-title {
    font-family: var( --secondary-font );
    word-break: break-word;
}



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


/* General ------------------------------------------------------------------- */

.widget {
    margin: 0 0 40px 0;
    overflow: hidden;
}

.widget li {
    font-size: var( --font-extra-small );
    list-style-type: none;
    line-height: 1.4;
    margin: 0 0 15px 0;
}

.widget li a {
    text-decoration: none;
    color: var( --normal-color );
}

.widget li a:hover {
    color: var( --primary-color );
}

.widget-title {
    font-size: var( --font-medium );
    color: var( --extra-dark-color );
    margin: 0 0 20px 0;
    line-height: 1;
}

.widget select {
    line-height: 50px;
    padding: 0 0 0 10px;
    width: 100%;
    height: 50px;
    border: 1px solid var( --lighten-border-color );
}


/* Search -------------------------------------------------------------------- */
    
.widget_search form {
    position: relative;
}

.widget_search form label {
    width: 100%;
}

.widget_search form label input {
    font-size: 14px;
    padding: 0px 10px;
    height: 50px;
}

.widget_search form .search-submit {
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var( --darken-background-color );
    padding: 0 20px;
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
}


/* Recent Posts -------------------------------------------------------------- */
    
.widget_recent_entries li {
    margin: 0 0 25px 0;
}


/* Recent Comments ----------------------------------------------------------- */
    
.widget_recent_comments li a {
    color: #5b5b5b;
    border-bottom: 1px solid;
}


/* Text Widget --------------------------------------------------------------- */
    
.widget_text .textwidget {
    font-size: 15px;
}

.textwidget strong {
    font-size: 15px;
    font-weight: 600;
    color: #5b5b5b;
}

.textwidget .wp-caption-text {
    margin: 0 0 20px 0;
    padding: 10px 0 0 25px;
}


/* Tag Cloud ----------------------------------------------------------------- */
    
.widget_tag_cloud .tagcloud a {
    color: #fff;
    background: var( --dark-background-color );
    text-decoration: none; 
    margin: 5px 2px;
    padding: 6px 10px;
    display: inline-block;
}


/* Calendar ------------------------------------------------------------------ */

#wp-calendar {
    margin: 0;
    width: 100%;
    border: 0;
}

#wp-calendar caption { 
    font-size: 14px; 
    color: #282727; 
    text-align: right; 
    margin: 10px 0 15px 0;
    clear: both;
}

#wp-calendar thead { 
    font-size: 12px; 
}

#wp-calendar tr {
    border: 0;
}

#wp-calendar thead th { 
    padding: 0 0 10px 0; 
    text-align: center;
    border: 0;
}

#wp-calendar tbody { 
    color: #999; 
}

#wp-calendar tbody td {    
    font-size: 13px;
    text-align: center;
    background: #f2f2f2;
    padding: 6px 10px;
    border: 1px solid #fff;
}

#wp-calendar tbody td:hover { 
    background: #fff; 
}

#wp-calendar tbody .pad { 
    background: none; 
}

#wp-calendar tfoot td { 
    border: 0;
}

#wp-calendar tfoot #next { 
    font-size: 10px; 
    text-transform: uppercase; 
    text-align: right; 
}

#wp-calendar tfoot #prev { 
    font-size: 10px; 
    text-transform: uppercase; 
    padding-top: 10px; 
}


/* RSS ----------------------------------------------------------------------- */

.widget_rss li {
    margin: 0 0 30px 0;
    padding: 0 0 30px 0;
    line-height: 1.6;
    border-bottom: 1px solid var( --lighten-border-color ); 
}

.widget_rss li .rsswidget {    
    font-family: var( --primary-font );
    font-size: 18px;
    font-weight: 600;
    color: #282727;
}

.widget_rss li .rss-date {
    font-size: 13px;
    font-weight: 600;
    color: #5b5b5b;
    text-transform: uppercase;
    margin: 15px 0 0 0;
    display: block;
}

.widget_rss li .rssSummary {
    margin: 25px 0 0 0;
    line-height: 1.8;
}

.widget_rss li cite {
    margin: 20px 0 0 0;
    line-height: 1.8;
    display: block;
}

.widget_rss li cite:before {
    content: '- ';
}


/* Media Gallery ------------------------------------------------------------- */

.widget_media_gallery figure {
    margin: 0;
    padding: 2px;
}


/* Content Types ------------------------------------------------------------- */

.widget-content-posts .widget-title {
    margin: 0 0 35px 0;
}

.widget-content-posts .post-item {
    margin: 0 0 30px 0;
    display: flex;
}

.widget-content-posts .post-item:last-child {
    margin: 0;
}

.widget-content-posts .post-thumb {
    margin: 0 20px 0 0;
}

.widget-content-posts .post-thumb img {
    max-width: 75px;
}

.widget .post-item .post-content {
    text-align: left;
    width: 100%;
}

.widget .post-content .meta,
.widget .post-content .meta a {
    font-weight: 600;
    text-transform: uppercase;
    color: var( --dark-color );
}

.widget .post-content .meta,
.widget_recent_entries li .post-date {
    font-size: 14px;
    margin: 0;
}

.widget ul .post-item .title {
    line-height: 1;
    margin: 0;
}

.widget ul .post-item .title a,
.widget_recent_entries li a {
    font-family: var( --primary-font );
    font-size: 18px;
    color: #282727;
    margin: 0;
}


/* Trending Posts ------------------------------------------------------------ */

.widget-trending-posts .widget-title {
    margin: 0 0 40px 0;
}

.widget-trending-posts .post-item {
    margin: 0 0 40px 0;
    display: flex;
}

.widget-trending-posts .number {
    font-size: 48px;
    color: #5b5b5b;
    line-height: 1;
    padding: 0 20px;
}

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

#content-wrapper {
    margin: 100px 0;
}

.wp-caption-text {
    background: #f8f8f8;
    text-align: center;
    line-height: normal;
    margin: 0;
    padding: 10px 0 5px;
    display: block;
}

.wp-caption {
    line-height: 0;
    margin: 0 0 30px 0;
    max-width: 100%;
    display: block;
    border: 6px solid #f7f7f7; 
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.wp-caption img {
    max-width: 100%;
}

.alignleft {
    float: left;
    margin: 15px 15px 15px 0;
}

.alignright {
    float: right;
    margin: 15px 0 15px 15px;
}

.aligncenter {
    text-align: center;
    margin: 0 auto;
    display: block;
}

.left-sidebar .content-area {
    float: right;
}

.responsive-text {
    display: none;
}



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


/* General ------------------------------------------------------------------- */

.header-wrapper {
    width: 100%;
    position: relative;
    z-index: 999;
}

.header-container {
    border-bottom: 1px solid var( --light-border-color );
}

.no-header-border .header-container {
    border: 0;
}

.header-inner {
    height: 120px;
    line-height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header {
    background: #fff;
    top: -100%;
    transition: all ease 500ms;
}

.transparent-header .header-wrapper {
    position: absolute;
    z-index: 100001;
}

.transparent-header .header,
.transparent-header .header-inner {    
    background: none;
}

.transparent-header .header-container,
.transparent-header .small-area-cover {    
    border: 0;
}

.full-width-header .header-inner,
.full-width-header .small-area {
    padding: 0 60px;
    width: 100%;
    max-width: 100%;
}

.header-inner.container:before,
.small-area.container:before,
.header-inner.container:after,
.small-area.container:after {
    content: none;
}

.logo {
    line-height: 100px;
    font-size: 21px;
}

.logo .title {
    line-height: 1;
    margin: 0;
}

.logo a,
.logo span {
    display: flex;
}

.logo img {
    display: none;
}

.stuck .logo .custom-logo,
.stuck .logo .mobile-logo {
    display: none;
}


/* Top Area ------------------------------------------------------------------ */

.top-area {    
    border-bottom: 1px solid var( --light-border-color );
}

.transparent-top-area .top-area {
    background: none;
}


/* Bottom Area --------------------------------------------------------------- */

.bottom-area {    
    border-bottom: 1px solid var( --light-border-color );
}

.transparent-bottom-area .bottom-area {
    background: none;
}


/* Sticky Header ------------------------------------------------------------- */

.allow-sticky-header .stuck {
    width: 100%;
    z-index: 9;
    position: fixed;
    top: 0;
    transition: all ease 500ms;
}

.stuck .header-inner {
    line-height: 100px;
    height: 100px;
}

.user-logged-in.allow-sticky-header .stuck {
    margin: 32px 0 0 0;
}

.allow-sticky-header .stuck .top-area,
.allow-sticky-header .stuck .header-container,
.allow-sticky-header .stuck .bottom-area {
    display: none;
}

.allow-sticky-header.stick-h .stuck .header-container,
.allow-sticky-header.stick-th .stuck .top-area,
.allow-sticky-header.stick-bh .stuck .bottom-area,
.allow-sticky-header.stick-th-h .stuck .top-area,
.allow-sticky-header.stick-th-h .stuck .header-container,
.allow-sticky-header.stick-h-bh .stuck .header-container,
.allow-sticky-header.stick-h-bh .stuck .bottom-area,
.allow-sticky-header.stick-e .stuck .top-area,
.allow-sticky-header.stick-e .stuck .header-container,
.allow-sticky-header.stick-e .stuck .bottom-area {
    display: flex;
}

.stick-direction-up.scroll-down .stuck,
.stick-direction-down.scroll-up .stuck {
    top: -100%;
    transition: all ease 500ms;
}


/* Sub Menu ------------------------------------------------------------------ */

.main-menu > ul > li:not(.megamenu) {
    position: relative;
}

.main-menu ul li {
    text-align: left;
}

.main-menu > ul > li > .menu-link {
    text-transform: uppercase;
}

.main-menu .sub-menu-holder {
    position: relative;
}

.main-menu ul.sub-menu {
    width: 255px;
    padding: 30px 0;
    line-height: 1;
    border: 1px solid var( --lighten-border-color );
    border-top: 0;
    box-shadow: 0 1px 1px var( --lighten-border-color );
    z-index: 9;
    position: absolute;
    left: 0;
}

.main-menu .sub-menu-right ul.sub-menu {
    left: auto;
    right: 0;
}

.main-menu li > .sub-menu {
    background: #fff;
    display: none;
}

.main-menu li:hover > .sub-menu {
    display: block;
}

.main-menu .sub-menu ul.sub-menu {
    top: 0px;
    left: 100%;
}

.main-menu .sub-menu-right .sub-menu ul.sub-menu {
    top: 0px;
    left: auto;
    right: 100%;
}

.main-menu .sub-menu li {
    line-height: 1;
    padding: 0 0 10px 0;
    float: none;    
    display: block;
    position: relative;
}

.main-menu .sub-menu li:last-child {
    padding: 0;
}

.main-menu .sub-menu li:last-child {
    padding: 0;
}

.main-menu .sub-menu li .menu-link,
.has-core-not-active .main-menu .sub-menu li a {
    font-size: 15px;
    font-weight: 400;
    color: var( --extra-dark-color );
    line-height: 1.6;
    padding: 0 35px;
    display: block;
}

.main-menu ul li .sub-menu-trigger {
    display: none;
}

.main-menu .sub-menu .hide-sub-menu-title > a,
.main-menu .sub-menu .hide-sub-menu-title > span {
    display: none;
}


/* Mega Menu ----------------------------------------------------------------- */

.main-menu .megamenu ul.sub-menu {
    padding: 30px 60px 0 60px;
    width: 100%;
}

.main-menu .megamenu.megamenu-2-column ul.sub-menu,
.main-menu .megamenu.megamenu-3-column ul.sub-menu {
    padding: 30px 40px 0 40px;
    width: 550px;
}

.main-menu .megamenu.megamenu-3-column ul.sub-menu {
    width: 800px;
}

.main-menu .megamenu > ul.sub-menu > li {
    margin: 0 0 30px 0;
    float: left;
}

.main-menu .megamenu ul.sub-menu li > a,
.main-menu .megamenu ul.sub-menu li > span,
.main-menu .megamenu ul.sub-menu li.act-as-title { 
    padding: 0;
}

.main-menu .megamenu > ul.sub-menu > li > .menu-link,
.main-menu .megamenu > ul.sub-menu .widget-title,
.main-menu .megamenu > ul.sub-menu .act-as-title > .menu-link { 
    font-size: 15px;
    font-weight: 600;
    color: var( --extra-dark-color );
    text-transform: uppercase;
    line-height: 2;
    letter-spacing: 0.5px;
    margin: 0 0 15px 0;
}

.main-menu .megamenu > ul.sub-menu .act-as-title > .menu-link {
    margin: 25px 0 15px 0;
}

.main-menu .megamenu.megamenu-2-column > ul.sub-menu > li {
    width: 50%;
}

.main-menu .megamenu.megamenu-3-column > ul.sub-menu > li {
    width: 33.33333333%;
}

.main-menu .megamenu.megamenu-4-column > ul.sub-menu > li {
    width: 25%;
}

.main-menu .megamenu.megamenu-5-column > ul.sub-menu > li {
    width: 20%;
}

.main-menu .megamenu.megamenu-6-column > ul.sub-menu > li {
    width: 16.66666667%;
}

.main-menu .megamenu.megamenu-2-column > ul.sub-menu > li:nth-child(2n+1),
.main-menu .megamenu.megamenu-3-column > ul.sub-menu > li:nth-child(3n+1),
.main-menu .megamenu.megamenu-4-column > ul.sub-menu > li:nth-child(4n+1),
.main-menu .megamenu.megamenu-5-column > ul.sub-menu > li:nth-child(5n+1),
.main-menu .megamenu.megamenu-6-column > ul.sub-menu > li:nth-child(6n+1) {
    clear: both;
}

.main-menu .megamenu ul.sub-menu li ul.sub-menu { 
    background: none;
    padding: 0;      
    display: block;
    border: none;
    box-shadow: none;
    position: static;
}

.main-menu .megamenu > ul.sub-menu li > ul.sub-menu { 
    width: 100%;
}


/* Left Logo Menu ------------------------------------------------------------ */

.header-right-side {
    display: flex;
    flex-wrap: wrap;
}

.main-menu ul {
    margin: 0;
    float: left;
    list-style: none;
}

.main-menu ul li {
    float: left;
}

.main-menu li .menu-link,
.has-core-not-active .main-menu li a {
    font-size: 14px;
    font-weight: 600;
    color: var( --extra-dark-color );
    padding: 0 35px;
    text-decoration: none;
    position: relative;    
    transition: all ease 500ms;
}

.menu-item .batch {
    display: none;
}

.main-menu .menu-item .batch {
    font-size: 8px;
    font-weight: 600;
    color: #fff;
    background: #ff4246;
    text-transform: uppercase;
    line-height: 21px;
    white-space: nowrap;
    padding: 0 7px;
    height: 20px;
    display: inline-block;
    border-radius: 4px;
    position: absolute;
    top: -20px;
}

.main-menu ul .sub-menu .menu-item .batch {
    font-size: 11px;
    color: #ff4246;
    background: none;
    top: -10px;
}


/* Left Logo Menu Joined ----------------------------------------------------- */

.header-left-logo-menu-joined .header-left-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}


/* Center Logo Split Menu ---------------------------------------------------- */

.center-logo-split-menu .header-inner {
    justify-content: center;
}

.center-logo-split-menu .logo {
    text-align: center;
}

.center-logo-split-menu .logo a,
.center-logo-split-menu .logo span {
    justify-content: center; 
}

.center-logo-split-menu .main-menu-left-side,
.center-logo-split-menu .main-menu-right-side {
    display: flex;
    flex: 3;
    justify-content: flex-end;
}

.center-logo-split-menu .main-menu-center {
    flex: 1;
}

.center-logo-split-menu .main-menu-right-side {
    justify-content: flex-start;
}

.center-logo-split-menu .main-menu-left-side .header-icons,
.center-logo-split-menu .main-menu-right-side .header-icons {
    display: flex;
}

.center-logo-split-menu .main-menu-right-side .header-icons {
    flex: 1;
}


/* Center Logo Bottom Menu --------------------------------------------------- */

.center-logo-bottom-menu .logo-header-icons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.center-logo-bottom-menu .header-inner {
    line-height: 120px;
    height: auto; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;
}

.center-logo-bottom-menu .header-icons-right-side {
    display: flex;
}


/* Left Side Menu | Right Side Menu | Fly in Left | Fly in Right ------------- */

.left-side-menu .left-side-menu-inner,
.right-side-menu .right-side-menu-inner,
.fly-in-left-side-menu .fly-in-left-side-menu-inner,
.fly-in-right-side-menu .fly-in-right-side-menu-inner {
    background-color: #fff;
    line-height: 1;
    width: 250px;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border-right: 1px solid var( --lighten-border-color );
    z-index: 99;
    position: fixed;
    left: 0;
    top: 0;
}

.left-side-menu .logo {
    margin: 80px 0 0 35px;
}

.user-logged-in .left-side-menu,
.user-logged-in .right-side-menu,
.user-logged-in .fly-in-left-side-menu,
.user-logged-in .fly-in-right-side-menu {
    top: 32px;
}

.left-side-menu .header-container,
.right-side-menu .header-container,
.fly-in-left-side-menu .header-container,
.fly-in-right-side-menu .header-container {
    padding: 0;
    height: 100%;
}

.left-side-menu .main-menu,
.right-side-menu .main-menu,
.fly-in-left-side-menu .main-menu,
.fly-in-right-side-menu .main-menu {
    margin: 80px 0 0 0;    
    width: 100%;
    float: none;
}

.left-side-menu .main-menu ul,
.right-side-menu .main-menu ul,
.fly-in-left-side-menu .main-menu ul,
.fly-in-right-side-menu .main-menu ul {
    float: none;
}

.left-side-menu .main-menu ul li,
.right-side-menu .main-menu ul li,
.fly-in-left-side-menu .main-menu ul li,
.fly-in-right-side-menu .main-menu ul li {
    float: none;
    line-height: 3;
    position: relative;
}

.left-side-menu .main-menu .megamenu ul.sub-menu,
.right-side-menu .main-menu .megamenu ul.sub-menu,
.fly-in-left-side-menu .main-menu .megamenu ul.sub-menu,
.fly-in-right-side-menu .main-menu .megamenu ul.sub-menu {
    width: calc( 100vw - 300px );
    left: 100%;
    top: 0;
}

.left-side-menu .main-menu .sub-menu-left ul.sub-menu,
.left-side-menu .main-menu .sub-menu-right ul.sub-menu,
.right-side-menu .main-menu .sub-menu-left ul.sub-menu,
.right-side-menu .main-menu .sub-menu-right ul.sub-menu,
.fly-in-left-side-menu .main-menu .sub-menu-left ul.sub-menu,
.fly-in-left-side-menu .main-menu .sub-menu-right ul.sub-menu,
.fly-in-right-side-menu .main-menu .sub-menu-left ul.sub-menu,
.fly-in-right-side-menu .main-menu .sub-menu-right ul.sub-menu {
    left: 100%;
    top: 0;
}

.left-side-menu .header-icons,
.right-side-menu .header-icons,
.fly-in-left-side-menu .header-icons,
.fly-in-right-side-menu .header-icons {
    padding: 30px 35px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: absolute;
    bottom: 10%;
}    

.user-logged-in .left-side-menu .header-icons,
.user-logged-in .right-side-menu .header-icons,
.user-logged-in .fly-in-left-side-menu .header-icons,
.user-logged-in .fly-in-right-side-menu .header-icons {
    margin: 0 0 32px 0;
}

body.header-left-side-menu {
    padding: 0 0 0 250px;
}


/* Right Side Menu ----------------------------------------------------------- */

.right-side-menu .right-side-menu-inner,
.fly-in-right-side-menu .fly-in-right-side-menu-inner {
    text-align: right;
    align-items: flex-end;
    border: 0;
    border-left: 1px solid var( --lighten-border-color );
    left: auto;
    right: 0;
}

.right-side-menu .logo {
    margin: 80px 35px 0 0;
}

.right-side-menu .logo a,
.right-side-menu .logo span,
.fly-in-right-side-menu .right-side-menu .logo a,
.fly-in-right-side-menu .right-side-menu .logo span {
    justify-content: flex-end;
}

.right-side-menu .main-menu > ul > li {
    text-align: right;
}

.right-side-menu .main-menu .megamenu ul.sub-menu {
    left: auto;
    right: 100%;
}

.right-side-menu .main-menu .sub-menu-left ul.sub-menu,
.right-side-menu .main-menu .sub-menu-right ul.sub-menu {
    left: auto;
    right: 100%;
}

.right-side-menu .header-icons,
.fly-in-right-side-menu .header-icons {
    justify-content: flex-end;
}

body.header-right-side-menu {
    padding: 0 250px 0 0;
}

/* Fly in Left Side Menu ----------------------------------------------------- */

.fly-in-left-side-menu .fly-in-left-side-menu-inner {
    left: -250px;
    transition: all ease 500ms;
}

.fly-in-left-side-menu.active .fly-in-left-side-menu-inner {
    left: 0;
    transition: all ease 500ms;
}

/* Fly in Left Side Menu ----------------------------------------------------- */

.fly-in-right-side-menu .fly-in-right-side-menu-inner {
    right: -250px;
    transition: all ease 500ms;
}

.fly-in-right-side-menu.active .fly-in-right-side-menu-inner {
    right: 0;
    transition: all ease 500ms;
}

/* Overlay Center Menu ------------------------------------------------------- */

.overlay-header {
    background: #100d0c;
    line-height: 1;
    padding: 0 0 32px 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    z-index: 9;
    overflow-y: auto; 
    position: fixed;
    left: 0;
    top: 0;
    transition: all ease 500ms;
}

.overlay-header.active {
    visibility: visible;
    opacity: 1;
}

.overlay-header .ovelay-header-close {
    font-size: 21px;
    color: var( --extra-dark-color );
    position: absolute;
    right: 2%;
    top: 5%;
}

.overlay-header .logo {
    margin: 4% 0 0 0;
}

.overlay-header nav {
    margin: 4% 0 0 0;
}

.overlay-header .main-menu ul {
    float: none;
}

.overlay-header .main-menu ul li {
    text-align: center;
    line-height: 2;
    float: none;
    clear: both;
}

.overlay-header .main-menu ul li a {
    font-family: var( --primary-font );
    font-size: 38px;
    font-weight: 600;
    color: #e7e7e7;
    text-transform: capitalize;
    display: inline-block;
}

.overlay-header .header-icons a {
    color: #5b5b5b;
}

.menu-trigger {
    font-size: 21px;
    line-height: 1;
}

.overlay-header-active #content-wrapper,
.overlay-header-active .footer { /* It helps to avoid content collapsing */
    opacity: 0;
    visibility: hidden;
}


/* Burger Area --------------------------------------------------------------- */

.burger-text .menu-trigger {
    font-size: 16px;
}

.burger-left-top-corner .header-inner {
    background: #fff;
    line-height: 60px;
    padding: 0;
    width: 60px;
    height: 60px;
    border: 1px solid var( --lighten-border-color );
    z-index: 1;
    position: absolute;
}

.burger-left-side .header-container {
    width: 60px;
    height: 100vh;
    border: 0;
    display: flex;
    align-items: center;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
}

.burger-left-side .header-inner {
    padding: 0;
    width: 60px;
    height: 100vh;
    border-right: 1px solid var( --lighten-border-color ); 
    position: fixed;
    left: 0;
    top: 0;
}

.burger-left-top-corner .logo,
.burger-left-side .logo {
    display: none;
}

.burger-left-top-corner .overlay-header.active .logo,
.burger-left-side .overlay-header.active .logo {
    display: inline-block;
}

.burger-left-top-corner .menu-trigger-cover,
.burger-left-side .menu-trigger-cover {
    text-align: center;
    width: 60px;
}


/* Responsive Menu ----------------------------------------------------------- */

#responsive-menu {
    background: #111;
    width: 300px;
    height: 100%;
    padding: 30px 25px;
    z-index: 100003;
    overflow-y: auto; 
    position: fixed;
    left: -300px;
    top: 0;
    transition: all ease 500ms;
}

#responsive-menu.responsive-menu-slide-in {
    left: 0;
    transition: all ease 500ms;
}

#responsive-menu .main-menu ul {
    float: none;
}

#responsive-menu .main-menu > ul > li {
    margin: 0 0 30px 0;
}

#responsive-menu .main-menu ul li {
    color: #fff;
    line-height: 2;
    float: none;
}

#responsive-menu .main-menu ul li .menu-link,
.has-core-not-active #responsive-menu .main-menu ul li a {
    font-size: 14px;
    font-weight: 400;
    color: #ccc;
    text-transform: capitalize;
    margin: 0;
    padding: 0;
    display: inline-block;
}

#responsive-menu .main-menu .sub-menu li {
    padding: 0;
}

#responsive-menu .main-menu ul li > .sub-menu li {
    padding: 5px 0 0 10px;
}

#responsive-menu .main-menu .megamenu > ul.sub-menu > li > a,
#responsive-menu .main-menu .megamenu > ul.sub-menu > li > span,
#responsive-menu .main-menu .megamenu > ul.sub-menu .widget-title {
    margin: 0;
}

#responsive-menu .main-menu ul li .sub-menu-trigger {
    font-size: 11px;
    display: inline;
    float: right;
    cursor: pointer;
    transition: all ease 500ms;
}

#responsive-menu .main-menu ul li .sub-menu-trigger.slide-down {
    transition: all ease 500ms;
    transform: rotate(90deg);
}

#responsive-menu .sub-menu {
    background: none;
    width: auto;
    padding: 10px 0 15px 0;
    border: none;
    box-shadow: none;
    display: none;
    position: static;
}

#responsive-menu .main-menu .megamenu > ul.sub-menu > li {
    width: 100%;
    margin: 0;
}

#responsive-menu .main-menu .megamenu > ul.sub-menu > li > a,
#responsive-menu .main-menu .megamenu > ul.sub-menu > li > span,
#responsive-menu .main-menu .megamenu > ul.sub-menu .widget-title {
    color: #ccc;
}

#responsive-menu .header-icons {
    margin: 30px 0 0 0;
}

#responsive-menu .header-icons a {
    color: #ccc;
}

#responsive-trigger {
    line-height: 118px;
    display: none;
}

#responsive-trigger + .header-icons {
    margin: 0 0 0 30px;    
}

#responsive-trigger span {
    font-size: 18px;
}

.close-wrapper {
    margin: 0 0 60px 0;
}

.responsive-menu-close,
.responsive-menu-close:hover,
.responsive-menu-close:active,
.responsive-menu-close:link,
.responsive-menu-close:visited {
    font-size: 21px;
    color: #ccc;
}


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

.main-menu .widget a {
    display: inline;
}



/* ---------------------------------------------------------------------------
 * Menu Style
------------------------------------------------------------------------------ */

/* Line ---------------------------------------------------------------------- */

.menu-line:not( .allow-overlay-header ) .main-menu > ul > li > .menu-link {
    margin: 0 35px;
    padding: 0 0 5px 0;
}

.menu-line:not( .allow-overlay-header ) .main-menu > ul > .current-menu-item > .menu-link,
.menu-line:not( .allow-overlay-header ) .main-menu > ul > .current-menu-ancestor > .menu-link {
    color: var( --primary-color );
    border-bottom: 1px solid;
}


/* Half Line ----------------------------------------------------------------- */

.menu-half-line:not( .allow-overlay-header ) .main-menu > ul > li > .menu-link {
    margin: 0 35px;
    padding: 0 0 5px 0;
}

.menu-half-line:not( .allow-overlay-header ) .main-menu > ul > .current-menu-item > .menu-link,
.menu-half-line:not( .allow-overlay-header ) .main-menu > ul > .current-menu-ancestor > .menu-link {
    color: var( --primary-color );
    position: relative;
}

.menu-half-line:not( .allow-overlay-header ) .main-menu > ul > .current-menu-item > .menu-link:after,
.menu-half-line:not( .allow-overlay-header ) .main-menu > ul > .current-menu-ancestor > .menu-link:after {
    content: '';
    background: var( --primary-color );
    height: 1px;
    width: 30px;
    border: 0;
    position: absolute;
    bottom: 0;
    left: 0;
}


/* Solid Rectangle ----------------------------------------------------------- */

.menu-solid-rectangle:not( .allow-overlay-header ) .main-menu > ul > li > .menu-link {
    font-size: 14px;
    margin: 0 20px;
    padding: 12px 18px;
}

.menu-solid-rectangle:not( .allow-overlay-header ) .main-menu > ul > .current-menu-item > .menu-link,
.menu-solid-rectangle:not( .allow-overlay-header ) .main-menu > ul > .current-menu-ancestor > .menu-link {
    color: #fff;
    background: var( --primary-color );
}


/* Solid Oval ---------------------------------------------------------------- */

.menu-solid-oval:not( .allow-overlay-header ) .main-menu > ul > li > .menu-link {
    margin: 0 10px;
    padding: 12px 30px;
}

.menu-solid-oval:not( .allow-overlay-header ) .main-menu > ul > .current-menu-item > .menu-link,
.menu-solid-oval:not( .allow-overlay-header ) .main-menu > ul > .current-menu-ancestor > .menu-link {
    color: #fff;
    background: var( --primary-color );
    border-radius: 50px;
}


/* Left Dot ------------------------------------------------------------------ */

.menu-left-dot:not( .allow-overlay-header ) .main-menu > ul > li > .menu-link:before {
    content: '';
    background: var( --extra-dark-color );
    height: 4px;
    width: 4px;
    border: 0;
    border-radius: 50px;
    position: absolute;
    bottom: 8px;
    left: 24px;
}

.menu-left-dot:not( .allow-overlay-header ) .main-menu > ul > .current-menu-item > .menu-link:before,
.menu-left-dot:not( .allow-overlay-header ) .main-menu > ul > .current-menu-ancestor > .menu-link:before {
    background: var( --primary-color );
}



/* ---------------------------------------------------------------------------
 * Sub Header
------------------------------------------------------------------------------ */

/* Normal -------------------------------------------------------------------- */

.subheader {
    clear: both;
    border-bottom: 1px solid var( --light-border-color );
}

.no-sub-header-border .subheader {
    border: 0;
}

.subheader:before,
.subheader:after {
    content: '';
    width: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 120px;
}

.user-logged-in .subheader:before,
.user-logged-in .subheader:after,
.user-logged-in.transparent-header .subheader:before,
.user-logged-in.transparent-header .subheader:after,
.user-logged-in.transparent-header.allow-top-area .subheader:before,
.user-logged-in.transparent-header.allow-top-area .subheader:after,
.user-logged-in.transparent-header.allow-top-area.allow-bottom-area .subheader:before,
.user-logged-in.transparent-header.allow-top-area.allow-bottom-area .subheader:after {
    top: 32px;
}

.full-width-sub-header .subheader-cover {
    padding: 0 60px;
    width: 100%;
    max-width: 100%;
}
    
.subheader-inner {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.subheader-inner.left {    
    align-items: baseline;
}

.subheader-inner.left-right {  
    justify-content: space-between;
    flex-direction: row;  
    align-items: center;
}

.sub-header-small .subheader-inner {
    height: 150px;
}

.sub-header-medium .subheader-inner,
.sub-header-medium .subheader:before,
.sub-header-medium .subheader:after {   
    height: 300px;
}

.user-logged-in .subheader:before,
.user-logged-in .subheader:after {
    top: 152px;
}

.allow-top-area .subheader:before,
.allow-top-area .subheader:after {    
    top: 180px;
}

.allow-top-area.user-logged-in .subheader:before,
.allow-top-area.user-logged-in .subheader:after {
    top: 212px;
}

.allow-top-area.allow-bottom-area .subheader:before,
.allow-top-area.allow-bottom-area .subheader:after {    
    top: 240px;
}

.allow-top-area.allow-bottom-area.user-logged-in .subheader:before,
.allow-top-area.allow-bottom-area.user-logged-in .subheader:after {
    top: 272px;
}

.transparent-header .subheader:before,
.transparent-header .subheader:after,
.transparent-header.allow-top-area .subheader:before,
.transparent-header.allow-top-area .subheader:after,
.transparent-header.allow-top-area.allow-bottom-area .subheader:before,
.transparent-header.allow-top-area.allow-bottom-area .subheader:after {
    top: 0;
}

.transparent-header .subheader-inner,
.transparent-header .subheader:before,
.transparent-header .subheader:after {   
    padding: 120px 0 0 0;
    height: 270px;
}

.transparent-header.allow-top-area .subheader-inner,
.transparent-header.allow-top-area .subheader:before,
.transparent-header.allow-top-area .subheader:after,
.transparent-header.allow-bottom-area .subheader-inner,
.transparent-header.allow-bottom-area .subheader:before,
.transparent-header.allow-bottom-area .subheader:after {   
    padding: 180px 0 0 0;
    height: 330px;
}

.transparent-header.allow-top-area.allow-bottom-area .subheader-inner,
.transparent-header.allow-top-area.allow-bottom-area .subheader:before,
.transparent-header.allow-top-area.allow-bottom-area .subheader:after {   
    padding: 240px 0 0 0;
    height: 390px;
}

.transparent-header.sub-header-medium .subheader-inner,
.transparent-header.sub-header-medium .subheader:before,
.transparent-header.sub-header-medium .subheader:after {   
    padding: 120px 0 0 0;
    height: 420px;
}

.transparent-header.allow-top-area.sub-header-medium .subheader-inner,
.transparent-header.allow-top-area.sub-header-medium .subheader:before,
.transparent-header.allow-top-area.sub-header-medium .subheader:after,
.transparent-header.allow-bottom-area.sub-header-medium .subheader-inner,
.transparent-header.allow-bottom-area.sub-header-medium .subheader:before,
.transparent-header.allow-bottom-area.sub-header-medium .subheader:after {   
    padding: 180px 0 0 0;
    height: 480px;
}

.transparent-header.allow-top-area.allow-bottom-area.sub-header-medium .subheader-inner,
.transparent-header.allow-top-area.allow-bottom-area.sub-header-medium .subheader:before,
.transparent-header.allow-top-area.allow-bottom-area.sub-header-medium .subheader:after {   
    padding: 240px 0 0 0;
    height: 540px;
}

.sub-header-full-height .subheader-inner,
.sub-header-full-height .subheader:before,
.sub-header-full-height .subheader:after {
    height: calc( 100vh - 120px );
}

.allow-top-area.sub-header-full-height .subheader-inner,
.allow-top-area.sub-header-full-height .subheader:before,
.allow-top-area.sub-header-full-height .subheader:after {
    height: calc( 100vh - 180px );
}

.allow-top-area.allow-bottom-area.sub-header-full-height .subheader-inner,
.allow-top-area.allow-bottom-area.sub-header-full-height .subheader:before,
.allow-top-area.allow-bottom-area.sub-header-full-height .subheader:after {
    height: calc( 100vh - 240px );
}

.transparent-header.sub-header-full-height .subheader-inner,
.transparent-header.sub-header-full-height .subheader:before,
.transparent-header.sub-header-full-height .subheader:after,
.transparent-header.allow-top-area.sub-header-full-height .subheader-inner,
.transparent-header.allow-top-area.sub-header-full-height .subheader:before,
.transparent-header.allow-top-area.sub-header-full-height .subheader:after,
.transparent-header.allow-bottom-area.sub-header-full-height .subheader-inner,
.transparent-header.allow-bottom-area.sub-header-full-height .subheader:before,
.transparent-header.allow-bottom-area.sub-header-full-height .subheader:after,
.transparent-header.allow-top-area.allow-bottom-area.sub-header-full-height .subheader-inner,
.transparent-header.allow-top-area.allow-bottom-area.sub-header-full-height .subheader:before,
.transparent-header.allow-top-area.allow-bottom-area.sub-header-full-height .subheader:after {
    height: 100vh;
}

.header-left-side-menu.sub-header-full-height .subheader-inner,
.header-right-side-menu.sub-header-full-height .subheader-inner {
    height: 100vh;
}

.subheader .title {
    margin: 0;
    padding: 0;
}

.sub-header-small .subheader .title {
    font-size: var( --font-large );
}

.sub-header-medium .subheader-inner .title {
        font-size: var( --font-huge );
}

.sub-header-full-height .subheader-inner .title {
    font-size: var( --font-big );
}    

.subheader-inner.left .title,
.subheader-inner.center .title {
    margin: 0 0 15px 0;
}

.sub-header-left-right .breadcrumbs {
    float: right;
}

.breadcrumbs ul {
    margin: 0;
    display: flex;
    align-items: center;
}

.breadcrumbs li {
    color: var( --extra-dark-color );
    display: inline-block;
}

.breadcrumbs ul span {
    padding: 0 10px;
}

.breadcrumbs ul span:before {
    vertical-align: middle;
}


/* Only Breacrumbs ----------------------------------------------------------- */

.subheader.only-breadcrumbs .subheader-inner {
    height: 50px;
    min-height: 50px;
}

.subheader.only-breadcrumbs li {
    font-size: 14px;
}

.transparent-header .subheader.only-breadcrumbs .subheader-inner,
.transparent-header .subheader.only-breadcrumbs:before,
.transparent-header .subheader.only-breadcrumbs:after {
    padding: 120px 0 0 0;
    height: 180px;
}

.transparent-header.allow-top-area .subheader.only-breadcrumbs .subheader-inner,
.transparent-header.allow-top-area .subheader.only-breadcrumbs:before,
.transparent-header.allow-top-area .subheader.only-breadcrumbs:after {
    padding: 180px 0 0 0;
    height: 240px;
}

.transparent-header.allow-top-area.allow-bottom-area .subheader.only-breadcrumbs .subheader-inner,
.transparent-header.allow-top-area.allow-bottom-area .subheader.only-breadcrumbs:before,
.transparent-header.allow-top-area.allow-bottom-area .subheader.only-breadcrumbs:after {
    padding: 240px 0 0 0;
    height: 300px;
}



/* ---------------------------------------------------------------------------
 * Small Area Elements
------------------------------------------------------------------------------ */

/* General ------------------------------------------------------------------- */

.small-area-cover {
    font-size: 15px;
    background: var( --lighten-background-color );
    height: 60px;
    display: flex;
    align-items: center;
}

.small-area-cover p,
.small-area-cover a,
.small-area-cover span {
    color: var( --normal-color );
}

.small-area-cover p {
    margin: 0;
    line-height: 1;
}

.small-area-inner {
    display: flex;
    justify-content: space-between;
}

.small-area-inner-section {
    width: 33.33333333%;
    display: flex;    
}

.small-area-inner-section.center {
    justify-content: center;
}

.small-area-inner-section.right {
    justify-content: flex-end;
}

.small-area-element {
    margin: 0 25px 0 0;
    position: relative;
}

.small-area-inner-section.right.small-area-element {
    margin: 0 0 0 25px;

}

.small-area-element:last-child {
    margin: 0;
}

.small-area-element li {
    list-style: none;
}

.small-area-element .small-area-menu ul {
    display: flex;
}

.small-area-element .small-area-menu ul li {
    margin: 0 50px 0 0;
}

.small-area-element .small-area-menu ul li:last-child {
    margin: 0;
}

.small-area-element .small-area-menu .sub-menu-trigger {
    display: none;
}

.small-area-element .callout-btn {
    margin: 0;
}

.small-area-element .btn {
    color: var( --darken-color );
}



/* ---------------------------------------------------------------------------
 * Header Icon
------------------------------------------------------------------------------ */

/* General ------------------------------------------------------------------- */

.header-icons {
    display: flex;
    align-items: center
}

.header-icons .small-area-element {
    margin: 0 20px 0 0;
}

.header-icons .small-area-element:last-child {
    margin: 0;
}

.header-icons [class^="oct-"] {
    font-size: 18px;
}

.header-icons .item-count-inner {
    position: relative;
}

.header-icons .item-count {
    font-size: 10px;
    background: var( --primary-color );
    width: 18px;
    height: 18px;
    border-radius: 50px;
    display: block;
    position: absolute;
    text-align: center;
    line-height: 18px;
    color: #fff;
    right: -11px;
    top: -11px;
}

/* Overlay Search ------------------------------------------------------------ */

.overlay-search-form-inner {
    position: relative;
}

.overlay-search-form {
    margin: 50px 0 0 0;
    width: 80%;
    display: block;
    z-index: 999999999;
    visibility: hidden;
    opacity: 0;
    position: fixed;
    left: 10%;
    top: 100px;
    transition: all ease 500ms;
}

.overlay-search-form.active {
    visibility: visible;
    opacity: 1;
    transition: all ease 500ms;
}

.overlay-search .title {
    font-size: 28px;
    font-weight: 600;
    color: var( --extra-dark-color );
    margin: 0 0 30px 0;
}

.overlay-search label {
    width: 100%;
}

.overlay-search .search-field {
    color: var( --dark-color );
    margin: 0 0 50px 0;
    padding: 25px 0;
    border: none;
    background: none;
    border-bottom: 1px solid;
}

.overlay-search .search-field::placeholder {
    color: var( --dark-color );
}

.overlay-search button,
.overlay-search .search-submit {
    font-size: 14px;
    font-weight: 600;
    color: var( --lighten-color );
    background: var( --darken-background-color );
    text-transform: uppercase;
    padding: 0 30px;
    height: 50px;
    line-height: 50px;
    float: right;
    border-radius: 0;
}

.overlay-search-form-close-icon {
    color: var( --dark-color );
    font-size: 18px;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: -50px;
    z-index: 999999999;
}

body.turn-off-scroll {
    overflow: hidden;
}

.overlay-search-form-wrapper .search-lists-filter {
    margin: 0 0 30px 0;
}

.overlay-search-form-wrapper .search-lists-filter span {
    line-height: 1;
    margin: 0 10px 0 0;
    padding: 12px 25px;
    display: inline-block;
    border: 1px solid var( --lighten-border-color );
    border-radius: 50px;
    cursor: pointer;
}

.overlay-search-form-wrapper .search-lists-filter span:last-child {
    margin: 0;
}

.overlay-search-form-wrapper .search-posts-list {
    clear: both;
}

.overlay-search-form-wrapper .search-lists-posts {
    height: 420px;
    overflow-y: auto;
}

.overlay-search-form-wrapper .posts {
    margin: 0 0 15px 0px;
    padding: 0 0 15px 0;
    border-bottom: 1px solid var( --lighten-border-color );
    overflow: hidden;
}

.overlay-search-form-wrapper .posts .title {
    font-size: 21px;
    font-weight: 400;
}

.overlay-search-form-wrapper .posts .post-media {
    margin: 0 15px 0 0;
    float: left;
}

.overlay-search-form-wrapper .posts .post-content {
    float: left;
}

.overlay-search-form-wrapper.loading .loader {
    position: absolute;
    right: 0;
    top: 70px;
}

.overlay-search-form-wrapper.loading .loader div {
    border-color: var( --dark-border-color ) transparent var( --dark-border-color ) transparent;
}


/* Overlay Search ------------------------------------------------------------ */

.header-icons .small-area-element .social-icons {
    margin: 0;
}



/* ---------------------------------------------------------------------------
 * Blog / Archives / Search
------------------------------------------------------------------------------ */


/* General ------------------------------------------------------------------- */

article.sticky .post-details {
    background: #f7f7f7;
    padding: 40px;
}

.meta-group {
    display: flex;
    align-items: center;
}

.meta-group p,
.meta-group p a {
    font-size: 14px;
    font-weight: 600;
    color: var( --dark-color );
    text-transform: uppercase;
    letter-spacing: 0.25px;
    margin: 0;
}

.meta-group > div p {
    font-weight: 400;
    text-transform: unset;
    letter-spacing: 0;
}

.category-box:after,
.archive .author-box:after {
    content: '';
    background: var( --dark-border-color );
    margin: 0 0 50px 0;
    width: 70px;
    height: 1px;
    display: block;
}

.archive .author-box {
    margin: 0 auto 50px auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px;
}

.archive .author-box .author-content {
    padding: 10px 0 0 0;
}

.category-box .category-title,
.archive .author-box .author-name {
    font-size: 32px;
    margin: 0 0 10px 0;
}

.category-box .taxonomy-description,
.archive .author-box .author-desc {
    font-size: 18px;
    color: var( --dark-color );
}


/* Featured Post Slider ------------------------------------------------------ */

.allow-featured-post-slider #content-wrapper {
    margin: 0 0 100px 0;
}

.featured-post-slider {
    margin: 0 0 100px 0;
}

.featured-post-slider .post {
    height: calc( 100vh - 120px );
}

.transparent-header .featured-post-slider .post {
    height: 100vh;
}

.featured-post-slider .post {
    position: relative;
}

.featured-post-slider .post:after {
    background: rgba( 0, 0, 0, 0.40 );
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
}

.featured-post-slider .post-content {
    width: 80%;
    max-width: 1080px;
    z-index: 1;
    position: absolute;
    bottom: 150px;
}

.featured-post-slider .post-content .category {
    margin: 0 0 10px 0;
}

.featured-post-slider .post-content .category a {
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
}

.featured-post-slider .post-content .post-tile {
    margin: 0 0 70px 0;
}

.featured-post-slider .post-content .post-tile a {
    font-size: 62px;
    color: #fff;
    line-height: 1.2;
}

.featured-post-slider .slick-prev {
    left: 0;
}

.featured-post-slider .slick-next {
    right: 0;
}


/* Post Content Overlap ------------------------------------------------------ */

.post-content-overlap .post {
    margin: 0 0 80px 0;
}

.post-content-overlap .post-media,
.post-content-overlap .post-content {
    text-align: left;
}

.post-content-overlap .post-media + .post-content {
    margin: -120px auto 0 auto;
    background: #fff;
    padding: 40px 40px 0 40px;
    width: 90%;
    display: inline-block;
}

.post-content-overlap .post-details {
    text-align: center;
}


.sep {
    padding: 0 5px;
}

.post-content-overlap .title {
    font-size: var( --font-extra-large );
    margin: 5px 0 25px 0;
}


/* Masonry ------------------------------------------------------------------- */

.masonry .post-loop,
.grid .post-loop { 
    margin: 0 -15px; /* .row replacement css */
}

.masonry .post,
.grid .post {
    margin: 0 0 50px 0;
}

.masonry .post-details .post-media,
.grid .post-details .post-media {
    margin: 0 0 30px 0;
}

.masonry .post-details .post-media img,
.grid .post-details .post-media img {
    border-radius: 6px;
}

.masonry .post-content,
.grid .post-content {
    text-align: center;
    margin: 0 auto;
    width: 82%;
}

.masonry .columns-3 .post-media img,
.grid .columns-3 .post-media img {
    border-radius: 8px;
}

.masonry .post-content .title a,
.grid .post-content .title a {
    font-size: 24px;
    font-weight: 600;
    color: var( --extra-dark-color );
}

.masonry .post-content .meta-group,
.grid .post-content .meta-group {
    justify-content: center;
}

.masonry .excerpt,
.grid .excerpt {
    margin: 30px 0 0 0;
}

.masonry .btn,
.grid .btn {
    margin: 25px 0 0 0;
}


/* Grid ---------------------------------------------------------------------- */

.grid.columns-3 .post:nth-child( 3n+1),
.grid.columns-4 .post:nth-child( 4n+1) { 
    clear: both;
}


/* Post List ----------------------------------------------------------------- */

.post-list .post {
    margin: 0 0 60px 0;
}

.post-list .post-details {
    display: flex;
    align-items: flex-start;
}

.post-list .meta-group {
    margin: 0 50px 0 0;
}

.post-list .meta-group p,
.post-list .meta-group p a {
    font-size: 15px;
}

.post-list .title {
    font-size: 24px;
    margin: 0 0 5px 0;
}

.post-list .btn {
    margin: 40px 0 0 0;
}

.post-list .category + .btn {
    margin: 20px 0 0 0;
}


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

.pagination {
    clear: both;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.page-numbers {
    margin: 0;
}

.pagination ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.pagination ul li {
    margin: 0 8px 12px 8px;
}

.pagination ul li:first-child {
    margin-left: 0;
}

.pagination ul li:last-child {
    margin-right: 0;
}

.pagination ul li * {
    font-size: 14px;
    font-weight: 600;
    color: var( --dark-color );
    line-height: 1;
    padding: 12px 16px;
    display: inline-block;
    border: 1px solid;
}

.pagination ul li .current {
    color: var( --primary-color );
}

.btn-loadmore {
    text-align: center;
    clear: both;
}

.btn-loadmore.infinite-scroll .btn {
    background: none;
    text-indent: -1000em;
}

.infinite-scroll a.loading .loader div {
    border-color: var( --dark-border-color ) transparent var( --dark-border-color ) transparent;
}


/* Search Result ------------------------------------------------------------- */

.post-wrapper .result-count {
    margin: 0 0 50px 0;
}



/* ---------------------------------------------------------------------------
 * Single Post
------------------------------------------------------------------------------ */


/* General ------------------------------------------------------------------- */

.single-post-content .post-media {
    text-align: center;
    margin: 0 0 60px 0;
}

.single-post-content .main-title {
    margin: 10px 0 15px 0;
}

.single-post .entry-content {
    font-size: 16px;
    margin: 0 auto;
    max-width: 1200px;
}


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

.password-protected-form {
    margin: 0 0 50px 0;
}

.password-protected-form input[name='post_password'] {
    width: 450px;
}

.password-protected-form input[name='submit'] {
    color: #fff;
    padding: 0 30px;
    height: 50px;
}

.link-pagination {
    margin: 20px 0 50px 0;
    clear: both;
}

.link-pagination > span,
.link-pagination a {
    color: #fff;
    background: var( --dark-background-color );
    padding: 5px 16px;
    display: inline-block;
}


/* Tags ---------------------------------------------------------------------- */

.post-content-footer {
    margin: 0 0 50px 0;
    clear: both;
}

.post-tags .sub-title {
    font-size: var( --font-extra-small );
    font-weight: 600;
    color: var( --dark-color );
    text-transform: uppercase;
    margin: 0 15px 0 0;
}

.post-tags a {
    font-size: var( --font-mini );
    color: var( --normal-color );
    line-height: 1;
    margin: 0 8px 0 0;
    padding: 0 0 3px 0;
    border-bottom: 1px solid; 
}


/* Share --------------------------------------------------------------------- */

.post-share {
    text-align: center;
    margin: 0 auto 50px auto;
    padding: 50px 0;
    width: 60%;
    border-top: 1px solid var( --light-border-color );
    border-bottom: 1px solid var( --light-border-color );
}

.post-share .sub-title {
    font-size: var( --font-medium );
    font-weight: 600;
    color:var( --dark-color );
    margin: 0 0 20px 0;
}

.post-share .content-bottom a {
    font-size: var( --font-extra-small );
    color: var( --dark-color );
    line-height: 50px;
    display: inline-block;
    margin: 0 15px 0 0;
    width: 50px;
    height: 50px;
    border: 1px solid;
    border-radius: 50%;
}

.post-share .content-bottom a:last-child {
    margin: 0;
}


/* Author Box ---------------------------------------------------------------- */

.author-box {
    margin: 0 0 50px 0;
    display: flex;
    justify-content: flex-start;
}

.author-box img {
    height: auto;
    max-width: 120px;
    border-radius: 50%;
}

.author-box .author-content {
    padding: 5px 0 0 30px;
}

.author-box .author-name {
    font-size: 24px;
    color: var( --dark-color );
    text-transform: capitalize;
    margin-bottom: 10px;
}


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

.comments-area {
    margin: 50px 0 80px 0;
}

.comments-area .title {
    font-size: var( --font-extra-large );
    line-height: 1.4;
    margin: 0 0 30px 0;
}

.comments-area .comment-list {
    list-style: none;
    margin: 0 0 80px 0;
}

.comment {
    list-style: none;
    overflow: hidden;
}

.comment .children {
    margin: 0;
    padding: 0 0 0 8%;
}

.comment-body {
    margin: 0 0 40px 0;
    padding: 40px 0 0 0;
    border-top: 1px solid var( --lighten-border-color );
}

.comment-list > li:first-child > .comment-body {
    padding: 0;
    border: none;
}

.comment-list > li:last-child > .comment-body {
    margin: 0;
}

.comment-avatar {
    float: left;
    margin: 0 20px 0 0;
    display: block;
    border-radius: 50%;
    overflow: hidden;
}

 .comment .comment-avatar .avatar {
    margin: 0;
}

.comment-author,
.comment-author a {
    font-size: var( --font-medium );
    font-weight: 600;
    color: var( --normal-color );
    display: block;
}

.comment-meta {
    display: inline-block;
}

.comment-meta a {
    font-size: var( --font-mini );
    font-weight: 600;
    color: var( --normal-color );
    text-transform: uppercase;
}

.comment-text .description {
    margin: 30px 0 0 0;
}

 .comment .reply {
    margin: 10px 0 0 0;
}

.comment-reply-link {
    font-size: 13px;
    font-weight: 600;
    color: var( --extra-dark-color );
    text-transform: uppercase;
    line-height: 1.8;
    padding: 0 0 5px 0;
    position: relative;
}

.comment-reply-link:after {
    content: '';
    background: var( --extra-dark-color );
    height: 1px;
    width: 20px;
    border: 0;
    position: absolute;
    bottom: 0;
    left: 0;
}


/* Comment Form -------------------------------------------------------------- */

.single-post .comment-respond .comment-reply-title {
    font-size: var( --font-extra-large );
    line-height: 1.4;
}

.comment-form-comment {
    line-height: 1;
    margin: 0 0 35px 0;
}

.comment-notes {
    display: none;
}

.comments-area .comment-form .comment-form-author,
.comments-area .comment-form .comment-form-email,
.comments-area .comment-form .comment-form-url {
    width: 32%;
    margin: 0 2% 40px 0;
    float: left;
    position: relative;
}

.comments-area .comment-form .comment-form-url {
    margin: 0 0 40px 0;
}

.comment-form-cookies-consent {
    clear: both;
}

.comment-respond .comment-reply-title {
    font-size: 24px;
    font-weight: 600;
    color: var( --extra-dark-color );    
    margin: 0 0 30px 0;
}

.comment-respond .form-submit {
    margin: 0;
    clear: both;
}

.comment-respond .form-submit input[name='submit'] {
    margin: 0;
}


/* Next / Previous ----------------------------------------------------------- */

.post-navigation {
    padding: 30px 0;
    margin: 80px 0;
    border-bottom: 1px solid var( --lighten-border-color );
    border-top: 1px solid var( --lighten-border-color );
    display: flex;
    justify-content: space-between;
}

.post-navigation a span {
    font-size: 16px;
    font-weight: 600;
    color: var( --extra-dark-color );
    line-height: 1;
    margin: 0 0 5px 0;
    display: block;
}

.post-navigation .post-next {
    text-align: right;
}


/* Related Post -------------------------------------------------------------- */

.related-post > .title {
    text-align: center;
}

.related-post .post {
    margin: 50px 0 0 0;
}


/* Content Below Image ------------------------------------------------------- */

.single-post-content-below-image .main-title {
    font-size: var( --font-extra-huge );
    line-height: 1.2;
    word-break: break-word;
}

.post-header.align-center {
    text-align: center;
    margin: 0 auto;
}

.full-width .single-post-content-below-image .post-header {
    width: 60%;
}

.left-sidebar .single-post-content-below-image .post-header,
.right-sidebar .single-post-content-below-image .post-header {
    width: 70%;
}

.align-center .meta-group {
    margin: 0 0 15px 0;
    justify-content: center;
}

.post-header .category a {
    padding: 0 0 5px 0;
    border-bottom: 1px solid;
}

.post-header .author-link {
    font-size: 16px;
    text-transform: capitalize;
    margin: 0 0 60px 0;
}

.post-header .author-link .prefix {
    margin: 0 10px 0 0;
}

.post-header .author-link img {
    border-radius: 50%;
}

.single-post-content-below-image .post-media img {
    border-radius: 10px;
}



/* ---------------------------------------------------------------------------
 * Single Portfolio
------------------------------------------------------------------------------ */


/* General ------------------------------------------------------------------- */

.single-portfolio-content .main-title {
    font-size: var( --font-huge );
}


/* Portfolio Details --------------------------------------------------------- */

.single-portfolio-content .portfolio-details {
    display: flex;
}

.portfolio-details p {
    font-size: var( --font-extra-small );
    color: var( --normal-color );
}

.single-portfolio-content .portfolio-details .sub-title {
    font-size: var( --font-small );
    font-weight: 600;
    color: var( --dark-color );
}


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

.single-portfolio-content .post-media {
    margin: 60px 0 0 0;
}


/* Task ---------------------------------------------------------------------- */

.single-portfolio-content .task {
    font-size: var( --font-extra-small );
    color: var( --normal-color );
    margin: 60px 0 0 0;
}

.single-portfolio-content .task .sub-title {
    font-size: var( --font-medium );
    font-weight: 600;
    color: var( --dark-color );
}


/* Related Portfolio --------------------------------------------------------- */

.single-portfolio-content .related-portfolio {
    margin: 80px 0 0 0;
}

.single-portfolio-content .related-portfolio .title {
    text-align: center;
    margin: 0 0 50px 0;
}


/* Task Below Image ---------------------------------------------------------- */

.single-portfolio-task-below-image .portfolio-details {
    margin: 50px 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.single-portfolio-task-below-image .portfolio-details .meta-group {
    width: 90%;
    flex-wrap: wrap;
    justify-content: space-between;
}

.single-portfolio-task-below-image .portfolio-details .meta-group > div {
    width: 20%;
}

.single-portfolio-content .task {
    display: flex;
}

.single-portfolio-task-below-image .entry-content {
    margin: 50px auto 0 auto;
}

.single-portfolio-content .task .sub-title {
    margin: 0;
    width: 10%; 
}

.single-portfolio-content .task .line {
    background: #282827;
    margin: 20px 30px;
    width: 100px;
    height: 1px;
}


/* Details Overlaps Image ---------------------------------------------------- */

.single-portfolio-details-overlaps-image .post-media {
    position: relative;
}

.single-portfolio-details-overlaps-image .portfolio-details {
    background: #fff;
    padding: 40px;
    width: 400px;
    max-height: 500px;
    display: block;
    overflow-y: auto;
    position: absolute;
    top: 30px;
    right: 30px;
}

.single-portfolio-details-overlaps-image .meta-group {
    display: block;
}

.single-portfolio-details-overlaps-image .meta-group > div {
    margin: 0 0 30px 0;
}

.single-portfolio-details-overlaps-image .live-preview {
    float: right;
}

.single-portfolio-details-overlaps-image .live-preview a {
    text-align: center;
    line-height: 32px;
    vertical-align: middle;
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid;
    border-radius: 50px;
}

.single-portfolio-details-overlaps-image .entry-content {
    margin: 80px auto 0 auto;
    width: 80%;
}

.single-portfolio-details-overlaps-image .related-portfolio .title-header .title {
    text-align: center;
    margin: 0 0 50px 0;
}


/* Details Table ------------------------------------------------------------- */

.single-portfolio-details-table .post-media {
    margin: 0;
}

.single-portfolio-details-table .content-area {
    margin: 30px 0 0 0;
}

.single-portfolio-details-table .main-title {
    margin: 50px 0 0 0;
}

.single-portfolio-details-table .portfolio-details {
    display: block;
}

.single-portfolio-details-table .portfolio-details .meta-group {
    margin: 0 0 40px 0;
    display: block;
}

.single-portfolio-details-table .meta-group > div {
    display: flex;
    border-left: 1px solid var( --light-border-color );
    border-right: 1px solid var( --light-border-color );
}

.single-portfolio-details-table .meta-group > div:first-child {
    border-top: 1px solid var( --light-border-color );
}

.single-portfolio-details-table .meta-group > div p {
    padding: 15px 25px;
    width: 50%;
    border-bottom: 1px solid var( --light-border-color );
}

.single-portfolio-details-table .meta-group > div .sub-title {
    border-right: 1px solid var( --light-border-color );
}

.single-portfolio-details-table .task {
    margin: 0 0 40px 0;
    display: block;
}

.single-portfolio-details-table  .task .sub-title {
    margin: 0 0 20px 0;
    width: 100%; 
}

.single-portfolio-details-table .desc {
    font-size: 17px;
    margin: 0 0 40px 0;
}

.single-portfolio-details-table .task .line {
    margin: 0;
    display: block;
}

.single-portfolio-details-table .related-portfolio {
    margin: 60px 0 0 0;
}

.single-portfolio-details-table .related-portfolio .title-header .title {
    margin: 0 0 50px 0;
}


/* Split --------------------------------------------------------------------- */

.single-portfolio-split .main-title {
    margin: 10px 0 30px 0;
}

.single-portfolio-split .meta-group + .main-title {
    margin: 0 0 30px 0;
}

.single-portfolio-split .portfolio-details {
    display: block;
}

.single-portfolio-split .portfolio-details .meta-group {
    display: block;
}

.single-portfolio-split .meta-group > div {
    margin: 0 0 30px 0;
}

.single-portfolio-split .task {
    margin: 0 0 50px 0;
}

.single-portfolio-split .task .desc {
    margin: 0;
}

.single-portfolio-split .post-media {
    margin: 0;
}


/* ---------------------------------------------------------------------------
 * 404
------------------------------------------------------------------------------ */

.nothing-found {
    text-align: center;
    margin: 0 auto;
    padding: 140px 0 200px 0;
    max-width: 1080px;
}

.nothing-found p {
    font-size: 21px;
    margin: 0;
}

.nothing-found .page-header {
    margin: 0;
    border: 0;
}

.nothing-found .number {
    font-size: 140px;
    font-weight: 700;
    color: var( --extra-dark-color );
    line-height: 1;
}

.nothing-found .title {
    font-size: 52px;
    margin: 0;
}

.nothing-found .sub-title {
    font-size: 21px;
    color: #5b5b5b;
    margin: 0;
}

.nothing-found .bolder {
    font-size: 120px;
    font-weight: 600;
    color: var( --extra-dark-color );
    line-height: 1;
    margin: 0;
}

.nothing-found .bold {
    font-size: 38px;
    color: var( --extra-dark-color );
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
}

.nothing-found .description {
    font-size: 24px;
    text-transform: uppercase;
    margin: 0 0 30px 0;
}

.nothing-found .search-form {
    margin: 60px auto 0 auto;
    max-width: 450px;
    display: flex;
    justify-content: center;
}

.nothing-found .search-form label {
    margin: 0;
    width: 100%;
}

.nothing-found .search-form .search-field {
    height: 55px;
}

.nothing-found .search-form .search-submit {
    color: #fff;
    width: 140px;
}


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


/* General ------------------------------------------------------------------- */

.full-width-footer .footer-widget-area-inner,
.full-width-footer .footer-small-area,
.full-width-footer .quirk-footer-builder .kc-container {
    width: 100%;
    max-width: 100%;
    padding: 0 60px;
}


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

.footer-widget-area {
    padding: 80px 0 40px 0;
}

/* Footer Bottom ------------------------------------------------------------- */

.footer-small-area-cover {
    font-size: 14px;
    height: 60px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.footer-small-area-cover p {
    margin: 0;
    line-height: 1;
}

.footer-small-area-cover .small-area-element nav ul {
    list-style: none;
    display: flex;
}

.footer-small-area-cover .small-area-menu li {
    margin: 0 30px 0 0;
}

.footer-small-area-inner {
    display: flex;
    justify-content: space-between;
}

.footer-area-inner-section {
    display: flex;    
    align-items: center;
}

.footer-small-area-cover .small-area-element a {    
    transition: all ease 500ms;
}

.footer-small-area-cover .small-area-element a:hover {
    color: var( --primary-color );    
    transition: all ease 500ms;
}

.footer-small-area-cover .small-area-element a {    
    transition: all ease 500ms;
}


/* Back To Top --------------------------------------------------------------- */

#back-to-top {
    line-height: 1;
    display: none;
    position: fixed;
    bottom: 10%;
    right: 20px;
}

#back-to-top a {
    font-size: 12px;
    color: #fff;
    background: #111;
    padding: 10px 12px;
    border-radius: 4px;
}


/* Body Overlay -------------------------------------------------------------- */

#body-overlay {
    width: 100%;
    height: 100%;    
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100002;
    transition: all ease 500ms;
}

#body-overlay.overlay-active {
    background: #111;
    width: 100%;
    height: 100%;    
    visibility: visible;
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100002;
    transition: all ease 500ms;
}

#body-overlay.overlay-active.white {
    background: #fff;
}

#body-overlay.overlay-active.alpha {
    background: rgba( 0, 0, 0, 0.80 );
}

#body-overlay.overlay-active.white.alpha {
    background: rgba( 255, 255, 255, 0.80 );
}



/* ---------------------------------------------------------------------------
 * Header and Footer Builder
------------------------------------------------------------------------------ */

/* General ------------------------------------------------------------------- */

.quirk-header-builder .kc_text_block p,
.quirk-footer-builder .kc_text_block p {
    line-height: 1.4;
    margin-bottom: 20px;    
}    


/* Logo ---------------------------------------------------------------------- */

.quirk-header-builder .element-logo .logo img,
.quirk-footer-builder .element-logo .logo img,
.quirk-header-builder .element-footer-logo .logo img,
.quirk-footer-builder .element-footer-logo .logo img {
    display: none;
}

.quirk-header-builder .light .logo .custom-logo,
.quirk-footer-builder .light .logo .custom-logo,
.quirk-header-builder .light .footer-logo .custom-logo,
.quirk-footer-builder .light .footer-logo .custom-logo {
    display: inline-block;
}

.quirk-header-builder .dark .logo .light-logo,
.quirk-footer-builder .dark .logo .light-logo,
.quirk-header-builder .dark .footer-logo .light-logo,
.quirk-footer-builder .dark .footer-logo .light-logo {
    display: inline-block;
}

.element-logo .logo a,
.element-logo .logo span,
.element-footer-logo .logo a,
.element-footer-logo .logo span {
    display: inline-block;
}


/* Menu ---------------------------------------------------------------------- */

.element-small-area-menu .small-area-element .small-area-menu ul {
    display: block;
}

.element-small-area-menu .small-area-element .small-area-menu ul li {
    display: inline-block;
}


/* Copyright Text ------------------------------------------------------------ */

.element-copyright-text .copyright {
    margin: 0;
}


/* Breadcrumbs --------------------------------------------------------------- */

.element-breadcrumbs .breadcrumbs {
    float: none;
}



/* ---------------------------------------------------------------------------
 * Extras
------------------------------------------------------------------------------ */


/* Tab ----------------------------------------------------------------------- */

[data-tab] {
    cursor: pointer;
}

[data-tab].current {
    color: #111;
}

.tab-content {
    position: relative;
}

.tab-content > div {
    display: none;
}

.tab-content .active {
    display: block;
}


/* Slick Slider -------------------------------------------------------------- */

.slick-prev,
.slick-next {
    font-size: 0;
    color: transparent;
    background: #fff;
    line-height: 0;
    width: 30px;
    height: 30px;
    display: block;
    cursor: pointer;
    border: none;
    border-radius: 0;
    outline: none;
    z-index: 1;
    position: absolute;
    top: 50%;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    color: transparent;
    outline: none;
    background: #fff;
    opacity: 0.8;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: .25;
}

.slick-prev:before,
.slick-next:before {
    font-family: 'octagon-basic';
    font-size: 21px;
    color: var( --extra-dark-color );
    line-height: 1.6;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: -25px;
}

[dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
}

.slick-prev:before {
    content: '\63';
}

[dir='rtl'] .slick-prev:before {
    content: '\62';
}

.slick-next {
    right: -25px;
}

[dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
}

.slick-next:before {
    content: '\62';
}

[dir='rtl'] .slick-next:before {
    content: '\63';
}

.slick-dots {
    position: absolute;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 10px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 6px;
    height: 6px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity: 1;
}

.slick-dots li button:before {
    background: var( --dark-background-color );
    border-radius: 50px;
    line-height: 6px;
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    content: '';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: black;
}


/* Row Separator ------------------------------------------------------------- */

.row-separator {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: top;
}

.row-separator.bottom {    
    top: auto;
    bottom: 0;
    transform-origin: bottom;
}

.row-separator.curve1 {
    transform: translateY( 0% ) translateY( -1px ) scale( -1, -1 );
    transform-origin: center;   
}

.row-separator.bottom.curve1 {
    transform: translateY( 0% ) rotate(180deg) translateY( -1px ) scale( -1, -1 );
}

.row-separator.curve2 {
    transform: translateY( -100% ) rotate(180deg) translateY( -1px ) scale( -1, -1 );
}

.row-separator.bottom.curve2 {
    transform: translateY( 0% ) translateY( -1px ) scale( -1, -1 );
}

.row-separator.polygon1 {
    transform: translateY( -100% ) translateY( 1px ) scale( 1, 1 );    
}

.row-separator.bottom.polygon1 {
    transform: translateY( 0% ) rotate( 180deg ) translateY( 1px ) scale( -1, 1 );
    
}

.row-separator.polygon2 {
    transform: translateY( -100% ) translateY( 1px ) scale( -1, 1 );
}

.row-separator.bottom.polygon2 {
    transform: translateY( 0% ) rotate( 180deg ) translateY( 1px ) scale( -1, 1 );
}

.row-separator.wave1 {
    transform: translateY( -100% ) translateY( 1px ) scale( 1, 1 );
}

.row-separator.bottom.wave1 {
    transform: translateY( 0% ) rotate( 180deg ) translateY( 1px ) scale( -1, 1 );
}

.row-separator.wave2 {
    transform: translateY( -100% ) translateY( 1px ) scale( 1, 1 );
}

.row-separator.bottom.wave2 {
    transform: translateY( 0% ) rotate( 180deg ) translateY( 1px ) scale( -1, 1 );
}

.row-separator.wave3 {
    transform: translateY( -100% ) translateY( 1px ) scale( 1, 1 );
}

.row-separator.bottom.wave3 {
    transform: translateY( 1% ) rotate( 180deg ) rotate( 0deg ) translateY( 1px ) scale( -1, 1 );
}

.row-separator.wave4 {
    transform: translateY( -100% ) translateY( 1px ) scale( 1, 1 );
}

.row-separator.bottom.wave4 {
    transform: translateY( 0% ) rotate( 180deg ) rotate( 0deg ) translateY( 1px ) scale( -1, 1 );
}

.row-separator.cloud1 {
    transform: translateY( -100% ) translateY( 1px ) scale( 1, 1 );
}

.row-separator.bottom.cloud1 {
    transform: translateY( 0% ) rotate( 180deg ) translateY( 1px ) scale( -1, 1 );
}


/* Preloader ----------------------------------------------------------------- */

.preloader {
    position: fixed;
    width: 100%;
    height: 100vh;
    text-align: center;
    background: #fff;
    z-index: 999;
}

.preloader img {
    margin: -30px 0 0 -30px;
    position: fixed;
    top: 50%;
    left: 50%;
}


/* Loader -------------------------------------------------------------------- */

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loading .loader {
    width: 15px;
    height: 15px;
    float: left;
    margin: 15px 5px 0 0;
    -webkit-transform: translate(-15px, -15px) scale(1) translate(15px, 15px);
    transform: translate(-15px, -15px) scale(1) translate(15px, 15px);
}

.loading .loader div {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid var( --dark-border-color );
    border-color: #fff transparent #fff transparent;
    -webkit-animation: spinner 1s linear infinite;
    animation: spinner 1s linear infinite;
}


/* Primary Color Reset ------------------------------------------------------- */

.primary .gradient,
.primary .btn-type-solid-rect.btn-color-gradient,
.primary .btn-type-solid-round.btn-color-gradient,
.primary .btn-type-solid-ellipse.btn-color-gradient,
.primary .wpcf7-form .wpcf7-submit,
.primary .woocommerce button,
.primary .woocommerce .button,
.primary.woocommerce .button,
.primary .checkout-button,
.primary .checkout-button:hover,
.primary .checkout-button:focus,
.primary .woocommerce-mini-cart__buttons.buttons .button,
.primary #shop-filter-search .woocommerce-product-search button,
.primary .nothing-found .search-form .search-submit,
.primary .password-protected-form input[name='submit'],
.primary .link-pagination > span,
.primary.btn-color-gradient-palette,
.primary .oct-core-elements.kc-pricing-layout-1 .content-button a,
.primary .oct-core-elements.kc-pricing-layout-2 .content-button a,
.primary .oct-core-elements.kc-pricing-layout-4 {
    background-color: var( --primary-color );
}


/* Grid Creator Blocks ------------------------------------------------------- */

.grid-inner .content-holder {
    color: #fff;
    padding: 20px 30px;
    width: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 0;
}

.grid-inner .content-holder-overlap {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
}

.image-overflow {
    overflow: hidden;
    position: relative;
}

.image-overflow .image-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;    
    transition: all ease 500ms;
}

.grid:hover .image-overflow .image-overlay {
    background: rgba( 22, 22, 22, 0.30 );
    transition: all ease 500ms;    
}

.grid-inner .content-holder .title {
    font-size: 24px;
}

.grid-inner .content-holder a {
    color: #fff;
}

.grid-block .btn-loadmore {
    margin: 80px 0 0 0;
}

.grid-block .pagination {
    margin: 50px 0 0 0;
}

.gutter-0 .grid {
    padding: 0 !important;
    margin: 0 !important;
}

.gutter-1 .grid {
    padding: 0 0.5px !important;
    margin: 0 0 1px 0 !important;
}

.gutter-2 .grid {
    padding: 0 1px !important;
    margin: 0 0 2px 0 !important;
}

.gutter-3 .grid {
    padding: 0 1.5px !important;
    margin: 0 0 3px 0 !important;
}

.gutter-4 .grid {
    padding: 0 2px !important;
    margin: 0 0 4px 0 !important;
}

.gutter-5 .grid {
    padding: 0 2.5px !important;
    margin: 0 0 5px 0 !important;
}

.gutter-6 .grid {
    padding: 0 3px !important;
    margin: 0 0 6px 0 !important;
}

.gutter-7 .grid {
    padding: 0 3.5px !important;
    margin: 0 0 7px 0 !important;
}

.gutter-8 .grid {
    padding: 0 4px !important;
    margin: 0 0 8px 0 !important;
}

.gutter-9 .grid {
    padding: 0 4.5px !important;
    margin: 0 0 9px 0 !important;
}

.gutter-10 .grid {
    padding: 0 5px !important;
    margin: 0 0 10px 0 !important;
}

.gutter-11 .grid {
    padding: 0 5.5px !important;
    margin: 0 0 11px 0 !important;
}

.gutter-12 .grid {
    padding: 0 6px !important;
    margin: 0 0 12px 0 !important;
}

.gutter-13 .grid {
    padding: 0 6.5px !important;
    margin: 0 0 13px 0 !important;
}

.gutter-14 .grid {
    padding: 0 7px !important;
    margin: 0 0 14px 0 !important;
}

.gutter-15 .grid {
    padding: 0 7.5px !important;
    margin: 0 0 15px 0 !important;
}


/* Dot Navigation ------------------------------------------------------------ */

.scroll-nav {
    z-index: 2;
    position: fixed;
    top: 50%;
    transform: translateY( -50% );
}

.scroll-nav__list {
    margin: 0;
    padding: 0 0 0 50px;
    list-style-type: none;
}


.scroll-nav .scroll-nav__item {
    margin: 30px;
}

.scroll-nav__link,
.scroll-nav__link:hover,
.scroll-nav__link:active,
.scroll-nav__link:link,
.scroll-nav__link:visited {
    background: var( --darken-color );
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 50%;
    transition: all 0.1s ease-in-out;
}

.scroll-nav__link:hover {
    background: var( --primary-color );
    transition: all 0.1s ease-in-out;
}

.scroll-nav .scroll-nav__item.current .scroll-nav__link {
    height: 14px;
    width: 14px;
}


/* Popup Notices ------------------------------------------------------------- */

#notices-wrapper {
    background: #fff;
    padding: 20px;
    display: none;
    border-radius: 5px;
    box-shadow: 1px 1px 3px 2px rgba( 0, 0, 0, 0.03 );
    z-index: 999;
    position: fixed;
    top: 200px;
    right: 50px;
}

#notices-wrapper .thumb {
    margin: 0 20px 0 0;
    float: left;
}

#notices-wrapper .thumb img {
    border-radius: 4px;
}

#notices-wrapper .notice-content {
    float: left;
}

#notices-wrapper p {
    margin: 0;
}

#notices-wrapper .notice-title {
    font-weight: 600;
}

#notices-wrapper .notice-btn {
    font-size: 14px;
    color: var( --primary-color );
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
    margin: 14px 0 0 0;
    padding: 0 0 5px 0;
    display: inline-block;
    border-bottom: 1px solid;
}