/**
 * @copyright	Copyright (C) 2014 tharathip. All rights reserved.
 * @author		Tharathip Srisopa
 */

body {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 23px;
}

.align-right {
    text-align: right;
}

.align-left {
    text-align: left;
}

.form-submit {
    margin-right: 10px;
}

form.comment-form {
    background-color: #f5f5f5;
    padding: 10px;
}

.block-region {
    margin: 0;
    padding: 0;
}

.footer .region,.region .block.block-block {
    margin-bottom: 40px;
}

.region.region-highlighted {
    margin-bottom: 0;
}

.branding {
    display: block;
}

.navbar {
    margin-bottom: 0;
}

.navbar-inner {
    padding: 0;
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.navbar-top {
    padding: 10px 0 0;
}

.md-slide-wrap {
    margin: 0 auto;
}

.header-layout .four,.header-layout .one,.header-layout .three,.header-layout .two {
    position: relative;
}

.four .navbar-top,.four .navbar-top a,.three .navbar-top,.three .navbar-top a {
    color: #fff;
    font-size: 13px;
}

.four .container-fluid .row-fluid,.three .container-fluid .row-fluid {
    padding-top: 11px;
}

.carousel-mini .carousel-inner .item .thumbnail {
    margin-top: 10px;
}

.portfolio.thumbnails.gallery .thumbnail {
    height: 180px;
}

@media(max-width:1210px) {
    .portfolio.thumbnails.gallery .thumbnail {
        height: 140px;
    }
}

@media(max-width:979px) {
    .portfolio.thumbnails.gallery .thumbnail {
        height: auto;
    }
}

.testimonial blockquote p {
    font-size: 14px;
}

.portfolio.thumbnails.gallery .thumbnail img {
    height: 100%;
    width: 100%;
}

.three .navbar-top .borderless {
    float: right;
    margin-top: -3px;
}

.page-portfolio .portfolio-items .view-madaruk-portfolio .pull-right button {
    margin-bottom: 3px;
}

.four .branding,.four .socialbar_transparent,.one .branding,.one .socialbar_transparent {
    float: left;
    margin: 40px 0;
    width: 50%;
}

.two div.branding.span3 .branding,.three div.branding.span3 .branding {
    margin-top: 0px!important;
}

.two div.branding.span3,.three div.branding.span3 {
    margin: 43px 0 0px !important;
}

@media(max-width:979px) {
    .two div.branding.span3,.three div.branding.span3 {
        margin: 13px 0 0px !important;
    }
}

.two .main-menu .submenu {
    margin-top: 10px!important;
}

.page-blog .body-content,.page-portfolio .body-content {
    margin-top: 30px;
    margin-bottom: 30px;
}

.three .branding,.two .branding {
    margin: 40px 0;
}

.four .socialbar_transparent .ss,.one .socialbar_transparent .ss {
    float: right;
}

.main-menu.four,.main-menu.one {
    border-top: 1px solid #e7e7e7;
    display: table;
    margin-bottom: 0;
    width: 100%;
}

.main-menu.three,.main-menu.two {
    display: table;
    width: 100%;
}

.main-menu.three {
    margin-bottom: 0;
}

.main-menu a {
    color: #494949;
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
}

.main-menu.four,.main-menu.one {
    font-size: 14px;
}

.main-menu.three,.main-menu.two {
    font-size: 16px;
}

.main-menu.four .description,.main-menu.one .description {
    color: #999;
    font-size: 11px;
    text-transform: inherit;
    line-height: 14px!important;
}

.main-menu.four li,.main-menu.one li {
    float: left;
    margin-right: 5px;
    padding: 15px 0 10px 10px;
    margin-top: 2px;
    width: 140px;
}

.main-menu.three li,.main-menu.two li {
    float: left;
    margin-right: 20px;
    width: auto;
}

.main-menu.two li {
    padding: 50px 10px 15px;
}

.main-menu.three li {
    padding: 50px 10px 37px;
}

.main-menu.four li.active-trail,.main-menu.four li:hover,.main-menu.one li.active-trail,.main-menu.one li:hover {
    border-top: 5px solid #f0f0f0;
    margin-top: -3px;
}

.main-menu.two li.active-trail,.main-menu.two li:hover {
    border-top: 5px solid #f0f0f0;
    padding-top: 45px;
}

.main-menu.three li.active-trail,.main-menu.three li:hover {
    border-bottom: 5px solid #f0f0f0;
}

.main-menu li {
    position: relative;
}

.main-menu li:hover>.submenu {
    display: block;
}

.main-menu .submenu li:hover .submenu-2 {
    display: block;
    margin-left: -1px;
    margin-top: -1px;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 497;
}

.main-menu .submenu {
    display: none;
    margin: 5px 0 0 -10px;
    min-width: 140px;
    padding: 0;
    position: absolute;
    top: 100%;
    z-index: 497;
}

.main-menu .submenu-2 {
    display: none;
    margin: 0;
    min-width: 140px;
    padding: 0;
}

.main-menu .submenu li,.main-menu .submenu-2 li {
    border-bottom: 0!important;
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.main-menu .submenu a {
    background-color: rgba(255,255,255,0.9);
    border-right: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    border-left: 1px solid #e7e7e7;
    font-size: 13px;
    margin: 0;
    padding: 10px;
    white-space: nowrap;
}

.main-menu .active-trail ul a {
    color: #494949;
}

.main-menu .submenu a:hover {
    color: #e7e7e7;
}

.main-menu ul.submenu,.main-menu ul.submenu-2 {
    border-top: 1px solid #e7e7e7;
}

.main-menu .submenu li:hover {
    margin-top: 0;
}

.one .submenu li.active-trail,.one .submenu li:hover {
    border-top: 0;
}

.one .submenu,.one .submenu li.active-trail {
    margin-top: 0;
}

.one .submenu>li:hover .submenu-2 {
    margin: -1px;
}

.two .submenu li.active-trail,.two .submenu li:hover {
    padding-top: 0;
    border-top: 0;
}

.two .submenu,.two .submenu li.active-trail {
    margin-top: 0;
}

.four .submenu li.active-trail,.four .submenu li:hover {
    border-top: 0;
}

.four .submenu,.four .submenu li.active-trail {
    margin-top: 0;
}

.four .submenu>li:hover .submenu-2 {
    margin: -1px;
}

.body-content {
    font-size: 12px;
}

.body-content .breadcrumb {
    margin: 0;
    padding: 0;
}

.gmap label {
    width: auto;
    display: inline;
}

.gmap img {
    max-width: none;
}

.sidebar {
    font-size: 12px;
    min-height: 120px;
    text-align: inherit;
}

.sidebar .block-views {
    margin-bottom: 40px;
}

.form-actions {
    background: inherit;
    border: 0;
    padding: 0;
}

.sidebar .block-views ul {
    display: block;
}

.sidebar .block-views li {
    display: block;
    list-style: none;
}

.sidebar .block-views .views-field-field-image li {
    margin: 0;
    padding: 0;
}

.sidebar .block-views .views-field-field-image {
    float: left;
    margin-right: 15px;
}

.sidebar .block-views .views-row {
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 15px;
    padding-bottom: 10px;
    overflow: hidden;
}

.sidebar .view-madaruk-recent-comments li,.sidebar .view-madaruk-recent-comments ul {
    margin: 0;
    padding: 0;
}

.sidebar .view-madaruk-recent-comments .views-field-uid img {
    width: 50px;
    height: 50px;
    margin: 0 10px;
}

.sidebar .view-madaruk-recent-comments .views-field-uid {
    float: left;
    margin-right: 15px;
}

.sidebar .views-row.views-row-last {
    border-bottom: 0;
}

.footer {
    background-color: #3e3e3e;
    border-top: 5px solid #e7e7e7;
    font-size: 12px;
    min-height: 120px;
    text-align: inherit;
}

.footer h1,.footer h2,.footer h3 {
    color: #fff;
    margin: 0;
}

.footer a {
    color: #fff;
    text-decoration: none;
    -moz-transition: color .2s;
    -ms-transition: color .2s;
    -o-transition: color .2s;
    -webkit-transition: color .2s;
    transition: color .2s;
}

.sidebar a {
    text-decoration: none;
    -moz-transition: color .2s;
    -ms-transition: color .2s;
    -o-transition: color .2s;
    -webkit-transition: color .2s;
    transition: color .2s;
    font-weight: 400;
}

.footer h3,.footer h4 {
    line-height: 16px;
}

.footer ul {
    margin: 0;
    padding: 0;
}

.footer ul>li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer .block {
    margin-bottom: 30px;
}

.footer .content {
    margin-top: 25px;
}

.footer .block .content>table {
    width: 100%;
}

.footer tr.even,.footer tr.odd {
    background: 0 0;
    border-bottom: 0;
}

.footer tr:last-child {
    border-bottom: 0;
}

.footer tbody {
    border-top: 0;
}

.footer .node-author {
    display: none;
}

.footer .footer-block-blog ul li,.footer .views-row {
    border-bottom: none;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.footer .block-blog.title {
    font-size: 13px;
    font-weight: 400;
}

.footer .media .views-field-field-image {
    width: auto;
    float: left;
    margin-right: 15px;
}

.footer .views-field-field-image ul {
    width: 100px;
    float: left;
    margin-right: 15px;
    margin-bottom: 25px;
}

.footer .views-row {
    clear: both;
}

.footer .media .views-row {
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
}

.footer .views-field-title {
    font-weight: 700;
}

.views-field-field-image .item-list ul li a {
    display: block;
    position: relative;
    width: 100px;
    height: 70px;
    overflow: hidden;
}

.views-field-field-image .item-list ul li a img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    margin-top: -15px;
}

form.contact-form {
    position: relative;
}

form.contact-form div .form-type-textarea.form-item-message {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 0 0 250px;
    padding: 0;
}

form.contact-form div .form-type-textarea.form-item-message textarea {
    height: 200px;
}

.nav-bottom {
    background-color: #313131;
    font-size: 12px;
    padding: 20px 0 10px;
}

.nav-bottom .row {
    margin: 0;
}

.footer .block-comment a {
    display: block;
    font-weight: 700;
}

.footer .block-comment li {
    border-bottom: 1px solid #464545;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.footer .block-comment li.last {
    border-bottom: 0;
}

.footer img.comment-author {
    width: 50px;
    height: 50px;
}

.footer .view-madaruk-recent-comments .item-list li {
    clear: both;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.footer .view-madaruk-recent-comments .views-field-uid {
    float: left;
    margin-right: 15px;
}

.footer .views-field-subject {
    font-weight: 700;
}

.portfolio-item {
    border: 2px solid rgba(0,0,0,0);
    float: left;
    width: 80px;
    margin-bottom: 6px;
    margin-right: 6px;
    overflow: hidden;
}

.portfolio-item img {
    width: 80px;
}

.portfolio-item:hover {
    border-color: rgba(0,0,0,1);
}

.node-article .media-image,.node-type-portfolio .media-image {
    width: 100%;
    height: 300px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.node-article .media-image img,.node-type-portfolio .media-image img {
    position: absolute;
    width: 100%;
    height: auto;
    display: block;
    top: 0;
}

.node-article .media img,.node-type-portfolio .media img {
    width: 100%;
}

.node-article .thumbnail .caption a,.node-type-portfolio .thumbnail .caption a {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -16.5px;
    margin-left: -16.5px;
}

.node-type-article .thumbnails.gallery,.node-type-portfolio .thumbnails.gallery {
    margin-left: 0;
    margin-bottom: 10px;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.node-type-portfolio #portfolio-main-content h4.title {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.carousel.slide .item img {
    width: 100%;
}

.region.region-slideshow {
    margin-bottom: 0;
}

.videoWrapper embed,.videoWrapper iframe,.videoWrapper object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.node-article h2 {
    font-size: 20px;
    color: #333;
    margin: 25px 0;
    padding: 0;
    line-height: 26px;
}

.node-article .meta-info {
    line-height: 34px;
    border-top: 1px solid #e7e6e6;
    border-bottom: 1px solid #e7e6e6;
    margin-top: 36px;
    font-size: 12px;
    clear: both;
    overflow: hidden;
}

.node-article .blog-widget>h4 {
    margin-top: 45px;
}

.about.portrait .caption h4>span {
    font-size: 14px;
}

.portfolio-items .span12 {
    margin: 0;
    padding: 0;
}

.portfolio.thumbnails.gallery .contextual-links-wrapper {
    display: none;
}

fieldset#edit-author.collapsible.collapsed.form-wrapper.collapse-processed {
    display: block;
    margin-bottom: 50px;
}

#comments img.media-object.img-circle,.comment img.media-object.img-circle {
    width: 80px;
    height: 80px;
}

#comments .indented {
    margin-left: 80px;
}

#comments h4.comment-form {
    margin-bottom: 0;
}

#comments .media-meta .social a {
    margin-right: 10px;
    text-decoration: none;
}

#comments .comment-by-node-author .pull-left {
    float: right;
    margin-left: 10px;
}

#comments .comment-by-node-author .media-body {
    text-align: right;
}

.page-recent-comments-row .media img {
    width: 100px;
    height: 100px;
}

.footer .region .block-flickr img {
    margin-bottom: 10px;
    margin-right: 10px;
}

.footer .region img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
}

.footer .region img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
}

.footer .ss {
    margin-bottom: 40px!important;
}

.ss li {
    background: url(../img/socialsprites.png) no-repeat!important;
}

.ssm li {
    background: url(../img/socialsprites_mini_wht.png) no-repeat!important;
}

.ss {
    width: auto;
    margin: 0;
    padding: 0;
    text-align: left;
}

.ss li {
    display: inline-block!important;
    margin: 0!important;
    padding: 0!important;
    border-right: 1px solid rgba(0,0,0,.2)!important;
    border-bottom: 0!important;
    height: 40px!important;
    width: 40px!important;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

.ss li:hover {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

.ss li:first-child {
    border-left: 1px solid rgba(0,0,0,.2)!important;
}

.ss li a {
    display: block!important;
    text-indent: -9999px!important;
    height: 40px!important;
    width: 40px!important;
}

.ss li a:active {
    box-shadow: inset 0 0 10px rgba(0,0,0,.3),inset 0 0 10px rgba(0,0,0,.3);
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.3),inset 0 0 10px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 10px rgba(0,0,0,.3),inset 0 0 10px rgba(0,0,0,.3);
}

.ss li.digg {
    background-position: 0 0!important;
}

.ss li.digg:hover {
    background-position: 0 -40px!important;
}

.ss li.dribbble {
    background-position: 0 -80px!important;
}

.ss li.dribbble:hover {
    background-position: 0 -120px!important;
}

.ss li.facebook {
    background-position: 0 -160px!important;
}

.ss li.facebook:hover {
    background-position: 0 -200px!important;
}

.ss li.flickr {
    background-position: 0 -240px!important;
}

.ss li.flickr:hover {
    background-position: 0 -280px!important;
}

.ss li.forrst {
    background-position: 0 -320px!important;
}

.ss li.forrst:hover {
    background-position: 0 -360px!important;
}

.ss li.googleplus {
    background-position: 0 -400px!important;
}

.ss li.googleplus:hover {
    background-position: 0 -440px!important;
}

.ss li.html5 {
    background-position: 0 -480px!important;
}

.ss li.html5:hover {
    background-position: 0 -520px!important;
}

.ss li.icloud {
    background-position: 0 -560px!important;
}

.ss li.icloud:hover {
    background-position: 0 -600px!important;
}

.ss li.lastfm {
    background-position: 0 -640px!important;
}

.ss li.lastfm:hover {
    background-position: 0 -680px!important;
}

.ss li.linkedin {
    background-position: 0 -720px!important;
}

.ss li.linkedin:hover {
    background-position: 0 -760px!important;
}

.ss li.myspace {
    background-position: 0 -800px!important;
}

.ss li.myspace:hover {
    background-position: 0 -840px!important;
}

.ss li.paypal {
    background-position: 0 -880px!important;
}

.ss li.paypal:hover {
    background-position: 0 -920px!important;
}

.ss li.picasa {
    background-position: 0 -960px!important;
}

.ss li.picasa:hover {
    background-position: 0 -1000px!important;
}

.ss li.pinterest {
    background-position: 0 -1040px!important;
}

.ss li.pinterest:hover {
    background-position: 0 -1080px!important;
}

.ss li.reddit {
    background-position: 0 -1120px!important;
}

.ss li.reddit:hover {
    background-position: 0 -1160px!important;
}

.ss li.rss {
    background-position: 0 -1200px!important;
}

.ss li.rss:hover {
    background-position: 0 -1240px!important;
}

.ss li.skype {
    background-position: 0 -1280px!important;
}

.ss li.skype:hover {
    background-position: 0 -1320px!important;
}

.ss li.stumbleupon {
    background-position: 0 -1360px!important;
}

.ss li.stumbleupon:hover {
    background-position: 0 -1400px!important;
}

.ss li.tumblr {
    background-position: 0 -1440px!important;
}

.ss li.tumblr:hover {
    background-position: 0 -1480px!important;
}

.ss li.twitter {
    background-position: 0 -1520px!important;
}

.ss li.twitter:hover {
    background-position: 0 -1560px!important;
}

.ss li.vimeo {
    background-position: 0 -1600px!important;
}

.ss li.vimeo:hover {
    background-position: 0 -1640px!important;
}

.ss li.wordpress {
    background-position: 0 -1680px!important;
}

.ss li.wordpress:hover {
    background-position: 0 -1720px!important;
}

.ss li.yahoo {
    background-position: 0 -1760px!important;
}

.ss li.yahoo:hover {
    background-position: 0 -1800px!important;
}

.ss li.youtube {
    background-position: 0 -1840px!important;
}

.ss li.youtube:hover {
    background-position: 0 -1880px!important;
}

.ss li.customicon1 {
    background-position: 0 0!important;
}

.ss li.customicon1:hover {
    background-position: 0 -40px!important;
}

.ss li.customicon2 {
    background-position: 0 0!important;
}

.ss li.customicon2:hover {
    background-position: 0 -40px!important;
}

.ss li.github {
    background-position: 0 -1920px!important;
}

.ss li.github:hover {
    background-position: 0 -1960px!important;
}

.ss li.behance {
    background-position: 0 -2000px!important;
}

.ss li.behance:hover {
    background-position: 0 -2040px!important;
}

.ss li.yelp {
    background-position: 0 -2080px!important;
}

.ss li.yelp:hover {
    background-position: 0 -2120px!important;
}

.ss li.mail {
    background-position: 0 -2160px!important;
}

.ss li.mail:hover {
    background-position: 0 -2200px!important;
}

.ss li.instagram {
    background-position: 0 -2240px!important;
}

.ss li.instagram:hover {
    background-position: 0 -2280px!important;
}

.ss li.foursquare {
    background-position: 0 -2320px!important;
}

.ss li.foursquare:hover {
    background-position: 0 -2360px!important;
}

.ss li.zerply {
    background-position: 0 -2400px!important;
}

.ss li.zerply:hover {
    background-position: 0 -2440px!important;
}

.ss li.star {
    background-position: 0 -2480px!important;
}

.ss li.star:hover {
    background-position: 0 -2520px!important;
}

.ss li.share {
    background-position: 0 -2560px!important;
}

.ss li.share:hover {
    background-position: 0 -2600px!important;
}

.ss li.doc {
    background-position: 0 -2640px!important;
}

.ss li.doc:hover {
    background-position: 0 -2680px!important;
}

.socialbar_mini {
    height: 30px;
    width: 100%;
    padding: 0;
    z-index: 999;
}

.ssm {
    width: auto;
    margin: 0!important;
    padding: 0!important;
    text-align: left;
    font-size: 0;
}

.ssm li {
    display: inline-block!important;
    height: 29px!important;
    width: 30px!important;
    margin: 0!important;
    padding: 0!important;
    border-right: 1px solid rgba(0,0,0,.2)!important;
    border-bottom: 0!important;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

.ssm li:hover {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

.ssm li:first-child {
    border-left: 1px solid rgba(0,0,0,.2)!important;
}

.ssm li a {
    display: block!important;
    text-indent: -9999px!important;
    height: 30px!important;
    width: 30px!important;
}

.ssm li a:active {
    box-shadow: inset 0 0 10px rgba(0,0,0,.3),inset 0 0 10px rgba(0,0,0,.3);
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.3),inset 0 0 10px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 10px rgba(0,0,0,.3),inset 0 0 10px rgba(0,0,0,.3);
}

.ssm li.digg {
    background-position: 0 0!important;
}

.ssm li.digg:hover {
    background-position: 0 -30px!important;
}

.ssm li.dribbble {
    background-position: 0 -60px!important;
}

.ssm li.dribbble:hover {
    background-position: 0 -90px!important;
}

.ssm li.facebook {
    background-position: 0 -120px!important;
}

.ssm li.facebook:hover {
    background-position: 0 -150px!important;
}

.ssm li.flickr {
    background-position: 0 -180px!important;
}

.ssm li.flickr:hover {
    background-position: 0 -210px!important;
}

.ssm li.forrst {
    background-position: 0 -240px!important;
}

.ssm li.forrst:hover {
    background-position: 0 -270px!important;
}

.ssm li.googleplus {
    background-position: 0 -300px!important;
}

.ssm li.googleplus:hover {
    background-position: 0 -330px!important;
}

.ssm li.html5 {
    background-position: 0 -360px!important;
}

.ssm li.html5:hover {
    background-position: 0 -390px!important;
}

.ssm li.icloud {
    background-position: 0 -420px!important;
}

.ssm li.icloud:hover {
    background-position: 0 -450px!important;
}

.ssm li.lastfm {
    background-position: 0 -480px!important;
}

.ssm li.lastfm:hover {
    background-position: 0 -510px!important;
}

.ssm li.linkedin {
    background-position: 0 -540px!important;
}

.ssm li.linkedin:hover {
    background-position: 0 -570px!important;
}

.ssm li.myspace {
    background-position: 0 -600px!important;
}

.ssm li.myspace:hover {
    background-position: 0 -630px!important;
}

.ssm li.paypal {
    background-position: 0 -660px!important;
}

.ssm li.paypal:hover {
    background-position: 0 -690px!important;
}

.ssm li.picasa {
    background-position: 0 -720px!important;
}

.ssm li.picasa:hover {
    background-position: 0 -750px!important;
}

.ssm li.pinterest {
    background-position: 0 -780px!important;
}

.ssm li.pinterest:hover {
    background-position: 0 -810px!important;
}

.ssm li.reddit {
    background-position: 0 -840px!important;
}

.ssm li.reddit:hover {
    background-position: 0 -870px!important;
}

.ssm li.rss {
    background-position: 0 -900px!important;
}

.ssm li.rss:hover {
    background-position: 0 -930px!important;
}

.ssm li.skype {
    background-position: 0 -960px!important;
}

.ssm li.skype:hover {
    background-position: 0 -990px!important;
}

.ssm li.stumbleupon {
    background-position: 0 -1020px!important;
}

.ssm li.stumbleupon:hover {
    background-position: 0 -1050px!important;
}

.ssm li.tumblr {
    background-position: 0 -1080px!important;
}

.ssm li.tumblr:hover {
    background-position: 0 -1110px!important;
}

.ssm li.twitter {
    background-position: 0 -1140px!important;
}

.ssm li.twitter:hover {
    background-position: 0 -1170px!important;
}

.ssm li.vimeo {
    background-position: 0 -1200px!important;
}

.ssm li.vimeo:hover {
    background-position: 0 -1230px!important;
}

.ssm li.wordpress {
    background-position: 0 -1260px!important;
}

.ssm li.wordpress:hover {
    background-position: 0 -1290px!important;
}

.ssm li.yahoo {
    background-position: 0 -1320px!important;
}

.ssm li.yahoo:hover {
    background-position: 0 -1350px!important;
}

.ssm li.youtube {
    background-position: 0 -1380px!important;
}

.ssm li.youtube:hover {
    background-position: 0 -1410px!important;
}

.ssm li.customicon1 {
    background-position: 0 0!important;
}

.ssm li.customicon1:hover {
    background-position: 0 -40px!important;
}

.ssm li.customicon2 {
    background-position: 0 0!important;
}

.ssm li.customicon2:hover {
    background-position: 0 -40px!important;
}

.ssm li.github {
    background-position: 0 -1440px!important;
}

.ssm li.github:hover {
    background-position: 0 -1470px!important;
}

.ssm li.behance {
    background-position: 0 -1500px!important;
}

.ssm li.behance:hover {
    background-position: 0 -1530px!important;
}

.ssm li.yelp {
    background-position: 0 -1560px!important;
}

.ssm li.yelp:hover {
    background-position: 0 -1590px!important;
}

.ssm li.mail {
    background-position: 0 -1620px!important;
}

.ssm li.mail:hover {
    background-position: 0 -1650px!important;
}

.ssm li.instagram {
    background-position: 0 -1680px!important;
}

.ssm li.instagram:hover {
    background-position: 0 -1710px!important;
}

.ssm li.foursquare {
    background-position: 0 -1740px!important;
}

.ssm li.foursquare:hover {
    background-position: 0 -1770px!important;
}

.ssm li.zerply {
    background-position: 0 -1800px!important;
}

.ssm li.zerply:hover {
    background-position: 0 -1830px!important;
}

.ssm li.star {
    background-position: 0 -1860px!important;
}

.ssm li.star:hover {
    background-position: 0 -1890px!important;
}

.ssm li.share {
    background-position: 0 -1920px!important;
}

.ssm li.share:hover {
    background-position: 0 -1950px!important;
}

.ssm li.doc {
    background-position: 0 -1980px!important;
}

.ssm li.doc:hover {
    background-position: 0 -2010px!important;
}

.socialbar {
    width: 100%;
    min-height: 40px;
    padding: 0;
    font-size: 0;
    z-index: 999;
    background: #FFF;
}

.socialbar:after {
    clear: left;
    content: " ";
}

.socialbar_transparent {
    width: 100%;
    min-height: 40px;
    padding: 0;
    font-size: 0;
    z-index: 999;
}

.socialbar_transparent:after {
    clear: left;
    content: " ";
}

.borderless li,.borderless li:first-child,ul.borderless li,ul.borderless li:first-child {
    border: 0!important;
}

.sssquare {
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

.sscircle li {
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    -webkit-box-shadow: 0 2px rgba(0,0,0,.3);
    -moz-box-shadow: 0 2px rgba(0,0,0,.3);
    box-shadow: 0 2px rgba(0,0,0,.3);
    margin-right: 5px!important;
    margin-bottom: 5px!important;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    background-color: #FFF!important;
}

.sscircle li a:active,.sscircle li:hover {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

#header-fixed .menufication-btn {
    display: none;
}

.footer .tags-item a,.sidebar .tags-item a {
    -moz-transition: color .2s;
    -ms-transition: color .2s;
    -o-transition: color .2s;
    -webkit-transition: color .2s;
    transition: color .2s;
}

.footer .tags-item a {
    background-color: rgba(255,255,255,0.12);
    color: #808080;
    float: left;
    font-size: 12px;
    line-height: 12px;
    font-weight: 300;
    margin: 0 5px 5px 0;
    padding: 7px 10px;
    border-radius: 3px;
    text-transform: uppercase;
}

.sidebar .tags-item a {
    background-color: #fefefe;
    border: 2px solid #e1e1e1;
    border-radius: 3px;
    color: #898989;
    float: left;
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
    margin: 0 5px 5px 0;
    padding: 4px 10px;
    text-transform: uppercase;
}

.md-mainimg img {
    width: 100% !important;
    left: 0 !important;
}

@media(max-width:979px) {
    .branding .custom-logo {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #header-fixed {
        width: 100%;
        position: fixed;
        top: 0;
        height: 60px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,.5);
        -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.5);
        z-index: 10000;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    #header-fixed .menufication-btn {
        border-bottom: 11px double #303335;
        border-top: 4px solid #303335;
        content: "";
        position: absolute;
        height: 3px;
        left: 5px;
        top: 6px;
        width: 23px;
        display: block;
        margin: 15px 0 0 10px;
        cursor: pointer;
    }

    div#oc-navbar.nav-collapse.oc-navbar.container {
        position: absolute!important;
        overflow-x: hidden;
        overflow-y: auto;
        display: block;
        background-color: #282828;
        background-image: url(../img/mobile-nav.png);
        width: 260px;
        height: 2000px;
        padding-right: 10px;
        -webkit-overflow-scrolling: touch;
    }

    div#oc-navbar.nav-collapse.oc-navbar.container .main-menu {
        border: 0;
        margin-bottom: 400px;
    }

    .navbar-mainmenu ul.main-menu {
        background: 0 0;
    }

    .main-menu li {
        border-top: 0!important;
        border-bottom: 1px solid #7d7d7d!important;
        width: 100%!important;
        display: block;
    }

    .main-menu .submenu li .submenu-2,.main-menu .submenu li:hover .submenu-2 {
        display: block;
        position: inherit;
        left: 20px;
        border-top: none;
    }

    .main-menu li.expanded:hover::before {
        content: '\f054' !important;
    }

    #header-fixed .branding {
        float: inherit;
        display: block;
        text-align: center;
        width: min-intrinsic;
    }

    #header-fixed .socialbar_transparent.borderless {
        display: none;
    }

    #page-title.title,.body-content {
        padding: 0 10px;
    }

    .main-menu li,.main-menu li:hover {
        margin-top: 0!important;
    }

    .main-menu a {
        color: #f0f0f0;
    }

    .main-menu .submenu {
        position: inherit;
        border-top: 0!important;
        padding-left: 20px;
        margin: 0;
    }

    .main-menu li.expanded:before {
        font-family: FontAwesome;
        content: '\f067';
        float: right;
        margin-right: 15px;
    }

    .main-menu li.expanded:hover:before {
        content: '\f068';
    }

    .main-menu .submenu li:before {
        font-family: FontAwesome;
        content: '\f054';
        margin: 0 10px 0 -15px;
        color: #505050;
        float: left;
    }

    .main-menu .submenu a {
        background: none!important;
        border: 0;
        font-size: inherit;
        padding: 0;
    }

    .main-menu li .submenu a,.main-menu li:hover .submenu a {
        color: #f0f0f0!important;
    }

    .oc-shadow {
        right: -2px;
    }

    .oc-wrapper {
        padding-top: 60px;
        position: absolute;
        width: 100%;
    }

    .portfolio.thumbnails.gallery li {
        margin-left: 0!important;
    }

    .align-left,.align-right {
        text-align: center;
    }

    .four .branding,.four .socialbar_transparent,.one .branding,.one .socialbar_transparent {
        margin-top: 15px;
        margin-bottom: 0;
    }

    .four .socialbar_transparent,.one .socialbar_transparent {
        width: 40%;
    }

    .main-menu.two li,.main-menu.two li.active-trail,.main-menu.two li:hover {
        padding-top: 15px;
    }

    .main-menu.three li,.main-menu.three li.active-trail,.main-menu.three li:hover {
        padding-top: 15px;
        padding-bottom: 0;
    }

    .main-menu.three .submenu li {
        padding-bottom: 15px;
    }

    .three div.branding.span3,.two div.branding.span3 {
        margin: 15px 0 0;
    }

    .three a.branding {
        margin: 0;
    }

    .three .navbar-inner .row-fluid.underline {
        padding-top: 0;
        border-bottom: 0;
    }

    .three .navbar-top .borderless {
        float: inherit;
    }

    .three .navbar-top .borderless ul {
        text-align: center;
    }

    footer.footer {
        padding: 15px;
    }

    .branding,.portfolio.thumbnails.gallery li.span3,.thumbnail>img {
        width: 100%!important;
    }

    .node-article .media-image,.node-type-portfolio .media-image {
        height: 200px!important;
    }
}

@media(max-width:479px) {
    form.contact-form div .form-type-textarea.form-item-message {
        position: inherit;
        margin: 0;
    }
}

@media only screen and (max-width:979px) and (-webkit-min-device-pixel-ratio: 2),only screen and (max-width:979px) and (-o-min-device-pixel-ratio: 2),only screen and (max-width:979px) and (-min-moz-device-pixel-ratio: 2),only screen and (max-width:979px) and (min-device-pixel-ratio: 2) {
    div#oc-navbar.nav-collapse.oc-navbar.container {
        background: url(../img/mobile-nav@2x.png);
        background-size: 200px 200px;
    }
}

@media only screen and (max-device-height: 768px) {
    div#oc-navbar.nav-collapse.oc-navbar.container {
        height: 768px;
    }
}

@media only screen and (max-device-height: 600px) {
    div#oc-navbar.nav-collapse.oc-navbar.container {
        height: 600px;
    }
}

@media only screen and (max-device-height: 568px) {
    div#oc-navbar.nav-collapse.oc-navbar.container {
        height: 568px;
    }
}

@media only screen and (max-device-height: 480px) {
    div#oc-navbar.nav-collapse.oc-navbar.container {
        height: 480px;
    }
}

@media only screen and (max-device-height: 384px) {
    div#oc-navbar.nav-collapse.oc-navbar.container {
        height: 384px;
    }
}

@media only screen and (max-device-height: 320px) {
    div#oc-navbar.nav-collapse.oc-navbar.container {
        height: 320px;
    }
}

@media only screen and (max-device-height: 240px) {
    div#oc-navbar.nav-collapse.oc-navbar.container {
        height: 240px;
    }
}

#scroll-top a {
    width: 16px;
    height: 16px;
    padding: 4px 8px 13px;
    border-radius: 4px;
    background: #818c90;
    position: fixed;
    bottom: 48px;
    right: 32px;
    display: none;
    opacity: 0.89;
    filter: alpha(opacity=89);
    z-index: 499841;
}

#scroll-top a i {
    font-size: 16px;
    color: #fff;
}

#scroll-top a:hover {
    background-color: #ffcc00;
    cursor: pointer;
    text-decoration: none;
}

.icon-box5 i {
    display: inline-block;
    font-size: 28px;
    float: left;
    color: #F3F3F3;
    padding: 10px;
    background: #4a4d4f;
    margin-right: 15px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 0 10px rgba(0,0,0,.2);
    box-shadow: inset 0 0 10px rgba(0,0,0,.2);
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -ms-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}

.icon-box5 h4 {
    line-height: 28px;
    font-weight: 600;
    margin-bottom: 20px;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -ms-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}

.icon-box5 p {
    display: block;
    padding-top: 5px;
}

.icon-box5:hover i {
    background: #de513f;
}

.icon-box5:hover h4 {
    color: #de513f;
}

.vertical-space {
    display: block;
    width: 100%;
    margin: 0;
    clear: both;
    border: 0 none;
    height: 20px;
}

#page-title.title {
    border-bottom: none;
    margin-bottom: 0;
}

div.title {
    border-bottom: 2px solid #e5e5e5;
    position: relative;
    margin-bottom: 30px;
}

div.title h3 {
    display: inline-block;
    letter-spacing: 0.2px;
    border-bottom: 2px solid #c63d4e;
    margin-bottom: -2px;
    width: auto;
    max-width: 100%;
}

.footer div.title h3 {
    border-bottom: 0;
    margin-bottom: 5px;
}

.footer div.title {
    padding-bottom: 6px;
    border-bottom: 1px solid #212121;
    -webkit-box-shadow: 0 1px #373737;
    -moz-box-shadow: 0 1px #373737;
    box-shadow: 0 1px #373737;
    position: relative;
}

.iconheader {
    margin-bottom: 15px;
    min-height: 30px;
    padding: 0;
    text-align: center;
    font-weight: 700;
    display: block;
}

.iconheader i {
    background-color: #222;
    border-radius: 500em;
    box-sizing: border-box;
    color: #fff;
    display: block;
    font-size: 90px;
    height: 180px;
    line-height: 150px;
    margin: 0 auto 20px;
    padding: 15px 30px 10px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    width: 180px;
    -webkit-box-shadow: none;
    -webkit-font-smoothing: antialiased;
}

.iconheader .content {
    font-weight: 700;
    text-align: center;
    vertical-align: top;
}

.iconheader .content .sub-content {
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
}

.section-title {
    text-align: center;
    margin: 0 auto;
    margin-bottom: 60px;
}

.section-title h2 {
    color: #222;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.section-title .border {
    background: none repeat scroll 0 0 #999;
    display: block;
    height: 2px;
    margin: 0 auto;
    width: 100px;
    margin-bottom: 40px;
}

ul.technology {
    text-align: center;
    margin-left: 0!important;
}

ul.technology li:last-child {
    margin-right: 0px!important;
}

ul.technology li {
    display: inline-block;
    margin: 10px 30px 10px 0!important;
    padding: 30px 20px;
    position: relative;
    overflow: hidden;
    transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
}

@media(max-width:1210px) {
    ul.technology li {
        margin: 0 20px 0px 0px!important;
    }
}

ul.technology li:hover {
    background: #222;
}

ul.technology li:hover>h5 {
    color: #fff;
}

ul.technology li:first-child,ul.technology li:last-child {
    margin-left: 0;
}

ul.technology li:last-child {
    margin-right: 0;
}

ul.technology li i {
    font-size: 40px;
    transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
}

ul.technology li h5 {
    text-transform: uppercase;
    color: #222;
    margin-top: 10px;
    transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
}

ul.technology li p {
    font-size: 12px;
    margin-top: 10px;
    transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
}

@media(max-width:384px) {
    .about .social {
        bottom: 60px;
    }
}

@media(max-width:309px) {
    .about .social {
        bottom: 80px;
    }
}

.mm-shadow {
    background: url(../img/singleheader.png) no-repeat scroll center -8px;
    top: 100%;
    content: "";
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.accordion-heading {
    border-bottom: none;
    border-left-width: 5px;
    border-left-style: solid;
    border-left-color: #222;
}

.accordion-heading:hover {
    border-bottom: none;
}

.accordion-heading h4 {
    margin: 0;
}

.accordion-body.collapse {
    border-width: 0 1px 0px 5px;
    border-style: solid;
    border-color: #ccc;
}

.accordion-body.collapse.in {
    border-bottom-width: 1px;
}

ul.icon {
    list-style: none;
    margin: 0;
}

.icon li::before {
    font-family: "FontAwesome";
    font-size: 16px;
    left: 0;
    padding-right: 10px;
    position: relative;
    top: 2px;
}

.check li::before {
    content: "\f00c";
}

.checked li::before {
    content: "\f046";
}

.icon li a {
    text-decoration: none;
}

.check-circle li::before {
    content: "\f058";
}

.checked-circle li::before {
    content: "\f05d";
}

/* Preloader */
#preloader {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff; /* change if the mask should have another color then white */
	z-index:999999; /* makes sure it stays on top */
}

#status {
	width:200px;
	height:200px;
	color:#fff;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(../img/preloader.gif); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}

#status p{text-align:center;}
/* End Preloader */