/* ===================================================================================

Theme Name: Metropolis - Clean Multipurpose Theme
Theme URI: http://pixel-industry.com/wordpress/metropolis
Description: Metropolis is simple and clean Wordpress theme with subtle effects, perfect for professional business website. 
Author: pixel-industry
Author URI: http://pixel-industry.com
Version: 1.3
License: Dual-licensed.  PHP under GNU General Public License, JS and CSS under ThemeForest License Terms
License URI: http://themeforest.net/licenses/regular_extended
Tags: white, four-columns, fixed-width, custom-menu, featured-images, post-formats, theme-options, threaded-comments, translation-ready

We encourage you to create Child theme for any modifications you will want to change.

Why use Child theme?

Because of future updates we may provide for this theme that will overwrite your
modifications are ruin all you work.

If you are not familiar with Child Themes, you can read about it here:
http://codex.wordpress.org/Child_Themes
http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */

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

       CSS CONTENTS
        1. Typography
        2. Elements
            2.1. Entry Note
            2.2. Note
            2.3. Arrow List
            2.4. Section Title
            2.5. Blockquote
            2.6. Buttons
            2.7. Tabs
            2.8. Tabs Vertical
            2.9. Accordion
            2.10. Dropcaps
            2.11. Information Boxes
            2.12. Image sliders (for sliders on regular pages)
        3. Header Styles
        4. Content and Page Wrappers
        5. About Us
        6. Services
        7. FAQ Page
        8. Pricing Tables
        9. Portfolio
        10. Blog
        11. Contact
        12. Widgets
        13. Footer
 ----------------------------------------------------------------------------- */

/* =============================================================================
    1. TYPOGRAPHY
============================================================================= */

/* Read more button
----------------------------------------------------------------------------- */
.read-more-btn{
    background: #f6f6f6;
    float: right;
    cursor: pointer;
    margin-top: 12px;
}

.read-more-btn a{
    float: left;
    padding: 4px 8px 3px;
    font-size: 11px;
    line-height: 11px;
    display: block;
    height: 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}

.read-more-btn .plus{
    background: #dfdfdf;
    display: table-cell;
    width: 18px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    float: left;

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.read-more-btn:hover .plus,
.read-more-btn:hover a{
    color: #fff !important;
}

img.float-left{
    margin-right: 20px;
    float: left;
    margin-top: 5px;
}

img.float-right{
    float: right;
    margin-left: 20px;
    margin-top: 5px;
}

.text-dark{
    color: #333;
}

.text-big{
    font-size: 13px;
}

.social-links li a{
    font-size: 16px;
    color: #444;

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

img + p,
p + img{
    display: block;
    margin-top: 14px;
}

p + blockquote, 
blockquote + p{
    display: block;
    margin-top: 14px;
    float: left;
}

.divider{
    border-bottom: 1px solid #e8e8e8;
    margin: 20px 0;
    padding: 0;
}

/* ============================================================================
    2. ELEMENTS
============================================================================ */
/* 2.1. ENTRY NOTE 
----------------------------------------------------------------------------- */
.entry-note{
    width: 100%;
    float: left;
}

.entry-note h1{
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
    font-size: 22px;
    font-family: Arial, sans-serif;
}

.entry-note p{
    font-size: 13px;
    line-height: 22px;
    width: 100%;
    padding: 0 90px;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

    text-align: center;
}

/* 2.2. NOTE 
----------------------------------------------------------------------------- */
.note-container{
    float: left;
    width: 100%;
    padding: 3px;
    border: 1px solid #e6e6e6;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.note-container .note-content{
    background: #fcfcfc;
    border: 1px solid #e6e6e6;
    padding: 20px;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}

.note-container .note-content h1, 
.note-container .note-content h2, 
.note-container .note-content h3, 
.note-container .note-content h4, 
.note-container .note-content h5,
.note-container .note-content h6{
    margin: 0;
    margin-bottom: 2px;
    display: block;
    width: 100%;
}

.note-container .note-content span{
    width: 100%;
}

/* NOTE FOR ALL COLUMNS */
.grid_12 .note-container .note-content .note{
    max-width: 780px;
    float: left;
}

.grid_12 .note-container .note-content .note-btn{
    max-width: 130px;
    position: absolute;
    right: 20px;
    display: block;
    margin-top: -20px;
    top: 50%;
}

/* 2.3. ARROW LIST
----------------------------------------------------------------------------- */
.arrow-list{
    float: left;
}
.arrow-list li{
    min-height: 15px;
    padding-left: 25px;
    margin-bottom: 5px;
}

/* 3.8. Drop Caps
----------------------------------------------------------------------------- */
.dropcap1{
    color: #666666;
    float: left;
    margin-right: 10px;
    font: 67px 'Droid Sans',sans-serif;
    line-height: 59px;
}

.dropcap2, .dropcap3{
    color: #fff;
    background: #6f6f6f;
    float: left;
    margin-right: 10px;
    font: bold 35px 'Droid Sans',sans-serif;
    line-height: 35px;
    padding: 8px;
    position: relative;
    top: 3px;
}

.dropcap3{
    width: 30px;
    height: 30px;
    border-radius: 30px;
    font: bold 32px 'Droid Sans',sans-serif;
    line-height: 30px;
    padding: 11px;
    text-align: center;
}

/* 3.8. Text highlight
----------------------------------------------------------------------------- */
.highlight-dark{
    background: #707070;
    color: #fff;
}

.highlight-style {
    background: #fff;
    color: #fff;
}

.highlight-light {
    background: #ececec;
}


/* 2.4. SECTION TITLE
----------------------------------------------------------------------------- */
.section-title{
    width: 100%;
    background: url('img/divider.png') repeat-x 0 center;
    float: left;
    margin-bottom: 20px;
}

.section-title.center{
    margin-bottom: 30px;
}

.section-title.center .title-container{
    background: #fff;
    display: table;
    margin: 0 auto;  
    position: relative;
}

.section-title.center .title-container:after{
    background: url('img/sb.png') no-repeat;
    background-size: 10px;
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    top: 50%;
    right: 0;
    margin-top: -5px;
}

.section-title.center .title-container:before{
    background: url('img/sb.png') no-repeat;
    background-size: 10px;
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    top: 50%;
    left: 0;
    margin-top: -5px;
}

.section-title.center .title-container .title{
    padding: 0 30px;
    text-align: center;
}

.section-title.center h1,
.section-title.center h2, 
.section-title.center h3, 
.section-title.center h4, 
.section-title.center h5, 
.section-title.center h6{
    margin-bottom: 3px;
    text-align: center;
}

.section-title.center span{
    text-align: center;
}

.section-title.left h1,
.section-title.left h2,
.section-title.left h3,
.section-title.left h4,
.section-title.left h5,
.section-title.left h6{
    margin-bottom: 0;
    background: #fff;
    padding-right: 30px;
    position: relative;
    display: inline-block;
}

.section-title.left h1:after,
.section-title.left h2:after,
.section-title.left h3:after,
.section-title.left h4:after,
.section-title.left h5:after,
.section-title.left h6:after{
    background: url('img/sb.png') no-repeat;
    background-size: 10px;
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    top: 50%;
    right: 0;
    margin-top: -5px;
}

/* 2.5. BLOCKQUOTE
----------------------------------------------------------------------------- */
blockquote{
    background: #f6f6f6;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;

    font: 14px 'Open Sans', Arial, sans-serif;
    line-height: 22px;
    font-style: italic;
    font-weight: 300;

    float: left;
}

cite{
    font-size: 12px;
    padding-top: 10px;
    display: block;
    width: 100%;
    font-weight: 400;
}

blockquote.style2{
    background: #fff;
    padding: 20px 0 20px 20px;
}


/* 2.6. BUTTONS
----------------------------------------------------------------------------- */
.btn-group{
    float: left;
    width: 100%;
}

.btn-group .btn-medium,
.btn-group .btn-big{
    float: left;
    margin-right: 10px;
}

.btn-medium,
.btn-big{
    border: 0px solid;

    border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -webkit-border-radius: 3px;

    text-transform: none;
    color: #fff;
    cursor: pointer;

    float: left;

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.btn-medium{
    padding: 7px 15px;
    font: 11px 'Open Sans', Arial, sans-serif;
}

.btn-big{
    padding: 10px 17px;
    font: 13px 'Open Sans', Arial, sans-serif;
}


/* BLACK BUTTONS
----------------------------------------------------------------------------- */
.btn-medium.black,  
.btn-big.black{
    background: rgb(85,85,85); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(85,85,85,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(85,85,85,1)), color-stop(100%,rgba(68,68,68,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(85,85,85,1) 0%,rgba(68,68,68,1) 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom, rgba(85,85,85,1) 0%,rgba(68,68,68,1) 100%); /* W3C */

    border: 1px solid #333;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
}

.btn-medium.black:hover,  
.btn-big.black:hover{
    background: rgb(68,68,68); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(68,68,68,1) 0%, rgba(85,85,85,1) 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(68,68,68,1)), color-stop(99%,rgba(85,85,85,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(68,68,68,1) 0%,rgba(85,85,85,1) 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(68,68,68,1) 0%,rgba(85,85,85,1) 99%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  rgba(68,68,68,1) 0%,rgba(85,85,85,1) 99%); /* W3C */
}

.btn-medium.black span, 
.btn-big.black span{
    color: #fff;
    font-weight: 500;
}


/* WHITE BUTTONS
----------------------------------------------------------------------------- */
.btn-medium.white, 
.btn-big.white{
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(246,246,246,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%); /* W3C */

    border: 1px solid #ddd;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;

    color: #fff;
}

.btn-medium.white:hover, 
.btn-big.white:hover{
    background: rgb(246,246,246); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(246,246,246,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,246,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(246,246,246,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(246,246,246,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  rgba(246,246,246,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
}

.btn-medium.white span, 
.btn-big.white span{
    color: #444;
    font-weight: 500;
}

/* WHITE BUTTONS
----------------------------------------------------------------------------- */
.btn-medium.white, 
.btn-big.white{
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(246,246,246,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%); /* W3C */

    border: 1px solid #ddd;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;

    color: #fff;
}

.btn-medium.white:hover, 
.btn-big.white:hover{
    background: rgb(246,246,246); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(246,246,246,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,246,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(246,246,246,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(246,246,246,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  rgba(246,246,246,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
}

/* ORANGE BUTTONS
----------------------------------------------------------------------------- */
.btn-medium.orange, 
.btn-big.orange{
    background: #f97965; /* Old browsers */
    background: -moz-linear-gradient(top,  #f97965 0%, #fb6148 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f97965), color-stop(100%,#fb6148)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f97965 0%,#fb6148 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f97965 0%,#fb6148 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #f97965 0%,#fb6148 100%); /* W3C */


    border: 1px solid #cf5541;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;

    color: #fff;
}

.btn-medium.orange:hover, 
.btn-big.orange:hover{
    background: #fb6148; /* Old browsers */
    background: -moz-linear-gradient(top,  #fb6148 0%, #f97965 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fb6148), color-stop(100%,#f97965)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #fb6148 0%,#f97965 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #fb6148 0%,#f97965 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #fb6148 0%,#f97965 100%); /* W3C */
}

/* GREEN BUTTONS
----------------------------------------------------------------------------- */
.btn-medium.green, 
.btn-big.green{
    background: #c7e487; /* Old browsers */
    background: -moz-linear-gradient(top,  #c7e487 0%, #b9d57c 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7e487), color-stop(100%,#b9d57c)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #c7e487 0%,#b9d57c 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #c7e487 0%,#b9d57c 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #c7e487 0%,#b9d57c 100%); /* W3C */

    border: 1px solid #a6c06c;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;

    color: #697a44;
}

.btn-medium.green:hover, 
.btn-big.green:hover{
    background: #b9d57c; /* Old browsers */
    background: -moz-linear-gradient(top,  #b9d57c 0%, #c7e487 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b9d57c), color-stop(100%,#c7e487)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b9d57c 0%,#c7e487 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b9d57c 0%,#c7e487 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #b9d57c 0%,#c7e487 100%); /* W3C */

}

.btn-medium.green span, .btn-medium.green:hover span, 
.btn-big.green span, .btn-medium.green:hover span{
    color: #697a44;
}

/* BLUE BUTTON
----------------------------------------------------------------------------- */
.btn-medium.blue, 
.btn-big.blue{
    background: #8fd1f3; /* Old browsers */
    background: -moz-linear-gradient(top,  #8fd1f3 0%, #7abcde 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8fd1f3), color-stop(100%,#7abcde)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #8fd1f3 0%,#7abcde 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #8fd1f3 0%,#7abcde 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #8fd1f3 0%,#7abcde 100%); /* W3C */

    border: 1px solid #70a7c3;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;

    color: #396a83;
}

.btn-medium.blue:hover, 
.btn-big.blue:hover{
    background: #7abcde; /* Old browsers */
    background: -moz-linear-gradient(top,  #7abcde 0%, #8fd1f3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcde), color-stop(100%,#8fd1f3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #7abcde 0%,#8fd1f3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #7abcde 0%,#8fd1f3 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #7abcde 0%,#8fd1f3 100%); /* W3C */
}

.btn-medium.blue span, .btn-medium.blue:hover span, 
.btn-big.blue span, .btn-medium.blue:hover span{
    color: #396a83;
}

/* YELLOW BUTTON
----------------------------------------------------------------------------- */
.btn-medium.yellow, 
.btn-big.yellow{
    background: #f7d58f; /* Old browsers */
    background: -moz-linear-gradient(top,  #f7d58f 0%, #f8c866 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7d58f), color-stop(100%,#f8c866)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f7d58f 0%,#f8c866 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f7d58f 0%,#f8c866 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #f7d58f 0%,#f8c866 100%); /* W3C */

    border: 1px solid #d6aa51;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;

    color: #9a7221;
}

.btn-medium.yellow:hover, 
.btn-big.yellow:hover{
    background: #f8c866; /* Old browsers */
    background: -moz-linear-gradient(top,  #f8c866 0%, #f7d58f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8c866), color-stop(100%,#f7d58f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f8c866 0%,#f7d58f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f8c866 0%,#f7d58f 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #f8c866 0%,#f7d58f 100%); /* W3C */
}

.btn-medium.yellow span, .btn-medium.yellow:hover span, 
.btn-big.yellow span, .btn-medium.yellow:hover span{
    color: #9a7221;
}

/* RED BUTTON
----------------------------------------------------------------------------- */
.btn-medium.red, 
.btn-big.red{
    background: #e83130; /* Old browsers */
    background: -moz-linear-gradient(top,  #e83130 0%, #d52b2a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e83130), color-stop(100%,#d52b2a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e83130 0%,#d52b2a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e83130 0%,#d52b2a 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #e83130 0%,#d52b2a 100%); /* W3C */

    border: 1px solid #a71818;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;

    color: #fff;
}

.btn-medium.red:hover, 
.btn-big.red:hover{
    background: #d52b2a; /* Old browsers */
    background: -moz-linear-gradient(top,  #d52b2a 0%, #e83130 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d52b2a), color-stop(100%,#e83130)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d52b2a 0%,#e83130 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d52b2a 0%,#e83130 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom,  #d52b2a 0%,#e83130 100%); /* W3C */
}

.btn-medium.yellow span, .btn-medium.yellow:hover span, 
.btn-big.yellow span, .btn-medium.yellow:hover span{
    color: #9a7221;
}

/* RED AND ORANGE BUTTONS SPANS
----------------------------------------------------------------------------- */ 
.btn-medium.red span, .btn-medium.red:hover span, 
.btn-big.red span, .btn-big.red:hover span,
.btn-medium.orange span, .btn-medium.orange:hover span, 
.btn-big.orange span, .btn-big.orange:hover span{
    color: #fff;
}

/* Only for presentation purposes */
.grid_12.buttons .grid_2{
    margin-bottom: 20px;
}

/* 2.7. TABS 
----------------------------------------------------------------------------- */
.tabs{
    width: 100%;
    overflow: hidden;
    float: left;
    margin: 0 !important;
}

.tabs i{
    padding-right: 5px; 
    font-size: 13px;
}

.tabs li{
    background: #f6f6f6;
    float: left;
    border-top: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    position: relative;
    padding: 0;
    line-height: 32px;
    margin: 0 !important;
}

.tabs li:first-child{
    border-left: 1px solid #eee;
}

.tabs li a{    
    color: #333;    
    padding: 0px 16px;
    font: 12px 'Open Sans', Arial, sans-serif;
    line-height: 33px;
    padding-top: 2px;
}

.tabs li.active{
    background: #fff;
    border-bottom: 1px solid #fff;
}

.tab-content-wrap{
    border: 1px solid #eee;    
    margin-top: -1px;
    overflow: hidden;
    width: 100%;
    float: left;
}

.tab-content{
    padding: 15px;
    background: #fff;
}

/* 2.8. TABS VERTICAL 
----------------------------------------------------------------------------- */
.tabs.vertical{
    overflow: hidden;
    float: left;
}

.tabs.vertical li{
    background: #f6f6f6;
    float: left;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
    border-top: none;
    overflow: hidden;
    position: relative;
    padding: 0;
    line-height: 42px;
    width: 100%;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.tabs.vertical li:first-child{
    border-top: 1px solid #eee !important;
}

.tabs.vertical li a{    
    color: #333;    
    padding: 15px;
    font: 12px 'Open Sans', Arial, sans-serif;
    float: left;
    width: 100%;
    box-sizing: border-box;
}

.tabs.vertical li a i{
    font-size: 16px;
    padding-right: 10px;
}

.tabs.vertical li.active{
    border-bottom: 1px solid #eee;
    border-right: none;
    border-top: none;
    background: #fff;
}

.tab-content-wrap.vertical{  
    margin-top: 0;
    overflow: hidden;
    float: left;
    border: none;
}

.tab-content-wrap.vertical .tab-content{
    padding: 0;
    background: #fff;
}


/* 2.9. ACCORDION
------------------------------------------------------------------------------*/
.accordion{
    position: relative;
    float: left;
}

.accordion .title{ 
    float: left; 
    margin-bottom: 10px !important;
    width: 100%;
    background: #f6f6f6;
    padding: 10px;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.accordion .title a{
    background: url('img/acc-closed.png') no-repeat 0 center;
    padding-left: 36px;
    padding-top: 3px;
    padding-bottom: 3px;
    color: #333;
    cursor: pointer;
    display: block;    
    font: 13px 'Open Sans', Arial, sans-serif;    
    display: block;
}

.accordion .title:last-child{
    margin-bottom: 0 !important;

}
.accordion .content{
    display:none;
    float: left;
    overflow: hidden;
    margin-bottom: 20px;
}

/* 2.10. DROPCAPS 
------------------------------------------------------------------------------*/
span.dropcap-color{
    color: #fff;
    float: left;
    margin-right: 10px;
    font: 18px 'Open Sans', Arial,sans-serif;
    line-height: 18px;
    padding: 8px 10px;
    position: relative;
    top: 3px;
}

span.dropcap{
    color: #fff;
    background: #555;
    float: left;
    margin-right: 10px;
    font: 18px 'Open Sans', Arial,sans-serif;
    line-height: 18px;
    padding: 8px 10px;
    position: relative;
    top: 3px;
}

/* 2.11. INFORMATION BOXES - INFO BOX
----------------------------------------------------------------------------- */
.infobox{
    background: #e0f2ff;
    border: 1px solid #c1def2;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.infobox p{
    background: url('img/info-box.png') no-repeat 0 center;
    margin: 10px !important;
    padding-left: 25px;
    color: #61adb0;
    text-shadow: 0 1px 0 #fff;
}


/* Infromation boxes - WARNING BOX
----------------------------------------------------------------------------- */
.warning-box{
    background: #f8f6bc;
    border: 1px solid #e7e48b;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.warning-box p{
    background: url('img/warning-box.png') no-repeat 0 center;
    margin: 10px;
    padding-left: 27px;
    color: #989426;
    text-shadow: 0 1px 0 #fff;
}

/* Infromation boxes - SUCCES BOX 
----------------------------------------------------------------------------- */
.success-box{
    background: #ebfdd7;
    border: 1px solid #cef4a4;
    border-radius: 3px;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.success-box p{
    background: url('img/success-box.png') no-repeat 0 center;
    margin: 10px;
    padding-left: 25px;
    color: #7eb244;
    text-shadow: 0 1px 0 #fff;
}

/* Infromation boxes - ERROR BOX
----------------------------------------------------------------------------- */
.error-box{
    background: #fadddd;
    border: 1px solid #fcc1c1;
    border-radius: 3px;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.error-box p{
    background: url('img/error-box.png') no-repeat 0 center;
    margin: 10px;
    padding-left: 25px;
    color: #d86d6d;
    text-shadow: 0 1px 0 #fff;
}


/* 2.12. IMAGE SLIDERS (FOR SLIDERS ON REGULAR  PAGES)
---------------------------------------------------------------------------- */
.slider-wrapper{
    overflow: hidden;    
}

.image-slider .nivo-directionNav a{
    top: 100%;
    margin-top: -35px;
}

.image-slider .nivo-prevNav{
    left: 50%;
    margin-left: -31px;
}

.image-slider .nivo-nextNav{
    right: 50%;
    margin-right: -31px;
}

.grid_7 .image-slider .nivo-caption h3, 
.grid_7 .image-slider .nivo-caption span{
    max-width: 460px;
}

.nivoSlider.image-slider{
    margin-bottom: 17px;    
}

/* ============================================================================
    HOME PAGE LATEST BLOG POSTS WIDGET
============================================================================= */
.latest-blog-posts{
    width: 100%;
    float: left;
}

.latest-blog-posts .post-info{
    float: left;
    width: 140px;
    margin-right: 20px;
    position: relative;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.latest-blog-posts .post-info img{
    border: 2px solid #ddd;
}

.latest-blog-posts .post-info .comments{
    width: auto;
    display: inline;
    background: #333;
    position: absolute;
    bottom: 2px;
    left: 2px;
    padding: 2px 5px;

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.latest-blog-posts .title-date a{
    float: left;
    width: 100%;
}

.latest-blog-posts .title-date a h6{
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.latest-blog-posts .post-info .comments a, 
.latest-blog-posts .post-info .comments a:hover{
    color: #fff !important;
    font-size: 11px;
}

.latest-blog-posts .post-body{
    float: left;
    width: 300px;
}

.latest-blog-posts .post-body .post-meta{
    width: 100%;
    margin-bottom: 10px;
    float: left;
}

.latest-blog-posts .post-body .post-meta .category{
    width: 40px;
    height: 40px;
    float: left;
    background: #333;
    cursor: pointer;
    margin-right: 15px;    

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.latest-blog-posts .post-body .post-meta .category i{
    color: #fff;
    font-size: 20px;
    width: 40px;
    height: 40px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.latest-blog-posts .post-body .post-meta .title-date{
    float: left;
    width: 245px;
}

.latest-blog-posts .post-body .post-meta .title-date h1, 
.latest-blog-posts .post-body .post-meta .title-date h2, 
.latest-blog-posts .post-body .post-meta .title-date h3, 
.latest-blog-posts .post-body .post-meta .title-date h4, 
.latest-blog-posts .post-body .post-meta .title-date h5, 
.latest-blog-posts .post-body .post-meta .title-date h6{
    margin-bottom: 3px;
    width: 100%;
}
.latest-blog-posts .post-body .post-meta .title-date span.date{
    text-transform: uppercase;
    width: 100%;
    display: block;
}


/* ============================================================================ 
    5. ABOUT US
============================================================================ */
/* Team members 
----------------------------------------------------------------------------- */
.team-info{
    width: 100%;
    margin-bottom: 15px;
    position: relative;
    float: left;
}

.team-info img{
    width: 100%;
}

.team-info .title-position{
    position: absolute;
    bottom: 10%;
    left: 15px;
    width: 85%;
}

.team-info .title-position .title{
    background: #fff;
    color: #333;
    padding: 5px;
    text-align: left;
    display: inline-block;
    float: left;

    max-width: 100%;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.team-info .title-position h6{
    margin-bottom: 0;
    width: auto; 
    word-wrap: break-word;
    text-transform: none;
}

.team-info .title-position .position{
    text-align: left;
    display: inline-block;
    padding: 5px;
    float: left;
    clear: both;
    max-width: 100%;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.team-info .title-position .position span{
    color: #fff;
    width: auto; 
    word-wrap: break-word;
}

.team-cv{
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.team-social-links{
    width: 100%;
    float: left;
    padding: 10px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.team-social-links li{
    float: none;
    margin-right: 20px;
    display: inline-block;
}

.team-social-links li a{
    color: #aaa;
    font-size: 16px;
}

.team-social-links li:last-child{
    margin-right: 0;
}

/* Skills
----------------------------------------------------------------------------- */
.skills-bar{
    width: 100%;
    position: relative;
    float: left;
}

.skills{
    padding-top: 20px;
    display: block;
}

.skills li em{
    position: relative;
    top: -23px;
    font: 11px Arial, sans-serif;
    font-style: normal;
}

.skills li{
    display: block;
    height: 15px;
    margin-bottom: 35px;

    background: rgb(246,246,246); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,246,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */
    background: linear-gradient(to bottom, rgba(246,246,246,1) 0%,rgba(238,238,238,1) 100%); /* W3C */

    border: 1px solid #ddd;

    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.expand{
    height: 13px;
    position: absolute;
    margin-top: -1px;

    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    -o-border-radius-topleft: 5px;
    -o-border-radius-bottomleft: 5px;
}

.skills .percentage-10      { width:10%;  -moz-animation:percentage-10 2s ease-out;       -webkit-animation:percentage-10 2s ease-out;}
.skills .percentage-20      { width:20%;  -moz-animation:percentage-20 2s ease-out;       -webkit-animation:percentage-20 2s ease-out;}
.skills .percentage-30      { width:30%;  -moz-animation:percentage-30 2s ease-out;       -webkit-animation:percentage-30 2s ease-out;}
.skills .percentage-40      { width:40%;  -moz-animation:percentage-40 2s ease-out;       -webkit-animation:percentage-40 2s ease-out;}
.skills .percentage-50      { width:50%;  -moz-animation:percentage-50 2s ease-out;       -webkit-animation:percentage-50 2s ease-out;}
.skills .percentage-60      { width:60%;  -moz-animation:percentage-60 2s ease-out;       -webkit-animation:percentage-60 2s ease-out;}
.skills .percentage-70      { width:70%;  -moz-animation:percentage-70 2s ease-out;       -webkit-animation:percentage-70 2s ease-out;}
.skills .percentage-80      { width:80%;  -moz-animation:percentage-80 2s ease-out;       -webkit-animation:percentage-80 2s ease-out;}
.skills .percentage-90      { width:90%;  -moz-animation:percentage-90 2s ease-out;       -webkit-animation:percentage-90 2s ease-out;}
.skills .percentage-100      { width:100%;  -moz-animation:percentage-100 2s ease-out;       -webkit-animation:percentage-100 2s ease-out;}

@-moz-keyframes percentage-10       { 0%  { width:0px;} 100%{ width:10%;}  }
@-moz-keyframes percentage-20        { 0%  { width:0px;} 100%{ width:20%;}  }
@-moz-keyframes percentage-30       { 0%  { width:0px;} 100%{ width:30%;}  }
@-moz-keyframes percentage-40  { 0%  { width:0px;} 100%{ width:40%;}  }
@-moz-keyframes percentage-50 { 0%  { width:0px;} 100%{ width:50%;} }
@-moz-keyframes percentage-60 { 0%  { width:0px;} 100%{ width:60%;} }
@-moz-keyframes percentage-70 { 0%  { width:0px;} 100%{ width:70%;} }
@-moz-keyframes percentage-80 { 0%  { width:0px;} 100%{ width:70%;} }
@-moz-keyframes percentage-90 { 0%  { width:0px;} 100%{ width:80%;} }
@-moz-keyframes percentage-100 { 0%  { width:0px;} 100%{ width:100%;} }

@-webkit-keyframes percentage-10       { 0%  { width:0px;} 100%{ width:10%;}  }
@-webkit-keyframes percentage-20        { 0%  { width:0px;} 100%{ width:20%;}  }
@-webkit-keyframes percentage-30       { 0%  { width:0px;} 100%{ width:30%;}  }
@-webkit-keyframes percentage-40  { 0%  { width:0px;} 100%{ width:40%;}  }
@-webkit-keyframes percentage-50 { 0%  { width:0px;} 100%{ width:50%;} }
@-webkit-keyframes percentage-60 { 0%  { width:0px;} 100%{ width:60%;} }
@-webkit-keyframes percentage-70 { 0%  { width:0px;} 100%{ width:70%;} }
@-webkit-keyframes percentage-80 { 0%  { width:0px;} 100%{ width:70%;} }
@-webkit-keyframes percentage-90 { 0%  { width:0px;} 100%{ width:80%;} }
@-webkit-keyframes percentage-100 { 0%  { width:0px;} 100%{ width:100%;} }


/* Client Carousel
----------------------------------------------------------------------------- */
.client-carousel .caroufredsel_wrapper{
    width: 940px !important;
    min-height: 107px !important;
}

.title-container.carousel:before, 
.title-container.carousel:after{
    background: none !important;
}

.carousel-nav-container{
    position: absolute;
    top: 50%;
    margin-top: -11px;
    width: 100%;
}
.carousel-nav{
    position: relative;
    width: 100%;
}

.carousel-nav li{
    float: left;
    width: 22px;
    height: 22px;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;

    z-index: 600;
}

.carousel-nav li a.next,
.carousel-nav li a.c_next{
    background-image: url('img/cr.png');
    width: 22px;
    height: 22px;
    display: block;

    position: absolute;
    right: -22px;
}

.carousel-nav li a.prev,
.carousel-nav li a.c_prev{
    background-image: url('img/cl.png');
    width: 22px;
    height: 22px;
    display: block;

    position: absolute;
    left: -22px;
}

.clients-carousel li{
    float: left;
    width: 186px !important;
    border: 1px solid #eee;
    display: block;
    min-height: 105px !important;
}

.clients-carousel li img{
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    opacity: 0.7;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.clients-carousel li img:hover{
    opacity: 1.0;
}

/* Social Feed
----------------------------------------------------------------------------- */

.social-feed li {
    padding: 0 !important;
    position: relative;
    border-bottom: 0;
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 5px;
    margin-bottom: 5px;
    opacity: 0.7;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.social-feed li:hover{
    opacity: 1;
}

.social-feed li a img {
    width: 40px;
    height: 40px;
}

/* Google Maps
----------------------------------------------------------------------------- */

#map_canvas {
    width: 100%;
    height: 300px;
    margin-bottom: 40px;
}

/* ============================================================================= 
    6. SERVICES
============================================================================= */

/* SERVICE BOX STYLE 1 - ICON ON LEFT, TITLE AND TEXT ON RIGHT
----------------------------------------------------------------------------- */
.service-box-1 .icon{
    float: left;
    width: 52px;
    height: 44px;
    margin-right: 20px;
}

.service-box-1 .icon i{
    font-size: 20px;
    line-height: 10px;
    width: 44px;
    height: 44px;
    margin: 0 auto;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.service-box-1 .content .title{
    margin-bottom: 10px;
    float: left;
    width: 100%;
}

.service-box-1 .content .description{
    float: left;
    width: 100%;
    margin-bottom: 14px;
}

.service-box-1 .content .title h1, 
.service-box-1 .content .title h2, 
.service-box-1 .content .title h3, 
.service-box-1 .content .title h4, 
.service-box-1 .content .title h5, 
.service-box-1 .content .title h6{
    margin-bottom: 2px;
    width: 100%;
    float: left;
}

.service-box-1 .content .title span{
    width: 100%;
    float: left;
}

/* SERVICES BOX-1 FOR ALL COLUMNS */
.grid_12 .service-box-1 .content{float: left;width: 868px;}
.grid_3 .service-box-1 .content{float: left;width: 148px;}
.grid_4 .service-box-1 .content{float: left;width: 228px;}
.grid_5 .service-box-1 .content{float: left;width: 308px;}
.grid_6 .service-box-1 .content{float: left;width: 388px;}
.grid_7 .service-box-1 .content{float: left;width: 468px;}
.grid_8 .service-box-1 .content{float: left;width: 548px;}
.grid_9 .service-box-1 .content{float: left;width: 628px;}

.service-box-2-container{
    width: 100%;
    float: left;
    cursor: pointer;
}
.service-box-2-container .icon{
    float: left;
    width: 60px;
    height: 71px;
    position: relative;
    top: 0;
    left: 50%;
    margin-left: -30px;
    background: url('img/service-bkg.png') no-repeat;
    z-index: 20;
}

.service-box-2-container .icon i{
    font-size: 24px;
    line-height: 10px;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.service-box-2-container .service-box-2{
    background: #f6f6f6;
    border: 1px solid #ddd;
    position: relative;
    top: -35px;
    z-index: 10;
    padding: 55px 20px 20px 20px;
    text-align: center;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    float: left;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.service-box-2-container .service-box-2 .title{
    float: left;
    margin-bottom: 15px;
    width: 100%;
}

.service-box-2-container .service-box-2 .title a{
    width: 100%;
    float: left;
}

.service-box-2-container .service-box-2 h1, 
.service-box-2-container .service-box-2 h2, 
.service-box-2-container .service-box-2 h3,
.service-box-2-container .service-box-2 h4, 
.service-box-2-container .service-box-2 h5, 
.service-box-2-container .service-box-2 h6{
    margin-bottom: 3px;
}


.service-box-2-container .service-box-2 .read-more-btn{
    float: none;
    margin: 12px auto 0;
    display: table;
    background: #e6e6e6;
}

.service-box-2-container .service-box-2 .read-more-btn span{
    background: #ddd;
}

.service-box-2-container .service-box-2:hover{
    background: #fff;
    border: 1px solid #eee;
}

/* ============================================================================= 
    7. FAQ PAGE
============================================================================= */
.accordion.faq .title a{
    background: url('img/faq-closed.png') no-repeat 0 center;
    font-size: 13px;
    color: #333;
    font-weight: 600;
}

/* =============================================================================
    8. PORTFOLIO
============================================================================ */
.portfolio{
    overflow: hidden;    
}

.portfolio-container{
    position: relative;
}

/* PORTTFOLIO HOVER EFFECT
----------------------------------------------------------------------------- */
.portfolio-hover{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    opacity: 0;
}

.portfolio-hover .mask{
    width: 100%;
    height: 100%;
    background: #444;     
    opacity: 0.6;
    position: absolute;
    top:0;
    left: 0;
}

.portfolio-hover ul{
    display: block;
}

.portfolio-hover li{
    float: left;
    background: #222;
    width: 36px;
    height: 36px;
    opacity: 1;
    top: 50%;
    margin-top: -18px;

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.portfolio-hover .portfolio-zoom{
    margin-right: 4px;
    position: absolute;
    left: -42px;
}

.portfolio-hover .portfolio-zoom a{
    text-indent: -9999px;
    display: block;
    width: 36px;
    height: 36px;
}

.portfolio-hover .portfolio-single a{
    text-indent: -9999px;
    display: block;
    width: 36px;
    height: 36px;
}

.portfolio:hover .portfolio-hover{
    display: none;
}

.portfolio-hover .portfolio-single{
    position: absolute;
    right: -42px;
}

.portfolio:hover .portfolio-single{
    right: 50%;
    margin-right: -45px;
}

.portfolio:hover .portfolio-zoom{
    left: 50%;
    margin-left: -45px;
}

/* PORTFOLIO STYLE 2 FOR ALL COLUMNS 
----------------------------------------------------------------------------- */
.grid_6.portfolio-style-2,
.grid_4.portfolio-style-2,
.grid_3.portfolio-style-2{
    margin-bottom: 20px;
}

.grid_6.portfolio-style-2:last-child,
.grid_4.portfolio-style-2:last-child,
.grid_3.portfolio-style-2:last-child{
    margin-bottom: 60px;
}

.portfolio-style-2 .portfolio{
    cursor: pointer;
}

.portfolio-style-2 .portfolio .portfolio-image{
    width: 100%;
    margin-right: 0;
    margin-bottom: 0;
    position: relative;
    float: left;
}

.portfolio figcaption{
    float: left;
    width: 100%;
    background: #f6f6f6;
    border-top: 3px solid #ddd;
    padding: 5px;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.portfolio figcaption a{
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-align: center;
    width: 100%;
    display: block;
}

.portfolio figcaption span{
    width: 100%;
    text-align: center;
    display: block;
    font-style: italic;
}


/* PORTFOLIO SINGLE PROJECT
----------------------------------------------------------------------------- */

.carousel-portfolio .caroufredsel_wrapper{
    width: 940px !important;
    min-height: 222px !important;
} 

.carousel-portfolio .carousel-li > li{
    width: 220px !important;
    margin-right: 20px;
    float: left;
    min-height: 222px !important;
}

.carousel-gallery .carousel-li > li{
    width: 233px !important;
    min-height: 181px;
    margin-right: 2px;
    float: left;
}

.carousel-gallery .carousel-li > li img{
    width: 233px;
    min-height: 181px;
}

.carousel-gallery .caroufredsel_wrapper{
    width: 940px !important;
}

.carousel-portfolio .carousel-pagination,
.carousel-gallery .carousel-pagination{
    margin: 30px auto 0;
    float: none;
}

.carousel-portfolio .carousel-pagination a {
    background: url('img/sb.png') no-repeat;
    width: 13px;
    height: 13px;
    margin: 0 5px 0 0;
    display: inline-block;
}

.carousel-portfolio .carousel-pagination a.selected {
    cursor: default;
}

/* ============================================================================
    10. CONTACT
============================================================================ */
.map_canvas{
    width: 100%;
    height: 470px;
}

/* ============================================================================ 
    11. WIDGETS
============================================================================ */

/* WIDGET PI_RECENT_POSTS
----------------------------------------------------------------------------- */
.pi_recent_posts li{
    float: left;
    width: 100%;
    margin-bottom: 20px;
    padding: 0;
    border: none;
}

.pi_recent_posts .meta{
    width: 40px;
    height: 40px;
    margin-right: 10px;
    float: left;
    background: #333;
    cursor: pointer;

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.pi_recent_posts .meta a{
    color: #fff !important;
    font-size: 20px !important;
    position: relative;
    display: table-cell;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
}

.pi_recent_posts .post .info, 
.pi_recent_posts .post .info a{
    font-size: 10px !important;
}

.pi_recent_posts .post a{
    color: #333;
}

.pi_recent_posts .meta a:hover{
    color: #fff !important;
}

.footer-widget-container .pi_recent_posts li{
    border: none;
}

.footer-widget-container .pi_recent_posts .meta{
    background: #303030;
}

/* NEWSLETTER WIDGET 
----------------------------------------------------------------------------- */
.aside_widgets .newsletter .email{
    background: #fff;
    border: 1px solid #ddd; 
}

.aside_widgets .newsletter .submit{
    background: #fff;
    border: 1px solid #ddd;
    color: #777;
}

.aside_widgets .newsletter .submit:hover{
    color: #fff;
}


.newsletter .email{
    background: #fff;
    border: 1px solid #ddd;

    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;

    width: 148px;
    height: 28px;
    padding: 0 10px;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    font-size: 11px;
}

.newsletter .submit{
    height: 28px;
    background: #fff;

    color: #777;
    font-size: 11px;
    position: relative;
    top: 0;
    padding: 0 15px;
    cursor: pointer;

    border: 1px solid #ddd;

    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.newsletter .submit:hover{
    background: #f6f6f6;

    border: 1px solid #ddd;

    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
}

.footer-widget-container .newsletter .email{
    background: #303030;
    border: 1px solid #222;
    color: #ccc;
}

.footer-widget-container .newsletter .submit{
    background: #222;
    border: 1px solid #000;
}

.footer-widget-container .newsletter .submit:hover{ 
    color: #fff;
}

/* CONTACT INFO WIDGET 
----------------------------------------------------------------------------- */
.widget .contact-info li{
    float: left;
    display: block;
    width: 100%;
    min-height: 24px;
    margin-bottom:10px;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}

.widget .contact-info li p{
    padding-top: 3px;
}

.widget .contact-info li.address{
    display: block;
    padding-left: 36px;   
}

.widget .contact-info li.address p{
    padding-top: 0 !important;
}

.widget .contact-info li.phone{
    display: block;
    padding-left: 36px;
}

.widget .contact-info li.mail{
    display: block;
    padding-left: 36px;
}

/* TESTIMONIAL WIDGET 
----------------------------------------------------------------------------- */
.carousel-testimonial li{
    border: none;
    background: none;
    padding: 0;
    float: left;
    margin-right: 10px;
}

.carousel-testimonial .caroufredsel_wrapper{
    width: 100%;
}

.carousel-testimonial{
    float: left;
    width: 100%;
}

.grid_12 .carousel-testimonial .caroufredsel_wrapper{width: 940px !important;}
.grid_12 .carousel-testimonial .carousel-li > li{width: 940px !important;}

.grid_3 .carousel-testimonial .caroufredsel_wrapper{width: 220px !important;}
.grid_3 .carousel-testimonial .carousel-li > li{width: 220px !important;}

.grid_4 .carousel-testimonial .caroufredsel_wrapper{width: 300px !important}
.grid_4 .carousel-testimonial .carousel-li > li{width: 300px !important; list-style: none;}
.grid_4.aside-right .carousel-testimonial .caroufredsel_wrapper, .grid_4.aside-left .carousel-testimonial .caroufredsel_wrapper{width: 280px !important;}
.grid_4.aside-right .carousel-testimonial .carousel-li > li, .grid_4.aside-left .carousel-testimonial .carousel-li > li{width: 280px !important;}

.grid_5 .carousel-testimonial .caroufredsel_wrapper{width: 380px !important;}
.grid_5 .carousel-testimonial .carousel-li > li{width: 380px !important;}

.grid_6 .carousel-testimonial .caroufredsel_wrapper{width: 460px !important;}
.grid_6 .carousel-testimonial .carousel-li > li{width: 460px !important;}

.grid_7 .carousel-testimonial .caroufredsel_wrapper{width: 540px !important;}
.grid_7 .carousel-testimonial .carousel-li > li{ width: 540px !important;}

.grid_8 .carousel-testimonial .caroufredsel_wrapper{width: 620px !important;}
.grid_8 .carousel-testimonial .carousel-li > li{width: 620px !important;}

.grid_9 .carousel-testimonial .caroufredsel_wrapper{width: 700px !important;}
.grid_9 .carousel-testimonial .carousel-li > li{width: 700px !important;}


.footer-widget-container .carousel-testimonial .content{
    background: #303030 ;
}

.carousel-testimonial .content{
    background: #f6f6f6;
    padding: 15px;
    width: 100%;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    position: relative;

    font-size: 12px;
    font-style: italic;
}

.carousel-testimonial .content:after{
    position: absolute;
    display: block;
    content: '';
    background: url('img/testimonial-arrow.png') no-repeat;
    width: 14px;
    height: 11px;
    bottom: -10px;
    left: 10px;
}

.footer-widget-container .carousel-testimonial .content:after{
    background: url('img/testimonial-arrow-footer.png') no-repeat;
}

.carousel-testimonial span.author{
    display: block;
    margin-left: 24px;
    padding-left: 24px;
    padding-top: 5px;
    margin-top: 5px;
    background: url('img/testimonial.png') no-repeat 0 center;
}

/* TESTIMONIAL ALTERNATIVE
----------------------------------------------------------------------------- */
.testimonials-alternative-nav{
    margin-bottom: 18px;
    float: left;
}

.testimonials-alternative-nav li{
    margin-right: 18px;
    float: left;
    position: relative;
    list-style: none;
}

.testimonials-alternative-nav li:last-child{
    margin: 0;
}

.testimonials-alternative-nav li img{
    border: 3px solid #ddd;
    width: 55px;
}


.testimonials-alternative-nav li a:after{
    position: absolute;
    content: ".";
    text-indent: -9999px;
    left: 50%;
    bottom: -18px;
    margin-left: -4px;
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    display: none;

}

.testimonials-alternative-nav li a.active:after{
    display: block;
}

.testimonials-alternative-content{
    float: left;
}

.testimonials-alternative-content .content{
    background: #fafafa;
    padding: 22px 11px;
    display: none;
}

.testimonials-alternative-content .content.active{
    display: block;
}

.testimonials-alternative-content .content .text,
.testimonials-alternative-content .content .author{
    font-style: italic;
    text-align: center;
}

.testimonials-alternative-content .content .author{
    color: #999;
    font-size: 11px;
    padding-top: 5px;
}

/* SLIDING TEXT ARTICLE WIDGET
----------------------------------------------------------------------------- */
.widget .carousel-article li{
    border: none;
    background: none;
}
.carousel-article .caroufredsel_wrapper{
    width: 100% !important
}

.carousel-article{
    float: left;
    width: 100%;
}

.grid_3 .carousel-article .carousel-li > li{
    width: 220px !important;
    margin-right: 0;
}

.grid_4 .carousel-article .carousel-li > li{
    width: 300px !important;
    margin-right: 0;
}

.grid_4.aside-left .carousel-article .carousel-li > li, 
.grid_4.aside-right .carousel-article .carousel-li > li{
    width: 280px !important;
}

.grid_5 .carousel-article .carousel-li > li{
    width: 380px !important;
    margin-right: 0;
}

.grid_6 .carousel-article .carousel-li > li{
    width: 460px !important;
    margin-right: 0;
}

.grid_7 .carousel-article .carousel-li > li{
    width: 540px !important;
    margin-right: 0;
}

.grid_8 .carousel-article .carousel-li > li{
    width: 620px !important;
    margin-right: 0;
}

.grid_9 .carousel-article .carousel-li > li{
    width: 700px !important;
    margin-right: 0;
}

.grid_12 .carousel-article .carousel-li > li{
    width: 940px !important;
    margin-right: 0;
}


.carousel-pagination {
    text-align: center;
    float: left;
    margin-top: 10px;
}

.footer-widget-container .carousel-pagination a{
    background: url('img/db-footer.png') no-repeat;

}

.carousel-pagination a {
    background: url('img/db.png') no-repeat;
    width: 10px;
    height: 10px;
    margin: 0 5px 0 0;
    display: inline-block;
}

.carousel-pagination a.selected {
    cursor: default;
}

.carousel-pagination a span {
    display: none;
}


/* WIDGET RECENT COMMENTS
-----------------------------------------------------------------------------*/
.widget_recent_comments li{
    padding-left: 26px;
    color: #444;
}

.widget_recent_comments li a{
    text-decoration: underline;
    font-style: italic;
    color: #888;
}

.footer-widget-container .widget_recent_comments li{
    color: #ccc;
}