body {
    margin: 0;
    padding: 0;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
    /*overflow: hidden;*/
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select: none;
    cursor: none;
}

.table-wrap {
    width: 100%;
    height: 100%;
    display: table;
}

.table-wrap > span {
    display: table-cell;
    vertical-align: middle;
}

.clearing {
    width: 100%;
    height: 0px;
    clear: both;
}

#container {
    width: 1080px;
    height: 1920px;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    color: #FFFFFF;
    background-image: url("images/bg.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}

#teta-logo {
    width: 112px;
    height: 177px;
    position: absolute;
    right: 87px;
    top: 20px;
    border: 6px solid #FFFFFF;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(images/teta-logo.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    -webkit-box-shadow: 0 0 5px 1px #555555;
    box-shadow: 0 0 5px 1px #555555;
    z-index: 10;
    /*-webkit-transition: width 0.8s, height 0.8s, top 0.8s;
    transition: width 0.8s, height 0.8s, top 0.8s;*/
}

#teta-logo.bigger {
    top: 30px;
    width: 131px;
    height: 209px;
}

#style-chooser, #club-detail, #club-register {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

#style-chooser {
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#photo-window {
    position: relative;
    float: left;
    width: 760px;
    height: 840px;
    background-color: #FFFFFF;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: 4;
    background-image: url(images/silhouette.jpg);
}

#photo-window.girl1 {
    background-image: url(images/girl1.jpg);
}

#photo-window.girl2 {
    background-image: url(images/girl2.jpg);
}

#photo-window:after {
    content: url(images/bookmark.png);
    position: absolute;
    left: 760px;
    top: 10px;
}

#teta-advert {
    position: absolute;
    width: 154px;
    left: 0;
    top: 23px;
    font-size: 12pt;
    color: #004086;
    text-align: center;
}

#product-name {
    position: absolute;
    right: 30px;
    top: 25px;
    font-size: 12pt;
    color: #8A8A8A;
    text-align: right;
}

#teta-logo-small {
    width: 82px;
    height: 131px;
    margin: 0 auto 10px;
    border: 4px solid #FFFFFF;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(images/teta-logo.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    -webkit-box-shadow: 0 0 3px 1px #AAAAAA;
    box-shadow: 0 0 3px 1px #AAAAAA;
}

.tag {
    position: relative;
    width: 260px;
    height: 180px;
    margin-bottom: 10px;
    float: right;
}

.tag:after {
    content: url(images/arrow-left.png);
    position: absolute;
    left: -10px;
    bottom: 20px;
}

.tag.first {
    margin-top: 200px;
}

.tag > span {
    display: block;
    width: 100%;
    height: 20px;
    font-size: 14pt;
    line-height: 20px;
    font-weight: bold;
    text-indent: 15px;
    text-transform: uppercase;
}

.tag .inner {
    width: 100%;
    height: 160px;
    background-color: #FFFFFF;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 3px 1px #999999;
    box-shadow: 0 0 3px 1px #999999;
}

.tag .inner .thumb {
    width: 160px;
    height: 100%;
    float: left;
    text-align: center;
}

.tag .inner .thumb .image {
    width: 100%;
    height: 114px;
    line-height: 114px;
}

.tag .inner .thumb .image img {
    vertical-align: middle;
    max-width: 140px;
    max-height: 104px;
}

.tag .inner .thumb .image img.rounded {
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.tag .inner .thumb span {
    display: block;
    width: 100%;
    height: 46px;
    line-height: 46px;
    font-size: 14pt;
    color: #000000;
}

.tag .inner .price {
    width: 100px;
    height: 100%;
    float: right;
    text-align: center;
    background-image: url(images/shader.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 160px;
}

.fade-wrap {
    width: 100%;
    height: 100%;
    display: none;
}

.tag .inner .price span {
    font-size: 16pt;
    color: #93CA00;
}

.tag .inner .price span:after {
    content: ",- Kč";
}

.tag .inner .price span:before {
    content: "CENA: ";
    font-weight: bold;
    font-size: 20pt;
}

#club-button {
    width: 260px;
    height: 70px;
    float: right;
    padding-left: 80px;
    background-color: #CA2915;
    background-image: url(images/arrow-up.png);
    background-repeat: no-repeat;
    background-position: 20px bottom;
    border: 3px solid #FFFFFF;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 3px 1px #999999;
    box-shadow: 0 0 3px 1px #999999;
    cursor: pointer;
}

#club-button span {
    font-size: 12pt;
    font-weight: bold;
    text-transform: uppercase;
}

#wizard {
    width: 1040px;
    height: 180px;
    margin-top: 45px;
    position: relative;
    background: -moz-linear-gradient(
        center top,
        #DE3030 0%, #CC1E1E 100%
    );
    background: -webkit-gradient(
        linear,
        left top, left bottom,
        from(#DE3030), to(#CC1E1E)
    );
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

#wizard .label {
    width: 262px;
    height: 33px;
    position: absolute;
    left: 10px;
    top: 0;
    background-image: url(images/bookmark-white.png);
    background-repeat: no-repeat;
    background-position: left top;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14pt;
    line-height: 33px;
    color: #CD2020;
}

#wizard .inner {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.white-button {
    background: -moz-linear-gradient(
        center top,
        #FFFFFF 0%, #EBEBEB 100%
    );
    background: -webkit-gradient(
        linear,
        left top, left bottom,
        from(#FFFFFF), to(#EBEBEB)
    );
    border: 1px solid #FFFFFF;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    cursor: pointer;
}

#step1 .text, #step2 .text {
    height: 100%;
    float: right;
    text-align: right;
    font-size: 36pt;
    font-weight: bold;
}

#step3 .text {
    height: 100%;
    float: right;
    text-align: right;
    font-size: 20pt;
    font-weight: bold;
}

#step4 .text {
    width: 100%;
    height: 65px;
    margin-bottom: 15px;
    font-size: 32pt;
    font-weight: bold;
    text-align: center;
    text-indent: 280px;
    line-height: 65px;
}

#step3 .text span:first-line {
    font-size: 36pt;
}

#take-photo {
    float: right;
    width: 230px;
    height: 100%;
    margin-left: 45px;
    text-align: center;
}

#take-photo img {
    margin-top: 30px;
}

#take-photo span {
    display: block;
    margin-top: 15px;
    color: #CC1E1E;
    font-size: 14pt;
}

#step2 .buttons, #step3 .buttons {
    float: right;
    width: 280px;
    margin-left: 45px;
}

#step3 .buttons {
    width: 230px;
}

#step2 .buttons span, #step3 .buttons span {
    text-align: center;
    font-weight: bold;
    color: #CC1E1E;
    font-size: 22pt;
}

#step4 .buttons {
    width: 100%;
    height: 70px;
}

#step4 .buttons > div {
    float: left;
    width: 239px;
    height: 100%;
    margin-left: 18px;
}

#step4 .buttons > div:first-child {
    margin: 0;
}

#step4 .buttons span {
    text-align: left;
    font-weight: bold;
    color: #CC1E1E;
    font-size: 16pt;
    padding-left: 80px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#send-facebook, #send-mail, #download, #exit {
    background: url(images/facebook.png), -moz-linear-gradient(
        center top,
        #FFFFFF 0%, #EBEBEB 100%
    );
    background: url(images/facebook.png), -webkit-gradient(
        linear,
        left top, left bottom,
        from(#FFFFFF), to(#EBEBEB)
    );
    background-repeat: no-repeat;
    background-position: 31px center, center center;
}

#send-mail {
    background: url(images/zavinac.png), -moz-linear-gradient(
        center top,
        #FFFFFF 0%, #EBEBEB 100%
    );
    background: url(images/zavinac.png), -webkit-gradient(
        linear,
        left top, left bottom,
        from(#FFFFFF), to(#EBEBEB)
    );
    background-repeat: no-repeat;
    background-position: 22px center, center center;
}

#download {
    background: url(images/phone.png), -moz-linear-gradient(
        center top,
        #FFFFFF 0%, #EBEBEB 100%
    );
    background: url(images/phone.png), -webkit-gradient(
        linear,
        left top, left bottom,
        from(#FFFFFF), to(#EBEBEB)
    );
    background-repeat: no-repeat;
    background-position: 26px center, center center;
}

#exit {
    background: url(images/close.png), -moz-linear-gradient(
        center top,
        #FFFFFF 0%, #EBEBEB 100%
    );
    background: url(images/close.png), -webkit-gradient(
        linear,
        left top, left bottom,
        from(#FFFFFF), to(#EBEBEB)
    );
    background-repeat: no-repeat;
    background-position: 22px center, center center;
}

#photo-ok, #photo-bad, #next, #back {
    width: 100%;
    height: 70px;
}

#photo-ok, #next {
    margin-bottom: 10px;
}

#photo-bad img {
    height: 32px;
    margin-top: 17px;
    margin-left: 20px;
}

#photo-bad span {
    text-indent: -20px;
}

#next {
    text-transform: uppercase;
}

#step2, #step3, #step4 {
    display: none;
}

.chooser {
    width: 1040px;
    height: 190px;
    position: relative;
    margin-top: 49px;
    padding: 19px 0;
    background-color: rgba(255, 255, 255, 0.37);
    border: 1px solid #FFFFFF;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

.chooser:after {
    content: url(images/bookmark-top.png);
    position: absolute;
    top: -34px;
    left: 50%;
    margin-left: -131px;
    z-index: 0;
}

.chooser .label {
    color: white;
    width: 262px;
    height: 33px;
    margin-left: -131px;
    left: 50%;
    top: -34px;
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    line-height: 33px;
    text-transform: uppercase;
    position: absolute;
    z-index: 2;
}

.blocker {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    -webkit-border-radius: 8px;
    border-radius: 8px;
    z-index: 7;
}

.prev-button {
    width: 81px;
    height: 100%;
    float: left;
    cursor: pointer;
    background-image: url(images/prev.png);
    background-repeat: no-repeat;
    background-position: center center;
}

.swiper-container {
    float: left;
}

.swiper-container.blocked {
    -webkit-filter: grayscale(100%);
}

.next-button {
    width: 81px;
    height: 100%;
    float: right;
    cursor: pointer;
    background-image: url(images/next.png);
    background-repeat: no-repeat;
    background-position: center center;
}

#hair-color-swiper .slide-inner, #lip-color-swiper .slide-inner, #haircut-swiper .slide-inner {
    width: 159px;
    height: 100%;
    margin: 0 8px;
    position: relative;
    background-color: #FFFFFF;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    text-align: center;
    padding: 20px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

#haircut-swiper .slide-inner {
    width: 199px;
}

#hair-color-swiper .slide-inner img {
    display: block;
    width: 119px;
    max-height: 78px;
    margin: 0 auto;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

#lip-color-swiper .slide-inner img {
    display: block;
    max-height: 92px;
    margin: 0 auto;
}

#haircut-swiper .slide-inner img {
    display: block;
    max-height: 158px;
    margin: 0 auto;
}

#hair-color-swiper .slide-inner span {
    display: block;
    height: 52px;
    color: #000000;
    font-size: 14pt;
    line-height: 52px;
}

#lip-color-swiper .slide-inner span {
    display: block;
    height: 38px;
    color: #000000;
    font-size: 14pt;
    line-height: 38px;
}

#haircut-swiper .slide-inner span {
    display: block;
    width: 100%;
    height: 38px;
    position: absolute;
    bottom: 0;
    color: #000000;
    font-size: 14pt;
    line-height: 38px;
}

#haircuts {
    height: 270px;
    margin-top: 67px;
}

#club-detail, #club-register {
    display: none;
}

#club-detail {
    padding: 30px 20px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.heading {
    width: 842px;
    height: 145px;
    text-align: center;
}

.heading span {
    font-size: 42pt;
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
}

#club-detail .detail {
    width: 100%;
    height: 470px;
    margin-bottom: 20px;
    position: relative;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 70px 70px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#invitation {
    font-size: 44pt;
    color: #004086;
    line-height: 160%;
}

#card-state {
    position: absolute;
    bottom: 70px;
    font-size: 26pt;
    color: #004086;
}

#card-state strong {
    padding-left: 0.5em;
    font-size: 52pt;
    font-weight: bold;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#card-state strong:after {
    content: " bodů";
}

#special-offer {
    width: 100%;
    height: 180px;
    color: #004086;
    font-weight: bold;
    font-size: 28pt;
    text-align: center;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
}

#special-offer strong {
    color: #DB2C36;
}

.button {
    width: 610px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: -moz-linear-gradient(
        center top,
        #1C5492 0%, #003877 100%
    );
    background: -webkit-gradient(
        linear,
        left top, left bottom,
        from(#1C5492), to(#003877)
    );
    text-align: center;
    font-size: 26pt;
    font-weight: bold;
    cursor: pointer;
}

#register-button {
    height: 70px;
    margin: 20px auto 0;
}

.button.back {
    height: 70px;
    margin: 20px auto;
}

#action-products-button {
    height: 70px;
    position: absolute;
    left: 50%;
    margin-left: -310px;
    bottom: 735px;
}

#action-products {
    width: 1040px;
    height: 625px;
    position: absolute;
    bottom: 70px;
}

.product {
    width: 330px;
    height: 300px;
    float: left;
    margin-right: 25px;
    margin-bottom: 25px;
    background-color: #FFFFFF;
    -webkit-box-shadow: 0 0 3px 1px #999999;
    box-shadow: 0 0 3px 1px #999999;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    text-align: center;
    line-height: 300px;
}

.product:nth-child(n+3) {
    margin-bottom: 0;
}

.product:nth-child(3n) {
    margin-right: 0;
}
.product img {
    max-width: 330px;
    max-height: 300px;
    vertical-align: middle;
}

#club-register {
    padding: 30px 20px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#registration-heading {
    width: 100%;
    height: 290px;
    margin-bottom: 20px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    color: #004086;
    font-size: 50pt;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

#registration-form {
    width: 100%;
    height: 680px;
    margin-bottom: 70px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.8);
    padding-top: 80px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

label {
    display: block;
    float: left;
    width: 380px;
    height: 70px;
    margin-bottom: 20px;
    font-size: 26pt;
    color: #004086;
    line-height: 70px;
    text-align: right;
    padding-right: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

label[for=number] {
    width: 110px;
}

input {
    display: block;
    float: left;
    width: 570px;
    height: 70px;
    margin-bottom: 20px;
    border: 1px solid #73A2D1;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 28pt;
}

input#street {
    width: 340px;
}

input#number {
    width: 120px;
}

#registration-button {
    height: 150px;
    margin: 0 auto;
    text-transform: uppercase;
}

#hair-overlay, #lips-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    z-index: 5;
}

#lips-overlay {
    z-index: 7;
    border: none;
}

.colorizer {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 6;
    -webkit-mask-image: -webkit-gradient(
        linear,
        left top, left bottom,
        from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))
    );
    -webkit-mask-repeat: no-repeat;
    border: none;
}

.haircut1 {
    background-image: url(images/haircut1-big-dark.png);
    background-position: 141px 169px;
}

.haircut1 .colorizer {
    -webkit-mask-image: url(images/haircut1-big-dark.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 141px 169px;
}

.haircut2 {
    background-image: url(images/haircut2-big-dark.png);
    background-position: 187px 169px;
}

.haircut2 .colorizer {
    -webkit-mask-image: url(images/haircut2-big-dark.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 187px 169px;
}

.haircut3 {
    background-image: url(images/haircut3-big-dark.png);
    background-position: 208px 164px;
}

.haircut3 .colorizer {
    -webkit-mask-image: url(images/haircut3-big-dark.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 208px 164px;
}

.haircut4 {
    background-image: url(images/haircut4-big-dark.png);
    background-position: 164px 84px;
}

.haircut4 .colorizer {
    -webkit-mask-image: url(images/haircut4-big-dark.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 164px 84px;
}

.girl1 #lips-overlay {
    -webkit-mask-image: url(images/lips1-mask.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 353px 532px;
}

.girl2 #lips-overlay {
    -webkit-mask-image: url(images/lips2-mask.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 356px 519px;
}