body{
    background: #F9C800;
    width: 100%;
    height: 100%;
}

*{
    font-family:"Didact Gothic";
}

.container, .container-fluid {
    max-width: 900px;
}

.title {
    text-align: center;
    font-size: 2em;
    margin: 0 auto;
    display: block;
}

.numeric-amplitude {
    font-size:  80px;
    font-weight:  800;
    float:  left;
    line-height: 0.5em;
    margin-left: 30px;
    padding-bottom: 0px;
}

.dba {
    float: left;
    font-size: 27px;
    transform: rotateZ(-90deg);
    text-align: left;
    position:  absolute;
    bottom: -4px;
    left: 0;
}

.description {
    font-size:  18px;
    text-align:  center;
}

/*------------------------------------------ slider start -----------------------------------------------------*/

[id*=flat-slider].ui-slider,
[id*=flat-slider].ui-slider .ui-slider-pip .ui-slider-line {
    background: #7e8c9f;
}

[id*=flat-slider].ui-slider .ui-slider-handle .ui-slider-tip:after {
    border-left-color: #434d5a;
}

[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-hover,
[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-focus,
[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-active {
    border-color: white;
}

.ui-slider {
    margin: 30px auto;
    margin-top: 70px;
}

.ui-slider-pip:nth-of-type(odd) {
    top: auto !important;
    position:  absolute;
    bottom: 52px!important;
}

.ui-slider-pip:nth-of-type(odd) .ui-slider-line {
    top: 52px;
}

.ui-slider-pip:nth-of-type(even) {
    top: 20px !important;
    position:  absolute;
    bottom: auto!important;
}

.ui-slider-pip:nth-of-type(even) .ui-slider-line {
    top: -15px;
}

.ui-slider-pips .ui-slider-pip{
    color: #444444;
    font-size: 15px;
}

.ui-slider-pips .ui-slider-label {
    margin-left: -3em;
    width: 6em;
}

#flat-slider-vertical-3 .ui-slider-handle, #flat-slider-vertical-3 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line, #flat-slider-vertical-3 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line, #flat-slider-vertical-3 .ui-slider-range {
    background-color: #673AB7;
}

/*------------------------------------------ slider end -----------------------------------------------------*/

.title-image {
    margin: 0 auto;
    display: block;
    image-rendering: -moz-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}

.face {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    margin-top: 40px;
}

.slider-title {
    margin-top: -35px;
}

#overlay {
    position: fixed; /* Sit on top of the page content */
    display: block; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black; /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
    opacity: 1;
}

.hidden-animated{
    /*transition: all 0.5s ease;*/
    opacity: 0 !important;
}

/*------------------------------------------ headphones start -----------------------------------------------------*/
.centered {
    position: absolute;
    margin: auto;
    top:0; bottom:0; left:0; right:0;
}

/*.face {*/
/*width: 150px;*/
/*height: 150px;*/
/*background-color: #EBEBEB;*/
/*border-radius: 50%;*/
/*-webkit-mask: url(http://bdpcali.com/wp-content/uploads/2015/06/fe26d3_73c3dd22967c45b9ad144d63fb7b7a2b.png) top left / cover;*/
/*mask: url(http://bdpcali.com/wp-content/uploads/2015/06/fe26d3_73c3dd22967c45b9ad144d63fb7b7a2b.png) top left / cover;*/
/*}*/

/*.back {*/
/*width: 160px;*/
/*height: 160px;*/
/*border-radius: 50%;*/
/*background: -webkit-linear-gradient(top, #FF694C 0%, #F15378 40%, #E053D5 50%, #B54BEB 60%, #5B86EE 70%, #00EEEB 100%);*/
/*background: linear-gradient(top, #FF694C 0%, #F15378 30%, #E053D5 40%, #B54BEB 60%, #5B86EE 70%, #00EEEB 100%);*/

/*-webkit-filter: saturate(0.5);*/
/*filter: saturate(0.5);*/
/*-webkit-transform: scale(1) rotate(-25deg);*/
/*transform: scale(1) rotate(-25deg);*/
/*-webkit-animation: spin 0.3s infinite linear alternate;*/
/*animation: spin 0.3s infinite linear alternate;*/
/*}*/

.headphones {
    width: 320px;
    height: 120px;
    -webkit-animation: bounce 0.3s linear infinite alternate;
    animation: bounce 0.3s linear infinite alternate;
}

.earmuff {
    float: left;
    width: 20px;
    height: 120px;
    background: #FA7B57;
    border-radius: 50% 10px 10px 50%;
    border-right: #FA8E57 solid 20px;

}
.earmuff:nth-child(2){
    float: right;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.band {
    width: 320px;
    height: 300px;
    border-radius: 50%;
    background-color: trnasparent;
    border-top: #FA7B57 solid 40px;
    z-index: -99;
}

.music {
    width: 450px;
    height: 50px;
}
.group1{
    float: left;
}
.group2{
    float: right;
    -webkit-transform: rotate(180deg);
}
.wave {
    display: inline-block;
    width: 10px;
    height: 50px;
    opacity: 0.2;
    background-color: #FA7B57;
    -webkit-animation: wave 0.3s 0.2s linear infinite alternate;
    animation: wave 0.3s 0.2s linear infinite alternate;
}
.wave:nth-child(2) {
    -webkit-animation: wave 0.3s 0.1s linear infinite alternate;
    animation: wave 0.3s 0.1s linear infinite alternate;
}
.wave:nth-child(3) {
    -webkit-animation: wave 0.3s linear infinite alternate;
    animation: wave 0.3s linear infinite alternate;
}

@keyframes spin {
    to {
        -webkit-filter: saturate(1);
        -webkit-transform: scale(1.05) rotate(-25deg);
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-filter: saturate(1);
        -webkit-transform: scale(1.05) rotate(-25deg);
    }
}

@keyframes bounce {
    to {
        -webkit-transform: scale(1.05);
    }
}

@-webkit-keyframes bounce {
    to {
        -webkit-transform: scale(1.05);
    }
}

@-webkit-keyframes wave {
    to {
        opacity: 1;
        -webkit-transform: scaleY(2);
    }
}

#overlay * {
    box-sizing: content-box;
}

.no-display {
    display: none!important;
}

.use-headphones {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 21px;
}

#overlay {
    z-index: 99999;
}
/*------------------------------------------ headphones end -----------------------------------------------------*/

/*------------------------------------------ smiley face start -----------------------------------------------------*/

/*g#smile-teeth-tongue, g#smile-teeth, g#tongue-out {*/
/*opacity: 0;*/
/*}*/

g#tongue-out {
    transition: all 0.1s ease;
    opacity: 0;
}

.face:hover g#tongue-out {
    opacity: 1;
}

.face:hover g#left-eyebrow-normal,
.face:hover g#right-eyebrow-normal {
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.face:hover g#right-eyebrow-normal {
    -webkit-transform: translateY(6px) rotate(15deg);
    -moz-transform: translateY(6px) rotate(15deg);
    -ms-transform: translateY(6px) rotate(15deg);
    -o-transform: translateY(6px) rotate(15deg);
    transform: translateY(6px) rotate(15deg);
    -webkit-transform-origin: 170px 70px;
    -moz-transform-origin: 170px 70px;
    -ms-transform-origin: 170px 70px;
    -o-transform-origin: 170px 70px;
    transform-origin: 170px 70px;
}

.face:hover g#left-eyebrow-normal {
    -webkit-transform: translateY(8px) rotate(15deg);
    -moz-transform: translateY(8px) rotate(15deg);
    -ms-transform: translateY(8px) rotate(15deg);
    -o-transform: translateY(8px) rotate(15deg);
    transform: translateY(8px) rotate(15deg);
    -webkit-transform-origin: 95px 80px;
    -moz-transform-origin: 95px 80px;
    -ms-transform-origin: 95px 80px;
    -o-transform-origin: 95px 80px;
    transform-origin: 95px 80px;
}

g#right-open-eye, g#left-open-eye {
    -webkit-animation: blink-eyes 8s infinite;
    -moz-animation: blink-eyes 8s infinite;
    -ms-animation: blink-eyes 8s infinite;
    -o-animation: blink-eyes 8s infinite;
    animation: blink-eyes 8s infinite;
    -webkit-transform-origin: 165px 85px;
    -moz-transform-origin: 165px 85px;
    -ms-transform-origin: 165px 85px;
    -o-transform-origin: 165px 85px;
    transform-origin: 165px 85px;
}

g#left-open-eye {
    -webkit-transform-origin: 55px 85px;
    -moz-transform-origin: 55px 85px;
    -ms-transform-origin: 55px 85px;
    -o-transform-origin: 55px 85px;
    transform-origin: 55px 85px;
}

@-webkit-keyframes blink-eyes {
    0% {
        -webkit-transform: scaleX(1) scaleY(1);
    }
    1% {
        -webkit-transform: scaleX(1.3) scaleY(0.1);
    }
    2% {
        -webkit-transform: scaleX(1) scaleY(1);
    }
    60% {
        -webkit-transform: scaleX(1) scaleY(1);
    }
    61% {
        -webkit-transform: scaleX(1.3) scaleY(0.1);
    }
    62% {
        -webkit-transform: scaleX(1) scaleY(1);
    }
    100% {
        -webkit-transform: scaleX(1) scaleY(1);
    }
}
@-moz-keyframes blink-eyes {
    0% {
        -moz-transform: scaleX(1) scaleY(1);
    }
    1% {
        -moz-transform: scaleX(1.3) scaleY(0.1);
    }
    2% {
        -moz-transform: scaleX(1) scaleY(1);
    }
    60% {
        -moz-transform: scaleX(1) scaleY(1);
    }
    61% {
        -moz-transform: scaleX(1.3) scaleY(0.1);
    }
    62% {
        -moz-transform: scaleX(1) scaleY(1);
    }
    100% {
        -moz-transform: scaleX(1) scaleY(1);
    }
}
@-ms-keyframes blink-eyes {
    0% {
        -ms-transform: scaleX(1) scaleY(1);
    }
    1% {
        -ms-transform: scaleX(1.3) scaleY(0.1);
    }
    2% {
        -ms-transform: scaleX(1) scaleY(1);
    }
    60% {
        -ms-transform: scaleX(1) scaleY(1);
    }
    61% {
        -ms-transform: scaleX(1.3) scaleY(0.1);
    }
    62% {
        -ms-transform: scaleX(1) scaleY(1);
    }
    100% {
        -ms-transform: scaleX(1) scaleY(1);
    }
}
@-o-keyframes blink-eyes {
    0% {
        -o-transform: scaleX(1) scaleY(1);
    }
    1% {
        -o-transform: scaleX(1.3) scaleY(0.1);
    }
    2% {
        -o-transform: scaleX(1) scaleY(1);
    }
    60% {
        -o-transform: scaleX(1) scaleY(1);
    }
    61% {
        -o-transform: scaleX(1.3) scaleY(0.1);
    }
    62% {
        -o-transform: scaleX(1) scaleY(1);
    }
    100% {
        -o-transform: scaleX(1) scaleY(1);
    }
}
@keyframes blink-eyes {
    0% {
        transform: scaleX(1) scaleY(1);
    }
    1% {
        transform: scaleX(1.3) scaleY(0.1);
    }
    2% {
        transform: scaleX(1) scaleY(1);
    }
    60% {
        transform: scaleX(1) scaleY(1);
    }
    61% {
        transform: scaleX(1.3) scaleY(0.1);
    }
    62% {
        transform: scaleX(1) scaleY(1);
    }
    100% {
        transform: scaleX(1) scaleY(1);
    }
}

/*------------------------------------------ smiley face end -----------------------------------------------------*/

/*------------------------------------------ calm face start -----------------------------------------------------*/

#calm-smile{
    animation: calm-smile 4s infinite;
    transform-origin: 50% 0%;
}

@keyframes calm-smile{
    0% {
        transform:  rotate(0deg) ;
    }
    20% {
        transform:  rotate(-5deg) ;
    }
    25% {
        transform:  rotate(0deg) ;
    }
    100% {
        transform:  rotate(0deg) ;
    }

}

#calm-left-eyebrow, #calm-right-eyebrow{
    animation: calm-eyebrows 4s infinite;
    transform-origin: 50% 0%;
}

@keyframes calm-eyebrows{
    0% {
        transform:  translateY(10px) ;
    }
    20% {
        transform:  translateY(0px) ;
    }
    25% {
        transform:  translateY(10px) ;
    }
    100% {
        transform:  translateY(10px) ;
    }
}

/*------------------------------------------ disappointed face start -----------------------------------------------------*/

#disappointed-mouth{
    animation: disappointed-mouth 4s infinite;
    transform-origin: 50% 0%;
}

@keyframes disappointed-mouth{
    0% {
        transform:  translateY(10px) ;
    }
    20% {
        transform:  translateY(0px) ;
    }
    25% {
        transform:  translateY(10px) ;
    }
    100% {
        transform:  translateY(10px) ;
    }
}


#disappointed-left-eyebrow{
    animation: disappointed-left-eyebrow 4s infinite;
    transform-origin: 50% 0%;
}

@keyframes disappointed-left-eyebrow{
    0% {
        transform:  translateY(0px) ;
    }
    20% {
        transform:  translateY(-3px) ;
    }
    25% {
        transform:  translateY(0px) ;
    }
    100% {
        transform:  translateY(0px) ;
    }

}

#disappointed-right-eyebrow{
    animation: disappointed-right-eyebrow 4s infinite;
    transform-origin: 50% 0%;
}

@keyframes disappointed-right-eyebrow{
    0% {
        transform:  translateY(0px) ;
    }
    20% {
        transform:  translateY(-5px) ;
    }
    25% {
        transform:  translateY(0px) ;
    }
    100% {
        transform:  translateY(0px) ;
    }

}

#disappointed-left-pupil, #disappointed-right-pupil{
    animation: disappointed-pupils 4s infinite;
    transform-origin: 50% 0%;
}

@keyframes disappointed-pupils{
    0% {
        transform:  translateX(0px) ;
    }
    20% {
        transform:  translateX(-9px) ;
    }
    45% {
        transform:  translateX(9px) ;
    }
    100% {
        transform:  translateX(0px) ;
    }

}

/*------------------------------------------ annoyed face start -----------------------------------------------------*/

#annoyed-mouth{
    animation: annoyed-mouth 4s infinite;
    transform-origin: 50% 0%;
}

@keyframes annoyed-mouth {
    0% {
        transform:  translate(0px,0px)  ;
    }
    10% {
        transform:  translate(0px,-5px)  ;
    }
    20% {
        transform:  translate(0px,5px)  ;
    }
    30% {
        transform:  translate(0px,0px)  ;
    }
    100% {
        transform:  translate(0px,0px)  ;
    }
}

#annoyed-left-eyebrow{
    animation: annoyed-left-eyebrow 4s infinite;
    transform-origin: 0% 0%;
}

#annoyed-right-eyebrow{
    animation: annoyed-right-eyebrow 4s infinite;
    transform-origin: 80% 0%;
}

@keyframes annoyed-left-eyebrow{
    0% {
        transform:  rotateZ(0deg) translateX(0px) ;
    }
    20% {
        transform:  rotateZ(-3deg) translateX(-10px) ;
    }
    25% {
        transform:  rotateZ(0deg) translateX(0px) ;
    }
    100% {
        transform:  rotateZ(0deg) ;
    }

}

@keyframes annoyed-right-eyebrow{
    0% {
        transform:  rotateZ(0deg) ;
    }
    20% {
        transform:  rotateZ(5deg) ;
    }
    25% {
        transform:  rotateZ(0deg) ;
    }
    100% {
        transform:  rotateZ(0deg) ;
    }

}

#annoyed-left-pupil, #annoyed-right-pupil{
    animation: disappointed-pupils 4s infinite;
    transform-origin: 50% 0%;
}


/*------------------------------------------ scared face start -----------------------------------------------------*/


#scared-mouth {
    animation: scared-mouth-shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
    transform: translate3d(0, 0, 0);
}

@keyframes scared-mouth-shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}


#scared-left-eyebrow, #scared-right-eyebrow{
    animation: scared-eyebrows 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
    transform-origin: 0% 0%;
}

@keyframes scared-eyebrows {
    10%, 90% {
        transform: translate3d(-1px, 0, 0) rotateZ(-0.5deg);
    }

    20%, 80% {
        transform: translate3d(1px, 0, 0) rotateZ(0.5deg);
    }

    30%, 50%, 70% {
        transform: translate3d(-2px, 0, 0) rotateZ(-0.5deg);
    }

    40%, 60% {
        transform: translate3d(0px, 0, 0) rotateZ(0deg) ;
    }
}

#scared-left-pupil, #scared-right-pupil{
    animation: scared-pupils 2s infinite;
}

@keyframes scared-pupils{
    0% {
        transform:  translateX(0px) ;
    }
    20% {
        transform:  translateX(-19px) ;
    }
    45% {
        transform:  translateX(5px) ;
    }
    100% {
        transform:  translateX(0px) ;
    }

}

/*------------------------------------------ surprised face start -----------------------------------------------------*/

#surprised-mouth {
    animation: scared-mouth-shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
    transform: translate3d(0, 0, 0);
    transform-origin: 50% 0%;
}

@keyframes scared-mouth-shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0) scale(1.05);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

#surprised-left-eye {
    animation: surprised-eye 1s infinite;
    transform-origin: 30% 40%;
}

#surprised-right-eye {
    animation: surprised-eye 1s infinite;
    transform-origin: 60% 40%;
}

#surprised-left-eyebrow{
    animation: surprised-eye 1s infinite;
    transform-origin: 40% 40%;
}

#surprised-right-eyebrow{
    animation: surprised-eye 1s infinite;
    transform-origin: 60% 40%;
}


@keyframes surprised-eye{
    0% {
        transform:  scale(1) ;
    }
    20% {
        transform:  scale(1.05) ;
    }
    35% {
        transform:  scale(1) ;
    }
    100% {
        transform:  scale(1) ;
    }

}

/*------------------------------------------ dead face start -----------------------------------------------------*/


#dead-tongue {
    animation: dead-tongue 5.5s infinite;
    transform: translate3d(0, 0, 0);
    transform-origin: 50% 0%;
}

@keyframes dead-tongue {
    0% {
        transform:  translateX(0) ;
    }
    20% {
        transform:  translateX(5px) ;
    }
    35% {
        transform:  translateX(0) ;
    }
    100% {
        transform:  translateX(0) ;
    }
}

#dead-left-eye {
    animation: dead-left-eyebrow 3s infinite;
    transform-origin: 35% 35%;
}

#dead-right-eye {
    animation: dead-left-eyebrow 3s infinite;
    transform-origin: 60% 35%;
}

@keyframes dead-left-eyebrow {
    0% {
        transform:  scale(1) ;
    }
    40% {
        transform:  scale(0.5) ;
    }
    55% {
        transform:  scale(1) ;
    }
    100% {
        transform:  scale(1) ;
    }
}


svg#mute-icon {
    max-width: 65px;
    position:  absolute;
    right: 0;
    top: 0px;
    height: 65px;
    width: 65px;
    border-radius:  100px;
    border: 2px solid;
    box-shadow: #00000070 3px 4px 8px -1px;
    padding: 10px;
    opacity:  1;
    transition: all 0.5s ease;
}

.app-loading {
    position: absolute;
    top: 81%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 15px;
}

.mute-button svg {
    margin-top: -15px;
}