/** font-face **/
@font-face {
    font-family: 'Sarabun-Regular';
    src: url('../fonts/Sarabun-Regular.eot');
    src: url('../fonts/Sarabun-Regular.eot.eot?#iefix') format('embedded-opentype'),url('../fonts/Sarabun-Regular.woff') format('woff'),
    url('../fonts/Sarabun-Regular.ttf') format('truetype');
  }

@font-face {
    font-family: 'Sarabun-Medium';
    src: url('../fonts/Sarabun-Medium.eot');
    src: url('../fonts/Sarabun-Medium.eot.eot?#iefix') format('embedded-opentype'),url('../fonts/Sarabun-Medium.woff') format('woff'),
    url('../fonts/Sarabun-Medium.ttf') format('truetype');
  }

@font-face {
    font-family: 'Sarabun-Light';
    src: url('../fonts/Sarabun-Light.eot');
    src: url('../fonts/Sarabun-Light.eot.eot?#iefix') format('embedded-opentype'),url('../fonts/Sarabun-Light.woff') format('woff'),
    url('../fonts/Sarabun-Light.ttf') format('truetype');
  }

  @font-face {
    font-family: 'FontAwesome-Regular';
    src: url('../fonts/Font-Awesome-6-Pro-Regular-400.woff') format('woff'),
      url('../fonts/Font-Awesome-6-Pro-Regular-400.otf') format('opentype');
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'FontAwesome-Solid';
    src: url('../fonts/Font-Awesome-6-Pro-Solid-900.woff') format('woff'), url('../fonts/Font-Awesome-6-Pro-Solid-900.otf') format('opentype');
    font-display: swap;
    font-style: normal;
  }

body{
    font-family: 'Sarabun-Regular', sans-serif;
    font-size: 16px;
    color: #000;
}
h1{
  font-family: 'Sarabun-Light', sans-serif;
  font-size: 38px !important;
  font-weight: 300 !important;
}
h2{
  font-family: 'Sarabun-Regular', sans-serif;
  font-size: 36px !important;
  font-weight: 300 !important;
  color: #4F4D77;
  margin-bottom: 2rem;
}

header{
  position: relative;
  z-index: 2;
  background: #fff;
}

/***************** Menu  *****************/
.container-fluid.bg-violet{
  min-height:52.2px;
}
.navbar a.nav-link{
    font-family: 'Sarabun-Medium', sans-serif;
    font-size: 16px;
    color: #4F4D77;
    margin-left: 20px;
}
.navbar a.nav-link.active{
    font-family: 'Sarabun-Medium', sans-serif;
    font-size: 16px;
    color: #452ADF;
    border-bottom: 1px solid #EB6C21;
}

.navbar-collapse.show{
  height: 90vh;
}

.navbar-collapse.show .navbar-nav.links-mobile{
  height: 90vh;
}


/***************** buttons  *****************/
.btn{
  padding: 0.7rem 1.2rem;
  vertical-align: middle;
  border-radius: 4px;
}
.btn svg {
  fill: #fff;
  color: #fff;
  margin-right: 10px;
  vertical-align: middle;
}
.btn:hover svg {
  fill: #FFF;
  color: #FFF;
}
.btn-light{
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}
.btn-light:hover{
  background: #523CCB;
  color: #fff;
}
.btn-primary{
  background: #FA8745;
  border: 1px solid #FA8745;
  color: #fff;
}
.btn-primary:hover{
  background: #DB8350;
  border: 1px solid #DB8350;
}
.btn-primary:hover svg{
  fill: #FFF;
  color: #FFF;
}
.btn-dark{
  background: #4F4D77;
  color: #fff;
}
.btn-dark:hover svg{
  fill: #FFF;
  color: #FFF;
}
.btn-light.btn-outline{
  background: transparent;
  border: 1px solid #dc3545;
  color: #dc3545;
}
.btn-light.btn-outline svg{
  fill: #dc3545;
}
.btn-light.btn-outline:hover{
  background: #FFF;
  border: 1px solid #c42737;
  color: #c42737;
}


/***************** Home  *****************/
#BannerHome{
    height: 65vh;
}
#BannerHome h1{
    font-family: 'Sarabun-Light', sans-serif;
    font-size: 38px !important;
    font-weight: 300 !important;
    color: #fff;
    max-width: 650px;
}
#BannerHome .container{
    background: url(../images/imgBannerHome.svg) right bottom no-repeat;
    background-size: 40% auto;
}


/***************** Acerca de  *****************/

#BannerAcerca{
  height: 65vh;
}
#BannerAcerca h1{
  font-family: 'Sarabun-Light', sans-serif;
  font-size: 24px !important;
  font-weight: 100 !important;
  color: #fff;
  max-width: 570px;
  line-height: 1.4;
}
#BannerAcerca .container{
  background: url(../images/imgBannerAcerca.svg) right 330px  top 90% no-repeat;
  background-size: auto 50%;
}

.block-yellow{
  background: #FFF5DC;
  padding: 1.2rem 1rem;
}
.block-yellow h3{
  color: #745FE7;
  font-size: 22px;
}

.lateral-menu{
  width: 244px;
  position: fixed;
  top: 0px;
  bottom: 0px;
  right: 10%;
  height: 100%;
  background: #fff;
  z-index: 1;
  padding-top: 10%;
}
.lateral-menu ul{
  list-style: none;
}
.lateral-menu ul li a{
  display: flex;
  margin-bottom: 1.5rem;
  color: #545454;
  text-decoration: none;
  font-size: 16px;
  padding-right: 15px;
  align-items: center;
}
.lateral-menu ul li a svg{
  fill:#EB6C21;
  margin-right: 10px;
  min-width: 14px;
}
.lateral-menu ul li a:hover{
  text-decoration: underline;
}

/***************** Card *****************/
.card{
  border: none;
  height: 100%;
  box-shadow: 1px 2px 3px 3px rgba(0, 0, 0, 0.06);
  padding: 2rem;
}
.card img{
  max-width: 180px;
  min-height: 180px;
  margin-bottom: 2rem;
}
.card h5{
  color: #4F4D77;
  margin-bottom: 1rem;
  font-size: 32px;
}
.card p{
  color: #545454;
}


/***************** Equipo *****************/
.bg-yellow{
  background: rgba(255, 245, 220, 0.4);
}
.team {
  margin-bottom: 2rem;
}
.team img{
  width: 119px;
  -webkit-border-top-right-radius: 50px;
-moz-border-radius-topright: 50px;
border-top-right-radius: 50px;
margin-bottom: 1rem;
}
.team h4{
  color:#4F4D77;
  font-size: 22px;
}
.team p{
  max-width: 310px;
}
.team a img{
  width: 24px;
  -webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
margin-right: 20px;
}


/************ Tabs ************/

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: auto; /*--Set height of tabs--*/
	width: 100%;
}
ul.tabs li {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #4F4D77;
}
ul.tabs li a {
	text-decoration: none;
	color: #FFF;
	display: block;
	font-size: 1.2em;
	padding: 12px 20px;
	border: none; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
  color: #000;
}
ul.tabs li a:focus{
  color:#fff;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not
        listen to the hover properties--*/
	background: #EB6C21;
}

.tab_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	background: #fff;
  top:124px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  position: absolute;
}
.tab_content {
	padding: 0px;
	font-size: 1.2em;
  height: 100%;
}



/**********Layers *********/
.header-layer-title{
  font-weight: bold !important;
  background-color: #4F4D77;
  padding:1px 10px;
  font-size: 16px !important;
  color: #fff;
  border-top-right-radius: 5px;
}
.header-layer-title h1{
  font-weight: 500 !important;
  font-size: 16px !important;
  color: #fff;
  padding-top: 12px;
  padding-bottom: 10px;
}
.header-layer-title img{
  padding-right: 10px;
}
.header-layer-title a{
  position: absolute;
  right: 10px;
}
.layers{
  position: absolute;
  top: 100px;
  max-width: 280px;
  min-width: 280px;
}
.accordion{
  background: #f2f2f2;
}
.accordion-button{
  background: #43425D;
  color: #fff;
}
.accordion-item:first-of-type .accordion-button{
  border-radius: 0px;
}
.accordion-item{
  margin-bottom: 3px;
  border: 0px;
}
.accordion-body{
  background: #f2f2f2;
}
.accordion-button:not(.collapsed){
  background: #545454;
  text-decoration: none;
  margin: 0px;
  color: #fff;
  border-radius: 0px !important;
}

.accordion-button.collapsed::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after{
  background-image: url(../images/arrowUp.svg);
  background-position-y: center;
}
.accordion-button.collapsed::after{
  background-image: url(../images/arrowDown.svg);
  background-position-y: center;
}

.layers ul{
  padding-left: 0px;
}
.layers ul li{
  list-style: none;
  font-size: 16px;
}
.layers ul li input{
  margin-right: 10px;
}

.layers a{
  text-decoration: none !important;
}
#LayerClose{
  display: none;
  width: 45px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}

#LayerClose:hover{
  opacity: 0.9;
  cursor: pointer;
}

/* variables range */
.variables{
  color: #fff;
  padding-top: 10px;
  font-size: 18px;
  position: absolute;
  right: 0px;
  cursor: pointer;
  padding: 10px 46px 10px 20px;
  height: 52px;
}
.variables.selected{
  background: #EB6C21;
}
.variables .pr-4{
  padding-right: 10px;
}
.cont-variables{
  position: fixed;
  top: 124px;
  bottom: 0px;
  z-index: 9;
  background: #F2F2F2;
  padding: 15px 15px 5px;
  right: 0px;
  color:#000;
  overflow-y: hidden;
  padding-bottom: 2.5rem;
  display: none;
}
.cont-variables h3{
  color: #545454;
}

.cont-variables p{
  text-align: left;
}

.cont-variables .btn-close-variables.btn-close{
  position: absolute;
  right: 20px;
  top: 15px;
  cursor: pointer;
}

.cont-variables input{
  width: 100%;
}
.cont-input-range{
  height: 82%;
  overflow-y: auto;
}

.slider {border-radius: 20px;display: flex;align-items: center; width: 100%;}
.slider input[type="range"] {border: none;outline: none; background: transparent;} 
.number-range{font-size: 10px; padding-bottom: 1rem;}
.number-range .col{
  width: 7.1%;
  font-size: 10px;
  padding-top: 3px;
  font-family: sans-serif;
  font-weight: bold;
}

/*generated with Input range slider CSS style generator (version 20211225)
https://toughengineer.github.io/demo/slider-styler*/
input[type=range].styled-slider {
  height: 1.3em;
  -webkit-appearance: none;
}

/*progress support*/
input[type=range].styled-slider.slider-progress {
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--value) - var(--min)) / var(--range));
  --sx: calc(0.5 * 1.3em + var(--ratio) * (100% - 1.3em));
}

input[type=range].styled-slider:focus {
  outline: none;
}

/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.3em;
  height: 1.3em;
  border-radius: 1em;
  background: #383663;
  border: none;
  box-shadow: none;
  margin-top: calc(0.7em * 0.5 - 1.3em * 0.5);
}

input[type=range].styled-slider::-webkit-slider-runnable-track {
  height: 0.7em;
  border: none;
  border-radius: 0.5em;
  background: #BBB9F5;
  box-shadow: none;
}

input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
  background: #9E9BFF;
}

input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
  background: linear-gradient(#745FE7,#745FE7) 0/var(--sx) 100% no-repeat, #BBB9F5;
}

input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track {
  background: linear-gradient(#5A41E4,#5A41E4) 0/var(--sx) 100% no-repeat, #9E9BFF;
}

/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
  width: 1.3em;
  height: 1.3em;
  border-radius: 1em;
  background: #383663;
  border: none;
  box-shadow: none;
}

input[type=range].styled-slider::-moz-range-track {
  height: 0.7em;
  border: none;
  border-radius: 0.5em;
  background: #BBB9F5;
  box-shadow: none;
}

input[type=range].styled-slider:hover::-moz-range-track {
  background: #9E9BFF;
}

input[type=range].styled-slider.slider-progress::-moz-range-track {
  background: linear-gradient(#745FE7,#745FE7) 0/var(--sx) 100% no-repeat, #BBB9F5;
}

input[type=range].styled-slider.slider-progress:hover::-moz-range-track {
  background: linear-gradient(#5A41E4,#5A41E4) 0/var(--sx) 100% no-repeat, #9E9BFF;
}

/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-fill-lower {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-thumb {
  width: 1.3em;
  height: 1.3em;
  border-radius: 1em;
  background: #383663;
  border: none;
  box-shadow: none;
  margin-top: 0;
  box-sizing: border-box;
}

input[type=range].styled-slider::-ms-track {
  height: 0.7em;
  border-radius: 0.5em;
  background: #BBB9F5;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}

input[type=range].styled-slider:hover::-ms-track {
  background: #9E9BFF;
}

input[type=range].styled-slider.slider-progress::-ms-fill-lower {
  height: 0.7em;
  border-radius: 0.5em 0 0 0.5em;
  margin: -undefined 0 -undefined -undefined;
  background: #745FE7;
  border: none;
  border-right-width: 0;
}

input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower {
  background: #5A41E4;
}







/***************** Conctacto *****************/
#BannerContactanos{
  height: 65vh;
}
#BannerContactanos h1{
  font-family: 'Sarabun-Regular', sans-serif;
  font-size: 40px !important;
  font-weight: 100 !important;
  color: #4F4D77 !important;
  max-width: 570px;
  line-height: 1.4;
  margin-bottom: 30px;
  margin-top: 5%;
}
#BannerContactanos p{
  color: #000;
}
#BannerContactanos .container{
  background: url(../images/imgBannerContacto.svg) right center no-repeat;
}
.contact-list{
  list-style: none;
}
.contact-list li{
  padding-top: 10px;
  padding-bottom: 20px; 
}
.contact-list li a{
  color: #545454;
  text-decoration: none;
}
.contact-list li a:hover{
  text-decoration: underline;
}
 .contact-list li img{
  height: 18px;
  min-width: 16px;
  max-width: 18px;
  margin-right:15px;
 }
 form input.form-control::placeholder {
  color: #a7a7a7;
  opacity: 1; /* Firefox */
}

form input.form-control::-ms-input-placeholder { /* Edge 12 -18 */
  color: #a7a7a7;
}

 form input.form-control{
  border:1px solid #7063DF;
  padding-top: 8px;
  padding-bottom: 8px;
  max-width: 330px;
  color: #4F4D77;
 }

 form textarea.form-control{
  border:1px solid #7063DF;
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 140px !important;
 }

 form .required{
  color:#f0585f;
 }

 form label{
  margin-top: 10px;
 }

 .form-floating label{
  margin-top: 0px;
 }
 .form-check label{
  margin-top: 0px;
  margin-bottom: 30px;
  vertical-align: text-top;
 }

 .form-check-input[type=checkbox]{
  border:1px solid #7063DF;
  width: 24px;
  height: 24px;
  margin-right: 10px;
 }

 #ContForm button{
  margin-bottom: 2rem;
}


/***************** Footer *****************/
footer{
  position: relative;
  z-index: 2;
}
footer p{
  font-size: 16px;
}


/***************** Colors  *****************/

/*Navy*/
.bg-navy {
    background: #2a2a9a;
}

/*purple*/
.bg-purple {
  background: #745FE7;
}

/*Blue*/
.bg-blue {
    background: #3273ff;
}

/*Violet*/
.bg-violet {
    background: #4F4D77;
}
.text-violet{
  color:#745FE7;
}

/*Red*/
.bg-red {
    background: #f0585f;
}

/*Gray*/
.bg-gray {
    background: #CCC;
}

/*Black*/
.black{
  color: black !important;
}

/*Light*/
.bg-light{
  color: #F2F2F2 !important;
}

.bg-duotone{
  background: linear-gradient(to bottom, rgba(250, 182, 11, 0.14) 0%,rgba(250, 182, 11, 0.14) 50%,rgba(250, 182, 11, 0.14) 50%,white 50%,white 100%);
}


/*** Modal ***/
.modal-header{
  border-bottom: 0px;
}
.modal h1{
  font-family: 'Sarabun-Medium', sans-serif;
  font-size: 18px !important;
}
.modal .modal-body{
  text-align: center;
}
.modal .img-modal svg{
  width: 60px;
  height: 60px;
  fill:#dc3545;
  margin-bottom: 2rem;
  margin-top: 1.5rem;
}
.modal-footer{
  border-top: 0px;
}
.dropdown.dropdown-movil{
  display: none;
}

/****** color ******/
.c-orange{
  color:#EB6C21;
}



/********* contenedores de variables ********/

/** Servicios **/
/*webkit*/
.var-servicios input[type=range].styled-slider::-webkit-slider-thumb {
  background: #9D3B01;
}

.var-servicios input[type=range].styled-slider::-webkit-slider-runnable-track {
    background: #FAA270;
  }

  .var-servicios  input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
    background: #F88441;
  }

  .var-servicios  input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
    background: linear-gradient(#FC7A30,#FC7A30) 0/var(--sx) 100% no-repeat, #FAA270;
  }

  .var-servicios  input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track {
    background: linear-gradient(#EB6C21,#EB6C21) 0/var(--sx) 100% no-repeat, #F88441;
  }

  /*mozilla*/
  .var-servicios  input[type=range].styled-slider::-moz-range-thumb {
    background: #C14F0B;
  }

  .var-servicios input[type=range].styled-slider::-moz-range-track {
    background: #FAA270;
  }

  .var-servicios input[type=range].styled-slider:hover::-moz-range-track {
    background: #F88441;
  }

  .var-servicios input[type=range].styled-slider.slider-progress::-moz-range-track {
    background: linear-gradient(#FC7A30,#FC7A30) 0/var(--sx) 100% no-repeat, #FAA270;
  }

  .var-servicios input[type=range].styled-slider.slider-progress:hover::-moz-range-track {
    background: linear-gradient(#EB6C21,#EB6C21) 0/var(--sx) 100% no-repeat, #F88441;
  }

  /*ms*/

  .var-servicios  input[type=range].styled-slider::-ms-thumb {
    background: #C14F0B;
  }

  .var-servicios input[type=range].styled-slider::-ms-track {
    background: #FAA270;
  }

  .var-servicios input[type=range].styled-slider:hover::-ms-track {
    background: #F88441;
  }

  .var-servicios input[type=range].styled-slider.slider-progress::-ms-fill-lower {
    background: #FC7A30;
  }

  .var-servicios input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower {
    background: #EB6C21;
  }


  /** Inmobiliario **/
/*webkit*/
.var-inmobiliario input[type=range].styled-slider::-webkit-slider-thumb {
  background: #000000;
}

.var-inmobiliario input[type=range].styled-slider::-webkit-slider-runnable-track {
    background: #D6D6D6;
  }

  .var-inmobiliario  input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
    background: #B1AFAF;
  }

  .var-inmobiliario  input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
    background: linear-gradient(#888888,#888888) 0/var(--sx) 100% no-repeat, #D6D6D6;
  }

  .var-inmobiliario  input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track {
    background: linear-gradient(#383737,#383737) 0/var(--sx) 100% no-repeat, #B1AFAF;
  }

  /*mozilla*/
  .var-inmobiliario  input[type=range].styled-slider::-moz-range-thumb {
    background: #000000;
  }

  .var-inmobiliario input[type=range].styled-slider::-moz-range-track {
    background: #D6D6D6;
  }

  .var-inmobiliario input[type=range].styled-slider:hover::-moz-range-track {
    background: #B1AFAF;
  }

  .var-inmobiliario input[type=range].styled-slider.slider-progress::-moz-range-track {
    background: linear-gradient(#888888,#888888) 0/var(--sx) 100% no-repeat, #D6D6D6;
  }

  .var-inmobiliario input[type=range].styled-slider.slider-progress:hover::-moz-range-track {
    background: linear-gradient(#383737,#383737) 0/var(--sx) 100% no-repeat, #B1AFAF;
  }

  /*ms*/

  .var-inmobiliario  input[type=range].styled-slider::-ms-thumb {
    background: #000000;
  }

  .var-inmobiliario input[type=range].styled-slider::-ms-track {
    background: #D6D6D6;
  }

  .var-inmobiliario input[type=range].styled-slider:hover::-ms-track {
    background: #B1AFAF;
  }

  .var-inmobiliario input[type=range].styled-slider.slider-progress::-ms-fill-lower {
    background: #888888;
  }

  .var-inmobiliario input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower {
    background: #383737;
  }
.styled-slider:disabled {
    background-color: #e9ecef; /* Color de fondo cuando está deshabilitado */
    opacity: 0.5; /* Transparencia para indicar que está desactivado */
    cursor: not-allowed; /* Cambiar el cursor para indicar que no se puede interactuar */
}



  /** Trafico **/
/*webkit*/
.var-trafico input[type=range].styled-slider::-webkit-slider-thumb {
  background: #41184E;
}

.var-trafico input[type=range].styled-slider::-webkit-slider-runnable-track {
    background: #BC7AD3;
  }

  .var-trafico  input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
    background: #9A52B2;
  }

  .var-trafico  input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
    background: linear-gradient(#783F8B,#783F8B) 0/var(--sx) 100% no-repeat, #BC7AD3;
  }

  .var-trafico  input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track {
    background: linear-gradient(#532A61,#532A61) 0/var(--sx) 100% no-repeat, #9A52B2;
  }

  /*mozilla*/
  .var-trafico  input[type=range].styled-slider::-moz-range-thumb {
    background: #41184E;
  }

  .var-trafico input[type=range].styled-slider::-moz-range-track {
    background: #BC7AD3;
  }

  .var-trafico input[type=range].styled-slider:hover::-moz-range-track {
    background: #9A52B2;
  }

  .var-trafico input[type=range].styled-slider.slider-progress::-moz-range-track {
    background: linear-gradient(#783F8B,#783F8B) 0/var(--sx) 100% no-repeat, #BC7AD3;
  }

  .var-trafico input[type=range].styled-slider.slider-progress:hover::-moz-range-track {
    background: linear-gradient(#532A61,#532A61) 0/var(--sx) 100% no-repeat, #9A52B2;
  }

  /*ms*/

  .var-trafico  input[type=range].styled-slider::-ms-thumb {
    background: #41184E;
  }

  .var-trafico input[type=range].styled-slider::-ms-track {
    background: #BC7AD3;
  }

  .var-trafico input[type=range].styled-slider:hover::-ms-track {
    background: #9A52B2;
  }

  .var-trafico input[type=range].styled-slider.slider-progress::-ms-fill-lower {
    background: #783F8B;
  }

  .var-trafico input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower {
    background: #532A61;
  }


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .cont-variables{
    max-width: 72%;
  }
 }

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  .cont-variables{
    max-width: 77%;
  }
 }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
  .cont-variables{
    max-width: 70%;
  }
 }



@media (max-width: 1499.98px) {
  #BannerAcerca .container{
  background: url(../images/imgBannerAcerca.svg) right 350px  top 90% no-repeat;
  background-size: auto 50%;
  }
}

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) { 
  #BannerAcerca .container{
    background: url(../images/imgBannerAcerca.svg) right 350px  top 90% no-repeat;
    background-size: auto 40%;
  }
  #BannerAcerca h1{
    font-size: 22px !important;
  }
 }
/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) { 
  .pt-5{
    padding-top: 1rem !important;
  }
  .lateral-menu{
    right: 0px;
  }
  #BannerAcerca h1{
    font-size: 20px !important;
    margin-top: 2rem;
  }
  #BannerHome h1{
    margin-top: 18%;
    margin-bottom: 2rem;
  }
  ul.tabs li a{
    font-size: 1em;
    padding: 14px 20px;
  }
 }

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 
  .pt-5 {
    padding-top: 1.5rem!important;
  }
  /* home */
  #BannerHome h1{
    font-size: 24px !important;
  }
  #BannerHome .col-8{
    width: 100%;
  }
  #BannerHome .btn-light{
    margin-bottom: 10px;
    background: #745FE7;
    min-width: 236px;
    text-align: left;
  }
  #BannerHome .container {
    background: url(../images/imgBannerHome.svg) right bottom no-repeat;
    background-size: 50% auto;
  }
  #BannerAcerca .container{
    background: url(../images/imgBannerAcerca.svg) right 150px  top 90% no-repeat;
    background-size: auto 35%;
  }
  #ContGeoportal .col-md-4 img{
    max-width: 80%;
  }

  /* consulta */
  ul.tabs li a{
    font-size: 18px !important;
  }
  .variables{
    font-size: 0px !important;
    right: 0px;
    padding: 10px 10px 10px 20px;
  }

  .variables img{
    margin-top: 10px;
  }
  .variables .cont-variables{
    font-size: 14px !important;
  }
  #ContForm ul{
    padding-left: 0px;
  }
  .lateral-menu{
    width: 180px;
  }
  .lateral-menu ul{
    margin-left: 0px;
    padding-left: 1rem;
   }

   /** menu mobile **/
   .navbar-collapse{
    height: 90vh;
    padding-top: 3rem;
  }
  .navbar-collapse .links-mobile{
    padding-top: 0rem;
    padding-bottom: 1.3rem;
    position: absolute;
    left: -33%;
    opacity: 0;
  }
  .navbar .navbar-collapse a.nav-link{
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
    font-size: 20px;
  }
  .navbar-collapse.show .links-mobile{
    opacity: 1;
  }

  button.navbar-toggler[aria-expanded="false"] .navbar-toggler-icon{
    background-image: var(--bs-navbar-toggler-icon-bg);
    background-repeat: no-repeat;
  }
  button.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
    background-image: url(../images/icnCerrarMenu.svg);
    background-repeat: no-repeat;
    background-size: 20px;
  }
  #ContForm .gap-5 {
    gap: 1rem!important;
  }
  ul.tabs li a{
    font-size: 0.8em !important;
    padding: 16.5px 10px;
  }
 }

 /* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 
  /* consulta */
  ul.tabs li a{
    font-size: 16px !important;
    padding: 1.2rem 1.2rem;
  }
  .variables{
    font-size: 0px !important;
  }
  .variables img{
    margin-top: 10px;
  }
  .lateral-menu{
    display: none;
  }
  #BannerAcerca h1{
    margin-top: 0rem;
  }
  #BannerAcerca .container {
    background: url(../images/imgBannerAcerca.svg) right bottom 10% no-repeat;
    background-size: auto 35%;
  }
  /* contacto */
  #BannerContactanos h1{
    font-size: 36px !important;
    margin-top: 0px;
  }
  #BannerContactanos .container {
    background: url(../images/imgBannerContacto.svg) right bottom no-repeat;
    background-size: auto 200px;
  }
  #ContForm h2{
    margin-bottom: 1rem;
  }
  .menu-desktop{
    display: none;
  }
  .dropdown.dropdown-movil{
    display: block;
    padding: 0px;
  }
  .btn.btn-secondary.dropdown-toggle{
    height: 52.2px;
    width: 158px;
  }
  .dropdown-menu.show{
    padding: 0px;
    margin-top: -3px !important;
  }

  .dropdown.dropdown-movil .dropdown-menu li{
    display: block;
  }
  
 }



/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
  .pt-5{
    padding-top:1rem !important;
  }
  .py-5 {
    padding-top: 2rem!important;
    padding-bottom: 2rem!important;
  }
  #BannerHome h1{
    font-size: 24px !important;
    margin-top: 18%;
    margin-bottom: 20px;
  }
  #BannerHome .col-8{
    width: 100%;
  }
  #BannerHome .btn-light{
    margin-bottom: 10px;
    background: #745FE7;
    min-width: 236px;
    text-align: left;
  }
  #BannerHome .container {
    background: url(../images/imgBannerHome.svg) right bottom no-repeat;
    background-size: 80%;
  }
  #ContGeoportal img{
    max-width: 250px;
    margin-bottom: 2rem;
  }
  #ContGeoportal .col-md-4{
    text-align: center;
  }
  h2{
    font-size: 30px !important;
  }
  .card h5{
    font-size: 24px;
  }
  .card img{
    margin-bottom: 1rem;
  }
  #ContCaracteristicas .row.py-5{
    padding-top: 0px !important; 
    padding-bottom: 0px !important;
  }
  #ContEquipo .row.py-5{
    padding-top: 0px !important; 
    padding-bottom: 0px !important;
  }
  /* Acerca de */
  .lateral-menu{
    display: none;
  }
  #BannerAcerca h1{
    font-size: 18px !important;
  }
  #BannerAcerca .container {
    background: url(../images/imgBannerAcerca.svg) right 90% no-repeat;
    background-size: auto 35%;
  }
  #ContGeoportal h2{
    font-size: 29px !important;
  }
  #ContGeoportal p{
    text-align: start;
  }
  /* Consulta */
  .header-tabs .col-8{
    padding-left: 0px !important;
    padding-right: 0px !important;
    width: 75%;
  }
  .header-tabs .col-4{
    width: 24%;
  }
  /* contacto */
  #BannerContactanos h1{
    font-size: 30px !important;
    margin-top: 0px;
  }
  #BannerContactanos .container {
    background: url(../images/imgBannerContacto.svg) right bottom no-repeat;
    background-size: auto 50%;
  }
  #BannerContactanos p {
    text-shadow: #fff 2px 0 1px;
}
  #ContForm h2{
    margin-bottom: 1rem;
  }
  #ContForm .py-5.grid {
    padding-bottom: 0px !important;
  } 
  #BtnUpdate, #BtnReset{
    font-size: 14px;
    padding: 0.7rem 0.8rem;
  }
}