/*
Theme Name: Styled Fashion 
Theme URI: https://blossomthemes.com/wordpress-themes/styled-fashion/
Template: sarada-lite
Author: Blossom Themes
Author URI: https://blossomthemes.com/
Description: If you're a fashion-savvy individual who wants an easy-to-use theme, Styled Fashion is the perfect theme for you. Whether your blog covers topics like travel, lifestyle, fashion, beauty or food - this theme will ensure that your content steals the show every time. With unlimited colors and 1000+ fonts available, you can design a site that truly reflects who you are as a business. Additionally, you can make your Instagram posts more popular and thereby increase the number of followers. By utilizing the predefined newsletter spot, you can easily grow an email list and stay connected with your audience. It is also compatible with WooCommerce if you want to build an online store. Styled Fashion is responsive, SEO-friendly, speed-optimized, translation ready, and RTL-compatible. Check the demo at https://blossomthemes.com/theme-demo/?theme=styled-fashion, read the documentation at https://docs.blossomthemes.com/docs/sarada-lite/, and get support at https://blossomthemes.com/support-ticket/.
Version: 1.0.0
Requires at least: 4.7
Requires PHP: 5.6
Tested up to: 6.1
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: styled-fashion
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
*/

:root {
  --primary-color: #d47a57;
  --primary-color-rgb: 212, 122, 87;
  --secondary-color: #d69f81;
  --secondary-color-rgb: 214, 159, 129;
  --font-color: #171717;
  --font-color-rgb: 23,23,23;
  --background-color: #fff;
  --background-color-rgb: 255, 255, 255;
  --primary-font: 'Lato', sans-serif;
  --secondary-font: 'Caveat';
}

.site-header.style-four .header-mid .site-branding {
    max-width: 100%;
    flex: auto;
  }

  .site-header.style-four .header-mid .main-navigation {
    flex: initial;
  }

  .site-header.style-four .header-mid .main-navigation .toggle-btn {
    padding-left: 30px;
  }

  .site-header.style-four .header-mid .main-navigation .toggle-title {
    display: none;
  }

  .site-header.style-four .header-mid .main-navigation .toggle-btn .toggle-bar {
    right: 0;
  }

  .site-header.style-four .header-mid .main-navigation .nav-menu {
    display: block;
  }

  .site-header.style-four+.site-banner {
    background: none;
    padding-top: 30px;
    padding-bottom: 30px;
    border-top: none;
  }
  
  .site-header.style-four .header-mid {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  
  .site-header.style-four .header-mid .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  
  .site-header.style-four .header-mid .site-branding {
    display: flex;
    flex: initial;
    /* max-width: 200px; */
  }
  .site-header.style-four .header-mid .site-branding.has-logo-text {
    flex-direction: column;
  }
  @media(min-width:768px){
    .site-header.style-four .header-mid .site-branding.has-logo-text {
      flex-direction: row;
      align-items: center;
    }
  }
  
  .site-header.style-four .header-mid .site-branding .site-title-wrap {
    padding-left: 15px;
    text-align: left;
  }
  
  .site-header.style-four .header-mid .main-navigation {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-left: 5%;
  }
  @media(min-width:1024px){
    .site-header.style-four .header-mid .main-navigation .nav-menu {
      display: flex;
      flex-wrap: wrap;
    }
  }
 
  
  .site-header.style-four .header-mid .header-right {
    display: flex;
    flex-wrap: wrap;
    flex: initial;
    align-items: center;
  }
  
  .site-header.style-four .header-social {
    display: none;
    position: fixed;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 999;
  }
  
  .site-header.style-four .header-social .social-networks {
    flex-direction: column;
  }
  
  .site-header.style-four .header-social ul li {
    font-size: 1em;
  }

  .site-header.style-four .header-social ul li a {
    padding: 0;
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 1em;
    color: rgba(var(--font-color-rgb), 0.8);
    border: 1px solid rgba(var(--font-color-rgb), 0.1);
    background: #fff;
  }
  
  .site-header.style-four .header-social ul li a:hover {
    background: var(--primary-color);
    color: #fff;
  }

  .site-banner.style-four {
    padding: 100px 12%;
    background: rgba(var(--secondary-color-rgb), 0.4);
  }
  
  .site-banner.style-four .item {
    position: relative;
    padding: 15px 0;
  }
  
  .site-banner.style-four .item .banner-img {
    padding: 5px 10px;
  }
  
  .site-banner.style-four .item img {
    width: auto;
    border: 5px solid #fff;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  
  .site-banner.style-four .middle-item .item img {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  
  .site-banner.style-four .item .banner-caption {
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 85px;
    width: 100%;
    left: 0;
    text-align: left;
    background: none;
    min-height: auto;
  }
  
  .site-banner.style-four .item .banner-caption .category {
    display: inline-block;
    margin-bottom: 0;
  }
  
  .site-banner.style-four .banner-caption .category a {
    position: relative;
    z-index: 1;
    background: #fff;
    margin-bottom: 0;
    margin-top: 10px;
  }
  
  .site-banner.style-four .banner-caption .category a::after {
    content: "";
    background: rgba(var(--primary-color-rgb), 0.4);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transition: all ease 0.35s;
    -moz-transition: all ease 0.35s;
    transition: all ease 0.35s;
  }
  
  .site-banner.style-four .banner-caption .category a:hover::after {
    background: var(--primary-color);
  }
  
  .site-banner.style-four .banner-caption .banner-title {
    font-size: 1.56em;
    max-width: calc(100% - 20px);
    line-height: 1.9;
    margin: 0;
  }
  
  .site-banner.style-four .banner-caption .banner-title a {
    display: inline;
    background: #fff;
    padding: 5px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  
  .site-banner.style-four .owl-carousel .owl-nav .owl-prev {
    left: -8%;
  }
  
  .site-banner.style-four .owl-carousel .owl-nav .owl-next {
    right: -8%;
  }

  .site-banner.style-four .banner-caption .banner-title {
    font-size: 1.33em;
  }

  .site-banner.style-four .item .banner-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .site-banner.style-four .item .banner-caption {
    bottom: 40px;
  }

  .site-banner.style-four .item .banner-img {
    padding-left: 5px;
    padding-right: 5px;
  }

  @media screen and (max-width: 767px) {
    /*============================
	SITE HEADER STYLE TEN
	============================*/
	.site-header.style-two .container {
		padding-left: 15px;
		padding-right: 15px;
		max-width: 420px;
	}

	.site-header.style-two .secondary-menu {
		flex: initial;
		order: 2;
	}

	.site-header.style-two .site-branding {
		text-align: left;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.site-header.style-two .site-branding .site-logo + .site-title-wrap {
		padding-left: 15px;
	}

	.site-header.style-two .right {
		flex: auto;
		justify-content: center;
		width: 100%;
		margin-top: 15px;
		order: 3;
    }
    
    /*==========================
	SITE BANNER STYLE TWO
	==========================*/
	.site-banner.style-two .item-wrap {
		max-width: 420px;
		margin: 0 auto;
		padding: 0 15px;
	}

	.site-banner.style-two .banner-caption {
		padding: 20px;
    }
 
}

/* Logo overflow issue */

@media only screen and (max-width:600px) {
 .site-logo	.custom-logo-link img {
      width: auto;
	}
	.custom-logo-link {
		margin-right: 40px;
	}
}