html.no-svg .svg {
    display: none !important;
}
html.svg .non-svg {
    display: none !important;
}

body {
    overflow-anchor: none;
}

.draw-life .loading {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;

    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

@media only screen and (max-width: 480px) {
    .button {
        margin-bottom: 5px;
    }

    .no-padding-on-small {
        padding: 0;
    }
}

.tiny-on-small,
.small-on-small {
    // for autocomplete
}


.options, .options-off {
    display: none;
    margin: 0;
    padding-top: 4px;
    min-height: 100vh;
}

.block {
    min-height: 100vh;
}
.block-x2 {
    min-height: 200vh;
}

.mycolumn {
    position: relative;
    padding-left: .3rem;
    padding-right: .3rem;
    float: left;
    width: 100%;
}


.icon-attention {
    display: inline-block;
    margin: -24px 0;
    font-size: 2.5rem;
}

.sources {
    margin: 20px 10px;
}

.draw-life-graph-outer {
    z-index: 1;
    margin: 0 auto;
    position: relative;
    background-color: #ffffff;
    width: 720px;
    height: 378px;
    border-radius: 7px;
    border: 1px solid #c1d8de;
    overflow: hidden;

    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
}
#draw-life-graph-outer.fold:before {
    content: " ";
    position: absolute;
    display: inline-block;
    z-index: 4;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-image: radial-gradient(rgba(255,255,255,0.1), rgba(255,255,255,1));*/
}
#draw-life-graph-outer.fold.fold-10:before {
    background-image: radial-gradient(rgba(255,255,255,0.1), rgba(255,255,255,1));
}
#draw-life-graph-outer.fold.fold-20:before {
    background-image: radial-gradient(rgba(255,255,255,0.2), rgba(255,255,255,1));
}
#draw-life-graph-outer.fold.fold-30:before {
    background-image: radial-gradient(rgba(255,255,255,0.3), rgba(255,255,255,1));
}
#draw-life-graph-outer.fold.fold-40:before {
    background-image: radial-gradient(rgba(255,255,255,0.4), rgba(255,255,255,1));
}
#draw-life-graph-outer.fold.fold-50:before {
    background-image: radial-gradient(rgba(255,255,255,0.5), rgba(255,255,255,1));
}
#draw-life-graph-outer.fold.fold-60:before {
    background-image: radial-gradient(rgba(255,255,255,0.6), rgba(255,255,255,1));
}
#draw-life-graph-outer.fold.fold-70:before {
    background-image: radial-gradient(rgba(255,255,255,0.7), rgba(255,255,255,1));
}
#draw-life-graph-outer.fold.fold-80:before {
    background-image: radial-gradient(rgba(255,255,255,0.8), rgba(255,255,255,1));
}
#draw-life-graph-outer.fold.fold-90:before {
    background-image: radial-gradient(rgba(255,255,255,0.9), rgba(255,255,255,1));
}
#draw-life-graph-outer.fold.fold-95:before {
    background-image: radial-gradient(rgba(255,255,255,0.95), rgba(255,255,255,1));
}
#draw-life-graph-outer.fold.fold-100:before {
    background-image: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
        url(/img/main/course/icon/locked.svg),
        radial-gradient(rgba(255,255,255,1), rgba(255,255,255,1));
    background-repeat: repeat, no-repeat, repeat;
    background-position: center center;
    background-size: auto, 250px 250px, auto;
}
.draw-life-graph {
    z-index: 1;
    position: relative;
    width: 720px;
    height: 420px;
    overflow: hidden;
}

.draw-full .draw-life-graph-outer {
    height: 756px;
    /*height: 1134px;*/
}
.draw-full .draw-life-graph {
    height: 840px;
    /*height: 1260px;*/
}

.draw-life-graph span {
    overflow: visible;
    display: inline-block;
    position: absolute;
    z-index: 1;
    white-space: nowrap;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.f-dropdown.content.draw {
    padding: 0.2rem;
}
.f-dropdown.content.draw p {
    margin-bottom: 0;
    font-size: 14px;
}
/*.f-dropdown.content.draw a:last-of-type {*/
    /*margin-top: -12px;*/
    /*float: right;*/
    /*display: block;*/
    /*position: relative;*/
    /*z-index: 2;*/
    /*opacity: 0.5;*/
/*}*/
.f-dropdown.content.draw a span.support {
    color: red;
}
.f-dropdown.content.draw a span.edit {
    color: dodgerblue;
}
.f-dropdown.content.draw a span.see {
    color: yellowgreen;
}

.draw-full .draw-life-graph span {
    cursor: context-menu;
}

.draw-life-graph span.align-center {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}


.options .button-img {
    margin-right: 2vmax;
    display: inline-block;
    margin-bottom: 12px;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.options .button-img img {
    max-height: 20vh;
}

.options .button-img.round {
    border-radius: 50%;
}
.options .button-img:hover {
    opacity: 0.7;

    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}
.options .button-img.round:hover {
    opacity: 1;
    box-shadow: 0 0 0 0.3rem rgba(255, 193, 7, .5);

    -webkit-transition: box-shadow .15s ease-in-out;
    -moz-transition: box-shadow .15s ease-in-out;
    -o-transition: box-shadow .15s ease-in-out;
    transition: box-shadow .15s ease-in-out;
}
.options.mood img {
    margin-right: 0.5vmax;
    max-height: 175px;
}
@media only screen and (max-width: 768px) {
    .options.mood img {
        max-height: 120px;
    }
}
@media only screen and (max-width: 480px) {
    .options .button-img.energy img {
        max-height: 55px;
    }
}
.options .button-img.posture img {
    max-height: 35vh;
    /*border-radius: 5%;*/
    padding-right: 20px;
    border-right: 1px solid #e60000;
}
.options .button-img.posture:first-child img {
    border-right: 1px solid #00973a;
}
.options .button-img.posture:last-child img {
    border-right: none;
}

.options .button-img.goal img {
    max-height: 100px;
}


.block.draw-life {
    background-color: #f8f9fa;
    position: relative;
}
.block.draw-life .row {
    position: relative;
}

.draw-life-container {
    position: relative;
    overflow: hidden;
}
#draw-life {
    margin: auto;
    display: block;
    height: 378px;
    width: 720px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid #e5e6e7;
}
#draw-life-canvas {
    display: block;
    height: 378px;
    width: 720px;
    border-radius: 7px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    /*border: 1px solid coral;*/
}


#choose-back {
    position: absolute;
    top: 170px;
    left: 1px;
    z-index: 2;
    display: none;
    width: 2em;
}
@media only screen and (max-width: 600px) {
    #choose-back {
        position: relative;
        top: 10px;
        left: -30px;
        margin-bottom: 15px;

        -webkit-transform: translateX(50vw);
        -moz-transform: translateX(50vw);
        -ms-transform: translateX(50vw);
        -o-transform: translateX(50vw);
        transform: translateX(50vw);
    }
}
.for-b#choose-back {
    position: relative;
    top: 10px;
    left: -30px;
    margin-bottom: 15px;

    -webkit-transform: translateX(50vw);
    -moz-transform: translateX(50vw);
    -ms-transform: translateX(50vw);
    -o-transform: translateX(50vw);
    transform: translateX(50vw);
}
.arrow-back {
    padding: 50px 0 30px 20px;
    width: 2em;
    height: 2em;
}
.arrow-back:after {
    content: '';
    display: inline-block;
    font-style: normal;
    position: relative;
    width: 2em;
    height: 2em;
    border-right: 0.2em solid #fce5ba;
    border-top: 0.2em solid #fce5ba;

    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.arrow-back:hover {
    opacity: 0.7;
}



.list .list-button-done, .set .set-button-done {
    text-align: center;
    min-height: 53px;
}
.list .list-button-done .button, .set .set-button-done .button {
    display: none;
    margin: 0;
}
.list .list-control-block, .set .set-control-block {
    max-width: 500px;
    margin: auto;
}
.list-control-block ul {
    margin: 0;
    padding: 0;
    min-height: 52px;
}
/* Style the list items */
.list-control-block ul li {
    /*cursor: pointer;*/
    position: relative;
    padding: 12px 8px 12px 40px;
    background: #fffed4;
    font-size: 18px;
    list-style: none;
    border-bottom: 1px solid #1caa1c;
    border-left: 1px solid #1caa1c;
    border-right: 1px solid #1caa1c;

    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;

    /* make the list items unselectable */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Set all odd list items to a different color (zebra-stripes) */
.list-control-block ul  li:nth-child(odd) {
    background: #fffadd;
}
/* Darker background-color on hover */
.list-control-block ul  li:hover {
    background: #fed954;
}
/* Style the close button */
.list-control-block .item-remove {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}
.list-control-block .item-remove:hover {
    background-color: #f44336;
    color: white;
}
/* Style the header */
.list-control-block .control-header {
    background-color: #1caa1c;
    padding: 13px;
    color: white;
    text-align: center;
    min-height: 63px;
}
/* Clear floats after the header */
.list-control-block .control-header:after, .set-control-block .control-header:after {
    content: "";
    display: table;
    clear: both;
}
/* Style the input */
input.item-input {
    margin: 0;
    border: none;
    width: 75%;
    padding: 10px;
    float: left;
    font-size: 16px;
    height: 37px;
}
/* Style the "Add" button */
a.item-add {
    padding: 8px 8px 9px 8px;
    width: 25%;
    float: left;
    margin-bottom: 0;
    height: 37px;
    border-radius: 0 3px 3px 0;
}
a.item-add:hover {
    border-radius: 0 3px 3px 0;
}

/* Landscape phones and down */
@media only screen and (max-width: 480px) {
    a.item-add {
        padding: 13px 2px 12px;
        font-size: 10px;
    }
}






#progress-bar {
    height: 6px;
    width: 100%;
    margin: 2px auto 2px auto;
    overflow: hidden;
}
#progress-bar > div {
    height: 100%;
    float: left;
    padding: 0 2px;
    position: relative;
    box-sizing: border-box;
    width: 30px;
    background: #ededed;

    -webkit-transition: .3s ease-out;
    -moz-transition: .3s ease-out;
    -o-transition: .3s ease-out;
    transition: .3s ease-out;
}
#progress-bar > div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-left: 3px solid #f8f9fa;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}
#progress-bar > div::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-top: 3px solid #f8f9fa;
    border-bottom: 3px solid #f8f9fa;
    border-left: 3px solid #ededed;
}
#progress-bar > div:first-child {
    margin-left: 0;
}
#progress-bar > div:first-child:before {
    display: none;
}
#progress-bar > div:last-child:after {
    display: none;
}
#progress-bar > div.is-complete {
    background: #fed954;
}
#progress-bar > div.is-complete::after {
    border-left: 3px solid #fed954;
}
#progress-bar > div.is-current {
    background: #ffeda9;
}
#progress-bar > div.is-current::after {
    border-left: 3px solid #ffeda9;
}




.set .list-control-block {
    margin-top: 10px;
    background-color: floralwhite;
    padding: 12px 7px;
}
.set .elements {
    margin: 9px auto;
}
.set .elements div {
    /*https:/getbootstrap.com/docs/4.0/components/buttons/*/
    cursor: pointer;
    margin: 5px;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -moz-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -o-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
/* Landscape phones and down */
@media only screen and (max-width: 480px) {
    .set .list-control-block {
        padding: 7px 1px;
    }
    .set .elements div {
        padding: .1rem .2rem;
        font-size: 0.8rem;
    }
}
.set .elements.warning div {
    color: #ffc107;
    background-color: transparent;
    background-image: none;
    border-color: #ffc107;

    -webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    transition: opacity 1s linear;
}
.set .elements.warning div.fade-out, .set .elements.success div.fade-out {
    /*visibility: hidden;*/
    opacity: 0.25;
    cursor: default;

    -webkit-transition: visibility 0s linear 400ms, opacity 400ms;
    -moz-transition: visibility 0s linear 400ms, opacity 400ms;
    -o-transition: visibility 0s linear 400ms, opacity 400ms;
    transition: visibility 0s linear 400ms, opacity 400ms;
}
.set .elements.warning div.checked, .set .elements.warning div:hover:not(.fade-out) {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}
.set .elements.warning div.checked:hover {
    box-shadow: 0 0 0 0.2rem rgba(255,193,7,.5);
}
.set .elements.success div {
    color: #28a745;
    background-color: transparent;
    background-image: none;
    border-color: #28a745;
}
.set .elements.success div.checked, .set .elements.success div:hover {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.set .elements.success div.checked:hover {
    box-shadow: 0 0 0 0.2rem rgba(40,167,69,.5)
}



.scale-point {
    display: inline-block;
    visibility: hidden;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #ffeda9;
    font-family: "Helvetica", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;
    font-size: 23px;
    line-height: 47px;
    text-align: center;
    box-shadow: 2px 2px 5px gray;
    /*background: radial-gradient(at top left, #fff, #F6F7FA);*/
    background: radial-gradient(at top left, rgba(255,0,0,0), rgba(246,247,250,1));

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.scale-point.show {
    visibility: visible;
}
.scale-slider-container {
    display: inline-block;
    margin: 0 auto 10px;
    width: 500px;
    max-width: 100%;
}
.scale-slider {
    width: 100%;
}
.scale-description {
    /*min-height: 40px;*/
}
.scale-description p {
    /*display: none;*/
    /*text-align: center;*/
    /*margin-bottom: 0;*/
}
.scale-button {
    visibility: hidden;
}


.scale-time .scale-slider {
    margin-bottom: 50px;
}
.scale-time .scale-point {
    border: none;
    color: #f6a828;
    width: 85px;
    border-radius: 2px;
    padding-top:11px;
    font: 25px Consolas, monaco, Courier, monospace;
    background: radial-gradient(ellipse at top left, #5a5a5a 0%,#0f0f0f 100%);
}
.scale-time .scale-button {
    visibility: visible;
}
.sleep-time-marks {
    position: relative;
    width: 100%;
    margin: 20px auto;
    height: 14px;
}
.sleep-time-marks .hour {
    color: #555;
    position: absolute;
    border-left: 1px solid #aaa;
    height: 14px;
    width: 16.66%;
    left: 50%;
}
.sleep-time-marks .hour:after {
    position: absolute;
    bottom: -17px;
    font: 13px/1 "Consolas", "Menlo", "Courier", monospace;
    margin-left: -16.66%;
}
.sleep-time-marks .hour:not(:last-child):before {
    color: #555;
    content: "";
    position: absolute;
    border-left: 1px solid #aaa;
    height: 10px;
    width: 16.66%;
    left: 50%;
}
.sleep-time-marks .hour:nth-of-type(1) {
    left: 0;
}
.sleep-time-marks .hour:nth-of-type(1):after {
    content: "5:00";
}
.sleep-time-marks .hour:nth-of-type(2) {
    left: 16.66%;
}
.sleep-time-marks .hour:nth-of-type(2):after {
    content: "6:00";
}
.sleep-time-marks .hour:nth-of-type(3) {
    left: 33.33%;
}
.sleep-time-marks .hour:nth-of-type(3):after {
    content: "7:00";
}
.sleep-time-marks .hour:nth-of-type(4) {
    left: 50%;
}
.sleep-time-marks .hour:nth-of-type(4):after {
    content: "8:00";
}
.sleep-time-marks .hour:nth-of-type(5) {
    left: 66.66%;
}
.sleep-time-marks .hour:nth-of-type(5):after {
    content: "9:00";
}
.sleep-time-marks .hour:nth-of-type(6) {
    left: 83.33%;
}
.sleep-time-marks .hour:nth-of-type(6):after {
    content: "10:00";
}
.sleep-time-marks .hour:nth-of-type(7) {
    left: 100%;
}
.sleep-time-marks .hour:nth-of-type(7):after {
    content: "11";
}

#alcohol img {
    max-height: 120px;
}

.age-18-plus {
    display: inline-block;
    border: 3px solid #fa5255;
    font-family: "Consolas", "Menlo", "Courier", monospace;
    background: white;
    width: 45px;
    height: 45px;
    line-height: 44px;
    border-radius: 50%;
    text-align: center;
    box-shadow: 2px 2px 5px gray;
    margin-right: 10px;
}




.hydration {
    z-index: 1;
    position: relative;
    border-radius: 5px;
    background-color: white;
    display: inline-block;
    margin: 3px auto 10px;
    border: 1px solid #e5e6e7;
}
.hydration .sources-list .source {
    display: inline-block;
    float: left;
    width: 120px;
    text-align: center;
    border-right: 1px solid #e5e6e7;
}
.hydration .sources-list .source:last-child {
    border-right: none;
}
.hydration .source .name {
    margin-bottom: 3px;
    font-size: 17px;
    font-family: "Cuprum", sans-serif;
}
.hydration .source .volume {
    margin: 3px 0;
    color: #d3d3d3;
    font-size: 11px;
    /*display: none;*/
}
.hydration .sources-list:after, .hydration .control:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.hydration .control {
    margin: 3px auto;
    border-radius: 6px;
    overflow: hidden;
    width: 100px;
    position: relative;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.hydration .control .multiplicator {
    line-height: 30px;
    width: 40px;
    font-size: 13px;
    height: 30px;
    margin-left: 30px;
    color: #555;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.2);

}
.hydration .control .plus, .hydration .control .minus {
    top: 0;
    right: 0;
    position: absolute;
    width: 30px;
    height: 30px;
    background: linear-gradient(rgba(40,167,69, 0.5), rgba(40,167,69, 0.6));
    color: white;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    text-shadow: 1px 1px 1px #666;
}
.hydration .control .plus:hover, .hydration .control .minus:hover {
    opacity: 0.8;

    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

.hydration .sources-list .source .minus {
    background: linear-gradient(rgba(255, 117, 80, 0.8), rgba(255, 117, 80, 1));
    left: 0;
}
.hydration .sources-list img {
    max-height: 70px;
}
.hydration .sources-list .img {
    vertical-align: bottom;
    height: 70px;
}
.hydration #total {
    margin-top: 10px;
    text-align: center;
}

.hydration-indicator {
    margin: 0 auto;
    width: 370px;

    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
}
.hydration-indicator img.chart {
    margin-top: 5px;
    max-height: 160px;
    margin-left: 25px;
}
.hydration-indicator .title {
    font-size: 14px;
}
.hydration-indicator .water-jar {
    float: left;
    display: inline-block;
    margin: 0 auto 10px;
    position: relative;
    width: 148px;
    height: 200px;
    background: url(/img/main/lifemap/health/water-jar-empty.png) no-repeat;
    background-size: contain;
    text-align: center;
}
.hydration-indicator:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.hydration-indicator .water-jar .full {
    position: absolute;
    top: 200px;
    left: 0;
    display: inline-block;
    width: 190px;
    border-top: 3px solid coral;
    height: 200px;
    background: url(/img/main/lifemap/health/water-jar.png) no-repeat;
    background-size: contain;
    background-position: 0 -200px;
    overflow: hidden;
    z-index: 0;
}
.hydration-button {
    visibility: hidden;
}
/* Landscape phones and down */
@media only screen and (max-width: 480px) {
    .hydration .sources-list .source {
        width: 100px;
    }
    .hydration .control {
        width: 90px;
    }
    .hydration .control .multiplicator {
        width: 30px;
    }
}


.food-pyramid {
    position: relative;
    text-align: center;
}
.food-pyramid .pyramid {
    position: relative;
    display: inline-block;
    max-width: 320px;
}
.food-pyramid .level {
    position: absolute;
    display: none;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    height: 13px;
    width: 11px;
    bottom: 5px;
    left: 33px;
}
.food-pyramid .level.level-1 {
    border-left: none;
    display: inline-block;
}
.food-pyramid .level.level-2, .food-pyramid .level.level-3 {
    display: inline-block;
}
.food-pyramid .level.level-3:after {
    content: '';
    position: relative;
    display: inline-block;
    top: -5px;
    margin-left: 13px;
    height: 13px;
    border-right: 3px solid #fff;
}
.food-pyramid .level.grains {
    left: 44px;
}
.food-pyramid .level.vegetables {
    left: 116px;
}
.food-pyramid .level.fruits {
    left: 171px;
}
.food-pyramid .level.oils {
    display: none;
}
.food-pyramid .level.diary {
    left: 234px;
}
.food-pyramid .level.protein {
    left: 282px;
}
.food-groups {
    text-align: center;
    min-height: 340px;
}
.food-group {
    display: none;
    position: relative;
    text-align: left;
    max-width: 450px;
    margin: 0 auto;
    min-height: 330px;
    background-repeat: no-repeat;
    background-position: center center;
}
.food-group.grains {
    background-image: url('/img/main/lifemap/health/food-grains.jpg');
}
.food-group.vegetables {
    background-image: url('/img/main/lifemap/health/food-vegetables.jpg');
}
.food-group.fruits {
    background-image: url('/img/main/lifemap/health/food-fruits.jpg');
}
.food-group.oils {
    background-image: url('/img/main/lifemap/health/food-oils.jpg');
}
.food-group.diary {
    background-image: url('/img/main/lifemap/health/food-diary.jpg');
}
.food-group.protein {
    background-image: url('/img/main/lifemap/health/food-protein.jpg');
}
.food-group ul {
     list-style: none;
 }
.food-group .choose {
    margin-bottom: 0;
    text-align: center;
}
.food-group .choose img {
    height: 13px;
    margin-right: -10px;
    position: relative;
}
.food-group .choose img.move {
    height: 18px;
    margin-right: -10px;
    border: 2px solid #ff9805;
    background: #ff9805;
    position: absolute;
}
.food-group .button {
    margin-bottom: 0;
}
.food-group h2 {
    text-align: center;
}
.food-group.first {
    display: inline-block;
}
.grains h2 {
    color: #ff9805;
    /*color: #f5821f;*/
}
.vegetables h2 {
    color: #97cc64;
    /*color: #2fb56a;*/
}
.fruits h2 {
    /*color: #c9252b;*/
    color: #fd5a3e;
}
.oils h2 {
    color: #ffd963;
    /*color: #ffdd00;*/
}
.diary h2 {
    color: #77b6e7;
    /*color: #00adef;*/
}
.protein h2 {
    color: #a955b8;
    /*color: #6850a1;*/
}

.grains .braces {
    color: #ff9805;
    width: 27%;
    margin-left: 1%;
}
.vegetables .braces {
    color: #97cc64;
    width: 23%;
    margin-left: 27%;
}
.fruits .braces {
    color: #fd5a3e;
    width: 15%;
    margin-left: 49%;
}
.oils .braces {
    color: #ffd963;
    width: 2%;
    margin-left: 63%;
}
.diary .braces {
    color: #77b6e7;
    width: 23%;
    margin-left: 66%;
}
.protein .braces {
    color: #a955b8;
    width: 10%;
    margin-left: 88%;
}
.braces-container {
    text-align: center;
}
.braces-container-inner {
    text-align: left;
    display: inline-block;
    position: relative;
    width: 320px;
    margin-top: -5px;
}
.braces {
    display: inline-block;
    position: relative;
    padding: .3em .5em;
    font-family: "Cuprum", sans-serif;
    text-align: center;
    font-size: 16px;
}
.braces::before,
.braces::after,
.curly::before,
.curly::after {
    content: "";
    position:absolute;
    width: 25%;
    height: .8em;
}
.braces::before,
.braces::after {
    bottom: 0;
    border-bottom: 2px solid;
}
.braces::before {
    left: 0;
    border-bottom-left-radius: .8em;
}
.braces::after {
    right: 0;
    border-bottom-right-radius: .8em;
}
.curly::before,
.curly::after {
    bottom: -.7em;
    border-top: 2px solid;
}
.curly::before {
    left: 25%;
    border-top-right-radius: .8em;
}
.curly::after {
    right: 25%;
    border-top-left-radius: .8em;
}



.junk-food-table {
    display: inline-block;
    margin: 0 auto;
    color: #b3b3b3;
    font: 15px "Cuprum", sans-serif;
}
.junk-food-table div img {
    cursor: pointer;
    max-height: 80px;
    z-index: 4;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    margin: auto;
}
.junk-food-table div img.move {
    position: absolute;
    max-height: 45px;

    -webkit-transition: max-height 0.7s ease-in-out, transform 0.7s ease-in-out;
    -moz-transition: max-height 0.7s ease-in-out, transform 0.7s ease-in-out;
    -o-transition: max-height 0.7s ease-in-out, transform 0.7s ease-in-out;
    transition: max-height 0.7s ease-in-out, transform 0.7s ease-in-out;
}
.junk-food-table div:nth-of-type(2),
.junk-food-table div:nth-of-type(5),
.junk-food-table div:nth-of-type(8) {
    margin-left: 8px;
    margin-right: 8px;
}
.junk-food-table div {
    margin-bottom: 15px;
    display: inline-block;
    width: 93px;
    height: 100px;
    float: left;
    overflow: hidden;
}
.junk-food-table div img:not(.move):hover {
    opacity: 0.7;
}
.scales {
    display: inline-block;
    position: relative;
    width: 320px;
    height: 300px;
    margin: 0 auto;
}
.scales .scale {
    z-index: 1;
    display: inline-block;
    position: relative;
    width: 270px;
    height: 270px;
    background: url(/img/main/lifemap/health/junk-scale.png);
    margin: 0 auto;
}
.svg .scales .scale {
    background: url(/img/main/lifemap/health/junk-scale.svg);
}
.scales .bowl {
    position: absolute;
    width: 140px;
    height: 70px;
    z-index: 20;

    -webkit-transition: top .3s cubic-bezier(0.1, -0.4, 0.2, 0);
    -moz-transition: top .3s cubic-bezier(0.1, -0.4, 0.2, 0);
    -o-transition: top .3s cubic-bezier(0.1, -0.4, 0.2, 0);
    transition: top .3s cubic-bezier(0.1, -0.4, 0.2, 0);
}
.scales .bowl.left {
    left: 10px;
    top: 222px;
}
.scales .bowl.right {
    right: 3px;
    top: 151px;
}
.scales .bowl .basket {
    max-height: 100%;
    margin-top: -110px;
    position: relative;
}
.scales .bowl.right .basket {
    margin-top: 0;
}
.scales .bowl.left .basket-content {
    max-height: 75px;
}
.scales .indicator {
    position: absolute;
    top: 50px;
    left: 155px;
    width: 10px;
    height: 60px;
    z-index: 2;
}
.scales .indicator img {
    -webkit-transform-origin: 5px 78px;
    -moz-transform-origin: 5px 78px;
    -ms-transform-origin: 5px 78px;
    -o-transform-origin: 5px 78px;
    transform-origin: 5px 78px;

    -webkit-transition: transform .3s cubic-bezier(0.1, -0.4, 0.2, 0);
    -moz-transition: transform .3s cubic-bezier(0.1, -0.4, 0.2, 0);
    -o-transition: transform .3s cubic-bezier(0.1, -0.4, 0.2, 0);
    transition: transform .3s cubic-bezier(0.1, -0.4, 0.2, 0);

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.scales .base {
    position: absolute;
    top: 124px;
    left: 155px;
    background: #000;
    border-radius: 3px;
    width: 9px;
    height: 49px;
}

.scales .beam {
    position: absolute;
    margin-top: -106px;
    text-align: center;
    margin-left: 70px;
    z-index: 23;
    width: 180px;

    -webkit-transform: rotate(-20.5deg);
    -moz-transform: rotate(-20.5deg);
    -ms-transform: rotate(-20.5deg);
    -o-transform: rotate(-20.5deg);
    transform: rotate(-20.5deg);

    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;

    -webkit-transition: transform .3s cubic-bezier(0.1, -0.4, 0.2, 0);
    -moz-transition: transform .3s cubic-bezier(0.1, -0.4, 0.2, 0);
    -o-transition: transform .3s cubic-bezier(0.1, -0.4, 0.2, 0);
    transition: transform .3s cubic-bezier(0.1, -0.4, 0.2, 0);
}
.scales .beam-container {
    text-align: left;
    display: inline-block;
    position: relative;
    margin-top: -5px;
}
.scales .beam-container-inner {
    display: inline-block;
    position: relative;
    padding: .3em .5em;
    color: #000;
    width: 180px;

    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.scales .beam-container-inner::before,
.scales .beam-container-inner::after,
.scales .shoulder::before,
.scales .shoulder::after {
    content: "";
    position:absolute;
    width: 25%;
    height: .8em;
}
.scales .beam-container-inner::before,
.scales .beam-container-inner::after {
    bottom: 0;
    border-bottom: 5px solid;
}
.scales .beam-container-inner::before {
    left: 0;
    border-bottom-left-radius: .8em;
}
.scales .beam-container-inner::after {
    right: 0;
    border-bottom-right-radius: .8em;
}
.scales .shoulder::before,
.scales .shoulder::after {
    bottom: -0.5em;
    border-top: 5px solid;
}
.scales .shoulder::before {
    left: 25%;
    border-top-right-radius: .8em;
}
.scales .shoulder::after {
    right: 25%;
    border-top-left-radius: .8em;
}

.stairs-container {
    position:relative;
    width: 193px;
    height: 240px;
    overflow: hidden;
    margin: -15px auto 25px;
}
.stairs-container .stairs {
    position: absolute;
    width: 210px;
    height: 210px;
    background: url(/img/main/lifemap/health/stairs.svg);
    background-size: 210px 210px;
    bottom: 0;
    right: 0;
    z-index: 3;
}
.stairs-container .cat {
    z-index: 2;
    background: url(/img/main/lifemap/health/stairs-cat.gif) no-repeat;
    background-size: contain;
    display: inline-block;
    top: 177px;
    left: -63px;
    position: absolute;
    height: 60px;
    width: 57px;

    -webkit-transition: top 0.1s ease-in-out, left 0.1s ease-in-out, transform 0.2s ease-in-out;
    -moz-transition: top 0.1s ease-in-out, left 0.1s ease-in-out, transform 0.2s ease-in-out;
    -o-transition: top 0.1s ease-in-out, left 0.1s ease-in-out, transform 0.2s ease-in-out;
    transition: top 0.1s ease-in-out, left 0.1s ease-in-out, transform 0.2s ease-in-out;
}
.stairs-container .level {
    z-index: 1;
    position: absolute;
    display: inline-block;
    left: 5px;
    top: 35px;
    width: 27px;
    height: 20px;
    color: #f6a828;
    font: 24px Consolas, monaco, Courier, monospace;
    text-shadow: 1px 1px 0 #666;
}
.button-triangle-container {
    position: relative;
    display: inline-block;
    margin: 0 auto 15px auto;
}
.button-triangle-container .button {
    margin-right: 30px;
    margin-bottom: 0;
}
.button-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    display: inline-block;
    position: absolute;
    right: 0;
}
.button-triangle.up {
    top: 0;
    border-width: 0 11px 22px 11px;
    color: #43ac6a;
    border-color: transparent transparent currentColor transparent;
}
.button-triangle.down {
    bottom: 0;
    border-width: 22px 10px 0 11px;
    color: #f04124;
    border-color: currentColor transparent transparent transparent;
}

.walk-container {
    position: relative;
    width: 165px;
    height: 170px;
    margin: 0 auto;
}
.walk-container .sign {
    background: url(/img/main/lifemap/health/walk-sign.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: -5px;
    left: -15px;
    display: inline-block;
    height: 100px;
    width: 63px;
}
.walk-container .level {
    position: absolute;
    display: inline-block;
    text-align: center;
    left: -13px;
    top: 2px;
    width: 59px;
    height: 38px;
    color: #fff;
    font: 18px Consolas, monaco, Courier, monospace;
    text-shadow: 1px 1px 0 #709bbc;
}
.walk-cat-animation {
    background-image: url('/img/main/lifemap/health/walk-cat-sprite.png');
    width: 150px;
    height: 150px;
    -webkit-animation: walk-cat-animation 0.25s steps(8) infinite;;
    -moz-animation: walk-cat-animation 0.25s steps(8) infinite;;
    -o-animation: walk-cat-animation 0.25s steps(8) infinite;;
    animation: walk-cat-animation 0.25s steps(8) infinite;
    border-radius: 8px;
    border: 1px solid #9e6c20;
}

@-webkit-keyframes walk-cat-animation {
    100% { background-position: -1200px;}
}
@-moz-keyframes walk-cat-animation {
    100% { background-position: -1200px;}
}
@-o-keyframes walk-cat-animation {
    100% { background-position: -1200px;}
}
@keyframes walk-cat-animation {
    100% { background-position: -1200px;}
}

.walk-cat-animation.reverse {
    background-position: -1200px;
    -webkit-animation: walk-cat-animation-reverse 0.25s steps(8) infinite;
    -moz-animation: walk-cat-animation-reverse 0.25s steps(8) infinite;
    -o-animation: walk-cat-animation-reverse 0.25s steps(8) infinite;
    animation: walk-cat-animation-reverse 0.25s steps(8) infinite;
}

@-webkit-keyframes walk-cat-animation-reverse {
    100% { background-position: 0;}
}
@-moz-keyframes walk-cat-animation-reverse {
    100% { background-position: 0;}
}
@-o-keyframes walk-cat-animation-reverse {
    100% { background-position: 0;}
}
@keyframes walk-cat-animation-reverse {
    100% { background-position: 0;}
}



#shelf-control {
    position: relative;
    z-index: 2;
}
.shelf-result {
    position: relative;
    display:inline-block;
    margin: 0 auto;
}
.shelf-result {

}
.shelf-left-describe,
.shelf-right-describe {
    position: absolute;
    color: #C79902;
    font-size: 35px;
    font-family: "Cuprum", sans-serif;
    bottom: 3px;
    left: 1px;
    width: 45%;
    line-height: 1;
}
.shelf-right-describe {
    left: auto;
    right: 1px;
}
@media only screen and (max-width: 480px) {
    .shelf-left-describe,
    .shelf-right-describe {
        font-size: 20px;
    }
}

.shelf-left-container,
.shelf-right-container {
    position: absolute;
    z-index: 1;
    bottom: 47%;
    left: 3px;
    width: 45%;
    line-height: 0.8;
}
.shelf-right-container {
    left: auto;
    right: 3px;
}
.shelf-element {
    margin: 3px;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#shelf-control .shelf-element {
    margin: -3px 3px 6px;
}
.shelf-result .shelf-element {
    margin: 1px;
}
.shelf-result {
    max-width: 500px;
}
@media only screen and (max-width: 480px) {
    .shelf-result {
        max-width: 100%;
    }
    .shelf-result .shelf-element {
        padding: .1rem .4rem .1rem;
    }
}
#shelf-finish {
    display: none;
}



/* Money */

.clock-animation {
    position: relative;
    border-radius: 5px;
}

.pause-animation {
    -webkit-animation-play-state: paused !important;
    -moz-animation-play-state: paused !important;
    -ms-animation-play-state: paused !important;
    -o-animation-play-state: paused !important;
    animation-play-state: paused !important;
}

.clock-empty,
.clock-hand {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 70px;
}
.clock-hand-hour {
    -webkit-animation-name: spin-hour;
    -webkit-animation-duration: 3000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin-hour;
    -moz-animation-duration: 3000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin-hour;
    -ms-animation-duration: 3000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin-hour;
    animation-duration: 3000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    animation-fill-mode: forwards;

}

.clock-hand-minute {
    -webkit-animation-name: spin-minute;
    -webkit-animation-duration: 600ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin-minute;
    -moz-animation-duration: 600ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin-minute;
    -ms-animation-duration: 600ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin-minute;
    animation-duration: 600ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin-hour {
    from { transform: rotate(120deg); } to { transform: rotate(480deg); }
}
@-webkit-keyframes spin-hour {
    from { -webkit-transform: rotate(120deg); } to { -webkit-transform: rotate(480deg); }
}
@-moz-keyframes spin-hour {
    from { -moz-transform: rotate(120deg); } to { -moz-transform: rotate(480deg); }
}
@-ms-keyframes spin-hour {
    from { -ms-transform: rotate(120deg); } to { -ms-transform: rotate(480deg); }
}

@keyframes spin-minute {
    from { transform: rotate(-150deg); } to { transform: rotate(210deg); }
}
@-webkit-keyframes spin-minute {
    from { -webkit-transform: rotate(-150deg); } to { -webkit-transform: rotate(210deg); }
}
@-moz-keyframes spin-minute {
    from { -moz-transform: rotate(-150deg); } to { -moz-transform: rotate(210deg); }
}
@-ms-keyframes spin-minute {
    from { -ms-transform: rotate(-150deg); } to { -ms-transform: rotate(210deg); }
}


#income-active {
    background-image: url('/img/main/lifemap/money/income-active-sprite.png');
    background-repeat: no-repeat;
    width: 320px;
    height: 237px;
    /*-webkit-animation: income-active-animation 0.25s steps(11) infinite;;*/
    /*-moz-animation: income-active-animation 0.25s steps(11) infinite;;*/
    /*-o-animation: income-active-animation 0.25s steps(11) infinite;;*/
    /*background-position: -3520px;*/
    /*background-position: -3520px;*/
    /*background-position: 0px;*/
    background-position: -3200px;
    /*animation: income-active-animation 2500ms steps(11) infinite;*/
    border-radius: 5px;
    border: 1px solid whitesmoke;
}
#income-passive {
    background-image: url('/img/main/lifemap/money/income-passive-sprite.png');
    width: 320px;
    height: 237px;
    background-position: -1920px;
    animation: income-passive-animation 1500ms steps(6) infinite;
    border-radius: 5px;
    border: 1px solid whitesmoke;
}

/*@-webkit-keyframes income-active-animation {*/
/*    0% { background-position: 0;}*/
/*    100% { background-position: -3520px;}*/
/*}*/
/*@-moz-keyframes income-active-animation {*/
/*    100% { background-position: -3520px;}*/
/*}*/
/*@-o-keyframes income-active-animation {*/
/*    100% { background-position: -3520px;}*/
/*}*/
@keyframes income-active-animation {
    0% { background-position: -3200px;}
    5% { background-position: -2880px;}
    /*50% { background-position: -3520px;}*/
    90% { background-position: 0;}
    100% { background-position: -3200px;}
    /*100% { background-position: -3520px;}*/
}

@keyframes income-passive-animation {
    0% { background-position: 0;}
    100% { background-position: -1920px;}
}



/* JOB */
.employees-container {
    display: block;
    margin: 0 auto;
    width: 310px;
    height: 200px;
    position: relative;
    overflow: hidden;
}
.employees-container .backside {
    position: absolute;
    height: 72px;
    width: 310px;
    bottom: -13px;
}
.employees-container .frontside {
    position: absolute;
    height: 72px;
    width: 310px;
    bottom: -13px;
}
.employees-container .characters {
    position: absolute;
    bottom: 10px;
    width: 310px;
}
.employees-container .characters img {
    display: inline-block;
    -moz-transition: height 1.2s ease-in-out;
    -webkit-transition: height 1.2s ease-in-out;
    -o-transition: height 1.2s ease-in-out;
    transition: height 1.2s ease-in-out;
}
.employees-container .characters img.self,
.employees-container .characters img.boss {
    position: absolute;
    bottom: 0;
    left: 150px;
    height: 120px;
    display: none;
}
.employees-container .characters img.boss {
    left: 100px;
    display: none;
}
.employees-container .characters img.staff {
    position: absolute;
    bottom: 0;
    height: 100px;
}
.employees .control {
    margin: 15px auto;
    border-radius: 6px;
    overflow: hidden;
    width: 200px;
    position: relative;
    font-size: 20px;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.employees .control .count {
    line-height: 50px;
    width: 100px;
    height: 50px;
    margin-left: 50px;
    color: #555;
    text-align: center;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}
.employees .control .plus,
.employees .control .minus {
    top: 0;
    right: 0;
    position: absolute;
    width: 50px;
    height: 50px;
    background: linear-gradient(rgba(40,167,69, 0.5), rgba(40,167,69, 0.6));
    color: white;
    line-height: 48px;
    text-align: center;
    cursor: pointer;
    text-shadow: 1px 1px 1px #666;
}
.employees .control .plus:hover,
.employees .control .minus:hover {
    opacity: 0.8;

    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}
.employees .control .minus {
    background: linear-gradient(rgba(255, 117, 80, 0.8), rgba(255, 117, 80, 1));
    left: 0;
}
.employees-button {
    margin-top: 12px;
    visibility: hidden;
}



.team .container,
.team-assessment .container {
    display: block;
    margin: 0 auto;
    width: 310px;
    height: 310px;
    position: relative;
}
.team-assessment .container {
    transform: scale(0.75);
    transform-origin: left top;
    margin-bottom: -80px;
}
.team .container svg,
.team-assessment .container svg {
    position: absolute;
    top: 0;
    left: 0;
}
.team .person,
.team-assessment .person {
    height: 60px;
    width: 60px;
    background: lightblue;
    border-radius: 50%;
    position: absolute;
    margin-left:-30px;
    margin-top:-30px;
    -webkit-transition: 0.7s ease-in-out;
    -moz-transition: 0.7s ease-in-out;
    -o-transition: 0.7s ease-in-out;
    transition: 0.7s ease-in-out;
}
.team .person .crop,
.team-assessment .person .crop {
    overflow: hidden;
    height: 60px;
    width: 60px;
    border-radius: 50%;
}
.team-assessment .person .assessment {
    position: absolute;
    top:-15px;
    left: 4px;
}
.team-assessment .person .assessment img {
    height: 15px;
}
.team .person.self,
.team-assessment .person.self {
    background: none;
}
.team .person.staff,
.team-assessment .person.staff {
    display: none;
    top: 155px;
    left: 155px
}
.team .person.boss,
.team-assessment .person.boss {
    background: #a3d39c;
}
.team .person .crop img,
.team-assessment .person .crop img {
    margin-left: 10px;
    height: 140px;
}
.team .person.highlight,
.team-assessment .person.highlight {
    background: #00F2FE !important;
}
.team .container svg,
.team-assessment .container svg {
    height: 310px;
    width: 310px;
}
.team .container svg.highlight line,
.team-assessment .container svg.highlight line {
    stroke: #00F2FE !important;
    stroke-width: 3 !important;;
}
.team .container svg line,
.team-assessment .container svg line {

    -webkit-transition: 0.7s ease-in-out;
    -moz-transition: 0.7s ease-in-out;
    -o-transition: 0.7s ease-in-out;
    transition: 0.7s ease-in-out;

    stroke: #c4f5df;
    stroke-width: 1;
}
.team .control {
    margin: 10px auto;
    border-radius: 6px;
    overflow: hidden;
    width: 200px;
    position: relative;
    font-size: 20px;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.team .control .count {
    line-height: 50px;
    width: 100px;
    height: 50px;
    margin-left: 50px;
    color: #555;
    text-align: center;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}
.team .control .plus,
.team .control .minus {
    top: 0;
    right: 0;
    position: absolute;
    width: 50px;
    height: 50px;
    background: linear-gradient(rgba(40,167,69, 0.5), rgba(40,167,69, 0.6));
    color: white;
    line-height: 48px;
    text-align: center;
    cursor: pointer;
    text-shadow: 1px 1px 1px #666;
}
.team .control .plus:hover,
.team .control .minus:hover {
    opacity: 0.8;

    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}
.team .control .minus {
    background: linear-gradient(rgba(255, 117, 80, 0.8), rgba(255, 117, 80, 1));
    left: 0;
}
.team-button {
    margin-top: 12px;
    visibility: hidden;
}

.team-members {
    text-align: center;
    min-height: 500px;
}
.team-member {
    display: none;
    position: relative;
    text-align: left;
    max-width: 450px;
    margin: 0 auto;
    min-height: 400px;
    background-repeat: no-repeat;
    background-position: center center;
}
.team-member.first {
     display: inline-block;
 }
.team-member ul {
    list-style: none;
    margin-bottom: 2px;
}
.team-member.result ul {
    list-style: circle;
    margin-bottom: 10px;
}
.team-member .choose {
    margin-bottom: 0;
    text-align: center;
}
.team-member .choose .button.warning {
    margin-top: 8px;
}
.team-member .choose img {
    height: 15px;
    position: relative;
}
.team-member .choose img:hover {
    opacity: 1;
}
.team-member .choose .button.tiny {
    padding-left: 12px;
    padding-right: 12px;
    margin-right: 5px;
}
.team-member .button {
    margin-bottom: 0;
}



.workweek-calendar {
    width: 310px;
    margin: 15px auto;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.workweek-calendar td {
    padding: 1px;
    width: 44px;
    height: 44px;
}
.workweek-calendar span:not(.empty) {
    opacity: 0.8;
    cursor: pointer;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 16px;
    padding-top: 10px;
    color: white;
    text-align: center;
    display: inline-block;
    font-family: sans-serif;

    -moz-transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.workweek-calendar .workday {
    background-color: #95c600;
}
.workweek-calendar .day-off {
    background-color: #f25d37;
}
.workweek-calendar td.weekend {
    background-color: #ffe4de;
}
.workweek-calendar td.weekend-even {
    background-color: #fceae6;
}
.workweek-calendar th.weekend {
    color: #f25d37;
}
.workweek-calendar .workdays {
    font-style: normal;
}
.workweek-button {
    margin-top: 12px;
    visibility: hidden;
}



.transport .container {
    display: block;
    margin: 0 auto;
    width: 310px;
    height: 235px;
    position: relative;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-transition: height 0.7s ease-in-out;
    -moz-transition: height 0.7s ease-in-out;
    -o-transition: height 0.7s ease-in-out;
    transition: height 0.7s ease-in-out;
}
.transport .door {
    position: absolute;
    top: 0;
    left: 80px;
    height: 150px;
    width: 150px;
    cursor: pointer;
}
.transport .self {
    position: absolute;
    top: 0;
    left: 120px;
    width: 140px;
    cursor: pointer;
}
.transport .self img {
    margin-top: 20px;
    max-height: 130px;
}
.transport .path {
    position: absolute;
    top: 135px;
    width: 310px;
    height: auto;
    left: 0;
}
.transport .path.pos-2 {
    top: 205px;
}
.transport .path.pos-3 {
    top: 275px;
}
.transport .path.pos-4 {
    top: 345px;
}
.transport .path.pos-5 {
    top: 415px;
}
.transport .stop {
    position: absolute;
    z-index: 2;
    top: 185px;
    width: 60px;
    height: 60px;
    left: 125px;
    cursor: pointer;
}
.transport .stop.pos-2 {
    top: 255px;
}
.transport .stop.pos-3 {
    top: 325px;
}
.transport .stop.pos-4 {
    top: 395px;
}
.transport .stop.pos-5 {
    top: 470px;
}
.transport .text {
    position: absolute;
    top: 195px;
    color: coral;
    font-size: 22px;
    left: 130px;
    font-family: 'Cuprum', 'Arial', 'sans-serif';
    display: none;
}
.transport .text.pos-2 {
    top: 260px;
    left: 75px;
}
.transport .text.pos-3 {
    top: 335px;
}
.transport .text.pos-4 {
    top: 405px;
    left: 75px;
}
.transport .text.pos-5 {
    top: 475px;
}
.transport-stops img {
    width: 100px;
    height: 100px;
    margin: 5px;
}
@media only screen and (max-width: 480px) {
    .transport-stops img {
        width: 75px;
        height: 75px;
        margin: 4px;
    }
}
.transport-stops a.hidden {
    opacity: 0;
    cursor: default;

    -webkit-transition: 0.7s ease-in-out;
    -moz-transition: 0.7s ease-in-out;
    -o-transition: 0.7s ease-in-out;
    transition: 0.7s ease-in-out;
}
.transport-button {
    margin-top: 12px;
    visibility: hidden;
    margin-bottom: 15px;
}



.salary-grow {
    position: relative;
    height: 300px;
    width: 315px;
    margin: 10px auto;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.salary-grow .variant {
    position: absolute;
    display: inline-block;
    bottom: 0;
    padding-top: 5px;
    width: 44px;
    color: white;
    font-size: 15px;
    text-shadow: 1px 1px #333333;
    text-align: center;
    font-family: "Helvetica", "sans-serif";
}
.salary-grow .variant:hover {
    opacity: 0.8;
}
.salary-grow .variant:nth-child(1) {
    left: 0;
    height: 30px;
    background-color: #ff6f69;
    background: #fff radial-gradient(ellipse at left top, rgba(255,111,105,0.7) 0%, rgba(255,111,105,1) 100%);
}
.salary-grow .variant:nth-child(2) {
    left: 52px;
    height: 50px;
    background-color: #ffcc5c;
    background: #fff radial-gradient(ellipse at left top, rgba(255,204,92,0.7) 0%, rgba(255,204,92,1) 100%);
}
.salary-grow .variant:nth-child(3) {
    left: 104px;
    height: 70px;
    background-color: #ffeead;
    background: #fff radial-gradient(ellipse at left top, rgba(255,238,173,0.7) 0%, rgba(255,238,173,1) 100%);
}
.salary-grow .variant:nth-child(4) {
    left: 156px;
    height: 100px;
    background-color: #add8e6;
    background: #fff radial-gradient(ellipse at left top, rgba(173,216,230,0.7) 0%, rgba(173,216,230,1) 100%);
}
.salary-grow .variant:nth-child(5) {
    left: 208px;
    height: 200px;
    background-color: #aaceb4;
    background: #fff radial-gradient(ellipse at left top, rgba(170,206,180,0.7) 0%, rgba(170,206,180,1) 100%);
}
.salary-grow .variant:nth-child(6) {
    left: 260px;
    height: 300px;
    background-color: #88d8b0;
    background: #fff radial-gradient(ellipse at left top, rgba(136,216,176,0.7) 0%, rgba(136,216,176,1) 100%);
}

@media only screen and (min-width: 480px) {
    .salary-grow {
        width: 470px;
    }
    .salary-grow .variant {
        width: 70px;
    }
    .salary-grow .variant:nth-child(2) {
        left: 80px;
    }
    .salary-grow .variant:nth-child(3) {
        left: 160px;
    }
    .salary-grow .variant:nth-child(4) {
        left: 240px;
    }
    .salary-grow .variant:nth-child(5) {
        left: 320px;
    }
    .salary-grow .variant:nth-child(6) {
        left: 400px;
    }
}

.loyalty-gradient .color6 {
    background-color: #ff6f69;
    background: #fff radial-gradient(ellipse at left top, rgba(255,111,105,0.7) 0%, rgba(255,111,105,1) 100%);
}
.loyalty-gradient .color5 {
    background-color: #ffcc5c;
    background: #fff radial-gradient(ellipse at left top, rgba(255,204,92,0.7) 0%, rgba(255,204,92,1) 100%);
}
.loyalty-gradient .color4 {
    background-color: #ffeead;
    background: #fff radial-gradient(ellipse at left top, rgba(255,238,173,0.7) 0%, rgba(255,238,173,1) 100%);
}
.loyalty-gradient .color3 {
    background-color: #add8e6;
    background: #fff radial-gradient(ellipse at left top, rgba(173,216,230,0.7) 0%, rgba(173,216,230,1) 100%);
}
.loyalty-gradient .color2 {
    background-color: #aaceb4;
    background: #fff radial-gradient(ellipse at left top, rgba(170,206,180,0.7) 0%, rgba(170,206,180,1) 100%);
}
.loyalty-gradient .color1 {
    background-color: #88d8b0;
    background: #fff radial-gradient(ellipse at left top, rgba(136,216,176,0.7) 0%, rgba(136,216,176,1) 100%);

}
.loyalty-gradient .button:hover {
    opacity: 0.8;

    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}