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

@Author: CodeoStudio
@URL:    http://codeostudio.hr/

[Table of contents]

1. Wrapper
2. Header
    2.1 Secondary nav
    2.2 Side menu button
3. Header hero
4. Blog categories
    4.1 Module 2
    4.2 Module 6
5. Post header hero
6. Shop (WooCommerce)

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

/*------------------------------------------------------------------
	1. Wrapper
-------------------------------------------------------------------*/
#cs-wrapper.boxed {
	width: 1040px
}
.cs-container {
	width: 970px
}
.cs-col {
    float: left
}

/*------------------------------------------------------------------
    2. Header
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
    2.1 Secondary nav
-------------------------------------------------------------------*/
nav.cs-secondary-nav ul {
    font-size: 0;
    list-style: none;
    padding: 0;
    margin: 0
}
nav.cs-secondary-nav > ul {
    position: relative;
}
nav.cs-secondary-nav > ul > li {
    display: inline-block;
    margin-right: 20px;
    font-size: 12px;
}
nav.cs-secondary-nav > ul > li > a {
    text-transform: uppercase;
    position: relative;
    padding: 8px 0;
    display: block;
}
.cs-header-default nav.cs-secondary-nav > ul > li > a {
    color: #000
}
.cs-header-black nav.cs-secondary-nav > ul > li > a {
    color: #fff
}
.cs-header-transparent nav.cs-secondary-nav > ul > li > a {
    color: #fff
}
nav.cs-secondary-nav > ul > li > a span:after {
    display: inline-block;
    vertical-align: middle;
    font-family: "FontAwesome";
    content: "\f107";
    padding-left: 5px;
    font-size: 10px;
    font-style: normal;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.cs-header-default nav.cs-secondary-nav > ul > li > a span:after {
    color: #999;
}
.cs-header-black nav.cs-secondary-nav > ul > li > a span:after {
    color: #999
}
.cs-header-transparent nav.cs-secondary-nav > ul > li > a span:after {
    color: #999
}
nav.cs-secondary-nav ul.sub-menu {
    font-size: 12px;
    line-height: 22px;
    display: none;
    list-style: none;
    margin: 0;
    position: absolute;
    z-index: 1;
    min-width: 140px;
    white-space: nowrap;
    padding: 15px 0
}
.cs-header-default nav.cs-secondary-nav ul.sub-menu {
    background-color: #fff;
    -webkit-box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.2);
    box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.2);
}
.cs-header-black nav.cs-secondary-nav ul.sub-menu {
    background-color: #444;
    -webkit-box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.2);
    box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.2);
}
.cs-header-transparent nav.cs-secondary-nav ul.sub-menu {
    background-color: #fff;
    -webkit-box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.2);
    box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.2);
}
nav.cs-secondary-nav ul.sub-menu li {
    position: relative;
}
nav.cs-secondary-nav ul.sub-menu li a span:after {
    position: absolute;
    right: 15px;
    top: 0;
    display: inline-block;
    font-family: "FontAwesome";
    content: "\f105";
    font-size: 10px;
    font-style: normal;
}
.cs-header-default nav.cs-secondary-nav ul.sub-menu li a span:after {
    color: #999;
}
.cs-header-black nav.cs-secondary-nav ul.sub-menu li a span:after {
    color: #999;
}
.cs-header-transparent nav.cs-secondary-nav ul.sub-menu li a span:after {
    color: #999;
}
nav.cs-secondary-nav ul.sub-menu li a {
    display: block;
    padding: 0 20px
}
.cs-header-default nav.cs-secondary-nav ul.sub-menu li a {
    color: #000
}
.cs-header-black nav.cs-secondary-nav ul.sub-menu li a {
    color: #fff
}
.cs-header-black nav.cs-secondary-nav ul.sub-menu li a:hover {
    color: #999
}
.cs-header-transparent nav.cs-secondary-nav ul.sub-menu li a {
    color: #000
}
nav.cs-secondary-nav li:hover > ul.sub-menu {
    display: block
}
nav.cs-secondary-nav ul.sub-menu ul.sub-menu {
    left: 100%;
    top: -15px
}

/*------------------------------------------------------------------
    2.2 Side menu button
-------------------------------------------------------------------*/
.cs-toggle-nav {
    display: none;
}

/*------------------------------------------------------------------
    3. Header hero
-------------------------------------------------------------------*/
.cs-header-hero .swiper-container {
    height: 700px
}
.cs-header-hero .swiper-caption {
    max-width: 970px;
}
.cs-header-hero .swiper-caption h2 {
    font-size: 34px;
    line-height: 50px
}

/*------------------------------------------------------------------
    4. Blog categories
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
    4.1 Module 2
-------------------------------------------------------------------*/
.cs-main-content:not(.cs-sidebar-on-the-left):not(.cs-sidebar-on-the-right) .cs-col-3-of-12 .cs-module-2 .cs-post-header h3 {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 0
}

/*------------------------------------------------------------------
    4.2 Module 6
-------------------------------------------------------------------*/
.cs-module-6 .cs-post {
    width: 40%
}
.cs-module-6 .cs-post-lists ul li .cs-post-media {
    width: 90px
}

/*------------------------------------------------------------------
    5. Post header hero
-------------------------------------------------------------------*/
.cs-post-hero-media {
    height: 700px
}
.cs-post-hero-media .cs-post-hero-caption {
    max-width: 970px;
}
.cs-post-hero-media .cs-post-hero-caption h1 {
    font-size: 34px;
    line-height: 50px
}

/*------------------------------------------------------------------
    6. Shop (WooCommerce)
-------------------------------------------------------------------*/
ul.products {
    margin-left: -15px;
    margin-right: -15px
}
ul.products li.product {
    width: 33.33333333%;
    padding-left: 15px;
    padding-right: 15px
}