/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 26 2020 | 15:18:52 */
body{
    font-family:"Roboto";
}

.simulator-container{
    margin:48px;
    background-color:#EEEEEE;
}
.sottovoce-stereo3-customizer{
    padding:48px;
    display:flex;
    flex-flow:row nowrap;
    min-height:60vh;
}
.sottovoce-stereo3-customizer-image{
    display:flex;
    flex-flow:column nowrap;
    align-items: stretch;
    flex-grow:1;
    flex-shrink:1;
    margin-right:48px;
}
.sottovoce-stereo3-customizer-image-container{
    flex-grow:1;
    flex-shrink:1;
    height:100%;
    position:relative;
}
img.sottovoce-stereo3-customizer-image-element{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: contain;
}
.sottovoce-stereo3-customizer-image-color-titles{
    flex-grow:0;
    flex-shrink:0;
    margin-top:24px;
    text-align: center;
    min-height:48px;
    display:flex;
    flex-flow:column nowrap;
    align-items:center;
    justify-content: center;
}
.sottovoce-stereo3-customizer-image-title-main-color{
    font-size:16px;
    line-height: 24px;
    font-weight: bold;
}
.sottovoce-stereo3-customizer-image-title-secondary-color{
    font-size:14px;
    line-height: 16px;
    font-weight: bold;
}
.sottovoce-stereo3-customizer-colorcolumn{
    flex-grow:0;
    flex-shrink:0;
}
.sottovoce-stereo3-customizer-colorgroup{
    margin-bottom:24px;
}
.sottovoce-stereo3-customizer-colorgroup:last-child{
    margin-bottom:0;
}
.sottovoce-stereo3-customizer-colorgroup-label{
    font-size:10px;
    line-height: 16px;
    margin-bottom:8px;
    display: block;
    text-transform:uppercase;
    letter-spacing: 0.1em;
}
.sottovoce-stereo3-customizer-color{
    width:240px;
    display:flex;
    margin-bottom:8px;
}
.sottovoce-stereo3-customizer-color-clickable{
    width:100%;
    display:flex;
    cursor: pointer;
}
.sottovoce-stereo3-customizer-color-input{
    width:0;
    height:0;
    margin:0;
    visibility: hidden;
}
.sottovoce-stereo3-customizer-color-label{
    width:100%;
    position:relative;
    display:flex;
}
.sottovoce-stereo3-customizer-color-input:checked~.sottovoce-stereo3-customizer-color-label::before{
    content:"";
    position:absolute;
    width:2px;
    background-color:black;
    right:calc(100% + 8px);
    top:0;
}
.sottovoce-stereo3-customizer-color:last-child{
    margin-bottom:0;
}
.sottovoce-stereo3-customizer-color-bigcolor{
    flex-basis:75%;
    margin-right:4px;
}
.sottovoce-stereo3-customizer-color-smallcolor{
    flex-basis:25%;
}
.sottovoce-stereo3-customizer-color-sample{
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    position:relative;
}
.sottovoce-stereo3-customizer-color-input:checked~.sottovoce-stereo3-customizer-color-label::before,
.sottovoce-stereo3-customizer-color-sample{
    height:32px;
}
.sottovoce-stereo3-customizer-color-sample.shiny::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity: .2;
    background: rgb(0,0,0);
    background: -moz-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 100%);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 15%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}
.sottovoce-stereo3-customizer-color-sample.shiny::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity: .7;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}
.sottovoce-stereo3-customizer-color-name{
    font-size:14px;
    line-height:16px;
    margin-top:8px;
    letter-spacing: 0.0313em;
    white-space: nowrap;
}

.config-disclaimer{
  font-size:.7em; font-weight:300; font-style:italic; position:absolute; bottom:0px; padding:10px;
}

@media only screen and (max-width:767px){
    .simulator-container{
        margin:16px;
    }
    .sottovoce-stereo3-customizer{
        flex-flow:column nowrap;
        padding:16px;
        min-height:80vh;
    }
    .sottovoce-stereo3-customizer-image{
        margin:0;
    }
    .sottovoce-stereo3-customizer-colorcolumn{
        overflow:auto;
        margin:0 -16px;
        margin-bottom: -16px;
        display:flex;
    }
    .sottovoce-stereo3-customizer-form{
        display:flex;
        flex-flow:row nowrap;
        margin:0 auto;
    }
    .sottovoce-stereo3-customizer-colorgroup{
        margin:0;
        margin-right: 16px;
        padding-right: 16px;
        border-right: 1px solid transparent;
        position:relative;
    }
    .sottovoce-stereo3-customizer-colorgroup::after{
        content:"";
        position:absolute;
        right:0;
        top:20px;
        width:1px;
        height:16px;
        background-color:rgba(0,0,0,.1);
    }
    .sottovoce-stereo3-customizer-colorgroup:first-child{
        padding-left:16px;
    }
    .sottovoce-stereo3-customizer-colorgroup:last-child{
        padding-right:16px;
        border-right: none;
        margin-right:0;
    }
    .sottovoce-stereo3-customizer-colorgroup:last-child::after{
        content:none;
    }
    .sottovoce-stereo3-customizer-colorgroup-label{
        display:none;
    }
    .sottovoce-stereo3-customizer-colorgroup-content{
        display:flex;
        flex-flow:row nowrap;
    }
    .sottovoce-stereo3-customizer-color{
        width:64px;
        margin-bottom: 0;
        margin-right:8px;
    }
    .sottovoce-stereo3-customizer-color:last-child{
        margin-right:0;
    }
    .sottovoce-stereo3-customizer-color-name{
        display:none;
    }
    .sottovoce-stereo3-customizer-color-sample{
        height:8px;
        margin:24px 0 !important;
    }
    .sottovoce-stereo3-customizer-color-input:checked~.sottovoce-stereo3-customizer-color-label::before{
        height:2px;
        width:100%;
        top:calc(100% - 16px);
        right:0;
    }
}