* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin:0; padding:0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

:root {
  --dlugosc-palety: 1200px;
  --szerokosc-palety: 800px;
  --grubosc-deski: 15px;
  --szerokosc-deski: 75px;
  --wysokosc-klocka: 75px;
}

.screenHidden {
    display:none;
}

#app {
    position:relative;
    width:100vw;
    height:100vh;
    background:url(bg.svg);
    background-size:160px 160px;
    min-width:1140px;
    min-height:800;
}

#header {
    position:absolute;
    top:0; left:0;
    width:100%;
    height:90px;
    display:flex;
    align-items: center;
    background:#181E28;
    z-index:10;
    color:#ccc;
}

#footer {
    text-align:center;
    background-color: #fff;
    border-top:1px solid #ddd;
    position:absolute;
    bottom:0; left:0;
    width:100%;
}

div.success {
    text-align:center;
    background-color:cadetblue;
    color:#fff;
    border-top:1px solid #ddd;
    position:absolute;
    bottom:0; left:0;
    width:100%;
    z-index:999;
}

div.error {
    text-align:center;
    background-color:crimson;
    color:#fff;
    border-top:1px solid #ddd;
    position:absolute;
    bottom:0; left:0;
    width:100%;
    z-index:999;
}

img#branding {
    width:200px; height:auto;
    display:inline-block;
    margin:0 20px;
}

#header h1 {
    display:inline-block;
    font-weight:400;
    font-size:24px;
}

#header h1 strong {
    font-weight:700;
}

#zoom {
    position:absolute; left:20px; top:40%;
    z-index:999;
}

#zoomSlider {
    vertical-align: middle;
}

input[type=range][orient=vertical] {
    appearance: slider-vertical;
    cursor: pointer;
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

#rysunek {
    position:absolute;
    width:66%; height:100%;
    transform: scale(0.5);
}

#paleta {
    position:absolute;
    left:50%; top:69%;
    transform: translate(-50%,-50%);
    z-index:-1;
}

#wyliczenia {
    position:absolute;
    width:auto;
    right:0; top:50%;
    transform: translate(0,-50%);
    z-index:999;
    border:1px solid #ddd;
    background-color:#fff;
    padding:20px;
}

#contact p {
    margin:8px 0;
}

#contact {
    position:absolute;
    z-index:999;
    top:0; left:0;
    width:100vw; height:100vh;
    display:none;
    background-color:rgba(255,255,255,0.95);
    justify-content: center;
    flex-direction: column;
    padding-left:42%;
}

#contact:after {
    content:"";
    display:block;
    position:absolute;
    left:0; top:0; bottom:0;
    width:40%; height:100%;
    background:url("form_bg.jpg") center center no-repeat;
    background-size: cover;
}

#contact input {
    width:auto;
    font-size:18px;
    padding:16px;
    background-color:#fff;
    border:3px solid #000;
    color:#000;
    text-decoration: none;
    font-weight:600;
    cursor: pointer;
}

#contact input:hover {
    cursor: pointer;
    border-color:#ccc;
}

#contact input:focus {
    border-color:cornflowerblue;
}

#contact input[type="submit"] {
    background-color:#181E28;
    border:3px solid #181E28;
    color:#E87A24;
    cursor: pointer;
    padding:16px 32px;
    text-transform: uppercase;
}

#contact input[type="submit"]:hover {
    background-color:#181E28;
    border:3px solid #181E28;
    color:#fff;
    cursor: pointer;
}

#contact span.close {
    display:block;
    position:absolute;
    right:20px; top:20px;
    background-color:#181E28;
    border:3px solid #181E28;
    color:#fff;
    cursor: pointer;
    padding:8px 20px;
    font-weight:600;
    text-transform: uppercase;
}

#cta {
    
}

#cta a {
    font-size:16px;
    display:inline-block;
    padding:4px 20px; margin:5px;
    background-color:#fff;
    border:3px solid #000;
    color:#000;
    text-decoration: none;
    text-transform: uppercase;
    font-weight:bold;
}

#cta a:nth-child(2) {
    background-color:#000;
    border:3px solid #000;
    color:#fff;
}

@media only screen and (max-width: 600px) {
    
    #app {
        min-width:100vw;
        min-height:100vh;
    }
    
    #header {
        position:relative;
        top:auto; left:auto;
        width:100vw;
        height:70px;
        display:flex;
        align-items: center;
        z-index:10;
    }
    
    img#branding {
        width:100px; height:auto;
    }
    
    #header h1 {
        font-size:16px;
    }
    
    #rysunek {
        position:relative;
        width:100vw; height:35vh;
        transform: scale(0.2);
    }

    #paleta {
        position:absolute;
        left:50%; top:50%;
        transform: translate(-55%,-38%);
        z-index:-1;
    }

    #wyliczenia {
        position:relative;
        width:100vw;
        right:auto; top:auto;
        transform: none;
        z-index:999;
        box-shadow: none;
        padding:20px;
        border-top:1px solid #ddd;
    }
    
    #cta {
        position:relative;
        bottom:auto; padding:10px 0; width:100vw; left:auto;
        text-align: center;
    }
    
    
    #contact {
        position:fixed;
        width:100vw; height:100vh;
        justify-content: center;
        align-content: center;
        padding:40px;
    }

    #contact:after {
        display:none;
    }
    
    #footer {
        position:relative;
        bottom:auto; left:auto;
        width:100vw;
    }

    div.success {
        position:fixed;
        width:100vw;
        z-index:9999;
    }

    div.error {
        position:fixed;
        width:100vw;
        z-index:9999;
    }
    
}

table {
    border-collapse: collapse;
}

table th {
    font-weight:400;
    text-align:right;
}

table td {
    font-weight:600;
}

table th,
table td {
    padding: 10px 15px;
}

.styled-table tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tr:last-of-type {
    border-bottom: 2px solid #009879;
}

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
select {
    border:none; outline:0;
    font-weight:600;
    background-color: #fffacc;
    font-family: "montserrat";
    width:100%; padding:10px;
    font-size:16px;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
select:focus {
    background-color: #d0fdff;
}

input[type="submit"] {
    border:none; outline:0;
    font-weight:bold;
    background-color: #111;
    color:#f2f2f2;
    font-family: "montserrat";
    width:100%; padding:10px;
}

p.opisyH {
    border-bottom:2px solid #000;
    font-size:24px;
    text-align:center;
    position:absolute;
}

p.opisyH:before {
    content:"\A";
    border-style: solid;
    border-width: 5px 15px 5px 0;
    border-color: transparent #000 transparent transparent;
    position: absolute;
    top:25px;
    left: 0;
}

p.opisyH:after {
    content:"\A";
    border-style: solid;
    border-width: 5px 0 5px 15px;
    border-color: transparent transparent transparent #000;
    position: absolute;
    top:25px;
    right: 0;
}

p.opisyH span {
    padding:8px; background-color:#fff;
    position:relative; bottom:-15px;
}

p.opisyV {
    border-right:2px solid #000;
    font-size:24px;
    position:absolute;
}

p.opisyV:before {
    content:"\A";
    border-style: solid;
    border-width: 10px 5px 15px 5px;
    border-color: transparent transparent #000 transparent;
    position: absolute;
    top:-12px;
    right:-6px;
}

p.opisyV:after {
    content:"\A";
    border-style: solid;
    border-width: 15px 5px 10px 5px;
    border-color: #000 transparent transparent transparent;
    position: absolute;
    bottom:-12px;
    right:-6px;
}


p.opisyV span {
    padding: 8px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    right: -35px;
    margin-top: -220%;
    text-align: right;
}

#top { width:var(--dlugosc-palety); height:var(--szerokosc-palety); position:relative;  }
#side { width:auto; height:var(--szerokosc-palety); position:absolute; right:-100px; top:0; }
#front { width:var(--dlugosc-palety); height:auto; position:absolute; left:0; top:calc( -100px - var(--wysokosc-klocka) - var(--grubosc-deski) - var(--grubosc-deski) - var(--grubosc-deski)); }

#front .layer1 {
    position:relative;
    width:100%; height:var(--grubosc-deski);
}

#front .layer1 div { 
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width:100%; height:var(--grubosc-deski);
    border:3px solid #ad9976;
    border-radius:4px;
    background:url(wood-horizontal.svg) no-repeat center #e7d2ae;
    background-size: cover; 
}

#front .layer2 {
    position:relative;
    width:100%; height:var(--grubosc-deski);
    display:flex; flex-direction:row; justify-content: space-between;
}

#front .layer2 div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width:var(--szerokosc-deski); height:100%; 
    border:3px solid #ad9976;
    border-radius:4px;
    background-color:#d7c3a1;
    background:url(wood-vertical.svg) no-repeat center #d7c3a1;
    background-size: cover;
}

#front .layer3 {
    position:relative;
    width:100%; height:var(--wysokosc-klocka);
    display:flex; flex-direction:row; justify-content: space-between;
}

#front .layer3 div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width:var(--szerokosc-deski); height:var(--wysokosc-klocka);
    border:3px solid #ad9976;
    border-radius:4px;
    background-color:#d7c3a1;
    background:url(wood-diagonal.svg) no-repeat center #d7c3a1;
    background-size: cover;
}

#front .layer4 {
    position:relative;
    width:100%; height:var(--grubosc-deski);
}

#front .layer4 div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width:100%; height:var(--grubosc-deski);
    border:3px solid #ad9976;
    border-radius:4px;
    background:url(wood-horizontal.svg) no-repeat center #e7d2ae;
    background-size: cover; 
}

#front #opisWysokosc {
    left:-50px;
    top:-22px;
    height:calc(var(--wysokosc-klocka) + var(--grubosc-deski) + var(--grubosc-deski) + var(--grubosc-deski));
    width:10px;
}

#top .layer1 {
    width:var(--dlugosc-palety); height:var(--szerokosc-palety);
    position:absolute; z-index:10;
    display:flex; flex-direction:column; justify-content: space-between;
}

#top .layer1 div { 
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width:100%; height:var(--szerokosc-deski);
    border:3px solid #ad9976;
    border-radius:4px;
    background:url(wood-horizontal.svg) no-repeat center #e7d2ae;
    background-size: cover;
}

#top .layer2 {
    width:var(--dlugosc-palety); height:var(--szerokosc-palety);
    position:absolute; z-index:9;
    display:flex; flex-direction:row; justify-content: space-between;
}

#top .layer2 div { 
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width:var(--szerokosc-deski); height:100%; 
    border:3px solid #ad9976;
    border-radius:4px;
    background-color:#d7c3a1;
    background:url(wood-vertical.svg) no-repeat center #d7c3a1;
    background-size: cover;
}

#side .layer1 {
    position:absolute; z-index:10;
    width:var(--grubosc-deski); height:100%;
    display:flex; flex-direction:column; justify-content: space-between;
}

#side .layer1 div { 
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width:100%; height:var(--szerokosc-deski);
    border:3px solid #ad9976;
    border-radius:4px;
    background:url(wood-horizontal.svg) no-repeat center #e7d2ae;
    background-size: cover;
}

#side .layer2 {
    position:absolute; left:var(--grubosc-deski);
    width:var(--wysokosc-klocka); height:100%;
    display:flex; flex-direction:column; justify-content: space-between;
}

#side .layer2 div { 
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width:var(--wysokosc-klocka); height:var(--szerokosc-deski);
    border:3px solid #ad9976;
    border-radius:4px;
    background:url(wood-diagonal.svg) no-repeat center #e7d2ae;
    background-size: cover;
}

#side .layer3 {
    position:absolute;
    width:var(--grubosc-deski); height:100%;
    left:calc(var(--wysokosc-klocka) + var(--grubosc-deski));
}

#side .layer3 div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width:var(--grubosc-deski); height:100%; 
    border:3px solid #ad9976;
    border-radius:4px;
    background-color:#d7c3a1;
    background:url(wood-vertical.svg) no-repeat center #d7c3a1;
    background-size: cover;
}

#side .layer4 {
    position:absolute;
    left:calc(var(--wysokosc-klocka) + var(--grubosc-deski) + var(--grubosc-deski));
    width:var(--grubosc-deski); height:100%;
    display:flex; flex-direction:column; justify-content: space-between;
}


#side .layer4 div { 
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width:100%; height:var(--szerokosc-deski);
    border:3px solid #ad9976;
    border-radius:4px;
    background:url(wood-horizontal.svg) no-repeat center #e7d2ae;
    background-size: cover;
}  

#top #opisDlugosc {
    top:-100px;
    width:var(--dlugosc-palety);
}

#top #opisSzerokosc {
    left:-50px;
    top:-22px;
    height:var(--szerokosc-palety);
    width:10px;
}

#details {
    position:absolute;
    bottom:0; left:0;
    width:96%; padding:2%;
}

input#paletName {
    font-size:24px;
    width:100%;
}

@media print{
    html, body {
        margin:0;
    }

    .printHidden {
        display:none;
    }
    
    .screenhidden {
        display:block;
    }

    
    #app {
        width:auto;
        height:auto;
        background:url(bg.svg);
        background-size:160px 160px;
        min-width:auto;
        min-height:auto;
    }
    
    #header {
        position:relative;
        top:auto; left:auto;
        width:auto;
        height:80px;
        background:#fff;
        color:#222;
        border-bottom:1px solid #ddd;
        justify-content:space-between;
    }
    
    #header h1 {
        text-align:right;
    }
    
    #footer {
        text-align:center;
        background-color: #fff;
        border-top:1px solid #ddd;
        position:relative;
        bottom:auto; left:auto;
        width:100%;
        font-size:10px;
        color:#555;
    }
    
    #rysunek {
        position:relative;
        width:900px; height:650px;
        transform: scale(0.5);
        left:auto; top:auto;
    }

    #paleta {
        position:absolute;
        left:50%; top:50%;
        transform: translate(-54%,-41%);
        z-index:-1;
    }
    
    #podpis {
        text-align:center;
        font-size:9px;
        font-style: italic;
        line-height:20px;
    }
    
    #wyliczenia {
        position: relative;
        right:auto; top:auto;
        transform:none;
        box-shadow:none;
        border:1px solid #ccc;
    }
    
    table {
        border-collapse: collapse;
        width:890px;
    }

    table th {
        font-weight:400;
        text-align:right;
        width:48%;
    }

    table td {
        font-weight:600;
        width:48%;
    }

    table th,
    table td {
        padding: 3px 1%;
    }

    .styled-table tr {
        border-bottom: 1px solid #dddddd;
    }

    .styled-table tr:nth-of-type(even) {
        background-color: #f3f3f3;
    }

    .styled-table tr:last-of-type {
        border-bottom: 2px solid #009879;
    }
}