/**
 * @version    $Id$
 * @package    IT_Theme_Framework
 * @author     InnoThemes Team <support@innothemes.com>
 * @copyright  Copyright (C) 2012 InnoThemes.com. All Rights Reserved.
 * @license    GNU/GPL v2 or later http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Websites: http://www.innothemes.com
 */

/*============================================================ 
                        CSS OVERVIEWS
                1. GENERAL
                2. OVERRIDE STYLE OF THEMES FRAMEWORK
                3. MAIN MENU
                4. MEMBER
                5. PROJECT
                6. HOME POST
                7. CUSTOMER
                8. FOOTER
                9. WIDGET STYLES
                10. RESPONSIVE
                
=============================================================*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700");
@import url("https://fonts.googleapis.com/css?family=Oswald:300,400,700");
/* ============================================================ 
    1. GENERAL
=============================================================*/
body {
    background: #f2f2f2;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px; 
}
a, a:hover, a:active, a:focus {
    text-decoration: none !important;
}
a {
    color: #ca0554;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition:    all 0.3s ease-in-out 0s;
    transition:         all 0.3s ease-in-out 0s;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#it-wrapper {
    background: none !important;
}
#it-header,
#it-content,
.home.blog #it-content,
.it-top-footer,
.it-bottom-footer { 
    margin: 0 auto;
    max-width: 960px;
}
#it-promo,
#it-under-promo,
#it-home-post,
#it-content-bottom .row,
#it-recent-project {
    margin: 30px auto 0;
    max-width: 960px;
}
#it-logo {
    margin: 15px 0;
    position: relative;
}
.it-layout-boxed #it-logo {
    margin: 10px;
}
#it-body {
    margin-top: -20px;
    overflow: visible;
    background: #fff;
    width: 100%;
    max-width: 100%;
}
.it-layout-boxed #it-home-post,
.it-layout-boxed #it-content {
    padding: 0 10px;
}
#it-content {
    font-size: 12px;
    color: #727272;
    font-weight: 100;
    float: none;
    padding: 0;
}
.home #it-content {
    width: 100%;
}

/* ============================================================ 
    2. OVERRIDE STYLE OF THEMES FRAMEWORK
=============================================================*/
#it-logo #it-logo-text {
    text-transform: uppercase;
}
#it-logo #it-logo-text + .it-slogan {
    position: inherit;
}
#it-searchbox {
    padding: 27px 20px;
    border: none;
}
.widget_search {
    padding: 0;
}
.it-social {
    padding: 32px 0;
}
.it-social li a {
    background-image: url('../img/icons/icons-social.png');
    width: 30px;
    height: 30px;
    opacity: 0.5;
}
.it-social li:hover a {
    opacity: 1;
}
.it-social li.facebook a {
    background-position: -1px 0;
}
.it-social li.twitter a {
    background-position: -322px 0;
}
.it-social li.youtube a {
    background-position: -193px 0;
}
.it-social li.googleplus a {
    background-position: -161px 0;
}
.it-social li.pinterest a {
    background-position: -34px 0;
}
.it-social li.myspace a {
    background-position: -66px 0;
}
.it-social li.flickr a {
    background-position: -98px 0;
}
.it-social li.dribbble a {
    background-position: -225px 0;
}
.it-social li.stumbleupon a {
    background-position: -289px 0;
}
.it-social li.yahoo a {
    background-position: -257px 0;
}
.it-social li.skype a {
    background-position: -321px 0;
}
.it-social li.rss a {
    background-position: -353px 0;
}
.it-social li.facebook:hover a {
    background-position: -1px -33px;
}
.it-social li.twitter:hover a {
    background-position: -322px -33px;
}
.it-social li.youtube:hover a {
    background-position: -193px -33px;
}
.it-social li.googleplus:hover a {
    background-position: -161px -33px;
}
.it-social li.pinterest:hover a {
    background-position: -34px -33px;
}
.it-social li.myspace:hover a {
    background-position: -66px -33px;
}
.it-social li.flickr:hover a {
    background-position: -98px -33px;
}
.it-social li.dribbble:hover a {
    background-position: -225px -33px;
}
.it-social li.stumbleupon:hover a {
    background-position: -289px -33px;
}
.it-social li.yahoo:hover a {
    background-position: -257px -33px;
}
.it-social li.skype:hover a {
    background-position: -321px -33px;
}
.it-social li.rss:hover a {
    background-position: -353px -33px;
}
#it-breadcrumbs a {
    background-position: calc(100% + 4px) 0;
}
.home #it-breadcrumbs {
    display: none;
}
#it-top-menu {
    padding: 33px 0;
}
#reply-title,
#related-posts h3,
#author-bio h4,
.social-share h4,
.it-entry-title {
    font-family: Oswald !important;
    color: #222;
    font-size: 1.5em;
}
.page-not-found {
    padding: 268px 0;
}
#it-content .it-page-entry h2 {
    font-size: 30px;
    margin: 0 0 25px;
}
#it-logo .it-slogan {
    bottom: 2px;
    color: #666666;
    display: block;
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 14px;
    left: 48px;
    position: absolute;
    white-space: nowrap;
}

/* ============================================================ 
    3. MAIN MENU
=============================================================*/
#it-mainmenu {
    background: #fff;
    border: 1px solid #e5e5e5;
    position: relative;
    width: 100%;
    z-index: 999;
}
#it-main-menu > li {
    border-top: 1px solid transparent;
    border-right: 1px solid #e5e5e5;
    font-style: 13px;
    font-weight: normal;
}
#it-main-menu li {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition:    all 0.3s ease-in-out 0s;
    transition:         all 0.3s ease-in-out 0s;
}
#it-main-menu li.menu-parent-item {
    background-image: url('../img/icons/icon-arrow-down.png');
    background-repeat: no-repeat;
    background-position: 92% 21px;
}
#it-main-menu > li.menu-parent-item > ul.sub-menu:before {
    background-image: url('../img/icons/icon-arrow-up.png');
    content:"";
    width: 9px;
    height: 5px;
    position: absolute;
    top: -9px;
    left: 37px;
}
#it-main-menu li ul.sub-menu li.menu-parent-item,
#it-main-menu li ul.sub-menu li.menu-parent-item:hover {
    background-image: url('../img/icons/icon-arrow-black.png');
    background-position: 98% center;
    background-repeat: no-repeat;
}
#it-main-menu li:hover,
#it-main-menu > li.current-menu-item,
#it-main-menu li ul.sub-menu li.menu-parent-item,
#it-main-menu li ul li {
    background-color: #f7f7f7;
}
#it-main-menu li ul.sub-menu li.menu-parent-item:hover,
#it-main-menu li ul > li:hover {
    background-color: #fff;
}
#it-main-menu li ul > li:first-child {
    border-top: 1px solid #e5e5e5;
}
#it-main-menu > li:hover {
    border-top: 1px solid #fff;
}
#it-main-menu li a {
    color: #727272;
    padding: 12px 20px;
    border-right: none;
}
#it-main-menu li a:hover {
    color: #ca0554;
}
#it-main-menu > li > ul {
    left: 0;
    line-height: 10px;
    border-top: 4px solid #6a6a6a;
}
#it-main-menu li ul li {
    border-color: #e5e5e5 #e5e5e5 #e5e5e5;
    border-image: none;
    border-right: 1px solid #e5e5e5;
    border-style: none solid solid;
    border-width: medium 1px 1px;
}
#it-main-menu li ul > li {
    padding: 5px 0;
    border-top: 1px solid #fff;
}
#it-main-menu li > ul > li ul {
    margin: 0;
    padding: 0;
    left: 200px;
}
#it-mainmenu.on-top {
    position: fixed !important;
    left: 0;
}
#it-mainmenu.on-top #it-main-menu {
    width: 960px;
    margin: auto;
}
#it-mainmenu.on-top ul li:first-child {
    border-left: 1px solid #e5e5e5;
}

/* ============================================================ 
    4. MEMBER
=============================================================*/
.it-title,
.it-title-project {
    color: #555;
    font-size: 40px;
    font-weight: 100;
    margin: 0 0 5px;
    text-align: center;
}
.it-title-project {
    text-transform: uppercase;
}
.it-title-sub {
    color: #999999;
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    margin: 15px auto 0;
    text-transform: none;
    width: 50%;
}
.it-separate {
    background: url('../img/bg-separate.png') no-repeat center center;
    display: inline-block;
    height: 20px;
    width: 100%;
}
#it-team-member {
    height: 240px;
    overflow: hidden;
    position: relative;
}
.it-member {
    height: 220px;
    margin: 0;
    padding: 0;
    width: 1920px;
}
.it-member li {
    float: left;
    list-style: none outside none;
    margin: 0 5px;
    padding: 6px;
    text-align: center;
    width: 180px;
}
.it-member li p.icon,
.it-member li p.icon a.avatar,
.it-member li p.icon a.avatar img {
    -webkit-border-radius: 50%;
    -moz-border-radius:    50%;
    border-radius:         50%;
}
.it-member li p.icon {
    background: #FFF;
    padding: 10px;
    width: 148px;
    height: 148px;
    font-size: 0.85em;
    color: #666;
    -webkit-box-sizing: content-box;
    -moz-box-sizing:    content-box;
    box-sizing:         content-box;
}
.it-member li p.icon a.avatar {
    border: 10px solid #f2f2f2;
    display: inline-block;
    overflow: hidden;
    margin-bottom: 15px;
    width: 128px;
    height: 128px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing:    content-box;
    box-sizing:         content-box;
}
.it-member li p.icon a.avatar img {
    width: 128px;
    height: 128px;
    vertical-align: middle;
}
.it-member li p.icon a.avatar:hover {
    border: 10px solid #ca0554;
    margin: -10px 0 20px -10px;
    padding: 10px;
}
#scrollbar {
    display: block;
    font-size: 1px;
    height: 10px;
    position: relative;
    top: 0;
}
#track {
    background: #e2e2e2;
    height: 4px;
    left: 0;
    position: absolute;
    top: 0;
    width: 960px;
}
#dragBar {
    background: #ca0554;
    cursor: move;
    height: 4px;
    left: 0;
    position: absolute;
    top: 0 !important;
    width: 180px !important;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition:    all 0.3s ease 0s;
    transition:         all 0.3s ease 0s
}
#dragBar:hover {
    padding: 3px 0;
    top: -3px !important;
}

/* ============================================================ 
    5. PROJECT
=============================================================*/
#it-recent-project .it-title,
#it-customer .it-title {
    font-weight: 100;
    font-size: 40px;
    color: #555;
}
#it-recent-project li {
    border: 10px solid #f2f2f2;
    display: inline-block;
    position: relative;
    margin: 25px 15px;
}
.it-layout-boxed #it-recent-project li {
    margin: 25px 12px;
}
.it-project-thumb {
    float: left;
    text-align: center;
    width: 190px;
    height: 160px;
}
.it-project-thumb a img {
    width: 100%;
    height: 100%;
}
#it-recent-project .it-separate {
    margin-top: 30px;
}
span.mark {
    background: url('../img/icons/view.png') no-repeat center -40px rgba(0, 0, 0, 0.6);
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-transition: all 0.3s ease 0s;
       -moz-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}
span.mark:hover {
    background-position: center 60px;
    opacity: 1;
    cursor: pointer;
}
.portfolio-cat {
    font-weight: normal;
    font-size: 0.75em;
    border: 2px solid #FFF;
    padding: 4px 20px;
    background: #F2F2F2;
    text-transform: uppercase;
    color: #444;
    position: relative;
    top: -15px;
    z-index: 1;
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
            border-radius: 20px;    
}
.it-viewall-portfolio {
    margin-top: 30px;
    text-align: center;
}
.it-viewall-portfolio a {
    padding: 10px 20px;
    border: 1px solid #e9e9e9;
    font-weight: bold;
    text-transform: uppercase;
    color: #222;
}
.it-viewall-portfolio a:hover {
    background: #f2f2f2;
    color: #ca0554;
}
.post-type-archive-portfolio #it-recent-project {
    padding-bottom: 150px;
}

/* ============================================================ 
    6. HOME POST
=============================================================*/
.it-featured-post {
    margin-bottom: 20px;
}
#it-home-post .it-featured-post h2 {
    font-size: 40px;
    font-weight: 100;
}
#it-home-post .it-featured-post h2 a {
    color: #555;
}
#it-home-post .it-featured-post h2 a:hover {
    color: #ca0554;
}
.it-home-entry .attachment-homethumb {
    float: left;
    margin: 0 1em 1.5em 0;
    height: 160px;
    width: 160px;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.it-home-entry {
    padding: 20px 0;
}
.it-home-entry > h3 {
    font-family: Oswald;
}
.it-home-entry h3 a {
    color: #ca0554;
}
.it-home-entry .read-more {
    margin-left: 5px;
}
#it-content-bottom {
    background: #f2f2f2;
    border-top: 5px solid #f0f0f0;
    margin: 0;
}
#it-content-bottom a {
    color: #ca0554;
}
#it-content-bottom a:hover {
    color: #005580;
}

#it-content-bottom .widget {
    background: none;
    font-size: 13px;
    font-weight: normal;
}

/* ============================================================ 
    7. CUSTOMER
=============================================================*/
#it-customer {
    border-top: 1px solid #dcdcdc;
    margin: 30px -100% 0;
    padding: 30px 0 50px;
}
.it-customer-logo {
    list-style: none;
    width: 960px;
    margin: 20px auto;
    text-align: center;
}
.it-customer-logo li {
    margin: 0 5px;
    display: inline-block;
    opacity: 0.6;
    transition: all 0.3s ease 0s;
}
.it-customer-logo li:hover {
    opacity: 1;
}

/* ============================================================ 
    8. FOOTER
=============================================================*/
#it-footer {
    background: #fff;
    color: #727272;
    font-weight: normal;
}
.it-top-footer a {
    padding: 1px 4px;
}
.it-top-footer a:hover {
    color: #fff;
    background: #ca0554;
    border-radius: 3px;
}
.it-top-footer,
.it-bottom-footer {
    float: none;
}
#it-footer .it-copyright {
    font-size: 11px;
    text-align: center;
    width: 100%;
}
#it-footermenu {
    width: 100%;
    text-align: center;
}

/* ============================================================ 
    9. WIDGET STYLES
=============================================================*/
.widget {
    border: none;
}
.widget .widget-title {
    background: none;
    border-bottom: 3px solid #272727;
    color: #000;
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    padding: 10px 0;
}
.widget ul {
    padding: 0;
}
.widget ul li {
    background: url('../img/icons/icons-base.png') no-repeat 0 -334px;
    padding: 8px 0 8px 18px;
}

/* ============================================================ 
    10. RESPONSIVE
=============================================================*/
@media only screen and (max-width: 960px), (max-device-width: 960px) {
    #it-header,
    #it-content,
    #it-promo,
    #it-recent-project,
    #it-home-post,
    #it-content-bottom .row-fluid,
    .it-top-footer,
    .it-bottom-footer,
    .it-customer-logo {
        width: 100%;
    }
    #it-right-header,
    #it-searchbox {
        float: none;
    }
    #it-under-promo {
        display: none;
    }
    #it-recent-project {
        text-align: center;
    }
    #it-home-post,
    #it-right-sidebar,
    #it-right-sidebar,
    .it-page-entry {
        padding: 10px;
    }
    #it-mainmenu.on-top {
        padding: 0;
    }
}