#top {
    background-color:#000;
    border-bottom: solid 2px #000;
}
#top .row div {
    text-align: center;
    color:#fff;
    padding:10px;
    border-right:solid 2px #fff;
    font-weight:bold;
    text-transform:uppercase;
}
#top .row div:last-child {
    border-right:none;
}
#top .row div.active {
    background-color:#ccc;
    color:#000;
}

#middle {
    border-bottom: solid 2px #000;
}
.step4 #middle, .step5 #middle {
    border-bottom: none;
}
#middle > .row > div {
    border-right:solid 2px #000;
    padding: 10px;
}
#middle > .row > div:last-child {
    border-right:none;
}

.step1 #center img, .step2 #center img {
    margin:20px 10px 0 0;
    padding-bottom:15px;
    border-bottom:solid 3px #ccc;
    cursor:pointer;
    height:220px;
}
#center img.active {
    border-bottom:solid 3px #666;
}

#right img {
    margin-top:20px;
    height:220px;
}

#bottom .center {
    text-align:center;
    display:inline-block;
}
.cabinet, .door {
    margin:20px 10px 0 0;
}
.cabinet img, .door img {
    cursor:pointer;
    height:180px;
}

.step2 #left a {
    margin: 10px 0 10px 0;
}

.step3 .container .row {
    padding:10px;
    border-top:solid 1px #ddd;
}
.step3 #center {
    min-height:470px;
    position:relative;
}
.step3 #center .final {
    position:absolute;
    display:block;
}
.step3 #center .final.final1 {
    left:20px;
    top:50px;
}
.step3 #center .final.final2 {
    left:101px;
    top:70px;
}
.step3 #center .final.final3 {
    left:182px;
    top:90px;
}
.step3 #center .final.final4 {
    left:263px;
    top:110px;
}
.step3 #center .final.final5 {
    left:344px;
    top:130px;
}
.step3 #center .final.final6 {
    left:425px;
    top:150px;
}
.step3 #center .final.final7 {
    left:506px;
    top:170px;
}
.step3 #center .final.final8 {
    left:20px;
    top:17px;
    text-align:left;
}
.step3 #center #showDoors .final.final8 {
    top:35px;
}

.step3 #bottom {
    padding:20px;
}
.step3 #bottom #submit {
    margin-top:20px;
}
.step3 #showCabinets {
    display:block;
}
.step3 #showDoors {
    display:none;
    margin-top:-20px;
    top:0;
}
.step3 #showHideDoors {
    display:inline-block;
    position:absolute;
    right:10px;
    bottom:10px;
    background-color:#000;
    color:#fff;
    padding:5px 10px 5px 30px;
}

.step1 #center, .step2 #center, .step3 #center {
    background: url(watermark.png) left top repeat;
}

/* Návrhář - dveře */
.dvere-modul {display:inline-block; position:relative; width:10%; height:0px; padding-bottom:19.5%; /* <- musí bít cca 1.95x jako width - opticky vždy doladit */ margin:20px 25px 25px 0;}
.step4 .dvere-modul {margin:20px 0 0 0; width:128px; padding-bottom:250px;}
.step2 .dvere-modul:last-child {margin: 0 0 25px 0;}
.dvere {position:absolute; width:100%; height:100%; background-color:#E6BF83; float:left;}
.step2 .dvere::after {display:block; position:relative; content:' '; width:100%; height:3px; background-color:#ccc; margin-top:15px; border-bottom:solid 3px #ccc;}
.step2 .dvere:hover::after, .step2 .dvere.active::after {border-bottom:solid 3px #666;}
.dvere.model01 .c1{width:100%; height:100%; border-bottom:solid 2px #71583E;}
.dvere.model02 .c1{width:100%; height:50%; border-bottom:solid 2px #71583E;}
.dvere.model02 .c2{width:100%; height:50%; border-bottom:solid 2px #71583E;}
.dvere.model03 .c1{width:100%; height:15%; border-bottom:solid 2px #71583E;}
.dvere.model03 .c2{width:100%; height:70%; border-bottom:solid 2px #71583E;}
.dvere.model03 .c3{width:100%; height:15%; border-bottom:solid 2px #71583E;}
.dvere.model04 .c1{width:100%; height:35%; border-bottom:solid 2px #71583E;}
.dvere.model04 .c2{width:100%; height:30%; border-bottom:solid 2px #71583E;}
.dvere.model04 .c3{width:100%; height:35%; border-bottom:solid 2px #71583E;}
.dvere.model05 .c1{width:100%; height:35%; border-bottom:solid 2px #71583E;}
.dvere.model05 .c2{width:100%; height:10%; border-bottom:solid 2px #71583E;}
.dvere.model05 .c3{width:100%; height:10%; border-bottom:solid 2px #71583E;}
.dvere.model05 .c4{width:100%; height:10%; border-bottom:solid 2px #71583E;}
.dvere.model05 .c5{width:100%; height:35%; border-bottom:solid 2px #71583E;}
.dvere.model06 .c1{width:100%; height:15%; border-bottom:solid 2px #71583E;}
.dvere.model06 .c2{width:100%; height:10%; border-bottom:solid 2px #71583E;}
.dvere.model06 .c3{width:100%; height:75%; border-bottom:solid 2px #71583E;}
.dvere.model07 .c1{width:100%; height:75%; border-bottom:solid 2px #71583E;}
.dvere.model07 .c2{width:100%; height:10%; border-bottom:solid 2px #71583E;}
.dvere.model07 .c3{width:100%; height:15%; border-bottom:solid 2px #71583E;}
.dvere.model08 .c1{width:100%; height:35%; border-bottom:solid 2px #71583E;}
.dvere.model08 .c2{width:100%; height:15%; border-bottom:solid 2px #71583E;}
.dvere.model08 .c3{width:100%; height:15%; border-bottom:solid 2px #71583E;}
.dvere.model08 .c4{width:100%; height:35%; border-bottom:solid 2px #71583E;}
.dvere div:last-child {border-bottom:none !important;}
.step2 .dvere div {cursor:pointer;}
.step2 .dvere div:hover {border:solid 2px #ff8f00 !important;}
.step2 .dvere div.active {border:solid 2px #ff0000 !important;}

.dvere3d-modul {display:inline-block; position:relative; width:20%; height:0px; padding-bottom:40.4%; /* <- musí bít cca 2.02x jako width - opticky vždy doladit */ margin:20px 25px 25px 0; background:url(modul-dvere.png) top left no-repeat; background-size: 100% auto;}
.polica .dvere3d-modul {display:inline-block; position:relative; width:20%; height:0px; padding-bottom:40.4%; /* <- musí bít cca 2.02x jako width - opticky vždy doladit */ margin:20px 25px 25px 0; background:url(modul-dvere-prostredni.png) top left no-repeat; background-size: 100% auto;}
.polica .first .dvere3d-modul {display:inline-block; position:relative; width:20%; height:0px; padding-bottom:40.4%; /* <- musí bít cca 2.02x jako width - opticky vždy doladit */ margin:20px 25px 25px 0; background:url(modul-dvere-prvni.png) top left no-repeat; background-size: 100% auto;}
.polica .last .dvere3d-modul {display:inline-block; position:relative; width:20%; height:0px; padding-bottom:40.4%; /* <- musí bít cca 2.02x jako width - opticky vždy doladit */ margin:20px 25px 25px 0; background:url(modul-dvere-posledni.png) top left no-repeat; background-size: 100% auto;}

.step3 .dvere3d-modul { width:500% !important; padding-bottom:1010% !important;}
.dvere3d {position:absolute; width:67.5%; height:83%; left:0.5%; top:12.75%; background-color:#E6BF83; transform: skewY(13deg); border-left:solid 1px #906d4a;}
.step3 .final:first-child .dvere3d-modul .dvere3d {border-left:none;}
.dvere3d.model01 .c1{width:100%; height:100%; border-bottom:solid 2px #71583E;}
.dvere3d.model02 .c1{width:100%; height:50%; border-bottom:solid 2px #71583E;}
.dvere3d.model02 .c2{width:100%; height:50%; border-bottom:solid 2px #71583E;}
.dvere3d.model03 .c1{width:100%; height:15%; border-bottom:solid 2px #71583E;}
.dvere3d.model03 .c2{width:100%; height:70%; border-bottom:solid 2px #71583E;}
.dvere3d.model03 .c3{width:100%; height:15%; border-bottom:solid 2px #71583E;}
.dvere3d.model04 .c1{width:100%; height:35%; border-bottom:solid 2px #71583E;}
.dvere3d.model04 .c2{width:100%; height:30%; border-bottom:solid 2px #71583E;}
.dvere3d.model04 .c3{width:100%; height:35%; border-bottom:solid 2px #71583E;}
.dvere3d.model05 .c1{width:100%; height:35%; border-bottom:solid 2px #71583E;}
.dvere3d.model05 .c2{width:100%; height:10%; border-bottom:solid 2px #71583E;}
.dvere3d.model05 .c3{width:100%; height:10%; border-bottom:solid 2px #71583E;}
.dvere3d.model05 .c4{width:100%; height:10%; border-bottom:solid 2px #71583E;}
.dvere3d.model05 .c5{width:100%; height:35%; border-bottom:solid 2px #71583E;}
.dvere3d.model06 .c1{width:100%; height:15%; border-bottom:solid 2px #71583E;}
.dvere3d.model06 .c2{width:100%; height:10%; border-bottom:solid 2px #71583E;}
.dvere3d.model06 .c3{width:100%; height:75%; border-bottom:solid 2px #71583E;}
.dvere3d.model07 .c1{width:100%; height:75%; border-bottom:solid 2px #71583E;}
.dvere3d.model07 .c2{width:100%; height:10%; border-bottom:solid 2px #71583E;}
.dvere3d.model07 .c3{width:100%; height:15%; border-bottom:solid 2px #71583E;}
.dvere3d.model08 .c1{width:100%; height:35%; border-bottom:solid 2px #71583E;}
.dvere3d.model08 .c2{width:100%; height:15%; border-bottom:solid 2px #71583E;}
.dvere3d.model08 .c3{width:100%; height:15%; border-bottom:solid 2px #71583E;}
.dvere3d.model08 .c4{width:100%; height:35%; border-bottom:solid 2px #71583E;}
.dvere3d div:last-child {border-bottom:none !important;}

/* Dekory dveří */
.dekor-lamino {background:url(dekor-lamino.png) center center no-repeat; background-size: 130% auto;}
.dekor-zrcadlo {background:url(dekor-zrcadlo.png) center center no-repeat; background-size: 130% auto;}
.dekor-lacobel {background:url(dekor-lacobel.png) center center no-repeat; background-size: 130% auto;}
.dekor-fototapeta {background:url(dekor-fototapeta.png) center center no-repeat; background-color:#E3DFD8; background-size: 130% auto;}

@media (max-width: 992px) {
    #top .row div, #middle > .row > div {
        border-right:none;
    }
}