/*! normalize.css v2.1.3 | MIT License | git.io/normalize *//* ==========================================================================   HTML5 display definitions   ========================================================================== *//** * Correct `block` display not defined in IE 8/9. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

/** * Correct `inline-block` display not defined in IE 8/9. */
audio, canvas, video {
    display: inline-block;
}

/** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */
audio:not([controls]) {
    display: none;
    height: 0;
}

/** * Address `[hidden]` styling not present in IE 8/9. * Hide the `template` element in IE, Safari, and Firefox < 22. */
[hidden], template {
    display: none;
}

/* ==========================================================================   Base   ========================================================================== *//** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling *    user zoom. */
html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/** * Remove default margin. */
body {
    margin: 0;
}

/* ==========================================================================   Links   ========================================================================== *//** * Remove the gray background color from active links in IE 10. */
a {
    background: transparent;
}

/** * Address `outline` inconsistency between Chrome and other browsers. */
a:focus {
    outline: thin dotted;
}

/** * Improve readability when focused and also mouse hovered in all browsers. */
a:active, a:hover {
    outline: 0;
}

/* ==========================================================================   Typography   ========================================================================== *//** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari 5, and Chrome. */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/** * Address styling not present in IE 8/9, Safari 5, and Chrome. */
abbr[title] {
    border-bottom: 1px dotted;
}

/** * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */
b, strong {
    font-weight: bold;
}

/** * Address styling not present in Safari 5 and Chrome. */
dfn {
    font-style: italic;
}

/** * Address differences between Firefox and other browsers. */
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/** * Address styling not present in IE 8/9. */
mark {
    background: #ff0;
    color: #000;
}

/** * Correct font family set oddly in Safari 5 and Chrome. */
code, kbd, pre, samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/** * Improve readability of pre-formatted text in all browsers. */
pre {
    white-space: pre-wrap;
}

/** * Set consistent quote types. */
q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/** * Address inconsistent and variable font size in all browsers. */
small {
    font-size: 80%;
}

/** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================   Embedded content   ========================================================================== *//** * Remove border when inside `a` element in IE 8/9. */
img {
    border: 0;
}

/** * Correct overflow displayed oddly in IE 9. */
svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================   Figures   ========================================================================== *//** * Address margin not present in IE 8/9 and Safari 5. */
figure {
    margin: 0;
}

/* ==========================================================================   Forms   ========================================================================== *//** * Define consistent border, margin, and padding. */
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */
button, input, select, textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */
button, input {
    line-height: normal;
}

/** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */
button, select {
    text-transform: none;
}

/** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` *    and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type *    `input` and others. */
button, html input[type="button"], /* 1 */
input[type="reset"], input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/** * Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] {
    cursor: default;
}

/** * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome *    (include `-moz` to future-proof). */
input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/** * Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */
textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================   Tables   ========================================================================== *//** * Remove most spacing between table cells. */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

@charset "UTF-8";
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    40% {
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    60% {
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce
}

@-webkit-keyframes flash {
    0%, 50%, 100% {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}

@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }
}

@keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        transform: translateX(-10px)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transform: translateX(10px)
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }
    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }
    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        transform: rotate(15deg)
    }
    40% {
        -webkit-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    60% {
        -webkit-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg)
    }
    80% {
        -webkit-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
    100% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
}

.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: scale(1);
        transform: scale(1)
    }
    10%, 20% {
        -webkit-transform: scale(.9) rotate(-3deg);
        transform: scale(.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }
    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    10%, 20% {
        -webkit-transform: scale(.9) rotate(-3deg);
        -ms-transform: scale(.9) rotate(-3deg);
        transform: scale(.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        -ms-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        -ms-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }
    100% {
        -webkit-transform: scale(1) rotate(0);
        -ms-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
        transform: translateX(-25%) rotate(-5deg)
    }
    30% {
        -webkit-transform: translateX(20%) rotate(3deg);
        transform: translateX(20%) rotate(3deg)
    }
    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
        transform: translateX(-15%) rotate(-3deg)
    }
    60% {
        -webkit-transform: translateX(10%) rotate(2deg);
        transform: translateX(10%) rotate(2deg)
    }
    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
        transform: translateX(-5%) rotate(-1deg)
    }
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%)
    }
    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
        -ms-transform: translateX(-25%) rotate(-5deg);
        transform: translateX(-25%) rotate(-5deg)
    }
    30% {
        -webkit-transform: translateX(20%) rotate(3deg);
        -ms-transform: translateX(20%) rotate(3deg);
        transform: translateX(20%) rotate(3deg)
    }
    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
        -ms-transform: translateX(-15%) rotate(-3deg);
        transform: translateX(-15%) rotate(-3deg)
    }
    60% {
        -webkit-transform: translateX(10%) rotate(2deg);
        -ms-transform: translateX(10%) rotate(2deg);
        transform: translateX(10%) rotate(2deg)
    }
    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
        -ms-transform: translateX(-5%) rotate(-1deg);
        transform: translateX(-5%) rotate(-1deg)
    }
    100% {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%)
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
}

@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    70% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05)
    }
    70% {
        -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9)
    }
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

@-webkit-keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }
    80% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        transform: translateY(30px)
    }
    80% {
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px)
    }
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown
}

@-webkit-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(30px);
        transform: translateX(30px)
    }
    80% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(30px);
        -ms-transform: translateX(30px);
        transform: translateX(30px)
    }
    80% {
        -webkit-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        transform: translateX(-10px)
    }
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft
}

@-webkit-keyframes bounceInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px)
    }
    80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        transform: translateX(-30px)
    }
    80% {
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transform: translateX(10px)
    }
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight
}

@-webkit-keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    80% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    80% {
        -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px)
    }
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp
}

@-webkit-keyframes bounceOut {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    25% {
        -webkit-transform: scale(.95);
        transform: scale(.95)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3)
    }
}

@keyframes bounceOut {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    25% {
        -webkit-transform: scale(.95);
        -ms-transform: scale(.95);
        transform: scale(.95)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3)
    }
}

.bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut
}

@-webkit-keyframes bounceOutDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
}

@keyframes bounceOutDown {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px)
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown
}

@-webkit-keyframes bounceOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

@keyframes bounceOutLeft {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft
}

@-webkit-keyframes bounceOutRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

@keyframes bounceOutRight {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight
}

@-webkit-keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

@keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

.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
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.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
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px)
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px)
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px)
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px)
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft
}

@-webkit-keyframes fadeOutLeftBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

@keyframes fadeOutLeftBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px)
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight
}

@-webkit-keyframes fadeOutRightBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

@keyframes fadeOutRightBig {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}

@-webkit-keyframes fadeOutUpBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1)
    }
    0%, 40% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1)
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95)
    }
    80%, 100% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    100% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1)
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1)
    }
    0%, 40% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1)
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95)
    }
    80%, 100% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
    100% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1)
    }
}

.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) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg)
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0);
        transform: perspective(400px) rotateX(0);
        opacity: 1
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        -ms-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
        -ms-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        -ms-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg)
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0);
        -ms-transform: perspective(400px) rotateX(0);
        transform: perspective(400px) rotateX(0);
        opacity: 1
    }
}

.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) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
        transform: perspective(400px) rotateY(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg)
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0);
        transform: perspective(400px) rotateY(0);
        opacity: 1
    }
}

@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        -ms-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
        -ms-transform: perspective(400px) rotateY(-10deg);
        transform: perspective(400px) rotateY(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        -ms-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg)
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0);
        -ms-transform: perspective(400px) rotateY(0);
        transform: perspective(400px) rotateY(0);
        opacity: 1
    }
}

.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) rotateX(0);
        transform: perspective(400px) rotateX(0);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0);
        -ms-transform: perspective(400px) rotateX(0);
        transform: perspective(400px) rotateX(0);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        -ms-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0);
        transform: perspective(400px) rotateY(0);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0);
        -ms-transform: perspective(400px) rotateY(0);
        transform: perspective(400px) rotateY(0);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        -ms-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

.flipOutY {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY
}

@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);
        opacity: 1
    }
    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        transform: translateX(0%) skewX(-15deg);
        opacity: 1
    }
    100% {
        -webkit-transform: translateX(0%) skewX(0);
        transform: translateX(0%) skewX(0);
        opacity: 1
    }
}

@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        -ms-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        -ms-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);
        opacity: 1
    }
    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        -ms-transform: translateX(0%) skewX(-15deg);
        transform: translateX(0%) skewX(-15deg);
        opacity: 1
    }
    100% {
        -webkit-transform: translateX(0%) skewX(0);
        -ms-transform: translateX(0%) skewX(0);
        transform: translateX(0%) skewX(0);
        opacity: 1
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedOut {
    0% {
        -webkit-transform: translateX(0%) skewX(0);
        transform: translateX(0%) skewX(0);
        opacity: 1
    }
    100% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOut {
    0% {
        -webkit-transform: translateX(0%) skewX(0);
        -ms-transform: translateX(0%) skewX(0);
        transform: translateX(0%) skewX(0);
        opacity: 1
    }
    100% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        -ms-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);
        opacity: 0
    }
}

.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: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0
    }
    0%, 100% {
        -webkit-transform-origin: center center;
        transform-origin: center center
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateIn {
    0% {
        -webkit-transform: rotate(-200deg);
        -ms-transform: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0
    }
    0%, 100% {
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center
    }
    100% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
    0%, 100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateInDownLeft {
    0% {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
    0%, 100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom
    }
    100% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft
}

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
    0%, 100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateInDownRight {
    0% {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
    0%, 100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom
    }
    100% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight
}

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
    0%, 100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateInUpLeft {
    0% {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
    0%, 100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom
    }
    100% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft
}

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
    0%, 100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateInUpRight {
    0% {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
    0%, 100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom
    }
    100% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight
}

@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    0%, 100% {
        -webkit-transform-origin: center center;
        transform-origin: center center
    }
    100% {
        -webkit-transform: rotate(200deg);
        transform: rotate(200deg);
        opacity: 0
    }
}

@keyframes rotateOut {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    0%, 100% {
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center
    }
    100% {
        -webkit-transform: rotate(200deg);
        -ms-transform: rotate(200deg);
        transform: rotate(200deg);
        opacity: 0
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut
}

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    0%, 100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom
    }
    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
}

@keyframes rotateOutDownLeft {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    0%, 100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom
    }
    100% {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
}

.rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft
}

@-webkit-keyframes rotateOutDownRight {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    0%, 100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom
    }
    100% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
}

@keyframes rotateOutDownRight {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    0%, 100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom
    }
    100% {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
}

.rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight
}

@-webkit-keyframes rotateOutUpLeft {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    0%, 100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom
    }
    100% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
}

@keyframes rotateOutUpLeft {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    0%, 100% {
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom
    }
    100% {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }
}

.rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft
}

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    0%, 100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom
    }
    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
}

@keyframes rotateOutUpRight {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        opacity: 1
    }
    0%, 100% {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom
    }
    100% {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
}

.rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight
}

@-webkit-keyframes slideInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes slideInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

@-webkit-keyframes slideInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

@-webkit-keyframes slideInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px)
    }
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

@keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft
}

@-webkit-keyframes slideOutRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

@keyframes slideOutRight {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px)
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight
}

@-webkit-keyframes slideOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

@keyframes slideOutUp {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp
}

@-webkit-keyframes hinge {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    0%, 20%, 60% {
        -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: rotate(80deg);
        transform: rotate(80deg)
    }
    40% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg)
    }
    40%, 80% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    80% {
        -webkit-transform: rotate(60deg) translateY(0);
        transform: rotate(60deg) translateY(0);
        opacity: 1
    }
    100% {
        -webkit-transform: translateY(700px);
        transform: translateY(700px);
        opacity: 0
    }
}

@keyframes hinge {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
    0%, 20%, 60% {
        -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: rotate(80deg);
        -ms-transform: rotate(80deg);
        transform: rotate(80deg)
    }
    40% {
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg)
    }
    40%, 80% {
        -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
    }
    80% {
        -webkit-transform: rotate(60deg) translateY(0);
        -ms-transform: rotate(60deg) translateY(0);
        transform: rotate(60deg) translateY(0);
        opacity: 1
    }
    100% {
        -webkit-transform: translateY(700px);
        -ms-transform: translateY(700px);
        transform: translateY(700px);
        opacity: 0
    }
}

.hinge {
    -webkit-animation-name: hinge;
    animation-name: hinge
}

@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0);
        transform: translateX(0) rotate(0)
    }
}

@keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        -ms-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0);
        -ms-transform: translateX(0) rotate(0);
        transform: translateX(0) rotate(0)
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn
}

@-webkit-keyframes rollOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0);
        transform: translateX(0) rotate(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg)
    }
}

@keyframes rollOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0);
        -ms-transform: translateX(0) rotate(0);
        transform: translateX(0) rotate(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
        -ms-transform: translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg)
    }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut
}

/*Uniform Theme: Uniform DefaultVersion: 1.8 - editted by pixelwarsBy: Josh PylesLicense: MIT License---For use with the Uniform plugin:http://pixelmatrixdesign.com/uniform/---Generated by Uniform Theme Generator:http://pixelmatrixdesign.com/uniform/themer.html*//* Global Declaration */
div.selector, div.selector span, div.checker span, div.radio span, div.uploader, div.uploader span.action, div.button, div.button span {*/
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
}

.selector, .radio, .checker, .uploader, .button, .selector *, .radio *, .checker *, .uploader *, .button * {
    margin: 0;
    padding: 0;
}

/* INPUT & TEXTAREA */
input.text, input.email, input.search, input.tel, input.url, input.datetime, input.date, input.month, input.week, input.time, input.datetime-local, input.number, input.color, input.password, select.uniform-multiselect, textarea.uniform {
    font-size: 12px;
    font-weight: normal;
    padding: 3px;
    color: #777; /*background: repeat-x 0px 0px;*/
    border-top: solid 1px #aaa;
    border-left: solid 1px #aaa;
    border-bottom: solid 1px #ccc;
    border-right: solid 1px #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    outline: 0;
}

/* remove default webkit and possible mozilla .search styles */
input.search, input.search:active {
    -moz-appearance: none;
    -webkit-appearance: none;
}

/*input.text:focus,input.email:focus,input.search:focus,input.tel:focus,input.url:focus,input.datetime:focus,input.date:focus,input.month:focus,input.week:focus,input.time:focus,input.datetime-local:focus,input.number:focus,input.color:focus,input.password:focus,select.uniform-multiselect:focus,textarea.uniform:focus {  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.3);  -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.3);  box-shadow: 0px 0px 4px rgba(0,0,0,0.3);  border-color: #999;  background: repeat-x 0px 0px;}*//* SPRITES *//* Select */
div.selector {
    background-position: -483px -130px;
    line-height: 45px;
    height: 45px;
}

div.selector span {
    background-position: right 0px;
    height: 26px;
    line-height: 26px;
}

div.selector select { /* change these to adjust positioning of select element */
    top: 0px;
    left: 0px;
}

div.selector:active, div.selector.active {
    background-position: -483px -156px;
}

div.selector:active span, div.selector.active span {
    background-position: right -26px;
}

div.selector.focus, div.selector.hover, div.selector:hover {
    background-position: -483px -182px;
}

div.selector.focus span, div.selector.hover span, div.selector:hover span {
    background-position: right -52px;
}

div.selector.focus:active, div.selector.focus.active, div.selector:hover:active, div.selector.active:hover {
    background-position: -483px -208px;
}

div.selector.focus:active span, div.selector:hover:active span, div.selector.active:hover span, div.selector.focus.active span {
    background-position: right -78px;
}

div.selector.disabled {
    background-position: -483px -234px;
}

div.selector.disabled span {
    background-position: right -104px;
}

/* Checkbox */
div.checker {
    width: 19px;
    height: 19px;
}

div.checker input {
    width: 19px;
    height: 19px;
}

div.checker span {
    background-position: 0px -260px;
    height: 19px;
    width: 19px;
}

div.checker:active span, div.checker.active span {
    background-position: -19px -260px;
}

div.checker.focus span, div.checker:hover span {
    background-position: -38px -260px;
}

div.checker.focus:active span, div.checker:active:hover span, div.checker.active:hover span, div.checker.focus.active span {
    background-position: -57px -260px;
}

div.checker span.checked {
    background-position: -76px -260px;
}

div.checker:active span.checked, div.checker.active span.checked {
    background-position: -95px -260px;
}

div.checker.focus span.checked, div.checker:hover span.checked {
    background-position: -114px -260px;
}

div.checker.focus:active span.checked, div.checker:hover:active span.checked, div.checker.active:hover span.checked, div.checker.active.focus span.checked {
    background-position: -133px -260px;
}

div.checker.disabled span, div.checker.disabled:active span, div.checker.disabled.active span {
    background-position: -152px -260px;
}

div.checker.disabled span.checked, div.checker.disabled:active span.checked, div.checker.disabled.active span.checked {
    background-position: -171px -260px;
}

/* Radio */
div.radio {
    width: 18px;
    height: 18px;
}

div.radio input {
    width: 18px;
    height: 18px;
}

div.radio span {
    height: 18px;
    width: 18px;
    background-position: 0px -279px;
}

div.radio:active span, div.radio.active span {
    background-position: -18px -279px;
}

div.radio.focus span, div.radio:hover span {
    background-position: -36px -279px;
}

div.radio.focus:active span, div.radio:active:hover span, div.radio.active:hover span, div.radio.active.focus span {
    background-position: -54px -279px;
}

div.radio span.checked {
    background-position: -72px -279px;
}

div.radio:active span.checked, div.radio.active span.checked {
    background-position: -90px -279px;
}

div.radio.focus span.checked, div.radio:hover span.checked {
    background-position: -108px -279px;
}

div.radio.focus:active span.checked, div.radio:hover:active span.checked, div.radio.focus.active span.checked, div.radio.active:hover span.checked {
    background-position: -126px -279px;
}

div.radio.disabled span, div.radio.disabled:active span, div.radio.disabled.active span {
    background-position: -144px -279px;
}

div.radio.disabled span.checked, div.radio.disabled:active span.checked, div.radio.disabled.active span.checked {
    background-position: -162px -279px;
}

/* Uploader */
div.uploader {
    background-position: 0px -297px;
    height: 28px;
}

div.uploader span.action {
    background-position: right -409px;
    height: 24px;
    line-height: 24px;
}

div.uploader span.filename {
    height: 24px; /* change this line to adjust positioning of filename area */
    margin: 2px 0px 2px 2px;
    line-height: 24px;
}

div.uploader.focus, div.uploader.hover, div.uploader:hover {
    background-position: 0px -353px;
}

div.uploader.focus span.action, div.uploader.hover span.action, div.uploader:hover span.action {
    background-position: right -437px;
}

div.uploader.active span.action, div.uploader:active span.action {
    background-position: right -465px;
}

div.uploader.focus.active span.action, div.uploader:focus.active span.action, div.uploader.focus:active span.action, div.uploader:focus:active span.action {
    background-position: right -493px;
}

div.uploader.disabled {
    background-position: 0px -325px;
}

div.uploader.disabled span.action {
    background-position: right -381px;
}

div.button {
    background-position: 0px -523px;
}

div.button span {
    background-position: right -643px;
}

div.button.focus, div.button:focus, div.button:hover, div.button.hover {
    background-position: 0px -553px;
}

div.button.focus span, div.button:focus span, div.button:hover span, div.button.hover span {
    background-position: right -673px;
}

div.button.active, div.button:active {
    background-position: 0px -583px;
}

div.button.active span, div.button:active span {
    background-position: right -703px;
    color: #555;
}

div.button.disabled, div.button:disabled {
    background-position: 0px -613px;
}

div.button.disabled span, div.button:disabled span {
    background-position: right -733px;
    color: #bbb;
    cursor: default;
}

/* PRESENTATION *//* Button */
div.button {
    height: 30px;
}

div.button span {
    margin-left: 13px;
    height: 22px;
    padding-top: 8px;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-left: 2px;
    padding-right: 15px;
}

/* Select */
div.selector {
    width: 190px;
    font-size: 12px;
}

div.selector select {
    min-width: 190px;
    font-size: 12px;
    border: solid 1px #fff;
}

div.selector span {
    padding: 0px 25px 0px 2px;
    cursor: pointer;
}

div.selector span {
    color: #666;
    width: 158px;
    text-shadow: 0 1px 0 #fff;
}

div.selector.disabled span {
    color: #bbb;
}

/* Checker */
div.checker {
    margin-right: 5px;
}

/* Radio */
div.radio {
    margin-right: 3px;
}

/* Uploader */
div.uploader {
    width: 190px;
    cursor: pointer;
}

div.uploader span.action {
    width: 85px;
    text-align: center;
    text-shadow: #fff 0px 1px 0px;
    background-color: #fff;
    font-size: 11px;
    font-weight: bold;
}

div.uploader span.filename {
    color: #777;
    width: 82px;
    border-right: solid 1px #bbb;
    font-size: 11px;
}

div.uploader input {
    width: 190px;
}

div.uploader.disabled span.action {
    color: #aaa;
}

div.uploader.disabled span.filename {
    border-color: #ddd;
    color: #aaa;
}

/*CORE FUNCTIONALITYNot advised to edit stuff below this line-----------------------------------------------------*/
.selector, .checker, .button, .radio, .uploader {
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    *display: inline;
}

.selector select:focus, .radio input:focus, .checker input:focus, .uploader input:focus {
    outline: 0;
}

/* Button */
div.button a, div.button button, div.button input {
    position: absolute;
}

div.button {
    cursor: pointer;
    position: relative;
}

div.button span {
    display: -moz-inline-box;
    display: inline-block;
    line-height: 1;
    text-align: center;
}

/* Select */
div.selector {
    position: relative;
    padding-left: 10px;
    overflow: hidden;
}

div.selector span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.selector select {
    position: absolute;
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    height: 25px;
    border: none;
    background: none;
}

/* Checker */
div.checker {
    position: relative;
}

div.checker span {
    display: -moz-inline-box;
    display: inline-block;
    text-align: center;
}

div.checker input {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    display: inline-block;
    background: none;
}

/* Radio */
div.radio {
    position: relative;
}

div.radio span {
    display: -moz-inline-box;
    display: inline-block;
    text-align: center;
}

div.radio input {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    text-align: center;
    display: inline-block;
    background: none;
}

/* Uploader */
div.uploader {
    position: relative;
    overflow: hidden;
    cursor: default;
}

div.uploader span.action {
    float: left;
    display: inline;
    padding: 2px 0px;
    overflow: hidden;
    cursor: pointer;
}

div.uploader span.filename {
    padding: 0px 10px;
    float: left;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

div.uploader input {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    float: right;
    height: 25px;
    border: none;
    cursor: default;
}

/* =WordPress Core-------------------------------------------------------------- */
.alignnone {
    margin: .4em 0 1.4em 0;
}

.aligncenter, div.aligncenter {
    display: block;
    margin: 1.8em auto;
}

.alignright {
    float: right;
    margin: .3em 0 2em 2em;
}

.alignleft {
    float: left;
    margin: .3em 2em 2em 0;
}

.aligncenter {
    display: block;
    margin: 1.8em auto;
    clear: both;
}

a img.alignright {
    float: right;
    margin: .3em 0 2em 2em;
}

a img.alignnone {
    margin: 1em 0;
}

a img.alignleft {
    float: left;
    margin: .3em 2em 2em 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    color: #6A7686;
    background: #fff;
    border: 1px solid #DDE4E6;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 6px 4px 10px;
    text-align: center;
    border-radius: 4px;
}

.wp-caption.alignnone {
    margin: 1.4em 0;
}

.wp-caption.alignleft {
    margin: .3em 1.6em 1em 0;
}

.wp-caption.alignright {
    margin: .3em 0 1em 1.5em;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
}

.wp-caption p.wp-caption-text {
    font-size: .925em;
    margin: 0;
    padding: .4em .4em .2em;
}

.alignleft:first-child, .alignright:first-child {
    margin-top: 1.2em;
}

/* --------------------------------------------	main.css : main style file	Project : cvCard	version : 1.2.1	Author : pixelwars	---	CONTEXT:	1. BASE		1.1 ELEMENTS		1.2 FONTS		1.3 TYPOGRAPHY	2. FORMS	3. COMMON	4. LAYOUT	5. MODULES	7. MEDIA QUERIES	8. THEME   -------------------------------------------- *//*  --------------------------------------------	1. BASE (@base) - base html elements    -------------------------------------------- *//* ----- 1.1 ELEMENTS ----- */
*, *:after, *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
}

html, body {
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    font-size: 1em;
    line-height: 1.66;
    -webkit-text-size-adjust: none;
}

a {
    color: #096;
    text-decoration: none;
    outline: none;
}

a:hover, a:focus {
    text-decoration: none;
    outline: none;
}

a:hover {
    color: #5BCF80
}

iframe {
    border: none
}

ul {
    list-style: square
}

img {
    max-width: 100%;
    height: auto;
}

/* ----- 1.2 FONTS ----- *//* BODY */
body, input, textarea, select, button {
    font-family: Lato, Arial, serif
}

/* FONT AWESOME chrome svg hack for smooth icons :   http://www.adtrak.co.uk/blog/font-face-chrome-rendering/#fix */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    
}

/* FONT AWESOME ICONS */
.fancy-ico:before, #fancybox-close:before, .icon, .icon:before, .mask:before, .widget-twitter ul:before, .widget-twitter ul li:before, .alert:before, .site-alert:before, blockquote:before, .testo:before, .post-format:before, .flex-direction-nav a:before, .toggle h4:before, dd:before, .portfolio-nav .back:before, .process:before {
    font-family: FontAwesome;
    font-weight: normal;
    text-align: left;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
}

/* ----- 1.3 TYPOGRAPHY ----- *//* headings and paragraphs  */
h1 {
    font-size: 2.20em;
    margin: 0.8em 0 0.4em 0;
}

h2 {
    font-size: 1.50em;
    margin: 1.0em 0 0.6em 0;
    font-weight: 800;
}

h3 {
    font-size: 1.20em;
    margin: 1.0em 0 .6em 0;
}

h4 {
    font-size: 1.00em;
    margin: 2.0em 0 .6em 0;
}

h5 {
    font-size: 1.00em;
    margin: 1.0em 0 .8em 0;
}

h6 {
    font-size: 0.90em;
    margin: 1.0em 0 .8em 0;
}

p {
    margin: 1.2em 0
}

/* blockquote  */
blockquote {
    position: relative;
    margin: 2em 0;
    padding: .3em 2em 1em 2.0em;
    font-size: 1.6em;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: 300;
    font-style: italic;
}

blockquote:before {
    display: block;
    content: "\f10d";
    line-height: 1;
    font-size: 1.2em;
    position: absolute;
    left: 0;
    top: -0.1em;
    color: #DDE4E6;
}

blockquote cite {
    display: block;
    font-size: 14px;
    letter-spacing: .04em;
    text-align: right;
    padding-right: 1em;
    margin-top: 12px;
    font-style: normal;
    font-weight: 400;
    color: #B7C6C9;
}

blockquote cite:before {
    content: "\2014 \2009"
}

hr {
    padding: .6em 0 1em 0;
    margin-bottom: 3em;
    outline: 0;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #eee;
}

/* tables  */
table {
    font-size: .9em;
    margin-bottom: 3em;
    text-align: center;
}

tr th {
    padding: .8em 2em .8em 2em;
    font-weight: 800;
    border-bottom: 2px solid #DDE4E6;
    text-transform: uppercase;
}

tr td {
    color: #6A7686;
    padding: .8em 1em .6em 1em;
    border-bottom: 1px solid #eee;
}

tfoot tr td {
    border-bottom: 0
}

tr:nth-child(odd) td {
    background: #FAFCFD;
}

/* code and pre  */
code, pre {
    padding: 0 3px 2px;
    margin-bottom: 4em;
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    font-size: 12px;
    color: #333333;
    white-space: pre;
    overflow: auto;
}

code {
    display: inline-block;
    margin: 0 .4em;
    padding: 1px 6px;
    background: #fff;
    border: 1px solid #DDE4E6;
    box-shadow: 1px 1px 0 #fff, 2px 2px 0 #DDE4E6;
}

/* lists  */
ol, ul {
    margin: .2em 0 1em 0;
    line-height: 1.8;
}

ul {
    list-style: circle
}

dt {
    margin-bottom: .4em;
}

dd {
    padding-bottom: 1em;
    margin-left: 1.4em;
}

dd:before {
    content: "\f0a4";
    font-size: 14px;
    margin-right: 12px;
    color: #B7C6C9;
}

/*  --------------------------------------------	2. FORMS (@forms) - form elements    -------------------------------------------- */
form p {
    position: relative;
    margin: 1.6em 0;
}

label {
    display: block;
    font-size: 10px;
    margin-bottom: .2em;
    letter-spacing: 1px;
    color: #6A7686;
    text-transform: uppercase;
}

::-webkit-input-placeholder {
    color: rgba(106, 118, 134, 0.4);
}

::-moz-placeholder {
    color: rgba(106, 118, 134, 0.4);
}

:-ms-input-placeholder {
    color: rgba(106, 118, 134, 0.4);
}

input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]), textarea, select {
    padding: .8em;
    width: 262px;
    max-width: 100%;
    font-size: 1em;
    color: #6A7686;
    border: 2px solid #e9eeee;
    border-radius: 4px;
    background: #fff;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]):focus, textarea:focus, input:focus, select:focus, div.uploader:hover {
    border-color: #b7c6c9;
    outline: 0;
}

select {
    min-width: 262px
}

textarea {
    width: 50%;
    min-width: 262px;
    min-height: 11em;
}

.inline-label {
    display: inline-block;
    margin-right: 2em;
    font-weight: 400;
    color: #6A7686;
    letter-spacing: 0;
}

/* uniform  */
div.selector.disabled, div.checker.disabled, div.radio.disabled {
    opacity: .4
}

div.selector {
    font-size: .9em;
    padding: .4em;
    width: 262px !important;
    line-height: 55px;
    height: 55px;
    padding-left: 1em;
    background: #fff;
    border: 2px solid #e9eeee;
    border-radius: 4px;
}

div.selector:before, div.checker span:before, div.radio span:before, div.uploaderspan.action:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-size: 9px;
    width: 1.8em;
    text-align: right;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
}

div.selector:before {
    position: absolute;
    top: 0;
    right: 15px;
    font-size: 26px;
    color: #b7c6c9;
    content: "\f107";
}

div.selector.focus {
    border-color: #b7c6c9
}

div.selector.focus:before {
    color: #6A7686
}

div.selector.focus, div.selector.hover, div.selector:hover {
    border-color: #b7c6c9
}

div.selector span {
    padding-top: 8px;
    padding-left: 0;
    color: #6A7686;
    background: none;
}

div.selector select {
    width: 98% !important;
    left: 1% !important;
    height: auto;
    min-height: 53px;
    line-height: 53px;
    font-size: 1em;
    -webkit-tap-highlight-color: transparent;
}

.android div.selector select {
    font-size: 2em
}

/* checkboxes  */
div.checker, div.radio {
    width: 20px;
    height: 29px;
    margin-right: 7px;
}

div.checker span, div.radio span {
    background: none
}

div.checker span:before, div.radio span:before {
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 22px;
    line-height: 120%;
    color: #6A7686;
    content: "\f096";
}

div.checker span.checked:before, div.radio span.checked:before {
    content: "\f046"
}

div.radio span:before {
    content: "\f10c"
}

div.radio span.checked:before {
    content: "\f111"
}

/* file upload  */
div.uploader {
    width: 262px;
    height: 55px;
    background: #fff;
    border: 2px solid #e9eeee;
    border-radius: 4px;
}

div.uploader input {
    width: 100%;
    z-index: 100;
    line-height: 55px;
    min-height: 55px;
}

div.uploader span.filename {
    padding: 0 12px;
    width: 100%;
    100;
    line-height: 50px;
    min-height: 55px;
    border-left: 0;
    font-size: 13px;
    color: #6A7686;
}

div.uploader span.action {
    width: 10px;
    text-indent: -999em;
    background: #fff;
    padding: 8px 16px 8px 36px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 13px;
    border-left: 2px solid #e9eeee;
    height: 100%;
}

div.uploader:hover span.action {
    border-left-color: #b7c6c9;
}

div.uploader span.action:before {
    text-indent: 0;
    content: "\f0ee";
    color: #b7c6c9;
    font-size: 22px;
    text-align: center;
    position: absolute;
    top: 15px;
    left: 7px;
}

/* contact form 7 compatibility  */
.wpcf7 {
    padding: 0
}

.wpcf7 input[type=submit] {
    margin-top: 1.4em
}

.wpcf7 label {
    display: inline-block;
    margin-right: 2em;
}

.wpcf7 div.checker, .wpcf7 div.radio {
    margin-right: 0px
}

/* validation  */
label.error {
    position: absolute;
    bottom: -20px;
    left: 0;
    min-width: 180px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    padding: .2em .8em;
    border-radius: 3px;
    background-color: #DA4842;
    color: #fff;
    letter-spacing: 0;
}

label.error:after {
    content: " ";
    position: absolute;
    left: 1.6em;
    bottom: 100%;
    pointer-events: none;
    width: 0;
    height: 0;
    border-bottom: 8px solid #DA4842;
    border-right: 8px solid transparent;
}

/*  --------------------------------------------	3. COMMON (@common) - common and helper classes    -------------------------------------------- */
.cf:before, .cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both
}

.center {
    text-align: center
}

.easing, .media-box .mask, .client img {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.easing-short, input, textarea, .social li a, #fancybox-close, .classic-layout .vs-nav li a, .latest-posts article header a, .button, .portfolio-nav a.button, .fancy-ico, .single-page-layout .vs-nav li i, .entry-title a, a.more-link, .format-link .link-content > a:first-child, .flex-control-paging li a, .navigation a, .pagination a, .entry-meta a, .nav-single a, .comment a, .filters li a, .entry-title a {
    -webkit-transition: color 0.1s, background-color .2s, border-color .2s;
    transition: color 0.1s, background-color .2s, border-color .2s;
}

.no-csstransitions #nprogress .spinner {
    display: none !important;
}

/*  --------------------------------------------	4. LAYOUT (@layout) : layout styles    -------------------------------------------- */
.container {
    position: relative;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.container:before, .container:after {
    display: none;
}

.no-touch .container {
    overflow-x: hidden
}

.content {
    position: relative;
    padding: 1em 2em;
    margin: auto;
    width: 100%;
    text-align: left;
}

.readable-content {
    width: 90%;
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
}

.full-width-content {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.hentry {
    padding: 0.25em 0 2.5em 0
}

.entry-title {
    margin-top: 0;
    font-size: 3.0em;
    line-height: 1.2;
    font-weight: 800;
    text-align: center;
}

.entry-content {
    padding: 0.25em 0 1.250em 0
}

/* ----- 4.1 HEADER ----- */
.header {
    z-index: 200;
    margin: 0 auto;
    padding: 2em;
    width: 100%;
    text-align: center;
    -webkit-backface-visibility: hidden;
}

.header h1 {
    margin: 25px 0 10px 0;
    padding: 0;
    font-weight: 300;
    font-size: 2.4em;
    -webkit-backface-visibility: hidden;
}

.header img {
    max-height: 350px;
    border-radius:50%;
    border: 9px solid #ddd;
}

.header h2 {
    font-size: 1.3em;
    margin: .1em 0 .6em;
    display: inline-block;
    padding: 6px 10px;
    background: #FAF46A;
    color: rgba(0, 0, 0, .7);
    border-radius: 4px;
    line-height: 1;
}

/* single page menu  */
.single-page-layout .vs-nav li a {
    letter-spacing: -1px;
    margin: 0 4px;
    padding: 0;
}

.single-page-layout .vs-nav li i {
    font-size: 17px;
    display: inline-block;
    width: 58px;
    line-height: 53px;
    text-align: center;
    border-radius: 50%;
    color: #6A7686;
    border: 2px solid #ECF0F1;
    background: #fff;
}

.single-page-layout .vs-nav li i:hover, .single-page-layout .vs-nav li i.active {
    color: #fff;
    border-color: transparent;
}

/* TRIPLE LAYOUT */
.vs-nav {
    position: relative;
    display: block;
    margin: .9em auto 0 auto;
    padding: 0;
    list-style: none;
}

.vs-triplelayout .vs-nav {
    width: 33.33%;
    max-width: 360px;
    height: 60px;
}

.vs-nav li {
    display: inline-block;
    margin-bottom: 10px;
    text-align: center;
    text-decoration: none;
}

.vs-triplelayout .vs-nav li {
    position: absolute;
    visibility: hidden;
    width: 100%;
}

.vs-nav li a {
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    color: #D0DADC;
    letter-spacing: -2px;
    text-decoration: none;
    font-weight: 700;
    font-size: 2.7em;
}

.vs-nav li a:hover {
    color: #BECACC;
}

.vs-nav li a:focus, .vs-triplelayout .vs-nav .vs-nav-current a, .vs-nav li.current_page_item a, .container.vs-move-left .vs-nav-right a, .container.vs-move-right .vs-nav-left a {
    color: #345;
}

.container.vs-move-left .vs-nav-current a, .container.vs-move-right .vs-nav-current a {
    color: #D0DADC
}

.vs-triplelayout .vs-nav .vs-nav-left, .vs-triplelayout .vs-nav .vs-nav-right, .vs-triplelayout .vs-nav .vs-nav-left-outer, .vs-triplelayout .vs-nav .vs-nav-right-outer, .vs-triplelayout .vs-nav .vs-nav-current {
    visibility: visible
}

.vs-triplelayout .vs-nav .vs-nav-current {
    left: 0%
}

.vs-triplelayout .vs-nav .vs-nav-current a {
    cursor: default
}

.vs-triplelayout .vs-nav .vs-nav-left {
    left: -100%
}

.vs-triplelayout .vs-nav .vs-nav-right {
    left: 100%
}

.vs-triplelayout .vs-nav .vs-nav-right-outer {
    left: 200%
}

.vs-triplelayout .vs-nav .vs-nav-left-outer {
    left: -200%
}

.container.vs-move-left .vs-nav-left, .container.vs-move-left .vs-nav-left-outer, .container.vs-move-left .vs-nav-current, .container.vs-move-left .vs-nav-right, .container.vs-move-left .vs-nav-right-outer {
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.container.vs-move-right .vs-nav-left, .container.vs-move-right .vs-nav-left-outer, .container.vs-move-right .vs-nav-current, .container.vs-move-right .vs-nav-right, .container.vs-move-right .vs-nav-right-outer {
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.container.vs-move-left .vs-nav-left, .container.vs-move-right .vs-nav-right {
    opacity: 0
}

.wrapper {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
}

.vs-triplelayout .wrapper {
    min-height: 100%
}

.wrapper > section {
    z-index: 1;
    min-height: 100%;
    margin: 0 auto;
    padding: 0 0 30px;
    width: 100%;
    background: #fff;
}

.vs-triplelayout .wrapper > section {
    position: absolute;
    top: 0;
    left: 0%;
    margin: 0;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.vs-triplelayout .wrapper > section:not(.vs-current) {
    overflow: hidden;
    height: 100%;
}

.vs-triplelayout .wrapper .vs-left, .vs-triplelayout .wrapper .vs-left-outer, .vs-triplelayout .wrapper .vs-current, .vs-triplelayout .wrapper .vs-right, .vs-triplelayout .wrapper .vs-right-outer {
    visibility: visible
}

.vs-triplelayout .wrapper .vs-left {
    left: -100%;
}

.vs-triplelayout .wrapper .vs-left-outer {
    left: -200%;
}

.vs-triplelayout .wrapper .vs-current {
    position: relative;
    z-index: 100;
}

.vs-triplelayout .wrapper .vs-right {
    left: 100%;
}

.vs-triplelayout .wrapper .vs-right-outer {
    left: 200%;
}

.container.vs-move-left .vs-left, .container.vs-move-left .vs-current, .container.vs-move-left .vs-right, .container.vs-move-left .vs-right-outer {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.container.vs-move-right .vs-left, .container.vs-move-right .vs-left-outer, .container.vs-move-right .vs-current, .container.vs-move-right .vs-right {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

/* FAST NAVIGATE MODE */
.fast-navigate .container.vs-move-left .vs-left, .fast-navigate .container.vs-move-left .vs-current, .fast-navigate .container.vs-move-left .vs-right, .fast-navigate .container.vs-move-left .vs-right-outer {
    -webkit-transition: -webkit-transform 0.1s;
    transition: transform 0.1s;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.fast-navigate .container.vs-move-right .vs-left, .fast-navigate .container.vs-move-right .vs-left-outer, .fast-navigate .container.vs-move-right .vs-current, .fast-navigate .container.vs-move-right .vs-right {
    -webkit-transition: -webkit-transform 0.1s;
    transition: transform 0.1s;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.fast-navigate .container.vs-move-left .vs-nav-left, .fast-navigate .container.vs-move-left .vs-nav-left-outer, .fast-navigate .container.vs-move-left .vs-nav-current, .fast-navigate .container.vs-move-left .vs-nav-right, .fast-navigate .container.vs-move-left .vs-nav-right-outer {
    -webkit-transition: -webkit-transform 0.1s, opacity 0.1s;
    transition: transform 0.1s, opacity 0.1s;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.fast-navigate .container.vs-move-right .vs-nav-left, .fast-navigate .container.vs-move-right .vs-nav-left-outer, .fast-navigate .container.vs-move-right .vs-nav-current, .fast-navigate .container.vs-move-right .vs-nav-right, .fast-navigate .container.vs-move-right .vs-nav-right-outer {
    -webkit-transition: -webkit-transform 0.1s, opacity 0.1s;
    transition: transform 0.1s, opacity 0.1s;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

/* Page Opacity Effect */
.vs-triplelayout .vs-right, .vs-triplelayout .vs-left, .vs-triplelayout .vs-left-outer, .vs-triplelayout .vs-right-outer, .container.vs-triplelayout.vs-move-left .vs-current, .container.vs-triplelayout.vs-move-right .vs-current {
    opacity: .3
}

.container.vs-triplelayout.vs-move-left .vs-right, .container.vs-triplelayout.vs-move-right .vs-left {
    opacity: 1
}

.vs-sidenav {
    display: none;
}

.vs-sidenav div {
    position: fixed;
    top: 0;
    z-index: 500;
    width: 10%;
    height: 100%;
    cursor: pointer;
}

.vs-sidenav .vs-sidenav-left {
    left: 0px
}

.vs-sidenav .vs-sidenav-right {
    right: 0px
}

/* classic layout : for mobile and non supported browsers */
.classic-layout .wrapper {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

.classic-layout .vs-nav {
    margin-top: 2em;
}

.classic-layout .vs-nav li a {
    font-size: 13px;
    font-weight: 400;
    display: inline-block;
    margin: 0 4px;
    padding: 6px 8px;
    color: #6A7686;
    letter-spacing: 0;
    border: 2px solid #DDE4E6;
    border-radius: 4px;
    line-height: 1;
}

/* Classic Layout Nav Active Item */
.classic-layout .vs-nav li a:hover, .classic-layout .vs-nav li.current_page_item a {
    color: #fff;
    background: #345;
    border-color: transparent;
}

/* SEARCH */
.header-search {
    display: none;
    padding: 1.4em 0;
}

.search-link {
    cursor: pointer;
}

.search-link:hover, .search-link.active {
    border-color: rgba(0, 0, 0, 0) !important;
    background: #456 !important;
}

#search-form {
    position: relative;
    margin-left: -14px;
}

#search-form #search {
    width: 280px;
    padding-right: 36px;
    outline: 0;
}

#search-form #search:focus {
    color: #333;
}

#search-submit {
    margin: 0 0 0 -40px;
    font-size: 17px;
    text-shadow: none;
    color: #444;
    border: 0;
    outline: 0;
    padding: 0;
    background: none;
}

/*  --------------------------------------------	5. MODULES @modules : reusable styles    -------------------------------------------- */


/* HEADING WITH ICON */

h2 .i-holder {
    font-size: 22px;
    color: #B7C6C9;
    background: #fff;
    border-radius: 50%;
    border: 4px solid #F4F6F7;
    width: 48px;
    height: 48px;
    position:relative;
    float: left;
    top: 4px;
}
h2 .i-holder svg {
    display: inline-block;
    margin: 0 auto;
    position: absolute;
    left: 6px;
    top: 7px;
}
h2 .i-text {

    padding-left: 14px;
    top: 13px;
    font-size: 18px;
}

h2 svg:before {
    display: inline;
    margin-left: 0;
    margin-right: 0;
}

/* SECTION-TITLE */
.section-title {
    position: relative;
    margin-bottom: 1em;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 700;
}

.section-title:before {
    content: "";
    position: absolute;
    top: 23px;
    left: 0;
    margin-top: 3px;
    width: 100%;
    border-bottom: 4px solid #F4F6F7;
}

.section-title span {
    position: relative;
    display: inline-block;
    padding-right: 1.4em;
    background: #fff;
}

.row + .section-title {
    margin-top: 3em;
}

.section-title + p {
    margin-top: 2em;
}

/* INTRO */
.intro {
    text-align: center;
    padding: 16px 30px;
    font-size: 32px;
}

.intro h2 {
    font-size: 2.0em;
    font-weight: 300;
    line-height: 1.4;
}

.intro h2 strong {
    letter-spacing: -1px;
    font-weight: 800;
}

/* ROTATE WORDS */
.rotate-words {
    display: inline-block;
    min-width: 180px;
    min-height: 34px;
    text-align: left;
    text-indent: 4px;
}

.rotate-words span {
    position: absolute;
    opacity: 0;
    font-weight: 800;
    letter-spacing: -1px;
}

.rotate-words span.rotate-in {
    animation: rotateInWord .5s linear forwards;
    -webkit-animation: rotateInWord .5s linear forwards;
}

.rotate-words span.rotate-out {
    animation: rotateOutWord .5s linear forwards;
    -webkit-animation: rotateOutWord .5s linear forwards;
}

.rotate-words span:first-child {
    opacity: 1;
}

.no-csstransforms .rotate-words span {
    display: none;
    opacity: 1;
}

@-webkit-keyframes rotateInWord {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
}

@-webkit-keyframes rotateOutWord {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(30px);
    }
}

@keyframes rotateInWord {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes rotateOutWord {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }
    100% {
        opacity: 0;
        transform: translateY(30px);
    }
}

/* TWITTER WIDGET */
.widget-twitter ul {
    list-style: none;
    padding: 0;
}

.widget-twitter li {
    position: relative;
    margin-bottom: .2em;
    padding-top: .1em;
    font-size: 14px;
}

.widget-twitter li:before {
    content: "\f099";
    position: absolute;
    top: -12px;
    left: 50%;
    font-size: 36px;
    color: #567;
    margin-left: -16px;
}

.widget-twitter .tweet {
    padding: 1.5em 2.4em;
    color: #6A7686;
    background: #E4F1F6;
    border-radius: 4px;
}

.widget-twitter .timePosted {
    font-size: 10px;
    color: #B7C6C9;
    margin-top: -12px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.widget-twitter .timePosted a {
    color: #ccc;
}

.widget-twitter .interact {
    display: none;
}

.widget-twitter ul li span + a {
    float: right;
    margin-top: .4em;
    color: #aaa;
}

/* SERVICE */
.service {
    text-align: center;
    padding: 1.6em 0 2em 0;
}

.service:last-child:after {
    display: none;
}

.service i {
    display: inline-block;
    width: 86px;
    line-height: 86px;
    font-size: 32px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    background: #5BCF80;
}

.service i:before {
    margin: 0 .2em;
    display: inline-block;
}

.service p {
    font-size: 15px;
    margin-top: .4em;
    color: #96A5A8;
}

.service h4 {
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 800;
}

@media (min-width: 768px) and (max-width: 991px) {
    .col-sm-6:nth-child(2n+1) {
        clear: left;
    }
}

/* PROCESS */
.process {
    position: relative;
    text-align: center;
}

.process:before {
    content: "\f178";
    position: absolute;
    top: 50%;
    margin-top: -10px;
    right: -30px;
}

.process .process-box {
    width: 120px;
    height: 120px;
    padding: 24px 10px;
    margin: 1em auto 3em;
    background: #EAEEEF;
    border-radius: 50%;
}

.process-box i {
    font-size: 38px;
    width: 52px;
    line-height: 52px;
}

.process-box h4 {
    margin: 0;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .07em;
}

.row [class^="col-"]:last-child .process:before {
    display: none;
}

/* FUN FACT */
.fun-fact {
    padding: 2em .2em 4em 0;
}

.fun-fact i {
    display: block;
    float: left;
    margin-bottom: 12px;
    width: 82px;
    line-height: 64px;
    font-size: 61px;
    border-radius: 50%;
    text-align: center;
}

.fun-fact i:before {
    margin: 0 .2em;
    display: inline-block;
}

.fun-fact h4 {
    margin: 5px 0 0 96px;
    font-size: 24px;
    letter-spacing: 1px;
    line-height: 1.2;
    font-weight: 300;
}

/* CLIENT */
.client {
    margin: 1em 0;
    text-align: center;
}

.client img {
    max-width: 90%;
    max-height: 64px;
    opacity: .4;
}

.client a:hover img {
    opacity: 1;
}

/* TIMELINE */
.timeline {
    position: relative;
    padding-left: 112px;
    padding-bottom: 8px;
}

.timeline h2 {
    position: relative;
    margin-bottom: 2em;
    font-size: 19px;
    font-weight: 300;
    letter-spacing: 1px;
}

.timeline h2 [class^="icon-"], .timeline h2 [class*=" icon-"], .timeline h2 .fa {
    display: block;
    font-size: 28px;
    position: absolute;
    top: -27px;
    left: -112px;
    width: 86px;
    line-height: 78px;
    margin: 0;
    z-index: 120;
}

.timeline h2 [class^="icon-"]:before, .timeline h2 [class*=" icon-"]:before, .timeline h2 i.fa:before {
    margin: 0;
}

.event {
    position: relative;
    padding: 26px 32px;
    margin-bottom: 3em;
    background: #ffffff;
    border: 3px solid #EDF1F3;
    border-radius: 6px;
}

.event:after, .event:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.event:after {
    border-right-color: #ffffff;
    border-width: 10px;
    margin-top: -10px;
}

.event:before {
    border-right-color: #EDF1F3;
    border-width: 15px;
    margin-top: -15px;
}

.event .date {
    position: absolute;
    top: 45%;
    margin-top: -24px;
    left: -106px;
    width: 68px;
    line-height: 58px;
    text-align: center;
    background: #5BCF80;
    display: block;
    z-index: 120;
    color: #fff;
    border-radius: 50%;
    border: 5px solid #FFF;
    font-family: Oswald;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 1px;
}

.event.current .date {
    border-color: #345;
    outline: 5px solid #FFF;
    background-color: #345;
}

.timeline + .timeline .event:last-child p:before {
    height: 76%
}

.event h4 {
    margin: 0;
    padding: 0;
}

.event h5 {
    margin: 0;
    padding: 0 0 .3em 0;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    color: #C9D5D6;
}

.event p {
    margin: .6em 0 .2em 0;
    font-size: 14px;
    letter-spacing: .02em;
}

.event p:before {
    display: block;
    content: "";
    position: absolute;
    top: -30px;
    left: -72px;
    height: 160%;
    width: 4px;
    background: #F4F6F7;
}

/* SKILLS */
.skillset {
    padding: 0 0 3.2em 0
}

.skill-unit {
    padding-bottom: 0
}

.skill-unit h4 {
    margin-bottom: -26px;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 1px;
    color: #fff;
    position: relative;
    z-index: 100;
    padding-left: 14px;
    text-transform: uppercase;
}

.skill-unit .bar {
    position: relative;
    width: 100%;
    height: 36px;
}

.skill-unit .bar .progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: 4px;
    background: #5BCF80; /*box-shadow: 4px 4px 0 #e7e7e7;*/
}

/* TESTIMONIAL */
.testo-group {
    padding: 1em 0 2em 0;
}

.testo {
    position: relative;
    padding: 1.4em 2.2em;
    margin: 0 16px 40px 0;
    background: #EFF4F5;
    border-radius: 6px;
}

.testo:before {
    display: block;
    content: "\f10d";
    line-height: 1;
    font-size: 14px;
    position: absolute;
    left: 10px;
    top: 12px;
    color: #fff;
    border: 3px solid #FFF;
    padding: 4px 6px;
    border-radius: 50%;
}

.testo img {
    display: block;
    float: right;
    max-width: 100px;
    border-radius: 50%;
    margin: -40px -60px 10px 20px;
    border: 8px solid #fff;
}

.testo h4 {
    position: relative;
    margin: 0;
    font-weight: 700;
    color: #6A7686;
    font-size: 16px;
}

.testo h4 span {
    display: inline-block;
    font-size: 11px;
    letter-spacing: .04em;
    font-weight: 700;
    margin-left: 1em;
    color: #BFC5CD;
    text-transform: uppercase;
}

.testo p {
    position: relative;
    margin: .6em 0 0.2em 0;
    font-size: 14px;
    line-height: 150%;
    color: #6A7686;
}

/* DOWNLOAD BUTTON */
.download-button {
    margin-bottom: 4em;
}

.download-button .button {
    padding: 1.7em 3em;
    margin-top: 1em;
}

/* STAMP */
.stamp {
    position: relative;
    float: left;
    margin-right: 1.6em;
    width: 114px;
    height: 134px;
}

.stamp:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.stamp img {
    display: block;
    width: 94px;
    height: 114px;
    position: absolute;
    top: 10px;
    left: 10px;
}

/* LETTER */
.letter {
    padding: 1.0em 0 3em 0;
    overflow: auto;
}

.letter-title {
    margin: 0 0 .6em 0;
    font-size: 3em;
    font-weight: 400;
    line-height: 120%;
    font-family: 'Tangerine', serif;
    color: #D0DADC;
}

.letter-info {
    margin-left: 130px;
}

.letter-info p i {
    display: inline-block;
    padding: 7px 9px;
    font-size: 15px;
    color: #fff;
    background: #5BCF80;
    margin: 0 14px 10px 0;
    border-radius: 50%;
}

.letter-info p {
    margin: 0;
    font-size: 14px;
}

/* SOCIAL LINKS */
.social {
    padding: 0;
    margin: 2em 0 4em 0;
    list-style: none;
}

.social li {
    display: inline-block;
    padding: 0;
    margin-bottom: -3px;
}

.social li a {
    display: block;
    float: left;
    margin: 0 .4em .3em 0;
    text-align: center;
    font-size: 14px;
    font-family: "fontello";
    width: 42px;
    line-height: 40px;
    color: #516075;
    border-radius: 4px;
    border: 1px solid #dde4e6;
}

.social li a.facebook:before {
    content: '\e800'
}

.social li a.twitter:before {
    content: '\e801'
}

.social li a.flickr:before {
    content: '\e810'
}

.social li a.rss:before {
    content: '\e80b'
}

.social li a.dribbble:before {
    content: '\e806'
}

.social li a.lastfm:before {
    content: '\e80a'
}

.social li a.linkedin:before {
    content: '\e802'
}

.social li a.vimeo:before {
    content: '\e80c'
}

.social li a.forrst:before {
    content: '\e80d'
}

.social li a.skype:before {
    content: '\e812'
}

.social li a.picasa:before {
    content: '\e8e0'
}

.social li a.tumblr:before {
    content: '\e815'
}

.social li a.behance:before {
    content: '\e868'
}

.social li a.blogger:before {
    content: '\e80f'
}

.social li a.delicious:before {
    content: '\e818'
}

.social li a.digg:before {
    content: '\e807'
}

.social li a.friendfeed:before {
    content: '\e867'
}

.social li a.github:before {
    content: '\e805'
}

.social li a.wordpress:before {
    content: '\e816'
}

.social li a.google-plus:before {
    content: '\e803'
}

.social li a.youtube:before {
    content: "\e813"
}

.social li a.pinterest:before {
    content: "\e804"
}

.social li a.instagram:before {
    content: "\e8c2"
}

.social li a.stack-overflow:before {
    content: "\e817"
}

.social li a.foursquare:before {
    content: "\e80e"
}

.social li a.xing:before {
    content: "\e809"
}

.social li a.weibo:before {
    content: "\e811"
}

.social li a.soundcloud:before {
    content: "\e814"
}

.social li a.fivehundredpx:before {
    content: "\e856"
}

.social li a.slideshare:before {
    content: "\e8db"
}

.social li a.deviantart:before {
    content: "\e8e6";
}

.social li a:hover {
    color: #fff !important;
    background-color: #333;
    border-color: transparent;
}

.social li a.facebook:hover {
    background-color: #3c5fac
}

.social li a.twitter:hover {
    background-color: #5ec3df
}

.social li a.flickr:hover {
    background-color: #FF0084
}

.social li a.rss:hover {
    background-color: #ff9900
}

.social li a.dribbble:hover {
    background-color: #EA4C89
}

.social li a.lastfm:hover {
    background-color: #D51007
}

.social li a.linkedin:hover {
    background-color: #2089b5
}

.social li a.vimeo:hover {
    background-color: #0dadd6
}

.social li a.google-plus:hover {
    background-color: #c63d2d
}

.social li a.forrst:hover {
    background-color: #5b9a68
}

.social li a.skype:hover {
    background-color: #00aff0
}

.social li a.picassa:hover {
    background-color: #ffd34e
}

.social li a.youtube:hover {
    background-color: #c8312b
}

.social li a.pinterest:hover {
    background-color: #cb2027
}

.social li a.tumblr:hover {
    background-color: #2C4762
}

.social li a.behance:hover {
    background-color: #3878F6
}

.social li a.blogger:hover {
    background-color: #fc9947
}

.social li a.delicious:hover {
    background-color: #3274d1
}

.social li a.digg:hover {
    background-color: #205891
}

.social li a.friendfeed:hover {
    background-color: #2f72c4
}

.social li a.github:hover {
    background-color: #222
}

.social li a.wordpress:hover {
    background-color: #0083b3
}

.social li a.instagram:hover {
    background-color: #3f729b
}

.social li a.stack-overflow:hover {
    background-color: #F90
}

.social li a.foursquare:hover {
    background-color: #009FE0
}

.social li a.xing:hover {
    background-color: #006567
}

.social li a.weibo:hover {
    background-color: #E64141
}

.social li a.soundcloud:hover {
    background-color: #FA3219
}

.social li a.fivehundredpx:hover {
    background-color: #222
}

.social li a.slideshare:hover {
    background-color: #ED9D2C
}

.social li a.deviantart:hover {
    background-color: #506256;
}

/* MAP */
.map {
    margin: 1.6em 0 3em 0;
    line-height: 0;
    padding: 8px;
    border: 1px solid #E9EEEE;
}

.map iframe {
    width: 100%;
    border-width: 0;
    outline: none;
    height: 350px;
    border-radius: 4px;
}

.map-canvas {
    height: 342px;
    margin: 0px;
    padding: 0px;
    line-height: 1.6;
}

.map-canvas img {
    max-width: none;
}

/* FILTERS */
.filters {
    list-style: none;
    padding: 0;
    margin: 2em 0;
    text-align: center;
}

.filters li {
    display: inline-block;
    margin: .6em .4em;
}

.filters li a {
    color: #b8c7ca;
    font-size: 11px;
    letter-spacing: .1em;
    padding: 7px 12px;
    border: 1px solid #DDE4E6;
    border-radius: 4px;
}

.filters li a:hover {
    color: #345;
    border-color: #345;
}

.filters .current a, .filters .current a:hover {
    color: #fff;
    background: #345;
    border-color: transparent;
}

/* MEDIA GRID */
.media-grid {
    min-height: 200px;
    width: 102.8%;
    margin-left: -1.4%;
}

.media-grid .media-cell {
    float: left;
    width: 25%;
    padding: 10px 20px;
    margin-bottom: 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.media-grid .media-cell.x2 {
    width: 50%
}

.media-grid .media-box {
    margin-bottom: 0;
}

/* MEDIA CELL DESC */
.media-cell-desc {
    padding: 28px 40px;
    border-style: solid;
    border-width: 1px;
    background: #fff;
    border-color: #EAEDEF;
    border-radius: 0 0 4px 4px;
}

.media-cell-desc h3 {
    text-transform: uppercase;
    padding: 0;
    margin: 0px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .03em;
}

.media-cell-desc h3 a {
    color: #444;
    border-bottom: 2px solid #FFF;
}

.media-cell-desc h3 a:hover {
    border-color: #ddd
}

.media-cell-desc h3 a:active {
    border-color: #555
}

.media-cell-desc p {
    font-size: 13px;
    letter-spacing: .04em;
    margin: 0;
    color: #a7b6b9;
}

.media-cell-desc .date {
    float: left;
    margin-right: 16px;
    padding: 6px 7px;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    border-radius: 2px;
    margin-top: -66px;
    position: relative;
    background: #FFF;
    margin-left: 0%;
    background: #5BCF80;;
}

.media-cell-desc .date .day {
    display: block;
    font-size: 26px;
    letter-spacing: -1px;
    font-weight: 800;
    color: #fff;
}

.portfolio-items .media-cell-desc {
    text-align: center;
}

/* MEDIA BOX */
.media-box {
    position: relative;
    margin-bottom: 30px;
    background-color: #fff;
}

.media-box a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
}

.media-box img {
    display: block;
    width: 100%;
}

.media-box:hover img {
    -webkit-filter: saturate(20%);
    filter: saturate(20%);
}

.media-box .mask {
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    overflow: hidden;
    background: #33475D;
    background: rgba(51, 71, 93, 0.6);
}

.media-box:hover .mask {
    opacity: 1;
    filter: alpha(opacity=100);
}

.media-box .mask:before {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -38px 0 0 -38px;
    width: 76px;
    line-height: 76px;
    font-size: 18px;
    text-align: center;
    content: "\f0ca";
    color: #fff;
    background: #096;
    border-radius: 50%;
}

.hentry.video .mask:before {
    content: "\f03d"
}

.hentry.audio .mask:before {
    content: "\e888";
    font-family: Fontello;
}

.hentry.image .mask:before {
    content: "\f03e"
}

.hentry.url .mask:before {
    content: "\e86c";
    font-family: Fontello;
}

.latest-posts .mask:before {
    content: "\f040"
}

/* LATEST POSTS */
.latest-posts {
    margin-top: 2em;
}

/* MEDIA WRAP */
.media-wrap iframe {
    width: 100%;
}

/* HTTP ALERT */
.http-alert {
    text-align: center
}

.http-alert h1 {
    margin: 0 0 .1em 0;
    font-size: 9em;
    letter-spacing: .03em;
    line-height: 1;
    color: #eee;
    text-shadow: 11px 12px 12px rgba(0, 0, 0, 0.2), -1px -1px 1px #345, 1px 1px 0 #345, 3px 3px 0 #345, 4px 4px 0 #345, 5px 5px 0 #345, 6px 6px 0 #345, 7px 7px 0 #345, 8px 8px 0 #345, 9px 9px 0 #345, 10px 10px 0 #345, 11px 11px 0 #345;
}

.http-alert p {
    font-style: italic
}

/* TAGLINE */
.tagline {
    margin: 2em 0;
    padding: 1em 2em;
}

.tagline *:first-child {
    margin-top: 0
}

.tagline * {
    padding-bottom: 0;
    margin-bottom: 0;
}

.tagline h3 {
    font-size: 2em;
    padding: 0;
    line-height: 1.4;
    font-weight: 300;
    color: #6A7686;
}

/* DROP CAP */
.drop-cap:first-letter {
    font-size: 50px;
    font-weight: 800;
    line-height: .8;
    float: left;
    padding: 4px 16px 0px 0;
}

/* ICON LIST */
.icon-list {
    list-style: none;
    padding-left: 12px;
}

.icon-list i {
    padding-right: 0;
    color: #B7C6C9;
    font-size: 14px;
    line-height: 23px;
    width: 27px;
    text-align: center;
    display: inline-block;
    margin-right: 12px;
}

/* BUTTONS */
input[type=submit], input[type=button], button, a.button {
    display: inline-block;
    position: relative;
    padding: 1.3em 2.6em;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
    border: 0;
    outline: 0;
    background: #fff;
    border: 2px solid #6A7686;
    color: #6A7686;
    text-shadow: none;
    border-radius: 4px;
}

input[type=submit]:hover, input[type=button]:hover, button:hover, a.button:hover, input[type=submit].colored, input[type=button], button.colored, a.button.colored {
    color: #fff;
    background-color: #096;
    border-color: transparent;
}

input[type=submit].colored:hover, input[type=button]:hover, button.colored:hover, a.button.colored:hover {
    background: #085;
}

input[type=submit].colored:active, input[type=button]:active, button.colored:active, a.button.colored:active {
    background: #074;
}

input[type=submit]:active, input[type=button]:active, button:active, a.button:active {
    color: #eee;
}

/* Large Buttons */
input[type=submit].big, input[type=button].big, button.big, a.button.big {
    padding: 1.8em 3.6em;
}

/* Small Buttons */
input[type=submit].small, input[type=button].small, button.small, a.button.small {
    font-size: 10px;
    padding: .8em 1.6em;
}

/* blue buttons  */
input[type=submit].blue:hover, input[type=button].blue:hover, button.blue:hover, a.button.blue:hover, input[type=submit].blue.colored, input[type=button].blue.colored, button.blue.colored, a.button.blue.colored {
    background: #7DB7CE
}

input[type=submit].blue.colored:hover, input[type=button].blue.colored:hover, button.blue.colored:hover, a.button.blue.colored:hover {
    background: #70ADC5
}

input[type=submit].blue:active, input[type=button].blue:active, button.blue:active, a.button.blue:active, input[type=submit].blue.colored:active, input[type=button].blue.colored:active, button.blue.colored:active, a.button.blue.colored:active {
    background: #5E9BB3
}

/* red buttons  */
input[type=submit].red:hover, input[type=button].red:hover, button.red:hover, a.button.red:hover, input[type=submit].red.colored, input[type=button].red.colored, button.red.colored, a.button.red.colored {
    background: #BE3C3A
}

input[type=submit].red.colored:hover, input[type=button].red.colored:hover, button.red.colored:hover, a.button.red.colored:hover {
    background: #AD2B29
}

input[type=submit].red:active, input[type=button].red:active, button.red:active, a.button.red:active, input[type=submit].red.colored:active, input[type=button].red.colored:active, button.red.colored:active, a.button.red.colored:active {
    background: #9B2A28
}

/* green buttons  */
input[type=submit].green:hover, input[type=button].green:hover, button.green:hover, a.button.green:hover, input[type=submit].green.colored, input[type=button].green.colored, button.green.colored, a.button.green.colored {
    background: #63C76F
}

input[type=submit].green.colored:hover, input[type=button].green.colored:hover, button.green.colored:hover, a.button.green.colored:hover {
    background: #4FAA5A
}

input[type=submit].green:active, input[type=button].green:active, button.green:active, a.button.green:active, input[type=submit].green.colored:active, input[type=button].green.colored:active, button.green.colored:active, a.button.green.colored:active {
    background: #3F964A
}

/* yellow buttons  */
input[type=submit].yellow:hover, input[type=button].yellow:hover, button.yellow:hover, a.button.yellow:hover, input[type=submit].yellow.colored, input[type=button].yellow.colored, button.yellow.colored, a.button.yellow.colored {
    background: #F5CA2B
}

input[type=submit].yellow.colored:hover, input[type=button].yellow.colored:hover, button.yellow.colored:hover, a.button.yellow.colored:hover {
    background: #EBC22B
}

input[type=submit].yellow:active, input[type=button].yellow:active, button.yellow:active, a.button.yellow:active, input[type=submit].yellow.colored:active, input[type=button].yellow.colored:active, button.yellow.colored:active, a.button.yellow.colored:active {
    background: #DFBB38
}

/* Buttons with icons */
input[type=submit].button-icon, input[type=button].button-icon, button.button-icon, a.button.button-icon {
    padding-left: 2.8em
}

input[type=submit].button-icon.big, input[type=button].button-icon.big, button.button-icon.big, a.button.button-icon.big {
    padding-left: 5em
}

input[type=submit] i, input[type=button] i, button i, a.button i {
    position: absolute;
    top: .45em;
    left: 1.2em;
    line-height: 1;
    font-size: 1.4em;
    margin-right: .4em;
    margin-left: -0.35em;
    margin-bottom: -1em;
    color: #B7C6C9;
}

input[type=submit].big i, input[type=button].big i, button.big i, a.button.big i {
    top: .7em;
    left: 1.1em;
    font-size: 23px;
}

input[type=submit]:hover i, input[type=button]:hover i, button:hover i, a.button:hover i, input[type=submit].colored i, input[type=button].colored i, button.colored i, a.colored i {
    color: #fff;
    color: rgba(255, 255, 255, 0.9);
}

/* Colored Buttons */
input[type=submit].colored, input[type=button].colored, button.colored, a.button.colored {
    color: #fff;
    border-color: transparent;
}

/* TABS */
.tabs {
    font-size: 1em;
    margin-bottom: 2em;
}

.tabs .tab-titles {
    padding: 0;
    margin: 0 0 -2px 0;
}

.tabs .tab-titles li {
    display: inline-block
}

.tabs .tab-titles li a {
    display: inline-block;
    padding: 1em 2em;
    font-size: 12px;
    letter-spacing: .06em;
    font-weight: 400;
    border: 0;
    cursor: pointer;
}

.tabs .tab-titles li a.active {
    font-weight: 700;
    background-color: #fff;
    border-bottom-color: #fff;
    border: 2px solid #EAEEEF;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}

.tabs .tab-content {
    margin-top: -1px;
    border: 2px solid #EAEEEF;
    border-radius: 0 6px 6px 6px;
}

.tabs .tab-content > div {
    padding: 2em;
    font-size: 15px;
    display: none;
}

/* TOGGLES */
.toggle-group {
    margin-bottom: 2em;
}

.toggle {
    font-size: 1em;
}

.toggle h4 {
    position: relative;
    font-size: 1em;
    font-weight: 300;
    border-left: 0;
    padding: .8em 1em .8em 1.8em;
    margin: 0;
    cursor: pointer;
    border-bottom: 1px solid #EAEEEF;
}

.toggle h4.active {
    border-bottom: 0;
    font-weight: 600;
}

.toggle h4:before {
    content: "\f067";
    color: #B7C6C9;
    position: absolute;
    top: 1.7em;
    left: 0.4em;
    font-size: 12px;
    line-height: 1;
}

.toggle h4.active:before {
    content: "\f068";
}

.toggle .toggle-content {
    display: none;
    padding: .2em 0 1em 1.8em;
    border-bottom: 1px solid #eee;
}

/* ALERTS */
.alert {
    position: relative;
    padding: 1.2em 1em 1em 4.4em;
    margin-bottom: 2em;
    font-size: 15px;
    border-radius: 6px;
    border: 3px solid #EAEEEF;
}

.alert:before {
    content: "\f0c6";
    color: #B7C6C9;
    position: absolute;
    top: 0.6em;
    left: .9em;
    font-size: 27px;
    line-height: 1;
}

.alert.success {
    border-color: #AEE2A3
}

.alert.success:before {
    content: "\f087"
}

.alert.info {
    border-color: #E4E6C4
}

.alert.info:before {
    content: "\f05a"
}

.alert.error {
    border-color: #EE8F8F
}

.alert.error:before {
    content: "\f06a"
}

.alert strong {
    font-weight: 800
}

/* CTA */
.cta, .project-action {
    margin: 2em 0;
    padding: 2em 0;
    border-style: solid;
    border-width: 5px 0;
    border-color: #EAEEEF;
}

.cta h3, .cta p {
    margin: 0
}

.cta .cta-button {
    text-align: right
}

.cta p {
    font-size: .9em
}

/* PROJECT ACTION */
.project-action {
    padding: 2em 0 0 0;
    text-align: center;
}

.project-action .button {
    margin-right: 1em;
    margin-bottom: 3.2em
}

.project-action .button:last-child {
    margin-right: 0
}

/* LAUNCH */
.launch {
    text-align: center;
    padding: 2.6em 0;
}

.launch .button {
    padding: 1.8em 3.6em;
    line-height: 1;
}

/* SITE ALERT */
.site-alert {
    display: none;
    position: fixed;
    z-index: 9900;
    top: 50%;
    left: 50%;
    margin: -80px 0 0 -80px;
    font-size: 6em;
    line-height: 1;
    padding: .4em .5em;
    color: #fff;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
    background: #264150;
    background: rgba(38, 65, 80, 0.4);
    border-radius: 20px;
}

.site-alert:before {
    content: "\f14a"
}

.site-alert.error {
    background: #F30;
    background: rgba(206, 78, 62, 0.6);
}

.site-alert.error:before {
    content: "\f00d"
}

/* CONTACT FORM */
.contact-form {
    margin: 1.6em 0 3em 0;
    overflow: auto;
}

.contact-form p {
    margin: 0 0 1.8em 0;
    width: 50%;
    float: left;
}

.contact-form p:nth-of-type(1) {
    padding-right: 32px;
}

.contact-form p:nth-of-type(3), .contact-form p:nth-of-type(4) {
    width: 100%
}

.contact-form input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]), .contact-form textarea {
    width: 100%;
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.contact-form textarea {
    height: 100px
}

/* ISOTOPE FILTERING */
.isotope-item {
    z-index: 2
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope, .isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
}

.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

/* GRID PAGE */
.show-grid div {
    font-size: .8em;
    padding-top: .9em;
    padding-bottom: .9em;
    text-align: center;
    margin-bottom: 1.4em;
    border: 1px solid #EAEEEF;
    border-radius: 4px;
}

/* SHORTCODES PAGE */
.show-buttons .button {
    margin: 0 1em 1em 0
}

/* FANCYBOX STYLES */
#fancybox-tmp, #fancybox-loading, #fancybox-overlay, #fancybox-wrap {
    z-index: 5000;
}

.lightbox-active .container {
    -webkit-filter: saturate(10%);
    filter: saturate(10%);
}

.lightbox.hidden {
    display: none
}

#fancybox-loading {
    display: none !important
}

.fancy-ico {
    padding: 16px 16px 13px 16px;
    line-height: 100%;
    font-size: 8px;
    color: #333;
    background: #fff;
    border-radius: 4px;
}

#fancybox-left:hover .fancy-ico, #fancybox-right:hover .fancy-ico {
    color: #fff;
    background: #333;
}

#fancybox-close:before, .fancy-ico:before {
    display: inline
}

#fancybox-close:before {
    content: "\f00d";
    font-size: 1em;
}

.fancy-ico:before {
    font-size: 3em
}

#fancybox-right-ico:before {
    content: "\f105"
}

#fancybox-left-ico:before {
    content: "\f104"
}

.fancy-ico, #fancybox-close {
    display: inline-block;
    cursor: pointer;
}

.fancy-ico:hover, #fancybox-close:hover {
    opacity: 1
}

#fancybox-close {
    padding: 26px;
    line-height: 80%;
    font-size: 16px;
    opacity: 1;
    color: #fff;
    background: #5BCF80;
    border-radius: 50%;
}

#fancybox-close:hover {
    background: #D4643E
}

/* PORTFOLIO DETAILS */
.p-overlay-on #container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    -webkit-filter: saturate(10%);
    filter: saturate(10%);
}

.p-overlay {
    display: none;
    position: absolute;
    z-index: 3000;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    min-height: 100vh;
    overflow: auto;
    background: #fff;
}

.portfolio-single {
    margin: 0 auto;
    width: 90%;
    max-width: 1440px;
}

.single-page-layout .portfolio-single {
    padding-top: 2em
}

.one-page-layout .portfolio-single {
    padding-top: 3em
}

.portfolio-field {
    padding-bottom: 2em
}

.portfolio-field p {
    margin-top: 0
}

.portfolio-field img, .portfolio-field .fluid-width-video-wrapper, .portfolio-field .media-wrap {
    margin-bottom: 50px
}

.portfolio-field .flexslider .slides img {
    margin-bottom: 0;
}

.portfolio-title h2 {
    margin: 0;
    font-size: 2em;
}

.portfolio-field h3 {
    margin: 2em 0 .6em 0;
    font-size: 13px;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 800;
    color: #c8d3d6;
}

.portfolio-field h3:first-child {
    margin-top: 0
}

.portfolio-field .btn {
    margin: 2em auto 2em
}

.portfolio-field .launch {
    text-align: left;
}

/* TAGS  */
.tags {
    margin: 0 0 1em 0;
    padding: 5px;
    list-style: none;
}

.tags li {
    display: inline-block
}

.tags a {
    display: inline-block;
    line-height: 30px;
    font-size: 12px;
    position: relative;
    margin: 0 14px 8px 6px;
    padding: 0 10px 0 12px;
    background: #EAEEEF;
    text-transform: uppercase;
    color: #6A7686;
    border-radius: 0 2px 2px 0;
}

.tags a, .tags a:hover {
    color: #345;
}

.tags a:before {
    content: "";
    float: left;
    position: absolute;
    top: 0px;
    left: -11px;
    width: 0;
    height: 0;
    border-color: transparent;
    border-right-color: #EAEEEF;
    border-style: solid;
    border-width: 15px 11px 15px 0;
}

.tags a:after {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    float: left;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

/* portfolio details nav  */
.portfolio-nav {
    text-align: right
}

.portfolio-nav.bottom {
    margin-bottom: 40px
}

.portfolio-nav .button {
    display: inline-block;
    text-align: center;
    padding: 0;
    line-height: 33px;
    width: 40px;
    font-size: 18px;
    color: #B7C6C9;
    border: 3px solid #DDE4E6;
    cursor: pointer;
    border-radius: 50%;
}

.portfolio-nav a.button:hover {
    color: #096;
    border-color: #096;
    background: none;
}

.icon.prev:before {
    content: "\f104"
}

.icon.next:before {
    content: "\f105"
}

.portfolio-nav a.button.back {
    display: none;
    margin-left: 34px;
    border-width: 0;
    line-height: 70px;
    width: 70px;
    font-size: 16px;
    color: #fff;
    background: #5BCF80;
    border-radius: 50%;
}

.portfolio-nav a.button.back:before {
    display: inline;
    content: "\f00d";
    font-size: 1em;
}

.portfolio-nav a.button.back:hover {
    color: #fff;
    background: #D4643E
}

.one-page-layout .portfolio-nav a.button.back {
    display: inline-block
}

/* BLOG */
.blog-posts .entry-title {
    margin: 6px 0 0 0;
    font-size: 1.8em;
    text-align: left;
}

.entry-title a {
    color: #345
}

.entry-title a:hover {
    color: #096
}

/* entry-meta */
.blog-posts .entry-meta {
    float: left;
    width: 66px;
    font-weight: 400;
    font-size: 0.750em;
}

.blog-posts .entry-meta > span {
    display: block;
    margin: 0 auto 14px auto;
    max-width: 55px;
    min-height: 20px;
    text-align: center;
}

.entry-meta .post-format {
    display: inline-block;
    font-size: 17px;
    width: 53px;
    line-height: 46px;
    padding: 0;
    background: #fff;
    color: #6A7686;
    border: 3px solid #DDE4E6;
    border-radius: 50%;
}

.hentry .entry-date .day, .hentry .entry-comment .count {
    display: block;
    margin: 0;
    line-height: 1;
    font-size: 32px;
    font-weight: 800;
}

.entry-meta {
    color: #BFC5CD;
    font-weight: 400;
    font-size: 0.750em;
}

.entry-meta span {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 12px;
}

.entry-meta a, .post-pagination li a {
    padding: 4px 10px;
    margin: 0 2px;
    border: 1px solid #DDE4E6;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .03em;
    font-weight: 800;
}

.entry-meta a, .nav-single a, .comment-meta a, .comment-reply-link, .navigation a, .post-pagination a, .related-posts a, .archives a, .tabs .tab-titles li a {
    color: #6A7686
}

.entry-meta a:hover, .nav-single a:hover, .navigation a:hover, .post-pagination a:hover, .archives a:hover, .entry-content a.more-link:hover, .archives-tag.post-list a:hover, .tagcloud a:hover {
    color: #fff;
    border-color: transparent;
}

.entry-meta a:active, .nav-single a:active, .comment-meta a:active, .comment-reply-link:active, .navigation a:active, .post-pagination a:active, .related-posts a:active, .archives a:active, .entry-content a.more-link:active {
    color: #eee
}

.entry-meta .edit-link {
    float: right
}

.entry-content .media-wrap, .entry-content .flexslider {
    margin-top: 22px;
}

/* more link */
a.more-link {
    display: block;
    max-width: 17em;
    text-align: center;
    margin: 2em 0 0 0;
    padding: 1.4em 0;
    color: #6A7686;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .03em;
    background: none;
    border: 2px solid #DDE4E6;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 800;
}

a.more-link:hover {
    background: #096
}

/* featured image */
.featured-image {
    margin-top: 26px
}

.featured-image img {
    display: block;
    margin: 0 auto;
}

.featured-image .media-wrap {
    margin-bottom: 1.4em;
}

.blog-posts .featured-image, .blog-posts .entry-header, .blog-posts .entry-content {
    margin-left: 90px
}

/* POST FORMATS */
.format-status .post-format:before, .format-aside .post-format:before, .format-link .post-format:before, .format-chat .post-format:before, .format-audio .entry-meta .post-format:before, .format-image .entry-meta .post-format:before, .format-gallery .entry-meta .post-format:before {
    font-family: Fontello
}

/* standart  */
.hentry .post-format:before {
    content: "\f040"
}

/* sticky  */
.hentry.sticky .post-format:before {
    content: "\f08d"
}

/* quote  */
.format-quote .post-format:before {
    content: "\f10d"
}

.format-quote blockquote {
    font-size: 2em;
    margin: 0;
    font-weight: 300;
    padding: 0 0 2em 0;
    line-height: 1.5;
    margin-top: -8px;
}

.format-quote blockquote:before {
    content: ""
}

/* link  */
.format-link .post-format:before {
    content: "\e86c"
}

.format-link .link-content > a:first-child {
    font-size: 1.5em;
    font-weight: 300;
    word-break: break-all;
    text-transform: uppercase;
    padding: .4em 1.2em;
    margin-top: 1em;
    border-radius: 8px;
    color: #456;
    display: inline-block;
    border: 2px dashed #DDE4E6;
}

.format-link .link-content > a:first-child:hover {
    border-color: #096
}

.format-link header {
    text-align: center
}

/* status  */
.format-status .post-format:before {
    content: "\e87d"
}

.format-status .entry-content > p:first-child {
    padding: .5em 1em;
    border: 1px solid #DDE4E6;
    border-radius: 4px;
    font-size: 1.6em;
    line-height: 1.5;
    font-weight: 300;
}

/* chat  */
.format-chat .post-format:before {
    content: "\e87b"
}

.chat-transcript {
    margin-top: 1.2em;
}

.chat-row:after {
    display: table;
    content: "";
    line-height: 0;
}

.chat-author {
    float: left;
    width: 88px;
    text-transform: uppercase;
}

.chat-text {
    padding-left: 100px
}

.chat-text p {
    margin-top: 0
}

.chat-author cite {
    display: inline-block;
    min-width: 80%;
    margin-right: .1em;
    font-size: 0.9em;
    font-weight: 800;
}

/* video  */
.format-video .entry-meta .post-format:before {
    content: "\f008"
}

/* audio  */
.format-audio .entry-meta .post-format:before {
    content: "\e888"
}

.mejs-audio {
    margin: 0 0 2em 0;
}

/* image  */
.format-image .entry-meta .post-format:before {
    content: "\e8c4"
}

.format-image .entry-content {
    margin-bottom: 1em
}

/* gallery  */
.format-gallery .entry-meta .post-format:before {
    content: "\e8c4"
}

.format-gallery .flexslider {
    margin-bottom: 50px
}

.flex-direction-nav a {
    text-align: center;
    color: #fff;
}

.flex-direction-nav a:hover {
    color: #fff
}

.flex-direction-nav a:before {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 20px;
    line-height: 37px;
}

.flex-direction-nav .flex-next:before {
    content: "\f105"
}

.flex-direction-nav .flex-prev:before {
    content: "\f104"
}

.flex-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin: 0;
    padding: .5em 1em;
    font-size: 14px;
    color: #333;
    background: #fff;
    background: rgba(255, 255, 255, 0.95);
}

.flex-control-nav {
    bottom: -46px
}

.flex-control-paging li a {
    width: 12px;
    height: 12px;
    border: 2px solid #DDE4E6;
    background: none;
}

.flex-control-paging li a:hover {
    border-color: #096;
    background: none;
}

.flex-control-paging li a.flex-active {
    border-color: transparent;
    background: #096;
}

/* aside  */
.format-aside .post-format:before {
    content: "\e86d"
}

.format-aside .entry-content .aside-content {
    position: relative;
    padding: .2em 2em .2em 3.7em;
    margin: 0 0 2em 0;
    border-radius: 4px;
    line-height: 1.9;
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #5a4f43;
    text-shadow: 0 1px 0 white;
    background: #FFFFF4;
    border: 1px solid #E0DACE;
}

.format-aside .entry-content .aside-content:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2em;
    width: 4px;
    border: solid #efcfad;
    border-color: rgba(239, 207, 173, 0.9);
    border-width: 0 1px;
}

/* PAGINATION */
.navigation, .post-pagination {
    padding: 3em 0
}

.navigation > div {
    width: 50%;
    float: left;
}

.navigation a {
    display: inline-block;
    padding: 1.6em 2.2em;
    border: 2px solid #DDE4E6;
    border-radius: 4px;
    font-size: 11px;
    letter-spacing: .06em;
    font-weight: 800;
    text-transform: uppercase;
}

.navigation .nav-next {
    text-align: right
}

.navigation .meta-nav {
    margin-right: .5em
}

.navigation .nav-next .meta-nav {
    margin-left: .5em;
    margin-right: 0;
}

/* NUMBERED PAGINATION */
.post-pagination ul {
    list-style: none;
    text-align: center;
    padding: 0;
}

.post-pagination li {
    display: inline-block;
    font-size: .9em;
    margin: .3em .1em;
}

.post-pagination li a {
    display: inline-block;
    padding: .5em 1.2em;
    margin: 0 4px;
    font-weight: 400;
    border-width: 2px;
}

.post-pagination li.current a, .post-pagination li.current a:hover {
    border-color: #6A7686;
    font-weight: 800;
    background: #fff;
    color: #6A7686;
    cursor: default;
}

.related-posts li a:hover, .nav-single a:hover {
    text-decoration: underline
}

/* MEDIA ELEMENT PLAYER STYLES */
.mejs-container {
    background: none
}

.mejs-container .mejs-controls, .mejs-controls .mejs-volume-button .mejs-volume-slider {
    background: #25313C
}

.mejs-container.mejs-audio .mejs-controls {
    border-radius: 4px
}

.mejs-controls .mejs-button button:focus {
    outline: none
}

.mejs-container .mejs-controls {
    height: 50px
}

.mejs-container .mejs-controls div {
    width: 50px;
    height: 50px;
}

.mejs-controls .mejs-button button {
    margin: 17px 17px
}

.mejs-controls .mejs-time-rail .mejs-time-total {
    margin: 15px 5px
}

.mejs-container .mejs-controls .mejs-time {
    height: 41px
}

.mejs-container .mejs-controls .mejs-time span {
    margin-top: 11px
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    top: 21px
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    width: 62px
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .mejs-controls .mejs-time-rail .mejs-time-total, .mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: #565C61
}

.mejs-controls div.mejs-horizontal-volume-slider {
    height: 50px;
    width: 80px;
}

.mejs-container .mejs-controls .mejs-time {
    padding-left: 8px
}

.mejs-controls .mejs-volume-button .mejs-volume-slider {
    left: 10px;
    border-radius: 4px 4px 0 0;
}

.mejs-controls .mejs-time-rail .mejs-time-current, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: #096
}

.mejs-overlay-loading {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
}

/* BLOG SINGLE */
.blog-single .entry-content p {
    font-size: 18px;
    line-height: 29px;
}

.blog-single .entry-meta {
    line-height: 1.9;
    text-align: center;
    padding-bottom: 20px;
}

.nav-single, .navigation {
    font-size: .8em;
    overflow: auto;
}

.nav-single {
    padding: 3em 0;
}

.nav-single a {
    font-size: 1.4em;
    text-transform: uppercase;
    font-weight: 300;
    line-height: 1.4;
}

.nav-single .meta-nav {
    margin-right: .6em
}

.nav-single .nav-next .meta-nav {
    margin-left: .6em;
    margin-right: 0;
}

.nav-single .nav-next {
    text-align: right
}

.nav-single h4, .related-posts h3, .about-author > h3, .entry-meta h3 {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .15em;
    color: #DDE4E6;
}

/* COMMENTS */
.comments-title, #reply-title {
    font-size: 18px;
    font-weight: 400;
}

.comments-area {
    padding: 2em 0
}

.commentlist {
    padding: .5em 0 1.5em 0
}

.comments-area ol {
    list-style: none;
    padding-left: 0;
}

.comments-area ol li {
    padding-top: 1em
}

.comments-area ol ol {
    margin-left: 13%
}

.comments-area ol ol li {
    padding-top: 0
}

.comments-area ol ol ol {
    margin-left: 15%
}

.comments-area article {
    position: relative;
    margin-left: 105px;
    margin-bottom: 2em;
    padding: 1em 1.6em;
    border: 2px solid #EAEEEF;
    border-radius: 8px;
}

.comments-area article:after, .comments-area article:before {
    top: 37px;
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.comments-area article:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #ffffff;
    border-width: 10px;
    margin-top: -10px;
}

.comments-area article:before {
    border-color: transparent;
    border-right-color: #EAEEEF;
    border-width: 13px;
    margin-top: -13px;
}

.comment-meta img {
    position: absolute;
    top: 0;
    left: -105px;
    border-radius: 50%;
}

.comments-area ol ol .comment-meta img {
    width: 65px;
    left: -95px;
}

.comments-area ol ol article {
    position: relative;
    margin-left: 95px;
}

.comment-meta .fn, .comment-reply-link {
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.comment-meta .fn + a {
    float: right;
    font-size: .8em;
    color: #D1DCDE;
    border-bottom: 0;
}

.comment-content {
    font-size: .9em;
}

.comment-content p {
    margin: .8em 0 .2em 0
}

.comment .reply {
    text-align: right
}

.comment-reply-link {
    font-weight: normal;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 800;
}

.comment-meta a:hover, .comment-meta .fn + a:hover, .comment-reply-link:hover {
    color: #096
}

/* comment by post author  */
.bypostauthor > article {
    border-color: #096
}

.bypostauthor > article:before {
    border-right-color: #096
}

/* COMMENT FORM */
#respond {
    padding: 0 0 1em 0
}

#respond h3 {
    font-size: 1.6em;
    font-weight: 900;
}

#reply-title {
    margin-bottom: 1.5em;
}

#reply-title small {
    padding-left: 14px;
    text-transform: uppercase;
    font-size: 16px;
}

.form-allowed-tags, .comment-notes {
    display: none;
    font-size: .9em;
}

.form-allowed-tags code {
    margin-top: 1em
}

.form-submit {
    margin-top: 2em
}

/* ABOUT THE AUTHOR */
.about-author {
    padding: 1em 0
}

.author-bio {
    padding: 1.4em 0;
    border: 1px solid #EAEEEF;
    border-right: 0;
    border-left: 0;
    overflow: hidden;
}

.author-img {
    width: 126px;
    float: left;
}

.author-img img {
    display: block;
    margin-top: 6px;
    max-width: 96px;
    border-radius: 50%;
}

.author-info .author-name {
    text-transform: uppercase;
    font-weight: 800;
}

.author-info p {
    font-size: .9em;
    margin: .4em 0;
}

.author-info *:first-child {
    margin-top: 0
}

/* RELATED POSTS */
.related-posts {
    padding: 2em 0 0;
    text-align: center;
}

.related-posts ol {
    list-style: none;
    padding-left: 0;
}

.related-posts ol li a {
    display: inline-block;
    margin-bottom: .4em;
    line-height: 1.2;
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: 300;
}

/* TAGS  */
.blog-single footer.entry-meta {
    position: relative;
    padding-bottom: 1em;
}

/*  --------------------------------------------	7. MEDIA QUERIES - responsive layouts    -------------------------------------------- *//* DESKTOPS MEDIUM */
@media screen and (min-width: 1200px) {
    /* increase column gutter on large screens */
    .row {
        margin-left: -20px;
        margin-right: -20px;
    }

    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .vs-triplelayout .wrapper > section {
        width: 90%;
        left: 5%;
    }

    .vs-triplelayout .wrapper .vs-left {
        left: -85%; /* 90 - 5 */
    }

    .vs-triplelayout .wrapper .vs-left-outer {
        left: -175%; /* - 85 - 90 */
    }

    .vs-triplelayout .wrapper .vs-current {
        position: relative;
        z-index: 100;
    }

    .vs-triplelayout .wrapper .vs-right {
        left: 95%; /* 90 + 5 */
    }

    .vs-triplelayout .wrapper .vs-right-outer {
        left: 185%; /* 95 + 90 */
    }

    .vs-sidenav {
        display: block;
    }

    /* CLASIC LAYOUT */
    .classic-layout .wrapper > section {
        width: 100%;
    }
}

/* DESKTOPS LARGE */
@media screen and (min-width: 1400px) {
    .content {
        padding: 1em 3em;
    }

    .vs-triplelayout .wrapper > section {
        width: 80%;
        left: 10%;
    }

    .vs-triplelayout .wrapper .vs-left {
        left: -70%; /* 80 - 10 */
    }

    .vs-triplelayout .wrapper .vs-left-outer {
        left: -150%; /* - 70 - 80 */
    }

    .vs-triplelayout .wrapper .vs-right {
        left: 90%; /* 80 + 10 */
    }

    .vs-triplelayout .wrapper .vs-right-outer {
        left: 170%; /* 90 + 80 */
    }
}

/* DESKTOPS XLARGE */
@media screen and (min-width: 1600px) {
    /* increase column gutter on large screens */
    .row {
        margin-left: -40px;
        margin-right: -40px;
    }

    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        padding-left: 40px;
        padding-right: 40px;
    }

    .content {
        padding: 1em 4em;
    }
}

/* TABLETS */
@media screen and (max-width: 991px) {
    /* LAYOUT */
    .header {
        width: 100%;
    }

    .vs-nav li a {
        font-size: 2.4em
    }

    .content {
        padding: 1em 3em;
    }

    /* PORTFOLIO SINGLE */
    .portfolio-single {
        width: 80%;
    }

    .portfolio-field {
        padding: 0 0 1em 0;
    }

    .portfolio-field img, .portfolio-field .fluid-width-video-wrapper, .portfolio-field .media-wrap {
        margin-bottom: 1.8em
    }

    .portfolio-nav, .portfolio-title {
        text-align: center
    }

    .portfolio-nav {
        padding-bottom: 1.5em
    }

    .portfolio-title h2 {
        font-size: 1.5em;
        padding-left: 0;
    }

    .portfolio-field h3 {
        margin-top: 1em
    }

    .portfolio-field .launch {
        text-align: center;
    }

    /* PROCESS */
    .row [class^="col-"]:nth-child(3n) .process:before {
        display: none;
    }
}

/* SMARTPHONES */
@media screen and (max-width: 767px) {
    /* MOBILE LAYOUT : more space for content */
    .content {
        padding: 1em;
    }

    .header {
        width: 100%;
        padding: 1.4em 1em .2em 1em;
    }

    .header img {
        max-height: 270px;
    }

    .single-page-layout .vs-nav {
        margin-top: 0;
    }

    .vs-triplelayout .vs-nav {
        height: 40px;
    }

    .vs-triplelayout .vs-nav li a {
        width: auto;
        font-size: 130%;
        letter-spacing: -1px;
    }

    .classic-layout .vs-nav {
        margin-top: 1em;
    }

    /* page title */
    .entry-title {
        font-size: 1.6em;
        margin-top: .6em;
    }

    .entry-content {
        padding-top: 0;
    }

    /* intro text */
    .intro h2 {
        font-size: 1.6em;
    }

    .rotate-words {
        min-height: 28px;
        min-width: 166px;
    }

    /* timeline */
    .timeline {
        padding-left: 0;
    }

    .timeline h2 [class^="icon-"], .timeline h2 [class*=" icon-"], .timeline h2 .fa {
        position: relative;
        top: auto;
        left: auto;
        margin: -12px auto 6px auto;
        border: 0;
        line-height: 1;
    }

    .event {
        padding: 16px;
        margin-top: 104px;
    }

    .event:first-of-type {
        margin-top: 116px;
    }

    .event:first-of-type .date {
        top: -74px;
    }

    .event:before, .event:after {
        display: none;
    }

    .event .date {
        top: -64px;
        left: 50%;
        margin-left: -32px;
    }

    .timeline h2, .event h4, .event h5 {
        text-align: center;
    }

    .event p:before {
        left: 50%;
        z-index: -1;
    }

    .timeline .event:last-child p:before {
        height: 100%;
    }

    /* PROCESS */
    .row [class^="col-"]:nth-child(3n) .process:before {
        display: inline-block;
    }

    .row [class^="col-"]:nth-child(2n) .process:before {
        display: none;
    }

    /* testomonial */
    .testo {
        padding: 1.0em 1.4em;
        margin: 50px 0 90px 0;
    }

    .testo:last-of-type {
        margin-bottom: 20px;
    }

    .testo img {
        float: none;
        margin: -80px auto 10px auto;
        max-width: 88px;
        border-width: 0px;
    }

    .testo h4 {
        text-align: center;
    }

    .testo h4 span {
        display: block;
        margin-left: 0;
    }

    /* skills */
    .skill-unit h4 {
        font-size: 14px;
        margin: 1em 0 0 0;
        color: #345;
        padding: 0;
        font-weight: 400;
    }

    .skill-unit .bar {
        height: 6px;
    }

    /* download button */
    .download-button {
        text-align: center;
    }

    /* tagline */
    .tagline {
        padding: .2em 1em;
    }

    .tagline h3 {
        font-size: 1.4em;
    }

    /* blockquotes */
    blockquote {
        padding-left: 1em;
        padding-right: 1em;
        font-size: 1.3em;
    }

    blockquote:before {
        top: -0.6em;
        font-size: 1em;
    }

    /* tabs */
    .tabs .tab-content > div {
        padding: .8em 1.2em;
    }

    .tabs .tab-titles li a {
        padding: .7em 0.8em;
    }

    /* cta */
    .cta, .cta .cta-button {
        text-align: center
    }

    .cta .cta-button {
        margin-top: 1em
    }

    /* project-action */
    .project-action {
        padding-top: 1.2em
    }

    .project-action .button {
        margin-bottom: 1.2em
    }

    /* letter */
    .letter-title {
        text-align: center;
        font-size: 2.2em;
    }

    .stamp {
        float: none;
        margin: 0 auto 16px auto;
    }

    .letter-info {
        margin-left: 0;
    }

    /* contact form */
    .contact-form p {
        width: 100%;
        padding-right: 0 !important;
    }

    /* BLOG INDEX */
    .blog-posts .entry-meta {
        float: none;
        width: 100%;
        margin-bottom: 14px;
    }

    .blog-posts .entry-meta .entry-date {
        display: none
    }

    .blog-posts .featured-image, .blog-posts .entry-header, .blog-posts .entry-content {
        margin-left: 0
    }

    .blog-posts .entry-title {
        font-size: 1.2em;
        text-align: center
    }

    .blog-posts .hentry {
        padding-bottom: 1em;
    }

    .entry-meta .post-format {
        font-size: 19px;
        width: 44px;
        line-height: 34px;
    }

    a.more-link {
        padding: 1em;
        max-width: none;
    }

    .format-quote blockquote {
        padding-bottom: 1em;
        font-size: 1.4em;
        text-align: center;
    }

    .format-quote blockquote cite {
        text-align: center;
        margin: 8px 0 0;
    }

    .format-link .link-content > a:first-child {
        font-size: 1.2em;
    }

    .link-content {
        text-align: center;
    }

    .format-status .entry-content > p:first-child {
        font-size: 1.3em;
    }

    .navigation, .post-pagination {
        padding-top: 0;
    }

    .navigation a {
        padding: 1em;
    }

    /* BLOG SINGLE */
    .blog-single .entry-content p {
        line-height: 29px;
    }

    .related-posts ol li a {
        margin-bottom: .8em;
    }

    .comments-area h2, #respond h2 {
        font-size: 1.2em;
    }

    .comments-title span {
        display: block
    }

    .comment-meta .fn + a {
        display: block;
        float: none;
    }

    .comments-area ol ol {
        margin-left: 5%
    }

    .comments-area ol ol ol {
        margin-left: 8%
    }

    .comment-meta img {
        position: static;
        top: auto;
        left: auto;
        float: left;
        margin: 0 1em .6em 0;
    }

    .comment-meta .fn {
        display: block;
    }

    .comments-area article, .comments-area ol ol article {
        margin-left: 0
    }

    .comment-content {
        clear: left
    }

    .about-author {
        text-align: center
    }

    .author-img {
        float: none;
        width: auto;
    }

    .author-img img {
        margin: 0 auto 1em auto
    }

    /* PORTFOLIO SINGLE */
    .one-page-layout .portfolio-single {
        padding-top: 1.4em;
    }
}

/*  --------------------------------------------	8. THEME - customize colors etc...    -------------------------------------------- */
body {
    color: #345;
}

/* Links */
a {
    color: #096;
}

a:hover {
    color: #5BCF80;
}

/* Text Selection */
::selection {
    text-shadow: none;
    color: #333;
    background: #FFFFCF;
}

::-moz-selection {
    text-shadow: none;
    color: #333;
    background: #FFFFCF;
}

/* Service Icons */
.color1 i {
    background: #F8CB30;
}

.color2 i {
    background: #74BADE;
}

.color3 i {
    background: #5BCF80;
}

.color4 i {
    background: #E25E5B;
}

/* PRIMARY COLOR : #21B572   ================================================== */
.navigation a:hover, .pagination a:hover, .entry-meta a:hover, .single-page-layout .vs-nav li i:hover, .media-box .mask:before, .button.primary:hover, a.more-link:hover, .flex-control-paging li a.flex-active, .mejs-controls .mejs-time-rail .mejs-time-current, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: #21B572
}

.entry-title a:hover, .portfolio-nav a.button:hover, .related-posts li a:hover, .nav-single a:hover, .comment-meta a:hover, .comment-meta .fn + a:hover, .comment-reply-link:hover {
    color: #21B572
}

.portfolio-nav a.button:hover, .format-link .link-content > a:first-child:hover, .flex-control-paging li a:hover, .bypostauthor > article {
    border-color: #21B572
}

/* SECONDARY COLOR : #5BCF80 - lighter than primary color   ================================================== */
.skill-unit .bar .progress, .event .date, .letter-info p i, .media-cell-desc .date, #nprogress .bar, #fancybox-close, .portfolio-nav a.button.back {
    background: #5BCF80;
}

#nprogress .spinner-icon {
    border-top-color: #5BCF80;
    border-left-color: #5BCF80;
}

/* FIX FOR CHROME FULSCREEN VIDEO ISSUE */
:-webkit-full-screen-ancestor:not(iframe) *:not(video) {
    animation: none;
    -webkit-animation: none;
}

iframe {
    width: 100%;
    height: 100%;
}

#video_container, #timer_container {
    background-color: #000;
    height: 467px
}

#reel-heading {
    background: #282828;
    padding: 20px 15px;
    color: #fff;
    font-weight: bold;
}

.reel-slate {
    clear: both;
    padding: 0;
    text-align: left;
    width: 100%;
}

.reel-jump {
    display: block;
    border-bottom: 1px solid #1f1f1f;
    padding: 12px 15px;
    color: #777;
    cursor: pointer;
}

.reel-jump:hover {
    color: #fff;
}

.reel-jump:last-child {
    border-bottom: none;
}

#timer_container::-webkit-scrollbar {
    width: 10px;
}

#timer_container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

#timer_container::-webkit-scrollbar-thumb {
    background-color: #666;
    outline: 1px solid slategrey;
}

#timer_container {
    overflow-y: auto;
}

.special {
    padding: 0 !important;
}

.row.special {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.reel-jump.active {
    color: #fff;
}

.reel-jump span {
    display: none;
}

.reel-jump.active span {
    display: inline;
}

.slates {
    font-size: 20px;
    line-height: 32px;
    color: #ccc;
}

.slates a {
    color: #fff;
    border-bottom: 1px dashed #fff;
}

.slates a:hover {
    border-bottom: 1px solid #fff;
    text-decoration: none;
}

.btn-track {
    margin-top: 15px;
    margin-right: 5px;
    text-decoration: none;
    border: none !important;
    display: inline-block;
}

.btn-track img {
    width: 40px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    #video_container, #timer_container {
        height: 392px;
    }
}

@media (max-width: 991px) {
    #timer_container {
        height: auto !important;
    }

    #reel-heading {
        display: none;
    }

    .reel-jump {
        padding: 9px 15px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #slanted {
        background: no-repeat center -100px;
    }

    #video_container, #timer_container {
        height: 388px;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    #video_container {
        height: 270px;
    }

    #timer_container {
        height: 315px;
    }
}

@media only screen and (max-width: 479px) {
    #video_container {
        height: 240px;
    }

    #timer_container {
        height: 315px;
    }
}

/* Make clicks pass-through */
#nprogress {
    pointer-events: none;
    position: relative;
    z-index: 1000;
}

#nprogress .bar {
    background: #5BCF80;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

/* Fancy blur effect */
#nprogress .peg {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    opacity: 1.0;
    -webkit-transform: rotate(3deg) translate(0px, -6px);
    -ms-transform: rotate(3deg) translate(0px, -6px);
    transform: rotate(3deg) translate(0px, -6px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
    display: block;
    position: fixed;
    z-index: 10000;
    top: 15px;
    left: 15px;
}

#nprogress .spinner-icon {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: solid 3px transparent;
    border-top-color: #5BCF80;
    border-left-color: #5BCF80;
    border-radius: 50%;
    -webkit-animation: nprogress-spinner 400ms linear infinite;
    animation: nprogress-spinner 400ms linear infinite;
}

@-webkit-keyframes nprogress-spinner {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes nprogress-spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}