.btn-nonew {
    font-size: 14px; color: #000; font-style: italic;
}
#btn-next {
    width: 50px; height: 200px; background: #202e57 url(../img/_layout/btn-next.png) center center no-repeat;
    position: fixed; right: 0px; top: 50%; transform: translate(0%, -50%); background-size: 20px;
}
#brewer-ok {
    width: 20px; height: 20px; border-radius: 100%;
    border: 3px solid green; float: right; margin-top: 12px;
    display: none;
}
.indicate {
    position: absolute; bottom: 20px; left: 20px; font-size: 12Px;
}
#brewer-ok.show {
    display: block;
}
#btn-prev {
    width: 50px; height: 200px; background: #202e57 url(../img/_layout/btn-prev.png) center center no-repeat;
    position: fixed; left: 0px; top: 50%; background-size: 20px;
    transform: translate(0%, -50%);
}
#gotopage-wrap {
    position: fixed; left: 20px; font-size: 12px;
    background: #212e58; color: #FFF; padding: 5px 15px;
    border-radius: 0 0 8px 8px;
}
#slide-10 .btn-order {
    bottom: auto;
    top: 20px;
    color: orange;
    width: 180px;
    text-align: right;
    font-size: 28px;
}
#slide-6.no-barrel {
    opacity: 0;
}
#btn-gotopage.no-barrel option[value="6"] {
    display: none;
}
#wrapper.no-barrel .hide-barrel {
    display: none;
}
#wrapper {
    width: 1024px; height: 768px; position: fixed;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: #FFF; border: 1px solid #d0d0d0;
     background: #212F58;
    overflow: hidden; /*box-shadow: #00000024 0px 0px 3px;*/
}
#wrapper #corner-top-left {
    width: 247px; height: 155px; position: absolute; left: 0px;
    top: 0px; background: url('../img/_layout/corner-bubbles.svg') top left no-repeat;
    background-size: 247px auto; z-index: 9000;
}
#wrapper #corner-top-right {
    width: 580px; height: 430px; background: #000; background-size: cover;
    border-radius: 0 0 0 100%; -moz-border-radius: 0 0 0 100%; -webkit-border-radius: 0 0 0 100%;
    position: absolute; right: -580px; top: 0px; z-index: 999; overflow: hidden;
}
#wrapper #background {
    width: calc(100% - 0px); height: 768px;
    position: absolute; left: 0px; top: 0px; bottom: 0px;
    background: #FFF;
}
#wrapper #background::after {
    content: ''; width: 370px; height: 768px;
    top: 0px; bottom: 0px; position: absolute;
    background: #FFF; right: -370px;
    border-radius: 0 0 100% 0;
    -moz-border-radius: 0 0 100% 0;
    -webkit-border-radius: 0 0 100% 0;
}
#wrapper main {
    width: 1024px; height: 768px; position: absolute;
    left: 0px; right: 0px; top: 0px; bottom: 0px;
    overflow: hidden; white-space: nowrap; z-index: 9999;
}
#wrapper main .slide {
    width: 1024px; height: 768px;  overflow: hidden;
    display: inline-block; white-space: normal;
    position: relative;
}
#wrapper main .slide .main-txt-box {
    width: 480px; margin-top: 270px;
    margin-left: 80px;
}
#wrapper main .slide#slide-4 .main-txt-box {
    margin-top: 160px;
}
#wrapper main .slide .introduction {
    font-weight: 400; float: left; width: 100%; margin-bottom: 20px;
}
#slide-0 #login {
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    position: absolute; width: 300px;
}
#slide-0 #login label {
    color: #000; background: transparent; text-align: left;
    padding: 0px; font-weight: 200; font-family: 'Ubuntu';
}
#slide-0 #login .btn-action {
        padding: 10px;
    border-radius: 8px;
}
#btn-logout {
    position: fixed; right: 20px; font-size: 12px; background: #212e58; color: #FFF;
    padding: 5px 15px; border-radius: 0 0 8px 8px;
}
.save-select {
        height: 44px;
    background: #EDEDED;
    border-radius: 6px;
    border: none;
    padding: 15px;
    font-size: 18px;
    color: #212F58;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 20px;
    max-width: 100%;
}

/*///SLIDE 1*/
#slide-1 #logo {
    top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9);
    position: absolute; opacity: 0;
}
#slide-1.active #logo {
    opacity: 1; transform: translate(-50%, -50%) scale(1);
}

/*///SLIDE 2*/
#slide-2 {

}
.btn-order {
    font-size: 32px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    color: #ffffff;
    position: absolute;
    bottom: 20px;
    right: 20px;
}
#price-before {
    position: absolute; right: 20px; top: 20px; color: #FFF; text-align: right;
}
#price-before .total-sum-title {
    float: left; width: 100%; font-size: 12px;
}
#slide-5 .select-item {
    width: 200px; float: left; text-align: center;
    margin-right: 20px; margin-top: 10px;
}
#slide-5 .select-item .select-circle {
    width: 100%; padding-top: 100%; border-radius: 100%;
    background: #CECECE; margin-bottom: 10px;
    background-size: cover; background-position: center;
    background-repeat: no-repeat;
}
#slide-5 #calculate-box {
    position: absolute; right: 50px; bottom: 50px;
    width: 340px; height: 420px; border-radius: 16px;
    background: #192035; color: #FFF; padding: 20px 30px;
}
#slide-5 #calculate-box #calculate-barrel {
    width: 360px; float: left;
}
#slide-5 #calculate-box #calculate-barrel label {
    background: transparent; padding: 0px;
}
#slide-5 #calculate-box #calculate-barrel input {
    position: absolute;
}
#slide-5 #calculate-box.no-barrel {
    height: 300px; bottom: 100px;
}
#slide-5 #calculate-box.no-barrel #calculate-barrel {
    display: none;
}
#slide-5 #calculate-box #calculate-barrel .barrel {
    width: 130px; margin-right: 20px; height: 125px;
    background-color: #FFF; float: left; border-radius: 8px;

}
#slide-5 #calculate-box #calculate-barrel .barrel#barrel-1 {
    background: #FFF url('../img/_layout/btn-barrel-1.svg') center center no-repeat;
    background-size: 60px auto;
}
#slide-5 #calculate-box #calculate-barrel .barrel#barrel-2 {
    background: #FFF url('../img/_layout/btn-barrel-2.svg') center center no-repeat;
    background-size: 75px auto;
}

.slide-8 #review-numbers {
    width: 600px; float: left; margin-top: 20px;
}
.slide-8 #review-numbers .rev-num {
    width: 33.333%; float: left; text-align: left;
}
.slide-8 #review-numbers .rev-num span.r-n-1 {
    width: 100%; float: left; font-family: 'Ubuntu';
    font-size: 16px; color: #757575; letter-spacing: 0.03px; line-height: 18px;
}
.slide-8 #review-numbers .rev-num span.r-n-2 {
    float: left; width: 100%; font-family: 'Ubuntu';
    letter-spacing: 0.05px; line-height: 48.6px; font-size: 42px;
}
.slide-8 #review-numbers .rev-num span.r-n-3 {
    float: left; width: 100%;
}
.slide-8 #total-line {
    float: left; width: 100%; background: #E7553E;
    height: 140px; position: absolute; bottom: 150px;
    left: 0px; right: 0px; padding-left: 80px;
}

.slide-8 #total-line .total-row {
    float: left; width: 33.333%; color: #FFF;
}
#wrapper.no-barrel .slide-8 #total-line .total-row {
    width: 50%;
}
.slide-8 #total-line .total-row .total-img {
    width: 130px; text-align: center; float: left; margin-top: -35px;
}
.slide-8 #total-line .total-row .total-img img {
    height: 220px; width: auto;
}
.slide-8 #total-line .total-row .total-num {
    width: calc(100% - 130px); float: left; padding-top: 15px;
}
.slide-8 #total-line .total-row .total-num span.t-n-1 {
    color: #23100d; letter-spacing: 0.01px; line-height: 19px;
    font-size: 14px; float: left; width: 100%; font-weight: 200;
}
.slide-8 #total-line .total-row .total-num span.t-n-2 {
    float: left; width: 100%; font-family: 'Ubuntu';
    color: #FFF; letter-spacing: 0.05px; font-size: 36px;
}
.slide-8 #total-line .total-row .total-num span.t-n-3-headline {
    color: #23100d; letter-spacing: 0.01px; line-height: 19px;
    font-size: 12px; float: left; width: 100%; font-weight: 200;
}
.slide-8 #total-line .total-row .total-num .t-n-3-row {
    float: left; width: 50%;
}
.slide-8 #total-line .total-row#total {
    text-align: right; padding-right: 50px; padding-top: 27px;
    padding-bottom: 34px; background: #0C6233;
}
.slide-8 #total-line .total-row#total .total-sum-title {
    width: 100%; float: left; color: #B8E986;
}
.slide-8 #total-line .total-row#total .total-sum {
    float: left; width: 100%; font-family: 'Ubuntu';
    color: #FFF; letter-spacing: 0.05px; font-size: 48px;
}
.slide-8 #btn-options {
    position: absolute; right: 30px; top: 50px;
}
#wrapper main .slide#slide-8 .main-txt-box {
    margin-top: 220px;
}
#wrapper main .slide#slide-8 .main-txt-box span.item-price {
    width: 100%; float: left; font-family: 'Ubuntu';
    color: #212F58; letter-spacing: 0.05px; text-align: center;
    font-size: 36px;
}
#wrapper main .slide#slide-8 .main-txt-box span.item-price-caption {
    width: 100%; float: left; font-size: 13px; color: #212F58;
}

.info-grid {
    width: 100%; float: left; margin-top: 40px;
}
.info-grid .info-item {
    width: 33.33%; float: left; text-align: center;
}
.info-grid .info-item .info {
    float: left; width: 100%; font-size: 12px; margin-top: 10px;
}

.calculate-box {
    position: absolute; right: 00px; bottom: 00px; width: 420px;
    height: 420px; border-radius: 16px; color: #FFF;
}
.calculate-box.final {
    width: 250px; height: 350px; text-align: right; right: 40px;
}
.calculate-box.final .calculate-text {
    width: 100%;
}
.calculate-box .calculate-img {
    width: 156px; float: left; margin-right: 20px;
}
.calculate-box .calculate-img .calc-image {
    height: 300px;
}
.calculate-box .calculate-img .item-price {
    width: 100%; font-size: 36px; font-weight: 800;
    float: left; text-align: center; font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
}
.calculate-box .calculate-img .item-caption {
    font-size: 18px; width: 100%; font-weight: 400; float: left;
    text-align: center;
}
.calculate-box .calculate-img .item-price-caption {
    width: 100%; float: left; text-align: center;
}
.calculate-text {
    width: calc(100% - 176px); float: left;
    margin-top: 140px;
}
.calculate-text#circle-current {
    width: 150px; text-align: center; margin-left: 40px;
}
.calculate-text#circle-current #current-circle {
    width: 150px; height: 150px; border-radius: 100%;
    background: #FFF; margin-bottom: 15px;
}
.calculate-text .calc-percentage {
    float: left; width: 100%;  font-weight: 700;
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
}
.calculate-text .calc-percentage .calc {
    color: #E7553E;
}
.calculate-text .calc-percentage .calc .input {
    float: left; width: auto;
}
.calculate-text .calc-percentage .calc .input input {
    padding: 0px; float: left; color: #E7553E;
    background: none; font-weight: 800; width: 34px;
    font-family: 'Ubuntu', sans-serif; text-align: right;
}
.calculate-text .calc-amount {
    font-size: 46px; font-family: 'Ubuntu', sans-serif;
    float: left; width: 100%;  font-weight: 700;
}
.calculate-text .calc-price {
    color: #F28A17;
}

#total-line {
    position: absolute; left: 0px; bottom: 250px; height: 65px;
    background: #D0021B; width: 850px;
}
#total-line #total-budget {
    width: 550px; height: 65px; background: green; position: relative;
    float: left;
}
#total-line #total-budget::after {
    content: ''; position: absolute; right: 0px; height: 85px;
    width: 5px; background: #000; top: -12px;
}
#total-line .tot-label {
    top: -70px; right: -70px; position: absolute; width: 150px;
    text-align: center;
}
#total-line .tot-label .tot-txt {
    float: left; width: 100%; font-family: 'Ubuntu'; letter-spacing: 0.05px;
    line-height: 30px; font-size: 32px;
}
#total-line .tot-label .tot-info {
    font-size: 15px;
}
#total-line #total-budget #tot-budget-barrel {
    width: 75%; height: 65px; background: #78C822;
    text-align: center; padding-top: 20px; color: #FFF; float: left;
}
#total-line #total-budget #tot-budget-tray {
    width: 25%; height: 65px; float: left; text-align: center;
    padding-top: 20px; color: #FFF;
}
#total-line #total-budget #tot-euro {
    bottom: -30px; right: -70px; position: absolute; width: 150px;
    font-family: 'Ubuntu'; text-align: center;
}
#total-line #total-free {
    color: #FFF; width: 300px; float: left;
}
#total-line #total-free #total-for-free {
    width: 25%; height: 65px; float: left; text-align: left;
    padding-top: 20px; color: #FFF; background: #F5A623;
    white-space: nowrap; padding-left: 20px;
}
.barrel-tray-info {
    width: 50%; float: left; margin-top: 200px;
}
.barrel-tray-info img {
    height: 140px; width: auto; float: left; margin-right: 20px;
}
.barrel-tray-info span.info-count {
    width: 125px; float: left; font-family: 'Ubuntu';
    letter-spacing: 0.05px; line-height: 30px;
    font-size: 24px; margin-top: 40px;
}
.barrel-tray-info span.info-price {
    width: 125px; float: left; letter-spacing: 0.05px;
    line-height: 30px; font-size: 16px;
}
#slide-11.slide-8 #review-numbers {
    margin-bottom: 40px;
}
#wrapper main #slide-11 .main-txt-box {
    margin-top: 150px; margin-left: 200px; width: 600px;
}
span.calc-info-line {
    width: 100%; float: left; margin-bottom: 5px;
}
#order-page .date {
    float: right; font-size: 16px; margin-top: -30px; font-weight: 800;
}
#order-page .small {
    font-size: 14px;
}
#order-page h1 {
    margin-bottom: 40px;
}
#order-page table {
    float: left; width: 100%; margin-bottom: 40px;
}
#order-page h3 {
    font-family: 'Ubuntu', sans-serif; font-weight: 700; color: #777777; font-size: 22px;
}
#order-page .tbl-calc {
    font-size: 14px;
}
#order-page td.headline {
    font-weight: 800; font-size: 10px; text-decoration: underline;
}
#wrapper main .slide#slide-11 {
    overflow-y: scroll;
}
@media print {
    #gotopage-wrap,
    #btn-logout {
        display: none;
    }
    #wrapper,
    #wrapper main .slide#slide-11 {
        border: none; height: 1250px;
    }

}