/* 
Theme cteated by cyanpix.com
1. General options.
2. Header.
3. Navigation.
4. Search form.
5. Twitter.
6. Posts type.
7. Pagination.
8. Post page.
9. Footer.
10. Media Query.
10. Plugin style.
*/
/* 1. General Options */
html {
  font-size: 62.5%; }

.overLayer {
  display: none;
  height: 100%;
  width: 100%;
  background: #fff;
  position: fixed;
  z-index: 100;
  opacity: 0.8; }

body {
  transition: 0.5s;
  overflow-x: hidden;
  min-width: 200px; }

iframe {
  max-width: 100%; }

h1, h2, h3, h4, h5 {
  font-family: oswald; }

a, a:hover, a:focus, a:active {
  text-decoration: none;
  color: #2a2c2b; }

img {
  max-width: 100%; }

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

/* 2. Header */
header {
  padding-bottom: 10px; }
  header .logoImg {
    margin-top: 25px; }
    header .logoImg a {
      width: 50%;
      margin: 0 auto;
      display: block; }
      header .logoImg a img {
        display: block;
        margin: 0 auto;
        max-height: 250px; }
  header .logo {
    text-align: center;
    margin-bottom: 10px; }
    header .logo h1 a {
      padding: 0 20px;
      color: #1e1e20;
      transition: 0.4s; }
      header .logo h1 a .logo-dot {
        color: #dc3522; }
  header .description {
    text-align: center;
    font-size: 1.7rem;
    margin-top: 20px; }
  header .borderHeaderLeft, header .borderHeaderRight {
    margin-top: 15px;
    float: left;
    height: 4px;
    width: 50%; }

/* 3. Navigation */
nav {
  z-index: 1000;
  overflow: hidden;
  height: 100%;
  position: fixed;
  left: -237px;
  width: 240px;
  top: 0;
  padding: 10px 0px 10px 0;
  transition: 0.5s; }

nav.active {
  left: 0; }

.blockNav {
  padding: 0 10px;
  margin-top: 25px; }

/* Menu */
.menu ul li a {
  padding: 10px 0px 10px 5px;
  display: block;
  transition: 0.3s; }
  .menu ul li a:hover {
    color: #fff;
    background: #dc3522; }
  .menu ul li a:active {
    background: #374140; }
  .menu ul li a i {
    margin-left: 3px; }

.showMenu {
  cursor: pointer;
  position: fixed;
  left: 50%;
  top: 1px;
  background: #fff;
  padding: 10px;
  text-align: center;
  z-index: 1000;
  margin-left: -45%; }

/* About me */
.aboutMe img {
  display: block;
  margin: 0 auto; }
.aboutMe .socialIco ul li {
  margin-top: 7px;
  float: left;
  margin-left: 5px;
  text-align: center; }
  .aboutMe .socialIco ul li a {
    min-width: 30px;
    background: #374140;
    padding: 5px 5px 0 5px;
    display: block;
    color: #fff;
    transition: 0.3s;
    font-size: 2rem; }
    .aboutMe .socialIco ul li a:hover {
      background-color: transparent;
      /* Social color */ }
      .aboutMe .socialIco ul li a:hover i.fa-facebook {
        color: #3b5998; }
      .aboutMe .socialIco ul li a:hover i.fa-twitter {
        color: #00aced; }
      .aboutMe .socialIco ul li a:hover i.fa-linkedin {
        color: #007bb6; }
      .aboutMe .socialIco ul li a:hover i.fa-google-plus {
        color: #dd4b39; }
      .aboutMe .socialIco ul li a:hover i.fa-youtube {
        color: #bb0000; }
      .aboutMe .socialIco ul li a:hover i.fa-instagram {
        color: #517fa4; }
      .aboutMe .socialIco ul li a:hover i.fa-pinterest {
        color: #cb2027; }

/* 4. Search form */
#search input[type="text"] {
  display: block;
  margin: 0 auto;
  padding: 4px 3px;
  font-size: 1.5rem;
  border: solid 1px #2a2c2b;
  max-width: 90%; }
#search input[type="submit"] {
  margin: 5px auto;
  display: block;
  color: #fff;
  font-size: 1.6rem;
  transition: 0.3s;
  padding: 3px 5px;
  border: none; }

/* Tag cloud */
.tagCloud ul li {
  float: left;
  margin-left: 10px;
  margin-top: 14px; }
  .tagCloud ul li a {
    padding: 5px 8px;
    background: #374140;
    color: #fff;
    transition: 0.3s; }
    .tagCloud ul li a:hover {
      background: #dc3522; }

/* 5. Twitter */
#twitter {
  margin-left: 5px;
  padding-bottom: 20px; }
  #twitter a {
    display: block;
    margin-top: 20px;
    position: relative; }
    #twitter a .tweetAgo {
      position: absolute;
      right: 8px;
      bottom: -13px;
      font-size: 0.7em; }

/* 6. Posts Type */
.sortPosts {
  margin-top: 10px;
  margin-bottom: 10px; }
  .sortPosts ul li {
    float: left;
    margin-left: 15px;
    color: #dc3522;
    cursor: pointer; }

.post, .postPage {
  margin-top: 30px;
  font-size: 1.7rem;
  line-height: 28px;
  border-bottom: 3px solid #374140;
  padding-bottom: 15px;
  position: relative;
  color: #374140; }
  .post .caption, .postPage .caption {
    margin-top: 10px; }
  .post .text ul, .post .quote ul, .post .video ul, .post .audio ul, .post .photo ul, .post .chat ul, .post .answer ul, .postPage .text ul, .postPage .quote ul, .postPage .video ul, .postPage .audio ul, .postPage .photo ul, .postPage .chat ul, .postPage .answer ul {
    list-style: square;
    padding-left: 15px; }
  .post .sharePost, .postPage .sharePost {
    right: 0;
    top: -10px;
    font-size: 20px; }
    .post .sharePost .icon, .postPage .sharePost .icon {
      position: absolute;
      right: 0;
      top: -20px; }
  .post img, .postPage img {
    max-width: 100%;
    display: block;
    margin: 0 auto; }
  .post a, .postPage a {
    color: #dc3522; }
  .post iframe, .postPage iframe {
    margin: 0 auto;
    display: block; }
  .post .postIcon, .postPage .postIcon {
    position: absolute;
    top: 40%;
    left: -60px;
    transition: 0.5s; }
  .post .text img, .postPage .text img {
    display: block; }
  .post .quote blockquote, .postPage .quote blockquote {
    border: none;
    font-size: 2rem;
    position: relative; }
    .post .quote blockquote i.fa-quote-left, .postPage .quote blockquote i.fa-quote-left {
      font-size: 26px;
      color: #87D37C;
      position: absolute;
      z-index: 1;
      left: 10px;
      top: -18px; }
    .post .quote blockquote i.fa-quote-right, .postPage .quote blockquote i.fa-quote-right {
      font-size: 26px;
      position: absolute;
      right: 10px;
      bottom: -18px;
      color: #87D37C; }
  .post .quote .source, .postPage .quote .source {
    text-align: right; }
  .post .link h3, .postPage .link h3 {
    text-align: center; }
    .post .link h3 a, .postPage .link h3 a {
      color: #dc3522;
      transition: 0.3s; }
      .post .link h3 a:hover, .postPage .link h3 a:hover {
        color: #374140; }
  .post .chat .conversation, .postPage .chat .conversation {
    list-style: none;
    margin: 0;
    padding: 0; }
    .post .chat .conversation .line, .postPage .chat .conversation .line {
      margin-top: 10px; }
      .post .chat .conversation .line .person, .postPage .chat .conversation .line .person {
        background: #374140;
        color: #fff;
        padding: 5px 0 5px 5px;
        text-align: center;
        margin-right: 4px;
        border-right: solid #dc3522 3px; }
  .post .answer .asker, .postPage .answer .asker {
    position: relative; }
    .post .answer .asker img, .postPage .answer .asker img {
      display: block; }
    .post .answer .asker p, .postPage .answer .asker p {
      position: absolute;
      bottom: 0;
      padding: 0;
      margin: 0;
      padding: 3px 5px;
      display: none;
      text-align: center;
      background: #fff; }
    .post .answer .asker:hover p, .postPage .answer .asker:hover p {
      display: block; }
  .post .notes ul li img, .postPage .notes ul li img {
    margin-bottom: 4px; }

.metaBlog {
  font-size: 1.5rem;
  margin-top: 10px;
  /* Social post */
  /* Tags */ }
  .metaBlog .socialBlog ul li {
    float: left;
    margin-left: 10px;
    font-size: 20px; }
  .metaBlog .socialBlog ul .permalink {
    margin-top: -4px; }
    .metaBlog .socialBlog ul .permalink a {
      color: #CCCCCC; }
  .metaBlog .tags ul li {
    float: left;
    margin-left: 8px; }
    .metaBlog .tags ul li a {
      font-size: 13px;
      padding: 3px 5px 4px 5px;
      background: #374140;
      color: #fff;
      transition: 0.3s; }
      .metaBlog .tags ul li a:hover {
        background: #fff;
        background: #dc3522; }
  .metaBlog .tags :after {
    clear: both; }
  .metaBlog .date span {
    background: #374140;
    color: #fff;
    padding: 3px 7px 4px 8px; }

/* 7. Pagination */
.pagination {
  margin-top: 10px;
  display: block;
  font-size: 1.6rem; }
  .pagination .jump-page {
    background: #374140;
    color: #fff;
    padding: 5px;
    transition: 0.2s; }
  .pagination .current-page {
    background: #dc3522;
    color: #fff;
    padding: 5px; }
  .pagination .next, .pagination .prev {
    background: #374140;
    color: #fff;
    padding: 5px 10px;
    transition: 0.2s; }
  .pagination .loadMore {
    margin: 0 auto;
    padding-left: 45%; }
    .pagination .loadMore .jump-page {
      padding: 10px 20px; }

#infscr-loading img {
  display: block;
  margin: 0 auto; }

/* 8. Post page */
.postPage {
  padding-top: 10px; }
  .postPage .socialBlog ul li {
    float: left;
    margin-left: 10px;
    font-size: 20px; }
  .postPage .metaPost {
    margin-top: 20px; }
  .postPage .showNotes {
    margin-top: 20px;
    text-align: center;
    cursor: pointer; }
    .postPage .showNotes span {
      padding-left: 6px; }
  .postPage .notes {
    display: none;
    font-size: 1.5rem;
    margin-top: 10px; }
    .postPage .notes ul li {
      margin-top: 5px; }
  .postPage .notesList ol {
    list-style-type: none; }
    .postPage .notesList ol li .avatar_frame {
      position: relative;
      display: block; }
      .postPage .notesList ol li .avatar_frame img {
        position: absolute;
        left: -20px;
        top: 8px; }

/* Commnets */
#disqus_thread {
  margin-top: 20px; }

/* 9. Footer */
footer {
  background: #374140;
  color: #fff;
  padding: 10px 0;
  margin-top: 20px; }
  footer .copyRightYear {
    margin-left: 10px; }
  footer .author {
    text-align: right; }
    footer .author a {
      color: #fff; }

/*10. Media Query */
/* Large desktops and laptops */
/* Portrait tablets and medium desktops */
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 1064px) {
  .post .postIcon {
    left: -40px; } }
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
  iframe {
    max-height: 300px; }

  footer .author {
    text-align: left; } }
/* Landscape phones and smaller */
@media (max-width: 480px) {
  /* Navigation mobile */
  nav {
    left: -177px;
    width: 180px; }

  nav.active {
    left: 0; }

  .navPush {
    margin-left: 177px; } }
/* Icon Res */
/*11. Plugin Style */
@media (min-width: 1200px) and (max-width: 1266px), (min-width: 999px) and (max-width: 1080px), (min-width: 768px) and (max-width: 820px) {
  .post .postIcon {
    left: -40px; } }
/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden; }

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%; }

#cboxMiddleLeft, #cboxBottomLeft {
  clear: left; }

#cboxContent {
  position: relative; }

#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch; }

#cboxTitle {
  margin: 0; }

#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  cursor: pointer; }

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none; }

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0; }

#colorbox, #cboxContent, #cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; }

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
  background: #000000; }

#colorbox {
  outline: 0; }

#cboxContent {
  margin-top: 32px;
  overflow: visible; }

#cboxError {
  padding: 50px;
  border: 1px solid #ccc; }

#cboxLoadedContent {
  background: #000000;
  padding: 1px; }

#cboxLoadingGraphic {
  background: url(http://static.tumblr.com/fftf9xi/rkklqu1ni/loading.gif) no-repeat center center; }

#cboxLoadingOverlay {
  background: #000000; }

#cboxTitle {
  position: absolute;
  top: -22px;
  left: 0;
  color: #ffffff;
  text-shadow: none; }

#cboxCurrent {
  position: absolute;
  top: -22px;
  right: 205px;
  text-indent: -9999px; }

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  width: auto;
  background: none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
  outline: 0; }

#cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose {
  text-indent: -9999px;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -20px;
  background: url(http://static.tumblr.com/fftf9xi/1dslqu1o1/controls.png) no-repeat 0 0; }

#cboxPrevious {
  background-position: 0px 0px;
  right: 44px; }

#cboxPrevious.hover {
  background-position: 0px -25px; }

#cboxNext {
  background-position: -25px 0px;
  right: 22px; }

#cboxNext.hover {
  background-position: -25px -25px; }

#cboxClose {
  background-position: -50px 0px;
  right: 0; }

#cboxClose.hover {
  background-position: -50px -25px; }

.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious {
  right: 66px; }

.cboxSlideshow_on #cboxSlideshow {
  background-position: -75px -25px;
  right: 44px; }

.cboxSlideshow_on #cboxSlideshow.hover {
  background-position: -100px -25px; }

.cboxSlideshow_off #cboxSlideshow {
  background-position: -100px 0px;
  right: 44px; }

.cboxSlideshow_off #cboxSlideshow.hover {
  background-position: -75px -25px; }

/*
== malihu jquery custom scrollbar plugin ==
Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
*/
/*
CONTENTS: 
	1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 
	2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 
	3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar.
	4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 
	5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 
	6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 
		6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes.
*/
/* 
------------------------------------------------------------------------------------------------------------------------
1. BASIC STYLE  
------------------------------------------------------------------------------------------------------------------------
*/
.mCustomScrollbar {
  -ms-touch-action: none;
  touch-action: none;
  /* MSPointer events - direct all pointer events to js */ }

.mCustomScrollbar.mCS_no_scrollbar {
  -ms-touch-action: auto;
  touch-action: auto; }

.mCustomScrollBox {
  /* contains plugin's markup */
  position: relative;
  overflow: hidden;
  height: 100%;
  max-width: 100%;
  outline: none;
  direction: ltr; }

.mCSB_container {
  /* contains the original content */
  overflow: hidden;
  width: auto;
  height: auto; }

/* 
------------------------------------------------------------------------------------------------------------------------
2. VERTICAL SCROLLBAR 
y-axis
------------------------------------------------------------------------------------------------------------------------
*/
.mCSB_inside > .mCSB_container {
  margin-right: 0px; }

.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0; }

/* non-visible scrollbar */
.mCS-dir-rtl > .mCSB_inside > .mCSB_container {
  /* RTL direction/left-side scrollbar */
  margin-right: 0;
  margin-left: 30px; }

.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-left: 0; }

/* RTL direction/left-side scrollbar */
.mCSB_scrollTools {
  /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
  position: absolute;
  width: 16px;
  height: auto;
  left: auto;
  top: 0;
  right: 0;
  bottom: 0; }

.mCSB_outside + .mCSB_scrollTools {
  right: -26px; }

/* scrollbar position: outside */
.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  /* RTL direction/left-side scrollbar */
  right: auto;
  left: 0; }

.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  left: -26px; }

/* RTL direction/left-side scrollbar (scrollbar position: outside) */
.mCSB_scrollTools .mCSB_draggerContainer {
  /* contains the draggable element and dragger rail markup */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: auto; }

.mCSB_scrollTools a + .mCSB_draggerContainer {
  margin: 20px 0; }

.mCSB_scrollTools .mCSB_draggerRail {
  width: 2px;
  height: 100%;
  margin: 0 auto;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px; }

.mCSB_scrollTools .mCSB_dragger {
  /* the draggable element */
  cursor: pointer;
  width: 100%;
  height: 30px;
  /* minimum dragger height */
  z-index: 1; }

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  /* the dragger element */
  position: relative;
  width: 4px;
  height: 100%;
  margin: 0 auto;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  text-align: center; }

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  width: 12px;
  /* auto-expanded scrollbar */ }

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 8px;
  /* auto-expanded scrollbar */ }

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown {
  display: block;
  position: absolute;
  height: 20px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer; }

.mCSB_scrollTools .mCSB_buttonDown {
  bottom: 0; }

/* 
------------------------------------------------------------------------------------------------------------------------
4. VERTICAL AND HORIZONTAL SCROLLBARS 
yx-axis 
------------------------------------------------------------------------------------------------------------------------
*/
.mCSB_container_wrapper {
  position: absolute;
  height: auto;
  width: auto;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-right: 30px;
  margin-bottom: 30px; }

.mCSB_container_wrapper > .mCSB_container {
  padding-right: 30px;
  padding-bottom: 30px; }

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 20px; }

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 20px; }

/* non-visible horizontal scrollbar */
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 0; }

/* non-visible vertical scrollbar/RTL direction/left-side scrollbar */
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 0; }

/* RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 20px; }

/* non-visible scrollbar/RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 0; }

.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper {
  /* RTL direction/left-side scrollbar */
  margin-right: 0;
  margin-left: 30px; }

.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container {
  padding-right: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container {
  padding-bottom: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0;
  /* non-visible scrollbar */
  margin-left: 0; }

/* non-visible horizontal scrollbar */
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0; }

/* 
------------------------------------------------------------------------------------------------------------------------
5. TRANSITIONS  
------------------------------------------------------------------------------------------------------------------------
*/
.mCSB_scrollTools,
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight {
  -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
  transition: opacity .2s ease-in-out, background-color .2s ease-in-out; }

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail {
  -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s,  margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,  margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
  -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s,  margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,  margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
  -o-transition: width .2s ease-out .2s, height .2s ease-out .2s,  margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,  margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out;
  transition: width .2s ease-out .2s, height .2s ease-out .2s,  margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,  margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; }

/* 
------------------------------------------------------------------------------------------------------------------------
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS  
------------------------------------------------------------------------------------------------------------------------
*/
/* 
----------------------------------------
6.1 THEMES 
----------------------------------------
*/
/* default theme ("light") */
.mCSB_scrollTools {
  opacity: 0.75;
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)"; }

.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
  opacity: 0;
  filter: "alpha(opacity=0)";
  -ms-filter: "alpha(opacity=0)"; }

.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollBox:hover > .mCSB_scrollTools,
.mCustomScrollBox:hover ~ .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools {
  opacity: 1;
  filter: "alpha(opacity=100)";
  -ms-filter: "alpha(opacity=100)"; }

.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.4);
  filter: "alpha(opacity=40)";
  -ms-filter: "alpha(opacity=40)"; }

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)"; }

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
  filter: "alpha(opacity=85)";
  -ms-filter: "alpha(opacity=85)"; }

.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
  filter: "alpha(opacity=90)";
  -ms-filter: "alpha(opacity=90)"; }

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight {
  background-image: url(mCSB_buttons.png);
  /* css sprites */
  background-repeat: no-repeat;
  opacity: 0.4;
  filter: "alpha(opacity=40)";
  -ms-filter: "alpha(opacity=40)"; }

.mCSB_scrollTools .mCSB_buttonUp {
  background-position: 0 0;
  /* 
  sprites locations 
  light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px
  dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px
  */ }

.mCSB_scrollTools .mCSB_buttonDown {
  background-position: 0 -20px;
  /* 
  sprites locations
  light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px
  dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px
  */ }

.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: 0 -40px;
  /* 
  sprites locations 
  light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px
  dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px
  */ }

.mCSB_scrollTools .mCSB_buttonRight {
  background-position: 0 -56px;
  /* 
  sprites locations 
  light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px
  dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px
  */ }

.mCSB_scrollTools .mCSB_buttonUp:hover,
.mCSB_scrollTools .mCSB_buttonDown:hover,
.mCSB_scrollTools .mCSB_buttonLeft:hover,
.mCSB_scrollTools .mCSB_buttonRight:hover {
  opacity: 0.75;
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)"; }

.mCSB_scrollTools .mCSB_buttonUp:active,
.mCSB_scrollTools .mCSB_buttonDown:active,
.mCSB_scrollTools .mCSB_buttonLeft:active,
.mCSB_scrollTools .mCSB_buttonRight:active {
  opacity: 0.9;
  filter: "alpha(opacity=90)";
  -ms-filter: "alpha(opacity=90)"; }

/* theme: "dark" */
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15); }

.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75); }

.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.85); }

.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.9); }

.mCS-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px 0; }

.mCS-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -20px; }

.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -40px; }

.mCS-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -56px; }

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