/* action page */

.main {
    position: relative;
    height: 100vh;
    overflow: hidden;
}
.i-container {
    position: fixed;
    width: 100%;
    height: calc(100vh - 140px);
    padding: 30px 30px 90px 30px;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 100%;
    z-index: 10;
}
.b-holder {
    overflow: hidden;
}
.b-holder--image {
    background: #ffc000;
    padding: 0;
}
.b-data {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.b-data__item {
    padding: 0;
    font-size: 0;
    height: 70px;
}
.b-data__name {
    display: inline-block;
    line-height: 70px;
    font-size: 16px;
    margin-top: 0;
}
.b-data__value {
    position: relative;
    top: auto;
    right: auto;
    display: inline-block;
    margin-left: 16px;
    font-size: 18px;
}
.b-params {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 50px 0 0 0;
}
.b-params__item {
    margin-bottom: 50px;
    overflow: hidden;
}
.b-params__name {
    display: inline-block;
    color: #b5b5b5;
    font-size: 1.2em;
    line-height: 1;
}
.b-params__value {
    display: inline-block;
    margin: 0 0 0 16px;
    color: #009688;
    font-size: 1.6em;
}
.b-button {
   bottom: 16px;
    top: auto;
}
.b-data__input-holder {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 25px;
}
.b-fake {
    position: absolute;
    bottom: 50px;
    height: 2px;
    width: calc(100% - 60px);
    left: 50%;
    transform: translateX(-50%);
    background: #bebebe;
    z-index: 10;
}
.b-fake__overlay {
    position: absolute;
    top: 0;
    height: 2px;
    width: 0;
    left: 0;
    background: #009688;
    transition: width .7s ease;
}
.b-point {
    position: absolute;
    left: 0;
    top: -2px;
    height: 7px;
    width: 7px;
    border-radius: 50%;
    background: #b0b0b0;
    z-index: 50;
    display: none;
}
.b-months {
    display: grid;
    position: absolute;
    top: 10px;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(12, 1fr);
    justify-content: space-between;
}
.b-months__item {
    font-size: 0.8em;
    color: #b0b0b0;
}
.b-months__item--last {
    text-align: right;
}

/* classes added with js */
.js-done {
    background: #009688;
}
.js-current {
    left: 0;
    z-index: 100;
    transition: left 0.3s ease;
}
.js-next {
    left: 100%;
}
.js-hidden {
    display: none;
}
/* customize for material design elements */
.mdl-slider {
    margin: 0 0 0 1px;
}
.mdl-slider__background-flex {
    margin: 0 55px;
}
.mdl-button--accent.mdl-button--accent.mdl-button--raised {
    font-size: 1.1em;
    width: calc(100% - 32px);
    left: 50%;
    transform: translateX(-50%);
}
.mdl-slider.is-upgraded::-webkit-slider-thumb{
    background: #009688;
    height: 60px;
    width: 60px;
}
.mdl-slider.is-upgraded::-moz-range-thumb{
    background: #009688;
    height: 60px;
    width: 60px;
}
.mdl-slider.is-upgraded.is-lowest-value:active+.mdl-slider__background-flex>.mdl-slider__background-upper {
    left: 0;
}
.mdl-slider {
    width: 100%;
}
.mdl-slider.is-upgraded:active::-webkit-slider-thumb{
    -webkit-transform: none;
    transform: none;
}
.mdl-slider.is-upgraded:active::-moz-range-thumb{
    transform: none;
}
/* end of action page */

/* result page */
.i-container--result {
    position: relative;
    grid-template-columns: 2fr 1fr;
}
.b-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.b-subtitle {
    position: relative;
    color: #b5b5b5;
    font-size: 1.2em;
    line-height: 1;
    margin-top: 12px;
}
.b-params__value--red {
    color: #d15757;
}
.b-params__value--yellow {
    color: #d9b439;
}
.i-container--result .b-params__item {
    overflow: hidden;
}
.b-line {
    position: relative;
    height: 4px;
    width: 100%;
    margin-top: 16px;
    background: #bdbdbd;
}
.b-line__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: #009688;
    z-index: 10;
}
.b-line__point {
    position: absolute;
    top: 0;
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background: #000;
    z-index: 30;
}
.b-line__point--first {
    left: 0;
}
.b-line__point--second {
    left: calc(20% - 4px);
}
.b-line__point--third {
    left: calc(40% - 4px);
}
.b-line__point--fourth {
    left: calc(60% - 4px);
}
.b-line__point--fifth {
    left: calc(80% - 4px);
}
.b-line__point--sixth {
    left: auto;
    right: 0;
}
.b-impact {
    position: relative;
    display: block;
    padding: 0;
    margin: 5px 0 0 0;
    overflow: hidden;
}
.b-impact__item {
    position: relative;
    margin-top: 5px;
    padding-right: 70px;
    box-sizing: border-box;
}
.b-impact__text {
    color: #b5b5b5;
    font-size: 0.9em;
    line-height: 1;
}
.b-impact__value {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.9em;
    color: #d15757;
}
.b-data__impact--money:before {
    content: '$ ';
}
.b-data__impact--percent:after {
    content: '%';
}
 .b-total {
     position: relative;
     display: grid;
     align-content: start;
     height: calc(100% - 50px);
     margin: 0;
     padding: 0;
     overflow-y: scroll;
 }
 .b-total__item {
     margin-top: 20px;
 }
 .b-total__text {
     display: inline-block;
     font-size: 1em;
     line-height: 1;
     color: #000;
 }
 .b-total__text--dots:after {
     content: ':'
 }
.b-total__holder {
    display: block;
    position: relative;
}
 .b-total__result {
     display: inline-block;
     font-size: 0.7em;
     line-height: 1;
     color: #d15757;
 }
 .b-total__result--comma:after {
     content: ',';
 }
/* customize for material design elements */
.i-container--result .mdl-button--accent.mdl-button--accent.mdl-button--raised {
    width: 100%;
    bottom: 0;
}
/* end of result page */



.b-holder--image {
    position: relative;
    background-color: transparent;
}
.image-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.image-tillage-bg {
    background-image: url(../img/actions/tillage-bg-tablet.png);
    z-index: 0;
}
.image-tillage-trees {
    background-image: url(../img/actions/tillage-tractor-trees-tablet.png);
    background-repeat: repeat-x;
    animation: tillage-tractor-trees infinite linear;
    animation-duration: 120s;
}
@keyframes tillage-tractor-trees {
    0%   {  background-position: 0px;    }
    100%   {  background-position: -1441px;    }
}

.image-tillage-tractor {
    background-image: url(../img/actions/tillage-tractor-tablet.png);
    animation: tillage-tractor-shake infinite;
    animation-duration: 0.7s;
}
@keyframes tillage-tractor-shake {
    0%   {  top: 0px;    }
    50%   {  top: 2px;    }
    100%   {  top: 0px;    }
}


.image-tillage-tractor-wheel {
    background-image: url(../img/actions/tillage-tractor-wheels-1.png);
    animation: tillage-tractor-wheel infinite;
    animation-duration: 1s;
}
@keyframes tillage-tractor-wheel {
    0%   {  background-image: url(../img/actions/tillage-tractor-wheels-1.png);    }
    12%   {  background-image: url(../img/actions/tillage-tractor-wheels-2.png);    }
    24%   {  background-image: url(../img/actions/tillage-tractor-wheels-3.png);    }
    36%   {  background-image: url(../img/actions/tillage-tractor-wheels-4.png);    }
    48%   {  background-image: url(../img/actions/tillage-tractor-wheels-5.png);    }
    60%   {  background-image: url(../img/actions/tillage-tractor-wheels-6.png);    }
    72%   {  background-image: url(../img/actions/tillage-tractor-wheels-7.png);    }
    84%   {  background-image: url(../img/actions/tillage-tractor-wheels-8.png);    }
    96%   {  background-image: url(../img/actions/tillage-tractor-wheels-9.png);    }
    100%   {  background-image: url(../img/actions/tillage-tractor-wheels-1.png);    }
}
.image-tillage-plough {
    top: -39px;
    background-image: url(../img/actions/tillage-plough-tablet.png);
    animation: tillage-plough-shake infinite;
    animation-duration: 0.7s;
}
@keyframes tillage-plough-shake {
    0%   {  transform: rotate( 0deg );    }
    50%   {  transform: rotate( 0.5deg );    }
    100%   {  transform: rotate( 0deg );   }
}
.image-seeding-tractor-wheels {
    background-image: url(../img/actions/seeding-bg-tires.png);
    background-repeat: repeat;
    background-position: center 0;
    animation: seeding-tractor-tires infinite linear;
    animation-duration: 30s;
}
@keyframes seeding-tractor-tires {
    100%   {  background-position: center -515px;    }
}
.image-seeding-bg {
    background-image: url(../img/actions/seeding-bg-tablet.png);
}
.image-seeding-tractor {
    background-image: url(../img/actions/seeding-tractor-tablet.png);
}
.image-seeding-bar {
    background-image: url(../img/actions/seeding-bar-tablet.png);
    top: 0px;
}
.image-spraying-tractor-wheels {
    background-image: url(../img/actions/spraying-bg-tires.png);
    background-repeat: repeat;
    background-position: center 0;
    animation: spraying-tractor-tires infinite linear;
    animation-duration: 30s;
}
@keyframes spraying-tractor-tires {
    100%   {  background-position: center -515px;    }
}
.image-spraying-bg {
    background-image: url(../img/actions/spraying-bg-tablet.png);
}
.image-spraying-tractor {
    background-image: url(../img/actions/spraying-tractor.png);
}
.image-spraying-bar {
    background-image: url(../img/actions/spraying-bar.png);
}
.b-impact__holder {
    position: absolute;
    top: 0;
    right: 0;
}
.b-impact__holder .b-impact__value {
    position: relative;
    display: inline-block;
    top: auto;
    right: auto;
}
.b-holder--inner {
    position: absolute;
    height: 100%;
    width: 100%;
}
.i-container--result .b-holder--transparent {
    z-index: 130;
}
.b-holder--inner {
    background: transparent;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100%;
    grid-column-gap: 32px;
    padding: 0;
}
.b-video {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}
.i-container--result .b-total__item {
     display: none;
 }
.b-total__item.js-visible {
    display: block;
}
.i-container--result .b-wrapper {
    position: relative;
    width: 100%;
    height: calc(100% - 70px);
    overflow-y: scroll;
    display: grid;
    align-content: flex-end;
}
.b-data__name--link {
    text-decoration: none;
}
.b-menu .b-data {
    display: grid;
    margin-top: 0;
    grid-template-rows: 1fr 1fr;
}
.b-menu .b-data__image {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.b-menu .b-data__item {
    padding-left: 44px;
    height: 77px;
    font-size: inherit;
}
.b-menu .b-data__name {
    display: block;
    line-height: 77px;
    font-size: 1.1em;
    margin-top: 0;
    color: #bdbdbd;
}