/****************************************************************************************************
                         * ganesh-o-css v2.0  - ganeshaproduccions.com *
          * varibales, flex columns, spacing, fluit type, buttons, forms, tables & helpers *
          * extra assets: hero, cards, swiper slider, custom select *
****************************************************************************************************/

/*--------------------------------------------------------------
RESET ...based on https://bitsofco.de/my-css-reset-base/
--------------------------------------------------------------*/
html,body,h1,h2,h3,h4,h5,h6,a,p,span,em,small,strong,sub,sup,mark,del,ins,strike,abbr,dfn,blockquote,q,cite,code,pre,ol,ul,li,dl,dt,dd,div,section,article,main,aside,nav,header,hgroup,footer,img,figure,figcaption,address,time,audio,video,canvas,iframe,details,summary,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0}html{font-size:100%;box-sizing:border-box}body{font-size:1rem;line-height:1.5}*{box-sizing:inherit;font-family:inherit;font-size:inherit;line-height:inherit}*:before,*:after{box-sizing:inherit}a,a:visited{color:inherit}strong{font-weight:700}article,aside,footer,header,nav,section,main{display:block}table{border-collapse:collapse;border-spacing:0}ol,ul{list-style:none}img,video,object{max-width:100%;border-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}[hidden]{display:none!important}[disabled]{cursor:not-allowed;pointer-events:none;opacity:0.5}:focus:not(:focus-visible){outline:none}.sr-only{position:absolute;clip:rect(1px,1px,1px,1px);left:-9999px;top:-9999px}

/*--------------------------------------------------------------
VARIABLES FOTOCASA PRO
--------------------------------------------------------------*/
/*
xsmall:  480px;
small:   767px;
medium:  1024px;
large:   1400px;
*/

/*CONTAINER & SPAC*/
:root {
  --width-full: 1400px;
  --width-wide: 92vw;
  --break: 1em;
  --void: 5em;
  --radius: 8px;

/*COLORS*/
  --color-base: #575757;
  --color-primary: #1E22AA;
  --color-secondary: #0072CE;
  --color-primary-habitaclia: #FF6600;
  --color-secondary-habitaclia: #F2C94C;
  --color-primary-milanuncios: #18BA5D;
  --color-secondary-milanuncios: #22FE6D;
  /*--color-primary-milanuncios: #079146;
  --color-secondary-milanuncios: #6FCF97;*/
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-border: #EEEEEE;
  --color-gray-light: #F1F1F1;
  --color-gray-medium: #828282;
  --color-gray-soft: #BDBDBD;
  --color-error: #EB5757;

/*FONT*/
  --font-text: 'Open Sans', Arial, Helvetica, sans-serif;
  --font-light:300;
  --font-regular:400;
  --font-medium:500;
  --font-semibold:600;
  --font-bold:700;
  --font-height: 1.4;
  --font-height-heading: 1.3;

  /*
    FLUID TYPOGRAPHY [https://websemantics.uk/tools/responsive-font-calculator/]
    Range 18px - 16px; Viewport: 1200px -  480px; Safari fix: min-height: 0vw;
  */
  --font-base: clamp(16px, calc(1rem + ((1vw - 4.8px) * 0.2778)), 18px);

  /* clamp * scale 1.333 [https://type-scale.com] */
  --step--1: 0.813rem;
  --step-0: var(--font-base);
  --step-1: calc(var(--font-base) * 1.225);
  --step-2: calc(var(--font-base) * 1.56);
  --step-3: calc(var(--font-base) * 1.92);
  --step-4: calc(var(--font-base) * 2.25);
  --step-5: calc(var(--font-base) * 3.05);
  --step-6: calc(var(--font-base) * 3.8125);
}


/*--------------------------------------------------------------
FLEX COLUMNS ...based on https://milligram.io
--------------------------------------------------------------*/
.container {
  position: relative;
  max-width: var(--width-full);
  width: calc(100% - 2em);
  margin: 0 auto;
}
.container-wide {
  position: relative;
  max-width: var(--width-full);
  width: calc(100% - 2em);
  margin: 0 auto;
}
@media screen and (min-width: 1201px){
  .container-wide{
    max-width: 100%;
    width: var(--width-wide);
  }
}
.row {
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 100%;
}
.row.no-padding > .column {
  padding: 0;
}
.row.row-wrap {
  flex-wrap: wrap;
}
.row.row-top{
  align-items: flex-start;
}
.row.row-bottom{
  align-items: flex-end;
}
.row.row-center{
  align-items: center;
}
.row.row-stretch{
  align-items: stretch;
}
.row.column-start{
  justify-content: flex-start;
}
.row.column-end{
  justify-content: flex-end;
}
.row.column-center{
  justify-content: center;
}
.row.column-around{
  justify-content: space-around;
}
.row.column-between{
  justify-content: space-between;
}
.row.flexcenter {
  justify-content: center;
  align-items: center
}
.row .column {
  display: block;
  flex: 1 1 auto;
  margin-left: 0;
  max-width: 100%;
  width: 100%;
}
.row .column.contentsize {
  flex: 0 0 content;
}
.row [class^=".column.column-"]{
  flex: 0 0 100%;
  max-width: 100%;
}
.column .flex {
  flex:1;
}
.column .column-top {
  align-self: flex-start
}
.column .column-bottom {
  align-self: flex-end
}
.column .column-center {
  align-self: center
}
@media only screen and (min-width: 1025px) {
  .row {
      flex-direction: row;
  }
  .row.direction-reverse{
    flex-direction: column;
  }
  .row.row-reverse{
    flex-direction: row-reverse;
  }
  .row.column-reverse{
    flex-direction: column-reverse;
  }
  .row .column {
    margin-bottom: inherit;
    padding: 0 1rem;
  }
  .column.column-offset-1 {
    margin-left: 8.33%;
  }
  .column.column-offset-2 {
    margin-left: 16.66%;
  }
  .column.column-offset-3 {
    margin-left: 25%;
  }
  .column.column-offset-4 {
    margin-left: 33.33%;
  }
  .column.column-offset-5 {
    margin-left: 41.66%;
  }
  .column.column-offset-6 {
    margin-left: 50%;
  }
  .column.column-offset-7 {
    margin-left: 58.33%;
  }
  .column.column-offset-8 {
    margin-left: 66.66%;
  }
  .column.column-offset-9 {
    margin-left: 75%;
  }
  .column.column-offset-10 {
    margin-left: 83.33%;
  }
  .column.column-1 {
    flex: 0 0 8.33%;
    max-width: 8.33%;
  }
  .column.column-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }
  .column.column-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .column.column-4 {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
  .column.column-5 {
    flex: 0 0 41.66%;
    max-width: 41.66%;
  }
  .column.column-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .column.column-7 {
    flex: 0 058.33%;
    max-width:58.33%;
  }
  .column.column-8 {
    flex: 0 0 66.66%;
    max-width: 66.66%;
  }
  .column.column-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .column.column-10 {
    flex: 0 0 83.33%;
    max-width: 83.33%;
  }
  .column.column-11 {
    flex: 0 0 91.66%;
    max-width: 91.66%;
  }
  .column.column-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
  .row.column-6-for-medium{
    flex-direction: row;
    flex-wrap: wrap;
  }
  .column-6-for-medium .column{
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/*--------------------------------------------------------------
SPACING
--------------------------------------------------------------*/
.split{
  padding-bottom: var(--void);
}
.split-top{
  padding-top: var(--void);
}
.split-margin{
  margin-bottom: var(--void);
}
.half-split{
  padding-bottom: calc(var(--void) / 2);
}
.half-split-top{
  padding-top: calc(var(--void) / 2);
}
.half-split-margin{
  margin-bottom: calc(var(--void) / 2);
}
@media screen and (max-width: 1024px) {
  .split{
    padding-bottom: calc(var(--void) / 1.5);
  }
  .split-top{
    padding-top: calc(var(--void) / 1.5);
  }
  .split-margin{
    margin-bottom: calc(var(--void) / 1.5);
  }
}

/*--------------------------------------------------------------
FLUID MODULAR TYPE SCALES
https://utopia.fyi/generator/?c=320,16,1.2,1200,21,1.333,5,2,
--------------------------------------------------------------*/
html,
html:focus-within{
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-text);
  font-size: var(--font-base);
  font-weight: var(--font-regular);
  line-height: var(--font-height);
  color: var(--color-base);
  margin:0;
  min-height: 0vw;
}
h1, h2, h3, h4, h5, h6{
  font-family: var(--font-text);
  font-weight: var(--font-regular);
  line-height: var(--font-height-heading);
  padding-bottom: calc(var(--break) / 2);
}
h1 {
  font-size: var(--step-4);
}
h2 {
  font-size: var(--step-3);
}
h3 {
  font-size: var(--step-3);
}
h4 {
  font-size: var(--step-2);
}
h5 {
  font-size: var(--step-1);
}
h6 {
  font-size: var(--step-0);
}
p{
  font-size: var(--step-0);
  padding-bottom: var(--break);
}
strong, b{
  font-weight: var(--font-semibold);
}
small {
  font-size: var(--step--1);
}
a,
a:visited{
  color: var(--color-primary);
  transition: all 0.4s ease-in-out;
  touch-action: manipulation;
}
a:hover,
a:active{
  color: var(--color-secondary);
  text-decoration: none;
}
ul, ol{
  list-style: disc;
  list-style-position: outside;
  padding-left: calc(var(--break) * 1.5);
  padding-top: calc(var(--break) / 1.5);
  padding-bottom: var(--break);
}
ol{
  list-style-type: decimal;
}
li ul{
  list-style: circle;
  padding-left: var(--break);
  padding-bottom: 0;
}
li{
  padding-bottom: calc(var(--break) / 2);
}
li li{
  padding-bottom: calc(var(--break) / 4);
}

/*--------------------------------------------------------------
BUTTONS
--------------------------------------------------------------*/
button,
.button,
a.button,
input[type="submit"]{
  cursor: pointer;
  display: inline-flex;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  border-radius: var(--radius);
  margin-top: var(--break);
  margin-bottom: var(--break);
  padding: calc(var(--break) / 1.25) calc(var(--break) * 1.5);
  font-size: var(--step-0);
  line-height: 1;
  font-weight: var(--font-semibold);
  transition: all 0.4s ease-in-out;
  touch-action: manipulation;
}
button[disabled],
.button[disabled],
a.button[disabled],
input[type="text"]:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.button-primary,
.button-primary:visited,
input[type="submit"],
input[type="submit"]:visited{
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-white);
}
.button-primary:active,
.button-primary:focus,
.button-primary:hover,
input[type="submit"]:hover,
input[type="submit"]:focus {
  outline: 0;
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}
.button-primary:focus,
input[type="submit"]:focus {
  border-color: var(--color-primary);
}
.button-ghost,
.button-ghost:visited {
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  max-height: 50px;
}
.button-ghost:active,
.button-ghost:focus,
.button-ghost:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.button-ghost:focus{
  border-color: var(--color-secondary);
}
@media screen and (max-width: 767px) {
  button,
  .button,
  a.button,
  input[type="submit"]{
    white-space: wrap;
  }
}

/*--------------------------------------------------------------
FORMS
--------------------------------------------------------------*/
input,
textarea,
select,
fieldset {
  margin-bottom: calc(var(--break) * 1.25);
}
input,
textarea, {
  margin-top: calc(var(--break) / 3);
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="password"],
input[type="button"],
input[type="submit"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  width: 100%;
  line-height: 1;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  padding: calc(var(--break) / 2);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  outline: 0;
  border: 1px solid var(--color-secondary);
}
input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="search"]:disabled,
input[type="text"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
input[type="password"]:disabled,
textarea:disabled,
select:disabled {
  border-color: var(--color-gray-medium);
  color: var(--color-gray-medium);
  opacity: 1;
}
textarea{
  min-height: 80px;
}
label,
legend {
  display: block;
  margin-bottom: calc(var(--break) / 3);
  line-height: 1;
  font-weight: var(--font-semibold);
  line-height: 1.25;
}
label input{
  margin-top: calc(1em / 3);
  margin-top: calc(var(--break) / 3);
}
fieldset {
  padding: 0;
  border-width: 0;
}
input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: calc(var(--break) / 2);
  vertical-align: 3px;
}
::placeholder {
  color: var(--color-gray-soft) !important;
  opacity: 1;
}
:-ms-input-placeholder {
  color: var(--color-gray-soft) !important;
}
::-ms-input-placeholder {
  color: var(--color-gray-soft) !important;
}

/*--------------------------------------------------------------
TABLES
--------------------------------------------------------------*/
table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}
table tr {
  border-bottom: 1px solid var(--color-border);
  padding: 0.25em;
}
table th,
table td {
  padding: 0.5em;
  text-align: left;
}
@media screen and (max-width: 767px) {
  table {
    border: 0;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    border-bottom: 2px solid var(--color-border);
    display: block;
    margin-bottom: 0.5em;
  }
  table td {
    border-bottom: 1px solid var(--color-border);
    display: block;
    font-size: 0.813em;
    text-align: right;
  }
  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  table td:last-child {
    border-bottom: 0;
  }
}

/*--------------------------------------------------------------
HELPERS
--------------------------------------------------------------*/
@media screen and (min-width: 1401px) {
  .hide-xlarge{
    display: none
  }
}
@media screen and (min-width: 1025px) {
  .show-large{
    display: inherit !important;
  }
  .show-medium-small{
    display: none !important;
  }
}
@media screen and (min-width: 768px) {
  .show-medium{
    display: inherit !important;
  }
  .show-small{
    display: none !important;
  }
}
@media screen and (max-width: 1024px) {
  .show-large{
    display: none !important;
  }
  .show-medium-small{
    display: inherit !important;
  }
}
@media screen and (max-width: 767px) {
  .show-medium{
    display: none !important;
  }
  .show-small{
    display: inherit !important;
  }
}
.clearfix:after {
  clear: both;
  content: " ";
  display: table
}
.text-left{
  text-align: left;
}
.text-right{
  text-align: right;
}
.text-center{
  text-align: center;
}
.float-left {
  float: left
}
.float-right {
  float: right
}
.inline-list{
  margin-left: calc(var(--break) / -2);
  margin-right: calc(var(--break) / -2);
  padding-left: 0;
}
.inline-list li{
  display: inline-block;
  list-style-type: none;
  padding-bottom: 0;
  padding-left: calc(var(--break) / 2);
  padding-right: calc(var(--break) / 2);
}
.no-bullet{
  list-style: none;
  padding-left: 0;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-divider{
  display: flex;
  align-items: center
}
.text-divider::before{
  content: "";
  height: 1px;
  background: var(--color-primary);
  flex-grow: 1;
}
.text-divider::after{
  content: "";
  height: 1px;
  background: var(--color-primary);
  flex-grow: 1;
}
.text-divider::before{
  margin-right: calc(var(--break) / 4);
}
.text-divider::after{
  margin-left: calc(var(--break) / 4);
}


/*--------------------------------------------------------------
EXTRA ASSETS
--------------------------------------------------------------*/
/*--------------------------------------------------------------
HERO [https://hero-generator.netlify.app]
--------------------------------------------------------------*/
.hero {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding-bottom: 0;
  background-size: cover;
}
.hero .row{
  height: 100%;
  flex-direction: column;
}
.hero h1 {
  color: var(--color-white);
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8);
}
.hero button,
.hero .button,
.hero a.button{
  margin-bottom: 0;
}

/*--------------------------------------------------------------
CARDS [https://labs.jensimmons.com/2017/03-009.html]
--------------------------------------------------------------*/
.card-wrapper article{
  margin: 1rem 0;
}
@supports (display: grid) {
  .card-wrapper article {
    margin: 0;
  }
  .card-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1rem;
  }
}
.card-item {
  display: flex;
  flex-flow: column;
  border:  1px solid var(--color-border);
  padding:calc(var(--void) / 3);
}
.card-item > img {
  order: -1;
  align-self: center;
  padding-bottom:calc(var(--void) / 3);
}
.card-item > button {
  margin-top: auto;
  margin-bottom: 0;
  align-self: flex-start;
}

/*--------------------------------------------------------------
SWIPER [https://swiperjs.com]
--------------------------------------------------------------*/
/*Use it if images have different heigts*/
.swiper-container {
  max-height: 780px;
  height: 100%;
}
.swiper-button-next{
  color: var(--color-border);
  transition: all 0.2s ease-in-out;
}
.swiper-button-prev{
  color: var(--color-border);
  transition: all 0.2s ease-in-out;
}
.swiper-button-next:hover{
  color: var(--color-primary);
}
.swiper-button-prev:hover{
  color: var(--color-primary);
}
.swiper-pagination-bullet{
  background-color: var(--color-white);
}
.swiper-pagination-bullet:hover,
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--color-primary);
  opacity: 1;
}

/*--------------------------------------------------------------
CUSTOM SELECT FORM
--------------------------------------------------------------*/
.custom-select {
  display: block;
  width: 100%;
  max-width: 100%;
  line-height: 1.4;
  box-sizing: border-box;
  padding: calc(var(--break) / 2);
  margin-bottom: var(--break);
  border: 1px solid var(--color-border);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24px' height='14px' viewBox='0 0 24 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3ESVG Layer%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(1.000000, 1.000000)' stroke='%23DA0862' stroke-width='1'%3E%3Cpolyline id='Path' points='0 0.5 11 11.5 22 0.5'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px top 55%;
}
.custom-select::-ms-expand {
  display: none;
}
.custom-select:focus {
  border: 1px solid var(--color-secondary);
  outline: none;
}
.custom-select option {
  font-weight:normal;
}
.custom-select:disabled {
  color: var(--color-gray-medium);
  border-color: var(--color-gray-medium);
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24px' height='14px' viewBox='0 0 24 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3ESVG Layer%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(1.000000, 1.000000)' stroke='%23ACACAC' stroke-width='1'%3E%3Cpolyline id='Path' points='0 0.5 11 11.5 22 0.5'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.custom-select[aria-disabled=true] {
  color: var(--color-gray-medium);
  border-color: var(--color-gray-medium);
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24px' height='14px' viewBox='0 0 24 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3ESVG Layer%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(1.000000, 1.000000)' stroke='%23ACACAC' stroke-width='1'%3E%3Cpolyline id='Path' points='0 0.5 11 11.5 22 0.5'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.custom-select:disabled:hover {
  border-color: var(--color-gray-medium);
}
.custom-select[aria-disabled=true] {
  border-color: var(--color-gray-medium);
}