/* ----------------- HEADER ----------------- */
.konfigurator-header{
    background:#0a0c5e;
    position:relative;
    padding:20px;
    height:75px;
    box-sizing:border-box;
}
.konfigurator-header #logo{
    position:relative;
    top:0;
    padding:0;
    width:160px;
}
.konfigurator-header #logo a{
    background:url(/styles/default/img/logo-white.svg) no-repeat 0px 0px;
    display:block;
    display:inline-block;
    overflow:hidden;
    text-indent:-1300px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:auto;    
}
.myImage{
    display:inline-block;
    cursor:pointer;
    border:3px solid white;
    box-shadow:0 0 5px rgba(0,0,0,0.2);
}
.myImageSelected{border:3px solid green;}
.imageSettingsPanel{
    display:none;
}
.header-info{
    position:absolute;
    top:1.3em;
    right:1.5em;
    color:white;
    font-size:1.5em;
}
.header-info a{
    display:inline-block;
    color:white;
    font-weight:200;
    text-decoration:none;
    margin-left:2em;
}
.header-info a span{
    font-size:0.8em;
}
/* ----------------- WALL ----------------- */
.picture-wall{
    position:absolute;
    background: url(img/background.jpg) no-repeat;
    background-position: center 0px;
    background-size:100% auto;
    width:100%;
}
.picture-wall,
.canvasShadow,
.canvas-container,
.picture-wall canvas{
    transform-origin: center;
    transition: all 0.5s ease-in-out;
}
.picture-wall:before {
    content:"";
    display:block;
    padding-top:75%;
    float:left;
}
.picture-wall:after {
    content:"";
    display:block;
    position:relative;
    clear:left;
}

/* ----------------- PICTURE ----------------- */
.picture-frame{
    position:absolute;
    width:30%;
    left:39.5%;
    top:23%;
    transform:translate(-50%,-50%);
    background-position: center center;
    background-size:cover;
    overflow:hidden;
    transition:all 0.5s ease-in-out;
    opacity:0;
}
.setFrame{
    display:inline-block;
    width:100px;
    margin-bottom:5px;
}
.openCart{
    font-size:1.3em;
}
.openCart span.cartCount{
    background:red;
    color:white;
    border-radius:50%;
    font-size:11px !important;
    width:1.5em;
    height:1.5em;
    line-height:1.5em;
    display:block;
    text-align:center;
    position:absolute;
    top:-0.5em;
    right:-0.5em;
}

#canvas{
}
.canvasShadow{
    width:100%;
    box-shadow:inset 0.1em 0.1em 0.1em 0 rgba(255,255,255,0.5),  0.2em 0.2em 0.5em 0 rgba(0,0,0,0.3);
    position:absolute;
    z-index:1;
    pointer-events:none;
    background: linear-gradient(to bottom right, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 55%);
}

/* ----------------- CONTENT ----------------- */
.konfigurator-content{
    overflow:hidden;
    background:#eee;
    height:calc(100dvh - 150px);
    width:calc(100vw);
    position:relative;
}

/* ----------------- RIGHT ----------------- */

.konfigurator-right{
    overflow:hidden;
    background:rgba(255,255,255,0.8);
    position:absolute;
    height:calc(100dvh - 150px);
    width:450px;
    top:75px;
    right:0;
    box-sizing:border-box;
    padding:20px;
}

/* ----------------- BOTTOM ----------------- */
.konfigurator-bottom{
    background:#444;
    position:relative;
    padding:20px;
    height:75px;
    box-sizing:border-box;
    text-align:right;
}

.dataloader{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    right:0;
    text-align:center;
    line-height:100vh;    
    background:rgba(0,0,0,0.1);
    display:none;
}

.totalPriceShow{
    display:inline-block;
    padding-top:3px;
    padding-right:50px;
    font-size:18px;
    color:white;
}
.totalPriceShow span{
    font-weight:bold;
    font-size:24px;
}

@media screen and (max-width: 699px) {
    .pictureCanvas{
        position:relative;
    }
    
    .konfigurator-header,
    .konfigurator-content{
        position:fixed;
        top:75px;
        left:0;
        width:100vw;
        z-index:4;
    }
    .konfigurator-content{box-shadow: 0 0 50px rgba(0,0,0,0.6);}
    .konfigurator-header{z-index:5;top:0;}
    .picture-wall:before {
        content:"";
        display:block;
        padding-top:100%;
        float:left;
    }

    .totalPriceShow{
        display:block;
        padding:0 0 10px 0;
    }
    .header-info a{
        margin-left:0.5em;
    }
    .header-info a span{
        display:none;
    }
    .picture-wall{
        position:relative;
    }
    
    .konfigurator-content{
        height:auto;
    }
    
    .konfigurator-bottom{
        background: linear-gradient(to top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 15%, rgba(0,0,0,0) 38%,rgba(0,0,0,0) 100%);
        position:fixed !important;
        left:0;
        top:0;
        right:0;
        text-align:right;
        height:auto;
        padding:10px;
        padding-top:calc(100%);
        z-index:5;
    }
    
    .konfigurator-right{
        overflow:hidden;
        background:rgba(255,255,255,0.8);
        position:relative;
        height:auto;
        width:100%;
        top:inherit;
        right:inherit;
        padding-top:calc(100% + 95px);
    }
}