/* wrk-components.css — consolidated from keyframes + modification + modification_index + dashboard + custom + calculator */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700);
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,800");
@import url("https://fonts.googleapis.com/css?family=Alef");
@import url("https://fonts.googleapis.com/css?family=PT+Sans");


/* === FROM keyframes.css === */

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2014 Daniel Eden
*/
/* line 10, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }
/* line 17, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }
/* line 22, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s; }
@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0); } }
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    -ms-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0); }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    -ms-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0); }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    -ms-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0); } }
/* line 87, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom; }
@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }
@keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }
/* line 115, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.flash {
  -webkit-animation-name: flash;
  animation-name: flash; }
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    -ms-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
/* line 159, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse; }
@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    -ms-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    -ms-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    -ms-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    -ms-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    -ms-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
/* line 245, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand; }
@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); } }
@keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    -ms-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    -ms-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); } }
/* line 287, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.shake {
  -webkit-animation-name: shake;
  animation-name: shake; }
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    -ms-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    -ms-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    -ms-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    -ms-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg); }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    -ms-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg); } }
/* line 351, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing; }
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
/* line 418, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.tada {
  -webkit-animation-name: tada;
  animation-name: tada; }
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: none;
    transform: none; }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  100% {
    -webkit-transform: none;
    transform: none; } }
@keyframes wobble {
  0% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    -ms-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    -ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    -ms-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    -ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; } }
/* line 506, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble; }
@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97); }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    -ms-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    -ms-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    -ms-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    -ms-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    -ms-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97); }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
/* line 597, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s; }
@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  100% {
    -webkit-transform: none;
    transform: none; } }
@keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    -ms-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    -ms-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    -ms-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    -ms-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0); }
  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; } }
/* line 677, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown; }
@-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }
  100% {
    -webkit-transform: none;
    transform: none; } }
@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    -ms-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    -ms-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    -ms-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    -ms-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0); }
  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; } }
/* line 755, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft; }
@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }
  100% {
    -webkit-transform: none;
    transform: none; } }
@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    -ms-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    -ms-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0); }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    -ms-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    -ms-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0); }
  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; } }
/* line 833, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight; }
@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
@keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    -ms-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    -ms-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    -ms-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    -ms-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0); }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
/* line 911, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp; }
@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); } }
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    -ms-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    -ms-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    -ms-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); } }
/* line 957, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
  -webkit-animation-duration: .75s;
  animation-duration: .75s; }
@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    -ms-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    -ms-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    -ms-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }
/* line 1005, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown; }
@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    -ms-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    -ms-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }
/* line 1040, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft; }
@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    -ms-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    -ms-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }
/* line 1075, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight; }
@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    -ms-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0); }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    -ms-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    -ms-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }
/* line 1121, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp; }
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/* line 1146, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; } }
/* line 1181, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }
@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }
@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    -ms-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; } }
/* line 1216, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig; }
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; } }
/* line 1251, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }
@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    -ms-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; } }
/* line 1286, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig; }
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; } }
/* line 1321, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }
@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }
@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    -ms-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; } }
/* line 1356, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig; }
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; } }
/* line 1391, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }
@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }
@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    -ms-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; } }
/* line 1426, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig; }
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
/* line 1451, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }
@keyframes fadeOutDown {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); } }
/* line 1481, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown; }
@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }
@keyframes fadeOutDownBig {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    -ms-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0); } }
/* line 1511, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig; }
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); } }
@keyframes fadeOutLeft {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); } }
/* line 1541, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft; }
@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }
@keyframes fadeOutLeftBig {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    -ms-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0); } }
/* line 1571, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig; }
@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); } }
@keyframes fadeOutRight {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); } }
/* line 1601, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight; }
@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }
@keyframes fadeOutRightBig {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    -ms-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0); } }
/* line 1631, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig; }
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); } }
@keyframes fadeOutUp {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); } }
/* line 1661, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp; }
@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }
@keyframes fadeOutUpBig {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    -ms-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); } }
/* line 1691, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig; }
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }
@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -ms-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }
/* line 1775, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip; }
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px); } }
/* line 1854, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX; }
@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); } }
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px); } }
/* line 1933, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY; }
@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0; } }
@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0; } }
/* line 1982, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important; }
@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0; } }
@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px); }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0; } }
/* line 2033, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
  -webkit-animation-duration: .75s;
  animation-duration: .75s; }
@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1; }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1; }
  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }
@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    -ms-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1; }
  80% {
    -webkit-transform: skewX(-5deg);
    -ms-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1; }
  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1; } }
/* line 2099, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }
@-webkit-keyframes lightSpeedOut {
  0% {
    opacity: 1; }
  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0; } }
@keyframes lightSpeedOut {
  0% {
    opacity: 1; }
  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    -ms-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0; } }
/* line 2131, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }
@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }
@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    -ms-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1; } }
/* line 2178, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn; }
@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }
@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    -ms-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1; } }
/* line 2223, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft; }
@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }
@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    -ms-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1; } }
/* line 2268, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight; }
@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }
@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    -ms-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1; } }
/* line 2313, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft; }
@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }
@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    -ms-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1; } }
/* line 2358, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight; }
@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1; }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0; } }
@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    opacity: 1; }
  100% {
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    -ms-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0; } }
/* line 2398, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut; }
@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0, 0, 1, 45deg);
    transform: rotate(0, 0, 1, 45deg);
    opacity: 0; } }
@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0, 0, 1, 45deg);
    -ms-transform: rotate(0, 0, 1, 45deg);
    transform: rotate(0, 0, 1, 45deg);
    opacity: 0; } }
/* line 2438, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft; }
@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }
@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    -ms-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }
/* line 2478, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight; }
@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }
@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    -ms-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }
/* line 2518, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft; }
@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0; } }
@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    -ms-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0; } }
/* line 2558, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight; }
@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1; }
  100% {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0; } }
@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    -ms-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    -ms-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1; }
  100% {
    -webkit-transform: translate3d(0, 700px, 0);
    -ms-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0; } }
/* line 2637, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge; }
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }
@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    -ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none; } }
/* line 2674, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn; }
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }
@keyframes rollOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }
/* line 2706, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut; }
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    -ms-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }
/* line 2736, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn; }
@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
/* line 2779, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown; }
@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
/* line 2822, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft; }
@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
/* line 2865, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight; }
@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
/* line 2908, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp; }
@-webkit-keyframes zoomOut {
  0% {
    opacity: 1; }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  100% {
    opacity: 0; } }
@keyframes zoomOut {
  0% {
    opacity: 1; }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    -ms-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3); }
  100% {
    opacity: 0; } }
/* line 2946, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut; }
@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
/* line 2994, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown; }
@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center; } }
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    -ms-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center; } }
/* line 3034, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft; }
@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center; } }
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    -ms-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center; } }
/* line 3074, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight; }
@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
/* line 3122, /Users/miguelperez/Sites/csstricks/source/stylesheets/keyframes.css.scss */
.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp; }

/* === FROM modification.css === */

.headerOne .navbar-nav {height:74px;}
.navbar-nav {margin: 0 !important;}
.navbar { margin-bottom: 0 !important;}
.navbar-default {background-color: #fff !important;border-color:transparent !important;}
.navbar-brand {padding: 10px 22px !important;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {border-color: #e7e7e7;}
.navbar-default .navbar-toggle {background-color:transparent !important;border-color: #fff200;}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{background-color: #fff200 !important;}
.navbar-toggle {border-radius: 0px !important;}
/* header inputbox */
@media (min-width: 1366px){.navbar-form .form-control {display: inline-block;vertical-align: middle;width:160px;}}
@media (min-width: 1440px){.navbar-form .form-control {display: inline-block;vertical-align: middle;width:210px;}}
@media (min-width: 1600px){.navbar-form .form-control {display: inline-block;vertical-align: middle;width:260px;}}
@media (min-width: 1700px){.navbar-form .form-control {display: inline-block;vertical-align: middle;width:290px;}}
@media (min-width: 1800px){.navbar-form .form-control {display: inline-block;vertical-align: middle;width:330px;}}


body {font-family: "Roboto Condensed",sans-serif !important;}
@font-face {font-family: "Roboto";src: local(Roboto Bold), url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../fonts/roboto/Roboto-Bold.woff") format("woff");font-weight: 700;}
@media (min-width:992px) and (max-width:7560px){
    #top-nav {padding: 0 15px;}
    #top-nav>li {display: inline-block;float: left;}

    #top-nav>.open>.dropdown-menu {float: left;position: absolute;border-top-left-radius: 0;border-top-right-radius: 0;-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); }
    #top-nav>.open>.dropdown-menu>li>a {white-space: normal; padding:10px 15px;}
    #top-nav>.open>.dropdown-menu>li>a:hover{white-space: normal;}
    ul.message-dropdown {padding: 0;max-height: 250px;overflow-x: hidden;overflow-y: auto; }
    li.message-preview {width: 275px;border-bottom: 1px solid rgba(0,0,0,.15);}
    li.message-preview>a {padding-top: 15px;padding-bottom: 15px;}
    li.message-footer {margin: 5px 0;}
    ul.alert-dropdown {width: 200px;}
}
.howWRK_section_heading{color:#797a75;font-size: 32px;font-weight: 300;letter-spacing: 2px;margin-bottom:10px;}
.whyWRK_section_heading{color:#797a75;font-size: 32px;font-weight: 300;letter-spacing: 2px;margin-bottom:20px;}
.whyWRK h4{color:#7a7b75;font-size:24px;font-weight: 300;}
.wanttoWRK h4{color:#333;font-size:24px;font-weight: 300; margin-top:10%;}
.featured-img{width: 100%; height: 360px;float:left;position: relative; padding:15px;}
.featured-img h4{width:100%;float: left;position: relative;padding:20px 0px 0px; margin:0px; color:#333; font-size:21px;}
.featured-img p{width:100%;float: left;position: relative;padding:10px 0px 0px; color:#333; }
.input-field label.error{
    margin-top: -45px;
    left: 20px;
    color: #f3320c;
    font-family: Raleway-medium;
    font-size: 16px;
}
.log_uber ul.nav.navbar-nav.navbar-right li{float:left; padding:0px 12px;}
.log_uber ul.nav.navbar-nav.navbar-right li a:link{background-color: transparent; color:#333 !important; outline:none !important; border-bottom:0px}
.log_uber ul.nav.navbar-nav.navbar-right li a:focus{background-color: transparent; color:#333 !important; outline:none !important; border-bottom:0px}
.log_uber ul.nav.navbar-nav.navbar-right li:hover{ background-color: #fffa04;}
.log_uber ul.nav.navbar-nav.navbar-right li.active{ background-color: #fffa04 !important;}
.log_uber ul.nav.navbar-nav.navbar-right li:first-child {border-radius:6px 0px 0px 6px !important; border-right:1px solid #fff;}
.log_uber ul.nav.navbar-nav.navbar-right li:last-child {border-radius: 0px 6px 6px 0px !important; border-left:1px solid #fff;}
/* full wrapper and  fixed header */

/* .wrapper_main {    min-height: calc(100vh - 248px);max-width: 1650px;margin: 0 auto}
*/
/* .wrapper_main { min-height:calc(100vh - 596px);max-width: 1650px;margin: 0 auto}
*/
.wrapper_main { max-width: 1650px;margin: 0 auto}
.bg_grey {background-color: #fafafa !important}
#table-datatables table.dataTable thead .sorting_asc, #table-datatables table.dataTable thead .sorting { font-size: 14px !important;}
{font-size: 14px !important;}

/* === FROM dashboard.css === */



.admin_container{margin:0px; padding:20px 0px 20px 0px;  background-color:#f3f3f3; display:block; font-family:'Open Sans';}
.time_txt{text-transform:uppercase; font-weight:800; font-size:21px;color:#231f20;}
.title_upper h3{text-transform:uppercase; font-weight:800; margin:0px; padding:0px;color:#231f20; font-size:30px;}
.heading_bar h4{color:#231f20; font-size:21px;}
.line_divider{border-bottom:2px solid #231f20; width:100%; clear:both; margin-bottom:15px;}
.ten-columns  {margin-right: -15px;margin-left: -15px;}
@media (min-width:319px) and (max-width:991px){
    .ten-columns > .col-sm-2 {width: 100%;}
}
@media (min-width:992px) and (max-width:2560px){
    .ten-columns > .col-sm-2 {width: 20%;}
}
.bank_row{padding:0 0 1em 0; margin:0px; float:none;}
.bank_box {color:#231f20;background: #fff none repeat scroll 0 0;transition: all 0.4s ease 0s;text-align: center;position: relative;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); margin-bottom:20px;background-color:#fff; min-height:300px; padding:10px;}
.bank_box:hover {color:#231f20;transition: all 0.4s ease 0s;position: relative;box-shadow: 0px 0px 30px 0px #999;}
.dash_icon {display: table;height:50px;margin: 0 auto;position: relative;text-align: center;width: 80px;padding:0px 0px;}
.bank_box h3{font-family: 'Open Sans'; font-size:21px;font-weight:800;text-transform: uppercase; color:#231f20;}
.dash_txt_ul{font-family:'Open Sans';font-size:14px; margin:6px 0px; padding:0px;}
.dash_txt_ul li{text-align:left; line-height:21px; color:#231f20; }
.dash_txt_ul li:before {content: "+";  padding-right: 4px;color:#231f20;}
.dash_txt_ul li a{text-align:left; text-decoration:none; color:#231f20;}
.dash_txt_ul li a:hover{text-align:left;text-decoration:none; color:#666;}
#footer_dashboard {background-color:#e30031;color:#fff !important;width: 100%;padding:10px;/*line-height:30px; */ text-align:right;bottom:0px; font-size:12px; }
.content-wrapper, .right-side, .main-footer {
    -webkit-transition:-webkit-transform .3s ease-in-out, margin .3s ease-in-out;
    -moz-transition:-moz-transform .3s ease-in-out, margin .3s ease-in-out;
    -o-transition:-o-transform .3s ease-in-out, margin .3s ease-in-out;
    transition:transform .3s ease-in-out, margin .3s ease-in-out;
    margin-left:260px;z-index:820;}
.layout-top-nav .content-wrapper, .layout-top-nav .right-side, .layout-top-nav .main-footer {	margin-left:0}
.fixed.layout-boxed .wrapper {max-width:100%}
.content-wrapper, .right-side {min-height:100%;background-color:#f3f3f3;	z-index:800;}
.main-footer {background:#fff;padding:15px;color:#444;border-top:1px solid #d2d6de; bottom:0px; height:20px;}
.content {min-height:250px;padding:15px;margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
.main-header {/* position:fixed !important;min-height:100px; */ z-index:999;}
.main-header>.navbar {
    -webkit-transition:margin-left .3s ease-in-out;
    -o-transition:margin-left .3s ease-in-out;
    transition:margin-left .3s ease-in-out;
    margin-bottom:0;
    margin-left:260px;
    border:none;
    min-height:60px;
    border-radius:0;
    line-height: 30px;
}
/*.layout-top-nav .main-header>.navbar {margin-left:0!important}
*/
.main-header #navbar-search-input {background:rgba(255,255,255,0.2);border-color:transparent}
.main-header #navbar-search-input:focus, .main-header #navbar-search-input:active {border-color:rgba(0,0,0,0.1) !important;background:rgba(255,55,255,0.9)}
.main-header #navbar-search-input::-moz-placeholder {color:#ccc;opacity:1}
.main-header #navbar-search-input:-ms-input-placeholder {color:#ccc}
.main-header #navbar-search-input::-webkit-input-placeholder {color:#ccc}
.main-header .navbar-custom-menu, .main-header .navbar-right {float:right}
.main-header .sidebar-toggle {position:relative; float:left;padding:10px 22px;font-family:fontAwesome; text-decoration: none; font-size: 25px;

    background-repeat: no-repeat;
    background-position: right -12px; line-height: 55px;}
.main-header .sidebar-toggle:hover:before{
    color: #fff200;

}
.main-header .sidebar-toggle:before {content:"\f0c9"; color:#FFF;}
.main-header .sidebar-toggle:hover {color:#333;}
.main-header .sidebar-toggle:focus, .main-header .sidebar-toggle:active {background:transparent}
.main-header .sidebar-toggle .icon-bar {display:none}
.main-header .navbar .nav>li.user>a>.fa, .main-header .navbar .nav>li.user>a>.glyphicon, .main-header .navbar .nav>li.user>a>.ion {margin-right:5px}
.main-header .navbar .nav>li>a>.label {position:absolute;top:9px;right:7px;text-align:center;font-size:9px;padding:2px 3px;line-height:.9}
.main-header .logo {
    -webkit-transition:width .3s ease-in-out;
    -o-transition:width .3s ease-in-out;
    transition:width .3s ease-in-out;
    display:block;float:left;height:60px;font-size:20px;line-height:60px;text-align:center;
    width:260px;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;    padding:0 15px;font-weight:300;overflow:hidden
}
.main-header .logo .logo-lg {display:block}
.main-header .logo .logo-mini {display:none}
.main-header .navbar-brand {color:#fff}
.content-header {position:relative;padding:70px 15px 0px 15px}
.content-header>h1 {margin:0;font-size:24px}
.content-header>h1>small {font-size:15px;display:inline-block;padding-left:4px;font-weight:300}
.content-header>.breadcrumb {float:right;background:transparent;margin-top:0px;margin-bottom:0;font-size:12px;/* padding:60px 5px;position:absolute; top:15px;*/right:10px;border-radius:2px}
.content-header>.breadcrumb>li>a {color:#444;text-decoration:none;display:inline-block}
.content-header>.breadcrumb>li>a>.fa, .content-header>.breadcrumb>li>a>.glyphicon, .content-header>.breadcrumb>li>a>.ion {margin-right:5px}
.content-header>.breadcrumb>li+li:before {content:'>\00a0'}
@media(min-width:320px)and (max-width:990px) {
    .content-header>.breadcrumb {position:relative;margin-top:5px;margin-bottom:10px;top:0;right:0;float:none;background:#d2d6de;padding:10px}
    .content-header>.breadcrumb li:before {color:#97a0b3}
}
.navbar-toggle {color:#fff;border:0;margin:0;padding:15px 15px}
.main-sidebar, .left-side {display: none; position:absolute;/*top:0; left:0;  margin-top:-17px;*/width:260px;z-index:9;
    -webkit-transition:-webkit-transform .3s ease-in-out, width .3s ease-in-out;
    -moz-transition:-moz-transform .3s ease-in-out, width .3s ease-in-out;
    -o-transition:-o-transform .3s ease-in-out, width .3s ease-in-out;
    transition:transform .3s ease-in-out, width .3s ease-in-out;
    border-right:2px solid #fef200;
}
.sidebar-menu h4{font-family: 'Alef';font-size:18px;color:#fff;border-bottom:2px solid #fff200;margin:10px; padding:10px;text-transform:uppercase;}
.sidebar-menu {list-style:none;margin:0;padding:0; font-family: 'Alef';}
.sidebar-menu>li {position:relative;margin:0;padding:0; border-bottom: 1px solid #353535;}
.sidebar-menu>li>a {padding:12px 5px 12px 15px;display:block}
.sidebar-menu>li>a>.fa, .sidebar-menu>li>a>.glyphicon, .sidebar-menu>li>a>.ion {width:20px}
.sidebar-menu>li .label, .sidebar-menu>li .badge {margin-top:0px;margin-right:5px}
.sidebar-menu li.header {padding:10px 25px 10px 15px;font-size:12px}
.sidebar-menu li>a>.fa-angle-left {width:auto;height:auto;padding:0;margin-right:10px;margin-top:3px}
.sidebar-menu li.active>a>.fa-angle-left {
    -webkit-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    transform:rotate(-90deg)
}
.sidebar-menu li.active>.treeview-menu {display:block; }
.sidebar-menu .treeview-menu {display:none;list-style:none;padding:0;margin:0;padding-left:5px}
.sidebar-menu .treeview-menu .treeview-menu {padding-left:10px; background-color:#3a3333; }
.sidebar-menu .treeview-menu>li {margin:0; text-transform:uppercase;font-family: PT Sans;}
.sidebar-menu .treeview-menu>li>a {padding:10px 5px 10px 0px;;display:block;font-size:13px}
.sidebar-menu .treeview-menu>li>a>.fa, .sidebar-menu .treeview-menu>li>a>.glyphicon, .sidebar-menu .treeview-menu>li>a>.ion {width:20px}
.sidebar-menu .treeview-menu>li>a>.fa-angle-left, .sidebar-menu .treeview-menu>li>a>.fa-angle-down {width:auto}
.sidebar-mini.sidebar-collapse .main-sidebar {
    -webkit-transform:translate(0, 0);
    -ms-transform:translate(0, 0);
    -o-transform:translate(0, 0);
    transform:translate(0, 0);
    z-index:10000;
}
/*
.sidebar-mini.sidebar-collapse .sidebar-menu>li {position:relative}
.sidebar-mini.sidebar-collapse .sidebar-menu>li>a {margin-right:0}
.sidebar-mini.sidebar-collapse .sidebar-menu>li>a>span {border-top-right-radius:4px}
.sidebar-mini.sidebar-collapse .sidebar-menu>li:not(.treeview)>a>span {border-bottom-right-radius:4px}
.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu {padding-top:5px;padding-bottom:5px;border-bottom-right-radius:4px}
.sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>a>span:not(.pull-right), .sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu {display:block!important;position:absolute;width:180px;left:50px}
.sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>a>span {top:0;margin-left:-3px;padding:12px 5px 12px 20px;background-color:inherit}
.sidebar-mini.sidebar-collapse .sidebar-menu>li:hover>.treeview-menu {top:44px;margin-left:0}
.sidebar-mini.sidebar-collapse .main-sidebar .user-panel>.info, .sidebar-mini.sidebar-collapse .sidebar-form, .sidebar-mini.sidebar-collapse .sidebar-menu>li>a>span, .sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu, .sidebar-mini.sidebar-collapse .sidebar-menu>li>a>.pull-right, .sidebar-mini.sidebar-collapse .sidebar-menu li.header {display:none!important}
.sidebar-mini.sidebar-collapse .main-header .logo {width:50px}
.sidebar-mini.sidebar-collapse .main-header .logo>.logo-mini {display:block;margin-left:-15px;margin-right:-15px;font-size:18px}
.sidebar-mini.sidebar-collapse .main-header .logo>.logo-lg {display:none}
.sidebar-mini.sidebar-collapse .main-header .navbar {margin-left:50px}
} */
.sidebar-menu, .main-sidebar .user-panel, .sidebar-menu>li.header {white-space:nowrap!important;overflow:hidden;}
.sidebar-menu:hover {overflow:visible}
.sidebar-form, .sidebar-menu>li.header {overflow:hidden;text-overflow:clip}
.sidebar-menu li>a {position:relative}
.sidebar-menu li>a>.pull-right {position:absolute;top:50%;right:10px;margin-top:-7px}
.control-sidebar-bg {position:fixed;z-index:1000;bottom:0}
.control-sidebar-bg, .control-sidebar {top:0;right:-260px;width:260px;-webkit-transition:right .3s ease-in-out;-o-transition:right .3s ease-in-out;transition:right .3s ease-in-out}
.control-sidebar {position:absolute;padding-top:50px;z-index:1010}
@media (max-width:768px) {
    .control-sidebar {padding-top:100px}
}
.control-sidebar>.tab-content {padding:10px 15px}
.control-sidebar.control-sidebar-open, .control-sidebar.control-sidebar-open+.control-sidebar-bg {right:0}
.control-sidebar-open .control-sidebar-bg, .control-sidebar-open .control-sidebar {right:0}
@media (min-width:768px) {
    .control-sidebar-open .content-wrapper, .control-sidebar-open .right-side, .control-sidebar-open .main-footer {margin-right:260px}
}
/*
.dropdown-menu {box-shadow:none;border-color:#eee}
.dropdown-menu>li>a {color:#777}
.dropdown-menu>li>a>.glyphicon, .dropdown-menu>li>a>.fa, .dropdown-menu>li>a>.ion {margin-right:10px}
.dropdown-menu>li>a:hover {background-color:#e1e3e9;color:#333}
.dropdown-menu>.divider {background-color:#eee}
.navbar-nav .dropdown-menu {-webkit-box-shadow:none !important;box-shadow:none !important}
.navbar-nav>.notifications-menu, .navbar-nav>.messages-menu, .navbar-nav>.tasks-menu {position:relative}
.navbar-nav>.notifications-menu>.dropdown-menu, .navbar-nav>.messages-menu>.dropdown-menu, .navbar-nav>.tasks-menu>.dropdown-menu {width:280px;padding:0 0 0 0!important;margin:0!important;top:100%}
.navbar-nav>.notifications-menu>.dropdown-menu>li, .navbar-nav>.messages-menu>.dropdown-menu>li, .navbar-nav>.tasks-menu>.dropdown-menu>li {position:relative}
.navbar-nav>.notifications-menu>.dropdown-menu>li.header, .navbar-nav>.messages-menu>.dropdown-menu>li.header, .navbar-nav>.tasks-menu>.dropdown-menu>li.header {border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0;background-color:#ffffff;padding:7px 10px;border-bottom:1px solid #f4f4f4;color:#444444;font-size:14px}
.navbar-nav>.notifications-menu>.dropdown-menu>li.footer>a, .navbar-nav>.messages-menu>.dropdown-menu>li.footer>a, .navbar-nav>.tasks-menu>.dropdown-menu>li.footer>a {
border-top-left-radius:0;
border-top-right-radius:0;
border-bottom-right-radius:4px;
border-bottom-left-radius:4px;
font-size:12px;background-color:#fff;padding:7px 10px;border-bottom:1px solid #eeeeee;color:#444!important;text-align:center}
.navbar-nav>.notifications-menu>.dropdown-menu>li.footer>a:hover, .navbar-nav>.messages-menu>.dropdown-menu>li.footer>a:hover, .navbar-nav>.tasks-menu>.dropdown-menu>li.footer>a:hover {text-decoration:none;font-weight:normal}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu, .navbar-nav>.messages-menu>.dropdown-menu>li .menu, .navbar-nav>.tasks-menu>.dropdown-menu>li .menu {max-height:200px;margin:0;padding:0;list-style:none;overflow-x:hidden}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a, .navbar-nav>.messages-menu>.dropdown-menu>li .menu>li>a, .navbar-nav>.tasks-menu>.dropdown-menu>li .menu>li>a {display:block;white-space:nowrap;border-bottom:1px solid #f4f4f4}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a:hover, .navbar-nav>.messages-menu>.dropdown-menu>li .menu>li>a:hover, .navbar-nav>.tasks-menu>.dropdown-menu>li .menu>li>a:hover {background:#f4f4f4;text-decoration:none}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a {color:#444444;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:10px}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a>.glyphicon, .navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a>.fa, .navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a>.ion {width:20px}
.navbar-nav>.messages-menu>.dropdown-menu>li .menu>li>a {
margin:0px;padding:10px 10px}
.navbar-nav>.messages-menu>.dropdown-menu>li .menu>li>a>div>img {margin:auto 10px auto auto;width:40px;height:40px}
.navbar-nav>.messages-menu>.dropdown-menu>li .menu>li>a>h4 {padding:0;margin:0 0 0 45px;color:#444444;font-size:15px;position:relative}
.navbar-nav>.messages-menu>.dropdown-menu>li .menu>li>a>h4>small {color:#999999;font-size:10px;position:absolute;top:0px;right:0px}
.navbar-nav>.messages-menu>.dropdown-menu>li .menu>li>a>p {margin:0 0 0 45px;font-size:12px;color:#888888}
.navbar-nav>.messages-menu>.dropdown-menu>li .menu>li>a:before, .navbar-nav>.messages-menu>.dropdown-menu>li .menu>li>a:after {content:" ";
display:table}
.navbar-nav>.messages-menu>.dropdown-menu>li .menu>li>a:after {clear:both}
.navbar-nav>.tasks-menu>.dropdown-menu>li .menu>li>a {padding:10px}
.navbar-nav>.tasks-menu>.dropdown-menu>li .menu>li>a>h3 {font-size:14px;padding:0;margin:0 0 10px 0;color:#666666}
.navbar-nav>.tasks-menu>.dropdown-menu>li .menu>li>a>.progress {padding:0;margin:0}
.navbar-nav>.user-menu>.dropdown-menu {border-top-right-radius:0;border-top-left-radius:0;padding:1px 0 0 0;border-top-width:0;width:200px}
.navbar-nav>.user-menu>.dropdown-menu, .navbar-nav>.user-menu>.dropdown-menu>.user-body {border-bottom-right-radius:4px;border-bottom-left-radius:4px
}
.navbar-nav>.user-menu>.dropdown-menu>li.user-header {height:110px;padding:10px;text-align:center}
.navbar-nav>.user-menu>.dropdown-menu>li.user-header>img {z-index:5;height:90px;width:90px;border:3px solid;border-color:transparent;border-color:rgba(255,255,255,0.2)
}
.navbar-nav>.user-menu>.dropdown-menu>li.user-header>p {z-index:5;color:#fff;color:rgba(255,255,255,0.8);font-size:17px;margin-top:10px}
.navbar-nav>.user-menu>.dropdown-menu>li.user-header>p>small {display:block;font-size:12px}
.navbar-nav>.user-menu>.dropdown-menu>.user-body {padding:0px 0px 8px 0px;border-bottom:1px solid #f4f4f4;}
.navbar-nav>.user-menu>.dropdown-menu>.user-body:before, .navbar-nav>.user-menu>.dropdown-menu>.user-body:after {content:" ";display:table}
.navbar-nav>.user-menu>.dropdown-menu>.user-body:after {clear:both}
.navbar-nav>.user-menu>.dropdown-menu>.user-body a {color:#337ab7 !important}
.navbar-nav>.user-menu>.dropdown-menu>.user-body a:hover {color:#23527c !important}
.navbar-nav>.user-menu>.dropdown-menu>.user-footer {background-color:#f9f9f9;padding:10px}
.navbar-nav>.user-menu>.dropdown-menu>.user-footer:before, .navbar-nav>.user-menu>.dropdown-menu>.user-footer:after {content:" ";display:table
}
.navbar-nav>.user-menu>.dropdown-menu>.user-footer:after {clear:both}
.navbar-nav>.user-menu>.dropdown-menu>.user-footer .btn-default {color:#666666}
.navbar-nav>.user-menu .user-image {float:left;width:25px;height:25px;border-radius:50%;margin-right:10px;margin-top:-2px}
.open:not(.dropup)>.animated-dropdown-menu {backface-visibility:visible !important;-webkit-animation:flipInX .7s both;-o-animation:flipInX .7s both;animation:flipInX .7s both}
.navbar-custom-menu>.navbar-nav>li {position:relative}
.navbar-custom-menu>.navbar-nav>li>.dropdown-menu {position:absolute;right:0;left:auto}
@media (max-width:991px) {
.navbar-custom-menu>.navbar-nav {float:right}
.navbar-custom-menu>.navbar-nav>li {position:static}
.navbar-custom-menu>.navbar-nav>li>.dropdown-menu {position:absolute;right:5%;left:auto;border:1px solid #ddd;background:#fff}
}
.small-box {border-radius:2px;position:relative;display:block;margin-bottom:20px;box-shadow:0 1px 1px rgba(0,0,0,0.1)}
.small-box>.inner {padding:10px}
.small-box>.small-box-footer {position:relative;text-align:center;padding:3px 0;color:#fff;color:rgba(255,255,255,0.8);display:block;z-index:10;background:rgba(0,0,0,0.1);text-decoration:none}
.small-box>.small-box-footer:hover {color:#fff;background:rgba(0,0,0,0.15)}
.small-box h3 {font-size:38px;font-weight:bold;margin:0 0 10px 0;white-space:nowrap;padding:0}
.small-box p {font-size:15px}
.small-box p>small {display:block;color:#f9f9f9;font-size:13px;margin-top:5px}
.small-box h3, .small-box p {z-index:5px}
.small-box .icon {-webkit-transition:all .3s linear;-o-transition:all .3s linear;transition:all .3s linear;position:absolute;top:-10px;right:10px;z-index:0;font-size:90px;color:rgba(0,0,0,0.50)}
.small-box:hover {text-decoration:none;color:#f9f9f9}
.small-box:hover .icon {font-size:95px}
@media (max-width:767px) {
.small-box {text-align:center}
.small-box .icon {display:none}
.small-box p {font-size:12px}
}
*/

/*
.box {position:relative;border-radius:3px;background:#ffffff;margin-bottom:20px;width:100%;box-shadow:0 1px 1px rgba(0,0,0,0.1)}
*/

.box.box-primary {border-top-color:#3c8dbc}
.box.box-info {border-top-color:#00c0ef}
.box.box-danger {border-top-color:#dd4b39}
.box.box-warning {border-top-color:#f39c12}
.box.box-success {border-top-color:#00a65a}
.box.box-default {border-top-color:#d2d6de}
.bg-red, .bg-yellow, .bg-aqua, .bg-blue, .bg-light-blue, .bg-green, .bg-navy, .bg-teal, .bg-olive, .bg-lime, .bg-orange, .bg-fuchsia, .bg-purple, .bg-maroon, .bg-black, .bg-red-active, .bg-yellow-active, .bg-aqua-active, .bg-blue-active, .bg-light-blue-active, .bg-green-active, .bg-navy-active, .bg-teal-active, .bg-olive-active, .bg-lime-active, .bg-orange-active, .bg-fuchsia-active, .bg-purple-active, .bg-maroon-active, .bg-black-active, .callout.callout-danger, .callout.callout-warning, .callout.callout-info, .callout.callout-success, .alert-danger, .alert-error, .alert-warning, .alert-info, .label-danger, .label-info, .label-waring, .label-primary, .label-success, .modal-primary .modal-body, .modal-primary .modal-header, .modal-primary .modal-footer, .modal-warning .modal-body, .modal-warning .modal-header, .modal-warning .modal-footer, .modal-info .modal-body, .modal-info .modal-header, .modal-info .modal-footer, .modal-success .modal-body, .modal-success .modal-header, .modal-success .modal-footer, .modal-danger .modal-body, .modal-danger .modal-header, .modal-danger .modal-footer {color:#fff !important}
.bg-gray {color:#000;background-color:#d2d6de !important}
.bg-black {background-color:#111 !important}
.bg-red, .callout.callout-danger, .alert-danger, .alert-error, .label-danger, .modal-danger .modal-body {background-color:#dd4b39 !important}
.bg-yellow, .callout.callout-warning, .alert-warning, .label-waring, .modal-warning .modal-body {background-color:#f39c12 !important}
.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body {background-color:#00c0ef !important}
.bg-blue {background-color:#0073b7 !important}
.bg-light-blue, .label-primary, .modal-primary .modal-body {background-color:#3c8dbc !important}
.bg-green, .callout.callout-success,  .label-success, .modal-success .modal-body {background-color:#00a65a !important}
.bg-navy {background-color:#001f3f !important}
.bg-teal {background-color:#39cccc !important}
.bg-olive {background-color:#3d9970 !important}
.bg-lime {background-color:#01ff70 !important}
.bg-orange {background-color:#ff851b !important}
.bg-fuchsia {background-color:#f012be !important}
.bg-purple {background-color:#605ca8 !important}
.bg-maroon {background-color:#d81b60 !important}
.bg-green {background-color:#ff0037 !important}
.skin-blue .main-header .navbar {background-color:#fff;/*box-shadow: 4px 0px 4px;*/ box-shadow:4px 4px 4px rgba(0,0,0,0.1)}
.skin-blue .main-header .navbar .nav>li>a {color:#333}
.skin-blue .main-header .navbar .nav>li>a:hover, .skin-blue .main-header .navbar .nav>li>a:active, .skin-blue .main-header .navbar .nav>li>a:focus, .skin-blue .main-header .navbar .nav .open>a, .skin-blue .main-header .navbar .nav .open>a:hover, .skin-blue .main-header .navbar .nav .open>a:focus {
    background:rgba(0,0,0,0.1);color:#f6f6f6; line-height:30px;}
.skin-blue .main-header .navbar .sidebar-toggle:hover {color:#f6f6f6;background:rgba(0,0,0,0.1)}
.skin-blue .main-header .navbar .sidebar-toggle {color:#e30031;}
/*  .skin-blue .main-header .navbar .sidebar-toggle:hover {background-color:#c5062f;}
*/
@media (max-width:767px) {
    .skin-blue .main-header .navbar {background-color:#666; box-shadow:4px 4px 4px rgba(0,0,0,0.1); border-bottom: 5px solid #fff200;}
    .skin-blue .main-header .navbar .sidebar-toggle {color:#fff;}


    .skin-blue .main-header .navbar .dropdown-menu li.divider {background-color:rgba(255,255,255,0.1)}
    .skin-blue .main-header .navbar .dropdown-menu li a {color:#fff}
    .skin-blue .main-header .navbar .dropdown-menu li a:hover {background:#c5062f;}
}
.skin-blue .main-header .logo {background-color:#fff;color:#fff;border-bottom:0 solid transparent; box-shadow: 4px 4px 4px rgba(0,0,0,0.1);}
.skin-blue .main-header .logo:hover {background-color:#fff;}
.skin-blue .main-header li.user-header {background-color:#c5062f;}
.skin-blue .content-header {background:transparent}
.skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side {background-color:#231f20;}
.skin-blue .user-panel>.info, .skin-blue .user-panel>.info>a {color:#fff}
.skin-blue .sidebar-menu>li.header {color:#4b646f;background:#1a2226;}
.skin-blue .sidebar-menu>li>a { font-size: 14px; text-transform: uppercase; text-decoration:none;}
.skin-blue .sidebar-menu>li:hover>a, .skin-blue .sidebar-menu>li.active>a {color:#fff;background-color:#332d2d;transition: all 0s ease 0s, all 0.8s ease 0s;}
.skin-blue .sidebar-menu>li>.treeview-menu {margin:0 1px;background:#332d2d;}
.skin-blue .sidebar a {color:#fff;}
.skin-blue .sidebar a:hover {text-decoration:none}
.skin-blue .treeview-menu>li>a {color:#ccc; /* border-bottom: 1px solid #5f5f5f; */ padding-left:15px;}
.skin-blue .treeview-menu>li.active>a, .skin-blue .treeview-menu>li>a:hover {color:#fff;}
@media (min-width:320px)and (max-width:767px) {
    .skin-blue .sidebar-form {border-radius:3px;/*border:1px solid #37410000;*/margin:60px 10px 10px 10px;}
}
@media (min-width:768px)and (max-width:2560px) {
    .skin-blue .sidebar-form {border-radius:3px;/*border:1px solid #37410000;*/margin:10px 10px 10px 10px;}
}
.skin-blue .sidebar-form input[type="text"], .skin-blue .sidebar-form .btn {
    box-shadow:none; /* background-color:#37410000; */
    border:1px solid transparent;height:35px;
    -webkit-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out
}
.skin-blue .sidebar-form input[type="text"] {
    color:#666;
    border-top-left-radius:2px !important;
    border-top-right-radius:0 !important;
    border-bottom-right-radius:0 !important;
    border-bottom-left-radius:2px !important
}
.skin-blue .sidebar-form input[type="text"]:focus, .skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn {background-color:#fff;color:#666}
.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn {border-left-color:#fff}
.skin-blue .sidebar-form .btn {color:#999;
    border-top-left-radius:0 !important;
    border-top-right-radius:2px !important;
    border-bottom-right-radius:2px !important;
    border-bottom-left-radius:0 !important}
.skin-blue.layout-top-nav .main-header>.logo {background-color:#37410000;color:#fff;border-bottom:0 solid transparent}
.skin-blue.layout-top-nav .main-header>.logo:hover {background-color:#3b8ab8}
/*----------box-pannel--------------*/
.box.height-control .box-body {max-height: 300px;  overflow: auto;}
.box {position: relative;background: transparent; margin-bottom: 20px;  /* -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;  width: 100%;  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); */}
.box .box-header {position: relative; /* -webkit-border-radius: 3px 3px 0px 0px;  -moz-border-radius: 3px 3px 0px 0px;  border-radius:3px 3px 0px 0px;  color: #333;  background-color:#666; */  background-color: transparent;  /*border-bottom: 2px solid #ddd; */}
.box .box-header:before,
.box .box-header:after {display: table;content: " ";}
.box .box-header:after {clear: both;}
.box .box-header .box-title {display: inline-block;padding:10px 10px;margin: 0;font-size: 24px;font-weight:800;float: left;cursor: default;color:#231f20; font-family: 'Open Sans'; text-transform: uppercase;}
.box .box-body {padding: 10px;-webkit-border-radius: 3px 3px 0px 0px;-moz-border-radius: 3px 3px 0px 0px;border-radius:3px 3px 0px 0px;}
.box-header .add {margin: 0px;padding: 6px 10px;}
/* new css */

.sidebar-menu li span.badge{background-color:#fff; color:#231f20; border:2px solid #fff200; border-radius:50%;}
.tile_stats_count{margin-bottom:40px; display: inline-flex;}
.tile_stats_count .left {border-left: 4px solid #d0d0d8;float: left;height:115px;width: 15%; margin:0px 10px 0px 0px;}
.tile_stats_count .left.colored {border-left: 4px solid #359cfb;}
.tile_stats_count .rightTxt {height: 100%; /*overflow: hidden; */ padding-left:2px;text-overflow: inherit; float:left;}
.tile_stats_count .rightTxt span {text-overflow: inherit;white-space: nowrap;}
.tile_stats_count .count {font-size:80px;font-weight:700;line-height:80px; color:#231f20;}
.tile_stats_count span.count_top{font-weight:800; text-transform:uppercase; font-size:14px; color:#000;}
.tile_stats_count span.count_bottom{text-transform:uppercase; color:#231f20; font-size:14px;}
.data_green{ color:#00a65a; font-weight:600; margin-right:5px;}
.data_red{ color:#dd4b39; font-weight:600;margin-right:5px;}
.count_bottom i {width: 12px;}
h3.box-title span.badge{border:2px solid #fff200 !important; background-color:#fff !important; color:#231f20; font-weight:normal;}
#systemmessag{margin:0px; padding:0px; overflow-y:auto; height:160px;}
article:nth-child(2n+0) {background-color:#ffffff; }
article:nth-child(2n+1) {background-color:#f9f9f9;}
article.media {width: 100%; padding:6px 10px; margin:0px;border-bottom:1px solid #ddd;}
.media .date {background: #ccc none repeat scroll 0 0;border-radius:2px;margin-right:20px;padding: 2px;width:44px;text-decoration: none;}
.media .date .month {color: #fff;margin: 0;text-align: center;text-decoration:none; font-size:13px;}
.media .date .day {color: #fff;font-size:18px;font-weight:600;line-height:18px;margin:2px 0px;text-align: center;}
.event .media-body a.title {font-weight: bold;text-decoration: none; color:#231f20;}
a {text-decoration: none;}
a, a:visited, a:focus, a:active, *:visited, *:focus, *:active, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus {outline: 0 none;}
.demo-container .legend{display:none;}
/********************************/
/*      credit tracking   */
/********************************/
.credit_tracking{padding:10px 0px 0px 0px;}
.creadit_box{position: relative;padding:0px; margin-bottom:10px;display:inline-block;}
/* .credit_img img {width: 100%;}
*/
.credit_img {margin:0;}
.btn.bg_credit {border-bottom: none !important;color: #231f20 !important; background-color: #d2d2d2 !important; font-weight:700; font-size:14px;}
.btn.bg_credit:hover {box-shadow:0px 2px 10px #999999; }
/************************************/



.calendar{padding:0px; float:none; width:100%;}
.calendar_left{background-color: #212126; height:280px; border-radius:6px 0px 0px 6px; padding: 20px 10px;}
.calendar_right{background-color:#fef200; height:280px; border-radius:0px 6px 6px 0px; text-align:center;}
.calendar_right .date{color:#fff; font-size:60px; margin:0px; padding:0px 0px;font-weight:600; font-style: italic;}
.calendar_right .day{color:#32323c; font-size:14px;margin:0px; padding:0px 0px; font-style: italic; font-weight:600; text-transform:uppercase; }
.calendar_right .dateday{color:#32323c; font-size:13px;margin:0px; padding:0px 0px; font-style: italic; font-weight:600; text-transform:uppercase;}
.calendar table{width: 100%;padding: 10px;color: #fff;}
.calendar th{font-weight: normal;font-size: 14px;color: #fff203;}
.calendar td{font-weight: normal;font-size: 12px;text-align: center;}
.calendar td > span{display: inline-block;text-align: center;padding:0px; margin: 0px;width: 25px; height: 25px;line-height: 24px; font-size:12px; font-weight:600;}
.calendar td > span:hover{color:#fef200;font-weight:600;}
.calendar td > span.active{border: 2px solid #fff203;border-radius: 30px;}
.calendar td, th{padding:5px 0px}
.calendar thead {border-bottom: 1px solid transparent;}
/* 2nd edition */

.select_month{font-weight:bold;}

/* === FROM custom.css === */

/* *********  /moris  **************************** */

.morris-hover {position: absolute;z-index: 1000;}
.morris-hover.morris-default-style {padding: 6px;color: #666;background: #ffffff;border: solid 2px #fff200;font-family: sans-serif;font-size: 12px;text-align: center;box-shadow: 0 2px 7px rgba(0,0,0,.21);border-radius: 8px;}
.morris-hover.morris-default-style .morris-hover-row-label {font-weight: bold;margin: 0.25em 0; font-style:italic;}
.morris-hover.morris-default-style .morris-hover-point {white-space: nowrap;margin: 0.1em 0;}
.morris-hover-point {color:#666 !important;}
/* *********  /moris  **************************** */
/* some other comment */

#wrk_admin_services_cat, #parentCategory{
    display: block;
}
#parentCategory+label, #qntype+label, #qncategory+label {
    position: absolute;
    top: -22px;
    font-size: .8rem;
}
#wrk-policy select {
    display: block;
}

/* === FROM calculator.css === */

/* calculator */
#calculator {
  border: 1px solid #aaa; 
  min-width: 100%;
  padding: 15px 15px 15px 15px;
  font-size: 12px;
  font-family: 'Open Sans',serif;
  background: #fff;
  box-shadow: 0 0 10px #666; 
  cursor: move;
}
#calculator #display {
  border: 1px solid #aaa; 
  height: 35px;
  line-height: 35px;
  font-size: 18px;
  width:98%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin: auto;
  margin-bottom: 5px;
  text-align: right;
  padding: 0 5px;
  cursor: auto;
  background-color:#fff;
}
#calculator table td {
  width: 50px;
  height:40px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  padding:0;
}
#calculator table td:hover {
  background: #333;
}
.equal:hover {
  background: #f2f2f2 !important;
}
.number, .dot {
  background: #212226;
  border: 4px solid #d2d2d2;
}
.operation, .clear {
  background: #515257;
  border: 4px solid #d2d2d2;
}
.equal {
  background: #ffffff;
  border: 4px solid #d2d2d2;
  color: #333 !important;
  font-size: 15px;
}


/* ============================== MODIFICATION (merged from modification.css) ============================== */


body {font-family: "Roboto Condensed",sans-serif !important;}

@font-face {font-family: "Roboto";src: local(Roboto Thin), url("../fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../fonts/roboto/Roboto-Thin.woff") format("woff");font-weight: 100;}
@font-face {font-family: "Roboto";src: local(Roboto Light), url("../fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../fonts/roboto/Roboto-Light.woff") format("woff");font-weight: 300;}
@font-face {font-family: "Roboto";src: local(Roboto Regular), url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../fonts/roboto/Roboto-Regular.woff") format("woff");font-weight: 400;}
@font-face {font-family: "Roboto";src: local(Roboto Medium), url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../fonts/roboto/Roboto-Medium.woff") format("woff");font-weight: 500;}
@font-face {font-family: "Roboto";src: local(Roboto Bold), url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../fonts/roboto/Roboto-Bold.woff") format("woff");font-weight: 700;}

.m-t-b-0{margin-top:5px !important;margin-bottom:5px !important;}
.m-t-5{margin-top:5px;}
.m-t-10{margin-top:10px;}
.m-t-15{margin-top:15px;}

.m-b-5{margin-bottom:5px;}
.m-b-10{margin-bottom:10px;}
.m-b-15{margin-bottom:15px;}


.headerOne .navbar-nav {height:74px;}
.navbar-nav {margin: 0 !important;}
.navbar { margin-bottom: 0 !important;}
.navbar-default {background-color: #fff !important;border-color:transparent !important;}
.navbar-brand {padding: 10px 22px !important;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {border-color: #e7e7e7;}

.navbar-default .navbar-toggle {background-color:transparent !important;border-color: #fff200;}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{background-color: #fff200 !important;}
.navbar-toggle {border-radius: 0px !important;}

/* header inputbox */
@media (min-width:992px) and (max-width:1019px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:160px;}
}
@media (min-width:1020px) and (max-width:1079px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:210px;}
}
@media (min-width:1080px) and (max-width:1099px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:260px;}
}
@media (min-width:1100px) and (max-width:1139px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:290px;}
}
@media (min-width:1140px) and (max-width:1199px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:330px;}
}
@media (min-width:1200px) and (max-width:1259px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width: 380px;}
}
@media (min-width:1260px) and (max-width:1279px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:430px;}
}
@media (min-width:1280px) and (max-width:1339px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:450px;}
}
@media (min-width:1340px) and (max-width:1379px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:520px;}
}
@media (min-width:1380px) and (max-width:1439px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:580px;}
}
@media (min-width:1440px) and (max-width:1479px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:600px;}
}
@media (min-width:1480px) and (max-width:1499px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:680px;}
}
@media (min-width:1500px) and (max-width:1559px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:700px;}
}
@media (min-width:1560px) and (max-width:1599px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:750px;}
}
@media (min-width:1600px) and (max-width:1659px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:750px;}
}
@media (min-width:1660px) and (max-width:2560px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:750px;}
}
@media (min-width:2561px){
    .navbar-form .form-control {display: inline-block;vertical-align: middle;width:750px;}
}
/* Top Navigation */

@media (min-width:319px) and (max-width:767px){
    .single_topheader{margin-top:134px;}
    .botheader_tab_menu{margin-top:0px;}
    .botheader_tab_menu.navbar-default{background-color:#282828 !important; }
    .botheader_tab_menu.navbar{z-index:10;}
    .wrk_index_header{margin-top:121px;}
}

@media (min-width:768px) and (max-width:2560px){
    .single_topheader{margin-top:94px;}
    .botheader_tab_menu{margin-top:0px; }
    .botheader_tab_menu.navbar-default{background-color:#282828 !important;}
    .botheader_tab_menu.navbar{z-index:99;}
    .wrk_index_header{margin-top:75px;}
}

@media (min-width:319px) and (max-width:767px){
    .notif_icon .badge {border-radius: 50%;font-size: 11px;font-weight: normal;height: 16px;left: 20px;line-height: 14px;padding: 0;position: absolute;text-align: center;top: 6px;width: 16px;}
    .bg-red {background: #f3320c none repeat scroll 0 0 !important;border: 1px solid #f3320c !important;color: #fff;}
}
@media (min-width:768px) and (max-width:991px){
    .notif_icon .badge {border-radius: 50%;font-size: 11px;font-weight: normal;height: 16px;left: 20px;line-height: 14px;padding: 0;position: absolute;text-align: center;top: 20px;width: 16px;}
    .bg-red {background: #f3320c none repeat scroll 0 0 !important;border: 1px solid #f3320c !important;color: #fff;}
}

@media (min-width:992px) and (max-width:7560px){
    .notif_icon .badge {border-radius: 50%;font-size: 11px;font-weight: normal;height: 16px;left: 20px;line-height: 14px;padding: 0;position: absolute;text-align: center;top: 20px;width: 16px;}
    .bg-red {background: #f3320c none repeat scroll 0 0 !important;border: 1px solid #f3320c !important;color: #fff;}
}

#header_tab_menu .navbar-default .navbar-nav >  li  > a {color: #999; background: #282828}
#header_tab_menu .navbar-default .navbar-nav >  li  > a:hover {color: #fff;}
#header_tab_menu .navbar-default .navbar-nav >  li  > a:focus{color: #999; }
#header_tab_menu .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus {background-color: transparent !important;border-bottom: 2px solid #fff200;color: #fff;}


@media (min-width:319px) and (max-width:767px){
    #top-nav {padding: 0 0px;}
    #top-nav>li {display: inline-block;float: left;}
    #top-nav>li>a {padding-top: 15px;padding-bottom: 15px;line-height:20px;color: #999; border-right: 1px solid #ccc;}
    #top-nav>li>a:hover,
    #top-nav>li>a:focus,
    #top-nav>.open>a,
    #top-nav>.open>a:hover,
    #top-nav>.open>a:focus {/*background-color: #000;*/ color:#fff200;}
    #top-nav>.open>.dropdown-menu {float: left;position: absolute;-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);box-shadow: 0 6px 12px rgba(0,0,0,.175);}
    #top-nav>.open>.dropdown-menu>li>a {white-space: normal;}
    #top-nav.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {background-color: #2e2e2e; color:#fff200; border-color: #ccc;}
    #top-nav>.open>.dropdown-menu>li>a {white-space: normal; padding:10px 15px;}
    #top-nav>.open>.dropdown-menu>li>a:hover{white-space: normal; padding:10px 15px;}
    ul.message-dropdown {padding: 0;max-height: 250px;overflow-x: hidden;overflow-y: auto; }
    li.message-preview {width: 275px;border-bottom: 1px solid rgba(0,0,0,.15);}
    li.message-preview>a {padding-top: 15px;padding-bottom: 15px;}
    li.message-footer {margin: 5px 0;}
    ul.alert-dropdown {width: 200px;}

}

@media (min-width:768px) and (max-width:991px){
    #top-nav {padding: 0 14px;}
    #top-nav>li {display: inline-block;float: left;}
    #top-nav>li>a {padding-top: 15px;padding-bottom: 15px;line-height: 44px;color: #FFF;border-right: 1px solid #eee;}
    #top-nav>li>a:hover,
    #top-nav>li>a:focus,
    #top-nav>.open>a,
    #top-nav>.open>a:hover,
    #top-nav>.open>a:focus {/*background-color: #000;*/ color:#fff200;}
    #top-nav>.open>.dropdown-menu {float: left;position: absolute;-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); }
    #top-nav>.open>.dropdown-menu>li>a {white-space: normal; padding:10px 15px;}
    #top-nav>.open>.dropdown-menu>li>a:hover{white-space: normal; padding:10px 15px; background-color:#fff200;}
    ul.message-dropdown {padding: 0;max-height: 250px;overflow-x: hidden;overflow-y: auto; }
    li.message-preview {width: 275px;border-bottom: 1px solid rgba(0,0,0,.15);}
    li.message-preview>a {padding-top: 15px;padding-bottom: 15px;}
    li.message-footer {margin: 5px 0;}
    ul.alert-dropdown {width: 200px;}
}

@media (min-width:992px) and (max-width:7560px){
    #top-nav {padding: 0 15px;}
    #top-nav>li {display: inline-block;float: left;}

    #top-nav>.open>.dropdown-menu {float: left;position: absolute;border-top-left-radius: 0;border-top-right-radius: 0;-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); }
    #top-nav>.open>.dropdown-menu>li>a {white-space: normal; padding:10px 15px;}
    #top-nav>.open>.dropdown-menu>li>a:hover{white-space: normal;}
    ul.message-dropdown {padding: 0;max-height: 250px;overflow-x: hidden;overflow-y: auto; }
    li.message-preview {width: 275px;border-bottom: 1px solid rgba(0,0,0,.15);}
    li.message-preview>a {padding-top: 15px;padding-bottom: 15px;}
    li.message-footer {margin: 5px 0;}
    ul.alert-dropdown {width: 200px;}
}

section{margin:0px; padding:0px;}
.banner{margin:-20px 0px 0px 0px; padding:0px;}
.searchBG{margin:0px; padding:40px 0px; background-color:#d3d2ce; display:block;}
.searchBG_inner{margin:0px; padding:0px 0px 0px 0px; background-color:#fff; float:left; width:100%; border-radius:4px;}

.searchBG_inner .input-field {margin: 0rem 0;position: relative;}
.searchBG_inner .select-wrapper input.select-dropdown {background-color: transparent;border-color: -moz-use-text-color -moz-use-text-color #fff;
    margin: 0 0 0 0px;}

.howWRK{margin:0px; padding:40px 0px; background-color:#ececec; display:block;}
.howWRK_section_heading{color:#797a75;font-size: 32px;font-weight: 300;letter-spacing: 2px;margin-bottom:10px;}

@media (min-width:319px) and (max-width:767px){
    .how_works_ul{margin:0px; padding:0px;}
    .how_works_ul li{margin:0px 0px; padding:0px;width:100%;display:inline-block;border: 0 none;box-sizing: border-box;outline: medium none; float:left;}
    .how_works_ul li a{margin:0px 0px; padding:0px; width:100%; display:inline-block;border:0 none;box-sizing: border-box;outline: medium none; float:left;}
    .how_works_ul li a:hover{margin:0px 0px; padding:0px;  display:inline-block;border:0 none;box-sizing: border-box;outline: medium none; float:left;  text-decoration:none; transition: all .4s;  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.15); margin-top: -5px;}
    .how_works_ul li .box{width:100%; padding:10px; margin-bottom:15px; }
    .how_works_ul li .box .boximg{width:100%; padding:10px; text-align: center; position:relative; margin:0px auto;}
    .how_works_ul li .box .boxtext{text-align:left; position:relative; color:#666;line-height:21px;}
}

@media (min-width:768px) and (max-width:991px){
    .how_works_ul{margin:0px; padding:0px;}
    .how_works_ul li{margin:0px 0px; padding:0px;width:50%;display:inline-block;border: 0 none;box-sizing: border-box;outline: medium none; float:left;}
    .how_works_ul li a{margin:0px 0px; padding:0px; width:100%; display:inline-block;border:0 none;box-sizing: border-box;outline: medium none; float:left;}
    .how_works_ul li a:hover{margin:0px 0px; padding:0px;  display:inline-block;border:0 none;box-sizing: border-box;outline: medium none; float:left;  text-decoration:none; transition: all .4s;  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.15); margin-top: -5px;}
    .how_works_ul li .box{width:100%; padding:10px; margin-bottom:15px; }
    .how_works_ul li .box .boximg{width:100%; padding:10px; text-align: center; position:relative; margin:0px auto;}
    .how_works_ul li .box .boxtext{text-align:left; position:relative; color:#666;}
}

@media (min-width:992px) and (max-width:2560px){
    .how_works_ul{margin:0px; padding:0px;}
    .how_works_ul li{margin:0px 0px; padding:0px; width:20%; display:inline-block;border:0 none;box-sizing: border-box;outline: medium none; float:left; }
    .how_works_ul li a{margin:0px 0px; padding:0px; width:100%; display:inline-block;border:0 none;box-sizing: border-box;outline: medium none; float:left;}
    .how_works_ul li a:hover{margin:0px 0px; padding:0px;  display:inline-block;border:0 none;box-sizing: border-box;outline: medium none; float:left;  text-decoration:none; transition: all .4s;  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.15); margin-top: -5px;}
    .how_works_ul li .box{width:100%; padding:10px; margin-bottom:15px; }
    .how_works_ul li .box .boximg{width:100%; padding:10px; text-align: center; position:relative; margin:0px auto;}
    .how_works_ul li .box .boxtext{text-align:left; position:relative; color:#666;}
}

.whyWRK{margin:0px; padding:40px 0px; background-color:#ffffff; display:block;}
.whyWRK_section_heading{color:#797a75;font-size: 32px;font-weight: 300;letter-spacing: 2px;margin-bottom:20px;}
.whyWRK h4{color:#7a7b75;font-size:24px;font-weight: 300;}
.whyWRK p{color:#999;font-size:14px; line-height:18px; font-weight:normal; /* font-style:italic; */}
.categoriesWRK{margin:0px; padding:40px 0px; background-color:#3d3d3d; display:block;}
.fields_heading{margin:0px; padding:20px 0px;color:#fff200; display:block;}
.fields_subtext{margin:0px; padding:0px 0px 20px 0px;color:#999; display:block; font-size:24px; text-align:center;}
.getpriceWRK{margin:0px; padding:40px 0px;  display:block; background:#fffa00 url("../images/yellow_bg.png") no-repeat scroll 0 0 / 33% auto;}
.getpriceWRK_section_heading{color:#333;font-size:24px;font-weight: 300;letter-spacing: 2px;margin-bottom:20px; text-align:center;}
.getpriceWRK p{color:#666;font-size:16px; line-height:24px; font-weight:normal; text-align:center;}

.getpriceWRK_icon {border: 2px solid #333;border-radius: 50%;display: table;height:50px;margin: 0 auto;position: relative;text-align: center;
    transition: all 0.3s ease 0s;width:50px;}
.getpriceWRK_icon i {color: #333;display: table-cell;font-size: 18px;vertical-align: middle;}
.getpriceWRK_icon i:hover{color: #666;}
.getpriceWRK .icon_txt {color:#333;font-size:18px; line-height:24px; font-weight:normal;}

.wanttoWRK{margin:0px; padding:40px 0px; background-color:#c7c7c7; display:block;}
.wanttoWRK h4{color:#333;font-size:24px;font-weight: 300; margin-top:10%;}
.wanttoWRK p{color:#666;font-size:21px; line-height:24px; font-weight:normal;}

span.italic{font-weight:600; font-style: italic;}
.weareWRK{margin:0px; padding:40px 0px; background-color:#ffffff; display:block;}
.weareWRK_section_heading{color:#333;font-size:24px;margin-bottom:20px; text-align:center;}
.weareWRK .subtit{color:#999;font-size:18px;margin-bottom:20px; text-align:center;}
.weareWRK .element{padding:0px 0px 20px 0px;  margin:0px; float:left;}
.weareWRK .element h4{color: #333;font-weight: 600;font-size: 18px;margin-bottom: 17px; text-align:left;margin:10px 0 0px 0;padding: 0 10px;}
.weareWRK .element p {color: #666;font-weight: 400;font-size:14px;line-height:21px;margin:10px 0 0px 0;padding: 0 10px; text-align:left;}
.weareWRK .italic_letter{padding:0px 0px 0px 20px;  margin:0px; float:left; font-size:18px; font-style:italic; color:#666;}

.makeWRK{margin:0px; padding:40px 0px; background-color:#ececec; display:block;}
.makeWRK_section_heading{color:#333;font-size:24px;margin-bottom:20px; text-align:center;}
.makeWRK .box{margin:0px; padding:0px 0px; display:block;}

.no_padding{padding:0px !important;}
.no_margin{margin:0px !important;}
.no_margin_bottom{margin-bottom:0px !important;}
.no_border{border:none !important;}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus {background-color: #fff200 !important;}
.btn-warning, .btn-warning:hover, .btn-warning:active, .btn-warning:focus {background-color: #ff9600 !important;}
.btn-danger, .btn-danger:hover, .btn-danger:active, .btn-danger:focus {background-color: #fb483a !important;}

.form-control-static.preview { padding-top: 44px;}

.panel-default > .panel-heading {background-color: #545454 !important;border-color: #ddd;color: #fff;	}
.panel-heading .box-title  {color: #fff;font-size: 18px !important;margin: 0;font-weight:600;padding:2px 0px;}
.panel-heading .box-title  span{color: #ccc;font-size: 18px !important;font-weight:normal;}

.panel {border-radius: 0px !important;}
.panel-heading {border-top-left-radius: 0px !important;border-top-right-radius: 0px !important;}

.previev_panel{border:1px solid #fff200;}
.modal-header.bg-success{ background-color:#a5a5a5 !important; color:#fff;}
.modal-header.bg-danger {background-color: #f3320c !important;color: #fff;}

/*-----------registration----------- */
.registration_main{/* background-color:#f1f1f1;*/ margin:0px; padding:0px;display:block;  position:relative;}

.close_Btn_Bg{background-color:#f44336 !important; padding:10px; float:right; margin:-15px;}
.close_Btn_Bg .close {color: #fff;opacity: 1 !important; }

@media (min-width:319px) and (max-width:399px){
    .modal-dialog.loginboxright{}
}
@media (min-width:400px) and (max-width:599px){
    .modal-dialog.loginboxright{}
}
@media (min-width:600px) and (max-width:2560px){
    .modal-dialog.loginboxright{float:right !important;top:40px; margin-right:15px;}
}
.loginboxright .modal-content{height: 600px; overflow-y: auto;}

.btn_gap{margin:0px 6px 6px 0px;}
.upload_drop_bg{padding:50px 0; margin:15px 15px 15px 15px; position:relative; float:left; display:block; width:97%; border: 1px #fff201 dashed; border-radius:1rem;}

.help-info{color:#bbb; margin-top:-10px;}
.material-icons.date_icon{margin-bottom:-24px;}
.right_link_text{text-align:right; margin:0px; padding:0px; outline:none; border:none;}
.right_link_text a{color:#039be5; text-decoration:none; }
.right_link_text a:hover{color:#039be5; text-decoration:underline; }
.right_align_btn{float:right; position:absolute; top:5px; right:0px;}

.modal-header.header_bg_user{background-color:#fff200; text-align:center; }
.modal-header.header_bg{background-color:#f2f2f2; text-align:center; border-radius:6px 6px 0px 0px; /* border-top: 5px solid #d6d6d6; */}
.modal-header.header_bg_social{background-color:#f2f2f2; text-align:center; border-radius:6px 6px 0px 0px;}
.btn.btn-fb{ background-color: #2c498d !important; margin-bottom:15px; height:40px; line-height:40px; color:#fff; font-size:12px; font-weight:600; }
.btn.btn-fb a{color:#fff;}
.btn-fb a:hover{color:#fff;}
.btn.btn-gplus {background-color: #cd1f1f !important; height:40px; line-height:40px; color:#fff; font-size:12px; font-weight:600; }
.btn.btn-gplus a{color:#fff;}
.btn-btn-gplus a:hover{color:#fff;}
.btn.btn-email {background-color: #fff200 !important;margin-bottom:15px; height:40px; line-height:40px; color:#333 !important; font-size:12px; font-weight:600; }
.btn.btn-email a{color:#333;}
.btn.btn-email a:hover{color:#333;}

.click2_add_btn{float:right; position:absolute; top:5px; right:0px;}

.input_custom_btn{background-color:#f2f2f2 !important; border:1px solid #ddd !important;height: 36px !important; text-align:center; font-weight:600;}
.input_custom_btn.success_price{color:#1cbe1f;}

/* star rating */
.ln_solid {background-color: #ffffff;border-top: 2px solid #ccc;color: #ffffff;height: 1px;margin: 20px 0;}

.custom_offer_list {line-height: 18px;margin: 0 0 0px 20px;padding: 0px;}
.custom_offer_list li {counter-increment: unset;list-style-type: unset;margin: 6px 0;padding: 0;}

.progress_blue{font-size: 16px;font-weight: 600; color:#fff200;}
.completed_red{font-size: 16px;font-weight: 600; color:#f00;}
.price_green{font-size: 16px;font-weight: 600; color:#1cbe1f;}
#hearts-existing {color: #fec900; margin:0px; padding:0px;}
#hearts-existing span{margin:0px 2px; padding:0px; font-size: 16px;}

.priceoffer_main{background: #fafafa;margin:0px; padding:0px;display:block;  position:relative;}
.wrk_profile{margin:0px; padding:0px 0px; /* background-color:#fff;*/ display:block;}

.x_panel {display:inline-block;padding:0px;position: relative;width: 100%;}
.x_title {border-bottom: 2px solid #ccc;/* margin-bottom: 10px; */ padding: 1px 15px 6px 15px;}
.x_content {clear: both;float: left;position: relative;width: 100%; }

.social_toolbox {display:inline-block; margin:0px; padding:0px; float:right;}
.social_toolbox li{display:inline-block; margin:2px; padding:0px; color:#333; font-size:16px;}
.social_toolbox li a{display:inline-block; margin:0px; padding:0px; color:#333;}
.social_toolbox li a:hover{display:inline-block; margin:0px; padding:0px; color:#999;}

.box_card {background-color: #fff;border: 1px solid #ddd;border-radius: 4px;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);margin-bottom: 20px;}
.box_card_top{background-color: #fff;border-bottom: 1px solid #ddd;padding:10px 15px;}
.box_card_bottom{background-color: #fff;padding:10px 15px;}
.box_card_bottom_text{background-color: #fff;padding:2px 15px 10px 15px; border-top: 1px solid #ddd;}

.media-heading {margin-bottom: 5px;margin-top: 0; font-size:14px; font-weight:600;}
.panel-heading {font-size:16px;}

.wrk_index{margin:0px; padding:0px;display:black;  position:relative;}
.wrk_index_search{margin:15px; padding:15px 0px 0px 0px; background-color:#f2f2f2; border-radius:4px;}

#wrkr_wrkp_message.nav-tabs {border-bottom: 1px solid #ddd;}
#wrkr_wrkp_message.nav-tabs > li {float: left;margin-bottom: -1px;margin-right:2px;}
#wrkr_wrkp_message.nav-tabs > li > a {color:#666;background-color: #eee;}
#wrkr_wrkp_message.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {background-color: #fff200;border-color:transparent;border-image: none;border-style: solid;border-width: 1px;color: #333;cursor: default; font-weight:600; margin-bottom:-2px;}

#wrkr_wrkp_priceOffer.nav-tabs {border-bottom: 1px solid #ddd;}
#wrkr_wrkp_priceOffer.nav-tabs > li {float: left;margin-bottom: -1px;margin-right:2px;}
#wrkr_wrkp_priceOffer.nav-tabs > li > a {color:#666;background-color: #eee;}
#wrkr_wrkp_priceOffer.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {background-color: #fff200;border-color:transparent;border-image: none;border-style: solid;border-width: 1px;color: #333;cursor: default; font-weight:600; margin-bottom:-2px;}

#wrkr_wrkp_account.nav-tabs {border-bottom: 1px solid #ddd;}
#wrkr_wrkp_account.nav-tabs > li {float: left;margin-bottom: -1px;margin-right:2px;}
#wrkr_wrkp_account.nav-tabs > li > a {color:#666;background-color: #eee;}
#wrkr_wrkp_account.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {background-color: #fff200;border-color:transparent;border-image: none;border-style: solid;border-width: 1px;color: #333;cursor: default; font-weight:600; margin-bottom:-2px;}


.showmore_content {position: relative;overflow: hidden;}
.showmore_trigger {width: 100%;height: 45px;line-height: 45px;cursor: pointer;}
.showmore_trigger span {display: block; text-align:right;}
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {background-color: #f1f1f1 !important;border-color: #ddd !important;color: #333;z-index: 2;}
.pictur{margin:0px; padding:0px; width:100%; clear:both; overflow:hidden;}
.pictur li {float: left;margin: 4px 10px 10px 0px; width:100px; height:100px;}

#settingBtn.open>.dropdown-menu {float: left;position: absolute;margin-top: 0;border: 1px solid rgba(0,0,0,.15);border-top-left-radius: 0;border-top-right-radius: 0;background-color: #fff;-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175);  width:220px;}
#settingBtn.open>.dropdown-menu>li>a {white-space: normal; padding:6px 15px; border-bottom:1px solid #f2f2f2;}
#settingBtn.open>.dropdown-menu>li>a:hover{white-space: normal; padding:6px 15px; background-color:#fff200;}

.chat li{margin-bottom: 10px;padding-bottom: 5px;}
.chat li.left .chat-body{margin-left: 60px;}
.chat li.right .chat-body{margin-right: 60px;}
.chat li .chat-body p{margin: 0;color: #777777;}
.panel .slidedown .glyphicon, .chat .glyphicon{margin-right: 5px;}
.body-panel{/* overflow-y: scroll; */height: 250px;}

.tab-content{/* padding:20px; border:1px solid #ddd; */ padding-top:10px;}

/* message reply */
.widget .panel-body { padding:0px; }
.widget .list-group { margin-bottom: 0; }
.widget .panel-title { display:inline }
.widget .label-info { float: right; }
.widget li.list-group-item {border-radius: 0;border: 0;border-top: 1px solid #ddd;}
.widget li.list-group-item:hover { background-color: rgba(86,61,124,.1); }
.widget .mic-info { color: #666666;font-size: 11px; }
.widget .action { margin-top:5px; }
.widget .comment-text { font-size: 12px; }
.widget .btn-block { border-top-left-radius:0px;border-top-right-radius:0px; }

li.list-group-item.chat_reverse{ background-color: #f6f6f6; }

/* materlized css overlaping */

button:focus {outline: none;}
/* .btn, .btn-large, .btn-flat {text-transform: capitalize ! important;} */
.btn_small_letter{text-transform: inherit ! important;}
.btn.bg_red {border-bottom: none !important;color: #fff !important; background-color: #F44336 !important;}
.btn.bg_pink {border-bottom: none !important;color: #fff !important; background-color: #E91E63 !important;}
.btn.bg_purple {border-bottom: none !important;color: #fff !important;  background-color: #9C27B0 !important;}
.btn.bg_deep-purple {border-bottom: none !important;color: #fff !important; background-color: #673AB7 !important; }
.btn.bg_indigo {border-bottom: none !important;color: #fff !important; background-color: #3F51B5 !important;}
.btn.bg_blue {border-bottom: none !important;color: #fff !important; background-color: #2196F3 !important;}
.btn.bg_light-blue {border-bottom: none !important;color: #fff !important; background-color: #03A9F4 !important;}
.btn.bg_cyan{border-bottom: none !important;color: #fff !important;background-color: #00BCD4 !important;}
.btn.bg_teal{border-bottom: none !important;color: #fff !important; background-color: #009688 !important;}
.btn.bg_green{border-bottom: none !important;color: #fff !important; background-color: #4CAF50 !important;}
.btn.bg_light-green {border-bottom: none !important;color: #fff !important; background-color: #8BC34A  !important;}
.btn.bg_lime {border-bottom: none !important;color: #fff !important; background-color: #CDDC39 !important;}
.btn.bg_amber {border-bottom: none !important;color: #fff !important; background-color: #FFC107 !important;}
.btn.bg_orange {border-bottom: none !important;color: #fff !important;background-color: #FF9800 !important;}
.btn.bg_deep-orange {border-bottom: none !important;color: #fff !important; background-color: #FF5722 !important;}
.btn.bg_brown {border-bottom: none !important;color: #fff !important; background-color: #795548 !important;}
.btn.bg_blue-grey {border-bottom: none !important;color: #fff !important; background-color: #607D8B !important;}
.btn.bg_black {border-bottom: none !important;color: #fff !important; background-color: #000000 !important;}
.btn.bg_default {color: #666 !important; background-color:#fff !important; border:1px solid #ddd; padding: 0 12px; box-shadow: none !important;}
.btn.bg_default:hover {color: #333 !important; background-color:#f1f1f1 !important; box-shadow: 0px 0px 2px #999 !important;}
.btn.bg_white {border-bottom: none !important;color: #666 !important; background-color: #fff !important; font-weight:600; }
.btn.bg_white:hover {box-shadow:0px 2px 10px #fff200; }

.btn.bg_grey {border-bottom: none !important;color: #fff !important; background-color: #545454 !important; font-weight:600;}
.btn.bg_yellow {border-bottom: none !important;color: #231f20 !important; background-color: #fff200 !important; font-weight:600;}

.btn.bg_yellow_black {border-bottom: none !important;color: #333 !important; background-color: #fff200 !important; font-weight:600;}
.btn.dtp-select-year-range {color: #000 !important;}
.active_submit {background: url(images/submit_loader.gif) no-repeat right; background-size: 30px 30px; transition: all .3s; transition-timing-function: ease-in;}

/* data table */
table.dataTable thead th, table.dataTable thead td {border-bottom: 1px solid #ddd !important;    }
table.dataTable.no-footer {border-bottom: 1px solid #ddd !important;}
.datatable_hearer_bg{background-color:#fff200;}

/* input box */

[type="radio"]:not(:checked) + label, [type="radio"]:checked + label {
    -moz-user-select: none;cursor: pointer;display: inline-block;font-size: 13px !important;height: 25px;line-height: 25px;padding-left: 35px;position: relative;transition: all 0.28s ease 0s;}

input:not([type]):focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    box-shadow: none !important;
}

[type="checkbox"].filled-in:checked+label:after
{top: 0;width: 20px;height: 20px;border-radius: 4px; border: 1px solid #e6db04 !important;background-color: #fff200 !important;z-index: 0}

[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:before, [type="radio"].with-gap:checked+label:after
{border: 2px solid #fff200 !important;}

[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:after
{background-color: #fff200 !important;}

input:focus:not([type]):not([readonly]) + label, input[type="text"]:focus:not([readonly]) + label, input[type="password"]:focus:not([readonly]) + label, input[type="email"]:focus:not([readonly]) + label, input[type="url"]:focus:not([readonly]) + label, input[type="time"]:focus:not([readonly]) + label, input[type="date"]:focus:not([readonly]) + label, input[type="datetime"]:focus:not([readonly]) + label, input[type="datetime-local"]:focus:not([readonly]) + label, input[type="tel"]:focus:not([readonly]) + label, input[type="number"]:focus:not([readonly]) + label, input[type="search"]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label {color: #333 !important;}
.chips.focus {border-bottom: 1px solid #fff200 !important;box-shadow: 0 1px 0 0 #fff200 !important;}

/* datepicker */

.picker__weekday-display {background-color: #545454 !important;padding: 10px;font-weight: 200;letter-spacing: .5;font-size: 1rem;margin-bottom: 15px;}
.picker__date-display {text-align: center;background-color: #fff200 !important;color: #fff;padding-bottom: 15px;font-weight: 300;}
.picker__close, .picker__today {font-size: 1.1rem;padding: 0 1rem;color: #fec900 !important;}
.picker__footer {text-align: right;padding: 5px 10px;border-top: 1px solid #ccc;}
.picker__day.picker__day--today {color: #fec900 !important;}
.picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected {border-radius: 50%;-webkit-transform: scale(0.9);transform: scale(0.9);background-color: #545454 !important;color: #ffffff;}
.picker__day--infocus {color: #595959;letter-spacing: -.3;padding: 0.55rem 0 !important;font-weight: 400;border: 1px solid transparent;}

.dropdown-content li > a, .dropdown-content li > span {color: #333;display: block;font-size: 16px;line-height: 22px;padding: 5px 10px;}
[type="checkbox"]:checked+label:before {top: -4px;left: -5px;width: 12px;height: 22px;border-top: 2px solid transparent;border-left: 3px solid transparent;border-right: 3px solid #333 !important;border-bottom: 3px solid #333 !important;-webkit-transform: rotate(40deg);transform: rotate(40deg);-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transform-origin: 100% 100%;transform-origin: 100% 100%}

.text-success{color:#1cbe1f !important;}
.dashboardBox{background-color:#fffcbf; border: 1px solid #fff200;border-radius: 5px;display: block; margin-bottom:20px;}
.dashboardBox .number {font-size: 33px;font-weight: bold;line-height: 1.65857;}
.dashboardBox .text{ font-size:16px; font-weight:600; line-height:30px; text-align:center; margin-bottom:15px;}

.contactus_img{margin:40px auto; position:relative;}
.send-icon {line-height: 60px;margin: -80px 45% 0px 45%;position: absolute; text-align:center; }
.send-icon i{color:#333 !important;}

#faqAccordion .panel-default > .panel-heading {background-color: #f5f5f5 !important;border-color: #ddd;color: #333;}
#faqAccordion .panel {background-color: #fff;box-shadow: none !important;}
#wrkRoundTab .btn-group > .btn{float: left;position: relative; color:#fff; background-color:#666;}
#wrkRoundTab .btn-group > .btn:hover, .btn:active, .btn:visited, .btn:focus{ color:#fff; background-color:#fff200;}
.btn-round{border-radius: 17px;}

.benefits_title{font-size:24px; line-height:36px;}
.benefits_about{font-size:16px; line-height:26px; color:#666;}
.benefits_paragraph{font-size:14px; line-height:24px; color:#666;}
.benefits_about_img{margin:15px; padding:15px;}

#wrkbenefit .nav-tabs { border-bottom: 2px solid #ddd; }
#wrkbenefit .nav-tabs > li {display: inline-block !important;float: none !important;margin-bottom: -1px;}
#wrkbenefit .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
#wrkbenefit .nav-tabs > li > a { border: none; color: #666; }
#wrkbenefit .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 !important; background: transparent; }
#wrkbenefit .nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
#wrkbenefit .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after {transform: scale(1); }
#wrkbenefit .tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
#wrkbenefit .tab-pane { padding:0px 0; }
#wrkbenefit .tab-content{padding:0px}

.categoriesWRK .clients-carousel {padding: 0px 0px;}
.categoriesWRK  .clients-carousel .carousel-control.left {background: #fff200 none repeat scroll 0 0 !important;height: 30px;left: 0px;margin-top: 110px;width: 30px; border-radius:50%; }
.categoriesWRK  .clients-carousel .carousel-control.right {background: #fff200 none repeat scroll 0 0 !important;height: 30px;margin-top: 110px;right:0px;width: 30px; border-radius:50%;}
.categoriesWRK  .carousel-control {color: #000 !important;opacity:10 !important;text-shadow:none !important;}

.categoriesWRK  .clients-carousel .itemBox{padding:20px 0px;}
.categoriesWRK  .clients-carousel .bgBox i{font-size:21px; color:#333;}
.categoriesWRK  .clients-carousel .bgBox i:hover{ color:#666;}
.categoriesWRK  .clients-carousel .bgBox{background-color:#fff200; margin:0px auto; padding:10px; width:60px; height:60px; border-radius:50%; line-height:44px;}
.categoriesWRK  .clients-carousel .bgBox:hover{box-shadow:2px 6px 2px rgba(0,0,0,.5); color:#666;}
.categoriesWRK  .clients-carousel .heading{color:#fff;}
.work-space{margin: 10px 0px;}
.featured-img{width: 100%; height: 360px;float:left;position: relative; padding:15px;}
.featured-img h4{width:100%;float: left;position: relative;padding:20px 0px 0px; margin:0px; color:#333; font-size:21px;}
.featured-img p{width:100%;float: left;position: relative;padding:10px 0px 0px; color:#333; }
.image-hover {display: block;position: absolute;background:none repeat scroll 0% 0% rgba(0, 0, 0, 0.6);width:92.2%;height:360px;float: left;}
.image-hover:hover {display: block;position: absolute;background:none repeat scroll 0% 0% rgba(0, 0, 0, 0);width:92.2%;height:360px;float: left;}

#profileThumb1 .carousel-control.left {background-image: none !important;background-repeat: repeat-x;}
#profileThumb1 .carousel-control.right {background-image: none !important;background-repeat: repeat-x;}
#profileThumb1  #thumbcarousel{width:100%;}
#profileThumb1 .carousel {margin-top:0px;}
#profileThumb1 .item .thumb {/* width: 25%; */ cursor: pointer;float: left; margin:15px 0px 15px 15px;}
#profileThumb1 .item .thumb img {width: 100%;margin: 2px;}
#profileThumb1 .item img {width: 100%;	}
#profileThumb2 .carousel-control.left {background-image: none !important;background-repeat: repeat-x;}
#profileThumb2 .carousel-control.right {background-image: none !important;background-repeat: repeat-x;}
#profileThumb2  #thumbcarousel{width:100%;}
#profileThumb2 .carousel {margin-top:0px;}
#profileThumb2 .item .thumb {/* width: 25%; */ cursor: pointer;float: left; margin:15px 0px 15px 15px;}
#profileThumb2 .item .thumb img {width: 100%;margin: 2px;}
#profileThumb2 .item img {width: 100%;	}

#wrkProfile.nav > li > a {display: block;padding: 6px 6px;position: relative;}
#wrkProfile.nav-tabs {}
#wrkProfile.nav-tabs > li {float: left;margin-bottom:0px !important;margin-right:6px;}
#wrkProfile.nav-tabs > li > a {border: none;color:#666 !important;background-color: #eee; margin-bottom:0px;}
#wrkProfile.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {background-color: #fff200;border-color:transparent;border-image: none;border-width: 1px;color: #333;cursor: default; font-weight:600;}

#wizard{margin:30px 0px 0px 0px; padding:0px;}
#wizard .StepTitle {color:#666666; border-bottom:1px solid #eeeeee; padding-bottom:8px;}
#wizard .completed small{color:#333; font-size:14px;}
#wizard .active small{color:#666666; font-size:14px;}
.flexer, .progress-indicator {display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
.no-flexer, .progress-indicator.stacked {display:block}
.flexer-element, .progress-indicator>li {-ms-flex:1;-webkit-flex:1;-moz-flex:1;flex:1}
.progress-indicator {margin:0 0 1em;padding:0;font-size:100%;text-transform:normal;}
.progress-indicator>li {list-style:none;text-align:center;width:auto;padding:0;margin:0;position:relative;text-overflow:ellipsis;color:#bbb;display:block}
.progress-indicator>li:hover {color:#BBBBBB}
.progress-indicator>li a {color:#BBBBBB}
.progress-indicator>li a:hover {color:#BBBBBB}
.progress-indicator>li.completed, .progress-indicator>li.completed .bubble {color:#fffa00;}
.progress-indicator>li .bubble {border-radius:2px;width:40px;height:40px;background-color:#545454;display:block;margin:0 auto .5em;color:#333;}
.progress-indicator>li .bubble p {color: #fff;font-size: 18px;line-height: 40px;margin: 0 0 10px;padding: 0 15px;position: absolute;text-align: center;z-index: 99;}
.progress-indicator>li.active .bubble p {color:#333;}
.progress-indicator>li.completed .bubble p {color:#333;}
.progress-indicator>li .bubble:after, .progress-indicator>li .bubble:before {display:block;position:absolute;top:18px;width:100%;height:3px;content:'';background-color:#545454; line-height:40px; color:#fff;}
.progress-indicator>li.completed .bubble, .progress-indicator>li.completed .bubble:after, .progress-indicator>li.completed .bubble:before {background-color:#fffa00;}
.progress-indicator>li .bubble:before {left:0;}
.progress-indicator>li .bubble:after {right:0}
.progress-indicator>li:first-child .bubble:after, .progress-indicator>li:first-child .bubble:before {width:50%;margin-left:50%}
.progress-indicator>li:last-child .bubble:after, .progress-indicator>li:last-child .bubble:before {width:50%;margin-right:50%}
.progress-indicator>li.active, .progress-indicator>li.active .bubble {color:#fffa00}
.progress-indicator>li.active .bubble, .progress-indicator>li.active .bubble:after, .progress-indicator>li.active .bubble:before {background-color:#fffa00;}

#wizard .modal-header{background-color:#669900;}
#wizard .modal-title{color:#fff;}
#wizard .modal-footer {text-align: center;}

.helpcenter_paragraph {color: #666;font-size: 14px;line-height: 24px;}
#help_center .nav > li > a {display: block;padding: 10px 15px;position: relative; color:#333;}
#help_center .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {background-color: #fff200;color: #000;}
#help_center h4{font-weight:600;}
#help_center p{font-size:16px; border-bottom:1px solid #ccc; padding: 15px 0; color:#666;}
#help_center .dropdown-menu {float: left;width:100%;}

/* Acc DashBoard profile upload */
input.hidden {position: absolute;left: -9999px;}
#myaccount_dashboard_photo {cursor: pointer;width: 100px;height: 100px;border:2px solid #fff200;}
.uniquePanel .panel{background-color:transparent;border: none; !important;margin-bottom: 20px; box-shadow:none !important;}
.uniquePanel .panel-default {border-color: #ddd !important;}
.uniquePanel .panel-default > .panel-heading {background-color:#f1f1f1 !important;color: #333; border-radius:6px 6px 0px 0px !important;}
.uniquePanel .panel-primary {border-color: #ddd !important;}
.uniquePanel .panel-primary > .panel-heading {background-color: #4b4b4b !important;color: #fff; border-radius:6px 6px 0px 0px !important}
.uniquePanel .panel-warning {border-color: #ddd !important;}
.uniquePanel .panel-warning > .panel-heading {background-color: #282828 !important;color: #fff; border-radius:6px 6px 0px 0px !important}
#tranHist.nav > li  {display: block;padding:0px 0px; margin:0px;position: relative; color:#999;}
#tranHist.nav > li > a:link {color:#999; padding: 0px 8px;margin:0px;}
#tranHist.nav > li > a:hover {color:#fff !important; }
#tranHist.nav > li > a:focus {color:#fff; background-color: transparent;  outline:none;}

#tranHist.nav-tabs {border-bottom:transparent; margin:0px;padding:0px 0px; background-color: transparent;color:#fff;}
#tranHist.nav-tabs > li.active > a, .nav-tabs > li.active > a:visited, .nav-tabs > li.active > a:focus {background-color: transparent;border-color: transparent;border-bottom: 4px solid #fff200; font-weight:600; color:#fff;}
#tranHist.nav-tabs > li.active > a:hover {color:#fff;}

/* login page */
#lgoinPage{margin-top:20px;}
#lgoinPage .panel-default > .panel-heading {
    background-color: #e3e1e4 !important;
    border-color: #ddd;
    color: #fff;
    margin: -15px 15px;
    border-radius:6px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !important;
}

.modal.fade .modal-dialog {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
    top:340px;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.modal.fade.in .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
    opacity: 1;
}

.modal-dialog.loginbox{width:500px; margin:30px auto;}

.wrk_starts {color: #fec900; margin:0px; padding:0px;}
.wrk_starts span{margin:0px 2px; padding:0px; font-size: 16px;}

.ui-front { z-index: 100000 !important;}

#password_meter_pop {color: #7b7171; width:85%; }
#password_meter {color: #7b7171; width:55%; }
#password_meter_pop .meter-text {width:24%; float:left;}
#password_meter .meter-text {width:12%; float:left;}
#password_meter .meter, #password_meter_pop .meter {background: #c9c9c9; width:74%; float:left; border-radius: 8px; margin: 5px 0;}
.passwordmeter_short{
    font-weight:bold;
    background:#FF0000;
    width:20%;
    height:12px;
    font-size: 8px;
    border-radius: 8px;
}
.passwordmeter_weak{
    font-weight:bold;
    background:orange;
    width:40%;
    height:12px;
    font-size: 8px;
    border-radius: 8px;

}
.passwordmeter_good{
    font-weight:bold;
    background:#2D98F3;
    width:70%;
    height:12px;
    font-size: 8px;
    border-radius: 8px;
}
.passwordmeter_strong{
    font-weight:bold;
    background: limegreen;
    width:100%;
    height:12px;
    font-size: 8px;
    border-radius: 8px;
}
.ui-autocomplete-category {font-weight:bold; }

.error {color: #f3320c; }
.input-field .error {margin-top: -15px; font-weight: bold;}
.input-field label.error{
    margin-top: -45px;
    left: 20px;
    color: #f3320c;
    font-family: Raleway-medium;
    font-size: 16px;
}
/*thumil images */
ul.pictur .close_thum_icon{margin:0px 0 0 82px; padding:0px; position:absolute; z-index:99; }

/*text editor */
.note-editor.panel-default > .panel-heading {
    background-color: #f9f9f9 !important;
    border-color: #ddd;
    color: #fff;
}
.note-editor .btn, .btn-large {
    background-image: none;
    color: #333;
}
.note-editor .btn, .btn-large, .btn-floating, .btn-large, .btn-flat {
    font-size: 0px 6px;
    outline: 0 none;
}
.note-editor .btn, #wrk-profile .note-editor .btn, .btn-large, .btn-flat {
    box-shadow: none;
}
.note-editor .btn i, .btn-large i, .btn-floating i, .btn-large i, .btn-flat i {
    font-size: 12px;
    line-height: inherit;
}

i.fa.fa-question-circle{color:#ccc; font-size:21px;}

.dtp > .dtp-content > .dtp-date-view > header.dtp-header {background: #545454 !important;}
.dtp div.dtp-date, .dtp div.dtp-time {background: #fff200 !important;}
.dtp .p10 > a {color: #75758b !important;}
.dtp table.dtp-picker-days tr > td > a.selected {background: #fff200 !important;}

.gal-container{padding:0px;}
.gal-item{overflow: hidden;padding: 3px; width:100px; float:left;}
.gal-item .imgbox{height: 100px;overflow: hidden;}
.imgbox img{height: 100%;width: 100%;object-fit:cover;-o-object-fit:cover;}
.gal-item a:focus{outline: none;}
.gal-item a:after{content:"\e003";
    font-family: 'Glyphicons Halflings';
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.75);
    position: absolute;
    right: 3px;
    left: 3px;
    top: 3px;
    bottom: 3px;
    text-align: center;
    line-height:100px;
    font-size:20px;
    color: #fff;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
}
.gal-item a:hover:after{opacity: 1;}
.modal-open .gal-container .modal{background-color: rgba(0,0,0,0.4);}
.modal-open .gal-item .modal-body{padding: 0px;}
.modal-open .gal-item button.close{position: absolute;
    width: 25px;
    height: 25px;
    background-color: #000;
    opacity: 1;
    color: #fff;
    z-index: 999;
    right: -12px;
    top: -12px;
    border-radius: 50%;
    font-size: 15px;
    border: 2px solid #fff;
    line-height: 25px;
    -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,0.35);
    box-shadow: 0 0 1px 1px rgba(0,0,0,0.35);
}
.modal-open .gal-item button.close:focus{outline: none;}
.modal-open .gal-item button.close span{position: relative;top: -3px;font-weight: lighter;text-shadow:none;}
.gal-container .modal-dialogue{width: 80%;}
.gal-container .description{position: relative;height: 40px;top: -40px;padding: 10px 25px;background-color: rgba(0,0,0,0.5);color: #fff;text-align: left;}
.gal-container .description h4{margin:0px;font-size: 15px;font-weight: 300;line-height: 20px;}
.gal-container .modal.fade .modal-dialog {-webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
    top: 100px;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.gal-container .modal.fade.in .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0);
    opacity: 1;
}
@media (min-width: 768px) {
    .gal-container .modal-dialog {width: 55%;margin: 50 auto;}
}
@media (max-width: 768px) {
    .gal-container .modal-content{height:250px;}
}
/* Footer Style */
i.red{color:#BC0213;}

/* stickey footer */
html {position: relative;min-height: 100%;}

#header_tab_menu nav ul a span.badge{background-color:#fff200 !important; line-height:16px; color:#333;}

.preview_services {border: none !important; border-bottom: 1px solid #c5c5c5 !important; height: 30px !important;}


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

.btn{outline:none !important;}
.btn{padding: 0 1rem !important;}

span#flag{margin-top:-50px;}
nav{box-shadow:0 !important; box-shadow:none !important;}
.log_uber ul.nav.navbar-nav.navbar-right{ background-color: #ececec;border-radius: 6px !important; margin:12px 0px !important;}
.log_uber ul.nav.navbar-nav.navbar-right li{float:left; padding:0px 12px;}
.log_uber ul.nav.navbar-nav.navbar-right li a:link{background-color: transparent; color:#333 !important; outline:none !important; border-bottom:0px}
.log_uber ul.nav.navbar-nav.navbar-right li a:focus{background-color: transparent; color:#333 !important; outline:none !important; border-bottom:0px}
.log_uber ul.nav.navbar-nav.navbar-right li:hover{ background-color: #fffa04;}
.log_uber ul.nav.navbar-nav.navbar-right li.active{ background-color: #fffa04 !important;}
.log_uber ul.nav.navbar-nav.navbar-right li:first-child {border-radius:6px 0px 0px 6px !important; border-right:1px solid #fff;}
.log_uber ul.nav.navbar-nav.navbar-right li:last-child {border-radius: 0px 6px 6px 0px !important; border-left:1px solid #fff;}

.log_uber_title{font-size:21px; color:#999; line-height:24px; margin:15px 0px}
.log_uber_title .dark{color:#808080;}




#wrk-profile .input-group .input-group-addon {background-color: transparent;border: medium none;font-weight: bold;padding-left: 0;}
.wrk_bid_ist{background-color: #fff;border: 1px solid #ddd;border-radius: 4px;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);margin:-10px -5px -10px -5px; padding:10px;}

#wrk_bid_paginat.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {background-color: #fff200;border-color: #fff200; color:#333;}

/* custom select btn */
.customselect_btn.select-wrapper {background-color: #fff203 !important;margin: 0px;padding: 0px 10px;border-radius:2px;box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);}
.customselect_btn.select-wrapper input.select-dropdown {border: none;outline: none;width: 100%;font-size: 1rem;padding: 0;display: block;}
.customselect_btn.select-wrapper span.caret {color: initial;position: absolute;right: 10px;top: 0;bottom: 0;height: 10px;margin: auto 0;font-size: 0px;line-height: 10px;}
.customselect_btn input:not([type]), .customselect_btn input[type="text"], .customselect_btn input[type="password"], .customselect_btn input[type="email"], .customselect_btn input[type="url"], .customselect_btn input[type="time"], .customselect_btn input[type="date"], .customselect_btn input[type="datetime"], .customselect_btn input[type="datetime-local"], .customselect_btn input[type="tel"], .customselect_btn input[type="number"], .customselect_btn input[type="search"], textarea.materialize-textarea {height: 36px ;}



.divider_line{clear:both; margin:10px 0px; -moz-border-bottom-colors: none; -moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;border-color: #ccc;border-image: none;border-style: solid none none;
    border-width: 1px 0 0;
}

/* full wrapper and  fixed header */

/* .wrapper_main {    min-height: calc(100vh - 248px);max-width: 1650px;margin: 0 auto} */
/* .wrapper_main { min-height:calc(100vh - 596px);max-width: 1650px;margin: 0 auto} */
.wrapper_main { max-width: 1650px;margin: 0 auto}
.wrapper_sub {background: #E5E5E4; overflow:auto;}

.bg_white {background-color: #FFF!important}
.bg_grey {background-color: #fafafa !important}

.header_container {}
.header_width {background-color: #fff !important;max-width: 100% !important;margin: 0 auto !important;position: relative !important;}
.navbar-fixed-bottom, .navbar-fixed-top {left: 0;position: relative !important;right: 0;z-index: 1030;}


.blog {margin:0px; padding:10px 0px 0px 0px; border-bottom:1px solid #575757;}
.blog .img_left{ display: table-cell;vertical-align: top;  padding-right: 10px;}
.blog .img_left .img_object{display: block;}
.blog .body_txt{display: table-cell; vertical-align: top;}
.blog .body_txt {overflow: hidden;}
.blog .body_txt .title_txt{font-size:14px;font-weight: 600;margin-bottom: 5px;margin-top: 0; color:#8d8d8d;}
.blog .body_txt .post_txt {font-size: 14px;font-weight: 600;margin-bottom: 5px;margin-top: 0; color:#575757;}

.whyWRK_readmore{color:#999; text-decoration:none; background-color:#fff102; border-radius:10px; padding:2px 6px;}
.whyWRK_readmore a{color:#999;text-decoration:inherit;}
.whyWRK_readmore a:focus{color:#666;text-decoration:inherit;}
.whyWRK_readmore a:hover{color:#666; text-decoration:inherit;}

.getit_now{ color:#333 !important; right:0px; margin:100px 0px 0px 0px; font-size:24px; text-align:center; float:left;}

.upload_plus_symbol{margin:170px 0px 0px 0px;}
#profileBG{background-color:#b5b5b5; height:400px; /*background: url(../images/banner_1.jpg) no-repeat center center; */
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

/* star rating */
.btn-grey{background-color:#D8D8D8;color:#FFF;}
.bold{font-weight:700;}
.padding-bottom-7{padding-bottom:7px;}
.review-block{background-color:#FAFAFA;border:1px solid #EFEFEF;padding:15px;border-radius:3px;margin-bottom:15px;}
.review-block-name{font-size:12px;margin:10px 0;}
.review-block-date{font-size:12px;}
.review-block-rate{font-size:13px;margin-bottom:15px;}
.review-block-title{font-size:15px;font-weight:700;margin-bottom:10px;}
.review-block-description{font-size:13px;}
.rating-block .progress {background-color: #f5f5f5;border-radius: 0px !important;box-shadow: none !important;}
.rating-block .progress-green{background-color: #2fbc00;}
.rating-block .progress-yellow{background-color: #fff200;}
.rating-block .progress-red{background-color: #f3320c;}

.popover {border-radius: 0px !important;}

.card .card-content {border-radius: 0 0 2px 2px;padding: 15px !important;}
.card .card-action {background-color: inherit;border-top: 1px solid rgba(160, 160, 160, 0.2);padding: 15px 15px !important;}
.card .card-image{background-color:#f2f2f2; height:95px; overflow:hidden;}
.card .card-image img{width:100%;}
.card .media-object{background-color:#f2f2f2;}
.card-content p.text-muted {color: #777;}
.custoner_review{font-size:14px; }

/* account setting  */
@media (min-width: 768px) {
    .omb_row-sm-offset-3 div:first-child[class*="col-"] {margin-left: 25%;}
}
.omb_login .omb_authTitle {text-align: center;line-height: 300%;}
.omb_login .omb_socialButtons a {color: white; // In yourUse @body-bg opacity:0.9;}
.omb_login .omb_socialButtons a:hover {color: white;opacity:1;}
.omb_login .omb_socialButtons .omb_btn-facebook {background: #3b5998; margin: 10px 0;}
.omb_login .omb_socialButtons .omb_btn-twitter {background: #00aced; margin: 10px 0;}
.omb_login .omb_socialButtons .omb_btn-google {background: #c32f10; margin: 10px 0;}
.omb_login .omb_loginOr {position: relative;font-size: 1.5em;color: #aaa;margin-top: 1em;margin-bottom: 1em;padding-top: 0.5em;padding-bottom: 0.5em}
.omb_login .omb_loginOr .omb_hrOr {background-color: #cdcdcd;height: 1px;margin-top: 0px !important;margin-bottom: 0px !important;}
.omb_login .omb_loginOr .omb_spanOr {display: block;position: absolute;left: 50%;top: -0.6em;margin-left: -1.5em;background-color: white;width: 3em;text-align: center;}
.omb_login .omb_loginForm .input-group.i {width: 2em;}
.omb_login .omb_loginForm  .help-block {color: red;}
@media (min-width: 768px) {
    .omb_login .omb_forgotPwd {text-align: right;margin-top:10px;}
}

.ui-widget-content .ui-state-active {
    border: 1px solid #ededed !important;
    background: #ededed !important;
    font-weight: normal;
    color: #ffffff;
}
/*#wrk_search_results th .row div {text-align: center;}*/

.chips {border: none;  border-bottom: 1px solid #9e9e9e;}
/*.chips .chip, .chips .tagit-new {float: left; } */
.chips .chip {float: left; }
.chips .chip text{border-bottom: none; height: 2rem;}



.tagit-new input {margin: 0 0 0px !important;width: auto !important; border-bottom: transparent !important;}
.chips.ui-widget.ui-widget-content {border-left: none !important; border-top: none !important; border-right: none !important;}

input:disabled:not([type]), input[readonly="readonly"]:not([type]), input[type="text"]:disabled:not(.browser-default), input[type="text"][readonly="readonly"]:not(.browser-default), input[type="password"]:disabled:not(.browser-default), input[type="password"][readonly="readonly"]:not(.browser-default), input[type="email"]:disabled:not(.browser-default), input[type="email"][readonly="readonly"]:not(.browser-default), input[type="url"]:disabled:not(.browser-default), input[type="url"][readonly="readonly"]:not(.browser-default), input[type="time"]:disabled:not(.browser-default), input[type="time"][readonly="readonly"]:not(.browser-default), input[type="date"]:disabled:not(.browser-default), input[type="date"][readonly="readonly"]:not(.browser-default), input[type="datetime"]:disabled:not(.browser-default), input[type="datetime"][readonly="readonly"]:not(.browser-default), input[type="datetime-local"]:disabled:not(.browser-default), input[type="datetime-local"][readonly="readonly"]:not(.browser-default), input[type="tel"]:disabled:not(.browser-default), input[type="tel"][readonly="readonly"]:not(.browser-default), input[type="number"]:disabled:not(.browser-default), input[type="number"][readonly="readonly"]:not(.browser-default), input[type="search"]:disabled:not(.browser-default), input[type="search"][readonly="readonly"]:not(.browser-default), textarea.materialize-textarea:disabled, textarea.materialize-textarea[readonly="readonly"] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: rgba(0, 0, 0, 0.42);
}
.select-wrapper span.caret.disabled {color: rgba(0, 0, 0, 0) !important;}
.cube_box {/* background-color: hsl(0, 0%, 47%); */ border:1px solid #ccc;width:96%;height: 100%;position:relative; margin:20px 15px 20px 0px; }
.cube_box::after {content: '';  width:100%;height:10px;position:absolute;top:-10px;left:15px;/* background-color: #f00; */
    border-top:1px solid #ccc;border-right:10px solid #ccc;border-bottom:1px solid #ccc;border-left:10px solid #ccc;
    -webkit-transform:skew(-60deg);
    -webkit-transform-origin:top;
    -moz-transform:skew(-60deg);
    -moz-transform-origin:top;
    -ms-transform:skew(-60deg);
    -ms-transform-origin:top;
    -o-transform:skew(-60deg);
    -o-transform-origin:top;
    transform:skew(-60deg);
    transform-origin:top;
}
.cube_box::before {content: '';width: 13px;height: 100%;position: absolute;top: -5px;right: -13px;/* background-color:  hsl(0, 0%, 27%); */
    border-top:1px solid #ccc;border-right:1px solid #ccc;border-bottom:10px solid #ccc;border-left:1px solid #ccc;
    -webkit-transform: skewY(-35deg);
    -webkit-transform-origin: top;
    -moz-transform: skewY(-35deg);
    -moz-transform-origin: top;
    -ms-transform: skewY(-35deg);
    -ms-transform-origin: top;
    -o-transform: skewY(-35deg);
    -o-transform-origin: top;
    transform: skewY(-35deg);
    transform-origin: top;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

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

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.ui-menu {background: #fff none repeat scroll 0 0;border-radius:6px; border:2px solid #fff200; outline:none;}
.ui-autocomplete.ui-menu .ui-menu-item.wrkcomplete {width: 100%;/* margin-left: 20%; */border-bottom:1px solid #f3f3f3;}
.dataTable thead {background: #fff200;}
.ui-autocomplete-loading {background: white url(../images/ui-anim_basic_16x16.gif) right center no-repeat;}

.ui-autocomplete li.ui-autocomplete-category {font-weight:bold; color:#231f20; font-size:18px; padding:4px 10px; text-decoration: underline;}
.ui-menu-item{padding:4px 0px 0px 0px; cursor: pointer; margin:0px;}
.ui-menu-item:hover{background-color:#ededed; transition: 0.5s; }
.ui-menu-item-wrapper { display:inline-block; outline:none; margin:0px; padding:0px; width:100%;}
.ui-menu-item-wrapper img{float:left; display: table-cell; vertical-align: top; margin-right:6px;margin-top:4px;}
.wrk-autocomplete-body{float:none; position:relative;  overflow: hidden;}
.wrk-autocomplete-title{ font-size:14px;display: block; margin:0px; padding:0px; font-weight:600;}
.wrk-autocomplete-details{ font-size:14px;display: block;margin:0px; padding:0px; color:#666;}
.ui-widget.ui-widget-content {border: 1px solid #fff200 !important; max-height: 500px; overflow:auto;}

.user_nmlength{white-space: nowrap; width:9em; overflow: hidden;text-overflow: ellipsis;}

.green.alert-success {background-color: #8BC34A !important;border-color:transparent !important;}
.red.alert-warning {background-color: #f3320c !important;border-color:transparent !important;}
.yellow.alert-warning {background-color: #fff200 !important;border-color:transparent !important;}
.yellow.alert {margin-bottom:8px !important;padding:8px !important;}
.redtxt{color:#f3320c; font-weight:600; text-transform: uppercase; margin-right:5px;}
.yellowtxt{color:#fff200; font-weight:600; text-transform: capitalize; margin-right:5px;}
.greentxt{color:#1cbe1f; font-weight:600; text-transform: capitalize; margin-right:5px;}
.blacktxt{color:#231f20; font-weight:600; text-transform: normal; margin-right:5px;}
.linktxt{color:#039be5; font-weight:600; text-transform: capitalize; text-decoration: none; cursor: pointer;}

/* FANCY COLLAPSE PANEL STYLES Memo */
.fancy-collapse-panel .panel-default > .panel-heading {padding: 0;}
.fancy-collapse-panel .panel-heading a {padding: 12px 35px 12px 15px;display: inline-block;width: 100%;background-color:#f3f3f3;color:#231f20; position: relative;text-decoration: none;}

.dataTable thead {background: #fff200;}

.ui-autocomplete-loading {
    background: white url(../images/ui-anim_basic_16x16.gif) right center no-repeat;
}

.wrk-select-label {
    position: absolute !important;
    top: -14px !important;
    font-size: .8rem !important;
}
.material.modal{z-index: 9999;  font-family: 'Poppins'; color:#000; padding:0px !important}
.material.modal .modal-content {margin-top:80px; box-shadow: none;border-radius: 0;border: 0;position: relative;}
.material.modal .modal-header{border-bottom: 1px solid transparent; padding:0px;}
.material.modal .modal-header .logoBox{background-color: #fff; width:25%; margin:0px; padding:8px 8px; display:block; float:left;}
.material.modal .modal-header .titleoBox{background-color: #fff200;width:75%;margin:0px; padding:8px 8px;display:block;float:left; min-height:66px;}
.material.modal .modal-header .titleoBox .titlelWrk{font-weight:500; font-size:18px; color:#000;}
.material.modal .modal-header .titleoBox .mytitlelWrk{font-weight:700; font-size:18px; color:#000;}

.material.modal .modal-body {padding:15px 15px;}
.material.modal .modal-body .chargeBoxBg{background-color:#fff200; width: 100%;display: inline-block;}
.material.modal .modal-body .chargeBoxBg .leftImg{padding:15px 15px; float:left;color:#000;font-size:16px;}
.material.modal .modal-body .chargeBoxBg .cargeTxt{padding:15px 10px;color:#000;font-size:16px;display: table; line-height: 21px;}
.material.modal .modal-body .helptxt{font-size:12px; color:#000; }
.material.modal .termstxt{font-size:12px; color:#000; line-height:18px !important;}
.material.modal .bold_italic{font-weight:600; font-style: italic; text-decoration:underline; cursor:pointer;}
.material.modal .bold_line{font-weight:600; font-style: normal; text-decoration:underline; cursor:pointer; color:#000;}
.material.modal .bold_line a, .bold_line:hover, .bold_line:focus {text-decoration:underline; color:#000;}
.material.modal .redText{font-weight:500; text-align:center; color:#f3320c;}
.material.modal .modal-body .offerWrkTitle{color:#000;font-size:24px;line-height:30px; font-weight:normal;}
.material.modal .modal-body .letsWrkBG {position:relative;background-color:#fff200;height:auto;width:50%;margin:20px auto 10px; padding:10px 15px;}
.material.modal .modal-body .letsWrkBG:after {content: '';position: absolute;bottom: 100%;left: 40%; width: 0;height: 0;border-bottom: solid 15px #fff200;border-left: solid 15px transparent;border-right: solid 15px transparent;}
.material.modal .modal-body .letsWrkBG .letsicon{float:left;}
.material.modal .modal-body .letsWrkBG .letsText{padding:15px 10px;color:#000;font-size:24px;display: table; line-height: 21px; font-weight:800;}

.material.modal .minAmount{margin-left:10px;font-weight:800;display:block;}
.material.modal .subAmount {font-weight:800;display:block;}
.material.modal .subAmount.symbSub {width:10px; text-align:center;font-weight:800;display:block;}
.material.modal .divLine {clear:both; margin:4px 0px; border-color:#000;border-image:none;border-style:solid none none;border-width: 1px 0 0; width:150px;}
.material.modal .totalAmount {margin-left:10px;font-weight:800;display:block;}
.material.modal .totalAmount .totalAmountTxt {margin-left:10px;font-weight:500;display:inline;}

.material.modal .modal-body .priceHeading{font-weight: 700;font-size: 18px;color: #000;}
.material.modal .divider_yellow{clear:both; margin:4px 0px 20px 0px; -moz-border-bottom-colors: none; -moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;border-color: #fff200;border-image: none;border-style: solid none none;
    border-width: 1px 0 0;}

.material.modal button.close:focus {outline: none;background-color:#000000 !important;color: #fff200;}
.material.modal button.close, .material.modal button.close:focus {margin:-42px 0px 0px 0px;position: absolute;right: 0;top: 0;background: #fff200;opacity: 1;height: 40px;width: 40px;color: #000300;font-size:40px;line-height: 40px;outline: none;z-index: 10; font-weight:normal;}
.material.modal button.close:hover, .material.modal button.close:focus{background: #000300;opacity: 1;color: #fff200;border:2px solid #fff200;}

.material.modal .customselect_btn.select-wrapper input.select-dropdown {background-color: #fff200; padding:4px 0px;}
.material.modal .input-group-addon {background-color: #e5e5e4;border: 1px solid transparent; border-radius: 0px;}
.material.modal input {height:40px; padding:6px 12px; background-color:#e5e5e4;box-sizing: inherit;border: 1px solid transparent;}
.material.modal input{box-shadow: none; color:#000;}
.material.modal textarea {/* padding: 10px 20px; */ border-radius: 0;font-size: 14px;background-color:#e5e5e4;}
.material.modal input:focus {border-color:transparent;box-shadow: none; color:#000;}
.material.modal textarea:focus {border-color:transparent;box-shadow: none; color:#000;}
.material.modal textarea {resize: none;}
.material.modal button {margin-right:4px;margin-right:4px;}
.material.modal button.btn_confirm:focus {outline: none;background-color:#fff200 !important;color: #000000;}
.btn_confirm{background-color: #000000;border:2px solid #000000;color: #fff200;border-radius:30px; text-transform:uppercase; font-weight:600; box-shadow:none; line-height:18px; font-size:14px;}
.btn_confirm:hover{background-color: #fff200;border:2px solid #000000;color:#000000;border-radius:30px; text-transform:uppercase; font-weight:600;box-shadow:none;}
.material.form-control::-webkit-input-placeholder {color: #DBDBDB;font-style: italic;}
.material.modal .breadcrumb {border-radius: 0px; margin-bottom: 10px;}
.material.modal .breadcrumb-arrow {height:46px;padding: 0;line-height:21px;list-style: none;background-color: #e5e5e4}
.material.modal .breadcrumb-arrow li:first-child a {border-radius:0px 0 0 0px;-webkit-border-radius: 0px 0 0 0px;-moz-border-radius: 0px 0 0 0px}
.material.modal .breadcrumb-arrow li, .material.modal .breadcrumb-arrow li a, .material.modal .breadcrumb-arrow li span {display: inline-block;vertical-align: top; font-size:14px; font-weight:600; color:#000;}
.material.modal .breadcrumb-arrow li:not(:first-child) {margin-left: -5px}
.material.modal .breadcrumb-arrow li+li:before {padding: 0;content: "";}
.material.modal .breadcrumb-arrow li span {padding: 0 0px}
.material.modal .breadcrumb-arrow li:first-child a {padding: 0 10px}
.material.modal .breadcrumb-arrow li a {position: relative;color: #000;text-decoration: none;background-color: #e5e5e4;border: 1px solid #e5e5e4; padding:0px 25px 0px 25px;}
.material.modal .breadcrumb-arrow li:first-child a {padding-left: 10px}
.material.modal .breadcrumb-arrow li a:after, .material.modal .breadcrumb-arrow li a:before {position: absolute;top: -3px;width: 0;height: 0;content: '';border-top: 25px solid transparent;border-bottom: 25px solid transparent}
.material.modal .breadcrumb-arrow li a:before {right: -10px;z-index: 3;border-left-color: #e5e5e4;border-left-style: solid;border-left-width: 11px}
.material.modal .breadcrumb-arrow li a:after {right: -11px;z-index: 2;border-left: 11px solid #fff}
.material.modal .breadcrumb-arrow li a:focus, .material.modal .breadcrumb-arrow li a:hover {background-color: #e5e5e4;border: 1px solid #e5e5e4}
.material.modal .breadcrumb-arrow li a:focus:before, .breadcrumb-arrow li a:hover:before {border-left-color: #e5e5e4}
.material.modal .breadcrumb-arrow li a:active {background-color: #e5e5e4;border: 1px solid #e5e5e4}
.material.modal .breadcrumb-arrow li a:active:after, .material.modal .breadcrumb-arrow li a:active:before {border-left-color: #e5e5e4}
.material.modal .breadcrumb-arrow li.active {padding: 0 10px; margin-left:15px;}
.material.modal .breadcrumb-arrow li span.fees{font-weight:500; color:#000; font-size:14px;}
.datepickHeight_special{height:30px !important; margin: 0 0 10px 0;}
.datepickHeight_special .datepicker{margin-top: -5px;}
.admin_footer{margin:0px; background-color:#252525; display:block; background-image: url(../images/logo_admin.png);background-position: left bottom;background-repeat: no-repeat;padding:20px; color: #5f5f5f; text-align:center; background-size: auto 100%; position:absolute; right:0; left: 0;}
.userIcon{border-radius: 50%;height: 40px;margin-right: 5px;width: 40px; float:left;}
.btn.bg_yellow:hover, .btn.bg_yellow:active, .btn.bg_yellow:focus { background-color: #ffd800!important;}
.btn.bg_yellow_black:hover, .btn.bg_yellow_black:active, .btn.bg_yellow_black:focus { background-color: #ffd800!important;}
.loaingBtnBG span {cursor: pointer;display: inline-block;position: relative;transition: 0.5s;}
.loaingBtnBG span:after {content:url('../images/box.gif');position: absolute;opacity: 0;top: 0;right:-80px;transition: 0.5s; top:-8px;}
.loaingBtnBG:hover span {padding-right: 85px;}
.loaingBtnBG:hover span:after {opacity: 1;right: 0;}
#slider-range.ui-widget.ui-widget-content {border: 1px solid #eee !important; border-radius:10px; margin:8px 0px; height:8px;}
#slider-range.ui-slider-horizontal .ui-slider-handle {top: -.4em !important;margin-left: -.6em;}
#slider-range.ui-widget-content {border: 1px solid #dddddd;background:#ccc !important;color: #333333;}
#slider-range .ui-widget-header {border: 1px solid #fff200;background:#fff200;color: #333333;font-weight: bold;}
#slider-range .ui-state-default {border: 1px solid #fff200;background: #fff200;font-weight: normal;color: #454545;border-radius: 10px;}
#slider-range .ui-state-hover,
#slider-range .ui-widget-content .ui-state-hover,
#slider-range .ui-widget-header .ui-state-hover,
#slider-range .ui-state-focus,
#slider-range .ui-widget-content .ui-state-focus,
#slider-range .ui-widget-header .ui-state-focus,
#slider-range .ui-button:hover,
#slider-range .ui-button:focus {border: 1px solid #ffd800 !important;background: #ffd800 !important;}
@media (max-width: 767px){
    #header_tab_menu .navbar-default .navbar-nav .open .dropdown-menu>li>a {color: #8a8a8a !important;}
    #header_tab_menu .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {color: #fff !important;}
}
.dropdown-menu {margin:0px 0 0 0px;border-radius: 15px !important;}


.mail_leftpanel{ height: calc(100% - 40px);width: 100%; padding:15px;}
.mail_leftpanel h1{color:#fff; text-align:center;}
.box_mail{margin:15px 0px; display:black;}
.label_title{color:#ccc; font-size:16px;}
ul.malilist{margin:0px; padding:0px;}
ul.malilist li{margin:0px; padding:0px; color:#999; line-height:30px; font-size:16px;}
ul.malilist li a{ color:#999;}
ul.malilist li a:hover{color:#fff;}

.mailbox-controls{padding:15px 10px;}
.mailbox_container{position: relative;border-radius: 3px;background: #ffffff;border-top: 3px solid #d2d6de;margin-bottom: 20px;width: 100%;box-shadow: 0 1px 1px rgba(0,0,0,0.1)}
.mailbox_header.with-border {border-bottom: 1px solid #f4f4f4;padding: 5px 0;}
.mailbox_header > .box-tools {position: absolute;right: 10px;top: 5px;}
.text-yellow {color: #fff200 !important;}
.mailbox-name a{color:#333;text-decoration:none;}
.mailbox-name a:hover, .mailbox-name a:active, .mailbox-name a:focus,{color:#333; text-decoration:none;}
.mailbox-messages tr.unread td {background: none repeat scroll 0 0 #f7f7f7;font-weight: 600;}
.fileinput-button {background: none repeat scroll 0 0 #eeeeee;}
.fileinput-button {float: left;margin-right: 4px;overflow: hidden;position: relative;}
.fileinput-button input {cursor: pointer;direction: ltr;font-size: 23px;margin: 0;opacity: 0;position: absolute;right: 0;top: 0;transform: translate(-300px, 0px) scale(4);}
.fileupload-buttonbar .btn, .fileupload-buttonbar .toggle {margin-bottom: 5px;}
.files .progress {width: 200px;}
.fileupload-processing .fileupload-loading {display: block;}

.mail.modal input {height:40px; padding:6px 12px; background-color:#e5e5e4;box-sizing: inherit;border: 1px solid transparent; margin-bottom:0px;}
.mail.modal input{box-shadow: none; color:#000;}
.mail.modal textarea {/* padding: 10px 20px; */ border-radius: 0;font-size: 14px;background-color:#e5e5e4;}
.mail.modal input:focus {border-color:transparent;box-shadow: none; color:#000;}
.mail.modal textarea:focus {border-color:transparent;box-shadow: none; color:#000;}
.mail.modal textarea {resize: none;}

.btn.composemail {border:1px solid #fff;color: #fff !important; background-color: #000 !important; font-weight:600; border-radius:20px;}
.btn.composemail:hover {color: #000 !important; background-color: #fff200 !important; font-weight:600;}
.btn.composemail:focus {color: #000 !important;background-color:#fff200 !important;outline: none;}
.round_btn i{font-size:16px; line-height:21px; text-align:center;}
.round_btn{border-radius:50%; height:36px; width:36px; box-shadow:none !important; border:2px solid #ccc; color:#b6bdc2; padding:0px !important;}
.round_btn:hover{ box-shadow:none !important; background-color:#fff200; border:2px solid #fff200; color:#000}

.mail.modal .modal-content {border-radius:0px !important;}
.modal-open .modal {z-index: 9999;}
.mailbox-read-message { padding: 10px;}
.mailbox-read-info {border-bottom: 1px solid #f4f4f4;}

.box-footer {background-color: #fff;border-radius: 0 0 3px 3px;border-top: 1px solid #f4f4f4;padding: 10px;}
.list-unstyled, .chart-legend, .contacts-list, .users-list, .mailbox-attachments {list-style: outside none none;margin: 0;padding: 0;}
.mailbox-attachments li {border: 1px solid #eee;float: left;margin-bottom: 10px;margin-right: 10px;width: 200px;}
.mailbox-attachment-icon {color: #666;font-size: 65px;padding: 20px 10px;text-align: center;}
.mailbox-attachment-icon, .mailbox-attachment-info, .mailbox-attachment-size {display: block;}
.mailbox-attachment-info {background: #f4f4f4 none repeat scroll 0 0;padding: 10px;}
.mailbox-attachment-icon, .mailbox-attachment-info, .mailbox-attachment-size {display: block;}
.mailbox-attachment-name {color: #666;font-weight: bold;}
.mailbox-attachment-size {color: #999;font-size: 12px;}
.mailbox-attachment-icon.has-img > img {height: auto;max-width: 100%;}
.small_btn{height:20px !important;line-height:10px !important;padding: 4px !important; box-shadow:none !important; border:1px solid #ccc;}
.small_btn:hover, .small_btn:focus, .small_btn:active{background-color: #f4f4f4;border-color: #ddd;color: #444;}
.small_btn i{font-size:14px !important; color:#333;}
.reply_btn{display: inline-block;height:36px !important;line-height:12px !important;padding:10px !important; color:#333;}
.reply_btn:hover, .reply_btn:focus, .reply_btn:active{background-color: #f4f4f4;border-color: #ddd;color: #444;}
.reply_btn i{font-size:14px !important; color:#333;}
.mailbox-attachment-icon.has-img {padding: 0;}
.mailbox-attachment-icon {color: #666;font-size: 65px;padding: 20px 10px;text-align: center;}
.wow {visibility: hidden;}

#footer{bottom:0px; /* text-align:center !important;background-color:#eee; color:#666; font-size:12px; line-height:30px;*/ width:100%;background-color:#333333;;}
#footer_inner{margin:0px; padding:40px 0px; background-color:#333333;  }
.copyright{margin:0px; padding:20px 0px; background-color:#252525; display:block;}
.copyright p{margin:0px; padding:0px 0px; display:block; text-align:center; color:#5f5f5f; width:100%;}
#footer h4{ color:#fff;}
#footer ul{ margin:0px; padding:0px;}
#footer ul li{ color:#a8a8a8; list-style-type:none; line-height:30px;}
#footer ul li a{color:#a8a8a8; text-decoration:none;}
#footer ul li a:hover{color:#fff; text-decoration:none;}
#footer .icon_gap{width:30px;}

#table-datatables table.dataTable thead .sorting_asc, #table-datatables table.dataTable thead .sorting { font-size: 14px !important;}
{font-size: 14px !important;}