@font-face {
    font-family: 'Conv_Roboto-Medium';
    src: url('fonts/Roboto-Medium.eot');
    src: local('☺'), url('fonts/Roboto-Medium.woff') format('woff'), url('fonts/Roboto-Medium.ttf') format('truetype'), url('fonts/Roboto-Medium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Conv_Roboto-Black';
    src: url('fonts/Roboto-Black.eot');
    src: local('☺'), url('fonts/Roboto-Black.woff') format('woff'), url('fonts/Roboto-Black.ttf') format('truetype'), url('fonts/Roboto-Black.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Conv_RobotoCondensed-Regular';
    src: url('fonts/RobotoCondensed-Regular.eot');
    src: local('☺'), url('fonts/RobotoCondensed-Regular.woff') format('woff'), url('fonts/RobotoCondensed-Regular.ttf') format('truetype'), url('fonts/RobotoCondensed-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Conv_BebasNeue Book';
    src: url('fonts/BebasNeue Book.eot');
    src: local('☺'), url('fonts/BebasNeue Book.woff') format('woff'), url('fonts/BebasNeue Book.ttf') format('truetype'), url('fonts/BebasNeue Book.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Aller-Regular';
    src: url('fonts/Aller-Regular.eot');
    src: local('☺'), url('fonts/Aller-Regular.woff') format('woff'), url('fonts/Aller-Regular.ttf') format('truetype'), url('fonts/Aller-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-Light';
    src: url('fonts/Roboto-Light.eot');
    src: local('☺'), url('fonts/Roboto-Light.woff') format('woff'), url('fonts/Roboto-Light.ttf') format('truetype'), url('fonts/Roboto-Light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
h1{font-family: 'Roboto', sans-serif;line-height: 1.1;font-size: 3em;}
h2{font-size: 23px;}
h3{font-family: 'Roboto', sans-serif;line-height: 1.1;font-size: 2em;}
h4{font-size: 16px;font-family: 'Roboto-Light';}
.header,.satisfied-result,.aspects,.happiness,.rate,.notes,.footer{padding: 90px 0;}
.header,.footer{background-color: #000000;color:#ffffff;background-image: url('../svg/dots.svg');}
.header h1{margin-bottom: 10px;text-transform: uppercase;} 
.header h2{font-family: Conv_Roboto-Medium;}
.satisfied-result .wrapper{margin: 112px auto 0 auto;}
.range input[type=range]:focus {outline: none;}
.range input[type=range][disabled] {opacity: .3;cursor: default;}
.client-name input{
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 10px 20px;
    margin: 8px 0;
width: 27%;}
    
.range .rangeslider {position: relative;height: 22px;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.range .rangeslider:before {box-sizing: border-box;width: 100%;height: 15px;background: #e6e6e6;border-radius: 100px;content: "";position: absolute;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}
.range input::-webkit-slider-runnable-track {box-sizing: border-box;width: 100%;height: 4px;background: #e6e6e6;border-radius: 100px;margin: 11px 0;}
.range input::-moz-range-track {box-sizing: border-box;width: 100%;height: 4px;background: #e6e6e6;border-radius: 100px;margin: 11px 0;}
.range input::-ms-track {box-sizing: border-box;width: 100%;height: 4px;background: #e6e6e6;border-radius: 100px;color: transparent;padding: 11px 0;background: transparent;border-color: transparent;}
.range input::-ms-fill-lower,.range input::-ms-fill-upper {box-sizing: border-box;width: 100%;height: 4px;background: #e6e6e6;border-radius: 100px;}
.range input::-ms-fill-lower {background: #58595b;}
.range .rangeslider-fill-lower {background-color: #231f20;border-radius: 100px;position: absolute;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);height: 15px;will-change: width;border: 2px solid #58595b;}
.range input::-webkit-slider-thumb {box-sizing: border-box;box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);border: 6px solid #fff;height: 24px;width: 24px;border-radius: 100px;background: #333940;cursor: pointer;-webkit-appearance: none;appearance: none;-webkit-transform: translateY(-50%);transform: translateY(-50%);margin-top: 2px;}
.range input::-moz-range-thumb {box-sizing: border-box;box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);border: 6px solid #fff;height: 24px;width: 24px;border-radius: 100px;background: #333940;cursor: pointer;}
.range input::-ms-thumb {box-sizing: border-box;box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);border: 6px solid #fff;height: 24px;width: 24px;border-radius: 100px;background: #333940;cursor: pointer;}
.range .rangeslider-thumb {border: 3px solid #58595b;background: #ffffff;cursor: default;box-sizing: border-box;height: 24px;width: 24px;border-radius: 100px;cursor: pointer;position: absolute;touch-action: pan-x;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);will-change: left;}
.range .range-output {position: absolute;left: 6px;top: 6px;-webkit-transform-origin: 0 0;transform-origin: 0 0;transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.range .range-output .output {font-family: Conv_RobotoCondensed-Regular;display: block;position: absolute;height: 68px;width:68px;line-height: 60px;min-width: 32px;padding: 0 20px;top: -26px;-webkit-transform: translate(-50%, -100%);transform: translate(-50%, -100%);background: #e6e6e6;color: #231f20;border-radius: 100px;white-space: nowrap;font-weight: bold;font-size: 1.2em;text-align: center;    padding-top: 5px;}
.range .range-output .output:before {content: "";position: absolute;bottom: -8px;left: 50%;border: 10px solid #e6e6e6;border-bottom: none;border-left-color: transparent;border-right-color: transparent;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
/*aspect*/
.aspects{background-color: #f1f1f2;}
.content-slider{margin: auto;}
.content-slider>div{margin-bottom: 25px;}
h3{margin-bottom: 45px;}
/*slider*/
.no-ui-slider{margin-top: 7px;}
.noUi-target,.noUi-target * {-webkit-touch-callout: none;-webkit-user-select: none;-ms-touch-action: none;-ms-user-select: none;-moz-user-select: none;-moz-box-sizing: border-box;box-sizing: border-box;}
.noUi-base {width: 100%;height: 100%;position: relative;}
.noUi-origin {position: absolute;right: 0;top: 0;left: 0;bottom: 0;}
.noUi-handle {position: relative;z-index: 1;cursor: move;}
.noUi-handle:hover {cursor: pointer;}
.noUi-stacking .noUi-handle {z-index: 10;}
.noUi-stacking + .noUi-origin {*z-index: -1;}
.noUi-state-tap .noUi-origin {-webkit-transition: left 0.3s, top 0.3s;transition: left 0.3s, top 0.3s;}
.noUi-state-drag * {cursor: inherit !important;}
.noUi-horizontal {height: 15px;}
.noUi-horizontal .noUi-handle {width: 22px;height: 22px;left: -13px;top: -4px;border-radius: 100%;}
.noUi-horizontal.noUi-extended {padding: 0 15px;}
.noUi-horizontal.noUi-extended .noUi-origin  {right: -15px;}
.noUi-vertical {width: 18px;}
.noUi-vertical .noUi-handle {width: 20px;height: 20px;left: -10px;top: -6px;border-radius: 100%;}
.noUi-vertical.noUi-extended {padding: 15px 0;}
.noUi-vertical.noUi-extended .noUi-origin  {bottom: -15px;}
.noUi-background {background: #e6e6e6;}
.noUi-connect {background: #231f20;box-shadow: inset 0 0 3px rgba(51,51,51,0.45);-webkit-transition: background 450ms;transition: background 450ms;}
.noUi-origin {border-radius: 10px;right: -2px;}
.noUi-target {border-radius: 10px;border: none;}
.noUi-dragable {cursor: w-resize;}
.noUi-vertical .noUi-dragable {cursor: n-resize;}
.noUi-handle {border: 3px solid #58595b;border-radius: 100%;background: #ffffff;cursor: default;}
.noUi-handle:before,.noUi-handle:after {display: block;position: absolute;height: 14px;width: 1px;background: #E8E7E6;left: 14px;top: 6px;}
.noUi-handle:after {left: 17px;}
.noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after {width: 14px;height: 1px;left: 6px;top: 14px;}
.noUi-vertical .noUi-handle:after {top: 17px;}
[disabled].noUi-connect, [disabled] .noUi-connect {background: #B8B8B8;}
[disabled] .noUi-handle {cursor: not-allowed;}
/*slider-fin*/
/* .happiness span.value-slider{right: -35px;width: 30px;height: 30px;color: #ffffff;border-radius: 50%;background-color: #231f20;text-align:center;}
.happiness span#pourcentage{right: -63px;color: #231f20;} */
.happiness span{margin-top: -8px;position: absolute;padding-top: 2px;}
/*rate*/
.rate{background-color:#000000;color:#ffffff;position: relative;}
/* .upper-bg,.lower-bg{width:100%;background-color: #000000;color:#ffffff;background-image: url('../svg/dots.svg');height: 20px;position: absolute;opacity: 0.7;}
.upper-bg{top:0;}
.lower-bg{bottom:0;} */
/*rating*/
.my-rating{margin-top: -3px;}
.jq-star {margin-right: 30px;}
.jq-star-svg{padding-left: 0!important;;}
/*notes*/
textarea{width:100%;font-family: Roboto-Light;font-size: 16px;color:#231f20;padding: 8px;border: 2px solid #231f20;text-align: center; }
textarea:focus{outline: none;}
::-webkit-input-placeholder {
    font-family: Roboto-Light;font-size: 18px;color:#231f20;
}
::-moz-placeholder {
    font-family: Roboto-Light;font-size: 18px;color:#231f20;
}
:-ms-input-placeholder {
    font-family: Roboto-Light;font-size: 18px;color:#231f20;
}
:-moz-placeholder {
    font-family: Roboto-Light;font-size: 18px;color:#231f20;
}
.submit-btn{margin-top: 40px;}
.btn-primary,.btn-primary:hover{color: #ffffff;border-color: transparent;background: #2b2b2b;color: #fff;padding: 15px;min-width: 250px;max-width: 46%;font-family: 'Roboto', sans-serif;text-transform: uppercase;font-size: 14px;}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {background-color: #231f20;border-color: transparent;}
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {box-shadow: none;}
.btn-primary:focus, .btn-primary.focus {box-shadow:none;outline: none;}
.btn-primary:hover{opacity: 0.7;text-decoration: none;cursor: pointer;}
.footer{margin-top: 80px;}
.footer h5{font-size: 12px;font-family: Roboto-Light;margin-top: 15px;}
.footer a svg {width: 15px;fill: #FFF;margin: 5px;}
/*thanks*/
.thanks .header{height: 100vh;}
.thanks h1{display: flex;justify-content: center;align-items: center;height: 100%;font-size: 60px;font-weight: 700;}
.footer {margin-top: 0;}

@media only screen and (max-width: 769px) {
    h1{font-size: 1.5em;}
    h2{font-size: 14px;}
    h3{font-size: 1em;}
    .header, .satisfied-result, .aspects, .happiness, .rate, .notes, .footer {padding: 43px 0;}
    .rate h4{text-align: center;}
    .my-rating{margin: auto;}
    .header h1{margin-top: 0;}
    .jq-star {margin: 0 15px ;}
    .btn-primary, .btn-primary:hover {min-width: 185px;font-size: 12px;}
}