@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;800;900&display=swap');

/*<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">*/
:root {
  /*--c-primary: #63ae6f; */
  --c-primary: #0095D9;
  --c-primary-filter: invert(50%) sepia(35%) saturate(7365%) hue-rotate(172deg) brightness(95%) contrast(101%);
  /*Azul oscuro*/
  --c-secondary: #12394B;
  /* Azul claro */
  --c-terciary: #F4F7F6;
  /* Gris de fondo principal */
  --c-hover: #222;

  --color1: var(--c-primary);
  --color2: #D9A70B;
  --color3: #D93F0B;
  --color4: #CB16D9;

  --r-facebook: #3C5A99;
  --r-twitter: #00A9FF;
  --r-homea: #F7941E;
  --r-houzz: #77BC42;
  --r-yelp: #D32323;
  --r-google: #DD4B39;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */
}

html {
  font-size: 20px;
}

body {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
  background-color: #fff;
  color: #000;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
.title,
.subtitle {
  font-family: 'Montserrat', sans-serif;
}

a {
  color: var(--c-primary);
  text-decoration: none;
}

b {
  font-weight: 700;
}

/* Inputs */
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  display: inline-block;
  width: 100%;
  border: 1px solid #ebebeb;
  background-color: #fff;
  padding: 0 10px;
  margin-bottom: 0px;
  font-size: 0.65rem;
  height: 34px;
  outline: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
select::placeholder,
textarea::placeholder {
  opacity: 0.8;
  color: #666666;
}

input[type="number"],
input[type="tel"] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

button,
input[type="submit"] {
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: var(--c-hover);
  color: white;
}

select {
  vertical-align: middle;
  /* background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px; */
  /*background: url("data:image/svg+xml,%3csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='sort-down' class='svg-inline--fa fa-sort-down fa-w-10' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3e%3cpath fill='%23333' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z'%3e%3c/path%3e%3c/svg%3e") no-repeat right .8rem center/10px 12px;*/
  background: url("data:image/svg+xml,%3csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='chevron-down' class='svg-inline--fa fa-chevron-down fa-w-14' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3cpath fill='%23000' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'%3e%3c/path%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
  background-repeat: no-repeat;
  background-position: calc(100% + -12px) 50%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  cursor: pointer;
}

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  background-color: #f9f9f9;
  border: 0;
  border-bottom: 1px solid #ddd;
  height: 45px;
}


.btn {
  display: inline-block !important;
  font-size: 0.6rem;
  padding: 10px 14px;
  font-weight: 600;
  display: inline-block;
  border: 0;
  background-color: #c8c8c8;
  color: #222;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

.btn-primary {
  background-color: var(--c-primary);
  background-image: linear-gradient(135deg, var(--c-primary) 0%, #9599E2 100%);
  color: white;
}


.modal {
  display: none;
}
.mojito-modal-div .modal{
  display: block
}

.mojito-modal-div .modal h1,
.mojito-modal-div .modal h2,
.mojito-modal-div .modal h3,
.mojito-modal-div .modal h4,
.mojito-modal-div .modal h5{
  font-size: 0.7rem;
  font-weight: 600;
}


.title {
  font-size: 1.7rem;
  font-weight: 600;
  color: #444;
  margin-top: 0;
  margin-bottom: 7px;
  display: block;
}

.title.rayita:after {
  content: "";
  display: block;
  height: 2px;
  background-color: #333;
  width: 100px;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 20px;
}

h2.title {
  padding-bottom: 25px;
}

.subtitle {
  font-weight: 600;
  color: var(--c-secondary);
  font-size: 0.9rem;
  margin-bottom: 25px;
}

.text {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.7;
  letter-spacing: 0.3px;
}

@media screen and (max-width:766px) {
  .title {
    font-size: 1.5rem;
  }

  .subtitle {
    font-size: 0.8rem;
  }
}

.flex-form>* {
  width: 100%;
  padding-bottom: 35px;
  position: relative
}

@media screen and (min-width:900px) {
  .show-mobile {
    display: none
  }

  .text-center {
    text-align: center
  }

  .text-right {
    text-align: right
  }

  .flex-form {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px
  }

  .flex-form label {
    display: block;
    padding-bottom: 10px
  }

  .flex-form>* {
    width: 100%;
    padding-left: 20px;
    padding-bottom: 35px;
    position: relative
  }

  .flex-form>*.f-col-2 {
    width: calc(100% / 2)
  }

  .flex-form>*.f-col-3 {
    width: calc(100% / 3)
  }

  .flex-form>*.f-col-4 {
    width: calc(100% / 4)
  }

  .flex-form>*.f-col-5 {
    width: calc(100% / 5)
  }

  .flex-form>*.f-col-6 {
    width: calc(100% / 6)
  }
  
  span.error-input {
    color: red;
    text-align: left;
    display: block;
    font-size: 12px;
    padding-top: 5px;
  }
}