/*223,0,22*/
/*223,0,22*/
/* DIV MAPA ---------------------------------------------------------- */
#mbxMap {
  width: auto;
  height: 100%;
}
#mbxMap:-webkit-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
#mbxMap:-moz-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
#mbxMap:full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }


#mbxMap1 {
  width: 50%;
  height: 100%;
  float: left;
  /*box-shadow: 0 0 10px rgba(0,0,0,0.5);*/
}
#mbxMap1:-webkit-full-screen { width: 49.5% !important; height: 100% !important; z-index: 99999; }
#mbxMap1:-moz-full-screen { width: 49.5% !important; height: 100% !important; z-index: 99999; }
#mbxMap1:full-screen { width: 49.5% !important; height: 100% !important; z-index: 99999; }
#mbxMap2 {
  width: 50%;
  height: 100%;
  float: right;
  /*box-shadow: 0 0 10px rgba(0,0,0,0.5);*/
}
#mbxMap2:-webkit-full-screen { width: 49.5% !important; height: 100% !important; z-index: 99999; }
#mbxMap2:-moz-full-screen { width: 49.5% !important; height: 100% !important; z-index: 99999; }
#mbxMap2:full-screen { width: 49.5% !important; height: 100% !important; z-index: 99999; }

/* DOCUMENT ---------------------------------------------------------- */
html, body, #container {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}
body{
    padding-top: 50px;
}
body {
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/*ESTILS TEXT
.mapiabox-gray {
	color: rgb(130,130,130);
}

.navbar-mapiabox {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    background-color: #fff;
}
.navbar-mapiabox .navbar-brand:focus {
    outline: 0;
}

.navbar-mapiabox .navbar-brand .navbar-toggle:focus,
.navbar-mapiabox .navbar-brand .navbar-toggle:active {
    outline: 0;
}

.navbar-mapiabox a {
    color: #000;
}

.navbar-mapiabox .nav li.active {
    outline: nonte;
    background-color: rgba(140,0,29,.3);
}

.navbar-mapiabox .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-mapiabox .nav li a:hover,
.navbar-mapiabox .nav li a:focus,
.navbar-mapiabox .nav li a.active {
    outline: 0;
    color: rgba(255,255,255,1);
	background-color: rgba(140,0,29,.9);
}

.navbar .divider-vertical {
height: 50px;
margin: 0 0px;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #ffffff;
}

@media(min-width:1000px) {
    .navbar-mapiabox {
        border-bottom: 0;
        background: 0 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
        background-color: rgba(255,255,255,.8);
    }

    .top-nav-collapse {
        padding: 0;
    }

}
*/

/* ESTILS ---------------------------------------------------------- */
.mbxWebLegend {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.mbxBorder {
	border-radius: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
.mbxModalHeader {
	color: white;
	background-color: #8C001D;
}
.mbxLeafletImageMarker {
    padding: 2px 2px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.mbxLeafletTextMarkerBasic {
  white-space:nowrap;
  text-shadow: 0 0 0.2em black, 0 0 0.2em black,0 0 0.2em black,0 0 0.2em black,0 0 0.2em;
  color: white;
}
.mbxLeafletTextMarkerFill {
	font-size: 14px;
	color: rgb(255,255,255) !important;
	font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
	background-color: rgba(50, 50, 50, 0.7);
	box-shadow: 0 0 5px #BBB;
	border-radius: 4px;
	margin: 0;
	padding: 5px;
	width: auto !important;
	height: auto !important;
	white-space: nowrap;
}

/* CALLOUT ---------------------------------------------------------- */
.mbxCallout {
    padding: 20px;
    margin: 2px 0;
    border: 1px solid #eee;
    border-radius: 1px;
    background: rgba(255,255,255,0.7);
    /*box-shadow: 0 0 15px rgba(0,0,0,0.2);*/
}
.mbxCallout h5 {
    margin-top: 0;
    margin-bottom: 5px;
    margin-left: 50px;
	color: rgb(60,60,60);
	font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif!important;
	font-weight: 700;
}

.mbxCallout p {
    margin-left: 50px;
    color: rgb(60,60,60);
}
.mbxCallout a {
    text-decoration:none;
}

/* ELIMINAR AL FINAL ---------------------------------------------------------- */
.mbxWebTextTitle {
    font-family : 'Open Sans Condensed', sans-serif;
    text-transform: uppercase;
    font-size : 20px;
}
.mbxWebTextNormal{
    font-size : 14px;
}
.mbxWebTextFooter {
    padding-top: 7px;
    font-size : 10px;
}

/*BUTTONS*/
/* Custom Button Styles */
.btn-dark {
    border-radius: 0;
    color: #fff;
    background-color: rgba(50,50,50,0.8);
}
.btn-red {
    border-radius: 0;
    color: #fff;
    background-color: rgba(223,0,22, 0.9);
}
.btn-gray {
    border-radius: 0;
    color: #333;
    background-color: #eeeeee;
}
.btn-no-border {
    border-radius: 0;
}
.btn-blue {
    border-radius: 0;
    color: #fff;
    background-color: #0C8CDA;
    margin: 3px 0;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: #fff;
    background-color: rgba(0,0,0,0.7);
}

.btn-light {
    border-radius: 0;
    color: #333;
    background-color: rgb(255,255,255);
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    color: #333;
    background-color: rgba(255,255,255,0.8);
}

/*MAPIABOX LEGEND CONTROL*/
.leaflet-mapiabox-Legend-white {
  padding: 6px 8px;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  border-radius: 2px;
  text-align:center;
}
.leaflet-mapiabox-Legend-white label,
.leaflet-mapiabox-Legend-white span {
  display:block;
  float:left;
  height:15px;
  /*width:20%;*/
  text-align:center;
  font-size:9px;
  color:#808080;
 }
@media (max-width: 767px) {
    .leaflet-mapiabox-Legend-white {
	    display: none;
    }
}

/*MAPIABOX LOGO CONTROL*/
/* .leaflet-mapiabox-logo {
	background-color: rgba(255,255,255,.2);
	padding-top:50%;
	padding-left: 50%;
} */

/* MAPIABOX LEAFLET SWITCH MAPA BASE */
.leaflet-control-mbxbasemapswitch {
	padding: 3px 3px;
    background: rgba(255,255,255,1);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.leaflet-control-mbxbasemapswitch a {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
    -webkit-transition: background-image 0.7s ease-in-out;
    transition: background-image 0.7s ease-in-out;
}
.leaflet-control-mbxbasemapswitch a {
	width: 48px;
	height: 48px;
}

@media (max-width: 767px) {
    .leaflet-control-mbxbasemapswitch a {
	    width: 30px;
	    height: 30px;
    }
}


/* MAPIABOX LEAFLET SIMPLE SELECTOR */
.leaflet-control-mbxselector{
	padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}

/* MAPIABOX LEAFLET QUICK BUTTON */
.leaflet-control-mbxqbutton a:hover {
	/*background-color: #f4f4f4;*/
	background-color: rgba(223,0,22,.6);
    /*-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;*/
}
.leaflet-control-mbxqbutton a {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
}
.leaflet-control-mbxqbutton.active a  {
    /*background-color: #DF0101;*/
    background-color: rgba(223,0,22,.9);
    /*-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;*/
}
/* .leaflet-control-mbxqbutton {
	background-color: rgba(223,0,22,.6);
	background: rgba(80,80,80,0.8);
	background: rgba(200,200,200,0.2);
	box-shadow: 0 1px 7px #999;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
} */
.leaflet-control-mbxqbutton a {
	width: 36px;
	height: 36px;
}
/* .leaflet-retina .leaflet-control-mbxqbutton-toggle {
	background-size: 26px 26px;
} */
.leaflet-touch .leaflet-control-mbxqbutton a {
	width: 44px;
	height: 44px;
}
.leaflet-control-mbxqbutton .leaflet-control-mbxqbutton-form,
.leaflet-control-mbxqbutton-expanded .leaflet-control-mbxqbutton-toggle {
	display: none;
}
.leaflet-control-mbxqbutton-expanded .leaflet-control-mbxqbutton-form {
	display: block;
	position: relative;
}

.leaflet-control-mbxqbutton-expanded .leaflet-control-mbxqbutton-form {
	padding: 0px;
}
.leaflet-control-mbxqbutton-expanded-item {
    float:left!important;
    padding-left: 5px;
}
.leaflet-control-mbxqbutton-expanded-item-right {
    float:right!important;
    padding-right: 5px;
}

/* MAPIABOX LEAFLET POPUP */
.leaflet-mapiabox-popup-title {
	font-size: 15pt;
	color: rgb(60,60,60);
	font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif!important;
	font-weight: 700;
	padding-left: 5px;
	text-align: left;
}
.leaflet-mapiabox-popup-text {
	font-size: 10pt;
	font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif!important;
	text-align: justify;
}
.leaflet-mapiabox-popup-foot {
	font-size: 10pt;
	text-align: right;
	color: rgb(130,130,130);
	padding-right: 10px;
	font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.popup-img {
  max-width: 300px;
  height: auto;
}

.select-text-white::selection {
  background: #ffffff;
}
.select-text-white::-moz-selection {
  background: #ffffff;
}
/* MAPIABOX LEAFLET SIDEBAR */
.leaflet-mbxSidebar {
  position: absolute;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 7px;
  /*En la versi� original hi posava z-index: 2000; S'ha de posar per sota el navbar del bootstrap i damunt controls del mapa*/
  z-index: 1001; }
  .leaflet-mbxSidebar.left {
    left: -500px;
    transition: left 0.5s, width 0.5s;
    padding-right: 0; }
    .leaflet-mbxSidebar.left.visible {
      left: 0; }
  .leaflet-mbxSidebar.right {
    right: -500px;
    transition: right 0.5s, width 0.5s;
    padding-left: 0; }
    .leaflet-mbxSidebar.right.visible {
      right: 0; }

  .leaflet-mbxSidebar > .leaflet-control {
    height: 100%;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px;/*8px 24px;*/
    font-size: 1.1em;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    -webkit-border-radius: 0px;
    border-radius: 0px; }
    .leaflet-touch .leaflet-mbxSidebar > .leaflet-control {
      box-shadow: none;
      border: 2px solid rgba(0, 0, 0, 0.2);
      background-clip: padding-box; }
  @media (max-width: 767px) {
    .leaflet-mbxSidebar {
      width: 100%;
      padding: 0; }
      .leaflet-mbxSidebar.left.visible ~ .leaflet-left {
        left: 100%; }
      .leaflet-mbxSidebar.right.visible ~ .leaflet-right {
        right: 100%; }
      .leaflet-mbxSidebar.left {
        left: -100%; }
        .leaflet-mbxSidebar.left.visible {
          left: 0; }
      .leaflet-mbxSidebar.right {
        right: -100%; }
        .leaflet-mbxSidebar.right.visible {
          right: 0; }
      .leaflet-mbxSidebar > .leaflet-control {
        box-shadow: none;
        -webkit-border-radius: 0;
        border-radius: 0; }
        .leaflet-touch .leaflet-mbxSidebar > .leaflet-control {
          border: 0; } }
  @media (min-width: 768px) {
    .leaflet-mbxSidebar.visible.expanded {
      width: 50%; }
      .leaflet-mbxSidebar.left.visible.expanded ~ .leaflet-left {
        left: 50%; }
      .leaflet-mbxSidebar.right.visible.expanded ~ .leaflet-right {
        right: 50%; } }
  @media (min-width: 768px) and (max-width: 991px) {
    .leaflet-mbxSidebar {
      width: 305px; }
      .leaflet-mbxSidebar.left.visible ~ .leaflet-left {
        left: 305px; }
      .leaflet-mbxSidebar.right.visible ~ .leaflet-right {
        right: 305px; } }
  @media (min-width: 992px) and (max-width: 1199px) {
    .leaflet-mbxSidebar {
      width: 390px; }
      .leaflet-mbxSidebar.left.visible ~ .leaflet-left {
        left: 390px; }
      .leaflet-mbxSidebar.right.visible ~ .leaflet-right {
        right: 390px; } }
  @media (min-width: 1200px) {
    .leaflet-mbxSidebar {
      width: 460px; }
      .leaflet-mbxSidebar.left.visible ~ .leaflet-left {
        left: 460px; }
      .leaflet-mbxSidebar.right.visible ~ .leaflet-right {
        right: 460px; } }
  .leaflet-mbxSidebar .close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 31px;
    height: 31px;
    color: #333;
    font-size: 25pt;
    line-height: 1em;
    text-align: center;
    background: white;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    cursor: pointer;
    z-index: 1002; }
.leaflet-mbxSidebar-body {
    padding-left: 10px;
	}
.leaflet-left {
  transition: left 0.5s; }

.leaflet-right {
  transition: right 0.5s; }
.leaflet-mbxSidebar-header {
    height: 26px;
    /*background: rgba(223,1,1, 0.9);*/
    background: rgba(223,0,22, 0.9);
    padding: 0px;
    width: 100%;
	}
.leaflet-mbxSidebar-header-title {
	font-size: 20pt;
	color: rgb(60,60,60);
	font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif!important;
	font-weight: 700;
	padding-left: 5px;
}
.leaflet-mbxSidebar-header-description {
	font-size: 11pt;
	color: rgb(60,60,60) !important;
	font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.leaflet-mbxSidebar-footer {
	padding-left:30px;
}
.leaflet-mbxSidebar-footer-text{
	font-size: 10pt;
	text-align: right;
	color: rgb(130,130,130);
	padding-right: 10px;
	font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.leaflet-mbxSidebar-mbxGroup-Title{
	font-size: 15pt;
	color: rgb(60,60,60) !important;
	font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif
}
.leaflet-mbxSidebar-mbxSubGroup-Title{
	font-size: 13pt;
	color: rgb(60,60,60) !important;
	font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.leaflet-mbxSidebar-mbxGroup-Description{
	font-size: 10pt;
	color: rgb(130,130,130);
	padding-right: 10px;
	font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.leaflet-mbxSidebar-mbxSubGroup-Description{
	font-size: 10pt;
	color: rgb(130,130,130);
	padding-right: 10px;
	font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.leaflet-mbxSidebar-mbxGroup-Header {
    padding-top:10px;
    padding-bottom:10px;
}
.leaflet-mbxSidebar-mbxGroup-Body {
	padding-top:3px;
	padding-left:20px;
}
.leaflet-mbxSidebar-mbxSubGroup-Body {
	padding-top:3px;
	padding-left:5px;
}
.leaflet-mbxSidebar-mbxGroup-Item {

	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 10px;

}
.leaflet-mbxSidebar-Link {

	border-style: solid;
    border-color: rgb(200,200,200);
	border-width: 1px;
    background-color: rgb(230,230,230);
    border-radius: 3px;

}
.leaflet-mbxSidebar-table-image {
	padding:1%;
    /*text-align: center !important;*/
}
/* .leaflet-mbxSidebar-table-toolbarcell{
	background: rgba(100,100,100, 0.9);
} */
.leaflet-mbxSidebar-table-icon {
	font-size: 1.3em;
	color: rgb(90, 90, 90) !important;
	font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}
a.leaflet-mbxSidebar-close, a.leaflet-mbxSidebar-mbxGroup-Title,
a.leaflet-mbxSidebar-mbxSubGroup-Title, a.leaflet-mbxSidebar-table-icon,
a.leaflet-mbxSidebar-footer-text, a.leaflet-mbxSidebar-header-description {
	text-decoration:none;
}

/* MAPIABOX LEAFLET FULLSCREEN */
.leaflet-control-zoom-fullscreen { background-image: url(images/icon-fullscreen.png); }
/* on selector per rule as explained here : http://www.sitepoint.com/html5-full-screen-api/ */
.leaflet-retina .leaflet-control-zoom-fullscreen { background-image: url(images/icon-fullscreen-2x.png); background-size: 26px 26px; }
.leaflet-container:-webkit-full-screen { width: 100% !important; height: 100% !important; z-index: 99999; }
.leaflet-pseudo-fullscreen { position: fixed !important; width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; z-index: 99999; }

/* MAPIABOX LEAFLET MAP NAVIGATION (zoom) */
.leaflet-bar a:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.leaflet-bar a:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
/* MAPIABOX LEAFLET MINIMAP */
.leaflet-control-mbxMinimap {
    border:solid rgba(60, 60, 60, 0.4) 1px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    border-radius: 1px;
    background: #f8f8f9;
    transition: all .2s;
}

.leaflet-control-mbxMinimap a {
    background-color: rgba(255, 255, 255, 1.0);
    background-repeat: no-repeat;
    z-index: 99999;
    transition: all .2s;
    border-radius: 3px 0px 0px 0px;
}

.leaflet-control-mbxMinimap a.minimized {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border-radius: 0px;
}

.leaflet-control-mbxMinimap-toggle-display {
    background-image: url("images/toggle.png");
    height: 19px;
    width: 19px;
    position: absolute;
    bottom: 0;
    right: 0;
}

/* Old IE */
.leaflet-oldie .leaflet-control-mbxMinimap {
	border: 1px solid #999;
}

.leaflet-oldie .leaflet-control-mbxMinimap a {
	background-color: #fff;
}

.leaflet-oldie .leaflet-control-mbxMinimap a.minimized {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

/* MAPIABOX LEAFLET MEASURE */
.leaflet-control-mbxMeasure {
	font-size: 16px;
	font-weight: bold;
	line-height: 21px;
	}

.leaflet-bar-part-top-and-bottom {
	-webkit-border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
	border-bottom: none;
	}

.leaflet-touch .leaflet-bar-part-top-and-bottom {
	-webkit-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
	border-bottom: none;
	}

.leaflet-control-mbxMeasure-on .leaflet-control-mbxMeasure {
	box-shadow: 0 0 8px rgba(10,10,10,1.0);
	}

.leaflet-mbxMeasure-tooltip {
	font-size: 14px;
	color: rgb(255,255,255) !important;
	font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
	background-color: rgba(50, 50, 50, 0.7);
	box-shadow: 0 0 5px #BBB;
	border-radius: 4px;
	margin: 0;
	padding: 5px;
	width: auto !important;
	height: auto !important;
	white-space: nowrap;
	}

.leaflet-mbxMeasure-tooltip-total {
	font-weight: bold;
	}

.leaflet-mbxMeasure-tooltip-difference {
	color: #777;
	}

/* MAPIABOX LEAFLET LOCATE CONTROL */
.leaflet-touch .leaflet-bar-part-single {
  -webkit-border-radius: 7px 7px 7px 7px;
  border-radius: 7px 7px 7px 7px;
  border-bottom: none;
}
.leaflet-touch .leaflet-control-locate {
  box-shadow: none;
  border: 2px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}
.leaflet-control-locate a {
  font-size: 1.4em;
  color: rgba(0, 0, 0, 1);
}
.leaflet-control-locate.active a {
  color: #DF0016;
}
.leaflet-control-locate.active.following a {
  color: #DF0016;
}


.leaflet-routing-container.leaflet-routing-container-hide {
    cursor: pointer;
    border: none;
}
.leaflet-routing-geocoders button.btn {
    font: bold 18px 'Lucida Console', Monaco, monospace;
    border: 0px;
    border-radius: 0px;
    background-color: rgba(50,50,50,0.8);
    margin: 0;
    margin-right: 3px;
    float: right;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.leaflet-routing-geocoders button.btn:hover {
    background-color: rgba(0,0,0,0.7);
}

.leaflet-routing-alt h2{
    font-size: 18px;
}
.leaflet-routing-alt h3{
    font-size: 16px;
}


/* RANGE */
input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  /*width: 100%;*/
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: white;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 1px solid #fff;
  height: 15px;
  width: 15px;
  border-radius: 10px;
  background: rgb(80, 142, 204);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ffffff;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ffffff;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 1px solid #fff;
  height: 15px;
  width: 15px;
  border-radius: 10px;
  background: rgb(80, 142, 204);
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: transparent;
  border-color: transparent;
  border-width: 2px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: rgba(223,0,22, 1);
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: rgba(223,0,22, 1);
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 1px solid #fff;
  height: 50px;
  width: 20px;
  border-radius: 20px;
  background: rgb(80, 142, 204);
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: rgba(223,0,22, 1);
}
input[type=range]:focus::-ms-fill-upper {
  background: rgba(223,0,22, 1);
}

/* MAPIABOX LEAFLET VIDEO */
@media (max-width: 767px) {
    #toggle-video-size {
	     display: none;
    }
}