* {
    font-family: 'Open sans', sans-serif;
    letter-spacing: 0.2px;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: #202020;
}

.auth {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 100;
    overflow: hidden;
}

.auth:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/app/images/background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    /*filter: blur(3px);*/
    z-index: 1;
    transition: all .8s ease-in-out;
    /*animation: design-background-in 60s ease-in-out infinite 0s;*/
}

.auth:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: all ease-in-out .8s;
}

.auth .auth-wrap {
    padding-top: 10%;
    position: relative;
    height: 100%;
    z-index: 3;
}

.auth .auth-loading {
    height: 0;
    overflow: hidden;
}

.auth .auth-smgtv-logo,
.auth .auth-schmetterling-tv {
    font-size: 0;
    margin-bottom: 25px;
}

.auth .auth-smgtv-logo img {
    max-width: 100%;
    max-height: 100%;
}

.auth .auth-smgtv-logo {
    transition: all ease-in-out .8s;
}

.auth .auth-input-wrap {
    position: relative;
    display: inline-block;
    z-index: 2;
    padding: 40px;
    background: #737578;
}

.auth #auth-form,
.auth #register-device {
    display: block;
    opacity: 1;
}

.auth #auth-form.is-hide,
.auth #register-device.is-hide {
    opacity: 0;
    display: none;
}

.auth #auth-form,
.auth .auth-schmetterling-tv {
    opacity: 1;
    transition: all ease-in-out .8s;
    visibility: visible;
}

.auth #auth-form input[type="text"] {
    display: block;
    background: white;
    font-size: 24px;
    padding: 25px;
    width: 480px;
    outline: none;
    color: #000;
    transition: all .2s ease-in-out;
    border: 3px solid white;
}

.auth #auth-form input[type="text"]:hover,
.auth #auth-form input[type="text"]:focus,
.auth #auth-form input[type="text"]:active {
    border: 3px solid black;
}

.auth #auth-form button:focus,
.auth #auth-form button:active,
.auth #register-device button:focus,
.auth #register-device button:active,
.auth-back:focus,
.auth-back:active {
    box-shadow: 0 0 20px 7px rgba(255, 255, 255, 0.6);
}

.auth #auth-form button,
.auth #register-device button,
.auth-back {
    display: block;
    z-index: 5;
    border: none;
    margin: 30px auto 0;
    background: white;
    color: #636263;
    width: 200px;
    line-height: 80px;
    text-align: center;
    font-weight: 700;
    cursor: pointer;
    font-size: 22px;
    outline: none;
    padding: 0;
    border-radius: 5px;
    letter-spacing: 4px;
}

.auth-back {
    width: 260px;
}

.auth .auth-msg {
    margin-top: 0;
    text-align: center;
    color: white;
    display: none;
    font-size: 120%;
}

.auth-text {
    display: none;
    position: absolute;
    bottom: 0;
    font-size: 18px;
    width: 100%;
    padding: 15px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    z-index: 2;
    text-shadow: 1px 1px black;
    transition: all ease-in-out .8s;
}

.register-text,
.exit-text {
    display: none;
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .7);
}

.register-text-wrap,
.exit-text-wrap {
    position: absolute;
    padding: 2%;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    top: 50%;
    left: 50%;
    width: 80%;
    max-width: 850px;
    transform: translateY(-50%) translateX(-50%);
    text-align: center;
}

#register-code {
    font-weight: bold;
    font-size: 310%;
    text-transform: uppercase;
    margin-top: 2%;
}

.register-text h2,
.exit-text h2 {
    font-size: 200%;
    margin: 0;
}

.exit-text h2 {
    margin-bottom: 10%;
}

.register-text h3 {
    font-size: 200%;
    margin: 2% 0 0 0;
}

.register-text .register-text-list {
    margin-top: 7%;
    font-size: 120%;
}

.register-back-wrap {
    text-align: right;
    margin-top: 4%;
}

.register-back-wrap button,
.exit-text button {
    display: inline-block;
    background: white;
    line-height: 240%;
    padding: 0 5%;
    color: rgba(0, 0, 0, 0.9);
    border: none;
    font-weight: bold;
    font-size: 140%;
    cursor: pointer;
    border-radius: 5px;
}

.exit-text-bottom {
    text-align: right;
    margin-top: 10%;
}

.exit-text button {
    min-width: 26%;
    margin-top: 2%
}

.register-back-wrap button:focus,
.register-back-wrap button:active,
.exit-text button:focus,
.exit-text button:active {
    border: none;
    outline: none;
    box-shadow: 0 0 20px 7px rgba(255, 255, 255, 0.6);
}

/*** START LOADING ***/
.auth.loading .auth-text {
    bottom: -100px;
}

.auth-loading {
    position: relative;
    margin: 0 auto;
    width: 100px;
    transition: all .3s ease-in-out;
}

.auth.loading .auth-loading {
    height: 20px;
}

.auth-loading .auth-loading-point:first-child {
    opacity: 0;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    transition: all .3s ease-in-out;
}

.auth-loading .auth-loading-point:nth-child(2) {
    opacity: 0;
    transition: all .3s ease-in-out;
}

.auth-loading .auth-loading-point:last-child {
    opacity: 0;
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    transition: all .3s ease-in-out;
}

.auth.loading .auth-loading .auth-loading-point:first-child {
    opacity: 1;
    transition-delay: 0.8s;
    animation: loading 1.5s ease-in-out infinite 0s;
}

.auth.loading .auth-loading .auth-loading-point:nth-child(2) {
    opacity: 1;
    transition-delay: 1.4s;
    animation: loading 1.5s ease-in-out infinite .5s;
}

.auth.loading .auth-loading .auth-loading-point:last-child {
    opacity: 1;
    transition-delay: 1.9s;
    animation: loading 1.5s ease-in-out infinite 1s;
}

.auth-loading-point,
.auth-loading-point:before,
.auth-loading-point:after {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50px;
}

.auth.loading:before {
    transform: scale(1.05);
}

.auth.loading #auth-form,
.auth.loading #register-device {
    opacity: 0;
    visibility: hidden;
}

.auth.loading .auth-schmetterling-tv {
    opacity: 0;
}

.auth.loading .auth-smgtv-logo {
    padding-top: 180px;
}

.auth.loading:after {
    opacity: 1;
}

.auth.loading .auth-msg {
    height: auto;
    margin-top: 25px;
}

/*** END LOADING ***/

.offers-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #e5e5e5;
    z-index: 1;
}

.offers-container-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/app/images/empty-background.jpg');
    background-position: center;
}

.offers-container .offer-item > div:not(.offer-elements) {
    transition: opacity .3s ease-in-out;
    opacity: 0;
}

.offers-container .offer-item.active > div:not(.offer-elements) {
    opacity: 1;
}

.offer-item:after {
    display: none;
    content: "";
    width: 50%;
    height: 10%;
    position: absolute;
    z-index: 1000;
    right: 2%;
    top: 3%;
    background: url('/app/images/schmetterling.png') no-repeat top right;
    background-size: contain;
}

.offer-item[data-design="5"]:after {
    display: none !important;
}

.offers-container .offer-item.active::after {
    /*display: block;*/
}

.offers-timeline {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    background: white;
    white-space: nowrap;
    overflow: hidden;
    height: 2px;
}

.offers-timeline .timeline-item {
    position: relative;
    display: inline-block;
    height: 20px;
    border-right: 2px solid black;
    overflow: hidden;
    cursor: pointer;
}

.offers-timeline .timeline-item:last-child {
    border-right: none;
}

.offers-timeline .timeline-item .timeline-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: black;
    opacity: .8;
}

/*********** ELEMENTS DEFAULT ***********/
.offer-item .offer-info .offer-qr canvas {
    height: 150px;
    vertical-align: middle;
}

.offer-item .offer-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    transform-origin: center center;
}

.offer-item.left {
    z-index: 15;
}

.offer-item .offer-element-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.7s ease-in-out;
    border: none;
}

.offer-item.right .offer-element-picture,
.offer-item.right .offer-element-video {
    /*left: 200% !important;*/
    opacity: 0;
}

.offer-item.left .offer-element-picture,
.offer-item.left .offer-element-video {
    /*left: -100% !important;*/
    opacity: 0;
}

.offer-item.active .offer-element-picture,
.offer-item.active .offer-element-video {
    opacity: 1;
}

.offer-item[data-design="1"] .block-hidden,
.offer-item[data-design="2"] .block-hidden,
.offer-item[data-design="3"] .block-hidden,
.offer-item[data-design="4"] .block-hidden,
.offer-item[data-design="5"] .block-hidden {
    display: none !important;
}

/**********************/
.offer-item[data-design="1"] .offer-elements .offer-element-picture {
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.7s ease-in-out;
    border: none;
}

.offer-item[data-design="1"] .offer-elements .offer-element-picture.is-show {
    opacity: 1;
}

/**********************/

.offer-item[data-design="2"] .offer-elements .offer-element-picture {
    background-size: cover;
    background-color: #ececec;
}

.offer-item[data-design="2"] .offer-element-picture:nth-child(1) {
    top: 33%;
    left: 4%;
    width: 23%;
    height: 29%;
    transform: rotate3d(0, 0, 1, -5deg);
    z-index: 1;
}

.offer-item[data-design="2"] .offer-element-picture:nth-child(2) {
    position: absolute;
    top: 6%;
    left: 15%;
    width: 25%;
    height: 31%;
    transform: rotate3d(0, 0, 1, -5deg);
    z-index: 5;
}

.offer-item[data-design="2"] .offer-element-picture:nth-child(3) {
    position: absolute;
    width: 34%;
    height: 42%;
    top: 23%;
    left: 31%;
    transform: rotate3d(0, 0, 1, -5deg);
    z-index: 5;
}

.offer-item[data-design="2"] .offer-element-picture:nth-child(4) {
    position: absolute;
    top: 14%;
    left: 58%;
    width: 23%;
    height: 29%;
    transform: rotate3d(0, 0, 1, -5deg);
    z-index: 5;
}

.offer-item[data-design="2"] .offer-element-picture:nth-child(5) {
    position: absolute;
    top: 35%;
    left: 71%;
    width: 25%;
    height: 31%;
    transform: rotate3d(0, 0, 1, -5deg);
    z-index: 2;
}

/**********************/

.offer-item[data-design="3"] .offer-elements .offer-element-picture {
    background-size: cover;
    background-color: #ececec;
}

.offer-item[data-design="3"] .offer-element-picture:nth-child(1) {
    top: 15%;
    left: 2%;
    width: 25%;
    height: 30%;
    transform: rotate3d(0, 0, 1, -5deg);
    z-index: 1;
}

.offer-item[data-design="3"] .offer-element-picture:nth-child(2) {
    position: absolute;
    top: 36%;
    left: 20%;
    width: 27%;
    height: 33%;
    transform: rotate3d(0, 0, 1, -5deg);
    z-index: 5;
}

.offer-item[data-design="3"] .offer-element-picture:nth-child(3) {
    position: absolute;
    width: 30%;
    height: 37%;
    top: 4%;
    left: 33%;
    transform: rotate3d(0, 0, 1, -5deg);
    z-index: 6;
}

.offer-item[data-design="3"] .offer-element-picture:nth-child(4) {
    position: absolute;
    top: 19%;
    left: 56%;
    width: 26%;
    height: 30%;
    transform: rotate3d(0, 0, 1, -5deg);
    z-index: 4;
}

.offer-item[data-design="3"] .offer-element-picture:nth-child(5) {
    position: absolute;
    top: 41%;
    left: 69%;
    width: 28%;
    height: 34%;
    transform: rotate3d(0, 0, 1, -5deg);
    z-index: 2;
}

/**********************/

.offer-item[data-design="4"] .offer-elements .offer-element-picture {
    background-size: cover;
    background-color: #ececec;
}

.offer-item[data-design="4"] .offer-element-picture:nth-child(1) {
    top: 34%;
    left: 5.5%;
    width: 25%;
    height: 32%;
    transform: rotate3d(0, 0, 1, 5deg);
    z-index: 1;
}

.offer-item[data-design="4"] .offer-element-picture:nth-child(2) {
    position: absolute;
    top: 18%;
    left: 29%;
    width: 23%;
    height: 27%;
    transform: rotate3d(0, 0, 1, 5deg);
    z-index: 2;
}

.offer-item[data-design="4"] .offer-element-picture:nth-child(3) {
    position: absolute;
    width: 34%;
    height: 41%;
    top: 40%;
    left: 34%;
    transform: rotate3d(0, 0, 1, 5deg);
    z-index: 4;
}

.offer-item[data-design="4"] .offer-element-picture:nth-child(4) {
    position: absolute;
    top: 18%;
    left: 56%;
    width: 24%;
    height: 30%;
    transform: rotate3d(0, 0, 1, 5deg);
    z-index: 5;
}

.offer-item[data-design="4"] .offer-element-picture:nth-child(5) {
    position: absolute;
    top: 45%;
    left: 72%;
    width: 23%;
    height: 30%;
    transform: rotate3d(0, 0, 1, 5deg);
    z-index: 5;
}

/*********** HOTEL RATING ***********/

.offer-category[] {
    font-size: 100%;
}

.offer-category span {
    font-family: 'icomoon';
    font-size: 200%;
    line-height: 100%;
    color: #ffd600;
    font-weight: normal;
}

.offer-category span:last-child {
    margin-right: 0;
}

.offer-item[data-design="5"] .offer-category[data-rating] {
    border: none;
    padding: 0;
    margin-left: -2%
}

.offer-item[data-design="5"] .offer-category[data-rating] + .offer-text {
    margin-top: 3%;
}

.offer-category span::before {
    content: "\e83a";
}

.offer-category span.half::before {
    content: "\e839";
}

.offer-category span.full::before {
    content: "\e838";
}

/*********** ANIMATIONS ***********/

@keyframes design-background-in {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes design-background-out {
    0% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes loading {
    0% {
        background: white;
    }
    33% {
        background: #727477;
    }
    66% {
        background: white;
    }
}

/*********** START OFFER DESIGN 1 ***********/
.offer-item[data-design="1"] .offer-element-picture {
    /*display: none;*/
}

.offer-item[data-design="1"].active:not([data-type="picture"]) .offer-background {
    animation: design-background-in 60s ease-in-out infinite 0s;
}

.offer-item[data-design="1"].left .offer-background {
    /*animation: design-background-out 2s ease-in-out 0s;*/
}

.offer-item[data-design="1"] {

}

.offer-item[data-design="1"].right .offer-subTitle,
.offer-item[data-design="1"].right .offer-title,
.offer-item[data-design="1"].left .offer-subTitle,
.offer-item[data-design="1"].left .offer-title {
    position: relative;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition-delay: .5s;
    transition: max-height 3s ease-in-out, padding-top 1s ease-in-out, padding-bottom 1s ease-in-out;
}

.offer-item[data-design="1"].active .offer-subTitle {
    padding-bottom: 10px;
}

.offer-item[data-design="1"].active .offer-title {
    padding-bottom: 20px;
}

.offer-item[data-design="1"].active .offer-subTitle,
.offer-item[data-design="1"].active .offer-title {
    padding-top: 10px;
    max-height: 500px;
    transition: max-height 3s ease-in-out, padding-top 1s ease-in-out, padding-bottom 1s ease-in-out;
}

.offer-item[data-design="1"].left .offer-info,
.offer-item[data-design="1"].right .offer-info {
    left: -500px;
    transition: left 1s ease-in-out;
}

.offer-item[data-design="1"].active .offer-info {
    left: 0;
    transition: left 1s ease-in-out;
}

.offer-item[data-design="1"] .offer-info {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 400px;
    padding: 250px 50px 50px;
    min-height: 00%;
    height: 2160px;
    background: white;
}

.offer-item[data-design="1"] .offer-info .offer-text {
    font-size: 36px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 30px;
}

.offer-item[data-design="1"] .offer-info .offer-info-item {
    color: #3d3d3d;
    font-size: 22px;
    margin-top: 10px;
    font-weight: bold;
}

.offer-item[data-design="1"] .offer-info .offer-info-item:before {
    content: "—";
    margin-right: 10px;
}

.offer-item[data-design="1"] .offer-info .offer-subTitle,
.offer-item[data-design="1"] .offer-info .offer-title {
    display: none;
}

.offer-item[data-design="1"] .offer-info .offer-qr {
    margin-top: 50px;
}

.offer-item[data-design="1"] .offer-name {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 3;
}

.offer-item[data-design="1"] .offer-title {
    background: #0160ad;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 52px;
    color: white;
    transform: skew(-8deg);
    overflow: hidden;
}

.offer-item[data-design="1"] .offer-title span {
    display: block;
    transform: skew(8deg);
}

.offer-item[data-design="1"] .offer-subTitle {
    display: inline-block;
    z-index: 3;
    background: #ffd600;
    color: #202020;
    font-size: 38px;
    padding-left: 20px;
    padding-right: 20px;
    transform: skew(-8deg);
    margin-left: 20px;
    margin-top: -15px;
    font-weight: bold;
    overflow: hidden;
}

.offer-item[data-design="1"] .offer-subTitle span {
    display: block;
    transform: skew(8deg);
}

/************ END OFFER DESIGN 1 ************/

/*********** START OFFER DESIGN 2 ***********/

.offer-item[data-design="2"] .offer-background {
    filter: blur(5px);
}

.offer-item[data-design="2"].active .offer-background {
    animation: design-background-in 60s ease-in-out infinite 0s;
}

.offer-item[data-design="2"].left .offer-background {
    /*animation: design-background-out 2s ease-in-out 0s;*/
}

.offer-item[data-design="2"].right .offer-info,
.offer-item[data-design="2"].left .offer-info {
    left: 14%;
    opacity: 0;
    transition: all 1s ease-in-out;
}

.offer-item[data-design="2"].active .offer-info {
    left: 15vw;
    opacity: 1;
    transition: all 1s ease-in-out;
}

.offer-item[data-design="2"].active .qr-hide .offer-info {
    left: 1vw;
}

.offer-item[data-design="2"] .offer-info {
    position: absolute;
    z-index: 2;
    bottom: 3%;
    width: calc(100% - 16vw);
    padding: 1%;
    background: rgba(1, 96, 173, 0.9);
    border-radius: 3px;
    min-height: 12.5vw;
    transition: left 2s ease-in-out;
}

.offer-item[data-design="2"] .qr-hide .offer-info {
    width: 98vw;
}

.offer-item[data-design="2"] .offer-info-block {
    height: 100%;
}

.offer-item[data-design="2"] .offer-info .offer-text {
    font-size: 200%;
    margin-top: .25%;
    color: white;
    clear: both;
}

.offer-item[data-design="2"] .offer-info .offer-subTitle {
    color: #ffd600;
    font-size: 175%;
    margin-bottom: .5%;
}

.offer-item[data-design="2"] .offer-info-list {
    line-height: 160%;
}

.offer-item[data-design="2"] .offer-info .offer-info-item:first-child:before {
    /*display: none;*/
}

.offer-item[data-design="2"] .offer-info .offer-info-item:before {
    content: "•";
    position: absolute;
    left: -3px;
}

.offer-item[data-design="2"] .offer-info .offer-info-item {
    display: inline-block;
    color: white;
    position: relative;
    padding: 0 1.5%;
    font-size: 110%;
}

.offer-item[data-design="2"] .offer-info .offer-qr canvas {
    height: auto;
    width: 100%;
    vertical-align: middle;
}

.offer-item[data-design="2"] .offer-info .offer-qr {
    position: absolute;
    left: -14vw;
    background: white;
    padding: .5%;
    width: 12.5vw;
    height: 12.5vw;
    top: 0;
    border-radius: 3px;
}

.offer-item[data-design="2"] .offer-info .offer-qr:after {
    display: none;
    content: "QR-code Scannen";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0px;
    font-size: 80%;
    color: #545454;
    background: #ececec;
    text-align: center;
    text-transform: uppercase;
    border-radius: 0 0 3px 3px;
}

.offer-item[data-design="2"] .offer-info .offer-title {
    display: inline-block;
    font-size: 120%;
    color: white;
    margin-right: 20px;
    text-transform: uppercase;
}

.offer-item[data-design="2"] .offer-info .offer-category {
    display: inline-block;
}

.offer-item[data-design="2"] .offer-name {
    display: none;
}

.offers-container .offer-item[data-design="2"] .offer-info .offer-category {
    display: none;
}

.offers-container .offer-item[data-design="2"] .offer-info .offer-text .offer-category {
    display: inline-block;
    font-size: 50%;
    transform: translateY(2px);
    margin-left: 1%;
}

.offer-item[data-design="2"] .offer-info-block .offer-item-number {
    position: absolute;
    left: -14vw;
    top: -19%;
    width: 12.5vw;
    border-radius: 3px;
    padding: .3% 0;
    transform: none;
    background: rgba(1, 96, 173, 0.9);
}

.offer-item[data-design="2"] .offer-info-block.qr-hide .offer-item-number {
    left: 0;
}

/************ END OFFER DESIGN 2 ************/

/*********** START OFFER DESIGN 3 ***********/

.offer-item[data-design="3"] .offer-background {
    filter: blur(5px);
}

.offer-item[data-design="3"].active .offer-background {
    animation: design-background-in 60s ease-in-out infinite 0s;
}

.offer-item[data-design="3"].left .offer-background {
    /*animation: design-background-out 2s ease-in-out 0s;*/
}

.offer-item[data-design="3"].left .offer-info,
.offer-item[data-design="3"].right .offer-info {
    bottom: -500px;
    transition: bottom 1s ease-in-out;
}

.offer-item[data-design="3"].active .offer-info {
    bottom: 0;
    transition: bottom 1s ease-in-out;
}

.offer-item[data-design="3"] .offer-info {
    position: absolute;
    z-index: 2;
    left: 0;
    width: 100%;
    padding: 5% 13% 2% 2%;
    border-radius: 3px;
    background: url('/app/images/wave.svg') no-repeat bottom center;
    background-size: cover;
}

.offer-item[data-design="3"] .offer-info .offer-title {
    display: inline-block;
    font-size: 120%;
    color: white;
    margin-right: 1%;
    text-transform: uppercase;
}

.offer-item[data-design="3"] .offer-info .offer-category {
    display: inline-block;
}

.offer-item[data-design="3"] .offer-info .offer-text {
    font-size: 220%;
    margin-top: .25%;
    color: white;
    clear: both;
    margin-bottom: .5%;
    margin-right: 2%;
}

.offer-item[data-design="3"] .offer-info .offer-subTitle {
    background: #ffd600;
    float: left;
    border-radius: 3px;
    display: inline-block;
    padding: .5% 1%;
    font-size: 175%;
    font-weight: bold;
    margin-right: 20px;
}

.offer-item[data-design="3"] .offer-info-list {
    float: left;
    width: 66vw;
    min-height: 3.5vw;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.offer-item[data-design="3"] .offer-info .offer-info-item:before {
    content: "•";
    position: absolute;
    left: -3px;
}

.offer-item[data-design="3"] .offer-info .offer-info-list .offer-info-item:last-child {
    padding-right: 0;
}

.offer-item[data-design="3"] .offer-info .offer-info-item {
    display: inline-block;
    color: white;
    padding: 0 1.5%;
    font-size: 120%;
    position: relative;
}

.offer-item[data-design="3"] .offer-name {
    display: none;
}

.offer-item[data-design="3"] .offer-info .offer-qr {
    position: absolute;
    right: 1%;
    background: white;
    padding: .5%;
    bottom: 5%;
    border-radius: 3px;
    width: 11%;
}

.offer-item[data-design="3"] .offer-info .offer-qr canvas {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.offer-item[data-design="3"] .offer-info .offer-qr:after {
    display: none;
    content: "QR-code Scannen";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    font-size: 80%;
    color: #545454;
    background: #ececec;
    text-align: center;
    text-transform: uppercase;
    border-radius: 0 0 3px 3px;
}

.offers-container .offer-item[data-design="3"] .offer-info .offer-category {
    display: none;
}

.offers-container .offer-item[data-design="3"] .offer-info .offer-text .offer-category {
    display: inline-block;
    font-size: 50%;
    margin-left: 1%;
    transform: translateY(2px);
}

.offer-item[data-design="3"] .offer-item-number {
    position: absolute;
    left: 0;
    top: 14%;
    z-index: 2;
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 1);
    background: none;
    transform: none;
}

/************ END OFFER DESIGN 3 ************/

/*********** START OFFER DESIGN 4 ***********/

.offer-item[data-design="4"] .offer-background {
    filter: blur(3px);
}

.offer-item[data-design="4"].active .offer-background {
    animation: design-background-in 60s ease-in-out infinite 0s;
}

.offer-item[data-design="4"].left .offer-background {
    /*animation: design-background-out 2s ease-in-out 0s;*/
}

.offer-item[data-design="4"].right .offer-subTitle,
.offer-item[data-design="4"].right .offer-title,
.offer-item[data-design="4"].left .offer-subTitle,
.offer-item[data-design="4"].left .offer-title {
    position: relative;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition-delay: .5s;
    transition: max-height 3s ease-in-out, padding-top 1s ease-in-out, padding-bottom 1s ease-in-out;
}

.offer-item[data-design="4"].active .offer-subTitle {
    padding-bottom: 1.5%;
}

.offer-item[data-design="4"].active .offer-title {
    padding-bottom: 2.5%;
}

.offer-item[data-design="4"].active .offer-subTitle,
.offer-item[data-design="4"].active .offer-title {
    padding-top: 1.5%;
    max-height: 500px;
    transition: max-height 3s ease-in-out, padding-top 1s ease-in-out, padding-bottom 1s ease-in-out;
}

.offer-item[data-design="4"].right .offer-info,
.offer-item[data-design="4"].left .offer-info {
    transform: scale(0.1);
    transition: all 1s ease-in-out;
}

.offer-item[data-design="4"].active .offer-info {
    transform: scale(1);
    transition: all 1s ease-in-out;
}

.offer-item[data-design="4"] .offer-name {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 3;
}

.offer-item[data-design="4"] .offer-name .offer-item-number {
    display: none;
}

.offer-item.active[data-design="4"] .offer-name {
}

.offer-item[data-design="4"] .offer-title {
    background: #0160ad;
    padding-right: 30px;
    padding-left: 30px;
    font-size: 230%;
    color: white;
    overflow: hidden;
}

.offer-item[data-design="4"] .offer-title span {
    display: block;
}

.offer-item[data-design="4"] .offer-subTitle {
    display: inline-block;
    z-index: 3;
    background: #ffd600;
    color: #202020;
    font-size: 170%;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: -1.5%;
    font-weight: bold;
    overflow: hidden;
}

.offer-item[data-design="4"] .offer-subTitle span {
    display: block;
}

.offer-item[data-design="4"] .offer-info-list {
    line-height: 135%;
}

.offer-item[data-design="4"] .offer-info {
    position: absolute;
    z-index: 2;
    bottom: 3%;
    left: 1.5%;
    padding: 1% 1% 1% 12vw;
    min-height: 11vw;
    border-radius: 3px;
    background: #ececec;
    background-size: cover;
    max-width: 96%;
}

.offer-item[data-design="4"] .offer-info-block.qr-hide .offer-info {
    padding: 1%;
}

.offer-item[data-design="4"] .offer-info .offer-title,
.offer-item[data-design="4"] .offer-info .offer-subTitle {
    display: none;
}

.offer-item[data-design="4"] .offer-info .offer-qr {
    position: absolute;
    top: 0;
    left: 0;
    padding: .5vw;
    width: 11vw;
    height: auto;
    background: white;
}

.offer-item[data-design="4"] .offer-info .offer-qr img,
.offer-item[data-design="4"] .offer-info .offer-qr canvas {
    vertical-align: middle;
    width: 100%;
    height: auto;
}

.offer-item[data-design="4"] .offer-info .offer-text {
    font-size: 220%;
    clear: both;
    margin-bottom: 10px;
}

.offer-item[data-design="4"] .offer-info-block {
    height: 100%;
}

.offer-item[data-design="4"] .offer-info .offer-info-item:before {
    content: "•";
    position: absolute;
    left: -3px;
}

.offer-item[data-design="4"] .offer-info .offer-info-item {
    display: inline-block;
    padding: 0 1.5%;
    position: relative;
    font-size: 120%;
}

.offer-item[data-design="4"] .offer-info .offer-info-list .offer-info-item:last-child {
    padding-right: 0;
}

.offer-item[data-design="4"] .offer-info .offer-item-number {
    position: absolute;
    left: 0;
    top: -19%;
    transform: none;
    border-radius: 3px;
    padding: .3%;
    min-width: 11vw;
    text-align: center;
    background: #ececec;
    color: black;
}

/*.offers-container .offer-item[data-design="4"] .offer-info .offer-category {*/
/*display: none;*/
/*}*/

/*.offers-container .offer-item[data-design="4"] .offer-info .offer-text .offer-category {*/
/*display: inline-block;*/
/*font-size: 50%;*/
/*margin-left: 1%;*/
/*transform: translateY(2px) translateX(6px);*/
/*}*/

/************ END OFFER DESIGN 4 ************/
.offer-item[data-design="5"].active .offer-background {
    /*animation: design-background-in 60s ease-in-out infinite 0s;*/
}

/************ END OFFER DESIGN 5 ************/

.debug {
    position: fixed;
    top: 20px;
    left: 20px;
    background: #ccc;
    color: black;
    font-size: 18px;
    z-index: 999;
    padding: 5px;
    display: none;
}

.offer-main-block {
    width: 1920px;
    height: 1080px;
    transform-origin: left top;
    z-index: 2;
}

.offer-item[data-design="2"] .offer-info-block,
.offer-item[data-design="3"] .offer-info-block,
.offer-item[data-design="4"] .offer-info-block {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1;
    transform-origin: left bottom;
}

.offer-item[data-design="1"] .offer-info-block {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    z-index: 1;
    transform-origin: left bottom;
}

@media (max-width: 767px) {
    .offers-timeline {
        height: 1px;
    }

    .offers-container .offer-item.active::after {
        display: block;
        top: 20px;
        right: 20px;
        background-size: 100px auto;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .offers-timeline {
        height: 1px;
    }

    .offers-container .offer-item.active::after {
        display: none;
        top: 20px;
        right: 20px;
        background-size: 150px auto;
    }
}

@media (max-width: 1024px) {
    .auth .auth-wrap {
        padding-top: 6%;
    }

    .offer-item .offer-element-picture {
        border: 7px solid white;
    }
}

.channel-info {
    position: absolute;
    top: -200px;
    left: 0;
    width: 100%;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
    transition: all 0.5s linear;
}

.channel-info.show {
    top: 0;
}

.channel-info .channel-number {
    font-size: 20px;
    color: white;
}

.channel-info .channel-name {
    color: white;
    font-size: 40px;
    font-weight: bold;
}

.channel-control {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
}

.channel-top,
.channel-bottom,
.channel-left,
.channel-right {
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    transition: all 0.3s linear;
    cursor: pointer;
    font-size: 50px;
    color: rgba(0, 0, 0, 0.6);
}

.channel-top:hover,
.channel-bottom:hover,
.channel-left:hover,
.channel-right:hover,
.logout:hover {
    opacity: 1;
}

.channel-top {
    top: 0;
    left: 0;
    height: 100px;
    width: 100%;
    text-align: center;
    line-height: 100px;
}

.channel-bottom {
    bottom: 0;
    left: 0;
    height: 100px;
    width: 100%;
    text-align: center;
    line-height: 100px;
}

.channel-left {
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    text-align: center;
}

.channel-left i,
.channel-right i {
    position: absolute;
    top: 50%;
    margin-top: -25px;
    left: 25px;
}

.logout {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 50px;
    z-index: 100;
    opacity: 0;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s linear;
    cursor: pointer;
}

.channel-right {
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
}

.offer-item-number span {
    transform: skew(8deg, 0deg);
}

.cut {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.offer-item[data-design="5"] {
    font-size: 22px;
}

.offer-item[data-design="5"] .offer-title span {
    display: block;
}

.offers-container .offer-item[data-design="5"] .offer-info-block {
    /*width: 1920px;*/
    /*height: 1080px;*/
}

.offers-container .offer-item[data-design="5"].active:not([data-type="picture"]) .offer-elements {
    animation: design-background-in 60s ease-in-out infinite 0s;
}

.offers-container .offer-item[data-design="5"] .offer-elements.has-video {
    animation: none !important;
}

.offers-container .offer-item[data-design="5"] .offer-qr {
    height: auto;
}

@media (max-width: 1280px) {
    .auth.loading .auth-smgtv-logo {
        padding-top: 100px;
    }

    .auth-smgtv-logo img,
    .auth-schmetterling-tv img {
        width: 180px;
    }

    .auth .auth-input-wrap {
        padding: 20px;
    }

    .auth #auth-form input[type="text"] {
        padding: 15px;
        font-size: 18px;
        width: 300px;
    }

    .auth #auth-form button,
    .auth #register-device button,
    .auth-back {
        line-height: 60px;
        font-size: 18px;
    }

    .auth-text {
        font-size: 13px;
    }
}

.offers-container .offer-item .offer-info .offer-text .offer-category {
    display: none;
}

#loop-video {
    position: fixed;
    top: -100px;
    left: 0;
    z-index: 999;
    height: 5px;
    width: 5px;
    overflow: hidden;
}

.offer-item .offer-tour-operator {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1%;
    background: rgba(0, 0, 0, .6);
    text-align: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px black;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.offer-item[data-type="video"] .offer-qr,
.offer-item[data-type="video"] .offer-info,
.offer-item[data-type="video"] .offer-main-block .offer-name,
.offer-item[data-type="video"] .offer-item-number {
    display: none;
}

.offer-item[data-design="3"] .offer-bottom-text {
    position: absolute;
    bottom: 0;
    left: 1.5vw;
    padding: .3%;
    font-size: 75%;
    color: white;
    z-index: 3;
}

.offer-item[data-design="2"] .offer-bottom-text {
    position: absolute;
    bottom: .5%;
    right: 1vw;
    padding: .1% 0;
    font-size: 75%;
    color: white;
    text-shadow: 1px 1px black;
    z-index: 3;
}

.offer-item[data-design="4"] .offer-bottom-text {
    position: absolute;
    bottom: .2%;
    right: 1.5vw;
    padding: .1%;
    font-size: 75%;
    text-shadow: 1px 1px black;
    color: white;
    z-index: 3;
}

.offer-item[data-design="1"] .offer-bottom-text {
    display: none;
}

.offer-item[data-design="1"] .offer-item-number {
    display: none;
}

.offer-item[data-design="5"] .offer-name .offer-item-number.block-hidden {
    display: block !important;
    opacity: 0;
}

.offer-item[data-design="5"] .info-hidden .offer-info {
    display: none;
}