/*
Theme Name: Jopho
Theme URI: http://shtheme.org/demosd/jopho
Author: Shtheme
Author URI: http://shtheme.com
Description: JOPHO – Creative Photography Portfolio is perfect if you like a clean and modern theme. This theme is ideal for wedding photography, fashion photography, model photography, makeup photography, photo studio, personal photography, photography agency, photography portfolio, photo blog or photo gallery.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: jopho

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ========TABLE OF CONTENTS==========
00. Body, links, hgroup, paragraphs, general styles
01. Fixed header & Navigation
02. Section Intro (Home)
03. Section About
04. Section Resume
05. Section Portfolio
06. Section Blog
07. Section Contact
08. Footer
09. Loader
10. Responsive design

/*--------------------------------------------------
    00. Body, links, hgroup, paragraphs, general styles
---------------------------------------------------*/

p.comment-form-cookies-consent{
    display: none;
}
.search-custom form button {
    border: 1px solid #9c5451;
    color: #fff;
    font-size: 15px;
    height: 46px;
    position: relative;
    width: 46px;
    cursor: pointer;
    float: right;
    background: #9c5451;
    margin-top: -46px;
    padding: 0;
    line-height: 1;
}
.search-custom form button:hover{
    background: #fff;
    border: 1px solid #9c5451;
    color: #9c5451;
}
.search-custom form input{
    width: 100%;
    padding: 12px;
    margin-top: 10px;
}
.search-custom h4{
    font-size: 20px;
}
p.form-submit input.submit{
    background-color: #9c5451;
    cursor: pointer;
}
p.form-submit input.submit:hover{
    background-color: #101010;
}
h3#reply-title{
    color: #9c5451;
    font-size: 30px;
}
.banner-header h5{
    text-transform: capitalize;
}
.blog-entry .desc span{
    display: inline-block!important;
    text-transform: capitalize;
}
ul.pagination{
    margin-bottom: 30px;
    margin-top: 30px;
    padding: 0;
    margin: 0;
    text-align: center;
    display: block;
}
.pagination li {
    display: inline-block;
    margin: 0 5px;
}
.pagination li a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #f2f2f2;
    font-weight: 300;
    color: #555;
}
.dark .pagination li a{
    background: #191919;
    color: #fff;
}
.pagination li a:hover {
    opacity: 1;
    text-decoration: none;
    box-shadow: 0px 16px 28px 0px rgb(0 0 0 / 20%);
    background: #9c5451;
    color: #fff;
}
.pagination li span.current{
    background-color: #9c5451;
    border: 1px solid #9c5451;
    color: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-weight: 300;
}
.navbar-nav li.active a{
    color: #9c5451 !important;
}
ul.dropdown-menu > li{
    padding: 7px 14px;
    font-size: 16px;
    font-weight: 300;
    color: #555;
    position: relative;
    -webkit-transition: all .4s;
    transition: all .4s;
    border-bottom: 1px solid #ececec;
    display: block;
    width: 100%;
    background-color: transparent;
}
ul.dropdown-menu > li:last-child{
    border-bottom: none;
}
ul.dropdown-menu > li:hover {
    background: transparent;
    padding-left: 20px;
    color: #9c5451;
}
.pagination i{
    font-size: 9px;
}
input.wpcf7-submit{
    background-color: #9c5451!important;
    cursor: pointer;
}
input.wpcf7-submit:hover{
    background-color: #090909!important;
}
div.wpcf7-response-output{
    margin: 10px 0 0 0 ;
}
p.form-submit{
    margin-bottom: 0;
}
#jopho-main .banner-header{
    background-position: 0 0 !important;
}
a.butn-dark{
    text-shadow: none;
    padding: 10px 20px;
    -webkit-box-shadow: none;
    box-shadow: none;
    line-height: 1.75em;
    font-weight: 300;
    border-style: solid;
    color: #fff;
    border-width: 0;
}
.error{
    padding: 200px 0;
}
.widget {
    background: #f2f2f2;
    padding: 30px;
    margin-bottom: 30px;
    overflow: hidden;
}
ul.wp-tag-cloud li{
    display: inline-block;
    background: #9c5451;
    border: 1px solid #9c5451;
    padding: 5px 15px;
    color: #fff;
    margin:5px 0 0 0 ;
}
ul.wp-tag-cloud li a{
    font-size: 16px!important;
}
ul.wp-tag-cloud li:hover{
    background: #101010;
    border-color: #101010;
}
.widget_search form input, .search-custom form input {
    width: 100%;
    padding: 10px;
    border: 0;
    background: #fff;
    margin-bottom: 0;
}
.search-custom form input{
    border:1px solid #ececec;
    padding: 8px;
}
.widget_search form button{
    position: absolute;
    border: 0;
    cursor: pointer;
    margin:0;
    right: 44px;
}
.widget_news ul li {
    font-size: 15px;
    line-height: 1.5em;
    margin-bottom: 20px;
    display: block;
    overflow: hidden;
}
.widget_news ul li:last-child,
.widget_news ul{
    margin-bottom: 0;
}
.widget_news .recent .thum {
    width: 95px;
    overflow: hidden;
    float: left;
    margin-right: 10px;
}
.widget_news .recent a {
    display: block;
    margin-top: 15px;
}

/* dark
*/
body.dark{
    background: #101010;
    color: #999!important;
}
.dark .logo-wrapper{
    background: #101010;
}
.dark .logo-wrapper .logo span{
    color: #999;
}
.dark p{
    color: #999;
}
.dark .jophoto-user-content h3 span{
    color: #999;
}
.dark ul.dropdown-menu > li{
    color: #fff;
    border-color: #202020;
}
.dark ul.dropdown-menu > li:hover{
    color: #9c5451;
}
.banner-img.banner-dark:after{
    background: linear-gradient(hsla(0, 0%, 6%, 0.01), hsla(0, 0%, 6%, 0.01) 0%, #101010);
}
.banner-header.banner-dark h1{
    color: #fff;
}
.dark .navbar .navbar-nav .nav-link{
    color: #fff;
}
.dark .dropdown-menu, .sub-menu{
    background-color: #101010;
}
.dark .nav-scroll{
    background: #090909;
}
.dark .nav-scroll .logo-wrapper{
    background: #090909;
}
.dark .navbar .navbar-nav .nav-link:hover {
    color: #9c5451;
}
.dark p.form-submit input.submit:hover{
    background: #090909;
}
@media screen and (max-width: 991px){
.dark .dropdown-menu {
    background: #191919;
}
}
@media screen and (max-width: 767px){
.dark .navbar {
    background: #090909;
    }
}
.loading{
    background-color: #fff;
}
.dark .loading{
    background-color: #101010;
}

.dark .widget {
    background: #191919;
}
.dark .banner-header h1{
    color: #fff;
}
.dark .banner-img:after {
    background: linear-gradient(hsla(0, 0%, 6%, 0.01), hsla(0, 0%, 6%, 0.01) 0%, #101010);
}
.dark #jopho-aside{
    background: #101010;
}
.dark #jopho-aside .jopho-main-menu > ul > li > a{
    color: #999;
}
/* ======= Scrollbar ======= */

.sidebar ::-webkit-scrollbar {
    width: 0px;
}

.sidebar ::-webkit-scrollbar-track {
    background: #fff;
}

.sidebar ::-webkit-scrollbar-thumb {
    background: #101010;
}

.sidebar ::-webkit-scrollbar-thumb:hover {
    background: #101010;
}
.sidebar section>.container,
footer .container,
.sidebar header .container {
    padding-right: 60px;
    padding-left: 60px;
}
.side_bar .container

{
    padding: 0;
}
.side_bar section.jophoto-gallery .container{
    padding: 0 15px;
}

/* ======= Sidebar styles ======= */
#jopho-page {
    width: 100%;
    overflow: hidden;
    position: relative;
}
#jopho-aside {
    padding: 40px;
    width: 20.9%;
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    overflow-x: hidden;
    z-index: 1001;
    background: #fff;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    border: none;
    border-right: 1px solid rgba(0,0,0,0.05);
    scrollbar-width: none;
}


@media screen and (max-width: 1200px) {
    #jopho-aside {
        width: 30%;
    }
}
@media screen and (max-width: 768px) {
    #jopho-aside {
        width: 270px;
        -moz-transform: translateX(-270px);
        -webkit-transform: translateX(-270px);
        -ms-transform: translateX(-270px);
        -o-transform: translateX(-270px);
        transform: translateX(-270px);
        padding: 60px 30px 0 30px;
    }
}
/* logo */
#jopho-aside .jopho-logo {
    text-align: center;
    margin-bottom: 90px;
    margin-top: 30px;
    display: block;
}

#jopho-aside .jopho-logo h2 {
    font-weight: 400;
    font-size: 41px;
    color: #9c5451;
    line-height: 1.1em;
    display: block;
    width: 100%;
    position: relative;
    margin-bottom: 0;
}

#jopho-aside .jopho-logo span {
    display: block;
    margin-top: 5px;
    font-size: 9px;
    color: #555;
    font-weight: 400;
    letter-spacing: 4px;
    margin-left: 15px;
    line-height: 1em;
}



#jopho-aside .jopho-logo .logo-img {
    width: 75px;
    margin-bottom: 5px;
}

@media screen and (max-width: 768px) {
    #jopho-aside .jopho-logo {
        margin-bottom: 60px;
    }
}
#jopho-aside .jopho-logo a {
    display: inline-block;
    text-align: center;
    color: #9c5451;
}
#jopho-aside .jopho-logo a span {
    display: block;
    margin-top: 0px;
}

/* Menu */
#jopho-aside .jopho-main-menu,
#jopho-aside .jopho-main-menu ul,
#jopho-aside .jopho-main-menu ul li,
#jopho-aside .jopho-main-menu ul li a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#jopho-aside .jopho-main-menu {
    margin-bottom: 90px;
}
@media screen and (max-width: 768px) {
    #jopho-aside .jopho-main-menu {
        margin-bottom: 30px;
    }
}
#jopho-aside .jopho-main-menu ul ul {
    display: none;
}


#jopho-aside .jopho-main-menu ul ul li:last-of-type {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 13px;
}

#jopho-aside .jopho-main-menu > ul > li > a {
    font-family: 'Julius Sans One', sans-serif;
    letter-spacing: 1px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.25em;
    color: #555;
    margin: 13px 0 0 0;
    padding: 0 0 13px 0;
    list-style: none;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
#jopho-aside .jopho-main-menu > ul > li > a:hover,
#jopho-aside .jopho-main-menu > ul > li.active > a,
#jopho-aside .jopho-main-menu > ul > li.open > a {
    color: #9c5451;
}
#jopho-aside .jopho-main-menu > ul > li.open > a {
    font-family: 'Julius Sans One', sans-serif;
    letter-spacing: 1px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.25em;
    color: #9c5451;
    margin: 13px 0 0 0;
    padding: 0 0 13px 0;
    list-style: none;
    border-bottom: none;
}
#jopho-aside .jopho-main-menu > ul > li:last-child > a,
#jopho-aside .jopho-main-menu > ul > li.last > a {
}
#jopho-aside .jopho-main-menu > ul > li > a:hover > span::after,
#jopho-aside .jopho-main-menu > ul > li.active > a > span::after,
#jopho-aside .jopho-main-menu > ul > li.open > a > span::after {
    border-color: #9c5451;
}
#jopho-aside .jopho-main-menu ul ul li a {
    padding: 8px 0 8px 15px;
    list-style: none;
    font-family: 'Josefin Sans', sans-serif;
    color: #555;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.25em;
}
#jopho-aside .jopho-main-menu ul ul li:hover > a,
#jopho-aside .jopho-main-menu ul ul li.open > a,
#jopho-aside .jopho-main-menu ul ul li.active > a {
    color: #9c5451;
}
#jopho-aside .jopho-main-menu ul ul ul li a {
    margin-left: 15px;
}
#jopho-aside .jopho-main-menu > ul > li > ul > li:last-child > a,
#jopho-aside .jopho-main-menu > ul > li > ul > li.last > a {
    padding-bottom: 8px;
}
#jopho-aside .jopho-main-menu > ul > li > ul > li.open:last-child > a,
#jopho-aside .jopho-main-menu > ul > li > ul > li.last.open > a {
}
#jopho-aside .jopho-main-menu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
}
#jopho-aside .jopho-main-menu ul ul li.active > a::after,
#jopho-aside .jopho-main-menu ul ul li.open > a::after,
#jopho-aside .jopho-main-menu ul ul li > a:hover::after {
}

/* footer */
#jopho-aside .jopho-footer {
    position: relative;
    bottom: 0;
    left: 0;
    padding: 60px 0px 0px 0px;
    text-align: center;
}
#jopho-aside .jopho-footer p {
    font-size: 9px;
    margin-bottom: 0;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 3px;
    font-weight: 300;
}
#jopho-aside .jopho-footer a {
    color: #9c5451;
}
@media screen and (max-width: 768px) {
    #jopho-aside .jopho-footer {
    }
}
#jopho-aside .jopho-footer ul {
    display: inline-block;
    margin-bottom: 15px;
    padding: 0;
    position: relative;
    text-align: center;
}
#jopho-aside .jopho-footer ul:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 1px;
    background-color: rgba(0,0,0,0.075);
    top: 50%;
    margin-top: -1px;
    right: 100%;
}
#jopho-aside .jopho-footer ul:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 1px;
    background-color: rgba(0,0,0,0.075);
    top: 50%;
    margin-top: -1px;
    right: auto;
    left: 100%;
}
#jopho-aside .jopho-footer ul li {
    display: inline-block;
    margin-right: 5px;
    border: 1px solid rgba(0,0,0,0.075);
    width: 40px;
    height: 40px;
    line-height: 43px;
    text-align: center;
    transition: all 0.3 ease-in-out;
    border-radius: 50%;
}
#jopho-aside .jopho-footer ul li:last-child {
    margin-right: 0px
}
#jopho-aside .jopho-footer ul li:hover {
    border: 1px solid #9c5451;
}
#jopho-aside .jopho-footer ul li a {
    color: #555;
    font-size: 13px;
}
#jopho-aside .jopho-footer ul li a:hover,
#jopho-aside .jopho-footer ul li a:active,
#jopho-aside .jopho-footer ul li a:focus {
    text-decoration: none;
    outline: none;
    color: #9c5451;
}


/* important offcanvas for menu */
body.offcanvas {
    overflow-x: hidden;
}

body.offcanvas #jopho-aside {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    width: 270px;
    z-index: 999;
    position: fixed;
}

body.offcanvas #jopho-main,
body.offcanvas .jopho-nav-toggle {
    top: 0;
    -moz-transform: translateX(270px);
    -webkit-transform: translateX(270px);
    -ms-transform: translateX(270px);
    -o-transform: translateX(270px);
    transform: translateX(270px);
}


/* ======= Content styles ======= */

#jopho-main {
    width: 79.2%;
    float: right;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

@media screen and (max-width: 1200px) {
    #jopho-main {
        width: 70%;
    }
}

@media screen and (max-width: 768px) {
    #jopho-main {
        width: 100%;
    }
    .container {
        padding-right: 30px;
        padding-left: 30px;
    }
}


/* ======= Navigation styles ======= */

#jopho-main-menu {
    margin-bottom: 90px;
}

.jopho-nav-toggle {
    cursor: pointer;
    text-decoration: none;
}

.jopho-nav-toggle.active i::before,
.jopho-nav-toggle.active i::after {
    background: #fff;
}

.jopho-nav-toggle.dark.active i::before,
.jopho-nav-toggle.dark.active i::after {
    background: #171717;
}

.jopho-nav-toggle:hover,
.jopho-nav-toggle:focus,
.jopho-nav-toggle:active {
    outline: none;
    border-bottom: none !important;
}

.jopho-nav-toggle i {
    position: relative;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    width: 20px;
    height: 1px;
    color: #fff;
    font: bold 14px/.4 Helvetica;
    text-transform: uppercase;
    text-indent: -55px;
    background: #fff;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    top: -2px;
}

.jopho-nav-toggle i::before,
.jopho-nav-toggle i::after {
    content: '';
    width: 20px;
    height: 1px;
    background: #fff;
    position: absolute;
    left: 0;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.jopho-nav-toggle.dark i {
    position: relative;
    color: #171717;
    background: #171717;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

.jopho-nav-toggle.dark i::before,
.jopho-nav-toggle.dark i::after {
    background: #171717;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.jopho-nav-toggle i::before {
    top: -7px;
}

.jopho-nav-toggle i::after {
    bottom: -7px;
}

.jopho-nav-toggle:hover i::before {
    top: -10px;
}

.jopho-nav-toggle:hover i::after {
    bottom: -10px;
}

.jopho-nav-toggle.active i {
    background: transparent;
}

.jopho-nav-toggle.active i::before {
    top: 0;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.jopho-nav-toggle.active i::after {
    bottom: 0;
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    -o-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}

.jopho-nav-toggle {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
    cursor: pointer;
    opacity: 1;
    visibility: hidden;
    padding: 11px 14px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    background: #9c5451;
    margin: 15px 30px;
    border-radius: 50%;
}

@media screen and (max-width: 768px) {
    #jopho-main-menu {
        margin-bottom: 60px;
    }
    .jopho-nav-toggle {
        opacity: 1;
        visibility: visible;
    }
}



/* ======= Header ======= */

.header .caption .o-hidden {
    display: inline-block;
    padding-right: 60px;
}

/* owl-nav next and prev */
.owl-nav {
    position: absolute;
    bottom: 4%;
    left: 4%;
}
.owl-theme .owl-nav [class*=owl-] {
    width: 39px;
    height: 39px;
    line-height: 36px;
    background: transparent;
    border-radius: 100%;
    color: #fff;
    font-size: 11px;
    margin-right: 3px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease-in-out;
    transform: scale(1.0);
}
.owl-theme .owl-nav [class*=owl-]:hover {
    transform: scale(0.9);
    background: transparent;
    border: 1px solid #9c5451;
    color: #9c5451;
}


@media screen and (max-width: 767px) {
    .banner-header {
        height: 30vh;
    }
}


/* Pagination */
.jophoto-pagination-wrap li a {
    background: #f2f2f2;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 44px;
    text-align: center;
    color: #555;
    font-weight: 300;
    border-radius: 100%;
}


@media screen and (max-width: 767px) {
    
    .header .caption .o-hidden {
    padding-right: 0px;
}
}
.blog-entry{
    margin-bottom: 40px!important;
}

@media screen and (max-width: 767px) {
    .sidebar .banner-header {
        margin-top: 0;
}
}
.dark .navbar-nav li.active ul li a {
    color: #fff !important;
}
.dark .navbar-nav li.active ul li a:hover{
    color: #9c5451!important;
}
.dark #jopho-aside .jopho-logo span{
    color: #999;
}