/*
Theme Name: Fashion Pin
Theme URI: https://blossomthemes.com/wordpress-themes/fashion-pin/
Template: blossom-pin
Author: Blossom Themes
Author URI: https://blossomthemes.com/
Description: Fashion Pin is a Pinterest-style and feminine WordPress theme for professional bloggers. You can easily create a visually appealing and eye-catching site to share your expert fashion tips, your favorite recipes, or create a lifestyle, travel, food, beauty and makeup, coaching, or any other themed blog. With Fashion Pin, you can customize the look and feel of your website with unlimited colors and 1000+ Google fonts. This theme is mobile-friendly, SEO optimized and loads fast to help your site rank better on search engines. The strategically placed newsletter section will help you to grow your subscribers. With the Instagram section, you can flaunt your latest posts. Fashion Pin is Schema friendly, translation-ready, and WooCommerce and RTL compatible. Check demo at https://blossomthemes.com/theme-demo/?theme=fashion-pin, read the documentation at https://docs.blossomthemes.com/fashion-pin/, and get support at https://blossomthemes.com/support-ticket/.
Requires PHP: 5.6
Tested up to: 6.0
Version: 1.0.1
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: fashion-pin
Tags: blog,one-column,two-columns,right-sidebar,left-sidebar,footer-widgets,custom-background,custom-header,custom-menu,custom-logo,featured-images,threaded-comments,full-width-template,rtl-language-support,translation-ready,theme-options,photography,e-commerce
*/
/*

/*========================================
 variable
 ========================================*/

:root{
	--primary-color: #f48585;
	--primary-font: 'DM Sans', sans-serif;
	--secondary-font: 'Nanum Myeongjo', sans-serif;
}

/*========================================
 Header Layout Two Style
 ========================================*/
 .site-header .site-branding .site-title{
	font-size: 3em;
}

 .header-layout-two {
    padding: 0;
    display: block;
}

.header-layout-two .header-t {
    background-size: cover !important;
    text-align: center;
    padding: 30px 0 25px;
}

.header-layout-two .site-branding {
    width: 100%;
}

.header-layout-two .site-branding.has-logo-text {
    justify-content: center;
}

.header-layout-two .site-branding.has-logo-text .custom-logo-link {
    float: left;
}

.header-layout-two .site-branding.has-logo-text .site-title-wrap {
    width: auto;
    text-align: left;
}

.header-layout-two .header-b {
    background: #fff;
    padding: 18px 0 17px;
}

.header-layout-two .main-navigation {
    float: left;
    width: auto;
}

.header-layout-two .main-navigation ul ul {
    padding-top: 18px;
}

.header-layout-two .main-navigation ul ul ul {
    padding-top: 0;
}

.header-layout-two .tools {
    float: right;
    width: auto;
}
.clearfix:after {
    display: block;
    clear: both;
    content: '';
}
@media only screen and (max-width: 1024px){
    .mobile-header .site-branding.has-logo-text .site-title-wrap {
        width: auto;
    }
    .mobile-header .mobile-site-header .site-branding {
        justify-content: center;
    }
}


/*===============================
 Banner layout two Style
 ===============================*/
 .banner-layout-two {
    position: relative;
}

.banner-layout-two .item {
    height: 660px;
    background: var(--primary-color);
}

.banner-layout-two img {
    vertical-align: top;
    height: 100%;
    object-fit: cover;
}

.banner-layout-two .text-holder {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 100px 0 50px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.7+100 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000', GradientType=0);
    /* IE6-9 */
}

.banner-layout-two .text-holder .holder {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 0 15px;
}

.banner-layout-two .text-holder .category {
    display: block;
    margin: 0 0 10px;
}

.banner-layout-two .text-holder .category a,
.banner-layout-two .text-holder .category span {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 0.556em;
    line-height: 1em;
    letter-spacing: 1px;
    color: #fff;
    font-weight: 700;
    background: var(--primary-color);
    border-radius: 3px;
    text-transform: uppercase;
    padding: 5px 7px;
    text-decoration: none;
    -webkit-transition: ease 0.2s;
    -moz-transition: ease 0.2s;
    transition: ease 0.2s;
}

.banner-layout-two .text-holder .category a:hover {
    text-decoration: none;
    background: #000;
}

.banner-layout-two .text-holder .entry-title {
    font-size: 2.667em;
    line-height: 1.250em;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.banner-layout-two .text-holder .entry-title a {
    color: #fff;
    -webkit-transition: ease 0.2s;
    -moz-transition: ease 0.2s;
    transition: ease 0.2s;
}

.banner-layout-two .text-holder .entry-title a:hover {
    color: var(--primary-color);
}

.banner-layout-two .owl-prev {
    position: absolute;
    top: 50%;
    left: 18px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.4) !important;
    border-radius: 4px;
    -webkit-transition: ease 0.2s;
    -moz-transition: ease 0.2s;
    transition: ease 0.2s;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

.banner-layout-two .owl-prev:hover {
    background: #fff !important;
}

.banner-layout-two .owl-prev svg {
    width: 18px;
    height: 12px;
    fill: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.banner-layout-two .owl-next {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 4px;
    -webkit-transition: ease 0.2s;
    -moz-transition: ease 0.2s;
    transition: ease 0.2s;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

.banner-layout-two .owl-next:hover {
    background: #fff !important;
}

.banner-layout-two .owl-next svg {
    width: 18px;
    height: 12px;
    fill: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 767px){
    .banner-layout-two .text-holder .entry-title {
        font-size: 1.5em;
    }
    .banner-layout-two .text-holder {
        padding: 40px 0 20px;
    }
    .banner-layout-two .item {
        height: 300px;
    }
}





/*========================================
 blog 
 ========================================*/

.blog #primary .post .entry-header .entry-title a,
.banner-layout-two .text-holder .entry-title a,
.banner-slider .item .text-holder .entry-title a{
    background-image: linear-gradient(180deg, transparent 95%, var(--primary-color) 0);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    -webkit-transition: background-size 0.4s ease;
    -moz-transition: background-size 0.4s ease;
    transition: background-size 0.4s ease;
}
.blog #primary .post .entry-header .entry-title a:hover,
.banner-layout-two .text-holder .entry-title a:hover,
.banner-slider .item .text-holder .entry-title a:hover{
    text-decoration: none;
    background-size: 100% 100%;
    color: var(--primary-color);
}

/*========================================
 Responsiveness
 ========================================*/


 @media only screen and (max-width: 1024px){
    .site-header {
        display: none;
    }

 }