html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead  {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: none;
}

tr, th, td{margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}

/* remember to define focus styles! */
:focus {
 outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: collapse;
 border-spacing: 0;
}

div,p,h1,h2,h3,ul,table,a,article,section,nav,aside,header,footer{;overflow:hidden;zoom:1;}

@font-face {
 font-family: 'Banda Regular';
 src: url('/fonts/regular.eot');
 src: local('☺'), url('/fonts/regular.woff') format('woff'), url('/fonts/regular.ttf') format('truetype'), url('/fonts/regular.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

.clearleft{clear:left}
hr{border:0;}
u{text-decoration:underline}

input {
    -webkit-appearance: none;
 border-radius:0;
 border:solid 1px #ccc;
}

a{color:#000;text-decoration:none}
a:hover{text-decoration:none}
.center{width:1000px;position:relative;margin:0 auto}

.left{float:left;}
.right{float:right}
.clear{clear:both;height:0;}
.alignright{text-align:right}
.nomargin{margin:0 !important}
.nomarginright{margin-right:0 !important}
.noborder{border:0 !important}
.nopadding{padding:0 !important}
.nodisplay{display:none}

.marginrigth{margin-right:15px}
.marginleft{margin-left:15px}
.margintop{margin-top:15px}
.marginbottom{margin-bottom:15px}
.rgpd{text-align:left}
.textcenter{text-align:center}

.errorS{color:red}
.errorField{color:#FF0000!important}
.FieldError{border:solid 1px #FF0000 !important}
.breadcrumb{text-transform:uppercase}
.isOk{color:#F0CEC3;font-size:18px;padding:5px 0}
h1,h2,h3,h4{font-weight:normal}
html{width:100%;}
body{font-size:16px;width:100%;background:#fff;font-family:'Banda Regular',Arial, sans-serif;font-weight:300;line-height:18px;color:#fefefe;position:relative}
p,ul li{line-height:18px}
#Body{width:100%;position:relative;}
input{font-family:'Banda Regular',Arial, sans-serif;font-weight:300}
textarea{font-family:'Banda Regular',Arial, sans-serif;font-weight:300}

header{padding:0 2.5% 0 0;width:97.5%;background:#F8EBE7 url(/img/header.png) top right no-repeat;background-size:26%;height:100px;z-index:500}
header .menu{margin-left:50px;margin-right:5px;margin-top:30px;z-index:100}
header .menu a{display:block}
header .social{margin-top:30px;z-index:100}
header .social a{margin-left:15px;}
header .contact{margin-top:30px;z-index:100}

.fixedheader{position:fixed;z-index:500;top:0;left:0;border:solid 1px #fff}
.SearchPage{padding:50px 2.5%;width:95%}
.SearchPage .itemacc{width:48.75%;position:relative;margin-bottom:2.5%;} 

.container_cookies{background:#eee;width:97%;padding:5px 1.5%;color:#000;font-size:11px;position:fixed;bottom:0;left:0;z-index:950}
.container_cookies .text_cookies{float:left;margin-right:1.5%;max-width:95%}
.container_cookies .button_submit{background:#F0CEC3;color:#fff;padding:5px}

#Menu{display:none;background:#F8EBE7;position:fixed;top:100px;left:0;border-top:solid 5px #fff;padding:2.5%;width:95%;height:95%;z-index:500}
#Menu ul li.first {float:left;text-transform:uppercase;font-size:24px;width:25%}
#Menu ul li.acheter{width:50%}
#Menu ul li.first a{color:#F0CEC3}
#Menu ul li.first .ssmenu{font-size:18px;margin-top:15px}
#Menu ul li.first .ssmenu li{margin:10px 0;line-height:50px}
#Menu ul li.first .ssmenu li a{color:#000}

#Menu ul li.acheter  .ssmenu li{float:left;width:50%}
#Menu ul li.acheter  .ssmenu li a{display:block;line-height:50px}
#Menu ul li.acheter  .ssmenu li a img{float:left;margin-right:15px}
#Menu .infoagence{border-top:solid 2px #F0CEC3;clear:both;margin-top:20px;padding-top:20px}
#Menu .infoagence .logo{float:left;width:33.33%}
#Menu .infoagence .adr{float:left;width:33.33%;color:#000;line-height:24px}
#Menu .infoagence .call{float:left;width:33.33%;color:#000;line-height:24px}


section.SearchPage  h2{color:#000;font-size:30px;margin-bottom:30px;line-height:50px}
.SearchPage .itemacc{float:left;width:31.33%;margin-right:3%;margin-bottom:5%;position:relative}
.SearchPage .itemacc .photo{width:100%}
.SearchPage .itemacc .photo img{width:100%;height:auto;display:block}
.SearchPage .itemacc .texte{height:50px;position:absolute;bottom:0;left:0;background-color:rgba(248,235,231,0.85);width:100%}
.SearchPage .itemacc .texte .detail{float:right;padding:10px;background-color:#000;display:inline-block;margin-left:15px}
.SearchPage .itemacc .texte h2{font-size:18px;text-transform:uppercase;padding:5px 0 5px 10px;line-height:22px}
.SearchPage .itemacc .etiquette{position:absolute;top:0;left:0;z-index:100;background-color:rgba(248,235,231,0.85);padding:10px 15px;color:#000;;font-size:12px;text-transform:uppercase}
.SearchPage .itemacc .etiquette2{position:absolute;top:0;right:0;z-index:100;background-color:rgba(248,235,231,0.85);padding:10px 15px;color:#000;;font-size:12px;text-transform:uppercase}

.SearchPage .indx0{clear:both}
.SearchPage .indx3{clear:both}
.SearchPage .indx2{margin-right:0}
.SearchPage .indx5{margin-right:0}

#Newsletter{border-top:solid 2px #000;padding:50px 2.5%;width:95%;background-color:#F8EBE7;color:#000;text-align:center}
#Newsletter .libelle{font-size:24px;line-height:30px;text-transform:uppercase;margin-bottom:15px}

#Newsletter .field{background-color:transparent;border:solid 1px #000;padding:10px 15px;width:200px;margin-right:5px;font-size:18px;}
#Newsletter .ok{background-color:#000;color:#fff;padding:10px;font-size:18px;}

footer{background-color:#000;color;#fff;padding:2.5%;width:95%;}
footer .social{float:right;}
footer .social .libelle{text-transform:uppercase;margin-bottom:10px}
footer .social a{margin:0 10px}
footer a{color:#fff}
footer  .agence{}
footer  .agence .logo{float:left;width:33.33%}
footer  .agence .adr{float:left;width:33.33%;color:#fff;line-height:24px}
footer  .agence .call{float:left;width:33.33%;color:#fff;line-height:24px}
footer #Menu_Link{clear:both;margin-top:15px;border-top:solid 1px #F0CEC3;padding-top:15px;text-align:right;font-size:12px}
footer #Menu_Link .title{text-align:center;font-size:15px;text-transform:uppercase;margin-bottom:10px}
footer #Menu_Link ul{width:100%}
footer #Menu_Link ul li{float:left;width:20%;text-align:left}
footer .legal{clear:both;margin-top:15px;border-top:solid 1px #F0CEC3;padding-top:15px;text-align:right;font-size:12px}
@media screen and (min-width: 1800px)  {


}

@media screen and (max-width: 1800px)  {


}

@media screen and (max-width: 1600px)  {
}

@media screen and (max-width: 1400px)  {
.SearchPage .itemacc .texte h2{font-size:18px;}
}

@media screen and (max-width: 1280px)  {
.SearchPage .itemacc .texte h2{font-size:16px;line-height:20px;padding:5px 0 5px 10px}
 
}

@media screen and (max-width: 1024px)  {
}
@media screen and (max-width: 800px)  {
.SearchPage .itemacc{float:none;width:100%;margin:0 0 50px 0}
.SearchPage .itemacc .texte h2{line-height:40px}
footer .social{width:100%;float:none;text-align:center;margin-bottom:25px}
footer .agence .logo{width:100%;float:none;text-align:center;margin-bottom:25px}
footer .agence .adr{width:100%;float:none;text-align:center;margin-bottom:25px}
footer .agence .call{width:100%;float:none;text-align:center;margin-bottom:25px}

}

@media screen and (max-width: 800px)  {
#Menu ul li.acheter .ssmenu li a img{display:none}
#Menu ul li.acheter .ssmenu li {line-height:30px;margin:0}
#Menu ul li.acheter .ssmenu li a{line-height:30px}
#Menu ul li a{font-size:18px}
#Menu ul li.first .ssmenu{margin-top:0}
#Menu ul li.first .ssmenu li{line-height:30px;margin:0}
#Menu ul li .ssmenu li{line-height:30px;margin:0}
#Menu ul li .ssmenu li a{line-height:30px;font-size:14px}

}

@media screen and (max-width: 640px)  {
#Menu ul li.acheter{width:100%;}
#Menu ul li.first{width:100%;float:none}
header{height:80px}
header .logo {width:65%}
header .logo img{width:auto;height:80px}
header .menu{margin-left:10px;margin-top:15px;}
header .contact{margin-left:10px;margin-top:15px;}
header .social{display:none}
#Menu{top:70px}
#Menu .infoagence{display:none}
footer #Menu_Link ul li{width:50%}
}

  
 #HomePage{color:#000;width:calc(95% - 10px);height:100%;position:relative;background:#F8EBE7 url(/img/bandeauhome.png) bottom right no-repeat;background-size:30%;border:solid 5px #fff;padding:2.5%;height:95%}
 #HomePage .menu{position:absolute;top:2.5%;right:2.5%;z-index:100}
 #HomePage .social{position:absolute;top:2.5%;right:calc(2.5% + 120px);z-index:100}
 #HomePage .social a{margin-left:15px}
 #HomePage .contact{position:absolute;top:2.5%;right:calc(2.5% + 60px);z-index:100}
 #HomePage .logo{clear:both;text-align:center;width:100%;height:100%;background:url(/img/qwartz-carre.png) center 30% no-repeat;background-size:auto 60%;position:relative;overflow:unset}
 #HomePage .logo .baseline{display:none;position:absolute;bottom:150px;left:0;width:100%;text-align:center;font-size:24px;line-height:30px}
 #HomePage .logo .baseline span{display:inline-block;margin:0 10px}
 #HomePage .porte{position:absolute;bottom:-10px;left:0;width:100%;text-align:center;line-height:18px;font-size:14px}
 #HomePage .porte img{height:40px;width:auto}
#FondFlash{clear:both;width:100%;position:relative}
#Flash .item{width:100%;position:relative}
#Flash .item .titre{position:absolute;bottom:5%;left:5%;z-index:400;font-size:30px;text-transform:uppercase;width:40%;line-height:40px;background:url(/img/sigle.png) left center no-repeat;padding-left:90px;background-size:80px;text-shadow: 2px 2px 3px rgba(0,0,0,0.9);}
#FondFlash .fleche{position:absolute;top:calc(50% - 30px);z-index:400}
#FNext{right:0}itemaccitemacc

#FPrev{left:0}

.homepage{width:95%;padding:70px 2.5%;}
.homepage .h2{font-size:35px;line-height:50px;margin-bottom:70px;color:#F0CEC3;font-weight:normal;text-transform:uppercase;text-align:center}
.seeall{clear:both;margin:25px 0 0 0;text-align:center}
.seeall a{display:inline-block;font-size:18px;padding:10px 15px;line-height:24px;color:#F8EBE7;background-color:#000;text-transform:uppercase}
#agence{clear:both;width:100%;position:relative}
#agence .colone{float:left;width:35%;padding:70px 2.5% 90px 2.5%;color:#000;background:#F8EBE7 url(/img/fond_agence1.png) bottom right no-repeat;position:relative;overflow:unset}
#agence .colone h1{text-transform:uppercase;margin-bottom:40px;font-size:24px;line-height:30px}
#agence .colone .texte p{line-height:24px;margin-bottom:5px;text-align:justify}
#agence .colone .texte p em{text-align:center;}
#agence .colone .contact{position:absolute;bottom:-4px;left:0;text-align:center;width:100%}
#agence .colone .contact a{background-color:#000;color:#F0CEC3;;text-transform:uppercase;display:inline-block;padding:8px 15px;text-align:center;font-size:14px;line-height:22px}

#agence .coltwo{float:left;width:55%;padding:70px 2.5%;color:#000;background:#F0CEC3 url(/img/fond_agence2.png) left calc(100% + 35px) no-repeat;}
#agence .coltwo .photo{float:left;margin:0 5% 0 0;width:30%}
#agence .coltwo .photo img{width:100%;display:block}
#agence .coltwo h2{margin-bottom:20px;font-size:36px;line-height:50px;opacity:0.3}
#agence .coltwo .texte{padding-bottom:30px}
#agence .coltwo .texte p{line-height:24px;margin-bottom:5px;text-align:justify}
#agence .coltwo .texte p em{text-align:center;display:inline-block}
#agence .actions{position:absolute;bottom:0;right:2.5%;width:55%;height:60px}
#agence .actions a{background-color:#000;color:#F0CEC3;text-transform:uppercase;display:inline-block;padding:8px 15px;text-align:center;width:60%;font-size:14px}
#agence .actions div{width:33.33%;float:left;}
#agence .actions .contact{line-height:40px;text-align:left}
#agence .actions .contact a{line-height:22px;text-align:center}
#agence .actions .vendre{line-height:22px;text-align:center}
#agence .actions .acheter{line-height:22px;;text-align:right}

#News{margin:95px 0 100px 0;width:95%;padding:0 2.5%;position:relative}
#News h2{font-size:35px;line-height:50px;margin-bottom:70px;color:#F0CEC3;font-weight:normal;text-transform:uppercase;text-align:center}
#News .SliderActu{float:right;width:70%;background:#fff !important;}
#News .SliderActu .itemart{width:100%;height:100%;background-color:#fff!important;font-size:14px;position:relative;color:#000}
#News .SliderActu .itemart .photo{float:left;width:50%;margin-right:2.5%}
#News .SliderActu .itemart .photo img{display:block}
#News .SliderActu .itemart h3{text-transform:uppercase;text-transform:uppercase;font-size:18px;padding-bottom:10px;margin:0 0 15px 0}
#News .SliderActu .itemart .texte{height:75px;text-align:justify}
#News .SliderActu .itemart .detail{position:absolute;bottom:0;right:0;width:47.5%;color:#000;text-align:right}
#News .SliderActu .itemart .detail a{background-color:#000;padding:10px;display:inline-block;font-weight:bold;}

#News .SliderNav{clear:left;width:27.5%;}
#News .SliderNav li{background-color:#EBE8E8;font-size:15px;font-weight:normal;padding:10px;margin-bottom:2px}
#News .SliderNav li.activeSlide{background-color:#F0CEC3;}

#board{clear:both;width:100%;}
#board .content{background-color:#F8EBE7;padding:75px 2.5%;width:95%}
#board .content h2{font-size:40px;line-height:50px;font-weight:400;margin-bottom:40px}
#board .content h2 span{font-family:'Lobster';font-size:50px;opacity:0.3;text-transform:capitalize}
#board .content .item{float:left;position:relative}
#board .content .item .photo{width:100%}
#board .content .item .photo img{width:100%;height:auto;display:block}
#board .content .item .tag{position:absolute;top:0;left:0;background-color:rgba(240,206,195,0.8);;color:#000;padding:10px 15px}

#board .content .item .texte{position:absolute;top:0;left:0;width:100%;background-color:rgba(240,206,195,0.9);height:100%;display:none}
#board .content .item .texte h3{font-size:20px;padding:20% 0;font-weight:400;text-align:center;color:#000;line-height:30px}
#board .content .item .texte h3 a{color:#000;}

#board .content .idx0{width:50%;margin-right:2.5%;display:inline-block}
#board .content .idx0 .texte h3{padding:25% 0;}

#board .content .idx1{width:23.25%;margin-right:2.5%;display:inline-block;margin-bottom:40px}
#board .content .idx2{width:20.75%;margin-right:0%;display:inline-block;margin-bottom:40px}
#board .content .idx2 .texte h3{padding-top:5%}
#board .content .idx3{width:23.25%;margin-right:2.5%;display:inline-block}
#board .content .idx4{width:20.75%;margin-right:0%;margin-top:-6.5%;display:inline-block}
#board .content .idx4 .texte h3{padding-top:35%}

@media screen and (max-width: 1280px)  {
#agence .colone h1{font-size:20px;}
#agence .coltwo h2{margin-bottom:20px;}
 
}
@media screen and (max-width: 1024px)  {
#agence .actions a{font-size:12px;width:70%}
#board .content .item .texte h3{font-size:18px}   
}

@media screen and (max-width: 800px)  {
#agence .colone{float:none;width:90%;padding-bottom:70px!important;padding-left:5%;padding-right:5%}
#agence .coltwo{float:none;width:90%;padding-left:5%;padding-right:5%}
#agence .actions{width:95%}
#News{padding:5%;width:90%}
#News .SliderActu{width:100%}

#News .SliderNav{display:none}
#News .SliderNav li{float:left;font-size:12px;}
#board .content{padding:5%;width:90%}
#board .content .idx0{float:none;width:100%;margin-bottom:25px}
#board .content .idx1{width:47.5%}
#board .content .idx2{width:47.5%}
#board .content .idx3{clear:left;width:47.5%}
#board .content .idx4{width:47.5%;margin-top: -10.5%;}
#News .SliderActu .itemart .detail a img{height:20px;width:auto}
}
@media screen and (max-width: 640px)  {
#HomePage .porte{bottom:0}
#Flash .item .titre{font-size:18px;line-height:30px;width:70%;padding-left:40px}
.homepage .h2{margin-bottom:30px}

#agence .coltwo{margin-top:0!important}
#agence .coltwo .photo{float:none;width:100%;margin-bottom:25px}

#agence .actions{width:90%;margin:0 5% 15px 5%;;position:relative;bottom:unset;left:unset;height:unset}
#agence .actions div{width:90%;margin:0 5% 15px 5%;}

#agence .actions div a{text-align:center;display:block;width:auto}
#News .SliderActu {height:400px!important}
#News .SliderActu .itemart{height:400px!important}
#News .SliderActu .itemart .photo{float:none;width:100%;margin-bottom:15px}
#board .content .item .tag{font-size:11px}
}
@font-face {
  font-family: 'icocamp';
  src:  url('/fonts/icocamp.eot?eoqi8j');
  src:  url('/fonts/icocamp.eot?eoqi8j#iefix') format('embedded-opentype'),
    url('/fonts/icocamp.ttf?eoqi8j') format('truetype'),
    url('/fonts/icocamp.woff?eoqi8j') format('woff'),
    url('/fonts/icocamp.svg?eoqi8j#icocamp') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icocamp {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icocamp' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icocamp-baby:before {
  content: "\e900";
}
.icocamp-bathroom:before {
  content: "\e901";
}
.icocamp-bunk:before {
  content: "\e902";
}
.icocamp-calendar:before {
  content: "\e903";
}
.icocamp-doublebed:before {
  content: "\e904";
}
.icocamp-night:before {
  content: "\e905";
}
.icocamp-person:before {
  content: "\e906";
}
.icocamp-singlebed:before {
  content: "\e907";
}
.icocamp-sofabed:before {
  content: "\e908";
}
.icocamp-sun:before {
  content: "\e909";
}
.icocamp-surface:before {
  content: "\e90a";
}
.icocamp-trundle:before {
  content: "\e90b";
}
.icocamp-yearcalendar:before {
  content: "\e90c";
}
/* Generated by Glyphter (http://www.glyphter.com) on  Wed Dec 13 2017*/
@font-face {
    font-family: 'fontpm';
    src: url('/fonts/fontpm.eot');
    src: url('/fonts/fontpm.eot?#iefix') format('embedded-opentype'),
         url('/fonts/fontpm.woff') format('woff'),
         url('/fonts/fontpm.ttf') format('truetype'),
         url('/fonts/fontpm.svg#fontpm') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class*='icon-']:before{
 display: inline-block;
   font-family: 'fontpm';
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}
.icon-client:before{content:'\0041';}
.icon-euro:before{content:'\0042';}
.icon-facebook:before{content:'\0043';}
.icon-fleche_bas:before{content:'\0044';}
.icon-instagram:before{content:'\0045';}
.icon-linkedin:before{content:'\0046';}
.icon-location:before{content:'\0047';}
.icon-mail:before{content:'\0048';}
.icon-maison:before{content:'\0049';}
.icon-more:before{content:'\004a';}
.icon-appartement:before{content:'\004b';}
.icon-phone:before{content:'\004c';}
.icon-pieces:before{content:'\004d';}
.icon-pinterest:before{content:'\004e';}
.icon-search:before{content:'\004f';}
.icon-star_vide:before{content:'\0050';}
.icon-surface_terrain:before{content:'\0051';}
.icon-surface:before{content:'\0052';}
.icon-twitter:before{content:'\0053';}
.icon-terrain:before{content:'\0054';}
.icon-googleplus:before{content:'\0055';}
.icon-youtube:before{content:'\0056';}
.icon-propriete:before{content:'\0057';}/*! nouislider - 11.0.3 - 2018-01-21 14:04:07 */
/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-target {
  position: relative;
  direction: ltr;
}
.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  overflow:unset
}
/* Wrapper for all connect elements.
 */
.noUi-connects {
  overflow: hidden;
  z-index: 0;
}
.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  overflow:unset
}
/* Offset direction
 */
html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
  left: auto;
  right: 0;
}
/* Give origins 0 height/width so they don't interfere with clicking the
 * connect elements.
 */
.noUi-vertical .noUi-origin {
  width: 0;
}
.noUi-horizontal .noUi-origin {
  height: 0;
}
.noUi-handle {
  position: absolute;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}
.noUi-state-drag * {
  cursor: inherit !important;
}
/* Slider size and handle placement;
 */
.noUi-horizontal {
  height: 18px;
}
.noUi-horizontal .noUi-handle {
  width: 24px;
  height: 24px;
  left: -17px;
  top: -4px;
  border-radius:90%
}
.noUi-vertical {
  width: 18px;
}
.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  left: -6px;
  top: -17px;
}
html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
  right: -17px;
  left: auto;
}
/* Styling;
 * Giving the connect element a border radius causes issues with using transform: scale
 */
.noUi-target {
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #D3D3D3;
  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-connects {
  border-radius: 3px;
}
.noUi-connect {
  background: #3FB8AF;
}
/* Handles and cursors;
 */
.noUi-draggable {
  cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}
.noUi-handle {
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #FFF;
  cursor: default;
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
.noUi-active {
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}
/* Handle stripes;
 */
.noUi-handle:before,
.noUi-handle:after {
  content: "";
  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 state;
 */
[disabled] .noUi-connect {
  background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed;
}
/* Base;
 *
 */
.noUi-pips,
.noUi-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-pips {
  position: absolute;
  color: #999;
}
/* Values;
 *
 */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}
.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}
/* Markings;
 *
 */
.noUi-marker {
  position: absolute;
  background: #CCC;
}
.noUi-marker-sub {
  background: #AAA;
}
.noUi-marker-large {
  background: #AAA;
}
/* Horizontal layout;
 *
 */
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}
.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}
.noUi-rtl .noUi-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}
/* Vertical layout;
 *
 */
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}
.noUi-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%, 0);
  padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}
.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}