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

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

[Table of contents]

1. Wrapper
2. Header
    2.1 Secondary nav
    2.2 Side menu button
    2.3 Site brand
    2.4 Social icons
    2.5 Search form
    2.6 Primary nav
3. Header sliders
    3.1 Header hero
    3.2 Header grid
    3.3 Header slider
4. Sidebar
    4.1 Widget - most viewed
5. Blog categories
    5.1 Module 1
    5.2 Module 2
    5.3 Module 3
    5.4 Module 4
    5.5 Module 5
    5.6 Module 6
    5.7 Module 7
    5.8 Module 8
6. Post header hero
7. Shop (WooCommerce)

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

/*------------------------------------------------------------------
	1. Wrapper
-------------------------------------------------------------------*/
#cs-wrapper.boxed {
	width: 800px
}
.cs-container {
	width: 740px
}
.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;
}

/*------------------------------------------------------------------
    2.3 Site brand
-------------------------------------------------------------------*/
.cs-site-brand {
    padding: 25px 30px;
    padding-left: 0
}
.cs-site-brand img {
    max-height: 30px
}
.center .cs-site-brand img {
    max-height: 50px;
}

/*------------------------------------------------------------------
    2.4 Social icons
-------------------------------------------------------------------*/
.cs-social-icons {
    padding: 25px 30px
}
.cs-social-icons ul li {
    display: inline-block;
    font-size: 16px
}
.cs-social-icons ul li a {
    width: 25px
}

/*------------------------------------------------------------------
    2.5 Search form
-------------------------------------------------------------------*/
.cs-search-form {
    padding: 25px 0 25px 30px
}

/*------------------------------------------------------------------
    2.6 Search form
-------------------------------------------------------------------*/
.cs-primary-nav > nav > ul > li {
    margin-right: 10px;
    font-size: 12px
}
.cs-primary-nav > nav > ul > li > a {
    text-transform: uppercase;
    position: relative;
    font-weight: 700;
    line-height: 58px;
    display: block;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
}
.cs-primary-nav nav ul.sub-menu {
    font-size: 12px
}
.cs-primary-nav nav ul.cs-mega-menu {
    width: 740px;
}

/*------------------------------------------------------------------
    3. Header sliders
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
    3.1 Header hero
-------------------------------------------------------------------*/
.cs-header-hero .swiper-container {
    height: 600px
}
.cs-header-hero .swiper-caption {
    max-width: 740px;
}
.cs-header-hero .swiper-caption h2 {
    font-size: 28px;
    line-height: 44px
}

/*------------------------------------------------------------------
    3.2 Header grid
-------------------------------------------------------------------*/
.cs-header-grid .cs-grid-item .cs-post-header h3 {
    font-size: 12px;
    line-height: 20px
}
.cs-header-grid .cs-grid-20 {
    width: 27%
}
.cs-header-grid .cs-grid-20 .cs-grid-item {
    height: 200px
}
.cs-header-grid .cs-grid-40 {
    width: 46%
}
.cs-header-grid .cs-grid-40 .cs-grid-item {
    height: 401px
}
.cs-header-grid .cs-grid-40 .cs-grid-item .cs-post-header h3 {
    font-size: 14px;
    line-height: 22px
}

/*------------------------------------------------------------------
    3.3 Header slider
-------------------------------------------------------------------*/
.cs-header-slider .cs-post-header {
    padding: 30px 30px 0 30px
}
.cs-header-slider .cs-post-header h3 {
    font-size: 24px;
    line-height: 32px
}

/*------------------------------------------------------------------
    4. Sidebar
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
    4.1 Widget - most viewed
-------------------------------------------------------------------*/
.cs-widget-most-viewed ul li .cs-post-number h6 {
    font-size: 22px
}
.cs-widget-most-viewed ul li .cs-post-number {
    width: auto;
    margin-right: 10px
}
.cs-widget-most-viewed ul li .cs-post-header {
    overflow: visible
}

/*------------------------------------------------------------------
    5. Blog categories
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
    5.1 Module 1
-------------------------------------------------------------------*/
.cs-module-1 .cs-post-media {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 30px
}
.cs-module-1 .cs-post-wrapper {
    overflow: visible;
}

/*------------------------------------------------------------------
    5.2 Module 2
-------------------------------------------------------------------*/
.cs-main-content.cs-sidebar-on-the-left .cs-col-6-of-12 .cs-module-2 .cs-post-header h3,
.cs-main-content.cs-sidebar-on-the-right .cs-col-6-of-12 .cs-module-2 .cs-post-header h3 {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 0
}
.cs-main-content.cs-sidebar-on-the-left .cs-col-4-of-12 .cs-module-2 .cs-post-header h3,
.cs-main-content.cs-sidebar-on-the-right .cs-col-4-of-12 .cs-module-2 .cs-post-header h3 {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0
}
.cs-main-content:not(.cs-sidebar-on-the-left):not(.cs-sidebar-on-the-right) .cs-col-4-of-12 .cs-module-2 .cs-post-header h3 {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 0
}
.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: 14px;
    line-height: 20px;
    margin-bottom: 0
}

/*------------------------------------------------------------------
    5.3 Module 3
-------------------------------------------------------------------*/
.cs-main-content.cs-sidebar-on-the-left .cs-module-3 .cs-post-header h3,
.cs-main-content.cs-sidebar-on-the-right .cs-module-3 .cs-post-header h3 {
    font-size: 20px;
    line-height: 28px
}
.cs-main-content.cs-sidebar-on-the-left .cs-module-3 .cs-post-media,
.cs-main-content.cs-sidebar-on-the-right .cs-module-3 .cs-post-media {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 30px
}
.cs-main-content.cs-sidebar-on-the-left .cs-module-3 .cs-post-lists,
.cs-main-content.cs-sidebar-on-the-right .cs-module-3 .cs-post-lists {
    overflow: visible;
}

/*------------------------------------------------------------------
    5.4 Module 4
-------------------------------------------------------------------*/
.cs-main-content.cs-sidebar-on-the-left .cs-col-6-of-12 .cs-module-4 .cs-post-header h3,
.cs-main-content.cs-sidebar-on-the-right .cs-col-6-of-12 .cs-module-4 .cs-post-header h3 {
    font-size: 14px;
    line-height: 22px
}
.cs-main-content:not(.cs-sidebar-on-the-left):not(.cs-sidebar-on-the-right) .cs-col-4-of-12 .cs-module-4 .cs-post-header h3 {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 0
}
.cs-module-4 .cs-post-header {
    bottom: 50px;
    padding: 0 20px
}

/*------------------------------------------------------------------
    5.5 Module 5
-------------------------------------------------------------------*/
.cs-module-5 .cs-post {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 30px
}
.cs-module-5 .cs-post-lists {
    overflow: visible;
}

/*------------------------------------------------------------------
    5.6 Module 6
-------------------------------------------------------------------*/
.cs-module-6 .cs-post {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 30px
}
.cs-module-6 .cs-post-lists {
    overflow: visible;
}

/*------------------------------------------------------------------
    5.7 Module 7
-------------------------------------------------------------------*/
.cs-module-7 .cs-post-media {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 30px
}
.cs-module-7 .cs-post-wrapper {
    overflow: visible;
}

/*------------------------------------------------------------------
    5.8 Module 8
-------------------------------------------------------------------*/
.cs-main-content.cs-sidebar-on-the-left .cs-col-6-of-12 .cs-module-8 .cs-post-header h3,
.cs-main-content.cs-sidebar-on-the-right .cs-col-6-of-12 .cs-module-8 .cs-post-header h3 {
    font-size: 14px;
    line-height: 22px
}

/*------------------------------------------------------------------
    6. Post header hero
-------------------------------------------------------------------*/
.cs-post-hero-media {
    height: 600px
}
.cs-post-hero-media .cs-post-hero-caption {
    max-width: 740px;
}
.cs-post-hero-media .cs-post-hero-caption h1 {
    font-size: 28px;
    line-height: 44px
}

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