body.is-canvi-ready {

    overflow-x: hidden

}

body.is-canvi-ready .canvi-navbar {

    display: block;

    visibility: visible

}

.canvi-navbar, .canvi-overlay {

    top: 0;

    bottom: 0;

    visibility: hidden

}

.canvi-navbar {

    position: fixed;

    height: 100%;

    width: 280px;

    display: none;

    transition: -webkit-transform .3s cubic-bezier(.42, 0, .58, 1);

    transition: transform .3s cubic-bezier(.42, 0, .58, 1);

    transition: transform .3s cubic-bezier(.42, 0, .58, 1), -webkit-transform .3s cubic-bezier(.42, 0, .58, 1);

    will-change: transform;

    -webkit-overflow-scrolling: touch;

    overflow: auto

}

.canvi-content, .canvi-navbar.is-canvi-open {

    transition: -webkit-transform .3s cubic-bezier(.42, 0, .58, 1)

}

.canvi-navbar::-webkit-scrollbar {

width:0

}

.canvi-navbar::-webkit-scrollbar-track {

background:#efefef

}

.canvi-navbar::-webkit-scrollbar-thumb {

background:#ddd;

border-radius:2px

}

.canvi-navbar.is-canvi-open {

    transition: transform .3s cubic-bezier(.42, 0, .58, 1);

    transition: transform .3s cubic-bezier(.42, 0, .58, 1), -webkit-transform .3s cubic-bezier(.42, 0, .58, 1);

    will-change: transform

}

.canvi-navbar[data-position=right] {

    right: 0;

    -webkit-transform: translate3d(100%, 0, 0);

    transform: translate3d(100%, 0, 0)

}

.canvi-navbar[data-position=right].is-canvi-open, .canvi-navbar[data-position=right][data-push-content=true] {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0)

}

.canvi-navbar[data-position=left] {

    left: 0;

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0)

}

.canvi-navbar[data-position=left].is-canvi-open, .canvi-navbar[data-position=left][data-push-content=true] {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

	background-color: #efefef;

}

.canvi-navbar[data-push-content=false] {

    z-index: 10

}

.canvi-navbar[data-push-content=true] {

    z-index: 1

}

.canvi-content {

    position: relative;

    z-index: 5;

    transition: transform .3s cubic-bezier(.42, 0, .58, 1);

    transition: transform .3s cubic-bezier(.42, 0, .58, 1), -webkit-transform .3s cubic-bezier(.42, 0, .58, 1);

    overflow: hidden;

}

.canvi-content.is-canvi-open {

    transition: -webkit-transform .3s cubic-bezier(.42, 0, .58, 1);

    transition: transform .3s cubic-bezier(.42, 0, .58, 1);

    transition: transform .3s cubic-bezier(.42, 0, .58, 1), -webkit-transform .3s cubic-bezier(.42, 0, .58, 1)

}

.canvi-overlay {

    position: absolute;

    right: 0;

    left: 0;

    background: rgba(0,0,0,.4);

    opacity: 0;

    z-index: 1031

}

.canvi-content.is-canvi-open .canvi-overlay {

    visibility: visible;

    -webkit-animation-name: canvi-animate-in;

    animation-name: canvi-animate-in;

    -webkit-animation-duration: .3s;

    animation-duration: .3s;

    -webkit-animation-fill-mode: forwards;

    animation-fill-mode: forwards;

    -webkit-animation-timing-function: cubic-bezier(.42, 0, .58, 1);

    animation-timing-function: cubic-bezier(.42, 0, .58, 1);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden

}

.canvi-content.is-canvi-open .canvi-overlay.canvi-animate-out {

    -webkit-animation-name: canvi-animate-out;

    animation-name: canvi-animate-out;

    -webkit-animation-duration: .3s;

    animation-duration: .3s;

    -webkit-animation-fill-mode: forwards;

    animation-fill-mode: forwards;

    -webkit-animation-timing-function: cubic-bezier(.42, 0, .58, 1);

    animation-timing-function: cubic-bezier(.42, 0, .58, 1);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden

}

.canvi-user-info {

    padding: 25px 30px;

    display: -webkit-box;

    display: flex;

    -webkit-box-align: center;

    align-items: center;

    justify-cnt: left;

    background: #b02626;

    margin-bottom: 0px;

    position: relative

}

.canvi-user-info img {

    max-width: 100%;

    height: auto

}

.canvi-user-info__image {

    margin-right: 20px;

    width: 50px;

    height: 50px;

    border-radius: 8px;

    overflow: hidden

}

.canvi-user-info__data {

    width: calc(100% - 70px)

}

.canvi-user-info__title {

    font-weight: 700;

    color: #fff;

    font-size: 18px;

    margin: 0 0 3px;

    line-height: 1.3em;

    display: block

}

.canvi-user-info__meta {

    display: inline-block;

    color: rgba(255,255,255,.7);

    text-decoration: none;

    font-size: 14px;

}

.canvi-user-info__meta :hover, .canvi-user-info__meta:active, .canvi-user-info__meta:focus {

    color: rgba(255,255,255,.9)

}

.canvi-user-info__close {

    position: absolute;

    top: calc(30% - 20px);

    right: 20px;

    background: rgba(0,0,0,.2);

    width: 35px;

    height: 35px;

    border-radius: 2px;

    transition: .3s;

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none

}

.canvi-user-info__close:hover {

    background: rgba(0,0,0,.6)

}

.canvi-user-info__close::after, .canvi-user-info__close::before {

    content: '';

    width: 15px;

    height: 3px;

    background: #fff;

    position: absolute;

    top: 16px

}

.canvi-user-info__close::before {

    left: 10px;

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg)

}

.canvi-user-info__close::after {

    right: 10px;

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg)

}

.canvi-navigation {

    margin: 0;

    padding: 0

}

.canvi-navigation li {

    list-style: none

}

.canvi-navigation li:not(:last-child) {

    border-bottom: 1px solid rgba(0,0,0,.03)

}

.canvi-navigation__item {

    padding: 14px 30px;

    display: -webkit-box;

    display: flex;

    -webkit-box-align: center;

    align-items: center;

    text-decoration: none

}

.canvi-navigation__icon-wrapper {

    margin-right: 20px;

    width: 30px;

    height: 30px;

    border-radius: 3px;

    background: #aaa;

    color: #fff;

    text-align: center;

    display: -webkit-box;

    display: flex;

    -webkit-box-align: center;

    align-items: center;

    -webkit-box-pack: center;

    justify-content: center

}

.canvi-navigation__icon {

    font-size: 17px;

    line-height: 1em

}

.canvi-navigation__text {

    font-weight: 700;

    color: #94a0a8;

    font-size: 1.6rem;

    margin: 0;

    line-height: 1.3em;

    display: block;

    text-transform: uppercase

}

.canvi-header {

    background: #1ce678;

    display: -webkit-box;

    display: flex;

    -webkit-box-align: center;

    align-items: center;

    -webkit-box-pack: center;

    justify-content: center

}

.canvi-header__image {

    margin: 30px;

    max-width: 100px;

    height: auto

}

@-webkit-keyframes canvi-animate-in {

0% {

opacity:0

}

100% {

opacity:1

}

}

@keyframes canvi-animate-in {

0% {

opacity:0

}

100% {

opacity:1

}

}

@-webkit-keyframes canvi-animate-out {

0% {

opacity:1

}

100% {

opacity:0

}

}

@keyframes canvi-animate-out {

0% {

opacity:1

}

100% {

opacity:0

}

}