/**
* Template Name: Drema
* Template URL: http://themehexa.com/themes/drema
* Author: Themehexa
* Author URI: http://themehexa.com
* Description: Drema - A simple template for your personal blog site.
* Version: 1.0.0
**/


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

# 01. Fonts
# 02. Typography
# 03. Common Style
# 04. Custom Style
       -> 4.1. Preloader
# 05. Header
        -> 5.1. Navigation Area
        -> 5.2. Mobile Menu
        -> 5.3. Header Menu
        -> 5.4. Sub Menu
# 06. Slider Style
# 07. Main Content Style
        -> 7.1. Video Post
        -> 7.2. Music Post
        -> 7.3. Gallery Post
        -> 7.4. Home Masonry
# 08. Sidebar Style
# 09. Widgets
        -> 9.1. About Widget
        -> 9.2. Category Widget
        -> 9.3. Popular Widget
        -> 9.4. Featured Widget
        -> 9.5. Instagram Widget
        -> 9.6. Tag Widget
        -> 9.7. Facebook Widget
# 10. Details Page Style
# 11. Blog Page Style
        -> 11.1. Page Banner
# 12. About Page Style
# 13. Archive Page Style
# 14. Contact Page Style
# 15. 404 Page Style
# 16. Footer Style
# 17. Copyright Style
# 18. Media Queries
*/


/*-----------------------
    #1 - Fonts 
------------------------*/

@import url('https://fonts.googleapis.com/css?family=Hind:300,300italic,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');

/*-----------------------
    #2 - Typography 
------------------------*/

html,
body {
    height: 100%;
    min-height: 100%;
    color: #252525;
}

body {
    font-size: 14px;
    line-height: 24px;
    font-family: 'Hind', sans-serif;
    width: 100%;
    height: 100%;
    overflow: scroll;
    overflow-x: hidden;
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

a {
    color: #252525;
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
    color: #000000;
}

p {
    color: #454545;
    font-size: 16px;
    line-height: 1.7;
    word-spacing: 0.03em;
    letter-spacing: 0.03em;
    font-weight: 300;
}

img {
    max-width: 100%;
}

blockquote {
    border-color: #252525;
    border-width: 5px;
    background-color: #f8f8f8;
    color: #000000;
    font-size: 16px;
}


/*-----------------------
    #3 - Common Style 
------------------------*/

.btn.btn-custom {
    font-size: 13px;
    border-radius: 0;
    background-color: #ffffff;
    padding-bottom: 2px;
}

.btn-custom:hover,
.btn-custom:focus {
    text-decoration: none;
    color: #ffffff;
    background-color: #252525;
}

.btn.btn-custom-round {
    border-radius: 20px;
}

.btn.btn-custom-big {
    padding-left: 50px;
    padding-right: 50px;
}

.blog.list .btn.btn-custom {
    margin-left: 0;
}

.img-no-radius {
    border-radius: 0;
}

input[type="date"]:focus:not([readonly]),
input[type="datetime-local"]:focus:not([readonly]),
input[type="email"]:focus:not([readonly]),
input[type="number"]:focus:not([readonly]),
input[type="password"]:focus:not([readonly]),
input[type="search-md"]:focus:not([readonly]),
input[type="tel"]:focus:not([readonly]),
input[type="text"]:focus:not([readonly]),
input[type="time"]:focus:not([readonly]),
input[type="url"]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-color: #252525;
    -webkit-box-shadow: 0 1px 0 0 #252525;
    box-shadow: 0 1px 0 0 #252525;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: #252525;
    border-color: #252525;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    background-color: transparent;
    color: #000000;
}

.pagination-container {
    padding-top: 50px;
    padding-bottom: 50px;
}

.body-container {
    margin-top: 25px;
    margin-bottom: 25px;
}

.theme-section .inner {
    background: #ffffff;
    border: 1px solid #f5f5f7;
    box-shadow: 0px 0px 1px #f5f5f7;
}

.social-icons {
    margin: 0;
}

.social-icons li {
    padding-left: 10px;
    padding-right: 10px;
}

.social-icons li a {
    color: #cccccc;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.social-icons li a:hover {
    color: #000000;
}

.dr-custom-progress {
    height: 5px;
    border-radius: 0;
}

.tooltip {
    padding: 0;
    height: auto;
    width: auto;
}

.section-title {
    margin-bottom: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #efefef;
}

.dr-custom-progress .progress-bar {
    background-color: #252525;
}

.post-content a:link {
    font-weight: 500;
    color: #000000;
}

.post-container iframe {
    border: 0 none;
    margin-bottom: -8px;
    width: 100%;
}

.quote {
    padding-top: 25px;
    font-style: italic;
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

.quote::before {
    content: '\f10d';
    font-family: 'fontawesome';
    padding-right: 5px;
    color: #cccccc;
}

.quote::after {
    content: '\f10e';
    font-family: 'fontawesome';
    padding-left: 5px;
    color: #cccccc;
}

.blog-details .quote,
.about-page .quote {
    padding-top: 15px;
    padding-bottom: 15px;
}


/*-----------------------
    #4 - Custom Style 
------------------------*/

.no-padding-top {
    padding-top: 0;
}

.no-padding-bottom {
    padding-bottom: 0;
}

.no-padding-left {
    padding-left: 0;
}

.no-padding-right {
    padding-top: 0;
}

.no-margin-top {
    margin-top: 0;
}

.no-margin-bottom {
    margin-bottom: 0;
}

.no-margin-left {
    margin-left: 0;
}

.no-margin-right {
    margin-top: 0;
}


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

.loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    background: #ffffff;
    text-align: center;
    z-index: 9999;
}

.ball-scale {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;
}

.ball-scale > div {
    background-color: #252525;
    border-radius: 100%;
    margin: 2px;
    display: inline-block;
    height: 60px;
    width: 60px;
    -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
    animation: ball-scale 1s 0s ease-in-out infinite;
}

@-webkit-keyframes ball-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes ball-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}


/*-----------------------
    #5 - Header 
------------------------*/

header .logo-container {
    padding-top: 25px;
    padding-bottom: 25px;
}

header .logo-container .logo {
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 300;
    letter-spacing: 0.5em;
    color: #454545;
    display: inline-block;
}

header .logo-container .subtitle {
    font-family: 'Hind', sans-serif;
    letter-spacing: 0.5em;
    font-weight: 300;
}


/*----- Navigation Area -----*/

.navigation-container {
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    margin-bottom: 25px;
    position: relative;
    z-index: 100;
}

.navigation-container .header-social-icons {
    font-size: 15px;
    margin: 0;
}

.navigation-container .header-social-icons a {
    padding: 10px 5px;
    display: inline-block;
    font-size: 15px;
    color: #252525;
}

.navigation-container .header-social-icons a:hover {
    color: #858585;
}


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

.navbar-push {
    padding-right: 15px;
    padding-left: 15px;
    margin-left: 0;
    margin-right: 0;
}

.mobile-navbar {
    background-color: #000;
    padding: 0;
}

.mobile-navbar li a {
    color: #ffffff;
    display: block;
    padding: 10px 0 10px 15px;
    border-bottom: 1px solid #151515;
}

.mobile-navbar li span {
    float: right;
    font-size: 12px;
    font-weight: 100;
    margin-top: -10px;
    padding: 10px 15px;
    border-left: 1px solid #151515;
}

.mobile-navbar li .plus-icon {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.mobile-navbar li .plus-icon.exit {
    transform: rotate(45deg);
}

.mobile-navbar li .mobile-sub-menu {
    display: none;
}

.mobile-navbar li .mobile-sub-menu a {
    padding: 5px 0 5px 30px;
}


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

.header-nav .main-menu {
    margin-bottom: 0;
    display: inline-block;
    visibility: hidden;
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

.header-nav .main-menu.visible {
    visibility: visible;
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

.header-nav .main-menu .parent-menu {
    position: relative;
}

.header-nav .main-menu a {
    padding: 10px 15px;
    display: block;
    position: relative;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.header-nav .main-menu a:hover {
    color: #858585;
}

.header-nav .main-menu a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    height: 1px;
    width: 0;
    left: 0;
    background-color: #858585;
    display: block;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.header-nav .main-menu a:hover::after {
    width: 100%;
}


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

.header-nav .main-menu .parent-menu .sub-menu {
    position: absolute;
    display: none;
    left: 50%;
    top: 99%;
    background-color: #252525;
    padding: 10px 20px;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
}

.header-nav .main-menu .sub-menu a {
    color: #ffffff;
    padding: 2px 0;
    white-space: nowrap;
    text-align: left;
}

.header-nav .nav-bar {
    padding: 21px 10px;
    float: right;
    font-size: 20px;
    cursor: pointer;
}

.header-nav .nav-bar .ham {
    width: 23px;
    height: 2px;
    display: block;
    background-color: #252525;
    position: relative;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.header-nav .nav-bar .ham::before,
.header-nav .nav-bar .ham::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    left: 0;
    background-color: #252525;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.header-nav .nav-bar .ham::before {
    top: -8px;
}

.header-nav .nav-bar .ham::after {
    top: 8px;
}

.header-nav .nav-bar .ham.exit {
    background-color: transparent;
}

.header-nav .nav-bar .ham.exit::before {
    -webkit-transform: translateY(8px) rotateZ(-45deg);
    -moz-transform: translateY(8px) rotateZ(-45deg);
    -ms-transform: translateY(8px) rotateZ(-45deg);
    -o-transform: translateY(8px) rotateZ(-45deg);
    transform: translateY(8px) rotateZ(-45deg);
}

.header-nav .nav-bar .ham.exit::after {
    -webkit-transform: translateY(-8px) rotateZ(45deg);
    -moz-transform: translateY(-8px) rotateZ(45deg);
    -ms-transform: translateY(-8px) rotateZ(45deg);
    -o-transform: translateY(-8px) rotateZ(45deg);
    transform: translateY(-8px) rotateZ(45deg);
}


/*------------------------
    #6 - Slider Style
------------------------*/

.banner-slider .item::after {
    content: '';
    position: absolute;
    top: 7px;
    left: 7px;
    right: 7px;
    bottom: 7px;
    border: 1px solid #ffffff;
}

.banner-slider .new-control {
    width: 60px;
    height: 100%;
    background: transparent;
}

.banner-slider .new-control .fa {
    border-radius: 0;
    width: auto;
    height: auto;
    padding: 7px 15px 10px;
    font-size: 25px;
    background-color: #fff;
    color: #353535;
    visibility: hidden;
}

.banner-slider .left.new-control .fa {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

.banner-slider:hover .left.new-control .fa {
    visibility: visible;
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

.banner-slider .right.new-control .fa {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

.banner-slider:hover .right.new-control .fa {
    visibility: visible;
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

.banner-slider .carousel-caption {
    left: 30%;
    right: 30%;
    top: 35%;
    bottom: initial;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
}

.banner-slider .carousel-caption .caption-inner {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: rgba(255, 255, 255, 0.90);
    color: #000000;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}


/*-----------------------------
    #7 - Main Content Style
-----------------------------*/

.post-container {
    margin-bottom: 25px;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.post-container:hover {
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}

.post-container .post-content-wrap {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 1px;
    position: relative;
}

.blog.list .post-container .post-content-wrap {
    padding: 15px 10px;
}

.post-container .post-thumbnail {
    width: 100%;
}

.blog.list .post-container .post-thumbnail {
    position: relative;
    overflow: visible;
}

.blog.list .post-container .post-categories {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 100;
}

.blog.list .post-container .post-categories li a {
    background-color: rgba(37, 37, 37, .85);
    color: #ffffff;
    padding: 5px 10px 3px;
    display: block;
    line-height: 20px;
}

.post-container .post-title {
    font-size: 1.64rem;
}

.blog.list .post-container .post-title {
    font-size: 1.25rem;
}

.post-container .post-meta li {
    padding: 0 10px;
}

.post-container .post-categories a,
.post-container .post-author,
.post-container .post-date,
.post-container .post-comments,
.post-container .post-likes {
    font-size: 12px;
    letter-spacing: 0.1rem;
    color: #999999;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.post-container .post-categories a:hover,
.post-container .post-author:hover,
.post-container .post-date:hover,
.post-container .post-comments:hover,
.post-container .post-likes:hover {
    color: #000000;
}

.post-container .post-bottom-content {
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    padding: 10px 0;
    margin-top: 25px;
}

.post-container .post-bottom-content ul {
    margin-bottom: 0;
}


/*------ Video Post -----*/

.post-container.video-post iframe {
    width: 100%;
    height: 480px;
}

.blog .post-container.video-post iframe {
    height: 380px;
}

.masonry .post-container.video-post iframe {
    height: 250px;
}

.blog.list .post-container.video-post iframe {
    height: 280px;
}


/*----- Music Post -----*/

.blog.list .post-container.music-post iframe {
    height: 280px;
}


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

.gallery-post .post-gallery {
    height: 500px;
    overflow: hidden;
}

.gallery-post .post-gallery .gallery-item {
    width: 33.333333333%;
}


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

.masonry .post-container {
    margin-bottom: 0;
    border-color: #f2f2f2;
}

.masonry .grid {
    clear: both;
    overflow: hidden;
}

.masonry .grid-sizer,
.masonry .grid-item {
    width: 33.33%;
}


/*--------------------------
    #8 - Sidebar Style
--------------------------*/

.sidebar .inner {
    padding: 30px 15px;
}

.sidebar .search-box {
    display: table;
    margin-bottom: 15px;
    width: 100%;
}

.sidebar .search-box input {
    display: table-cell;
    border: 1px solid #f5f5f5;
    border-right: 0 none;
    padding: 5px 10px;
    height: 40px;
    font-size: 13px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.sidebar .search-box input:focus {
    border-color: #252525;
    box-shadow: none;
}

.sidebar .search-box .search-button {
    text-align: center;
    color: #656565;
    border-top: 1px solid #efefef;
    border-right: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    width: 19%;
    height: 40px;
    cursor: pointer;
    display: table-cell;
    vertical-align: middle;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
}

.sidebar input:focus + .search-button {
    border-color: #252525;
}

.sidebar .widget {
    padding-top: 25px;
    padding-bottom: 25px;
}

.sidebar .widget:last-of-type {
    padding-bottom: 0;
}

.sidebar .widget .widget-title {
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 15px;
    margin: 0;
    border-bottom: 1px solid #f5f5f7;
    font-weight: 700;
    letter-spacing: 0.1rem;
}


/*---------------------------
    #9 - Widgets
---------------------------*/


/*----- About Widget -----*/

.about-widget .img-about {
    margin: 10px auto;
}

.about-widget .about-text {
    font-size: 14px;
    text-align: center;
}


/*----- Category Widget -----*/

.category-widget .category-list li {
    border-bottom: 1px solid #f5f5f7;
    padding: 5px 0;
}

.category-widget .category-list .cat-name {
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    display: inline-block;
}
.category-widget .category-list .cat-name::before{
    content: '\f115';
    font-family: fontawesome;
    padding-right: 7px;
}

.category-widget .category-list .count {
    float: right;
    font-weight: 700;
}


/*----- Popular Widget -----*/

.popular-widget .popular-list li {
    border-bottom: 1px solid #f5f5f7;
    padding: 10px 0;
}

.popular-widget .popular-list .media-left {
    float: left;
}

.popular-widget .popular-list li .post-title {
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    font-size: 13px;
}

.popular-widget .popular-list p {
    font-size: 12px;
    margin: 19px 0 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.popular-widget .popular-list p .post-likes {
    float: right;
    margin-right: 5px;
}


/*----- Featured Widget -----*/

.featured-widget .owl-controls .owl-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.65);
    left: 0;
    display: inline-block;
    padding: 5px 10px;
    color: #ffffff;
}

.featured-widget .owl-controls .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.65);
    right: -1px;
    display: inline-block;
    padding: 5px 10px;
    color: #ffffff;
}

.featured-widget .owl-controls .owl-prev:hover,
.featured-widget .owl-controls .owl-next:hover {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    background-color: rgba(0, 0, 0, 0.95);
}


/*----- Instagram Widget -----*/

.instagram-widget .instagram-list {
    padding-top: 10px;
}

.instagram-widget .instagram-list .instagram-img {
    width: 33.33%;
    float: left;
    border: 1px solid #ffffff;
    text-align: center;
}

.instagram-widget .instagram-list .instagram-img img {
    width: 100%;
}


/*----- Tag Widget -----*/

.tag-widget .tag-list {
    margin-top: 10px;
    margin-bottom: 0;
}

.tag-list li {
    padding: 0;
}

.tag-list .tag-item {
    text-transform: uppercase;
    padding: 5px 10px 0;
    margin-bottom: 5px;
    border: 1px solid #efefef;
    background-color: #ffffff;
    color: #757575;
    display: inline-block;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.tag-list .tag-item:hover {
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    background-color: #252525;
    border: 1px solid #252525;
}


/*----- Facebook Widget -----*/

.facebook-widget {
    text-align: center;
}

.facebook-widget .fb-widget {
    margin-top: 10px;
    margin-bottom: 10px;
}


/*-------------------------------
    #10 - Details Page Style
-------------------------------*/

.blog-details .post-tags {
    padding-top: 15px;
    padding-bottom: 10px;
}

.blog-details .post-tags .post-tag-list li {
    padding: 0;
}

.blog-details .post-tags .post-tag-list .tag {
    border: 1px solid #efefef;
    padding: 5px 10px 3px;
    display: inline-block;
    font-size: 13px;
    line-height: 20px;
    background-color: #252525;
    color: #ffffff;
    font-size: 12px;
    text-transform: uppercase;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.blog-details .post-tags .post-tag-list .tag:hover {
    background-color: #ffffff;
    color: #252525;
}

.next-prev-button {
    padding: 15px 0;
}

.next-prev-button .btn {
    width: 150px;
    margin: 0;
}

.blog-details .post-author {
    margin-top: 50px;
    margin-bottom: 25px;
}

.blog-details .post-author .autor-social-links {
    padding-top: 15px;
    padding-bottom: 15px;
}

.blog-details .post-author .autor-social-links li span {
    background-color: #252525;
    border: 1px solid #252525;
    color: #ffffff;
    float: left;
    padding: 5px 15px 3px;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.blog-details .post-author .autor-social-links li .social-icon {
    border-right: 1px solid #555555;
}

.blog-details .post-author .autor-social-links a {
    background-color: #252525;
    display: block;
}

.blog-details .post-author .autor-social-links a:hover .social-text {
    background-color: #ffffff;
    color: #252525;
}

.blog-details .post-author .autor-social-links .social-text {
    min-width: 100px;
    text-align: center;
}

.blog-details .related-post {
    position: relative;
    padding-bottom: 25px;
    margin-top: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #efefef;
}

.blog-details .related-post .related-post-title {
    font-size: 15px;
    font-weight: 300;
}

.related-post .carousel-controller {
    position: absolute;
    top: 15px;
    right: 0;
    display: inline-block;
}

.blog-details .related-post .carousel-controller span {
    background-color: #252525;
    color: #ffffff;
    border: 1px solid #252525;
    padding: 5px 12px 2px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

.blog-details .related-post .carousel-controller span:hover {
    background-color: transparent;
    color: #252525;
}


/*----------------------------
    #11 - Blog Page Style
/*--------------------------*/


/*----- Page Banner -----*/

.page-banner {
    padding: 0 0 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid #efefef;
}

.banner-content {
    display: table-cell;
    vertical-align: middle;
    padding-left: 25px;
}

.page-banner .banner-title {
    color: #252525;
}

.page-banner .breadcrumb {
    margin: 1.54rem 5px 0 0;
    background-color: transparent;
}

.page-banner .breadcrumb a:hover {
    text-decoration: underline;
}

.post-slider .owl-controls .owl-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.65);
    left: 0;
    display: inline-block;
    padding: 5px 10px;
    color: #ffffff;
}

.post-slider .owl-controls .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.65);
    right: 0;
    display: inline-block;
    padding: 5px 10px;
    color: #ffffff;
}

.post-slider .owl-controls .owl-prev:hover,
.post-slider .owl-controls .owl-next:hover {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    background-color: rgba(0, 0, 0, 0.95);
}


/*----------------------------
    #12. About Page Style
----------------------------*/

.post-content-wrap .uiface {
    margin-top: -125px;
}

.about-page .about-section img {
    margin-top: 25px;
}

.about-page .about-section {
    padding-top: 25px;
    padding-bottom: 25px;
}

.about-page .about-section .content-section {
    padding-bottom: 15px;
}


/*----------------------------
   #13 - Archive Page Style 
----------------------------*/

.archive .post-container .post-content-wrap {
    padding: 15px 20px;
}

.archive .post-container .post-title {
    padding: 10px 0;
    margin: 0;
}

.archive .post-container .btn.btn-custom {
    margin-left: 0;
}


/*------------------------------
    #14 - Contact Page Style
------------------------------*/

.contact-page .contact-form .btn-custom {
    margin-left: 0;
}

.contact-page .dr-map {
    border: 1px solid #dfdfdf;
}


/*----------------------------
    #15 - 404 Page Style 
----------------------------*/

.page-404 .error-title {
    font-size: 10rem;
}

.page-404 .error-subtitle {
    padding: 30px 0;
    font-weight: 700;
}

.page-404 .possible-links li a {
    padding: 5px 15px;
    display: block;
}

.page-404 .possible-links li a:hover {
    text-decoration: underline;
    color: #545454;
}


/*--------------------------
    #16 - Footer Style 
--------------------------*/

footer {
    padding-top: 70px;
    padding-bottom: 70px;
    background-color: #050505;
    /*background-image: url('../images/footer-bg3.jpg');*/
    background-blend-mode: color-dodge;
    -webkit-background-size: cover;
    background-size: cover;
}

footer .footer-logo {
    font-family: 'Montserrat Alternates', sans-serif;
    font-weight: 700;
    font-size: 1.64rem;
    margin: 0;
    padding: 15px 0;
    text-transform: uppercase;
    color: #ffffff;
}

footer p {
    color: #bdbdbd;
}

.footer-widget .widget-title {
    text-transform: uppercase;
    padding-bottom: 15px;
    margin: 0;
    border-bottom: 1px solid #f5f5f7;
    font-weight: 700;
    letter-spacing: 0.1rem;
    color: #ffffff;
}

.footer-widget a {
    color: #ffffff;
}

.footer-widget.twitter-widget a:hover {
    text-decoration: underline;
}

.footer-widget.twitter-widget .tweet {
    margin-top: 10px;
    padding-bottom: 5px;
}

.footer-widget.twitter-widget p {
    font-size: 14px;
    margin: 0;
}

.footer-widget.twitter-widget .tweet .tweet-date {
    font-size: 12px;
    text-transform: uppercase;
    color: #dbdbdb;
}

.footer-widget.links-widget ul li {
    border-bottom: 1px solid #333333;
}

.footer-widget.links-widget ul li a {
    line-height: 43px;
}

.footer-widget.links-widget ul li a::before {
    content: '\f105';
    font-family: 'fontawesome';
    padding-right: 15px;
    display: inline-block;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.footer-widget.links-widget ul li a:hover::before {
    padding-left: 5px;
    padding-right: 10px;
}


/*----- Recent Post Widget ------*/

.footer-widget.recent-widget .recent-list li {
    padding: 10px 0;
}

.footer-widget.recent-widget .recent-list .media-left {
    float: left;
}

.footer-widget.recent-widget .recent-list li .post-title {
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    font-size: 13px;
    color: #ffffff;
}

.footer-widget.recent-widget .recent-list p {
    font-size: 12px;
    margin: 20px 0 0;
    text-transform: uppercase;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    padding: 2px;
}

.footer-widget.recent-widget .recent-list p .post-likes {
    float: right;
    margin-right: 5px;
}


/*----------------------------
    #17 - Copyright Style
-----------------------------*/

.copyright-wrap {
    background-color: #050505;
    border-top: 1px solid #111111;
    padding: 10px 0;
}

.copyright-wrap p {
    margin-bottom: 0;
    font-size: 13px;
    color: #bdbdbd;
}

.copyright-wrap p a {
    color: #ffffff;
}


/*-------------------------
    #18 - Media Queries
/*-----------------------*/

@media screen and (min-width: 1024px) {
    /*----- Custom Styles -----*/
    .text-md-left {
        text-align: left;
    }
    .text-md-right {
        text-align: right;
    }
}

@media screen and (max-width: 1024px) {
    /*----- Blog Masonry Style -----*/
    .masonry .grid-sizer,
    .masonry .grid-item {
        width: 50%;
    }
}

@media screen and (max-width: 768px) {
    /*----- Custom Styles -----*/
    .no-xs-padding-top {
        padding-top: 0 !important;
    }
    .no-xs-padding-bottom {
        padding-bottom: 0 !important;
    }
    .no-xs-padding-left {
        padding-left: 0 !important;
    }
    .no-xs-padding-right {
        padding-top: 0 !important;
    }
    /*----- Home Banner Carousel Style -----*/
    .banner-slider .carousel-caption {
        top: 10%;
        -webkit-transform: none;
        transform: none;
    }
    /*----- Home Style -----*/
    .post-container .post-bottom-content .social-icons,
    .post-container .post-bottom-content .like-comment {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /*----- Blog Style -----*/
    .blog.list .post-container .post-content-wrap {
        padding: 15px 30px;
    }
    /*----- Blog Details -----*/
    .blog-details .post-author .author-name {
        padding: 15px 0;
    }
    /*----- 404 Page Style -----*/
    .page-404 .error-title {
        font-size: 6rem;
    }
    .page-404 .error-subtitle {
        font-size: 20px
    }
    /*----- Footer -----*/
    .footer-widget {
        margin-bottom: 50px;
    }
    /*----- Mobile Push Menu Style -----*/
    .push-canvas {
        -webkit-transition: all .25s ease-out;
        -moz-transition: all .25s ease-out;
        -o-transition: all .25s ease-out;
        transition: all .25s ease-out;
        overflow-x: hidden;
        position: relative;
        left: 0;
    }
    .push-canvas.pushed-left {
        left: -50%;
    }
    .push-canvas.pushed-right {
        left: 50%;
    }
    .navbar-push {
        -webkit-transition: all .25s ease-out;
        -moz-transition: all .25s ease-out;
        -o-transition: all .25s ease-out;
        transition: all .25s ease-out;
        height: 100%;
        position: fixed;
        width: 50%;
        top: 0;
    }
    .navbar-push.navbar-push-left {
        right: -50%;
    }
    .navbar-push.navbar-push-right {
        left: -50%;
    }
    .navbar-push.navbar-push-right.in {
        left: 0;
    }
    .navbar-push.navbar-push-left.in {
        right: 0;
    }
}

@media screen and (max-width: 767px) {
    /*----- Header Style -----*/
    header .logo-container .logo,
    header .logo-container .subtitle {
        letter-spacing: 0.2em;
    }
    /*----- Sidebar -----*/
    .sidebar {
        margin-top: 25px;
    }
    /*----- Blog Masonry Style -----*/
    .masonry .grid-sizer,
    .masonry .grid-item {
        width: 100%;
    }
    /*----- 404 Page -----*/
    .page-404 .error-title {
        font-size: 4.5rem;
    }
}